/* The Analysis Kit: control bar, figure strip, chart card, action item, side-by-side card.
 *
 * **HIS DRAWING (Analysis Kit, 13 Oct 2026), IN KARTAAN'S OWN COLOURS.** Every colour is a token; the
 * platform colours are the ones the whole product already uses, never the drawing's own hexes. Green
 * and red mean only better and worse. Phone first: one column and 44px targets under 600px, which is
 * where the product's other screens fold too.
 */

.k-analysis {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* NOTHING ON THESE SCREENS MAY WIDEN THE PAGE: what is too wide scrolls inside its own card. */
  min-width: 0;
  max-width: 100%;
}

.k-analysis > * {
  min-width: 0;
}

/* ------------------------------------------------------------- the layout */

.k-analysis__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.k-analysis__full {
  grid-column: 1 / -1;
}

.k-analysis__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.k-analysis__blocktitle {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.k-analysis__blockhint {
  color: var(--text-muted);
  font-size: 12.5px;
}

/* ------------------------------------------------------------ control bar */

.k-analysis-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.k-analysis-bar__wide {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.k-analysis-bar__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.k-analysis-bar__field--grow {
  flex: 1;
  min-width: 0;
}

.k-analysis-bar__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.k-analysis-bar__segments {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.k-analysis-bar__segment--on {
  background: var(--brand);
  color: var(--on-brand);
}

.k-analysis-bar__range {
  padding-bottom: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.k-analysis-bar__compact {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.k-analysis-bar__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.k-analysis-bar__summary {
  font-size: 12px;
  color: var(--text-muted);
}

.k-analysis-bar__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.k-analysis-bar__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.k-analysis-bar__note {
  font-size: 12.5px;
  color: var(--text-tint);
}

/* ----------------------------------------------------------- figure strip */

.k-figures {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.k-figures__caption {
  font-size: 12px;
  color: var(--text-muted);
}

.k-figures__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.k-figures__grid[data-count='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.k-figures__grid[data-count='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.k-figure {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}

.k-figure__label {
  font-size: 12.5px;
  color: var(--text-muted);
}

.k-figure__value {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text);
}

.k-figure__value--missing {
  color: var(--text-subtle);
}

.k-figure__moved {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  font-size: 12.5px;
}

.k-figure__change {
  font-weight: 700;
  color: var(--text-muted);
}

.k-figure__change--better,
.k-chart__moved--better,
.k-chart__td--better {
  color: var(--ok);
}

.k-figure__change--worse,
.k-chart__moved--worse,
.k-chart__td--worse {
  color: var(--danger);
}

.k-figure__vs {
  color: var(--text-subtle);
}

.k-figure__note {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- chart card */

.k-chart,
.k-compare,
.k-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}

.k-chart__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.k-chart__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.k-chart__title,
.k-compare__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.k-chart__period,
.k-compare__period {
  font-size: 12px;
  color: var(--text-muted);
}

.k-chart__takeaway,
.k-compare__takeaway {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.k-chart__pin {
  flex: none;
  white-space: nowrap;
}

.k-chart__pin--on {
  background: var(--brand);
  color: var(--on-brand);
}

.k-chart__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.k-chart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.k-chart__dash {
  font-size: 26px;
  line-height: 1;
  color: var(--text-subtle);
}

.k-chart__emptyline {
  max-width: 330px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.k-chart__canvas {
  position: relative;
  width: 100%;
}

.k-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--text-muted);
}

.k-chart__legenditem {
  display: flex;
  align-items: center;
  gap: 6px;
}

.k-chart__key {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2.5px solid var(--text);
}

.k-chart__key--dashed {
  border-top: 2px dashed var(--border-strong);
}

.k-chart__key--swatch,
.k-chart__key--faint {
  height: 10px;
  border-top: 0;
  border-radius: 2px;
  background: var(--text-muted);
}

.k-chart__key--faint {
  opacity: 0.3;
}

.k-chart__bars {
  display: flex;
  flex-direction: column;
}

.k-chart__barrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}

.k-chart__dot {
  width: 9px;
  height: 9px;
  align-self: center;
  border-radius: 2px;
}

.k-chart__barname {
  font-weight: 700;
}

.k-chart__share {
  font-size: 12px;
  color: var(--text-subtle);
}

.k-chart__spacer {
  flex: 1;
}

.k-chart__barvalue {
  font-weight: 700;
}

.k-chart__moved {
  min-width: 64px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.k-chart__ranked {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.k-chart__rank {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
}

.k-chart__rankno {
  grid-row: span 2;
  align-self: start;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
}

.k-chart__rankname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}

.k-chart__rankvalue {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
}

.k-chart__rankvalue--worse {
  color: var(--danger);
}

.k-chart__track {
  grid-column: 2 / 4;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.k-chart__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--text-subtle);
}

.k-chart__fill--worse {
  background: var(--danger);
}

.k-chart__table {
  overflow-x: auto;
}

.k-chart__grid {
  display: grid;
  width: max-content;
  min-width: 100%;
  column-gap: 14px;
}

/* A row is only a handle for its cells: the cells sit in the table's one grid. */
.k-chart__tr {
  display: contents;
}

.k-chart__tr .k-chart__td {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.k-chart__tr--head .k-chart__td {
  padding-top: 0;
  border-bottom-color: var(--border-strong);
}

.k-chart__tr--head .k-chart__td {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.k-chart__tr--total .k-chart__td {
  font-weight: 700;
}

.k-chart__td {
  font-size: 13px;
  white-space: nowrap;
}

.k-chart__td--num {
  text-align: right;
}

.k-chart__note {
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tint);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.k-chart__toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--surface);
  background: var(--text);
  border-radius: var(--radius);
}

.k-chart__toasttext {
  flex: 1;
}

/* The three small buttons are the product's own quiet buttons (button.css); only the Undo on the dark bar
 * needs a colour that can be read there. */
.k-chart__undo {
  color: var(--accent);
}

.k-chart__foot,
.k-chart__homefoot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.k-chart__homefoot {
  font-size: 12.5px;
  color: var(--text-muted);
}

.k-chart__homewhen {
  flex: 1;
}

/* ----------------------------------------------------------- action items */

.k-actions {
  gap: 8px;
}

.k-actions__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.k-actions__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.k-actions__count {
  font-size: 12px;
  color: var(--text-muted);
}

.k-actions__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.k-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.k-action--missing {
  background: var(--surface-raised);
}

.k-action__text {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.k-action__badge {
  flex: none;
  min-width: 44px;
  margin-top: 1px;
  padding: 3px 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 999px;
}

.k-action--missing .k-action__badge {
  color: var(--text-muted);
  background: var(--surface);
  border-color: var(--border);
}

.k-action__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.k-action__what {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.k-action__todo {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.k-action__button {
  flex: none;
  margin-left: 56px;
}

.k-actions__empty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.k-actions__none {
  font-size: 15px;
  font-weight: 700;
}

.k-actions__checked {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- side by side */

/* One small chart for each figure, one bar for each thing, the value at the end of its bar (D355). */
.k-compare__charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.k-compare__chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.k-compare__rowname {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.k-compare__bar {
  display: grid;
  grid-template-columns: minmax(70px, 30%) minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}

.k-compare__thing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-width: 0;
}

.k-compare__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--text-subtle);
}

.k-compare__name {
  font-size: 13px;
  font-weight: 700;
}

.k-compare__id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
}

.k-compare__track {
  height: 10px;
  border-radius: 5px;
  background: var(--border);
  overflow: hidden;
}

.k-compare__fill {
  height: 100%;
  border-radius: 5px;
  background: var(--text-subtle);
}

.k-compare__fill--worse {
  background: var(--danger);
}

.k-compare__end {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 64px;
  text-align: right;
}

.k-compare__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.k-compare__bar--missing .k-compare__value {
  color: var(--text-subtle);
}

.k-compare__best {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ok);
}

.k-compare__why {
  flex-basis: 100%;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-muted);
}

.k-compare__note {
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tint);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 600px) {
  .k-analysis__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .k-analysis-bar__wide {
    display: none;
  }

  .k-analysis-bar__compact {
    display: flex;
  }

  .k-figures__grid,
  .k-figures__grid[data-count] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .k-figures__grid[data-count='3'] .k-figure:first-child,
  .k-figures__grid[data-count='5'] .k-figure:first-child {
    grid-column: 1 / -1;
  }

  .k-compare__charts {
    grid-template-columns: minmax(0, 1fr);
  }

  .k-action__button {
    margin-left: 56px;
  }
}

/* A dropdown with a long choice (a listing and its product) stays inside the screen. */
.k-analysis label {
  max-width: 100%;
}

.k-analysis select.k-control {
  max-width: 100%;
}