/* The command center, and the panel furniture every dashboard page shares:
 * deltas, the panel head and kicker, metric cards, the channel table and the
 * source lozenge. Page-specific report layouts live under reports/. */

/*
 * Deltas are the system's semantic pair: success for a figure that rose,
 * warning for one that fell — a fall is something to look at, not an error.
 * Both clear 4.5:1 on paper and ivory.
 */
.delta {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.delta--up {
  color: var(--k-color-success);
}

.delta--down {
  color: var(--k-color-warning);
}

/* No measurable change, or nothing to compare against. Neither good nor bad,
   and it must not read as either. */
.delta--flat {
  color: var(--k-color-muted);
}

/* A figure that moved, where the direction it moved in is not an outcome — ad
   spend being the one. Darker than --flat, because the change is real and only
   its goodness is undecided. */
.delta--neutral {
  color: var(--k-color-ink-soft);
}

/* Access we have not been granted yet, stated where the shortfall would
   otherwise show up as data. */
.notice {
  margin: 0 0 14px;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--k-color-warning);
  background: var(--k-color-warning-bg);
  border: 1px solid color-mix(in srgb, var(--k-color-warning) 25%, transparent);
  border-radius: var(--k-radius-control);
}

/* The sales switch */

/* On the page rather than in the top bar: it moves this page's sales figures
   and nothing else, and the dates beside it are the window it chose. */
.sales-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 6px;
}

.sales-switch__label {
  font-size: 14px;
  font-weight: 600;
}

.sales-switch small {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

/* Sales headline band */

/* The page's one headline figure, on the same lavender as the rail so the
   two read as one system. A light surface, so nothing lime: a rise and a fall
   take the page's own success and warning, which clear 4.5:1 on lavender
   (6.1 and 5.9). Muted grey does not (4.25), so everything secondary here is
   the lavender text colour, which does (7.7). */
.revenue-band {
  display: grid;
  /* The headline column is as wide as its figure, so a six-digit sum never
     runs into the figures beside it; the figures take what is left. */
  grid-template-columns: minmax(280px, auto) minmax(0, 1fr);
  margin-top: 14px;
  --band-rule: color-mix(in srgb, var(--k-color-lavender-ink) 14%, transparent);
  color: var(--k-color-lavender-ink);
  background: var(--k-color-lavender);
  border-radius: var(--k-radius-panel);
}

.revenue-band .eyebrow,
.revenue-band .delta--flat {
  color: var(--k-color-lavender-text);
}

.revenue-band__headline {
  padding: 28px 30px;
  border-inline-end: 1px solid var(--band-rule);
}

.revenue-band__headline strong {
  display: block;
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(40px, 5cqi, 60px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  font-variant-numeric: tabular-nums;
}

.revenue-band__headline p {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--k-color-lavender-text);
}

.revenue-band__headline small {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-lavender-text);
}

.revenue-band__figures {
  display: grid;
  /* Three across while each has room for a figure, then fewer — a column
     narrower than its figure lets the figure run into the next. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 28px 30px;
}

.revenue-band__figures dt {
  font-size: 13px;
  color: var(--k-color-lavender-text);
}

.revenue-band__figures dd {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.6cqi, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* What the figure rests on — how many platforms a spend covers, or why there
   is no figure. It travels with the number it qualifies, never separately. */
.revenue-band__figures small {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--k-color-lavender-text);
}

/* Studio and online under a figure: the same two rows under each, label to
   the start and figure to the end, so the eye runs down a side across the
   band. Ruled off from the figure it splits, smaller than it. */
.revenue-band__split {
  display: grid;
  gap: 4px;
  max-width: 260px;
  margin: 14px 0 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid var(--band-rule);
  font-size: 13px;
}

.revenue-band__split li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--k-color-lavender-text);
}

.revenue-band__split b {
  font-weight: 600;
  color: var(--k-color-lavender-ink);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* The side's share of the whole, after its figure: quieter than the figure,
   and a fixed width so the figures above and below stay aligned. */
.revenue-band__split i {
  display: inline-block;
  min-width: 3.4em;
  font-style: normal;
  font-weight: 400;
  text-align: end;
  color: var(--k-color-lavender-text);
}

.revenue-band__headline .revenue-band__split-note {
  margin-top: 6px;
  font-family: inherit;
  line-height: 1.45;
}

/* Sections that are not a panel: a heading over cards or a table */

.command-section {
  margin-top: 30px;
}

.command-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.command-section__head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.command-section__head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--k-color-muted);
}

/* Needs attention: three findings, each a way into the page that owns it */

.attention-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
}

.attention-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px;
  text-decoration: none;
  color: inherit;
}

.attention-item + .attention-item {
  border-inline-start: 1px solid var(--k-color-line);
}

a.attention-item:hover {
  background: var(--k-color-lavender-soft);
}

.attention-item h3 {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.attention-item p {
  flex: 1;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-color-ink-soft);
}

/* A card that could not be evaluated states a rule, not a finding, and its
   heading steps back so it is not read as one. */
.attention-item--unknown h3 {
  color: var(--k-color-ink-soft);
}

.attention-item__go {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  color: var(--k-color-violet-deep);
}

.fragility-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 16px 22px;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  background: var(--k-color-lavender-soft);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
}

.fragility-summary > span:nth-child(2) {
  flex: 1;
}

.fragility-summary em {
  font-style: normal;
  color: var(--k-color-ink-soft);
}

.fragility-summary .attention-item__go {
  margin-top: 0;
}

/* Metric cards */

.metric-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

/* A button, not an article: the whole card opens the drawer behind it, and a
   click target that size has to be reachable by keyboard and announced as
   something that does anything. border-box because this stylesheet has no
   global reset and the card's padding would otherwise widen its grid track. */
.metric-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 20px 18px;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
  transition: border-color var(--k-duration-fast) var(--k-ease-standard);
}

.metric-card:hover {
  border-color: var(--k-color-control-border);
}

/* The marketing cards, which have nothing behind them to open. Same card, minus
   every affordance that would say otherwise. */
.metric-card--static,
.metric-card--static:hover {
  cursor: default;
  border-color: var(--k-color-line);
}

.metric-card h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--k-color-ink-soft);
}

.metric-card strong {
  display: block;
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(28px, 3cqi, 36px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metric-card p {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--k-color-muted);
}

/* The acquisition KPI: one line between the sales band and the trend,
   never a second band. Three ruled cells — the figure, the cohort, the
   basis — and the way to the panel, on the same hairline ruling the ink
   band uses one tone up, so the two read as one instrument. Each cell may
   wrap onto a second row and none may push the page wider. */

.acquisition-kpi {
  display: flex;
  align-items: center;
  gap: 0 24px;
  min-width: 0;
  margin-top: 14px;
  padding: 0 20px;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
}

/* The ruling is a left border on every cell but the first, drawn one cell
   width into a negative margin the list clips, so a cell that wraps onto a
   second row leaves its rule off the row's left edge. */
.acquisition-kpi__cells {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  margin: 0 0 0 -25px;
  overflow: hidden;
}

.acquisition-kpi__cell {
  min-width: 0;
  padding: 13px 28px 13px 24px;
  border-inline-start: 1px solid var(--k-color-line);
}

.acquisition-kpi__cell dt {
  font-size: 12px;
  line-height: 1.4;
  color: var(--k-color-muted);
}

.acquisition-kpi__cell dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--k-color-muted);
}

.acquisition-kpi__cell dd b {
  font-weight: 700;
  color: var(--k-color-ink);
}

.acquisition-kpi__cell--figure dd {
  margin-top: 3px;
}

.acquisition-kpi__cell--figure strong {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--k-color-violet-deep);
  font-variant-numeric: tabular-nums;
}

.acquisition-kpi__cell--figure .delta {
  font-size: 12px;
}

/* Why there is no change drawn, when the cohort is sound and simply has
   nothing before it: a sentence, so set in the prose face, not the mono the
   measured delta wears. */
.acquisition-kpi__note {
  font-size: 12px;
}

/* A basis short of the store's paid accounts is said in the warning colour,
   because "1/3 paid accounts" alone reads as a detail and not a caveat. */
.acquisition-kpi__warning {
  font-weight: 600;
  color: var(--k-color-warning);
}

.acquisition-kpi > .attention-item__go {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 13px 0;
}

@container page (width <= 940px) {
  .acquisition-kpi {
    flex-wrap: wrap;
  }

  .acquisition-kpi > .attention-item__go {
    margin-inline-start: 0;
    padding: 0 0 14px;
  }
}

/* Detail panels — the sales trend and the walk from gross to net beside it */

.detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.9fr);
  gap: 14px;
  margin-top: 14px;
}

/* The row sets the gap above it; a section's own would drop the bridge below
   the chart it sits beside. */
.detail-row > .report-section {
  margin-top: 0;
}

.panel {
  min-width: 0;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--k-color-line);
}

.panel-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* The line over a panel's heading, naming what kind of panel it is. Meta
   voice, normal case. */
.panel-kicker {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--k-color-muted);
}

.legend {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  margin: 0;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.legend-line {
  width: 16px;
  height: 2px;
  background: var(--k-color-violet);
}

/* The earlier period: the same mark, dashed and in the muted grey, as the
   line it names is. */
.legend-line--previous {
  margin-inline-start: 10px;
  background: repeating-linear-gradient(90deg, var(--k-color-muted) 0 4px, #0000 4px 7px);
}

/* The chart takes whatever height the row ends up with — the walk from gross
   to net beside it sets that, and a chart that stopped short of it would
   leave the panel half empty. */
.chart-panel {
  display: flex;
  flex-direction: column;
}

.chart-wrap {
  display: grid;
  flex: 1;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0 10px;
  min-height: 268px;
  margin: 0;
  padding: 18px 20px 14px;
}

.chart-ylabels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: end;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--k-color-muted);
}

.chart-plot {
  position: relative;
  min-width: 0;
}

/* The gridlines the y labels are read against: quarters of the box, which is
   the scale SalesChart rounds its axis to. */
.chart-grid {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    #0000 0 calc(25% - 1px),
    var(--k-color-line) calc(25% - 1px) 25%
  );
  border-bottom: 1px solid var(--k-color-control-border);
}

.chart-plot svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-area {
  fill: url("#chart-fill");
}

#chart-fill stop {
  stop-color: var(--k-color-violet);
}

.chart-line {
  fill: none;
  stroke: var(--k-color-violet);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-line--previous {
  stroke: var(--k-color-muted);
  stroke-width: 1.75;
  stroke-dasharray: 5 5;
}

/* What the lines drew, to the unit, folded under the chart. */
.chart-data {
  margin: 0 20px 18px;
  border-top: 1px solid var(--k-color-line);
}

.chart-data summary {
  padding: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--k-color-ink-soft);
}

.chart-data[open] summary {
  padding-bottom: 12px;
}

.chart-xlabels {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  grid-column: 2;
  height: 24px;
  margin: 0;
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.panel-footnote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 20px 18px;
  margin-top: auto;
  padding: 13px 15px;
  background: var(--k-color-lavender-soft);
  border-radius: var(--k-radius-control);
}

.panel-footnote p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-color-muted);
}

.mini-orbit {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-size: 10px;
  color: var(--k-color-violet-deep);
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-lavender);
  border-radius: 50%;
}

/* Six columns do not compress below this, and squeezing them would set the
   figures in a size nobody reads. The panel scrolls instead. */
.channel-scroll {
  overflow-x: auto;
  padding: 6px 20px 4px;
}

.channel-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

/* Three or four short columns fit any panel, and the floor above would only
   push the last of them under a scrollbar. */
.channel-table--narrow {
  min-width: 0;
}

.channel-table th,
.channel-table td {
  padding: 0;
  text-align: end;
  white-space: nowrap;
}

.channel-table thead th {
  padding-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--k-color-muted);
  border-bottom: 1px solid var(--k-color-line);
}

.channel-table tbody th,
.channel-table thead th:first-child {
  text-align: start;
}

.channel-table tbody th,
.channel-table tbody td {
  height: 54px;
  border-bottom: 1px solid var(--k-color-line);
}

.channel-table tbody tr:last-child th,
.channel-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Laid out inline rather than as a flex row. `display: flex` on a cell takes it
   out of table layout, and it stops stretching to the row — the bottom border
   then lands above every other cell's. */
.channel-table tbody th {
  font-size: 13px;
  font-weight: 700;
}

.channel-table tbody th span {
  vertical-align: middle;
}

.channel-table tbody td {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* The platform's initial in a lozenge, in the colours each ad platform is
   recognised by. The three inboxes below draw their logos instead. */
.source-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-inline-end: 9px;
  vertical-align: middle;
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: #fff;
  background: var(--k-color-ink-soft);
  border-radius: 6px;
}

.source-mark--meta {
  background: #1d45d8;
}

.source-mark--google {
  color: #3c4043;
  background: linear-gradient(135deg, #4285f4 0 45%, #fbbc05 45% 64%, #34a853 64%);
}

.source-mark--tiktok {
  background: #0b0e0f;
  box-shadow: 2px 0 #ff345e, -2px 0 #30f2ed;
}

/* The four inboxes carry their own logos, since a merchant scanning a
   mixed inbox reads the platform by its mark faster than by a letter — and so
   do Shopify and Google Analytics, for the Integrations tab, which draws every
   source as its mark. The
   letter stays in the markup for anything that reads text, and is made
   transparent here; the doubled class outranks the size and colour each
   placement sets on `.source-mark`. */
.source-mark.source-mark--instagram,
.source-mark.source-mark--messenger,
.source-mark.source-mark--whatsapp,
.source-mark.source-mark--gmail,
.source-mark.source-mark--shopify,
.source-mark.source-mark--google_analytics {
  overflow: hidden;
  color: transparent;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.source-mark.source-mark--instagram {
  background-image: url("/assets/kairo/sources/instagram-99b3067a.svg");
}

.source-mark.source-mark--messenger {
  background-image: url("/assets/kairo/sources/messenger-6ea979ad.svg");
}

.source-mark.source-mark--whatsapp {
  background-image: url("/assets/kairo/sources/whatsapp-1b33ebfb.svg");
}

.source-mark.source-mark--shopify {
  background-image: url("/assets/kairo/sources/shopify-9725baf6.svg");
}

/* Gmail's and Google Analytics' marks are drawn on white, so they get an
   edge against ivory. */
.source-mark.source-mark--gmail,
.source-mark.source-mark--google_analytics {
  box-shadow: inset 0 0 0 1px var(--k-color-line);
}

.source-mark.source-mark--gmail {
  background-image: url("/assets/kairo/sources/gmail-f78aed34.svg");
}

.source-mark.source-mark--google_analytics {
  background-image: url("/assets/kairo/sources/google_analytics-f86b3fe2.svg");
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-inline-start: 10px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-color-ink) 40%, transparent);
}

.legend-swatch:first-child {
  margin-inline-start: 0;
}

/* Under the empty state, the two things a merchant can do about it. */
.panel-empty__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.panel-empty__actions .source__link {
  margin-top: 0;
}

/* The sentence above carries the tab's empty-state padding; the links sit
   under it, not a second padding away. */
.panel-empty + .panel-empty__actions {
  margin-top: -44px;
}

/* Narrow screens */

/* The sales band stacks before the rest: its headline and three figures
   need about 1,100px side by side, and the column is that narrow on a laptop
   with Ask Neo open. */
@container page (width <= 1120px) {
  .revenue-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .revenue-band__headline {
    border-inline-end: 0;
    border-bottom: 1px solid var(--band-rule);
  }
}

@container page (width <= 780px) {
  /* The chart needs the full width before the bridge does; below this they
     stop competing for it and stack instead. */
  .detail-row {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .attention-item + .attention-item {
    border-top: 1px solid var(--k-color-line);
    border-inline-start: 0;
  }

  .fragility-summary {
    flex-wrap: wrap;
  }
}

@container page (width <= 656px) {
  .panel-head {
    padding-inline-end: 16px;
    padding-inline-start: 16px;
    /* Let the legend wrap below the heading. */
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .chart-wrap {
    grid-template-columns: 46px minmax(0, 1fr);
    height: 240px;
    padding: 16px 16px 12px;
  }
}

/* A muted mono line under a panel: what was left out, how a figure was read. */
.quiet-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}