/* Dashboard kit: layout on top of Quiet. Tokens only (design-system check.py refuses a literal colour or font). */
.dk-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-2); }
.dk-titles > .ds-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* (30 Oct 2026) data reads as written: Inter's contextual alternates draw an "x" between two digits as "×" (a client's
   SKU "SP90x200" read "SP90×200"; the text, the CSV and the search keep "x"). Off for tables (cells, heads, row names,
   in sheets too), bar names, tooltips and the filters; the body's own features (cv11, ss01) stay on */
.ds-table, .dk-bars, .ds-tip, .dk-filters, .dk-chips { font-variant-ligatures: no-contextual; }

/* tile labels wrap rather than cut ("Contribution margin" at 412 px). (r19) Tiles in a row line up part by part (label,
   value, change, n/a, spark) whatever wraps in one of them: each tile is a five-row subgrid of its row, so a change on
   two lines ("Lost 0 / No change") never pushes a neighbour's value out of line */
.dk-top .ds-tile, .dk-detail .ds-tile { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.dk-top .ds-tile > *, .dk-detail .ds-tile > * { grid-column: 1; min-width: 0; }
.dk-top .ds-tile-l, .dk-detail .ds-tile-l { grid-row: 1; align-self: end; white-space: normal; overflow: visible; }
.dk-top .ds-tile-v, .dk-detail .ds-tile-v { grid-row: 2; margin-top: 2px; }
.dk-top .ds-tile > .ds-delta, .dk-detail .ds-tile > .ds-delta { grid-row: 3; margin-top: 2px; align-self: start; }
.dk-top .dk-tile-na, .dk-detail .dk-tile-na { grid-row: 4; }
.dk-top .dk-spark, .dk-detail .dk-spark { grid-row: 5; align-self: end; }

/* the filter card: WHEN row, custom dates, WHICH row; chips under it */
.dk-filters { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3); }
.dk-when, .dk-dates, .dk-which { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.dk-dates[hidden] { display: none; }
.dk-period { flex: 1 1 200px; }                      /* the period select (DESIGN 5a), as wide as Compare with */
.dk-cmp { flex: 1 1 200px; }
.dk-dates > .ds-field { flex: 1 1 150px; }
.dk-dates > .ds-btn { flex: none; }
/* (r40) app "phone_filters": "fold": a phone's filter cards behind their own Filters button (closed on a fresh page, so
   the first screen shows figures); a desk never shows the button */
.dk-which-toggle { display: none; }
@media (max-width: 599px) {
  .dk-which-toggle { display: inline-flex; margin-top: var(--space-3); }
  form.dk-filters:not(.dk-which-open) > .dk-which { display: none; }   /* (0,3,1): over the phone's two-column grid rule */
}
/* (r40) a page's own date range ("dates_shown": ["range"], Tableau's "Order Date Range"): its title on its own line above
   the from / to fields */
.dk-range > .dk-range-t { flex: 1 1 100%; margin-bottom: calc(-1 * var(--space-2)); }
.dk-js .dk-apply { display: none; }                  /* JS applies typed dates; the button is the no-JS fallback */
.dk-which > .ds-field, .dk-what > .ds-field { flex: 1 1 220px; }
/* (kit gap 24, DESIGN 5) a filter set to a value takes two shares of its row, so the value's name fits (a 16-letter
   store name was cut in 138 px at 1280); a phone gives it the whole row (max-width 599px) */
.dk-which:has(> .ds-field + .ds-field) > .ds-field:not(.dk-model):has(option:checked:not([value=""])) { flex: 2 1 440px; }
/* (30 Oct 2026) a filter whose no-choice words are long (a client's Tableau "Core States (1,3,4,5,7,13,16)", views.long_all)
   takes the same room, so its words show whole; the words are never shortened */
.dk-which:has(> .ds-field + .ds-field) > .ds-field.dk-long { flex: 2 1 440px; }
/* Explore's WHAT row (metric, split) sits above WHEN, as a WHICH row does below it */
.dk-what { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
/* the datalist's own arrow: the magnifier already says search, and on a phone the arrow cut the placeholder to
   "All produc" (r6, 21 Oct) */
.dk-search input::-webkit-calendar-picker-indicator { display: none !important; }
/* (E1) a multi filter: a drop-down list of every value with its "All", a search box over it and Apply; the list is a
   card over the page under its field, scrolling inside itself, each row a 44 px target */
/* (C5) a big age grid's rows, a page at a time: where you are, then Previous / Next */
.ds-table .dk-rank { padding-right: var(--space-4); }   /* (D3) a Rank first: never touching the name beside it */
.dk-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.dk-pager > span { flex: 1 1 auto; }
.dk-multi { position: relative; }
.dk-multi-box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); }
.dk-multi-box > summary::-webkit-details-marker { display: none; }
.dk-multi-sum { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (r50) a workbook's type-in list card: a text box's cursor, its box keeping its height while it reads nothing */
.dk-multi-typein .dk-multi-box > summary { cursor: text; }
.dk-multi-typein .dk-multi-sum:empty::before { content: "\200b"; }
.dk-multi-pop { position: absolute; z-index: 30; left: 0; right: 0; min-width: min(320px, calc(100vw - 32px)); margin-top: var(--space-1);
  padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.dk-multi-list { max-height: min(360px, 50vh); overflow-y: auto; display: flex; flex-direction: column; }
.dk-multi-opt { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-s); cursor: pointer; }
.dk-multi-opt[hidden] { display: none; }
.dk-multi-opt > span { min-width: 0; overflow-wrap: anywhere; }
/* (r51) a tick box's or radio's own input is its whole 44px row, as Quiet's ds-switch (its input over the control): the
   18px box drawn beside the words in the tokens, the input clear over the row (an 18px input in a 44px row was an
   18x18 tap target, UI check rule; the always-open lists put them on view) */
.dk-multi-opt, .dk-radio-opt { position: relative; }
.dk-multi-opt > input, .dk-radio-opt > input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0;
  width: auto; height: auto; margin: 0; border: 0; border-radius: var(--radius-s); background: none; cursor: pointer; z-index: 1; }
.dk-multi-opt > span, .dk-radio-opt > span { position: relative; display: flex; align-items: center; gap: var(--space-2); }
.dk-multi-opt > span::before, .dk-radio-opt > span::before { content: ""; flex: none; width: 18px; height: 18px;
  border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-control); }
.dk-radio-opt > span::before { border-radius: 50%; }
.dk-multi-opt > input:checked + span::before { background: var(--accent); box-shadow: none; }
.dk-multi-opt > input:checked + span::after { content: ""; position: absolute; left: 6px; top: calc(50% - 7px); width: 6px;
  height: 11px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dk-radio-opt > input:checked + span::before { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 5px var(--surface); }
.dk-multi-opt > input:focus-visible, .dk-radio-opt > input:focus-visible { outline: 0; }
.dk-multi-opt > input:focus-visible + span::before, .dk-radio-opt > input:focus-visible + span::before { outline: 2px solid var(--focus); outline-offset: 2px; }
/* (r49) a workbook's parameter as a radio list (Tableau's Country Type: Invoicing / Shipping) and its multi-value list
   always open (Action (State Definition)): every choice on view, a 44px row each, as the drop-down list's rows */
.dk-radio { border: 0; margin: 0; padding: 0; min-width: 0; }
.dk-radio > legend { padding: 0; }
.dk-radio-opt { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-s); cursor: pointer; }
.dk-multi-open > .dk-multi-list { max-height: none; overflow: visible; }
/* (r49) the card column's foot (a workbook's colour key, its reset button): shown in that column at desk widths only */
.dk-col-key, .dk-col-defaults { display: none; }
.dk-multi-all { border-bottom: 1px solid var(--line); }
.dk-multi-all > input { bottom: -1px; }      /* (r51) over its line too: the row's 44px (it was 43, the line outside the input) */
.dk-multi-apply { align-self: flex-end; }
.dk-which:has(> .ds-field + .ds-field) > .dk-multi:has(.dk-multi-list input:checked) { flex: 2 1 440px; }
.dk-chips { margin-top: var(--space-2); }
/* (r45) app "chips": "phone" (a replicated workbook's): a desk draws no filter chips, as the workbook draws none (each card
   shows its own state); a phone, its cards folded behind Filters, keeps them. The workbook's own reset button stays */
@media (min-width: 600px) {
  .dk-chips-phone > .ds-chip:not(.dk-defaults) { display: none; }
  .dk-chips-phone:not(:has(> .dk-defaults)) { display: none; }
}
.dk-note { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); color: var(--text-2); }
.dk-note > .ds-i { margin-top: 2px; color: var(--text-3); }
.dk-note > span { min-width: 0; overflow-wrap: anywhere; }   /* a 3,000-letter value in a link ran the phone page sideways (tester 3) */
/* section, chart and fold titles are headings for a screen reader; they keep the look they had as labels */
.dk-h { margin: 0; }
.dk-h-fold { font: inherit; }

/* hero + tiles: stacked on a phone, side by side on a desk */
.dk-kpi-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dk-kpi .ds-delta { flex-wrap: wrap; }
.dk-tile-na, .ds-tile .ds-delta { white-space: normal; }
.dk-spark { display: block; height: 28px; margin-top: 6px; }
.dk-hero-s { font-size: var(--text-2xl); }
.dk-top--solo > .dk-kpi { margin-bottom: 0; }

/* the chart card */
.dk-chart-card { margin-top: var(--space-6); padding: var(--space-4); }
.dk-chart-card > .ds-chart-head { margin-top: 0; align-items: flex-start; }
/* (4 Nov 2026) a page chart in a chart_row sits under its section heading as the block beside it does (row_chart): no margin of its own over it, so the two cards start level */
.dk-row-chart > .dk-chart-card { margin-top: 0; }
.dk-chart-title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dk-chart { min-height: 200px; }
.ds-legend > span > i.dk-muted-key { background: var(--chart-muted); }
.dk-chart-table { margin-top: var(--space-2); }

/* tables: the system's table has no side padding, so number columns get a gap of their own */
.ds-table .num { padding-left: var(--space-4); }
/* and so do the text columns after a row's name (a label's other fields, the scorecard's dates, a check's words) */
.dk-hscroll > .ds-table td:not(.num):not(.dk-label), .dk-hscroll > .ds-table th:not(.num):not(:first-child) { padding-left: var(--space-4); }
/* a number never breaks ("−" alone above "$135,359" at 412 px: tester 1); a head breaks between words only */
.dk-fig, .ds-table td.num { white-space: nowrap; }
.ds-table th { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* DESIGN 12a: a column head is the button that sorts its table, a 44px target; the arrow marks the sorted column */
.ds-table th .dk-sort { font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; background: none; border: 0;
  padding: 0; margin: -8px 0; min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; gap: 2px;
  cursor: pointer; }
.ds-table th.num .dk-sort { justify-content: flex-end; }
.ds-table th[aria-sort] { color: var(--text-2); }
.dk-sort-ar:empty { display: none; }
@media (hover: hover) { .ds-table th .dk-sort:hover { color: var(--text); } }
/* a change under its figure in the same cell (the store tables): its own line, as wide as its words, right-aligned */
.ds-table td.num > .ds-delta.dk-sub { display: table; margin-left: auto; white-space: nowrap; }
/* what a row belongs to (a campaign's channel), or that it is not one ("not a campaign"); a row's verdict */
.dk-of { display: block; }
.dk-verdict { margin-top: 2px; color: var(--text-2); white-space: normal; }
.dk-verdict-all { margin-top: var(--space-2); }
.dk-explain { margin: 0 0 var(--space-3); }
.dk-scope { text-transform: none; letter-spacing: 0; }
.dk-label { padding-right: var(--space-2); }
.dk-rows .ds-badge, .dk-label .ds-badge { margin-left: var(--space-1); vertical-align: middle; white-space: nowrap; }
.dk-rowbtn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--tap);
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dk-rowbtn > .ds-i { color: var(--text-3); flex: none; }
.dk-collapsed tr[data-more] { display: none; }
.dk-showall { margin-top: var(--space-1); min-height: var(--tap); }
.dk-total td { font-weight: 600; }
.dk-sub { display: block; }
.ds-delta.dk-sub { display: flex; justify-content: flex-end; font-size: var(--text-xs); color: var(--text-3); }
.dk-na { margin-top: var(--space-2); }
/* (DESIGN 66) a fold's CSV button sits at the end of its own head row; the lines a table does not draw, under it */
.dk-csv-head { justify-content: flex-end; }
.dk-rows-left, .dk-rows-cut { margin-top: var(--space-2); }
.dk-chart-na > .dk-na { margin-top: var(--space-1); }
/* cohorts and lift tests: a caption under the title; the test's dates and design under its name */
.dk-caption { margin: 0 0 var(--space-2); }
.dk-tests .dk-label { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.dk-change { white-space: nowrap; }
.dk-unsold { margin: var(--space-2) 0; }
.dk-fold { margin-top: var(--space-6); }
.dk-fold > summary + * { margin-top: var(--space-2); }
.dk-defs td { vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; height: auto; }  /* 12 px: a term filling its column still clears the next cell (8 px touched at 412) */
.dk-first { margin-top: var(--space-4); }
.dk-empty { margin-top: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }

/* series colours, tokens only: --chart-1..6 in their fixed order; a stack's calm neutrals (dk-n1..4, calmest first) step
   from the muted mark (>= 3:1 in both themes, so no segment fades into the card) towards the third text colour, and the
   one series in the accent is where the eye lands */
.dk-c1 { --dk-c: var(--chart-1); } .dk-c2 { --dk-c: var(--chart-2); } .dk-c3 { --dk-c: var(--chart-3); }
.dk-c4 { --dk-c: var(--chart-4); } .dk-c5 { --dk-c: var(--chart-5); } .dk-c6 { --dk-c: var(--chart-6); }
.dk-n1 { --dk-c: var(--chart-muted); }
/* r14 (testers 1, 2, r13): the steps ran muted -> text-3, an OKLab lightness step of 0.04: four near-identical greys
   told apart only by the gaps. Now muted -> text in equal steps: 0.13 in light and dark, each >= 3:1 on the card */
.dk-n2 { --dk-c: color-mix(in oklab, var(--chart-muted) 67%, var(--text)); }
.dk-n3 { --dk-c: color-mix(in oklab, var(--chart-muted) 33%, var(--text)); }
.dk-n4 { --dk-c: var(--text); }
/* r14 fix B: a stack of five neutrals (the P&L: cost of goods, shipping, fees, ads, operating costs) steps in quarters
   from muted to text, each step still more than 0.08 in OKLab lightness; four or fewer keep the thirds above */
.dk-n5-ramp .dk-n2 { --dk-c: color-mix(in oklab, var(--chart-muted) 75%, var(--text)); }
.dk-n5-ramp .dk-n3 { --dk-c: color-mix(in oklab, var(--chart-muted) 50%, var(--text)); }
.dk-n5-ramp .dk-n4 { --dk-c: color-mix(in oklab, var(--chart-muted) 25%, var(--text)); }
.dk-n5 { --dk-c: var(--text); }
/* (2 Nov 2026) a replicated workbook's stack: each value in the workbook's own colour, named on the chart's card
   (--dk-t0.. from the spec's "colors"); one class per colour the card uses */
.dk-t0 { --dk-c: var(--dk-t0); } .dk-t1 { --dk-c: var(--dk-t1); } .dk-t2 { --dk-c: var(--dk-t2); } .dk-t3 { --dk-c: var(--dk-t3); }
.dk-t4 { --dk-c: var(--dk-t4); } .dk-t5 { --dk-c: var(--dk-t5); } .dk-t6 { --dk-c: var(--dk-t6); } .dk-t7 { --dk-c: var(--dk-t7); }
.dk-t8 { --dk-c: var(--dk-t8); } .dk-t9 { --dk-c: var(--dk-t9); } .dk-t10 { --dk-c: var(--dk-t10); } .dk-t11 { --dk-c: var(--dk-t11); }
.dk-t12 { --dk-c: var(--dk-t12); } .dk-t13 { --dk-c: var(--dk-t13); } .dk-t14 { --dk-c: var(--dk-t14); } .dk-t15 { --dk-c: var(--dk-t15); }
.dk-t16 { --dk-c: var(--dk-t16); } .dk-t17 { --dk-c: var(--dk-t17); } .dk-t18 { --dk-c: var(--dk-t18); } .dk-t19 { --dk-c: var(--dk-t19); }
.dk-t20 { --dk-c: var(--dk-t20); } .dk-t21 { --dk-c: var(--dk-t21); } .dk-t22 { --dk-c: var(--dk-t22); } .dk-t23 { --dk-c: var(--dk-t23); }
.dk-t24 { --dk-c: var(--dk-t24); } .dk-t25 { --dk-c: var(--dk-t25); } .dk-t26 { --dk-c: var(--dk-t26); } .dk-t27 { --dk-c: var(--dk-t27); }
.dk-t28 { --dk-c: var(--dk-t28); } .dk-t29 { --dk-c: var(--dk-t29); } .dk-t30 { --dk-c: var(--dk-t30); } .dk-t31 { --dk-c: var(--dk-t31); }
.dk-t32 { --dk-c: var(--dk-t32); } .dk-t33 { --dk-c: var(--dk-t33); } .dk-t34 { --dk-c: var(--dk-t34); } .dk-t35 { --dk-c: var(--dk-t35); }
.dk-t36 { --dk-c: var(--dk-t36); } .dk-t37 { --dk-c: var(--dk-t37); } .dk-t38 { --dk-c: var(--dk-t38); } .dk-t39 { --dk-c: var(--dk-t39); }
/* a series key is a swatch (a bar's colour), not the line chart's 2px dash */
i.dk-key, .ds-legend > span > i.dk-key, .ds-tip-row > i.dk-key { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--dk-c); }
.ds-tip-row > i.dk-key-none { background: none; }
/* a swatch as dark as the tooltip (the darkest neutral) still shows: a hairline ring of the tooltip's own text colour
   mixed into its surface, opaque, >= 3:1 against the tooltip in both themes (r15 fix C2, WCAG 1.4.11: the 45%-alpha
   ring left Ad spend and Operating costs looking like the total's empty box); the total row has no swatch at all */
.ds-tip-row > i.dk-key { box-shadow: 0 0 0 1px color-mix(in oklab, currentColor 60%, var(--text)); }
.ds-tip-row > i.dk-key.dk-key-none { box-shadow: none; }
.dk-tip-total { margin-top: 2px; }
.dk-legend { flex-wrap: wrap; row-gap: var(--space-1); }
/* (app.dates) a legend's own title ("Period Type:"), before its keys, in the legend's own type */
.dk-legend-t { color: var(--text-2); }

/* bars: a row per value. Phone: the name (and share, change) on a line, the bar and its value under it; desk: one row */
.dk-bars > .dk-legend { margin: 0 0 var(--space-2); }
.dk-bar-list { list-style: none; margin: 0; padding: 0; }
.dk-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name sub" "plot plot";
  column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.dk-bar-row:last-child { border-bottom: 0; }
.dk-collapsed > .dk-bar-row[data-more] { display: none; }
.dk-bar-name { grid-area: name; min-width: 0; font-size: var(--text-s); line-height: 20px; overflow-wrap: anywhere; }
.dk-bar-name > .ds-badge { margin-left: var(--space-1); vertical-align: middle; }
.dk-bar-sub { grid-area: sub; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1);
  color: var(--text-3); white-space: nowrap; line-height: 20px; }
.dk-bar-sub > .ds-delta { font-size: var(--text-xs); }
.dk-bar-plot { grid-area: plot; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dk-bar-line { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; align-items: center; gap: var(--space-3); min-height: 20px; }
.dk-bar-track { display: block; height: 8px; margin-top: 2px; border-radius: 0 4px 4px 0; background: var(--surface-2); }
/* several series: thin bars, close together, values in small type */
.dk-bar-row:not(.dk-bar-one) .dk-bar-plot { gap: 2px; }
.dk-bar-row:not(.dk-bar-one) .dk-bar-line { min-height: 18px; }
.dk-bar-row:not(.dk-bar-one) .dk-bar-track { height: 6px; }
.dk-bar-row:not(.dk-bar-one) .dk-bar-num { font-size: var(--text-xs); }
.dk-bar { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--dk-c); }
.dk-bar.is-neg { background: var(--chart-muted); }
/* r14 fix B: the comparison's bar under a row's own (conversion by device, this period against the comparison) */
.dk-bar.dk-cmp, i.dk-key.dk-cmp, .ds-legend > span > i.dk-key.dk-cmp { background: var(--chart-muted); }
.dk-bar-vs .dk-bar-track { height: 6px; }
.dk-bar-vs .dk-bar-num { font-size: var(--text-xs); color: var(--text-3); }
.dk-with { color: var(--text-3); }
.dk-bar-name > .dk-bar-btn { min-height: var(--tap); padding: 0; justify-content: flex-start; }
.dk-bar-name > .dk-bar-btn > span { flex: 1 1 auto; text-align: left; }
/* the cohort grid's thirteen months slide sideways inside its card where they do not fit, the month stays in view */
.dk-cohort-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
.dk-cohort-scroll .dk-cohorts td:first-child, .dk-cohort-scroll .dk-cohorts th:first-child { position: sticky; left: calc(-1 * var(--space-4));
  background: var(--bg); padding-left: var(--space-4); z-index: 1; }
.dk-cohort-scroll .dk-cohorts td.dk-label { white-space: nowrap; }
/* a landing page is a path with no spaces: it breaks where it must, so a phone keeps both columns and the change under
   the sessions (r15 fix C2) */
.dk-rows[data-rows="landing"] td.dk-label { overflow-wrap: anywhere; }
/* every month's head on the same two lines, "Month" over its number (r15 fix C2: Months 0 and 10-12 wrapped while 1-9
   did not), so a 1280 px desk still shows the whole grid */
.dk-cohorts th.num .dk-age-n { display: block; }
.dk-cohorts .dk-avg-row td { border-top: 1px solid var(--line); font-weight: 600; }
.dk-cohorts .dk-avg-row .dk-of { display: block; font-weight: 400; white-space: normal; }
/* thirteen months of figures: the small size, so a 1280 px desk shows the whole grid without sliding (fork 2 UI check) */
.dk-cohorts td.num { font-size: var(--text-xs); }
.dk-cohorts .num { padding-left: var(--space-2); }
.dk-h-sub { margin: var(--space-5) 0 var(--space-2); }
.dk-views { display: inline-flex; flex-direction: column; margin-bottom: var(--space-3); min-width: 16rem; }
@media (max-width: 599px) { .dk-views { display: flex; min-width: 0; } }
.dk-hscroll { overflow-x: auto; }
/* (r37) a workbook's scorecard (a periods table): its date range on one line as the workbook writes it, and at desk
   widths its row names stay in view while the figures slide sideways */
.dk-periods .dk-prange { white-space: nowrap; }
@media (min-width: 600px) {
  /* never a screen reader's own header (a bare table's sr-only Period Type / Current): sticky would show it */
  .dk-hscroll > .dk-periods th:first-child:not(.sr-only), .dk-hscroll > .dk-periods td:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; }
}
.dk-delta.dk-plain, .ds-delta.dk-plain { color: inherit; font-weight: inherit; }
.dk-hscroll > .ds-table { min-width: 100%; }
/* the box holds everything its table draws: a change's screen-reader word (.sr-only, positioned) placed past the box
   escaped its clip and widened the page (a 17-column scorecard took a desk page to 1432 px) */
.dk-hscroll { position: relative; }
/* the builder's page at the rail's foot, under More: a quiet text link (r14 fix B) */
.ds-tabbar > a.dk-hire { min-height: var(--tap); padding: 0; font-size: var(--text-xs); color: var(--text-3);
  text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .ds-tabbar > a.dk-hire:hover { color: var(--text); } }
.dk-bar-num { text-align: right; font-size: var(--text-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-bar-abs { margin-left: var(--space-1); font-size: var(--text-xs); color: var(--text-3); }
@media (min-width: 600px) {
  .dk-bar-row { grid-template-columns: 12rem minmax(0, 1fr) 11rem; grid-template-areas: "name plot sub"; align-items: center; }
  .dk-bar-row:not(.dk-bar-one) { grid-template-columns: 12rem minmax(0, 1fr); grid-template-areas: "name plot"; }
  /* a long change ("Nothing in the comparison period", a product new this period) wraps in its column, never past the
     page's edge (r13 check: Explore's bars ran a 1280 px desk to 1304 px) */
  .dk-bar-sub { justify-content: flex-start; flex-wrap: wrap; white-space: normal; min-width: 0; }
}

/* a funnel: a step per row, its bar as long as its share of the first step; phone: name and count, the bar, then the
   shares in words; desk: one line */
.dk-funnel-list { list-style: none; margin: 0; padding: 0; }
.dk-funnel-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name num" "bar bar" "rates rates";
  column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.dk-funnel-step:last-child { border-bottom: 0; }
.dk-funnel-name { grid-area: name; min-width: 0; font-size: var(--text-s); line-height: 20px; }
.dk-funnel-num { grid-area: num; text-align: right; font-size: var(--text-s); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; line-height: 20px; }
/* (r17) drawn as a funnel: a thick bar centred in its track, as long as its share of the first step, and behind it
   the step before's, striped: the people this step lost */
.dk-funnel-track.dk-bar-track { grid-area: bar; position: relative; height: 24px; margin: 0; border-radius: var(--radius-s);
  background: none; }
.dk-funnel-track > .dk-bar, .dk-funnel-track > .dk-funnel-gone { position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%); border-radius: var(--radius-s); }
.dk-funnel-track > .dk-bar { height: auto; }
.dk-funnel-gone { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--line-strong) 4px 6px); }
.dk-funnel-rates { grid-area: rates; color: var(--text-3); line-height: 16px; display: flex; flex-direction: column; gap: 2px; }
.dk-funnel-left { color: var(--text-2); font-weight: 500; }
.dk-funnel-num .dk-sub { display: block; font-weight: 400; }
.dk-funnel-switch { margin: 0 0 var(--space-2); }
@media (min-width: 900px) {
  .dk-funnel-step { grid-template-columns: 9rem minmax(0, 1fr) 7.5rem 15rem; grid-template-areas: "name bar num rates"; align-items: center; }
}

/* stacked monthly columns: a card with its legend and Table switch; the running month lighter, named by its days */
.dk-months-card { padding: var(--space-4); }
/* (2 Nov 2026) a table wider than its card (a replicated workbook's stack: every category a column) slides sideways
   inside the card at any width, the period's column kept in view; the page itself never scrolls sideways */
.dk-months-card { min-width: 0; }
@media (min-width: 600px) {
  .dk-months-card > .dk-scroll { overflow-x: auto; }
  .dk-months-card > .dk-scroll .dk-months-table th:first-child, .dk-months-card > .dk-scroll .dk-months-table td:first-child {
    position: sticky; left: 0; background: var(--surface); z-index: 1; }
}
.dk-months-card > .ds-chart-head { margin-top: 0; align-items: flex-start; }
.dk-months { min-height: 220px; }
.dk-seg { fill: var(--dk-c); }
/* (app.dates) a side-by-side column's value over it, in the axis type */
.dk-bar-label { font-variant-numeric: tabular-nums; }
/* (2 Nov 2026) a stack segment's figure: the text colour with a ring of the card's surface, so it reads on the segment
   and on the card beside a narrow column alike, in both themes */
.dk-pt-label { fill: var(--text-2); stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; pointer-events: none; }
.dk-pt { pointer-events: none; }
.dk-seg-label { fill: var(--text); stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; pointer-events: none; }
/* the running month is striped (app.js draws a pattern per series): its colours stay full strength, so the steps
   still tell apart and nothing fades below 3:1 (GUIDE 1.2.7), and "striped" reads the same in both themes */
.dk-hatch-bg { fill: var(--surface); }
.dk-grid { stroke: var(--chart-grid); stroke-width: 1; }
.dk-zero { stroke: var(--chart-axis); stroke-width: 1; }
.dk-band { fill: var(--surface-2); }
.dk-hit { fill: none; pointer-events: all; outline: none; cursor: default; }
.dk-hit:focus-visible { stroke: var(--focus); stroke-width: 2; }
.dk-months-table { margin-top: var(--space-2); }
.dk-months-table .dk-total { font-weight: 600; }

/* cohorts as a heatmap: an age cell shaded by its value (data-heat 1-6), one hue, more colour = more (darker in light,
   brighter in dark); text stays text. Fix C1 (dark read faint: level 1 sat 0.047 OKLab off the page, lowest to highest
   2.45:1): 15-67% then the accent itself, which takes the page colour as its ink, so lowest to highest is 4.0:1 light
   and 4.9:1 dark, each step 0.057 or more, every figure 4.9:1 or more on its own shade (measured by ui.mjs) */
[data-heat="1"] { --dk-h: 15%; } [data-heat="2"] { --dk-h: 28%; } [data-heat="3"] { --dk-h: 41%; }
[data-heat="4"] { --dk-h: 54%; } [data-heat="5"] { --dk-h: 67%; } [data-heat="6"] { --dk-h: 100%; }
.dk-cohorts td[data-heat], .dk-heat-key > i { background: color-mix(in oklab, var(--chart-1) var(--dk-h), var(--bg)); }
.dk-cohorts td[data-heat="6"], .dk-cohorts td[data-heat="6"] * { color: var(--bg); }
.dk-cohorts .num { padding-right: var(--space-2); }
.dk-cohorts td[data-heat] { border-bottom-color: var(--bg); }
/* (C5) a table's row shaded by one of its figures ("shade"), the heat grid's hue */
/* (D3) a table's Grand Total row ("total_row"): every column over the rows drawn, set apart as the cohort grid's Average */
.dk-rows .dk-total-row td { font-weight: 600; border-top: 1px solid var(--line); }
.dk-rows td.dk-shaded[data-heat] { background: color-mix(in oklab, var(--chart-1) var(--dk-h), var(--bg)); }
.dk-rows td.dk-shaded[data-heat="6"], .dk-rows td.dk-shaded[data-heat="6"] * { color: var(--bg); }
.dk-heat-key { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--space-2); white-space: nowrap; vertical-align: middle; }
.dk-heat-key > i { width: 12px; height: 10px; border-radius: 2px; }
.dk-heat-key > span { margin: 0 var(--space-1); }
/* (r39) blocks side by side ("row"), a column each ("col" stacks several in one), as a workbook's dashboard lays its
   sheets, each column at least 300 px wide (a narrower screen wraps them, a phone stacks them). A block with no heading
   of its own ("head": false) first in its column keeps a heading's height, so its
   figures sit level with its neighbour's */
.dk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: var(--space-5); align-items: start; }
.dk-col { min-width: 0; }
/* (r40) a workbook's row at its own widths ("row_widths"): its columns never wrap, the row slides sideways inside its own
   box where the screen is narrower than they need (each at least --dk-colmin and its own content), the page never; each
   column's blocks on the row's shared tracks (subgrid), so a block sits level with its neighbours' whatever a caption
   above it wraps to; a lined-up panel table ("rows_with") keeps every row one line high, so its rows read across */
.dk-row.dk-row-fixed { grid-template-columns: var(--dk-tracks); grid-template-rows: repeat(var(--dk-depth), auto); overflow-x: auto;
  overscroll-behavior-x: contain; padding-bottom: var(--space-2); position: relative; }
/* (r41) position: relative - the row is the containing block of anything placed inside it (a screen reader's caption,
   sr-only), so that slides with the row too and never widens the page (a phone's Returns by SKU read 728 px wide) */
.dk-row-fixed > .dk-col { display: grid; grid-row: span var(--dk-depth); grid-template-rows: subgrid; align-content: start; min-width: var(--dk-colmin); }
.dk-row-fixed .dk-months > svg { max-width: 100%; }
.dk-rows-with td, .dk-rows-with th { white-space: nowrap; }
/* a phone's held first column (40vw) would cut a lined-up table's names: its row slides sideways instead */
[data-cols="all"] .dk-hscroll > .ds-table.dk-rows-with td:first-child { max-width: none; }
.dk-head-gap > .dk-h::before { content: "\00a0"; }
/* (r41) a legend in a workbook's row ("row" / "col"): its keys one under another as the workbook lists them, beside the
   panels from their top, spanning the row's height so it never stretches the panels' tracks; its column as narrow as its
   longest name */
.dk-row-fixed > .dk-col > .ds-section:only-child { grid-row: 1 / -1; }
.dk-row-fixed > .dk-col:has(> .ds-section > .dk-legend-block) { min-width: 0; }
.dk-row-fixed .dk-legend-block { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
.dk-row-fixed .dk-legend-block > span { white-space: nowrap; }
/* (r41) a workbook's row whose tables read row for row ("row_lines": a grid beside its table, every SKU): every row one
   line high, every head one height, each block's heading the height of the one with a Download CSV, so a grid's row
   sits level with its table's */
.dk-row-lines .ds-table td, .dk-row-lines .ds-table th { white-space: nowrap; }
.dk-row-lines .ds-table thead th { height: 48px; padding-top: 0; padding-bottom: 6px; vertical-align: bottom; }
.dk-row-lines .dk-cohorts th.num .dk-age-n { display: inline; }
.dk-row-lines .ds-section-head { min-height: var(--tap); align-items: center; }
/* (r42) a replicated workbook's sheet in its own fixed box ("box"), as its dashboard draws it: the box its zone's height
   (a standalone sheet's: the window's under the top bar), the sheet scrolling inside it both ways, its head held at the
   top and its row names at the left, as the workbook's own scrollbars do; a scroll past its end goes on to the page. In
   a workbook's row the box takes its column's width, whatever its sheet's (it scrolls sideways inside) */
.dk-box { position: relative; height: var(--dk-box-h); overflow: auto; --dk-rowh: 45px; --dk-headh: 48px; --dk-agew: 64px; --dk-labw: min(16rem, 40vw); }
.dk-box.dk-box-screen { height: calc(100vh - 64px - var(--space-6)); height: calc(100dvh - 64px - var(--space-6)); min-height: 320px; }
.dk-box:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a grid's box takes its column's share of the row (its ages scroll sideways inside it); a table's box is as wide as its
   columns need, so every figure of a row is in sight, as the workbook's tables show theirs */
.dk-row-fixed .dk-box:has(> .dk-agegrid) { width: 0; min-width: 100%; }
.dk-box > .ds-table { min-width: 100%; }
.dk-box > .ds-table td:not(.num):not(.dk-label), .dk-box > .ds-table th:not(.num):not(:first-child) { padding-left: var(--space-4); }
.dk-row-lines .dk-box > .dk-rows.dk-parts thead th { white-space: normal; }
.dk-row-lines .dk-box > .dk-rows.dk-parts thead th.num { min-width: 7em; }
.dk-box > .ds-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); }
.dk-box > .ds-table td.dk-label, .dk-box > .ds-table thead th:first-child:not(.sr-only):not(.num) { position: sticky; left: 0; background: var(--bg); }
.dk-box > .ds-table td.dk-label { z-index: 1; }
.dk-box > .ds-table thead th:first-child:not(.sr-only):not(.num) { z-index: 3; }
/* (r43) a replicated workbook's own row and head heights ("row_px", "head_px": its views draw 17-20 px rows): each row
   that high, its text at the design system's small sizes so a line fits (--text-s in a 20 px row, --text-xs below),
   every row name on one line, the head its own height; a {rows: N} box is then the workbook's zone in px, the same
   rows in sight (apps.json: the app's exception to the 44 px row, Alex's words) */
.dk-box.dk-px > .ds-table td, .dk-box.dk-px > .ds-table tbody th { height: calc(var(--dk-rowh) - 1px); padding-top: 0;
  padding-bottom: 0; font-size: var(--text-s); line-height: calc(var(--dk-rowh) - 1px); white-space: nowrap; }
.dk-box.dk-px.dk-px-xs > .ds-table td, .dk-box.dk-px.dk-px-xs > .ds-table tbody th { font-size: var(--text-xs); }
.dk-box.dk-px > .ds-table thead th { height: calc(var(--dk-headh) - 1px); padding-top: 0; padding-bottom: 2px; vertical-align: bottom; }
.dk-box.dk-px > .dk-agegrid.dk-parts.dk-named td.dk-label { white-space: nowrap; overflow-wrap: normal; }
/* a head under two lines' height (the workbook's one-line heads) keeps its names on one line; a column head's sort button
   is the head's own height there, not a 44 px target that would grow the head past the workbook's (the app's exception) */
.dk-box.dk-px.dk-px-1 > .ds-table thead th { white-space: nowrap; }
.dk-box.dk-px .ds-table th .dk-sort { min-height: 0; margin: 0; }
/* (r44) "phone_wrap": a replicated workbook has no phone layout, so on a phone there is no workbook size to keep - a
   sheet whose row names would fill its box names its rows in at most min(16rem, 40vw), a long name on more lines and
   its row growing to fit (rows never cut into parts: they need no one height), so its figures are in sight beside
   them; at desk the workbook's one-line rows */
@media (max-width: 599px) {
  .dk-box.dk-px.dk-phone-wrap > .dk-agegrid { --dk-labph: min(16rem, 40vw); }
  .dk-box.dk-px.dk-phone-wrap > .ds-table td.dk-label, .dk-box.dk-px.dk-phone-wrap > .dk-agegrid.dk-parts.dk-named td.dk-label {
    width: min(16rem, 40vw); min-width: min(16rem, 40vw); max-width: min(16rem, 40vw); white-space: normal; overflow-wrap: anywhere; }
}
/* (r42) drawn in parts ("parts"): every row one line high, so a gap row stands for its rows; an age grid's ages one
   width each (its fixed layout), so a gap cell stands for its ages and the head lines up over them */
.dk-parts td, .dk-parts th { white-space: nowrap; }
.dk-parts .dk-gap > td { padding: 0; border: 0; }
.dk-parts td.dk-gapc { padding: 0; }
.dk-agegrid.dk-parts { table-layout: fixed; }
.dk-agegrid.dk-parts thead th.num { width: var(--dk-agew); }
.dk-agegrid.dk-parts.dk-named thead th:first-child { width: var(--dk-labw); }
/* a grid's row names in their own width, a long one on two lines, never cut (its rows are one part: they need no one
   height) */
.dk-agegrid.dk-parts.dk-named td.dk-label { white-space: normal; overflow-wrap: anywhere; padding-right: var(--space-3); }
/* (r41) a workbook point map's own colour ("colours"): each point the workbook's colour for its figure; its key one bar
   from the lowest to the highest, a tick at 0 */
.dk-pointmap .dk-pt.dk-pt-wbc { fill: var(--dk-c); }
.dk-grad { position: relative; display: inline-block; flex: none; width: 140px; height: 12px; border-radius: 2px; background: var(--dk-grad); }
.dk-grad > .dk-grad-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; margin-left: -0.5px; background: var(--text); }
/* (r41) a workbook's tooltip on a table cell ("cell_tip"): its lines in two columns, each name muted then its value, as the
   workbook writes them; the cell it describes outlined */
.ds-tip.dk-cell-tip { z-index: 40; display: grid; grid-template-columns: auto auto; column-gap: var(--space-3); row-gap: 2px; }
.dk-cell-tip > span { opacity: .72; }
.dk-cell-tip > b { font-weight: 600; }
.ds-table td[data-celltip].dk-tip-on { outline: 1px solid var(--text); outline-offset: -3px; }
.dk-col > .dk-headless:not(:first-child) > .dk-head-gap:not(:has(.dk-csv)) { display: none; }
/* (r46) a headless sheet on its own (not in a row: a standalone view's one sheet, a scorecard) has no neighbour to sit
   level with: no empty gap of a heading's height over it (its CSV link, when it has one, keeps the line) */
#view > .dk-headless > .dk-head-gap:not(:has(.dk-csv)) { display: none; }
/* (r39) a workbook's own key ("key": its title): the title first, then the lowest figure, the shades, the highest */
.dk-heat-key-t { margin-left: 0; flex-wrap: wrap; white-space: normal; }
.dk-heat-key-t > .dk-key-t { margin-left: 0; color: var(--text-2); font-weight: 600; }

/* (r17) maps (Geography): land in the page colour with a hairline, so a place with no sales reads as empty (0.067 light,
   0.072 dark OKLab from level 1; the card surface sat 0.041 off it in dark); a place with a figure in the cohort grid's
   six steps of one hue, the key's own; the tooltip follows the pointer, a tap's stays until a tap elsewhere */
.dk-map-card { padding: var(--space-4); }
.dk-map-card > .ds-chart-head { margin-top: 0; flex-wrap: wrap; row-gap: var(--space-2); }
.dk-map-key { margin-left: 0; }
.dk-map-key > .dk-fig { font-size: var(--text-xs); color: var(--text-2); font-variant-numeric: tabular-nums; margin: 0 var(--space-1); }
.dk-map-wrap { position: relative; margin-top: var(--space-2); }
.dk-map { display: block; width: 100%; height: auto; overflow: visible; }
.dk-land { fill: var(--bg); stroke: var(--line-strong); stroke-width: .6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* (D1) a postcode point map: the outlines under the points, each point sized by its figure, its colour its sign */
.dk-pointmap-wrap { border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: var(--chart-bg); }
.dk-pointmap { display: block; width: 100%; height: auto; max-height: 70vh; }
.dk-pt { stroke: var(--bg); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.dk-pt-pos { fill: var(--chart-1); }
.dk-pt-neg { fill: var(--chart-2); }
/* (r39) a replicated workbook's map ("workbook"): each point in the grid's six shades by its figure, lowest to highest;
   its countries named under the points; the size key's four circles */
.dk-pt.dk-pt-heat { fill: color-mix(in oklab, var(--chart-1) var(--dk-h), var(--bg)); stroke: var(--text-3); }
.dk-map-name { fill: var(--text); pointer-events: none; paint-order: stroke; stroke: var(--chart-bg); stroke-width: 3px; stroke-linejoin: round; }
.dk-pointmap-wrap { position: relative; }
.dk-map-zoom { position: absolute; top: var(--space-2); right: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.dk-map-zoom .ds-btn { min-width: 44px; min-height: 44px; padding: 0 var(--space-1); font-size: var(--text-xs); }
.dk-map-zoom .ds-btn:disabled { opacity: 1; color: var(--text-3); }
.dk-map-zoom .ds-btn:not(:last-child) { font-size: var(--text-l); }
.dk-pointmap .dk-pt { pointer-events: auto; }
.dk-pointmap-wrap > .dk-map-dot-tip { white-space: pre-line; width: max-content; max-width: 240px; }
.dk-map-keys { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.dk-size-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.dk-size-step { display: inline-flex; align-items: center; gap: 2px; }
.dk-size-step > svg { width: 20px; height: 20px; }
.dk-size-dot { fill: var(--chart-1); }    /* a size key's circle: no map point (figures.py counts .dk-pt as points) */
/* (r43) a workbook's size key (its map's "size"): its figures one under another, each circle grey at its map's size */
.dk-size-key.dk-size-col { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
.dk-size-col > .dk-size-step > svg { flex: none; }
.dk-size-dot.dk-size-wb { fill: var(--dk-c, var(--line-strong)); stroke: var(--chart-muted); stroke-width: .5px; }
[data-theme="dark"] .dk-pointmap .dk-pt.dk-pt-wbc { fill: color-mix(in oklab, var(--dk-c) 62%, var(--bg)); }
[data-theme="dark"] .dk-size-dot.dk-size-wb { fill: color-mix(in oklab, var(--dk-c, var(--line-strong)) 62%, var(--bg)); }
/* (r48) a workbook map's "keys": "right": at desk widths its keys stand in a column at the map's right, the size key over
   the colour key, as the workbook's Map view (Tableau's legends beside the map); the map is drawn height-capped, so the
   narrower box leaves its drawing's size unchanged; on a phone the keys stay above the map */
@media (min-width: 900px) {
  .dk-pointmap-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; column-gap: var(--space-4); align-items: start; }
  .dk-pointmap-row > .dk-map-keys { order: 2; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; margin: 0; }
  .dk-pointmap-row .dk-size-key { order: -1; }
  /* (r50) in that column the colour key as the workbook draws it: its title, the bar under it, the two ends under the
     bar's ends (in a row it wrapped in the 160px column: "Metric -2.658" over the bar, the highest under its left end);
     its title as the size key's over it (not bolder: the workbook writes both alike) */
  .dk-pointmap-row > .dk-map-keys > .dk-grad-key { display: grid; grid-template-columns: repeat(2, 70px); gap: var(--space-1) 0; }
  .dk-pointmap-row > .dk-map-keys > .dk-grad-key > .dk-key-t { grid-column: 1 / -1; font-weight: inherit; color: inherit; }
  .dk-pointmap-row > .dk-map-keys > .dk-grad-key > .dk-grad { grid-row: 2; grid-column: 1 / -1; }
  .dk-pointmap-row > .dk-map-keys > .dk-grad-key > span:nth-of-type(2) { grid-row: 3; grid-column: 1; }
  .dk-pointmap-row > .dk-map-keys > .dk-grad-key > span:nth-of-type(4) { grid-row: 3; grid-column: 2; text-align: right; }
}
.dk-pt-na { fill: var(--chart-muted); }
.dk-pt-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }
span.dk-pt-pos { background: var(--chart-1); }
span.dk-pt-neg { background: var(--chart-2); }
.dk-map-area[data-heat] { fill: color-mix(in oklab, var(--chart-1) var(--dk-h), var(--bg)); }
.dk-map-area { cursor: default; }
@media (hover: hover) { .dk-map-area:hover { stroke: var(--text); stroke-width: 1.5px; } }
.dk-map-tip { transition: none; white-space: normal; max-width: 100%; }   /* (DESIGN 22) a long tip wraps inside its chart on a phone */
.dk-map-rest { margin: var(--space-2) 0 0; }
.dk-map-table { margin-top: var(--space-2); }
/* (DESIGN 20b) the journeys Sankey (Website): each node a block tinted in its channel's series colour with a solid
   edge in it (Order the accent, No order muted) and its label inside, never on a ribbon; each ribbon a gradient from
   the channel it leaves to the one it reaches, mixed into the card (a drop-off ribbon calmer still); a hover or tap
   keeps the paths through that block or ribbon and fades the rest; the ribbons draw in once, column by column. A
   wide card draws it left to right, a narrow one top to bottom, so it never slides inside its card */
.dk-sankey-card { padding: var(--space-4); }
.dk-sankey-card > .ds-chart-head { margin-top: 0; flex-wrap: wrap; row-gap: var(--space-2); }
.dk-sankey-key { margin: var(--space-2) 0 0; }
.dk-sankey-key, .dk-uplift-card .ds-legend { flex-wrap: wrap; row-gap: var(--space-1); }
.dk-sankey-key > span, .dk-uplift-card .ds-legend > span { white-space: nowrap; }
.dk-sankey-scroll { margin-top: var(--space-3); }
.dk-sankey-wrap { position: relative; container-type: inline-size; }
.dk-sankey { display: block; width: 100%; height: auto; overflow: visible; }
.dk-sk-v { max-width: 460px; }
@container (max-width: 859px) { .dk-sk-h { display: none; } }
@container (min-width: 860px) { .dk-sk-v { display: none; } }
.dk-sankey-node { fill: color-mix(in oklab, var(--dk-c) 16%, var(--surface)); }
.dk-sk-bar { fill: var(--dk-c); pointer-events: none; }
.dk-sankey stop { stop-color: color-mix(in oklab, var(--dk-c) 50%, var(--surface)); }
.dk-sankey stop.dk-sk-off { stop-color: color-mix(in oklab, var(--dk-c) 22%, var(--surface)); }
.dk-sankey-label { font-size: 12px; fill: var(--text); pointer-events: none; }
.dk-sankey-n { fill: var(--text-2); font-variant-numeric: tabular-nums; }
.dk-sankey-head { font-size: 11px; fill: var(--text-2); letter-spacing: .04em; text-transform: uppercase; }
.dk-sk-v .dk-sankey-head { font-size: 12px; letter-spacing: 0; text-transform: none; }
.dk-sk-el { transition: opacity var(--dur) var(--ease); }
.dk-sankey.is-hl .dk-sk-el:not(.is-on) { opacity: .08; }
@media (prefers-reduced-motion: no-preference) {
  .dk-sankey.dk-sk-wait .dk-sk-links { clip-path: inset(0 100% 0 0); }
  .dk-sk-v.dk-sk-wait .dk-sk-links { clip-path: inset(0 0 100% 0); }
  .dk-sankey.dk-sk-wait.dk-sk-go .dk-sk-links { clip-path: inset(0 0 0 0);
    transition: clip-path var(--dur) var(--ease) calc(var(--j) * var(--dur)); }
}
.dk-sk-view { margin: 0; }
.dk-sankey-card .dk-flip { margin-left: auto; }
.dk-sankey-table { margin-top: var(--space-2); }
.dk-sankey-only { margin: 0 0 var(--space-2); }
/* (r17) A/B tests: each test's uplift as a dot on its 95% interval, one scale, zero drawn; accent where the interval
   clears zero, muted where it spans it, the result in words beside it. Desk: name | plot | value; phone: the name over
   the plot and the value */
.dk-uplift-card { padding: var(--space-4); }
.dk-uplift-card > .ds-chart-head { margin-top: 0; flex-wrap: wrap; row-gap: var(--space-2); }
.dk-uplift-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.dk-uplift-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1.4fr); gap: var(--space-1) var(--space-3);
  align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.dk-uplift-name { font-size: var(--text-s); min-width: 0; }
.dk-uplift-name .dk-sub { display: block; }
.dk-uplift-plot, .dk-uplift-axisrow { position: relative; display: block; height: 20px; }
.dk-uplift-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.dk-uplift-ci { position: absolute; top: 9px; height: 2px; border-radius: 1px; background: var(--chart-muted); }
.dk-uplift-dot { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--chart-muted); }
.dk-uplift-row.is-sig .dk-uplift-ci, .dk-uplift-row.is-sig .dk-uplift-dot { background: var(--chart-1); }
.dk-uplift-v { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.dk-uplift-axis { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1.4fr); gap: 0 var(--space-3); margin-top: var(--space-1); }
.dk-uplift-axisrow { grid-column: 2; height: 16px; }
.dk-uplift-tick { position: absolute; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dk-uplift-table { margin-top: var(--space-2); }
/* a word column after a number column keeps the number column's gap (ui.mjs: cells closer than 8 px) */
.dk-experiments td.dk-result, .dk-experiments th:last-child, .dk-uplift-table td:last-child, .dk-uplift-table th:last-child { padding-left: var(--space-4); }
.dk-experiments .dk-sub, .dk-test-sheet .dk-sub { display: block; }
.dk-hyp { margin: 0 0 var(--space-1); }
.dk-arms { margin-top: var(--space-3); }
@media (max-width: 599px) {
  .dk-uplift-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dk-uplift-name { grid-column: 1 / -1; }
  .dk-uplift-axis { grid-template-columns: minmax(0, 1fr) auto; }
  .dk-uplift-axisrow { grid-column: 1; }
  .dk-uplift-v { min-width: 104px; }
}
/* (r17) a block's line to another page (Attribution -> Incrementality): a whole 44px target, wrapping on a phone */
.dk-see { margin: var(--space-2) 0 0; }
.dk-see > a { display: inline-flex; align-items: center; min-height: 44px; }

/* the More sheet */
.dk-wrap { flex-wrap: wrap; }
.dk-full { width: 100%; }
.dk-copy { width: 100%; min-height: var(--tap); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text-2); font-size: var(--text-s); }
.dk-detail .ds-tiles { margin-bottom: var(--space-2); }
.dk-sheet .dk-chart-card { margin-top: var(--space-4); }
.dk-def { margin-top: var(--space-4); }

/* phone: three pages + More, two number columns; desk: every page in the rail, every column */
/* rail labels that wrap ("Profit and loss") stay centred under their icon */
.ds-tabbar > a > span { text-align: center; }
@media (max-width: 599px) {
  .ds-table .dk-wide, .dk-na.dk-wide { display: none; }
  /* (r37) app all_columns: every column on a phone too, the table sliding sideways in its block (a workbook's sheet
     shows them all), its row names held in view */
  [data-cols="all"] .ds-table .dk-wide { display: table-cell; }
  [data-cols="all"] .dk-na.dk-wide { display: block; }
  [data-cols="all"] .dk-hscroll > .ds-table td:first-child, [data-cols="all"] .dk-hscroll > .ds-table th:first-child:not(.sr-only) {
    position: sticky; left: 0; background: var(--bg); z-index: 1; max-width: 40vw; }
  /* (r37) a grid row named longer than a phone's third (a category's full name) wraps: held in view on one line it
     took 408 px of 412 and left no figure in sight */
  .dk-cohort-scroll .dk-cohorts td.dk-label { white-space: normal; max-width: 40vw; overflow-wrap: anywhere; }
  /* (ask 30, DESIGN 30) Metric, Split by and the second metric each on a row of their own: half a row cut "No second
     metric", and a metric's own name ("Net revenue after returns" in 112 px, kit gap 19) */
  .dk-what { display: grid; grid-template-columns: minmax(0, 1fr); }
  /* a row's mark wraps inside its outline: one line ("Lowest contribution margin %") pushed By store 2px past 412 */
  .dk-rows .ds-badge, .dk-label .ds-badge { height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; white-space: normal;
    line-height: 1.3; }
  /* five columns of money on 412 px: a little less gap between them */
  .dk-cohorts .num { padding-left: var(--space-2); }
  /* a month per row, every series in a column: small type and a small gap so 13 months x 6 columns fit 412 px */
  .dk-months-table { font-size: var(--text-xs); }
  .dk-months-table .num { padding-left: var(--space-2); }   /* 8 px: at 4 px "$36.5K$31.8K" read as one (r13 check) */
  /* seven columns of whole words do not fit 412 px (r14: no "Contri-bution"): the table slides sideways inside its card,
     the page never does, and the month stays in view */
  .dk-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
  .dk-scroll .dk-months-table td:first-child, .dk-scroll .dk-months-table th:first-child { position: sticky; left: calc(-1 * var(--space-4));
    background: var(--surface); padding-left: var(--space-4); }
  .dk-scroll .dk-months-table td.dk-label { white-space: nowrap; }
  /* two filters side by side, so the card leaves room for the answer on the first screen (tester 1: it took 45%) */
  .dk-which:has(> .ds-field + .ds-field) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* (kit gap 24, DESIGN 5) a filter set to a value takes the whole row, so the value's name fits: half a row cut a
     16-letter store name to 112 px; a filter showing "All ..." stays half a row */
  .dk-which:has(> .ds-field + .ds-field) > .ds-field:not(.dk-model):has(option:checked:not([value=""])) { grid-column: 1 / -1; }
  .dk-which:has(> .ds-field + .ds-field) > .ds-field.dk-long { grid-column: 1 / -1; }
  .dk-which:has(> .ds-field + .ds-field) > .dk-multi:has(.dk-multi-list input:checked) { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .ds-tabbar > .dk-wide-only { display: none; }
  /* a page reached through More: More is the current tab, as the system marks one (accent and its 2px bar) */
  .ds-tabbar > button[data-here] { position: relative; color: var(--accent); }
  .ds-tabbar > button[data-here]::before { content: ""; position: absolute; top: calc(-1 * (var(--space-1) + 1px)); left: calc(50% - 12px);
    width: 24px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent); }
}
/* the More sheet marks the page it is on (tester 3): the accent and a ring on its icon, not colour alone */
#more a[aria-current="page"] { color: var(--accent); }
#more a[aria-current="page"] .ds-row-ic { color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
:root { --dk-rail-w: 112px; }   /* (DESIGN 46) the desk rail's width: the demo's longest label on one line */
/* (DESIGN 46) the desk rail holds every page (DESIGN 2) in one even rhythm: the window's height shared by its rows
   (--dk-rail-n, the server's count) after the small gaps that open each group (data-rail-gap, --dk-rail-gaps), from
   62 px down to 36 px, so 17 rows, More and Hire me fit 1280 x 720; More follows the last group, never pinned to the
   foot with a hole above it; wide enough that every label sits on one line ("Profit and loss", "Incrementality") */
@media (min-width: 900px) {
  .ds-app:not(.ds-app--phone):has(> .ds-tabbar) { grid-template-columns: var(--dk-rail-w) 1fr; }
  .ds-app:not(.ds-app--phone) > .ds-tabbar {
    --dk-rail-gap: var(--space-3);
    --dk-rail-row: clamp(36px, calc((100dvh - 2 * var(--space-2) - var(--dk-rail-gaps, 0) * var(--dk-rail-gap)) / var(--dk-rail-n, 16)), 62px);
    gap: 0; padding-top: var(--space-2); padding-bottom: var(--space-2); overflow-y: auto; }
  .ds-app:not(.ds-app--phone) > .ds-tabbar > a, .ds-app:not(.ds-app--phone) > .ds-tabbar > button {
    min-height: 0; height: var(--dk-rail-row); flex: none; gap: 2px; }
  .ds-app:not(.ds-app--phone) > .ds-tabbar > [data-rail-gap] { margin-top: var(--dk-rail-gap); }
  .ds-app:not(.ds-app--phone) > .ds-tabbar > a > span, .ds-app:not(.ds-app--phone) > .ds-tabbar > button > span {
    white-space: normal; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; line-height: 16px;
    /* (r37) only a word of ten letters or more breaks with a hyphen ("Verpackungs-register"): "Sales Dashboard" took
       "Sa- / les Dashboard" under the balanced wrap */
    hyphenate-limit-chars: 10 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }
  /* a page named longer than the rail (a client's own view names, "Datasheet - Order Details") takes two lines, never
     cut; one word wider than the rail ("Verpackungsregister") breaks, with a hyphen where the language has one */
  /* the icon gives way first in the shortest windows: icon, 2 px and a 16 px line in a row of 36 px */
  .ds-app:not(.ds-app--phone) > .ds-tabbar .ds-i { width: min(20px, calc(var(--dk-rail-row) - 18px));
    height: min(20px, calc(var(--dk-rail-row) - 18px)); }
  /* the Hire me link right under More (r14 fix B), in the same rhythm */
  .ds-app:not(.ds-app--phone) > .ds-tabbar > a.dk-hire { margin-top: 0; }
}
@media (min-width: 900px) {
  .dk-narrow-only { display: none; }
  /* the title starts where the 1080 px content column starts; the bar's background stays full width */
  .dk-topbar { padding-left: max(var(--space-5), calc((100% - var(--content-wide)) / 2 + var(--space-5)));
    padding-right: max(var(--space-2), calc((100% - var(--content-wide)) / 2 + var(--space-2))); }
  .dk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--space-5); align-items: end; }
  .dk-top > .dk-kpi { margin-bottom: 0; }
  .dk-top--solo { grid-template-columns: minmax(0, 1fr); }
  /* WHEN on one row, WHICH fields side by side under it; a page with a single filter keeps it on the WHEN row */
  .dk-when, .dk-which, .dk-what { flex-wrap: nowrap; }
  /* (kit gap 24, DESIGN 5) the WHICH row wraps, every field kept at 220 px or more, when it holds six fields (Explore:
     "All products" cut in 159 px) or a filter set to a value, whose field takes two shares (above) */
  .dk-which:has(> .ds-field:nth-child(6)),
  .dk-which:has(> .ds-field + .ds-field):has(> .ds-field:not(.dk-model) option:checked:not([value=""])),
  .dk-which:has(> .ds-field + .ds-field):has(> .ds-field.dk-long) { flex-wrap: wrap; }
  .dk-filters:has(> .dk-which > .ds-field:only-child) { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .dk-filters:has(> .dk-which > .ds-field:only-child) > .dk-when { flex: 2 1 520px; }
  .dk-filters:has(> .dk-which > .ds-field:only-child) > .dk-which { flex: 1 1 260px; }
  /* Explore's WHAT keeps a row of its own there: beside WHEN it shrank to "Operating profit befo" (r15 fix C2) */
  .dk-filters:has(> .dk-which > .ds-field:only-child) > .dk-what { flex: 1 1 100%; }
  .dk-dates { flex: 1 1 100%; }
}
/* (r48) app "filter_side": "right" - a replicated workbook's dashboard (a page with its "card_order") stands its cards
   in a column at its right: at desk widths the form leaves the flow for that column, its cards one under another in
   the page's order (each card's --dk-o; the rest after, in the form's order), the sheets taking the width left beside
   it. A plain column as the workbook's (no card around it: the card's hairline is its inset shadow); 288px holds the
   longest choice a select shows in full ("Net Revenue Minus Returns", 227px of text at the body size, measured; 240px
   cut it); a phone keeps the form above the sheets, its cards behind the Filters button */
@media (min-width: 1200px) {
  #view:has(> form.dk-filters[data-fside="right"]) { --dk-fside-w: 288px; position: relative;
    padding-right: calc(var(--dk-fside-w) + 2 * var(--space-5)); }
  #view > form.dk-filters[data-fside="right"] { position: absolute; top: 0; right: var(--space-5); width: var(--dk-fside-w);
    margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; flex-direction: column;
    flex-wrap: nowrap; align-items: stretch; }
  #view > form.dk-filters[data-fside="right"] > .dk-when:not([hidden]),
  #view > form.dk-filters[data-fside="right"] > .dk-which:not([hidden]) { display: contents; }
  #view > form.dk-filters[data-fside="right"] .ds-field,
  #view > form.dk-filters[data-fside="right"] > .dk-dates { order: var(--dk-o, 99); flex: none; width: 100%; min-width: 0; }
  #view > form.dk-filters[data-fside="right"] > .dk-dates:not([hidden]) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  #view > form.dk-filters[data-fside="right"] .dk-multi-pop { left: auto; right: 0; }
  /* (r49) under the cards, as the workbook's column: the grid's colour key (key_col; the one above its grid is then not
     drawn), its title over five steps over its two ends, then the reset button (defaults_link; the chips row's then not) */
  #view > form.dk-filters[data-fside="right"] .dk-col-key { display: block; order: 998; width: 100%; }
  #view > form.dk-filters[data-fside="right"] .dk-col-defaults { display: inline-flex; order: 999; align-self: stretch; justify-content: center; }
  #view:has(> form.dk-filters[data-fside="right"] .dk-col-key) [data-key-col] { display: none; }
  #view:has(> form.dk-filters[data-fside="right"] .dk-col-defaults) > .dk-chips > .dk-defaults { display: none; }
  #view:has(> form.dk-filters[data-fside="right"] .dk-col-defaults) > .dk-chips:is(.dk-chips-phone, :not(:has(> .ds-chip:not(.dk-defaults)))) { display: none; }
  .dk-col-key > .dk-heat-key-t { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px 0; margin: 0; width: 100%; }
  .dk-col-key > .dk-heat-key-t[data-steps="5"] { grid-template-columns: repeat(5, 1fr); }
  .dk-col-key > .dk-heat-key-t > .dk-key-t { grid-column: 1 / -1; margin: 0 0 var(--space-1); }
  .dk-col-key > .dk-heat-key-t > i { grid-row: 2; width: auto; height: 12px; border-radius: 0; }
  .dk-col-key > .dk-heat-key-t > span:nth-of-type(2) { grid-row: 3; grid-column: 1 / 3; margin: 0; }
  .dk-col-key > .dk-heat-key-t > span:last-child { grid-row: 3; grid-column: -3 / -1; margin: 0; text-align: right; }
}
.dk-skel { height: 240px; border-radius: var(--radius-m); }

/* ---- (r18) the gate: the sign-in page, /privacy, and the photo card (a card in the corner on a desk, a slim bar above
   the tab bar on a phone, never a modal; GUIDE rule 6: a hairline, no shadow) ---- */
.dk-gate { display: flex; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-4); }
.dk-gate-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-5); text-align: center; }
.dk-gate-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.dk-gate-name { margin: 0; }
.dk-gate-line, .dk-gate-why, .dk-gate-err { margin: 0; }
.dk-gate-line { color: var(--text-2); }
.dk-gate-err { color: var(--text); font-weight: 600; }
.dk-gate-actions { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.dk-gate-email { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.dk-gate-privacy { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); }
.dk-gate-hire { margin-left: var(--space-4); }    /* (6c fix 4) the wall's way to the owner, beside Privacy */
/* (DESIGN 25) the sign-in card over the page asked for: the welcome card's look and motion; the page behind stays drawn,
   blurred under a scrim of its own background token (never pure black or white), not scrollable; nothing moves under
   prefers-reduced-motion. Without script the card is drawn open in place (fixed, centred), the page still inert. */
body.dk-walled { overflow: hidden; }
body.dk-walled > .ds-app { filter: blur(6px); }
.dk-wall { position: fixed; inset: 0; z-index: 60; max-height: calc(100% - 2 * var(--space-4)); overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.dk-wall:not([open]) { display: none; }
dialog.dk-wall::backdrop { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.dk-wall .dk-gate-name { margin: 0; }
.dk-wall .dk-gate-actions, .dk-wall .dk-gate-retry, .dk-wall .dk-gate-email { width: 100%; }
.dk-gate-to { color: var(--text); font-weight: 600; word-break: break-all; }
.dk-gate-retry > summary { min-height: var(--tap); }
.dk-gate-retry .dk-gate-email { margin-top: var(--space-2); }
.dk-gate-fixrow { display: contents; }
.dk-gate-body.dk-walled { background: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  body.dk-walled > .ds-app { animation: dk-wall-blur var(--dur) var(--ease); }
  dialog.dk-wall::backdrop { animation: ds-fade var(--dur) var(--ease); }
  @keyframes dk-wall-blur { from { filter: none; } }
}
.dk-privacy { line-height: 1.5; }
.dk-privacy .ds-h { margin-top: var(--space-5); }
.dk-privacy ul { padding-left: var(--space-5); }
.dk-privacy .ds-btn { margin-top: var(--space-5); }
/* (r20) the photo card sits in the sticky top bar's band, at its right, on a desk (6c: a phone's is a strip over the tab
   bar, below): a card never covers a figure (r19: the desk's corner card lay on Incrementality's Amazon Ads row and Customers' monthly bars at 1280 x 900;
   the phone's bar above the tab bar on whatever scrolled under it). The titles keep clear of it (app.js: --dk-card-room) */
.dk-card { position: fixed; z-index: 4; top: calc(env(safe-area-inset-top) + 5px); right: var(--space-2); display: flex;
  align-items: center; gap: var(--space-2); max-width: 320px; padding: 0 0 0 var(--space-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.dk-card-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.dk-card-text { margin: 0; font-size: var(--text-s); white-space: nowrap; }
.dk-card-text a { display: inline-flex; min-height: var(--tap); align-items: center; color: var(--accent); }
.dk-card-text a + a { margin-left: var(--space-3); }   /* (DESIGN 35) Book a call beside Ask me */
.dk-card-x { flex: none; margin-left: auto; }
@media (min-width: 900px) { body.dk-card-on .dk-topbar { padding-right: var(--dk-card-room, 340px); } }
@media (prefers-reduced-motion: no-preference) {
  .dk-card { animation: dk-card-in var(--dur) var(--ease); }
  @keyframes dk-card-in { from { transform: translateY(-8px); } }
}
@media (min-width: 900px) {   /* its right edge on the content column's, as the title's left edge is */
  .dk-card { right: max(var(--space-2), calc((100vw - var(--dk-rail-w) - var(--content-wide)) / 2 + var(--space-2))); }
}
/* (6c fix 3, r16's phone plan) below 900 px the card leaves the top bar, which keeps every title and Hire me: a slim
   strip across the screen right over the tab bar, a hairline on top, the content's end padded clear of it; app.js holds
   it back while the consent bar, which sits there too, is on */
@media (max-width: 899px) {
  .dk-card { top: auto; left: 0; right: 0; bottom: calc(56px + var(--space-1) + var(--space-2) + 1px + env(safe-area-inset-bottom));
    max-width: none; padding: 0 var(--space-2) 0 var(--space-4); border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .dk-card-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.dk-card-on .ds-main { padding-bottom: calc(var(--space-7) + 46px); }
}
@media (max-width: 599px) {   /* (DESIGN 35) a phone's card: the face, the question and Ask me, no Book a call */
  .dk-card-text a.dk-card-book { display: none; }
  .dk-card-photo { width: 28px; height: 28px; }
}

/* (r20) the welcome card: centred over the system's scrim, a fade and a short rise over the motion token, the chips one
   after another (40 ms), the chosen chip in the accent; nothing moves under prefers-reduced-motion */
.dk-welcome { width: min(360px, calc(100% - 2 * var(--space-4))); margin: auto; padding: var(--space-6) var(--space-5) var(--space-4);
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-l); text-align: center; }
/* (r20 QA) the greeting is the card's title line at heading size, the question under it at body size; the scrim is the
   sheet's (the UA's default backdrop was invisible in dark); focus lands on the card itself, never on a chip (a ring on
   Founder read as a pre-chosen answer); the chips two by two on a phone, one row on a desk (they wrapped 3 + 1) */
.dk-welcome:focus, .dk-welcome:focus-visible { outline: none; }
.dk-welcome::backdrop { background: var(--scrim); }
.dk-welcome.is-leaving::backdrop { opacity: 0; }
.dk-welcome-hi { margin: 0; font-size: var(--text-xl); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; color: var(--text); }
.dk-welcome .dk-welcome-ask { margin: var(--space-1) 0 var(--space-5); font-size: var(--text-m); font-weight: 400; color: var(--text-2); }
.dk-welcome-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-2); }
.dk-welcome-chips > .ds-chip { justify-content: center; }
@media (min-width: 900px) {
  .dk-welcome { width: min(440px, calc(100% - 2 * var(--space-4))); }
  .dk-welcome-chips { grid-template-columns: repeat(4, auto); justify-content: center; }
}
.dk-welcome .ds-chip.is-chosen { background-color: var(--accent); color: var(--on-accent); }
.dk-welcome-skip { margin-top: var(--space-4); }
.dk-welcome.is-leaving { opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: no-preference) {
  .dk-welcome::backdrop { animation: ds-fade var(--dur) var(--ease); transition: opacity var(--dur) var(--ease); }
  .dk-welcome { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .dk-welcome[open] { animation: dk-welcome-in var(--dur) var(--ease); }
  .dk-welcome[open] .dk-welcome-chips > * { animation: dk-welcome-chip var(--dur) var(--ease) backwards; }
  .dk-welcome-chips > :nth-child(2) { animation-delay: 40ms; }
  .dk-welcome-chips > :nth-child(3) { animation-delay: 80ms; }
  .dk-welcome-chips > :nth-child(4) { animation-delay: 120ms; }
  .dk-welcome-chips > :nth-child(5) { animation-delay: 160ms; }
  .dk-welcome .ds-chip { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  @keyframes dk-welcome-in { from { opacity: 0; transform: translateY(8px); } }
  @keyframes dk-welcome-chip { from { opacity: 0; transform: translateY(4px); } }
}
/* a role's page reached through More on a desk: More is the current rail entry, as on a phone (accent and its bar) */
@media (min-width: 900px) {
  .ds-app:not(.ds-app--phone) > .ds-tabbar > button[data-here-desk] { position: relative; color: var(--accent); }
  .ds-app:not(.ds-app--phone) > .ds-tabbar > button[data-here-desk]::before { content: ""; position: absolute; top: calc(50% - 12px);
    left: calc(-1 * var(--space-2)); width: 2px; height: 24px; border-radius: 0 2px 2px 0; background: var(--accent); }
}
/* a role's five-slot phone bar: "Profit and loss" wraps to two lines there, so every icon starts on one row (centred,
   the wrapped label lifted its icon 9 px above the others) */
@media (max-width: 899px) {
  .ds-tabbar[data-role]:not([data-role=""]) > a, .ds-tabbar[data-role]:not([data-role=""]) > button {
    justify-content: flex-start; padding-top: var(--space-3); }
}
/* (r20) the MMM's response curves (Incrementality): one card per ad channel, side by side on a desk and stacked on a
   phone; the curve in the accent, break-even a dashed muted line, today's spend a dot on a hairline, the point where the
   next dollar falls to break-even a ring; a tenth of the spend under the pointer or the finger answers in the tooltip */
.dk-curves { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-2); }
@media (min-width: 960px) { .dk-curves { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dk-curve-key { flex-wrap: wrap; row-gap: var(--space-1); }
.dk-curve-key > span { white-space: nowrap; }
.dk-curve-card { padding: var(--space-4); min-width: 0; }
.dk-curve-card > .ds-chart-head { margin-top: 0; align-items: flex-start; }
.dk-curve-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dk-curve-wrap { position: relative; margin-top: var(--space-2); }
.dk-curve { display: block; width: 100%; height: auto; overflow: visible; }
.dk-curve-grid { stroke: var(--chart-grid); stroke-width: 1px; shape-rendering: crispEdges; }
.dk-curve-ax { font-size: calc(var(--text-xs) / var(--dk-k, 1)); fill: var(--text-3); font-variant-numeric: tabular-nums; }
/* (DESIGN 22) app.js sets --dk-k, the drawing's scale on its card: lines keep 2px whatever the card's width */
.dk-curve path, .dk-curve line, .dk-curve circle { vector-effect: non-scaling-stroke; }
.dk-curve-line { fill: none; stroke: var(--chart-1); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.dk-curve-be { stroke: var(--chart-muted); stroke-width: 1.5px; stroke-dasharray: 4 4; }
.dk-curve-mark { stroke: var(--chart-axis); stroke-width: 1px; shape-rendering: crispEdges; }
.dk-curve-today { fill: var(--chart-1); stroke: var(--surface); stroke-width: 2px; }
.dk-curve-stop { fill: var(--surface); stroke: var(--text); stroke-width: 2px; }
.dk-curve-hit { fill: none; pointer-events: all; cursor: default; }
@media (hover: hover) { .dk-curve-hit:hover { fill: color-mix(in oklab, var(--chart-1) 10%, var(--surface)); fill-opacity: .5; } }
.dk-curve-words { margin: var(--space-2) 0 0; }
.dk-curve-table { margin-top: var(--space-2); }
i.dk-key.dk-key-dash, .ds-legend > span > i.dk-key.dk-key-dash { height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--chart-muted); }
i.dk-key.dk-key-ring, .ds-legend > span > i.dk-key.dk-key-ring { border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--text); }
i.dk-key.dk-key-tick, .ds-legend > span > i.dk-key.dk-key-tick { width: 2px; border-radius: 0; background: var(--line-strong); }
/* (r20) the budget-shift what-if: money moved, each channel's change in sales caused, the net in bold */
.dk-shift-lead { margin: 0 0 var(--space-2); }
/* (r20 batch 3, B1) the AI page: who answered, under the player (DESIGN 48: no date), an answer's numbers links whose box is a 44 px target
   while the line keeps its height, the MCP calls in scroll boxes that never run the page sideways; then the visitor's
   connector URL beside its Copy button and the apps' steps */
.dk-ai-said { margin: 0; }
.dk-ask, .dk-ask-use { max-width: 720px; }
/* inline, so a line never breaks between "(" and its number (an inline-block let "(" end a line); its padding makes
   the box a 44 px target without moving a character: vertical padding on an inline box leaves the line alone, and the
   negative side margins take back the horizontal */
a.dk-ask-fig { padding: 13px 14px; margin: 0 -14px; white-space: nowrap; text-decoration-thickness: 1px; }
a.dk-ask-fig:focus-visible { outline-offset: -11px; }
.dk-ask-call-list { list-style: none; margin: 0; padding: 0; }
.dk-ask-call { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) 0 var(--space-3); min-width: 0; }
.dk-ask-call + .dk-ask-call { border-top: 1px solid var(--line); }
.dk-ask-tool { font-weight: 500; }
.dk-json { margin: 0 0 var(--space-2); max-height: 240px; overflow: auto; padding: var(--space-3); border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text-2); font-family: var(--font-sans); font-size: var(--text-xs); line-height: 18px;
  white-space: pre; tab-size: 2; }
.dk-ask-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; }
.dk-ask-apps { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-2); }
@media (min-width: 900px) { .dk-ask-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dk-ask-app-h { margin: 0 0 var(--space-2); font-size: var(--text-s); font-weight: 500; }
ol.dk-steps { margin: 0; padding-left: var(--space-5); list-style: decimal; color: var(--text-2); font-size: var(--text-s); line-height: 22px; }
/* (DESIGN 26) AI: the replay frame (a fixed-height chat window, the asked question on the right, the connector step,
   the answer streaming in word by word), its caption and pause button; then the questions fold (DESIGN 52), connect
   tabs, code with Copy */
.dk-ai-loop { margin: var(--space-4) 0 0; }
.dk-ai-chat { padding: 0; overflow: hidden; }
.dk-ai-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line); font-size: var(--text-s); }
.dk-ai-head .ds-i { color: var(--accent); }
/* (DESIGN 38) as tall as the tallest conversation finished (app.js sets the height): nothing scrolls inside it */
.dk-ai-scroll { position: relative; overflow: hidden; padding: var(--space-4); }
.dk-ai-q { display: flex; justify-content: flex-end; margin: 0 0 var(--space-3); }
.dk-ai-qt { max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: var(--surface-2);
  font-size: var(--text-s); line-height: 20px; overflow-wrap: anywhere; }
.dk-ai-tool { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.dk-ai-a { font-size: var(--text-s); line-height: 1.55; overflow-wrap: anywhere; }
.dk-ai-a p, .dk-ai-a ul { margin: 0 0 var(--space-3); }
.dk-ai-a ul { padding-left: var(--space-5); }
.dk-ai-a b { font-weight: 600; }
.dk-ai-a a.dk-ask-fig { padding-top: 14px; padding-bottom: 14px; }   /* 14 px type: 44 px targets, the line unmoved */
.dk-ai-loop [data-off] { display: none; }
.dk-ai-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); }
/* (DESIGN 42) two labelled parts in the one heading style, a line under each; a clear break above Connect */
.dk-ai-sub { margin: var(--space-1) 0 var(--space-3); }
.dk-ai-connect { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
/* (DESIGN 39) a conversation's chart under its short answer: the kit's line, or bars with each value beside its bar */
.dk-ai-viz { margin: var(--space-1) 0 0; }
.dk-ai-viz-h { margin: 0 0 var(--space-2); }
.dk-chart.dk-ai-trend { min-height: 150px; }
.dk-ai-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.dk-ai-bar { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: 24px; font-size: var(--text-s); }
.dk-ai-bar-name { line-height: 18px; overflow-wrap: anywhere; }
.dk-ai-bar > .dk-bar-track { margin-top: 0; }
.dk-ai-bar-num { min-width: 3.5rem; text-align: right; color: var(--text-2); }
.dk-ai-how { margin-top: var(--space-2); padding-left: 0; padding-right: 0; }
/* (DESIGN 41) every question a chip, grouped by role, under the player; a phone stacks a role over its chips */
.dk-ai-chips { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.dk-ai-role { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .dk-ai-role { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: start; column-gap: var(--space-3); }
  .dk-ai-role-h { padding-top: 13px; }
}
/* a question that wraps (the two long ones at 412) grows its pill: 8 px above and below the text keep it inside the pill
   it draws (the chip's 4 px transparent borders belong to its 44 px target, not to the pill); a one-line chip stays 44 px */
.dk-ai-chip { white-space: normal; text-align: left; line-height: 18px; padding-block: var(--space-2); }
.dk-ai-sheet-q { margin: 0 0 var(--space-2); }
.dk-ai-sheet-h { margin: var(--space-4) 0 var(--space-2); }
.dk-ai-try-more { margin-top: var(--space-2); }
.dk-ai-play { flex: none; }
.dk-ai-capt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dk-ai-apps { margin: var(--space-4) 0 var(--space-3); max-width: 100%; overflow-x: auto; }
.dk-ai-pane .ds-small { margin: var(--space-3) 0 0; }
.dk-ai-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; margin-top: var(--space-3); }
.dk-ai-code .dk-json { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dk-ai-docs { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.dk-ai-docs a { display: inline-flex; align-items: center; min-height: var(--tap); }
.dk-ai-try-fold { margin: 0 0 var(--space-4); }
.dk-ai-try { margin-bottom: var(--space-2); }
.dk-ai-note { margin: var(--space-3) 0 0; }
.dk-ask-anon { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
/* (DESIGN 31) the expertise line atop Attribution, Incrementality, A/B tests, Explore and Customers; Work with me: photo, two parts, Hire me */
.dk-expert { margin: var(--space-6) 0 var(--space-5); color: var(--text-2); }   /* the room the link's tall box used to take: the page below stays put (20 px collapses with the card's 8) */
/* (DESIGN 45, 43) a link inside running text (Work with me here, the Alerts intro's See the agent) stays inline, so its
   paragraph keeps one line pitch whether or not the link shares a line: 14 px padding around 14 px type makes the box a
   44 px target without growing its line box (as the AI answers' number links), the side padding taken back by a
   negative margin, the focus ring drawn back to the words */
.dk-expert a, a.dk-al-agent { padding: 14px; margin: 0 -14px; white-space: nowrap; }
.dk-expert a > .ds-i, a.dk-al-agent > .ds-i { display: inline; margin-left: var(--space-1); vertical-align: middle; }   /* ds.css draws an svg as a block */
.dk-expert a:focus-visible, a.dk-al-agent:focus-visible { outline-offset: -11px; }
/* (r20 batch 3, B4) Every number checked: sources, the warehouse and this dashboard as three steps (down a phone,
   across a desk), then the last live run's counts as rows */
.dk-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.dk-flow-step { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); min-width: 0; }
.dk-flow-to { display: grid; place-items: center; color: var(--text-3); }
.dk-flow-src { list-style: none; margin: var(--space-1) 0 0; padding: 0; font-size: var(--text-s); }
.dk-flow-src > li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--line); }
.dk-flow-src > li:last-child { border-bottom: 0; }
.dk-flow-src .num { color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .dk-flow { grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .dk-flow-to > .ds-i { transform: rotate(-90deg); }
}
.dk-run { max-width: 720px; }   /* a list: the content column (GUIDE layout), the flow below it may go wide */
.dk-run-meta { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.dk-run-parts .ds-row-main > span, .dk-run-parts .ds-row-end { font-variant-numeric: tabular-nums; }
.dk-run-parts .ds-row-end { font-weight: 400; color: var(--text-2); font-size: var(--text-s); }
/* (r20 B5) month to date against target, under the hero: one row per metric, the figure, the system meter and its legend */
.dk-pace-when { margin: 0 0 var(--space-2); }
.dk-pace { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.dk-pace-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.dk-pace-l { font-size: var(--text-s); color: var(--text-2); }
.dk-pace-v { font-size: var(--text-l); font-weight: 600; }
.dk-pace-words { margin: var(--space-1) 0 0; }
@media (min-width: 900px) { .dk-pace { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

/* (r20 B2) the alerts page: the digest as a chat message in the system's own tokens (not Slack's brand), then the alerts
   the rules fired and the rules themselves */
.dk-msg-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.dk-msg-av { width: 36px; height: 36px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-2);
  display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.dk-msg-text { margin: 0 0 var(--space-2); }
ul.dk-msg-list { list-style: none; margin: 0 0 var(--space-4); padding: 0 0 0 var(--space-3); border-left: 2px solid var(--line-strong);
  display: grid; gap: var(--space-3); }
.dk-msg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: baseline; }
.dk-msg-l { font-size: var(--text-s); color: var(--text-2); min-width: 0; }
.dk-msg-v { text-align: right; white-space: nowrap; font-weight: 600; }
.dk-msg-v > .ds-delta { font-weight: 400; margin-left: var(--space-1); }
.dk-msg-pace { grid-column: 1 / -1; }
.dk-msg-link { display: inline-flex; align-items: center; min-height: 44px; }
.dk-alerts-from { margin: 0 0 var(--space-2); }
ul.dk-alerts { padding: var(--space-1) var(--space-4); }   /* over ds.css's ul[class] { padding: 0 } */
.dk-alert { padding: var(--space-3) 0; box-shadow: inset 0 1px 0 var(--line); }
.dk-alert:first-child { box-shadow: none; }
.dk-collapsed > li[data-more] { display: none; }
.dk-alert-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.dk-alert-head > .ds-delta { white-space: nowrap; }
.dk-alert-sub { margin: 0; }
.dk-alert-go { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; }
ul.dk-rules { margin: 0; padding: var(--space-1) var(--space-4); }
.dk-rule { padding: var(--space-3) 0; box-shadow: inset 0 1px 0 var(--line); }
.dk-rule:first-child { box-shadow: none; }
.dk-rule-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.dk-rule > p { margin: var(--space-1) 0 0; }
ul.dk-msg-list { max-width: 560px; }   /* a message reads as one: its figures near their labels on a desk */
/* (DESIGN 28) the Alerts intro, then the newest alert as it arrives, a Slack message or an email by the switch: the same
   chat card as the digest, and an email card with its from line and subject */
.dk-al-intro { margin: 0 0 var(--space-4); max-width: 640px; }
.dk-al-prev .ds-section-head { flex-wrap: wrap; gap: var(--space-2); }
.dk-al-top, .dk-al-prev { max-width: 640px; }
.dk-mail-from { margin: 0 0 var(--space-2); }
.dk-mail-subj { margin: 0 0 var(--space-2); font-weight: 600; }
.dk-mail-subj .ds-delta { font-weight: 400; }
/* (DESIGN 47, 54) the agents page: its intro, then a Slack channel in the AI page's player (each message its sender's
   mark, name and time, the text, Slack's Approve / Edit / Ignore drawn on one waiting for an OK, its link on a line of
   its own); (DESIGN 63) then Since midnight and the close */
.dk-ag-top, .dk-ag-slack, .dk-ag-night, .dk-ag-close { max-width: 720px; }
.dk-ag-intro { margin: 0 0 var(--space-4); }
.dk-sl-chan { font-weight: 600; }
.dk-sl-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-3); margin: 0 0 var(--space-3); }
.dk-sl-av { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text-2); font-size: var(--text-s); font-weight: 600; }
.dk-sl-msg[data-from="agent"] .dk-sl-av { color: var(--accent); }
.dk-sl-body { min-width: 0; }
.dk-sl-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin: 0; font-size: var(--text-s); line-height: 20px; }
.dk-sl-who > b { font-weight: 600; }
.dk-sl .dk-ai-q { display: block; margin: 0; }
.dk-sl .dk-ai-qt { display: block; max-width: none; padding: 0; border-radius: 0; background: none; }
.dk-sl .dk-ai-tool { margin: 0 0 var(--space-3) calc(36px + var(--space-3)); }
/* (6c fix 2) a channel reads from its top, so a short thread is in view at once (it sat at the foot of a box sized for
   the longest); the frame fits one view (app.js), so a long thread scrolls inside it, the newest line kept in view */
.dk-sl .dk-ai-scroll { overflow-y: auto; overscroll-behavior: contain; }
.dk-sl .dk-ai-a { line-height: 20px; }
.dk-sl .dk-ai-a p { margin: 0; }
ol.dk-sl-thread { list-style: none; margin: 0; padding: 0; }
.dk-sl-text { font-size: var(--text-s); line-height: 20px; }
/* a block, not a flex box: the replay splits its words into spans, and a flex box drops the spaces between them */
.dk-sl-link { display: block; width: max-content; max-width: 100%; padding: 12px 0; font-size: var(--text-s); line-height: 20px; }
.dk-sl .dk-msg-acts { margin: var(--space-2) 0 0; }
/* (DESIGN 63) Behind it, under the channel: four cells (two by two on a phone), each holding every thread's value in
   one grid place, only the playing thread's shown, so the strip is one height whatever plays and the chips under it
   never move (60); app.js fills Knowledge and Tools with the working step (data-fill 1), Checked and Cost with the
   agent's reply (2) */
.dk-ag-behind { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--line); }
.dk-ag-bh { min-width: 0; }
.dk-ag-bh > dt { margin: 0 0 2px; line-height: 16px; }
.dk-ag-bh-v { display: grid; margin: 0; font-size: var(--text-s); line-height: 20px; overflow-wrap: anywhere; }
.dk-ag-bh-v > span { grid-area: 1 / 1; visibility: hidden; }
.dk-ag-bh-v > span.is-on { visibility: visible; }
.dk-ag-behind[data-fill="0"] .dk-ag-bh-v > span,
.dk-ag-behind[data-fill="1"] [data-cell="checked"] .dk-ag-bh-v > span,
.dk-ag-behind[data-fill="1"] [data-cell="cost"] .dk-ag-bh-v > span { visibility: hidden; }
.dk-ag-cost, .dk-ag-hand { display: block; }
.dk-ag-cost { font-weight: 600; }
/* on a phone two by two, and under the caption, one scroll down: the frame, its caption and Pause keep the view a
   first-time visitor lands on (6d fix 1), the channel as tall as that view allows */
@media (max-width: 899px) {
  .dk-sl.dk-ai-loop { display: flex; flex-direction: column; }
  .dk-sl.dk-ai-loop > .dk-ag-behind { order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* (DESIGN 63) Since midnight: the week first, in body colour; one row a job, its time, the job (a muted note under it)
   and its level in a badge at the row's end (an outline for advice); then the close, its line and the one primary button */
ol.dk-ag-jobs { list-style: none; margin: 0; padding: var(--space-1) var(--space-4); }
ol.dk-ag-jobs > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-3);
  padding: var(--space-3) 0; box-shadow: inset 0 1px 0 var(--line); }
ol.dk-ag-jobs > li:first-child { box-shadow: none; }
.dk-ag-at { line-height: 20px; }
.dk-ag-job { margin: 0; min-width: 0; font-size: var(--text-s); line-height: 20px; }
.dk-ag-job > span { display: block; }
.dk-ag-lv { white-space: nowrap; }
.dk-ag-lv--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-2); }
.dk-ag-week { margin: 0 0 var(--space-3); }
/* (DESIGN 63) a figure and its change, "$4.90K (↑ 38.2%", never split across lines */
.dk-nw { white-space: nowrap; }
.dk-ag-close-line { margin: 0; }
/* (ask 60) the frame says Slack: a title bar naming it over the channel, and Slack's composer at its foot typing requests
   no thread shows, never sent (app.js keeps it as tall as its longest request, so typing never moves the chips); the
   not-a-menu line sits close under the honesty line, in full colour */
.dk-sl-bar { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--text-xs); }
.dk-sl-app { font-weight: 600; }
.dk-sl-bar-chan { display: none; font-weight: 600; }
.dk-sl-compose { margin: 0 var(--space-4) var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-m);
  box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--text-s); line-height: 20px; overflow-wrap: anywhere; }
.dk-sl-typed:not(:empty) ~ .dk-sl-ph { display: none; }
.dk-sl-ph { color: var(--text-3); }
/* (6c fix 6) Slack at a glance: a sender's messages in a row share one mark and name (the next one's mark is an empty
   column, closer under it), and on a desk the workspace's channel list beside the channel, this one marked as Slack
   marks it (the accent bar the system draws for the current tab, no literal colour); a picture, so no tab stops */
.dk-sl-msg:has(> .dk-sl-av--cont) { margin-top: calc(-1 * var(--space-2)); }
.dk-sl-av--cont { height: 0; background: none; }
.dk-sl-side { display: none; }
@media (min-width: 900px) {
  .dk-sl-win { display: grid; grid-template-columns: 148px minmax(0, 1fr); }
  .dk-sl-side { display: block; padding: var(--space-3) 0; border-right: 1px solid var(--line); background: var(--surface-2); font-size: var(--text-s); }
  .dk-sl-side-h { margin: 0 0 var(--space-1); padding: 0 var(--space-3); color: var(--text-3); }
  .dk-sl-side ul { list-style: none; margin: 0; padding: 0; }
  .dk-sl-side li { padding: var(--space-1) var(--space-3); color: var(--text-2); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dk-sl-side li.is-on { box-shadow: inset 2px 0 0 var(--accent); color: var(--text); font-weight: 600; }
}
.dk-sl-main { min-width: 0; }
/* (6d fix 1) on a phone the frame comes first under its label, so a first-time visitor lands with the frame, its
   caption and Pause in one view: the honesty line and the not-a-menu line follow it, over the example chips they
   describe (the desk keeps them above), and the title bar names the channel as Slack's phone app does, in place of the
   row under it. (6d fix 2) the bar's "Slack" at the body size, as there is no channel list to say it. (DESIGN 63) the one
   line under the label (honesty and not-a-menu in one) follows the frame the same way */
@media (max-width: 899px) {
  .dk-ag-slack { display: flex; flex-direction: column; }
  .dk-ag-slack > .dk-ag-honest, .dk-ag-slack > .dk-ai-chips { order: 1; }
  .dk-ag-slack > .dk-ag-honest { margin-top: var(--space-4); }
  .dk-sl-app { font-size: var(--text-m); }
  .dk-sl-bar-chan { display: inline; font-size: var(--text-s); }
  .dk-sl-ws, .dk-sl-main > .dk-ai-head { display: none; }
}
.dk-msg-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); }
.dk-msg-act { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-s);
  box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--text-xs); font-weight: 600; color: var(--text-2);
  cursor: default; user-select: none; }
/* (DESIGN 22) when a new customer pays back: four small figures over the chart (two by two on a phone), the previous
   period's cohorts as the muted line, CAC the dashed one */
.dk-pay-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-2) 0 var(--space-3); }
@media (min-width: 720px) { .dk-pay-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dk-pay-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dk-pay-stats b { font-size: var(--text-l); font-weight: 600; }
.dk-pay-prev { fill: none; stroke: var(--chart-muted); stroke-width: 2px; stroke-linejoin: round; }
.dk-pay-table { margin-top: var(--space-3); }
/* (DESIGN 23) the statement: subtotals bold and flush left, the lines that make them one step in, a line's parts two;
   a line that splits further folds open from its name (a 44px target, its chevron turning) */
.dk-bridge .dk-line > td:first-child { padding-left: var(--space-5); }
.dk-bridge .dk-subline > td:first-child { padding-left: calc(var(--space-5) + var(--space-5)); color: var(--text-2); }
.dk-bridge .dk-subline > td { font-size: var(--text-s); }
.dk-bridge .dk-total > td:first-child { font-weight: 600; }
.dk-pl-fold { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; min-height: 44px; display: inline-flex; flex-direction: column; justify-content: center; }
.dk-pl-fold::after { content: ""; position: absolute; margin-left: -14px; margin-top: 2px; width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease); }
.dk-pl-fold[aria-expanded="true"]::after { transform: rotate(45deg); }
.dk-pl-fold:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
.dk-pl-as { margin: 0 0 var(--space-2); }
.dk-be-stats { margin: 0; }
@media (min-width: 720px) { .dk-be-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* (DESIGN 27) the Share button: the top bar's one icon, at its right (left of the photo card when that is on) */
.dk-sharebtn { flex: none; margin-left: auto; color: var(--text-2); }
/* (ask 62) Hire me in the phone's top bar for every role, a quiet text link like the rail's, left of Share: no side padding
   (its text is a 44 px target already) and half the bar's gap, so the longest title, "Every number checked", keeps its
   whole width at 412 px */
.dk-hire-top { flex: none; display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); margin-right: calc(-1 * var(--space-1));
  font-size: var(--text-s); color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.dk-hire-top + .dk-sharebtn { margin-left: 0; }
@media (hover: hover) { .dk-hire-top:hover { color: var(--text); } }
/* its display above outranks .dk-narrow-only's (same weight, later): the desk has the rail's Hire me, so one, not two */
@media (min-width: 900px) { .dk-hire-top { display: none; } }
/* (6c fix 3) a title too long for a phone's bar beside Hire me and Share shows its short form (the spec page's "short":
   /checked "Checked"), drawn from data-short so the heading's own text, which a screen reader reads, stays whole; the
   same for a tab label the bar would wrap ("tab_short": Profit and loss, "P&L") */
@media (max-width: 419px) {
  .dk-titles > .ds-title[data-short]::before, .ds-tabbar span[data-short]::before { content: attr(data-short) / ""; }
  .dk-titles > .ds-title[data-short] > span, .ds-tabbar span[data-short] > span { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* (DESIGN 33) the consent bar: low and quiet, like a cookie bar; above the phone's tab bar, at the foot of the content
   column on a desk; OK and No thanks one style and one size; never over the welcome or sign-in card (app.js) */
.dk-consent { position: fixed; z-index: 4; left: var(--space-4); right: var(--space-4);
  bottom: calc(56px + var(--space-1) + var(--space-2) + 1px + env(safe-area-inset-bottom) + var(--space-2)); display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); font-size: var(--text-s); }
.dk-consent[hidden] { display: none; }
.dk-consent-text { margin: 0; flex: 1 1 260px; color: var(--text-2); }
.dk-consent-acts { display: flex; align-items: center; gap: var(--space-2); }
.dk-consent-acts .ds-btn { min-width: 104px; }
.dk-consent-link { display: inline-flex; min-height: var(--tap); align-items: center; padding: 0 var(--space-2); color: var(--accent); }
body.dk-consent-on .ds-main { padding-bottom: calc(var(--space-8) + 96px); }
@media (prefers-reduced-motion: no-preference) {
  .dk-consent { animation: dk-card-in var(--dur) var(--ease) reverse both; animation-direction: normal; }
  .dk-consent.is-leaving { opacity: 0; transition: opacity var(--dur) var(--ease); }
}
@media (min-width: 900px) {
  .dk-consent { bottom: var(--space-4); left: calc(var(--dk-rail-w) + max(var(--space-4), (100vw - var(--dk-rail-w) - var(--content-wide)) / 2 + var(--space-4)));
    right: max(var(--space-4), calc((100vw - var(--dk-rail-w) - var(--content-wide)) / 2 + var(--space-4))); }
}
/* (DESIGN 30) Explore's second metric: the scale switch over its charts, the second series' key, the r line under them */
.dk-x-scale { margin: 0 0 var(--space-2); max-width: 360px; }
.ds-legend > span > i.dk-ix2 { background: var(--chart-2); }
.dk-ix-note { margin: var(--space-2) 0 0; }
.dk-corr { margin: 0 0 var(--space-4); }

/* (5 Nov 2026) app "look": "calm": a replicated workbook's tabs, charts and functions in the house style: its filters in one
   bar above the page (app filter_side "top", in card_order), wider content, whole tables with no cut frames, quiet heat. */
html[data-look="calm"] { --content-wide: 1400px; }
[data-look="calm"] [data-heat="1"] { --dk-h: 5%; } [data-look="calm"] [data-heat="2"] { --dk-h: 12%; } [data-look="calm"] [data-heat="3"] { --dk-h: 20%; }
[data-look="calm"] [data-heat="4"] { --dk-h: 30%; } [data-look="calm"] [data-heat="5"] { --dk-h: 42%; } [data-look="calm"] [data-heat="6"] { --dk-h: 58%; }
[data-look="calm"] .dk-cohorts td[data-heat="6"], [data-look="calm"] .dk-cohorts td[data-heat="6"] *,
[data-look="calm"] .dk-rows td.dk-shaded[data-heat="6"], [data-look="calm"] .dk-rows td.dk-shaded[data-heat="6"] * { color: var(--text); }
[data-look="calm"] .dk-bar-short { font-size: var(--text-xs); fill: var(--chart-1); font-variant-numeric: tabular-nums; }
[data-look="calm"] .dk-stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-2); }
[data-look="calm"] .dk-stile { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); }
[data-look="calm"] .dk-stile .ds-tile-l, [data-look="calm"] .dk-stile .ds-tile-v { grid-column: 1 / -1; }
[data-look="calm"] .dk-stile .ds-tile-v { font-size: var(--text-xl); }
[data-look="calm"] .dk-stile-chg { justify-self: end; color: var(--text-2); }
[data-look="calm"] .dk-stile-dates { margin: var(--space-4) 0 0; }
[data-look="calm"] .dk-months .dk-seg { stroke: var(--surface); stroke-width: .5px; }
[data-look="calm"] .ds-section-head, [data-look="calm"] .dk-row[data-row="shops"] .ds-chart-head { flex-wrap: wrap; }
[data-look="calm"] .dk-row:not([data-row="shops"]) .dk-box:not(.dk-box-screen) > .dk-rows:not(.dk-across) { width: auto; min-width: 66%; max-width: 100%; }
[data-look="calm"] .dk-key-rest { --dk-c: var(--chart-muted); }
[data-look="calm"] .dk-box:not(.dk-box-screen) { height: auto; }
[data-look="calm"] .dk-row:not([data-row="shops"]) .dk-box:not(.dk-box-screen) > .dk-rows td.dk-label { width: 1%; }
[data-look="calm"] .dk-row:not([data-row="shops"]) .dk-box:not(.dk-box-screen) > .dk-rows th.num { min-width: 7em; }
[data-look="calm"] .ds-section { margin-top: var(--space-6); }
[data-look="calm"] .dk-box > table.dk-rows:not(:has(th:nth-child(6))) { width: min(100%, 860px); min-width: 0; }
[data-look="calm"] .dk-box > table.dk-rows:not(:has(th:nth-child(4))) { width: min(100%, 640px); min-width: 0; }
[data-look="calm"] .dk-box.dk-box-screen:has(> table.dk-rows):not(:has(> table thead th:nth-child(6))) { width: fit-content; max-width: min(100%, 860px); }
[data-look="calm"] .dk-box.dk-box-screen:has(> table.dk-rows):not(:has(> table thead th:nth-child(4))) { max-width: min(100%, 640px); }
/* a window-high sheet at the page's end: its head clears the title bar (64 px) with the page's 32 px below it */
[data-look="calm"] .dk-box.dk-box-screen { height: calc(100vh - 64px - var(--space-6) - var(--space-5)); height: calc(100dvh - 64px - var(--space-6) - var(--space-5)); }
@media (min-width: 600px) {     /* more than one window-high sheet on a page: each leaves the next in view */
  [data-look="calm"] .ds-section:has(~ .ds-section > .dk-box-screen) > .dk-box.dk-box-screen,
  [data-look="calm"] .ds-section:has(> .dk-box-screen) ~ .ds-section > .dk-box.dk-box-screen { height: 62vh; height: 62dvh; min-height: 320px; }
}
[data-look="calm"] .ds-chart-head > .dk-flip { margin-right: 0; padding-right: 0; }
[data-look="calm"] #view { overflow-anchor: none; }
[data-look="calm"] .dk-box > .ds-table { border-collapse: separate; border-spacing: 0; }
@media (max-width: 599px) {    /* a sheet's own scroll leaves the page reachable above and below it; a wide sheet's first column scrolls away whole, never cut */
  [data-look="calm"] .dk-box.dk-box-screen { height: 62vh; height: 62dvh; min-height: 280px; }
  [data-look="calm"] .dk-box.dk-box-screen > .ds-table:not(.dk-agegrid):has(thead th:nth-child(9)) td.dk-label { position: static; }
  [data-look="calm"] .dk-box.dk-box-screen > .ds-table:not(.dk-agegrid):has(thead th:nth-child(9)) thead th:first-child { left: auto; }
  [data-look="calm"] .dk-size-key.dk-size-col { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
[data-look="calm"] .dk-px { --dk-agew: 72px; }
[data-look="calm"] .dk-row[data-row="shops"] td.dk-label { white-space: normal; overflow-wrap: break-word; position: static; background: transparent; line-height: 1.3; }
[data-look="calm"] .dk-row[data-row="shops"] .dk-box > .ds-table { table-layout: auto; }
[data-look="calm"] .dk-row[data-row="shops"] .dk-across th.sr-only:not(:first-child) { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; font-size: var(--text-xs); color: var(--text-2); font-weight: 400; }
@media (min-width: 900px) {
  [data-look="calm"] .ds-app:not(.ds-app--phone):has(> .ds-tabbar) { grid-template-columns: var(--dk-rail-w) minmax(0, 1fr); }
  [data-look="calm"] #view > form.dk-filters[data-fside="top"] { display: flex; flex-flow: row wrap;
    gap: var(--space-3); padding: var(--space-4); align-items: flex-end; margin-top: var(--space-3); }
  [data-look="calm"] form.dk-filters[data-fside="top"] > .dk-when:not([hidden]),
  [data-look="calm"] form.dk-filters[data-fside="top"] > .dk-which:not([hidden]) { display: contents; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .ds-field,
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-dates { order: var(--dk-o, 99); flex: 1 1 190px; width: auto; min-width: 0; margin: 0; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .ds-field { max-width: 26rem; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-dates:not([hidden]) { flex: 2 1 390px; display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: flex-end; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-cfrom:not([hidden]) { flex: 1 1 190px; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-dates > .dk-range-t { flex: 1 1 100%; margin-bottom: var(--space-1); }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-dates > .ds-field { flex: 1 1 0; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .ds-input, [data-look="calm"] form.dk-filters[data-fside="top"] .ds-input > * { font-size: var(--text-s); }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-grain { flex: 1 1 130px; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .ds-field:has(select[name="metric"]),
  [data-look="calm"] form.dk-filters[data-fside="top"] .ds-field:has(select[name="states"]) { flex: 2 1 260px; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-range-t { font-size: var(--text-s); }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-radio { display: flex; flex-flow: row nowrap; column-gap: var(--space-3); align-items: center; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-radio > legend { float: none; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-radio-opt { flex: none; }
  [data-look="calm"] form.dk-filters[data-fside="top"] .dk-col-defaults { display: inline-flex; order: 999; flex: 0 0 auto; align-self: flex-end; padding-inline: var(--space-2); font-size: var(--text-s); white-space: nowrap; }
  [data-look="calm"] #view:has(> form.dk-filters[data-fside="top"] .dk-col-defaults) > .dk-chips > .dk-defaults { display: none; }
  [data-look="calm"] #view:has(> form.dk-filters[data-fside="top"] .dk-col-defaults) > .dk-chips:is(.dk-chips-phone, :not(:has(> .ds-chip:not(.dk-defaults)))) { display: none; }
  [data-look="calm"] .dk-stiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* three to a row; what is left over in the last row shares its width, so no hole */
  [data-look="calm"] .dk-row[data-row="shops"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  [data-look="calm"] .dk-row[data-row="shops"] > .dk-col { grid-column: span 2; }
  [data-look="calm"] .dk-row[data-row="shops"] > .dk-col:nth-child(3n+1):nth-last-child(2), [data-look="calm"] .dk-row[data-row="shops"] > .dk-col:nth-child(3n+2):last-child { grid-column: span 3; }
  [data-look="calm"] .dk-row[data-row="shops"] > .dk-col:nth-child(3n+1):last-child { grid-column: span 6; }
  /* the first row of a long bar: the rest behind the Filters button (page filter_fold), every control one click away */
  [data-look="calm"] form.dk-filters[data-fold] > .dk-which-toggle { display: inline-flex; order: 998; flex: 0 0 auto; margin: 0; align-self: flex-end; justify-content: center; padding-inline: var(--space-5); border: 1px solid var(--line-control); color: var(--text); }
  [data-look="calm"] form.dk-filters[data-fold]:not(.dk-which-open) > .dk-which { display: contents; }
  [data-look="calm"] form.dk-filters[data-fold]:not(.dk-which-open) > .dk-which > :not([data-fold-keep], .dk-col-defaults) { display: none; }
  [data-look="calm"] #view:has(> form.dk-filters[data-fside="top"][data-fold]:not(.dk-which-open)) > .dk-chips.dk-chips-phone:has(> .ds-chip:not(.dk-defaults)) { display: flex; }
  [data-look="calm"] #view:has(> form.dk-filters[data-fside="top"][data-fold]:not(.dk-which-open)) > .dk-chips.dk-chips-phone > .ds-chip:not(.dk-defaults, .dk-reset) { display: inline-flex; }
  [data-look="calm"] .dk-row[data-row="shops"] > .dk-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4); }
  [data-look="calm"] .dk-row[data-row="shops"] .ds-card.dk-months-card { box-shadow: none; padding: 0; background: none; margin-top: 0; }
  [data-look="calm"] .dk-row[data-row="shops"] .dk-box > .ds-table thead th,
  [data-look="calm"] .dk-row[data-row="shops"] .dk-box > .ds-table td.dk-label { background: var(--surface); }
  [data-look="calm"] .dk-row[data-row="shops"] .ds-section { margin-top: var(--space-3); }
}