/* compass/app.css — the app's OWN stylesheet (C-1: the day, the week strip,
   the task row, New task, the done sheet).

   It sits BENEATH the shell's shell.css and adds `cx-` classes of its own.
   It NEVER overrides a shell token and NEVER writes a colour: every colour,
   size, radius, shadow, duration and easing below is a shell token
   (var(--…)). It reads no raw safe-area inset (only the shell's --safe-* tokens, and C-1
   needs none of them) and positions nothing
   against a screen edge: there is no fixed or sticky bar in C-1, so the
   shell's own `.page` padding (which already ADDS --safe-bottom, S23) is the
   whole of the bottom inset (DECISIONS C1-3). It never uses the shell's tab-bar class
   inside `.page` (HQ's order, 2026-10-21) — C-1 draws no tab strip.

   THE SYSTEM, declared:
   · type — the shell's scale only: h1 --fs-h1, the day's date under it at
     --fs-sm muted; a task's words at --fs-base 650; its marks and meta at
     --fs-xs; the strip's letters at --fs-2xs tracked caps, its numbers at
     --fs-lg tabular.
   · colour — paper (--bg), cards (--surface), the strip's band
     (--surface-2); ONE green per row, the Done button (.btn-primary);
     --warn for the Overdue heading and an overdue row's own date; brand for
     the shown day's frame.
   · the signature — the WEEK STRIP: seven full-bleed cells, the shown day
     boxed in brand, TODAY underlined. Box and underline are SHAPES, so a
     reader who cannot see colour still tells them apart (SLATE-NOTES:
     colour needs a backup).
   · every tap target ≥ 44px (--touch-min); no horizontal scroll at 320. */

/* ---------- the heading ---------- */
.cx-head h1 { margin-bottom: var(--sp-3); }
.cx-head-date {
  display: block;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0;
  color: var(--muted);
}

/* a reader-only label (the strip's full day for a screen reader) */
.cx-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- THE WEEK STRIP ----------
   Full bleed: it takes back the page's 16px gutter on each side (never the
   inset beyond it — .page's side padding is max(16px, inset), and only
   --sp-4 of it is borrowed), so at 320 each of the seven cells is 45.7px
   wide, not 41. */
.cx-week {
  margin: 0 calc(-1 * var(--sp-4)) var(--sp-4);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cx-week ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cx-day {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; min-width: var(--touch-min);
  color: var(--text); text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-sm);
  transition: background var(--dur-press) ease, transform var(--dur-press) var(--ease-out);
}
.cx-day:active { transform: scale(0.96); background: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  .cx-day:hover { background: var(--surface); color: var(--text); }
}
.cx-day-l {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-2xs);
  text-transform: uppercase; color: var(--muted);
}
.cx-day-n { font-size: var(--fs-lg); font-weight: 650; line-height: 1.1; }

/* TODAY: the number underlined, its letter in ink */
.cx-day.is-today .cx-day-n {
  font-weight: 800;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.cx-day.is-today .cx-day-l { color: var(--text); }

/* THE SHOWN DAY: boxed in brand on a card */
.cx-day.is-shown {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
}
.cx-day.is-shown .cx-day-n { color: var(--brand-strong); font-weight: 800; }

/* ---------- the lines under the strip ---------- */
/* W-1: the line a save just caused reads as a message, not a greyed box:
   brand ink and a brand border on the surface — never a second green (the
   one green is the primary button). */
.cx-said {
  font-size: var(--fs-sm); font-weight: 650; color: var(--brand-strong);
  background: var(--surface); border: 1px solid var(--brand);
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-4px); }
}
.cx-alert { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); text-align: left; }

/* + Add task · + Add meeting (C-2) — the two doors, full width under a
   thumb. Side by side where both labels fit whole (each column at least
   9.5rem, so from about 330px of content — a 375 phone has them in one
   row), STACKED at 320 — never a label squeezed onto two lines (DECISIONS
   C2-5). From 560 they take their own width, left. */
.cx-add {
  margin: 0 0 var(--sp-4);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sp-2);
}
.cx-add .btn { width: 100%; min-height: 48px; font-size: var(--fs-base); white-space: nowrap; }
@media (min-width: 560px) {
  .cx-add { display: flex; flex-wrap: wrap; }
  .cx-add .btn { width: auto; }
}
.cx-add-one { display: block; margin-top: var(--sp-3); }

/* ---------- blocks and the list ---------- */
.cx-block + .cx-block { margin-top: var(--sp-5); }
.cx-overdue h2 { color: var(--warn); }
.cx-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }

/* ---------- THE TASK ROW ----------
   The words on the left, the ONE green Done on the right (404), the two
   answers to a task from someone else (Got it, Decline) on a line of their
   own under both, so an opened Why box has the full width. */
.cx-task {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-3); align-items: start;
  padding: var(--sp-3) var(--sp-4);
}
.cx-task + .cx-task { border-top: 1px solid var(--border); }
.cx-task-body { grid-column: 1; min-width: 0; }
.cx-task-body p { margin: 0; }
.cx-task-body .cx-task-marks { margin-bottom: 2px; }
.cx-task-body .cx-task-meta, .cx-task-body .cx-task-why, .cx-task-body .cx-task-stamp { margin-top: 2px; }
.cx-task-body .cx-task-note { margin-top: var(--sp-1); }
.cx-task-marks {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
}
.cx-task-time { font-weight: 700; color: var(--text); }
.cx-task-due { font-weight: 700; color: var(--warn); }
.cx-task-what { font-weight: 650; overflow-wrap: anywhere; }
.cx-task-meta, .cx-task-why, .cx-task-stamp {
  font-size: var(--fs-xs); color: var(--muted);
  overflow-wrap: anywhere;
}
.cx-task-why .eyebrow { margin-right: var(--sp-1); }
.cx-task-stamp { color: var(--text); font-weight: 650; }
.cx-task-note {
  font-size: var(--fs-sm);
  white-space: pre-line; overflow-wrap: anywhere;
}
.cx-task.is-done .cx-task-what,
.cx-task.is-dropped .cx-task-what { color: var(--muted); }

.cx-done-form { grid-column: 2; grid-row: 1; margin: 0; }
.cx-done { min-height: 48px; min-width: 88px; padding-inline: var(--sp-5); font-size: var(--fs-base); }

.cx-answers {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-start;
}
.cx-answers form { margin: 0; }
.cx-decline { flex: 1 1 100%; }
/* C-1 fix round 1, defect 3: the open Why box is reached by its anchor
   (#decline-<id>); land it clear of the sticky header (two touch rows) */
.cx-decline { scroll-margin-top: calc(2 * var(--touch-min) + var(--sp-4)); }
.cx-decline > summary { list-style: none; display: inline-flex; }
.cx-decline > summary::-webkit-details-marker { display: none; }
.cx-decline[open] > summary { margin-bottom: var(--sp-3); }
.cx-decline-form .field { margin-bottom: var(--sp-2); }
.cx-answers > form:first-child + .cx-decline:not([open]) { flex: 0 1 auto; }

.cx-dropped-toggle { margin: var(--sp-3) 0 0; }

/* ---------- NEW TASK and THE DONE SHEET ---------- */
.cx-form-screen { max-width: 560px; }
.cx-form .field:last-of-type { margin-bottom: var(--sp-4); }
.cx-form-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-3); }
@media (min-width: 420px) {
  .cx-form-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a date or time box never pushes past its column on a narrow phone */
.cx-form input[type="date"], .cx-form input[type="time"] { min-width: 0; max-width: 100%; }
.cx-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cx-actions .btn { flex: 1 1 8rem; min-height: 48px; font-size: var(--fs-base); }

.cx-sheet-what { margin-bottom: var(--sp-1); overflow-wrap: anywhere; }
.cx-done-sheet h2 { margin-bottom: var(--sp-4); color: var(--text); }

/* ---------- MEETINGS (C-2) ----------
   A MEETING ROW sits in the same list as the tasks, at its time (§M4 1).
   What sets it apart is the HEADLINE (381): the TYPE first, heavy and in the
   brand's ink, the em dash, then the What ("Estimate — Johns"), so a man
   deciding what to move reads the KIND first. The row takes the paper's
   second tone (--surface-2), a band, so a meeting reads as a block of the
   day and a task as a line in it: tone and type weight, never a stripe. */
.cx-meet { background: var(--surface-2); }
.cx-meet-head a {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em;
  min-height: var(--touch-min);
  color: var(--text); text-decoration: none;
}
.cx-meet-head a > span:first-child { color: var(--brand-strong); font-weight: 800; }
@media (hover: hover) and (pointer: fine) {
  .cx-meet-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.cx-meet.is-done .cx-meet-head a,
.cx-meet.is-done .cx-meet-head a > span:first-child { color: var(--muted); }

/* "From the meeting" + the headline, on a task born in one (§M4 6) */
/* the link stays INLINE text (walk finding 1: as an inline-flex box its
   two data cells and the dash were underlined as three pieces and fell to
   a line of their own at 320); the 44px target comes from block padding,
   which grows the tap area without moving the line. ONE display (C-2b: the
   C-2 review's note — a flex rule was set and then overridden) */
.cx-task-from {
  display: block;
  font-size: var(--fs-xs); color: var(--muted);
}
.cx-task-from a {
  display: inline; padding-block: 14px;
  font-weight: 650; overflow-wrap: anywhere;
}
.cx-from-line { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size: var(--fs-sm); }

/* New meeting: the people boxes and the weekly box, each a 44px line */
.cx-people {
  border: 0; margin: 0 0 var(--sp-4); padding: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); column-gap: var(--sp-3);
}
.cx-people legend {
  grid-column: 1 / -1;
  font-size: var(--fs-xs); font-weight: 650; color: var(--muted);
  margin-bottom: var(--sp-1); padding: 0;
}
.cx-check {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch-min); margin: 0;
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
  cursor: pointer; overflow-wrap: anywhere;
}
.cx-check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--brand); }

/* THE MEETING'S OWN SCREEN */
.cx-meeting { max-width: 640px; }
.cx-meet-top { margin-bottom: var(--sp-4); }
.cx-meet-top p { margin: 0; }
.cx-meet-h1 { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.cx-meet-h1 > span:first-child { color: var(--brand-strong); }
.cx-meet-when { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-2); font-weight: 650; }
.cx-meet-when a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.cx-meet-people, .cx-meet-about { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.cx-meet-done { font-weight: 650; margin: 0 0 var(--sp-4); }
.cx-meet-done-form { margin: 0 0 var(--sp-5); }
.cx-meet-done-form .cx-done { width: 100%; }
@media (min-width: 560px) {
  .cx-meet-done-form .cx-done { width: auto; }
}

.cx-notes, .cx-born { list-style: none; margin: 0 0 var(--sp-3); padding: 0; overflow: hidden; }
.cx-note, .cx-born-row { padding: var(--sp-3) var(--sp-4); }
.cx-note + .cx-note, .cx-born-row + .cx-born-row { border-top: 1px solid var(--border); }
.cx-note p, .cx-born-row p { margin: 0; }
.cx-note-body { white-space: pre-line; overflow-wrap: anywhere; }
.cx-note-by { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.cx-note-form .field { margin-bottom: var(--sp-2); }
.cx-note-form .btn { min-height: 48px; width: 100%; font-size: var(--fs-base); }
@media (min-width: 560px) {
  .cx-note-form .btn { width: auto; }
}
.cx-born-row .cx-task-what a {
  display: flex; align-items: center; min-height: var(--touch-min);
  color: var(--text); overflow-wrap: anywhere;
}
.cx-born-row.is-done .cx-task-what a { color: var(--muted); }

/* ---------- the C-2 run's rulings (443–446, 450 a) ---------- */
/* 443: "No time yet" sits where a time would be, in the same weight, muted */
.cx-no-time { color: var(--muted); font-weight: 650; }
/* 446: a row in the done-today group shows its OWN day, plain (not warn) */
.cx-task-on { font-weight: 700; color: var(--muted); }
/* 446: the done-today group, under its ratified heading "Done today" (463) */
.cx-done-today { margin-top: var(--sp-6); }
/* the open Decline / Drop / Move box: its act and Cancel, side by side */
.cx-box-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- C-2b: the worded controls (463, 465, 481) ---------- */
/* the Move box: the same open-in-view road as Decline and Drop; a date or
   time box never pushes past its column on a narrow phone */
.cx-move-form input[type="date"], .cx-move-form input[type="time"] { min-width: 0; max-width: 100%; }
/* THE WRITE-UP LINE (465): one small line, a plain link — never red, never
   a badge; it sits under the two doors, above Overdue */
.cx-writeup { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
/* inline-block, not flex: in a flex box the count cell and the words would
   lose the space between them ("3meetings") — the walk saw it */
.cx-writeup a {
  display: inline-block; line-height: var(--touch-min);
  font-weight: 650; color: var(--brand-strong);
  text-decoration: underline; text-underline-offset: 3px;
}
/* a meeting's screen: "Every <weekday>" (· "Ended <date>"), "Ended with the
   series", the Done + Move pair, the people with Take out / Put back */
.cx-meet-series { font-size: var(--fs-sm); font-weight: 650; color: var(--muted); }
.cx-meet-ended { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.cx-meet-acts {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}
.cx-meet-acts .cx-meet-done-form { margin: 0; flex: 1 1 100%; }
.cx-meet-acts .cx-move { scroll-margin-top: calc(2 * var(--touch-min) + var(--sp-4)); }
@media (min-width: 560px) {
  .cx-meet-acts .cx-meet-done-form { flex: 0 1 auto; }
}
.cx-who { list-style: none; margin: 0 0 var(--sp-3); padding: 0; overflow: hidden; }
.cx-who-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); min-height: var(--touch-min);
}
.cx-who-row + .cx-who-row { border-top: 1px solid var(--border); }
.cx-who-row form { margin: 0; flex: none; }
.cx-who-name { font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
/* a man taken out: his name muted and struck — the mark, never a delete */
.cx-who-row.is-out .cx-who-name { color: var(--muted); text-decoration: line-through; }
/* C-5b "Every week": the series' people. The button words are long ("Take
   out of every week"), so at a phone's width the row WRAPS — the name on
   its line, the button under it — instead of crushing the name */
.cx-every-row { flex-wrap: wrap; }
.cx-every-row form { margin-left: auto; }
.cx-every-add { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cx-every-add .input { flex: 1 1 12rem; min-width: 0; min-height: var(--touch-min); }
.cx-every-add .btn { flex: 0 0 auto; }
/* End this series: its optional Why and the one button, at the foot */
/* C-2b fix round 1: the form sits under "+ Add task" with no heading of its
   own, so a rule and space set it apart — its Why must never read as part
   of the tasks above it (no new word) */
.cx-end-series {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--border-strong);
}
.cx-meet-why { margin-top: 2px; }
.cx-end-series .field { margin-bottom: var(--sp-2); }
.cx-end-series .btn { min-height: 48px; }

/* ---------- C-3: THE CALENDAR VIEW ----------
   THE DOOR (until HQ rules the tab strip, question 11): a plain brand link
   at the top right of the day ("Calendar") and of the month ("Today"), in
   the flow beside the h1 — not a tab, not a bar, nothing fixed. */
.cx-head-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cx-head .cx-head-row h1 { margin-bottom: 0; min-width: 0; }
.cx-door {
  flex: none;
  display: inline-flex; align-items: center; min-height: var(--touch-min);
  padding: 0 var(--sp-1); margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-1)) 0 0;
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand-strong);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* the month's own controls: the two arrows (44px squares) and This month */
.cx-month-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.cx-arrow { width: var(--touch-min); padding: 0; }
.cx-this-month { margin-left: auto; }

/* THE MONTH — one ordered list of its days, TWO LAYOUTS (DECISIONS C3-1).
   UNDER 768px, AN AGENDA (SLATE-NOTES: mobile means agenda): a row a day,
   the date in a column on the left, its items on the right; a heavier rule
   above every Monday shows the weeks. Empty days stay as thin rows — the
   gaps ARE the pattern a month is for, and no empty-state word is printed.
   The strip's language, kept (C1-18): TODAY = the number underlined, the
   SELECTED day = framed in brand. Shapes, so colour is never alone. */
.cx-cal-heads { display: none; }
.cx-cal {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden;
}
.cx-cal-pad { display: none; }
/* the Calendar link lands ON the day it came from (#d-<day>, walk finding
   1): clear of the sticky header, with the row before it in sight */
.cx-cal-day { scroll-margin-top: calc(2 * var(--touch-min) + var(--sp-6)); }
.cx-cal-day + .cx-cal-day { border-top: 1px solid var(--border); }
.cx-cal-day + .cx-cal-day.is-monday { border-top: 3px solid var(--border-strong); }
.cx-cal-a {
  position: relative;
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--sp-2); align-items: start;
  min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3);
  color: var(--text); text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-sm);
  transition: background var(--dur-press) ease;
}
.cx-cal-a:active { background: var(--surface-2); }
/* the list clips its corners (overflow: hidden), so the focus ring sits
   INSIDE the cell rather than being cut off at the card's edge */
.cx-cal-a:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .cx-cal-a:hover { background: var(--surface-2); }
}
.cx-cal-date { display: flex; align-items: baseline; gap: var(--sp-1); grid-column: 1; min-height: 24px; }
.cx-cal-wk {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-2xs);
  text-transform: uppercase; color: var(--muted); width: 2.25rem; flex: none;
}
.cx-cal-n { font-size: var(--fs-base); font-weight: 650; line-height: 1.5; }
.cx-cal-day.is-empty .cx-cal-n { color: var(--muted); font-weight: 600; }

/* TODAY: the number underlined, heavy, in ink */
.cx-cal-day.is-today .cx-cal-n {
  color: var(--text); font-weight: 800;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px;
}
.cx-cal-day.is-today .cx-cal-wk { color: var(--text); }
/* THE SELECTED DAY (the one he came from): framed in brand on a card */
.cx-cal-day.is-shown .cx-cal-a { border-color: var(--brand); background: var(--surface); }
.cx-cal-day.is-shown .cx-cal-n { color: var(--brand-strong); font-weight: 800; }

/* a cell's items: one line each, cut with an ellipsis, never wrapped */
.cx-cal-items { grid-column: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.cx-cal-item { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); line-height: 1.45; }
.cx-cal-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
/* a MEETING: its kind first, heavy, in brand ink (the day's headline look),
   behind a BOXED INITIAL — the backup for the colour (SLATE-NOTES); a task
   has no box */
.cx-cal-item.is-meet .cx-cal-text > span:first-child { color: var(--brand-strong); font-weight: 800; }
.cx-cal-mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 1.5px solid var(--brand); border-radius: 4px;
  font-size: var(--fs-2xs); font-weight: 800; line-height: 1; color: var(--brand-strong);
}
/* DONE (C3-5): shown, after the open ones — struck through and muted */
.cx-cal-item.is-done .cx-cal-text,
.cx-cal-item.is-done.is-meet .cx-cal-text > span:first-child { color: var(--muted); font-weight: 600; }
.cx-cal-item.is-done .cx-cal-text { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cx-cal-item.is-done .cx-cal-mark { border-color: var(--border-strong); color: var(--muted); }
.cx-cal-more { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }

/* FROM 768px, A GRID (walk finding 4: at 600 a cell was 80px and broke
   "Estimate" into "Estim-ate"; at 768 it is 105px): seven columns, Monday
   first, blank cells before the
   1st and after the last; hairline gaps; the weekday heads above it.
   768 IS NAMED: src\screens.js GRID_FROM_PX (HQ 474 #22 — AT 600 THE WORDS
   BROKE IN HALF; a measurement, not a taste). A media query cannot read a
   variable, so the number is written here and tests\c2b.test.mjs asserts
   this query equals the constant. */
@media (min-width: 768px) {
  .cx-cal-heads {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: var(--sp-1);
  }
  .cx-cal-heads .cx-cal-wd {
    padding: 0 var(--sp-2);
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-2xs);
    text-transform: uppercase; color: var(--muted);
  }
  .cx-cal {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
    background: var(--border);
  }
  .cx-cal-pad { display: block; background: var(--surface-2); }
  /* the whole grid fits a desk's screen: landing on #d-<day> keeps the
     month's name and arrows in sight rather than scrolling them away */
  .cx-cal-day { background: var(--surface); min-width: 0; scroll-margin-top: 24rem; }
  .cx-cal-day + .cx-cal-day, .cx-cal-day + .cx-cal-day.is-monday { border-top: 0; }
  .cx-cal-a {
    display: flex; flex-direction: column; gap: var(--sp-1);
    height: 100%; min-height: 7rem; padding: var(--sp-1) var(--sp-2) var(--sp-2);
    border-radius: 0;
  }
  .cx-cal-wk { display: none; }
  .cx-cal-items { width: 100%; }
  .cx-cal-item { font-size: var(--fs-xs); gap: var(--sp-1); align-items: flex-start; }
  .cx-cal-mark { width: 16px; height: 16px; margin-top: 1px; }
  /* a grid cell is ~130px at its widest: one line cut "Estimate — Smiths"
     to "Estimate — …" (walk finding 3), so an item may take TWO lines,
     then the ellipsis — the What survives, the cell never squashes */
  .cx-cal-text {
    white-space: normal; overflow-wrap: normal; /* never a word broken in half */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
}

/* ---------- C-4: THE LINK ROW, DECISIONS ----------
   THE LINK ROW (HQ 489): Today · Calendar · Decisions — ONE WRAPPING ROW of
   plain links inside .page (the shell's gutter), in the flow: no sticky, no
   sideways scroll, no inset of its own. A link is brand ink, underlined;
   THE CURRENT ONE is ink, not underlined, and FRAMED — a shape, so a man
   who cannot see the colour still sees which screen he is on. Each is a
   44px target. The row replaces C-3's lone "Calendar" link on the day and
   the month's "Today" link (.cx-door stays for the write-up list's one
   Today link). */
.cx-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  margin: 0 0 var(--sp-3);
}
.cx-nav-a, .cx-tab {
  display: inline-flex; align-items: center; min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  font-weight: 700; color: var(--brand-strong);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  border: 2px solid transparent; border-radius: var(--r-sm);
}
/* W-1: five links on ONE line from 360px up (tight padding, small gap —
   measured: the five words are ~238px of text; at 360 the row has 328px,
   so --sp-2 padding does not fit and --sp-1 does); below 360 they wrap
   three and two, never four and one. Each stays 44px tall and at least
   44px wide. */
.cx-nav-a {
  font-size: var(--fs-sm); padding: 0 var(--sp-1);
  min-width: var(--touch-min); justify-content: center;
}
@media (max-width: 359.98px) {
  .cx-nav-a { flex: 0 0 calc((100% - 2 * var(--sp-1)) / 3); }
}
.cx-nav-a.is-current, .cx-tab.is-current {
  color: var(--text); text-decoration: none;
  border-color: var(--border-strong); background: var(--surface);
}

/* THE TWO TABS inside Decisions (Nick's own shape, §M4 4): two plain links
   in the flow, the current one framed the same way — never .tabbar */
.cx-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.cx-tab { font-size: var(--fs-base); }

/* TO DECIDE (393): one plain line on the by-when day — never red, never a
   badge, a link to the decision; the write-up line's look */
.cx-todecide { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.cx-todecide a {
  display: inline-block; padding-block: 12px;
  font-weight: 650; color: var(--brand-strong); overflow-wrap: anywhere;
  text-decoration: underline; text-underline-offset: 3px;
}

/* THE LIST (DECISIONS C4-1: a dense list, one row a decision — the
   question a link, one small line under it) */
.cx-decisions, .cx-decision { max-width: 640px; }
.cx-dec-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.cx-dec-row { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.cx-dec-row + .cx-dec-row { border-top: 1px solid var(--border); }
.cx-dec-row p { margin: 0; }
.cx-dec-q a {
  display: flex; align-items: center; min-height: var(--touch-min);
  font-weight: 650; color: var(--text); overflow-wrap: anywhere;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .cx-dec-q a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.cx-dec-row.is-replaced .cx-dec-q a { color: var(--muted); }
.cx-dec-by { font-size: var(--fs-xs); font-weight: 650; color: var(--text); }
.cx-dec-row .cx-dec-why, .cx-dec-row .cx-dec-chain { margin-top: 2px; }
.cx-dec-why-text { white-space: pre-line; }
/* "Replaces" / "Replaced by" + the other question: the link is inline text
   with block padding for a 44px target (the From the meeting rule) */
.cx-dec-chain { font-size: var(--fs-xs); color: var(--muted); }
.cx-dec-chain a { display: inline; padding-block: 14px; font-weight: 650; overflow-wrap: anywhere; }

/* ONE DECISION'S SCREEN */
.cx-dec-top { margin-bottom: var(--sp-4); }
.cx-dec-top p { margin: 0; }
.cx-dec-h1 { margin-bottom: var(--sp-2); overflow-wrap: anywhere; white-space: pre-line; }
.cx-dec-done {
  margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
.cx-dec-done p { margin: 0; }
.cx-dec-done .cx-dec-by { font-size: var(--fs-sm); }
.cx-dec-done .cx-dec-why { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text); }
.cx-dec-acts { margin: 0 0 var(--sp-5); }
.cx-dec-acts .btn, .cx-dec-replace .btn { min-height: 48px; }
.cx-decide { margin: 0 0 var(--sp-5); }
.cx-dec-replace { margin-top: var(--sp-5); }

/* HQ 495 / 496: "Meetings with nobody in them" under the month */
.cx-nobody { margin-top: var(--sp-5); }
/* the headline in that list is "Kind — What": as a flex box the spaces round
   the dash were eaten ("Estimate—Barn", C-4 walk finding 2 — the C-2b
   "3meetings" trap again), so the link is a plain block, 44px by padding */
.cx-nobody .cx-born-row .cx-task-what a { display: block; min-height: 0; padding-block: 11px; }

/* ---------- C-5a: THE RECORD, CHANGE IT, 503 ----------
   THE RECORD (charter §M4 5): three blocks — Tasks done · Meetings held ·
   Decisions made — on the day list's own rows (.cx-task), so a recorded
   line reads like the line it was. The span is the Decisions tabs' shape
   (.cx-tabs / .cx-tab, the current one framed); the day is picked on the
   week strip. A meeting's notes sit under it on a hairline, oldest first.
   CHANGE IT is a ghost opener; its box is the Decline / Drop / Move box
   (.cx-decline), "Save the change" the screen's one green. The trace of a
   change is small and muted: the words he reads are the words as they are
   now; what they said before is the footnote. No colour of its own. */
.cx-record { max-width: 640px; }
.cx-rec-row .cx-task-marks { margin-bottom: 2px; }
.cx-rec-what { color: var(--text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .cx-rec-what:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* the record's lines are links to their day / decision: inline text with
   block padding for a 44px target (the From the meeting rule) */
.cx-rec-row .cx-task-what a { display: inline-block; padding-block: 11px; } /* walk finding 4: 10px gave a one-line link 43px */
.cx-rec-notes { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.cx-rec-note { padding: var(--sp-2) 0 0; border-top: 1px solid var(--border); }
.cx-rec-note + .cx-rec-note { margin-top: var(--sp-2); }
.cx-rec-note p { margin: 0; }
.cx-rec-row .cx-task-note { white-space: pre-line; overflow-wrap: anywhere; }
.cx-rec-changed, .cx-rec-before { font-size: var(--fs-xs); color: var(--muted); }
.cx-task-body .cx-rec-changed, .cx-rec-note .cx-rec-changed { margin-top: var(--sp-1); }
.cx-rec-before-text { white-space: pre-line; overflow-wrap: anywhere; }
.cx-task-body .cx-rec-change { margin-top: var(--sp-1); }
.cx-rec-change .btn { min-height: var(--touch-min); }
.cx-change { margin-top: var(--sp-2); }
.cx-change .cx-box-actions .btn { min-height: 48px; }

/* 503: "Decide by {date}" — plain ink, never red, never a badge (393) */
.cx-dec-byline { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.cx-dec-over .cx-task-what a {
  display: inline-block; padding-block: 11px;
  color: var(--text); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px;
}
.cx-rec-who { font-weight: 650; color: var(--muted); }
/* walk finding 3: a change lands on its line (#rec-…) clear of the shell's header, the Decline box's rule */
.cx-rec-row, .cx-rec-note { scroll-margin-top: calc(2 * var(--touch-min) + var(--sp-4)); }

/* ---------- C-6: THE CREW (charter §M4 3; §M8: nothing assumes three) ----------
   One column a man, each his own day as he sees it (DECISIONS C6-1).
   STACKED under 768px (src/screens.js CREW_COLUMNS_FROM_PX — c6's test
   holds this query to it): one man after another, each headed by his short
   name. FROM 768px side by side, every column at least 13.5rem so a
   headline never breaks mid-word (C6-2, measured on the walk); when the men
   outnumber the width, the columns scroll sideways INSIDE .cx-crew — the
   page itself never does (scrollWidth == clientWidth, the walk's check).
   No sticky, no inset of its own, no colour that is not a shell token. */
.cx-crew { display: grid; gap: var(--sp-5); min-width: 0; max-width: 100%; }
.cx-crew:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 4px; border-radius: var(--r-sm); }
.cx-crew-col { min-width: 0; }
/* walk finding 1: /crew/<day>#crew-<him> (507 (40)) landed with his name
   under the shell's header — the record's own fix (C-5a walk finding 3) */
.cx-crew-col { scroll-margin-top: calc(2 * var(--touch-min) + var(--sp-4)); }
.cx-crew-name {
  margin: 0 0 var(--sp-2); padding-bottom: var(--sp-1);
  font-size: var(--fs-lg); border-bottom: 2px solid var(--border-strong);
  overflow-wrap: anywhere;
}
.cx-crew-sub { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-sm); }
.cx-crew-name + .cx-crew-sub { margin-top: 0; }
.cx-crew-col .cx-list + .cx-list { margin-top: var(--sp-3); }
.cx-crew-col .state-empty { margin: 0; }
/* his own task's what is a link to his day; an about link out: 44px each */
.cx-crew-row .cx-task-what:not(.cx-meet-head) a, .cx-about-out {
  display: inline-block; padding-block: 11px;
  color: var(--text); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px;
}
.cx-crew-row { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .cx-crew {
    grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 1fr);
    overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--sp-2);
  }
}