/* ==========================================================================
   SCMH concept demonstration — clinical.css
   The clinical shell: screens 7–28. Same tokens, same type, same focus ring,
   same radii as the public shell — and a different ground, a tighter density,
   no display serif in the data plane, and a dark mode.

   This file is the FOUNDATION for the clinical screens. The severity
   component (§4.6) and the AI-draft component (§6.1) are defined here once.
   Instantiate them; do not re-invent them. Markup contracts are in
   /starr/CONVENTIONS.md.
   ========================================================================== */

/* ------------------------------------------------------------- 1. ground
   Not cream. A warm ground halves the separation of the entire gold half of
   the severity scale, and warm grounds shift further yellow off-axis on the
   TN panels a rural hospital actually owns. brand §4.1. */
body.clinical{ background:var(--paper); color:var(--ink); font-size:var(--body,0.9375rem); }
body.clinical .site-head,
body.clinical .mast,
body.clinical .nav{ background:var(--app-band); }
body.clinical .strip{ background:var(--app-band); border-bottom-color:var(--line-mean); }
body.clinical .prefs{ background:var(--app-band); }
body.clinical section{ padding:var(--sp-5) 0; }

/* Fraunces on the page h1 only. There is no serif in the data plane. */
body.clinical h2,body.clinical h3{ font-family:var(--sans); font-weight:700;
  letter-spacing:0; }
body.clinical h2{ font-size:1.25rem; line-height:1.25; }
body.clinical h3{ font-size:1.05rem; line-height:1.3; }

/* The accent role transfers to brass. Red in a data plane means one thing.
   brand §3.6 — no red borders, no red icons, no red links, no red counters. */
body.clinical .eyebrow{ color:var(--gold); }

/* Every clinical numeral. Never per element. plan §4.3.

   THE SLASHED-ZERO CHECK WAS RUN, not assumed. Measured 5 Sep 2026 by
   rendering "0O0" at 90px in each shipped face, with and without
   font-feature-settings:"zero" 1, and comparing the rasters:

     Public Sans (assets/fonts/publicsans.woff2) — the `zero` feature is
     ABSENT. Its 0 and O differ in width only.
     IBM Plex Mono (assets/fonts/ibmplexmono.woff2) — its DEFAULT zero already
     carries a centre dot, so 0 and O cannot be confused.

   Therefore, per plan §4.3, every field where 0 and O can both occur — a
   value, an MRN, an NDC, an account number, a dose — is set in --mono.
   Prose keeps Public Sans. The outcome is recorded on screen 5. */
body.clinical,
body.clinical th,body.clinical td,
body.clinical .n{
  font-variant-numeric:tabular-nums;
}
body.clinical .num,body.clinical .val,body.clinical .mrn,
body.clinical .code,body.clinical td.numeric{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:.9375em;   /* IBM Plex Mono runs large next to Public Sans */
}

/* --------------------------------------------------------- 2. screen head
   {ui.illustrative} sits BESIDE the h1 — never in a corner, never a
   watermark, never below the fold. plan §10 surface 3. */
.screen-head{ padding:var(--sp-5) 0 var(--sp-4); border-bottom:1px solid var(--line-mean); }
.screen-head h1{ font-size:clamp(1.8rem,3.4vw,2.4rem); margin-bottom:.4rem; }
.screen-head .chips{ margin:0 0 .8rem; }

/* ------------------------------------------------------------- 3. tables
   Zebra striping is banned: a stripe is a fill, and fills are spent on
   status. Row separation is a 1px rule. plan §4.4. */
.dt{ width:100%; border-collapse:separate; border-spacing:0; background:var(--paper); }
.dt th,.dt td{ padding:var(--cell-pad,8px 12px); border-bottom:1px solid var(--line);
  vertical-align:middle; height:var(--row-h,40px); }
.dt thead th{ position:sticky; top:0; z-index:2; background:var(--app-band);
  font-size:.8125rem; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--ink); border-bottom:1px solid var(--line-mean); }
.dt th:first-child,.dt td:first-child{ position:sticky; left:0; z-index:1;
  background:var(--paper); }
.dt thead th:first-child{ z-index:3; background:var(--app-band); }
.dt th+th,.dt td+td{ padding-left:16px; }   /* gutters never below 16px */
.dt tr.boundary td,.dt tr.boundary th{ border-bottom:1px solid var(--line-mean); }
.dt tbody tr:hover td{ background:var(--row-hover); }
.dt tbody tr[aria-selected="true"] td{ background:var(--row-sel); }
.dt tbody tr[aria-selected="true"] td:first-child{ box-shadow:inset 3px 0 0 var(--row-sel-bar); }
.dt [aria-disabled="true"]{ color:var(--ink-disabled); }

.scroller{ overflow-x:auto; border:1px solid var(--line-mean); border-radius:var(--r);
  background:var(--paper); }
.scroller:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }

/* -------------------------------------------------- 4. severity component
   plan §4.6. All five channels present at once: text, weight and size, shape,
   position, colour. Colour is the fourth channel, never the first. */
.val{ position:relative; padding-left:20px; }
.val .bar{ position:absolute; left:0; top:0; bottom:0; width:0; }
.val .dir{ font-size:.85em; margin-right:.25em; }
.val .num{ font-weight:500; }
.val .unit{ color:var(--ink-2); font-size:.9em; margin-left:.2em; }
.val .glyph{ margin-left:.4em; }
.val .lvl{ display:inline-block; margin-left:.5em; font-size:.75rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; }
.sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.val.s0{ background:var(--s0-fill); color:var(--s0-ink); }
.val.s1{ background:var(--s1-fill); color:var(--s1-ink);
  box-shadow:inset 0 0 0 1px var(--s1-bd); }        /* the border does the work the
                                                       1.14:1 fill cannot */
.val.s1 .bar{ width:3px; background:var(--s1-bar); }
.val.s2{ background:var(--s2-fill); color:var(--s2-ink); }
.val.s2 .bar{ width:4px; background:var(--s2-bar); }
.val.s3{ background:var(--s3-fill); color:var(--s3-ink); }
.val.s3 .bar{ width:5px; background:var(--s3-bar); }
.val.s4{ background:var(--s4-fill); color:var(--s4-ink);
  font-size:1.125em; font-weight:700; }             /* one type step larger, weight 700 */
.val.s4 .bar{ width:6px; background:var(--s4-bar); }
.val.s4 .num{ font-weight:700; }
.val.s4 .unit{ color:inherit; }
/* S5 is not on the severity ramp. "We have not measured this" is not "mildly
   abnormal": it is cool, hatched and italic, and orthogonal to severity. */
.val.s5{ color:var(--s5-ink); font-style:italic;
  background-color:var(--s5-fill);
  background-image:repeating-linear-gradient(45deg,
    rgba(51,66,82,.16) 0 2px, transparent 2px 7px); }
.val.s5 .bar{ width:3px; background:linear-gradient(var(--s5-bar) 50%, transparent 0);
  background-size:3px 8px; }
:root[data-theme="dark"] .val.s5,:root[data-theme="night"] .val.s5{
  background-image:repeating-linear-gradient(45deg,
    rgba(157,176,198,.20) 0 2px, transparent 2px 7px); }

/* NOTHING animates on a status. WCAG 2.3.1, and a blinking value is harder to
   read, not easier. */
.val,.val *{ transition:none !important; animation:none !important; }

/* A focus ring landing on a solid S3 or S4 fill is the one case a single ring
   colour cannot solve: #12448F on #AE0000 is 1.24:1. Two-tone ring there. */
.val.s3 :focus-visible,.val.s4 :focus-visible{
  --focus-ring:#FFC94A;
  box-shadow:0 0 0 1px #0B1420 inset, 0 0 0 5px #0B1420;
}

/* ------------------------------------------- 5. reference-interval bar §4.7
   Monochrome, always. It answers "which way is it off", which is a different
   question from "how much attention does this need". */
.refbar{ display:inline-block; vertical-align:middle; width:120px; height:12px; }
.refbar .track{ stroke:var(--ink-2); }
.refbar .marker{ fill:var(--ink); }

/* ------------------------------------------------------- 6. touch targets
   plan §4.8. Hit area is decoupled from visual size, so a 32px compact row
   still carries a 48px target. */
.hit{ position:relative; }
.hit::after{ content:""; position:absolute; inset:-8px 0; }
.btn-clin{
  font:inherit; font-family:var(--sans); font-weight:600; font-size:.9375rem;
  min-height:44px; min-width:44px; padding:.5rem 1rem; border-radius:var(--r);
  border:1px solid var(--line-mean); background:var(--paper); color:var(--ink);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem;
}
.btn-clin:hover{ border-color:var(--brand-3); color:var(--brand-3); }
/* Anything that mutates a clinical record — 48×48, 12px from any neighbour. */
.btn-mutate{ min-height:48px; min-width:48px; margin:6px; padding:.6rem 1.15rem;
  background:var(--brand-3); border-color:var(--brand-3); color:var(--paper); }
:root[data-theme="dark"] .btn-mutate,:root[data-theme="night"] .btn-mutate{ color:#06101A; }
.btn-clin[disabled]{ color:var(--ink-disabled); border-color:var(--line);
  background:var(--app-band); cursor:not-allowed; }
.btn-mutate[disabled]{ background:var(--app-band); border-color:var(--line);
  color:var(--ink-disabled); }

/* ------------------------------------------------ 7. the AI-draft component
   plan §6.1. All nine elements, every time. A draft that is missing one of
   them is not this component. */
.draft{
  background:var(--draft-fill);
  border:1px solid var(--line-mean);
  border-left:4px solid var(--gold);        /* never red — red is severity */
  border-radius:var(--r); padding:var(--sp-4) var(--sp-5); margin:0 0 var(--sp-5);
}
.draft>*:last-child{ margin-bottom:0; }
.draft .chip.draft-chip{ color:var(--gold); margin:0 0 var(--sp-3); }
.draft-body p{ max-width:44rem; }
.src{ font-size:.75em; vertical-align:super; line-height:0; padding:0 .15em;
  color:var(--link); font-weight:700; }
.sources{ margin:var(--sp-4) 0 0; font-size:.875rem; }
.sources li{ padding:.2rem .35rem; border-radius:var(--r-sm); }
.sources li:target{ background:var(--row-sel); box-shadow:inset 3px 0 0 var(--row-sel-bar); }

.abnormals{ border:1px solid var(--line-mean); border-radius:var(--r);
  padding:var(--sp-4); margin:0 0 var(--sp-5); background:var(--paper); }
.abnormals>summary{ font-weight:700; cursor:pointer; min-height:44px;
  display:flex; align-items:center; }
.abnormals .rule{ font-size:.9rem; color:var(--ink-2); max-width:44rem; }

.notincluded{ font-size:.9375rem; color:var(--ink-2); max-width:44rem; }

.attest{ border:1px solid var(--line-mean); border-radius:var(--r);
  padding:var(--sp-4); margin:0 0 var(--sp-4); }
.attest label{ display:flex; gap:.6rem; align-items:flex-start; min-height:48px;
  padding:.35rem 0; max-width:44rem; }
.attest input{ width:1.25rem; height:1.25rem; margin-top:.55rem; flex:0 0 auto;
  accent-color:var(--brand-3); }
.sign-status{ display:block; font-size:.9375rem; color:var(--ink-2); margin:.5rem 0 0;
  max-width:44rem; }

/* The diff. Never colour alone: struck and prefixed, underlined and prefixed. */
.diff del{ text-decoration:line-through; text-decoration-thickness:.1em; }
.diff ins{ text-decoration:underline; text-decoration-thickness:.12em; }

.signblock{ border-top:1px solid var(--line-mean); padding-top:var(--sp-4);
  margin-top:var(--sp-4); font-size:.9375rem; }
.signblock .who{ font-weight:700; }
.audit{ border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-3);
  margin:var(--sp-4) 0 0; }
.audit>summary{ font-weight:700; cursor:pointer; min-height:44px;
  display:flex; align-items:center; }
.measured{ font-size:.875rem; color:var(--ink-2); margin:var(--sp-3) 0 0;
  max-width:none; }

/* ----------------------------------------------------------------- 8. tabs */
.tabs{ display:flex; flex-wrap:wrap; gap:.25rem; border-bottom:1px solid var(--line-mean);
  margin:0 0 var(--sp-5); padding:0; list-style:none; }
.tabs li{ max-width:none; }
.tabs button{ font:inherit; font-weight:600; min-height:44px; padding:.5rem 1rem;
  background:transparent; border:0; border-bottom:3px solid transparent;
  color:var(--ink-2); cursor:pointer; }
.tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--gold); }

/* ==========================================================================
   ADDED FOR SCREENS 13–23 — the eleven role dashboards.
   Appended as one fenced block so it merges cleanly. Nothing above this line
   was altered. Every value is a token; no hex is hard-coded except the two
   chart-series values, which the brand document (§6.6) states as literals and
   which tokens.css does not carry.

   Why these exist: clinical.css shipped the severity component, the draft
   component, tables and tabs — but no panel, no grid and no chart, and a
   dashboard is made of those three. `.grid/.g2/.g3` are duplicated from
   public.css §1 because CONVENTIONS §3 lists them as base.css fragments and
   they are in fact in the public sheet, which a clinical screen never loads.
   That duplication should be resolved by moving them to base.css.
   ========================================================================== */

/* ------------------------------------------------------------ 9. layout
   Grid and flex children size to min-content by default, which at 200% text
   on a 320px screen is what pushes a page sideways. Opt out once. */
.grid{ display:grid; gap:var(--gap); }
.grid>*{ min-width:0; }
.g2{ grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr)); }
.g3{ grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr)); }
/* The worklist and its right rail. One column until there is room for two. */
@media (min-width:64rem){ .g-rail{ grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); } }
.tight{ padding-top:var(--sp-3) !important; }

/* ------------------------------------------------------------- 10. panel
   The card of the clinical shell. Structure with a 1px rule, not a shadow:
   --e0 is the default elevation and a dashboard of drop shadows is noise. */
.panel{ border:1px solid var(--line-mean); border-radius:var(--r);
  background:var(--paper); padding:var(--sp-4) var(--sp-5); min-width:0; }
.panel>*:last-child{ margin-bottom:0; }
.panel h2{ font-size:1.05rem; margin-bottom:.6rem; }
.panel h3{ font-size:.95rem; margin-bottom:.5rem; }
.panel.band{ background:var(--app-band); }
.panel p,.panel li,.panel dd{ max-width:44rem; }
.panel-note{ font-size:.875rem; color:var(--ink-2); max-width:44rem; }

/* A figure the reader is meant to carry away. --mono, because a 0 and an O
   can both occur in the fields beside it. */
.stat{ display:block; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:700; line-height:1.05; }
.stat.big{ font-size:1.75rem; }
.stat-l{ color:var(--ink-2); font-size:.9rem; margin:.3rem 0 .9rem; max-width:none; }

/* Label / value rows. Right-aligned numerals so a column of them lines up. */
.kv{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem 1rem;
  margin:0 0 1.1rem; }
.kv dt{ color:var(--ink-2); font-size:.9rem; min-width:0; }
.kv dd{ margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-weight:600; text-align:right; white-space:nowrap; }

/* ------------------------------------------------------------- 11. glyphs
   Status glyphs are inline SVG, never a Unicode character: the shapes the
   plan names (◐ ◆ ⬤ ▼ ▲ ⌛ ✎ ✓) are absent from every font shipped here, and a
   missing glyph destroys the shape channel — the one channel that survives
   colour-blindness and greyscale. base.css sets svg{display:block}; these are
   in running text, so they are put back inline. */
.gl{ display:inline-block; width:.82em; height:.82em; vertical-align:-.06em;
  fill:currentColor; flex:0 0 auto; }
.val .glyph .gl,.val .dir .gl{ width:.9em; height:.9em; }
.val.s4 .glyph .gl{ width:.8em; height:.8em; }

/* ---------------------------------------------------------- 12. bed grid
   Every cell is filled: an empty cell reads as missing data, so a free bed
   says so in words. A patient boundary is a --line-mean rule, never a stripe. */
.beds{ list-style:none; margin:0 0 1.3rem; padding:0; display:grid; gap:.65rem;
  grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr)); }
.beds li{ max-width:none; min-width:0; }
.bed{ height:100%; border:1px solid var(--line); border-top:3px solid var(--line-mean);
  border-radius:var(--r-sm); padding:.55rem .7rem; }
.bed .rm{ font-family:var(--mono); font-weight:700; font-size:.95rem; }
.bed .who{ display:block; font-size:.9rem; font-weight:600; margin:.2rem 0 .1rem; }
.bed .why,.bed .rn{ display:block; font-size:.8rem; color:var(--ink-2); line-height:1.4; }
.bed.free{ border-top-color:var(--line); }
.bed.free .rm{ color:var(--ink-2); }

/* ----------------------------------------------------- 13. checked packet
   An assembler and a checker. Each item is a document that exists or does
   not, and the ones that do not are named with what is missing. */
.checks{ list-style:none; margin:0 0 1.3rem; padding:0; }
.checks li{ max-width:none; display:grid; grid-template-columns:1.9rem minmax(0,1fr);
  gap:.15rem .7rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.checks .n{ font-family:var(--mono); font-size:.85rem; color:var(--ink-2);
  grid-row:span 2; padding-top:.1rem; }
.checks .what{ font-weight:600; min-width:0; }
.checks .state{ font-size:.9rem; color:var(--ink-2); display:flex; gap:.4rem;
  align-items:baseline; flex-wrap:wrap; min-width:0; }
.checks li.open .state{ color:var(--ink); font-weight:600; }
.checks li.open{ border-left:4px solid var(--gold); padding-left:.6rem;
  grid-template-columns:1.6rem minmax(0,1fr); }

/* ------------------------------------------------------- 14. :target tabs
   Real links to real fragments, so the tabs work with no JavaScript and are
   keyboard-native. clinical.css §8 styles a button version; this is the link
   version, and the two agree visually. */
.tabs a{ display:flex; align-items:center; min-height:44px; padding:.5rem 1rem;
  font-weight:600; font-size:.9375rem; color:var(--ink-2);
  border-bottom:3px solid transparent; text-decoration:none; }
.tabs a:hover{ color:var(--ink); border-bottom-color:var(--line-mean); }
.tabs a[aria-current="true"]{ color:var(--ink); border-bottom-color:var(--gold); }

/* ------------------------------------------------------------- 15. charts
   plan §4.10: hand-authored inline SVG, 2.5px strokes, the label ON the line
   and never in a colour-keyed legend, and the same data available as a real
   table. One series is used on this site's line chart, so one colour.
   #20518F is 7.97:1 on white; on #131F2E it is 2.32:1, so dark swaps to
   #7FA5DB (6.6:1 there). Both clear the 3:1 non-text floor on their ground.
   These two literals are brand §6.6's stated house series; tokens.css does
   not carry them. */
.chart{ --chart-1:#20518F; }
:root[data-theme="dark"] .chart,:root[data-theme="night"] .chart{ --chart-1:#7FA5DB; }
@media (prefers-color-scheme:dark){ :root[data-theme="auto"] .chart{ --chart-1:#7FA5DB; } }
.chart svg{ width:100%; height:auto; max-width:34rem; }
.chart .ln{ fill:none; stroke:var(--chart-1); stroke-width:2.5;
  stroke-linejoin:round; stroke-linecap:round; }
.chart .pt{ fill:var(--chart-1); }
.chart .ax{ stroke:var(--line-mean); stroke-width:1; fill:none; }
.chart .gr{ stroke:var(--line); stroke-width:1; fill:none; }
.chart .lb{ fill:var(--ink-2); font-family:var(--mono); font-size:9px; }
.chart .lb-on{ fill:var(--ink); font-family:var(--mono); font-size:11px; font-weight:700; }

/* --------------------------------------------------- 16. the blank field
   Screen 20's `Discharged, not final billed`. The value is a literal em dash
   because we do not know this hospital's figure and will not guess it. It is
   the most persuasive thing on that screen; it must read as deliberate, not
   as a rendering failure. */
.blank{ display:block; font-family:var(--mono); font-size:2.4rem; font-weight:700;
  line-height:1.1; color:var(--ink); }

/* ------------------------------------------------------ 17. print, panels */
@media print{
  .panel,.bed,.checks li,.chart{ break-inside:avoid; }
  .panel{ border:1px solid #8C8477 !important; background:#FFFFFF !important; }
  .chart{ --chart-1:#20518F; }
  .board-page{ break-after:page; }
  .board-page:last-of-type{ break-after:auto; }
}

/* A 32px compact row still carries a 44px target: hit area is decoupled from
   visual size, so density and glove-safety are not in conflict. brand §4.4. */
.dt a.hit,.checks a.hit{ display:inline-block; }
.dt .hit::after{ inset:-11px -8px; }

/* Screen 15's fetal-monitoring refusal sits between the mother panel and the
   newborn panel, full width, at 1.05rem — the plan puts it where it cannot be
   missed rather than at the foot of the page. Still no fill and still no red:
   a refusal is not an error. */
.refusal.strong p{ font-size:1.05rem; color:var(--ink); }
.refusal.strong{ border-color:var(--line-mean); }
/* The direction glyph in a two-point trend carries no severity colour. */
.gl-arrow{ color:var(--ink-2); }


/* ------------------------------------------- dashboards: tiles, worklists
   Screens 13-28 instantiate these rather than inventing their own. Every state
   is a word first; the icon and the colour repeat it, so meaning survives
   greyscale, colour-blindness and a bad monitor at 3 a.m. */
.tiles{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.tile{max-width:none;display:flex;flex-direction:column;gap:.15rem;
  padding:1rem 1.1rem;background:var(--pub-card);border:1px solid var(--pub-line);
  border-left:3px solid var(--brand-3);border-radius:var(--r)}
/* clinical numerals in mono: Public Sans has no slashed zero */
.tile-v{font-family:var(--mono);font-size:1.7rem;font-weight:600;line-height:1.1;
  color:var(--brand)}
.tile-l{font-weight:600;font-size:.94rem}
.tile-s{font-size:.83rem;color:var(--ink-2)}

.scroller{overflow-x:auto;margin:1.6rem 0 0}
.work{width:100%;border-collapse:collapse;font-size:.94rem;min-width:34rem}
.work caption{text-align:left;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:.5rem}
.work th,.work td{text-align:left;padding:.55rem .7rem;
  border-bottom:1px solid var(--line);vertical-align:top}
.work thead th{font-family:var(--mono);font-size:.71rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--line-2)}
.work tbody th{font-weight:600}
.work .num{font-family:var(--mono)}
/* the synthetic tag sits under the name, never run together with it */
.syn{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);font-weight:400;margin-top:.1rem}

.chip-state{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  font-size:.85rem;font-weight:600;padding:.15rem .55rem;border-radius:var(--r);
  border:1px solid currentColor}
.s-ready{color:var(--brand-3)}
.s-part{color:var(--gold)}
.s-none,.s-due{color:var(--accent)}
.s-done{color:var(--brand)}
.s-wait{color:var(--gold)}

.refusal-box{display:flex;gap:.7rem;align-items:flex-start;margin:1.8rem 0 0;
  padding:1rem 1.2rem;background:var(--pub-card);border:1px solid var(--line);
  border-left:3px solid var(--ink-2);border-radius:var(--r)}
.refusal-box p{margin:0;max-width:none;font-size:.94rem}
.refusal-box .ic{color:var(--ink-2);margin-top:.15rem}
.resets{margin-top:1.8rem;font-size:.85rem;color:var(--ink-2)}
.screen-head .lead{margin-top:.6rem}

/* a real sequence, so the numbers mean something */
.steps{list-style:none;margin:1.6rem 0 0;padding:0}
.step{max-width:none;display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;
  border-top:1px solid var(--line)}
.step-n{flex:none;width:1.9rem;height:1.9rem;display:grid;place-items:center;
  border-radius:50%;background:var(--brand);color:var(--paper);
  font-family:var(--mono);font-size:.86rem;font-weight:600}
.step h3{margin:.1rem 0 .25rem;font-family:var(--display);font-size:1.1rem}
.step p{margin:0;max-width:none;font-size:.94rem;color:var(--ink-2)}

/* ------------------------------------------- charts, meters and drill-downs
   Charts are inline SVG: no library, no request, and they print. Grid and axes
   are recessive; text wears text tokens and never a series colour. */
.cgrid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));
  margin-top:1.2rem}
.chart{margin:0;padding:1.1rem 1.2rem;background:var(--pub-card);
  border:1px solid var(--pub-line);border-radius:var(--r)}
.chart figcaption{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.6rem}
.chart-t{font-family:var(--display);font-size:1.06rem;font-weight:600}
.chart-s{font-size:.83rem;color:var(--ink-2)}
.c-svg{width:100%;height:auto;display:block;overflow:visible}
.c-svg .ax{font-family:var(--mono);font-size:10px;fill:var(--axis)}
.c-svg .dl{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--ink)}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin:0 0 .6rem;padding:0}
.legend li{display:flex;align-items:center;gap:.4rem;font-size:.85rem;max-width:none;
  color:var(--ink-2)}
.legend .k{width:11px;height:11px;border-radius:3px;flex:none}
.chart-data{margin-top:.8rem}
.chart-data summary{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.chart-data[open] summary{margin-bottom:.5rem}

/* progress meters: magnitudes against their own targets, not a bar chart */
.meters{list-style:none;margin:0;padding:0}
.meters li{max-width:none;padding:.6rem 0;border-bottom:1px solid var(--line)}
.pm-top{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.pm-l{font-weight:600;font-size:.95rem}
.pm-v{font-family:var(--mono);font-size:.88rem;color:var(--ink-2)}
.pm-p{color:var(--ink-2)}
.pm-track{height:8px;border-radius:99px;background:var(--grid);margin:.35rem 0 .3rem;
  overflow:hidden}
.pm-fill{display:block;height:100%;border-radius:99px;background:var(--c1)}
.pm-n{margin:0;font-size:.85rem;color:var(--ink-2);max-width:none}

/* ---- drill-downs. A <details> and not a modal: works without JavaScript,
   keyboard and screen-reader behaviour come from the browser, and it prints. */
.drills{list-style:none;margin:1.1rem 0 0;padding:0}
.drill{max-width:none;margin-bottom:.5rem;background:var(--pub-card);
  border:1px solid var(--pub-line);border-left:3px solid var(--c1);
  border-radius:var(--r)}
.drill.ok{border-left-color:var(--c3)}
.drill.risk{border-left-color:var(--accent)}
.drill summary{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.75rem 1rem;cursor:pointer;list-style:none}
.drill summary::-webkit-details-marker{display:none}
.drill summary:hover{background:var(--band)}
.d-sum{font-size:.96rem}
/* --brand, not --c1: a series colour is validated to 3:1 as a mark, and
   text needs 4.5:1. Text wears text tokens. */
.d-more{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);white-space:nowrap;font-weight:600}
.drill[open] .d-more::after{content:" −"}
.drill:not([open]) .d-more::after{content:" +"}
.d-body{padding:.2rem 1rem 1rem;border-top:1px solid var(--line)}

.facts{margin:.8rem 0 0}
.fct{display:flex;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.fct dt{flex:0 0 11rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);padding-top:.15rem}
.fct dd{margin:0;max-width:none;font-size:.93rem}
.timeline{list-style:none;margin:1rem 0 0;padding:0 0 0 1rem;border-left:2px solid var(--grid)}
.timeline li{max-width:none;position:relative;padding:.3rem 0 .3rem .9rem}
.timeline li::before{content:"";position:absolute;left:-1.42rem;top:.68rem;width:9px;height:9px;
  border-radius:50%;background:var(--c1);border:2px solid var(--pub-card)}
.tl-when{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.tl-what{font-size:.93rem}

.dsec{margin-top:2.4rem}
.dsec>h2{font-family:var(--display);font-size:1.45rem;margin:0 0 .2rem}
.sec-lead{margin:0 0 .4rem;color:var(--ink-2);font-size:.95rem}

/* ------------------------------------------- the fleet map
   MapLibre renders real tiles; these style only our own markers. State is
   carried by shape as well as colour — an arrow for a moving unit, a ring for
   a stopped one, a cross for one off the road — so it survives greyscale. */
.mapwrap{position:relative;margin:1rem 0 .6rem}
.fleetmap{height:clamp(320px,52vh,560px);border-radius:var(--r);
  border:1px solid var(--pub-line);overflow:hidden;background:var(--band)}
.mapnote{font-size:.83rem;color:var(--ink-2);margin:.5rem 0 0;max-width:none}
.maplegend{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;
  margin:.7rem 0 0;padding:0}
.maplegend li{display:flex;align-items:center;gap:.45rem;font-size:.86rem;
  color:var(--ink-2);max-width:none}
.lg-dot{width:12px;height:12px;border-radius:50%;flex:none;border:2px solid var(--pub-card)}
.lg-dot.s-move{background:var(--c3)}
.lg-dot.s-stop{background:var(--c1)}
.lg-dot.s-oos{background:var(--accent)}
.lg-dot.s-hosp{background:var(--c2)}

.mk{display:grid;place-items:center;cursor:pointer}
.mk-dot{width:15px;height:15px;border-radius:50%;border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.45)}
.mk-moving .mk-dot{background:var(--c3)}
.mk-stopped .mk-dot{background:var(--c1)}
.mk-service .mk-dot{background:var(--accent)}
.mk-hosp .mk-dot{background:var(--c2);width:19px;height:19px;border-radius:4px}
/* a moving unit is drawn as an arrow pointing where it is going */
.mk-arrow{border-radius:2px 50% 50% 50%}
.mk-lab{margin-top:2px;font-family:var(--mono);font-size:10px;font-weight:600;
  color:#10243d;background:rgba(255,255,255,.92);padding:0 4px;border-radius:3px;
  white-space:nowrap}
.mk:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.maplibregl-popup-content{font-family:inherit;font-size:.88rem;white-space:pre-line;
  border-radius:var(--r);padding:.7rem .85rem}

/* The word is the state and wears ink; the colour rides a dot beside it, so
   the pair passes text contrast and still reads at a glance. */
.vstate{font-weight:600;white-space:nowrap;color:var(--ink);
  display:inline-flex;align-items:center;gap:.4rem}
.vstate::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.vstate.s-move::before{background:var(--c3)}
.vstate.s-stop::before{background:var(--c1)}
.vstate.s-oos::before{background:var(--accent)}
.vspd{font-family:var(--mono);font-weight:600}

/* ------------------------------------------------- the app screens
   The phone is drawn, not screenshotted, so it scales and prints. It is capped
   so it never grows past a real handset on a wide monitor. */
.phone{width:100%;max-width:372px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 18px 40px rgba(16,24,48,.22))}
.phones{display:grid;gap:var(--gap);grid-template-columns:1fr;
  justify-items:center;margin:0 0 1.5rem}
@media (min-width:52rem){.phones.two{grid-template-columns:1fr 1fr}}
.phone-cap{font-size:.85rem;color:var(--ink-2);text-align:center;margin:.7rem 0 0;
  max-width:26rem}