/* ══════════════════════════════════════════════════════════════════════════
   /cs — TODAY  (CS-PLAT-08 B0 · B1 · B1c · B2 · B3, C2C 233)
                 + DASH REBUILD (CS-PLAT-09, Dom 2026-08-22)

   Its own file, not a tail on cs-shell.css, because lane shared-polish is
   rewriting that file's tokens and chrome at the same time. Everything here is
   layout for the Today screen; EVERY colour is an existing token
   (--csx-*, --ts-*, --font-sans) — no new palette, no arbitrary radius, no
   hand-rolled shadow.

   THE GRID (A8): 12 columns, no holes. The day column 5, widgets 7. Widgets are a nested 6-column track so a card can be 3 (half) or
   6 (full) and the row still closes. `grid-auto-flow: dense` + a transition on
   the span is what makes A11 true: an expanding card PUSHES its neighbours
   instead of covering them.

   THE RHYTHM (CS-PLAT-09, Dom: "control the spacing between the lines and
   objects"): one gap (--cst-gap, 16px), one card padding (--cst-pad, 24px),
   one motion length (--cst-ease, 170ms), and every other measurement on the
   4 / 8 / 12 / 16 / 24 / 32 scale. Every card uses all three, which is what
   makes them read as one system instead of eleven eyeballed boxes.

   THE COLOUR (CS-PLAT-09 D3): neutral surfaces + ink type + the BRAND (red as of
   Dom 2026-08-22, read through --brand — repoint the token, the screen follows).
   The accent
   is spent on exactly three things — the acknowledge strip, the selected day in
   the mini month, and a drone warning. Nothing else on this screen is coloured.
   ══════════════════════════════════════════════════════════════════════════ */

.cst {
  max-width: 1320px;
  /* One scale on this screen: 4 / 8 / 12 / 16 / 24 / 32. Nothing between the
     steps, so no gap on the page is a one-off someone eyeballed. */
  --cst-gap: 16px;
  --cst-pad: 24px;
  --cst-ease: 170ms;
}

/* Header — the date IS the page title (B1). */
.cst-head { margin-bottom: 32px; }
.cst-title { letter-spacing: -.02em; margin: 0 0 4px; }
.cst .csx-hi { margin: 0; }
.cst-head .csx-actions { margin-left: auto; align-items: center; gap: 10px; }
/* A .csx-btn is display:inline-flex, which outranks the `hidden` attribute —
   the pill has to be told to disappear or it sits there on the day it means
   nothing. */
.cst-todaybtn { padding: 9px 15px 10px; font-size: calc(13.5px * var(--text-scale, 1)); }
.cst-todaybtn[hidden] { display: none; }

/* ── B0 · the inverted strip ──────────────────────────────────────────────
   The PRIMARY accent as a filled ground with its near-black ink, at the very
   top. No header, no count — the rows ARE the banner, and an empty list renders
   literally nothing.

   The brief said "teal"; Dom moved the primary to orange (#FF0016) mid-lane, so
   this reads the primary TOKEN and never a literal — repoint the token and the
   strip follows, in both themes, with no edit here. The chain covers whichever
   name the token lands on (`--brand`) and the accent the portal ships today. */
.cst-newstrip:empty { display: none; }
.cst-newstrip {
  display: grid; gap: 2px;
  margin: 0 0 var(--cst-gap);
  border-radius: var(--csx-r-md); overflow: hidden;
  background: var(--brand, var(--csx-accent));
}
/* Flex, not a fixed grid: the GV tag is optional, so a column template would
   shift every field across on the rows that carry one. */
.cst-newrow {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 16px;
  background: var(--brand, var(--csx-accent));
  color: var(--brand-ink, var(--csx-accent-ink));
  text-decoration: none;
  transition: background var(--cst-ease) ease;
}
.cst-newrow:hover, .cst-newrow:focus-visible {
  background: var(--brand-hover, var(--csx-accent-hover));
  outline: none;
}
.cst-newrow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.cst-nw-who  { font-weight: 700; max-width: 22ch; }
.cst-nw-addr { font-weight: 500; flex: 1 1 auto; }
.cst-nw-amt  { font-variant-numeric: tabular-nums; margin-left: auto; }
/* Derived from the row's own ink, so it stays legible on whatever the primary
   becomes without a second colour decision — D3: no third hue on the strip. */
.cst-tag, .cst-tag-gv {
  display: inline-block; padding: 2px 7px; border-radius: var(--csx-r-xs);
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .04em;
  background: color-mix(in srgb, currentColor 20%, transparent);
  color: inherit;
}

/* ── the 12-column body ──────────────────────────────────────────────────── */
.cst-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--cst-gap); align-items: stretch;
}
.cst-left {
  grid-column: span 5; min-width: 0;
  display: flex; flex-direction: column; gap: var(--cst-gap);
}
.cst-widgets {
  grid-column: span 7; min-width: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  /* A8 — cards in the same row match height, so a short widget beside a tall
     one does not leave a hole in the wall. */
  grid-auto-flow: dense; gap: var(--cst-gap); align-items: stretch;
}

/* ── one widget ──────────────────────────────────────────────────────────── */
.cst-w, .cst-day, .cst-recent-wrap {
  background: var(--csx-surface);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-r-md);            /* A2 — rounded, never a bean */
  box-shadow: var(--csx-shadow-card);
  padding: var(--cst-pad);
}
.cst-w { grid-column: span var(--w-span, 3); min-width: 0;
         transition: grid-column var(--cst-ease) ease;
         display: flex; flex-direction: column; }
.cst-w.is-open { grid-column: span 6; }

.cst-w-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.cst-w-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cst-w-more {
  margin-left: auto; font-size: calc(13px * var(--text-scale, 1)); font-weight: 600;
  color: var(--csx-ink-2); text-decoration: none; white-space: nowrap;
  transition: color var(--cst-ease) ease;
}
.cst-w-more:hover { color: var(--csx-ink); }
.cst-drive { font-variant-numeric: tabular-nums; color: var(--csx-ink-2); }
/* "Full day" is a toggle now, not a link out. Same quiet header control; the
   pressed state is the brand, the way every other toggle in the cockpit
   marks itself. (Dom 2026-08-23 — the fitted window is the default.) */
.cst-fullday {
  padding: 0; border: 0; background: none;
  font: inherit; font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; cursor: pointer;
}
.cst-fullday[aria-pressed="true"] { color: var(--brand); }
.cst-fullday:focus-visible { outline: 1px solid var(--brand); outline-offset: 3px; }

.cst-w-bd { min-width: 0; flex: 1 1 auto; }
.cst-loading, .cst-empty { margin: 0; color: var(--csx-ink-3); }
.cst-bad { color: var(--csx-st-amber-tx); }
.cst-foot { margin: 12px 0 0; font-size: calc(13px * var(--text-scale, 1)); color: var(--csx-ink-3); }

.cst-rows { display: grid; }
.cst-rest { display: contents; }              /* expanded rows join the same list */
.cst-row {
  display: grid; align-items: baseline; gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 8px 0; color: var(--csx-ink);
  text-decoration: none; border-top: 1px solid var(--csx-line);
  transition: color var(--cst-ease) ease;
}
.cst-rows > .cst-row:first-child, .cst-rest > .cst-row:first-child { border-top: 0; padding-top: 0; }
.cst-row-k { color: var(--csx-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cst-row-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-row-v { color: var(--csx-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* D3 — the channel used to be one of four category hues. It is a WORD, and a
   word does not need a colour to be read. */
.cst-chan {
  padding: 2px 8px; border-radius: var(--csx-r-xs);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; white-space: nowrap;
  background: var(--csx-surface-2); border: 1px solid var(--csx-line);
  color: var(--csx-ink-2);
}
.cst-more {
  margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--csx-ink-2);
  transition: color var(--cst-ease) ease;
}
.cst-more:hover { color: var(--csx-ink); }

/* ══ D1 · THE DAY TRIGGER ═══════════════════════════════════════════════════
   The day card's own header carries the picker, because the picker controls the
   card underneath it and nothing else. Dom, on the first cut: an input BOX in a
   card header reads as a form field on a screen that has no form. So the input
   the shared component needs is still there and still the value carrier — it
   just looks like what it is, a quiet text button that opens a popover. The
   chevron is drawn on the component's own wrapper so it cannot land inside the
   editable box. */
.cst-day-hd { gap: 8px; }
.cst-day-hd .csmc { flex: none; }
.cst-datefield {
  width: auto; padding: 4px 8px 5px 8px;
  border: 1px solid transparent; border-radius: var(--csx-r-chip);
  background: none; color: var(--csx-ink);
  font: inherit; font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  transition: background var(--cst-ease) ease, border-color var(--cst-ease) ease;
}
/* The caret used to be drawn HERE, on the component's wrapper, because the
   trigger was an editable input and a pseudo-element could not live inside it.
   The trigger is a button now (Dom 2026-08-23) and cs-minical draws its own
   .csmc-caret, so a second chevron here would be two. */
.cst-datefield:hover { background: var(--csx-surface-hover); }
.cst-datefield:focus {
  outline: none; border-color: var(--csx-line-2);
  background: var(--csx-surface-2);
}

/* ══ D2 · THE WEATHER CARD ═════════════════════════════════════════════════
   Three bands on one rhythm: WHERE + WHEN, then the reading, then every
   secondary fact PRINTED — gusts, rain, sunset and the drone verdict used to
   live in a hover tooltip, which meant they were not on the screen at all.
   One huge quiet numeral, one thin outline icon in the type's own ink. No fill,
   no yellow, no emoji, no green. */
.cst-wx-place {
  margin: 0;
  font-size: var(--ts-meta); line-height: var(--ts-meta-lh);
  letter-spacing: var(--ts-meta-tr); font-weight: var(--ts-meta-w);
  text-transform: uppercase; color: var(--csx-ink-3);
}
.cst-wx-read {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 6px; min-height: 36px; min-width: 0;
}
.cst-wx-ic { display: inline-flex; flex: none; color: var(--csx-ink-2); }
.cst-wx-t {
  font-size: clamp(30px, 2.4vw, 38px); line-height: .95;
  font-weight: 600; letter-spacing: -.045em;
  color: var(--csx-ink); font-variant-numeric: tabular-nums;
}
.cst-wx-none {
  font-size: clamp(26px, 2vw, 32px); line-height: 1.1;
  font-weight: 600; letter-spacing: -.02em; color: var(--csx-ink-2);
}
.cst-wx-cond {
  font-size: var(--ts-body); color: var(--csx-ink-2);
  align-self: end; padding-bottom: 6px;
}

/* The quiet label/value grid. Label in the muted neutral, value in ink.
   Five equal columns across the whole card, so the facts line up as a strip
   rather than wrapping one of themselves onto a lonely second row. */
.cst-facts {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--csx-line);
  display: grid; gap: 8px 20px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cst-fact { display: grid; gap: 4px; min-width: 0; }
.cst-fact dt {
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--csx-ink-3);
}
.cst-fact dd {
  margin: 0; font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; color: var(--csx-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The only accent this card is allowed, and only when the drone cannot fly. */
.cst-fact.is-warn dd { color: var(--warn); }

.cst-wx-week {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--csx-line);
}
.cst-wx-day { display: grid; justify-items: center; gap: 4px; }
.cst-wx-day b {
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--csx-ink-3);
}
.cst-wx-dic { display: inline-flex; height: 18px; color: var(--csx-ink-3); }
.cst-wx-dt {
  font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; color: var(--csx-ink);
  font-variant-numeric: tabular-nums;
}
.cst-wx-day.is-blank .cst-wx-dt { color: var(--csx-ink-3); font-weight: 500; }

/* ── the map ─────────────────────────────────────────────────────────────── */
.cst-mapbox {
  height: 420px; border-radius: 0; overflow: hidden;
  background: var(--csx-surface-2); border: 0;
  margin: 0 calc(-1 * var(--cst-pad));
}
.cst-mapbox canvas { filter: brightness(1.55) contrast(.96) saturate(1.1); }
:root[data-theme="light"] .cst-mapbox canvas { filter: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cst-mapbox canvas { filter: none; } }
/* D3 — the stops used to be category blue, a fifth hue on a screen that is
   allowed three. The run IS the accent's job, so the numbered stops wear it and
   base stays ink. */
.cst-pin {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand, var(--csx-accent)); color: var(--brand-ink, var(--csx-accent-ink));
  font: 700 calc(12px * var(--text-scale, 1))/1 var(--font-sans, 'Geist', system-ui, sans-serif);
  border: 2px solid var(--csx-surface); box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* Home is not a stop, so it is not a filled pin: an OUTLINE house, the way a
   map marks a place you already are. (Dom 2026-08-22, real-routes.) */
.cst-pin.is-base {
  background: var(--csx-surface); color: var(--csx-ink);
  border: 2px solid var(--csx-ink); font-size: calc(13px * var(--text-scale, 1));
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ── the per-leg chip ─────────────────────────────────────────────────────
   "29 min · 23 km" sitting on the middle of each leg, the way Apple Maps
   prints it. It rides the theme with the basemap: paper chip + ink text in
   light, the same pair inverted in dark, hairline either way. Pointer-events
   off — the chip is a label, never a target, and it must not swallow a drag
   of the map underneath it. */
.cst-legchip {
  padding: 3px 7px; border-radius: 999px;
  background: var(--csx-surface); color: var(--csx-ink);
  border: 1px solid var(--csx-line);
  font: 600 calc(12px * var(--text-scale, 1))/1.15 var(--font-sans, 'Geist', system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  pointer-events: none;
  /* A chip is a label about a leg; a pin is the stop itself and the thing that
     is hoverable and clickable. The pin wins the overlap, always. */
  z-index: 1;
}
.cst-pin { z-index: 2; }

/* ── the day column ──────────────────────────────────────────────────────
   THE DAY IS NOT SCROLLABLE (Dom 2026-08-23: "the day can't be scrollable —
   full day"). It used to be 1620 px of 06:00→midnight inside its own
   `overflow:auto` box, which is why the card had a scrollbar of its own and
   why the component had to scroll the now-line into view. The window is fitted
   now — 07:00 → 21:00 by default, grown to fit anything earlier or later, 1260
   px at the calendar's own hour height — and the card simply grows to it. One
   scroller on the screen: the page.

   This is the CALENDAR's component and the CALENDAR's classes
   (`.cs-cal-week-grid`, `.cs-cal-card`, `.cs-tl-*`, `.csday-*`) — nothing here
   restyles a chip, a band or a marker. The rules below are containment only: a
   narrower hour gutter, and the free line un-tucked from the negative margin it
   uses when it sits under a page header instead of inside a card. */
.cst-day { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cst-daybox {
  flex: 0 0 auto;
  margin: 0 -4px; padding: 0 4px;
}
.cst-daybox .cs-cal-week-grid { grid-template-columns: 46px minmax(0, 1fr); overflow-x: visible; }
.cst-daybox .csday-freeline { margin: 0 0 10px; }
.csday-col { min-width: 0; }

/* ── B3 · recent bookings ────────────────────────────────────────────────── */
.cst-recent-wrap { margin-top: var(--cst-gap); }
/* A10 is already handled portal-wide: cs-shell.css gives .csx-tbl-scroll its
   overflow and pins the last column, components/table-scroll.js measures it.
   This table only has to declare the width it actually needs. */
.cst-table { width: 100%; min-width: 720px; }
.cst-table td, .cst-table th { white-space: nowrap; }
.cst-table .right { text-align: right; }
.cst-sort {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: inherit; display: inline-flex; align-items: center; gap: 4px;
  transition: color var(--cst-ease) ease;
}
.cst-sort:hover { color: var(--csx-ink); }
.cst-sort.is-on { color: var(--csx-ink); font-weight: 650; }
.cst-arw { font-size: calc(9px * var(--text-scale, 1)); opacity: .7; }

.cst-sample {
  border: 1px dashed var(--csx-line-2); border-radius: var(--csx-r-md);
  padding: 24px; max-width: 620px;
  color: var(--csx-ink-2); font-size: var(--ts-body); line-height: var(--ts-body-lh);
}
.cst-sample b { color: var(--csx-ink); }

/* ── narrower desktops ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cst-left    { grid-column: span 12; }
  .cst-widgets { grid-column: span 12; }
}

/* ── the phone (Dom, from the car): one column, the day first ───────────── */
@media (max-width: 900px) {
  .cst { --cst-gap: 12px; --cst-pad: 16px; }
  .cst-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cst-w { grid-column: span 2; }
  .cst-w.is-open { grid-column: span 2; }
  .cst-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  /* The reading folds: icon + numeral on one line, the sky word under them.
     Without the wrap the row simply ran off the right of the card. */
  .cst-wx-cond { flex: 1 0 100%; padding-bottom: 0; align-self: start; }
  .cst-wx-t { font-size: calc(44px * var(--text-scale, 1)); }
  /* On the phone the row wraps into two lines: who + amount, then the address
     and the day underneath. Nothing is dropped. */
  .cst-newrow { flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; }
  .cst-nw-who  { order: 1; max-width: 60%; }
  .cst-nw-amt  { order: 2; }
  .cst-nw-addr { order: 3; flex: 1 0 100%; }
  .cst-nw-when { order: 4; }
  .cst-nw-pkg  { order: 5; margin-left: auto; }
  .cst-tag     { order: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   A15 — TYPE PASS (C2C 233 A15, Dom 2026-08-22 "layout weak, type has no punch")

   APPEND-ONLY. Nothing above is deleted; this block pulls the Today screen onto
   the ONE scale declared in tokens.css (--ts-*). Four levels and a meta line —
   the screen previously ran seven sizes between 10.5px and 30px, which is why
   nothing on it read as more important than anything else.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The greeting block: eyebrow · display · strong secondary ─────────────── */
.cst-greet { min-width: 0; }
.cst-eyebrow {
  margin: 0 0 6px;
  font-size: var(--ts-meta); line-height: var(--ts-meta-lh);
  letter-spacing: var(--ts-meta-tr); font-weight: var(--ts-meta-w);
  text-transform: uppercase; color: var(--csx-ink-2);
}
/* B1 keeps the weekday date as the page identity — so the date IS the display
   line here, and the day's shape is the strong secondary under it. */
.cst .cst-title {
  font-size: var(--ts-display); line-height: var(--ts-display-lh);
  letter-spacing: var(--ts-display-tr); font-weight: var(--ts-display-w);
  margin: 0; text-wrap: balance;
}
.cst .csx-hi.cst-daycap {
  margin: 6px 0 0;
  font-size: var(--ts-body); line-height: 1.35;
  font-weight: 600; letter-spacing: -.01em;
  color: var(--csx-ink-2); font-variant-numeric: tabular-nums;
}

/* ── Section headers: eyebrow + count, never grey sentence case ──────────── */
.cst-w-hd h3 {
  margin: 0;
  font-size: var(--ts-meta); line-height: var(--ts-meta-lh);
  letter-spacing: var(--ts-meta-tr); font-weight: var(--ts-meta-w);
  text-transform: uppercase; color: var(--csx-ink-2);
}
.cst-w-n {
  font-size: var(--ts-meta); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--csx-ink);
  letter-spacing: 0;
}
.cst-w-n[hidden] { display: none; }

/* ── Lists: the label carries the weight, the value stays regular ────────── */
.cst-row { font-size: var(--ts-body); line-height: 1.4; }
.cst-row-m { font-weight: 600; letter-spacing: -.01em; color: var(--csx-ink); }
.cst-row-k { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; }
.cst-row-v { font-size: calc(13px * var(--text-scale, 1)); font-weight: var(--ts-num-w); }
.cst-loading, .cst-empty { font-size: var(--ts-body); line-height: var(--ts-body-lh); }

/* ── The B0 strip: labels and money at 600, supporting fields at 400 ─────── */
.cst-newrow  { font-size: var(--ts-body); }
.cst-nw-who  { font-weight: 700; letter-spacing: -.01em; }
.cst-nw-addr { font-weight: 600; letter-spacing: -.01em; }
.cst-nw-when, .cst-nw-pkg { font-size: calc(13px * var(--text-scale, 1)); font-weight: 400; opacity: .86; }
.cst-nw-amt  { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .cst .cst-title { letter-spacing: -.018em; }
}

/* ── MINIMALISTIC (Dom 2026-08-22, one word) ──────────────────────────────
   Same spirit as the agent Dash: the widget title carries the section, the
   count carries the news, and nothing decorative sits between them. The
   category dots, the "?" glyph and the footer explainer are gone from the
   markup; these rules take the chrome they left behind with them. */
.cst-w-hd h3[data-detail] { cursor: help; }
a.cst-row:hover { background: none; color: var(--csx-ink); }
a.cst-row:hover .cst-row-m { text-decoration: underline; text-underline-offset: 3px; }

/* Motion law (CS-PLAT-09): everything that reacts moves for --cst-ease on an
   ease curve. No bounce, no spring, nothing that draws attention to itself. */
@media (prefers-reduced-motion: reduce) {
  .cst * { transition-duration: 1ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NEEDS PRICING — the strip stops being a red page (Dom 2026-08-23)

   "Our dash turned red." The B0 strip above paints every row in `--brand`,
   which was right for the one-or-two unacknowledged orders it was designed
   for. Twelve unpriced calendar imports later it is a solid red panel across
   the top of the cockpit and the eye has nowhere to rest.

   Same rows, same acknowledge-on-open, same GV tag — on the CARD surface, with
   a header and a count. The red survives on the count chip and nowhere else,
   which is the ceiling Dom set for the colour everywhere in this product.

   Append-only: the `.cst-newstrip` rules above still describe the container,
   which is now just a wrapper; the card inside it declares its own ground.
   ══════════════════════════════════════════════════════════════════════════ */
.cst-newstrip { display: block; background: none; border-radius: 0; overflow: visible; }
.cst-needs { padding: var(--cst-pad); }
.cst-needs .cst-w-hd { margin-bottom: 10px; cursor: pointer; }
/* Fold control (Dom 2026-08-29: "this needs to be colapsed… its not a dash
   anymore if 90% of the screen takes one panel"). Chevron rotates open; the
   folded card is just its header row. */
.cst-fold {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  color: var(--csx-ink-2); cursor: pointer; flex: none;
}
.cst-fold-c { display: inline-block; font-size: 15px; line-height: 1; transform: rotate(90deg); transition: transform 160ms ease; }
.cst-needs.is-folded .cst-fold-c { transform: rotate(0deg); }
.cst-needs.is-folded .cst-w-hd { margin-bottom: 0; }
/* The one red left on the block. Small, and it is a COUNT — the thing that is
   actually urgent — not a ground. */
.cst-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--csx-r-xs);
  background: var(--brand); color: var(--brand-ink, #0F1111);
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums;
}
.cst-newlist { display: grid; }
.cst-newstrip .cst-newrow {
  background: none; color: var(--csx-ink);
  padding: 9px 0;
  border-top: 1px solid var(--csx-line);
}
.cst-newlist .cst-newrow:first-child { border-top: 0; }
.cst-newstrip .cst-newrow:hover,
.cst-newstrip .cst-newrow:focus-visible { background: var(--csx-surface-hover); }
/* TRUNCATION. `max-width: 22ch` cut "Grapevine Realty Inc." to an ellipsis on a
   row with metres of empty space to its right. The name takes what it needs and
   the ADDRESS gives, because an address is the field that can lose its tail and
   still be read. */
.cst-newstrip .cst-nw-who  { max-width: none; flex: 0 0 auto; color: var(--csx-ink); font-weight: 650; }
.cst-newstrip .cst-nw-addr { flex: 1 1 auto; min-width: 0; color: var(--csx-ink-2); font-weight: 500; }
.cst-newstrip .cst-nw-when,
.cst-newstrip .cst-nw-pkg  { color: var(--csx-ink-3); }
/* "$0.00 + HST" is the absence of a price, not a price. QUIET — Dom's ceiling
   for this block is "red only on the chip", so the call to action is ink with
   an underline on hover, not a second red shouting from every row. */
.cst-nw-setprice { color: var(--csx-ink-2); font-weight: 600; font-size: calc(13px * var(--text-scale, 1)); }
.cst-newrow:hover .cst-nw-setprice,
.cst-newrow:focus-visible .cst-nw-setprice {
  color: var(--csx-ink); text-decoration: underline; text-underline-offset: 3px;
}
/* A booking the calendar import could not attribute. It says so instead of
   borrowing the name of whoever else shares the placeholder address. */
.cst-nw-who[data-unassigned] { color: var(--csx-ink-2); font-style: italic; font-weight: 500; }
.cst-nw-assign {
  padding: 1px 6px; border: 1px solid var(--brand); border-radius: var(--csx-r-xs);
  color: var(--brand); font-size: calc(11px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .03em;
}
.cst-newstrip .cst-tag-gv {
  background: color-mix(in srgb, var(--csx-ink) 10%, transparent);
  color: var(--csx-ink-2);
}

/* ── NEEDS PRICING ON THE PHONE — TWO LINES, ON PURPOSE ───────────────────
   Dom's phone screenshot: the row wrapped wherever it ran out of width, so
   "Set price →" landed mid-row, the date and "Custom" were orphaned onto a
   second line of their own, and the "Assign client" chip floated away from the
   name it belongs to. Six fields flow-wrapping is not a layout.

   Two lines, always the same two:
     line 1  client name (+ its Assign-client chip, inline, where it means
             something) … "Set price →" hard right
     line 2  address · date · package, muted, one size down

   The break is a zero-height 100%-basis pseudo-element between them, so the
   order is declared rather than emergent and no control can ever wrap. Desktop
   is untouched: one line, as it is today.

   Appended last so it wins over the older `max-width:60%` phone rules above,
   which were written for the inverted strip. */
@media (max-width: 900px) {
  .cst-newstrip .cst-newrow {
    flex-wrap: wrap; align-items: baseline;
    gap: 2px 8px; padding: 11px 0;
  }
  .cst-newstrip .cst-newrow::after {
    content: ''; order: 4; flex: 0 0 100%; height: 0;
  }
  .cst-newstrip .cst-tag-gv   { order: 0; }
  .cst-newstrip .cst-nw-who {
    order: 1; flex: 0 1 auto; min-width: 0; max-width: none;
    font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; color: var(--csx-ink);
  }
  .cst-newstrip .cst-nw-assign { order: 2; flex: 0 0 auto; }
  .cst-newstrip .cst-nw-amt {
    order: 3; flex: 0 0 auto; margin-left: auto; white-space: nowrap;
  }
  .cst-newstrip .cst-nw-addr {
    order: 5; flex: 0 1 auto; min-width: 0;
    font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--csx-ink-2);
  }
  .cst-newstrip .cst-nw-when { order: 6; flex: 0 0 auto; font-size: calc(13px * var(--text-scale, 1)); color: var(--csx-ink-3); }
  .cst-newstrip .cst-nw-pkg  { order: 7; flex: 0 0 auto; margin-left: 0; font-size: calc(13px * var(--text-scale, 1)); color: var(--csx-ink-3); }
  /* The middot belongs to the SECOND line only, and only between fields that
     are actually there. */
  .cst-newstrip .cst-nw-when::before,
  .cst-newstrip .cst-nw-pkg::before { content: '· '; color: var(--csx-ink-3); }
}