/* ==========================================================================
   THE ONE TOKEN SHEET (overhaul Phase 5, direction A "Deck", 2026-09-21;
   the R23u design system, 2026-09-26).

   Every chrome loads this file first: base.html's document pages, the desk
   page (floor/shell.html) and the standalone journal and roster pages. Colours
   live here and nowhere else; a stylesheet or template that needs one reads
   the variable.

   WHAT EACH COLOUR MEANS, and it means only that (B47: the old names --cyan, --gold,
   --green, --loss still work as aliases of the theme tokens):
     accent (--cyan)  links, focus rings, the active tab or nav row, the wordmark's "digs"
     up (--green)     gains, OK
     down (--loss)    losses
     warn (--gold)    armed or live state, caution; on the black chart the entry level is --chart-lvl
     halt             halts and risk breaches

   R23u: the document pages take the shapes of the phone app Kevin approved
   (R18g): rounded cards, one type scale, a few shared components (page head,
   card, stat tile, status chip, key/value rows, dot lines, verdict line,
   buttons, filter chips). Old class names keep working (.s.ok, .panel,
   table.lab, .cardsy) so pages this build did not touch still look right.
   The desk page keeps its own dense look: the shared changes it sees are the
   card radius and the type scale variables, nothing that moves its layout.
   ========================================================================== */
/* ============================================================== THE THEMES (R31 B44, B47)
   Kevin picked MIST with the EMBER accent (2026-10-01, round6/mockups/mist_accents.html, scheme C):
   light panels, a burnt orange accent, slate for caution, trading green and red. The theme tokens
   below are the ONLY place a colour is written for the nav, the desk, All accounts, the phone and
   the floor (floor/tests_b44_theme.py reads every sheet and fails on a literal). The five older
   schemes (graphite, navy, teal, light, gold) are named sets further down; the pick is one line,
   settings.IKEDIG_THEME, rendered as data-theme on <html>.
   THE CHART CANVAS STAYS BLACK IN EVERY THEME and carries its own light text: the --chart-*
   tokens never change with the theme, and the chart scripts read those, not --text or --line. */
:root {
  --bg: #dde0e4; --panel: #e9ebee; --card: #f2f3f5;
  --line: #c6cad1; --line2: #aeb4bd;
  --text: #15181d; --muted: #525963; --dim: #5a616b;
  --accent: #c2410c; --on-accent: #ffffff;
  /* B50: THE ACCENT AS INK. Ember is a FILL colour (buttons, the selected tab, the brand line,
     white text on it); wherever the accent is text or a thin outline a sheet reads
     --accent-ink (or its old alias --cyan), which Dove darkens so it reads at 4.5:1 on its
     grays. Mist's Ember already reads on its lighter panels, so here the ink is Ember itself. */
  --accent-ink: var(--accent);
  --up: #047857; --down: #be123c; --warn: #475569;
  /* Halts and risk breaches: violet, so a halt never reads as a loss. */
  --halt: #7e22ce;
  /* R31 B176: the Alpaca bar's yellow (floor/alerts.css), the same on every theme. */
  --caution: #d97706;
  --on-fill: #ffffff;
  /* The chart canvas: black, with its own light ink in every theme. */
  --chart-bg: #000; --chart-text: #e9ecef; --chart-muted: #9aa1ab; --chart-dim: #7d8590;
  --chart-line: #2b3038; --chart-up: #10b981; --chart-down: #f43f5e; --chart-lvl: #f97316;
  --chart-blue: #60a5fa; --chart-halt: #c084fc;
  /* R31 B119: the extended hours blue on a page (the since close line); the dark schemes
     take the chart's own blue, which reads on their dark panels. */
  --ext: #1d4ed8;
  /* Hover and focus on a light panel. */
  --hover: color-mix(in srgb, var(--text) 6%, transparent);
  --focus: var(--accent);
  --shadow: 0 6px 24px rgba(0, 0, 0, .16);
  --drawer-edge: -8px 0 24px rgba(0, 0, 0, .18);
  color-scheme: light;

  /* THE NAMES THE OLDER STYLESHEETS, TEMPLATES AND SCRIPTS STILL READ. Each resolves to a
     theme token above, so a rule written against --ground or --loss follows the theme. */
  --ground: var(--bg); --panel2: var(--card);
  /* R31 B55: THE SIDE BARS (the left rail, the right bar) read this one token. It follows the
     Card colour until the Side bar picker in Settings, Appearance sets it on its own. */
  --sidebar: var(--card);
  /* R31 B96: the round 4 shell's soft fills (a chip, a closed trade's plate) and its hairline. */
  --band: var(--panel); --line-soft: var(--line);
  --cyan: var(--accent-ink); --gold: var(--warn); --green: var(--up); --loss: var(--down);
  --navy: var(--warn);
  --lvl: var(--warn);
  --font: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius: 2px;

  /* THE TYPE SCALE (R23u). Nothing reads under --fs-xs anywhere. */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px;
  --fs-xl: 20px; --fs-2xl: 28px; --fs-3xl: 34px;
  /* THE SPACING STEPS. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* THE SHAPES: cards and controls on the document pages, pills for chips. */
  --r-card: 10px; --r-ctl: 8px; --r-pill: 999px;
  /* B87 (desktop audit item 10): THE TWO PAGE WIDTHS. Every document page reads --page-doc
     (base.html); a page that must run the full width (the options chain) reads --page-wide. */
  --page-doc: 1240px; --page-wide: none;
  /* Tinted fills for status, all at low alpha so text stays readable. */
  --ok-bg: color-mix(in srgb, var(--up) 12%, transparent);
  --arm-bg: color-mix(in srgb, var(--warn) 12%, transparent);
  --bad-bg: color-mix(in srgb, var(--down) 12%, transparent);
  --halt-bg: color-mix(in srgb, var(--halt) 12%, transparent);
  --info-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --idle-bg: color-mix(in srgb, var(--muted) 18%, transparent);

  --ink: var(--ground); --chip: var(--panel2);
  --long: var(--green); --short: var(--loss);
}
/* DOVE (R31 B50, Kevin 2026-10-02, round6/mockups/mist_darker.html option 3): medium gray
   panels with dark text, the darkest light option, Ember kept for fills. THE DEFAULT since
   B50 (settings.IKEDIG_THEME "dove"); Mist is the :root set above and stays one setting away.
   --accent-ink is the darker Ember that reads at 4.5:1 on the panel and the card
   (floor/tests_b50_polish.py checks every pair). */
/* R31 B96 (W1, the round 4 frames Kevin approved 2026-10-06): the light Dove ground of the
   frames (Round 4/scripts/r4_base.py): a Light Gray page, white panels and cards, Dove
   hairlines, Ink text, slate labels. Ember, the money colours and the halt violet are unchanged. */
html[data-theme="dove"] {
  --bg: #f2f2f2; --panel: #ffffff; --card: #ffffff; --line: #c9cdd3; --line2: #b3b9c1;
  --text: #0d1014; --muted: #5b6573; --dim: #5b6573; --accent: #c2410c; --on-accent: #ffffff;
  --band: #e9ebee; --line-soft: #e3e5e8;
  --accent-ink: #853012;
  --up: #03603f; --down: #a3102f; --warn: #36414f; --halt: #6b21a8;
  --shadow: 0 6px 24px rgba(0, 0, 0, .22); --drawer-edge: -8px 0 24px rgba(0, 0, 0, .24);
  color-scheme: light;
}
/* THE OTHER FIVE SCHEMES, each a complete set. --chart-* is not here on purpose. The old
   brand colours may appear inside these blocks and nowhere else (floor/tests_b47_brand.py). */
html[data-theme="graphite"] {
  --bg: #0f1114; --panel: #16191e; --card: #1e2228; --line: #2b3038; --line2: #3a414b;
  --text: #e9ecef; --muted: #9aa1ab; --dim: #7d8590; --accent: #0095da; --on-accent: #ffffff;
  --up: #00B67A; --down: #f05264; --warn: #ffcb05; --halt: #ff00ff;
  --shadow: 0 6px 24px rgba(0, 0, 0, .5); --drawer-edge: -8px 0 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
html[data-theme="navy"] {
  --bg: #070a1f; --panel: #0b0f2a; --card: #11163a; --line: #1f2650; --line2: #2a3268;
  --text: #e8ecf8; --muted: #9aa3c7; --dim: #7a83ad; --accent: #0095da; --on-accent: #ffffff;
  --up: #00B67A; --down: #ff5a6a; --warn: #ffcb05; --halt: #ff00ff;
  --shadow: 0 6px 24px rgba(0, 0, 0, .5); --drawer-edge: -8px 0 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
html[data-theme="teal"] {
  --bg: #071214; --panel: #0c1b1e; --card: #122629; --line: #1d3a3e; --line2: #27494e;
  --text: #e6f2f0; --muted: #8fb0ab; --dim: #6f918c; --accent: #00B67A; --on-accent: #04140f;
  --up: #2fd39a; --down: #ff6b6b; --warn: #ffcb05; --halt: #ff00ff;
  --shadow: 0 6px 24px rgba(0, 0, 0, .5); --drawer-edge: -8px 0 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f2f2f2; --panel: #ffffff; --card: #f7f8fb; --line: #d9dce4; --line2: #c4c9d6;
  --text: #10132e; --muted: #5d6280; --dim: #7b8099; --accent: #0007aa; --on-accent: #ffffff;
  --up: #00875a; --down: #d1243a; --warn: #b98a00; --halt: #a21caf;
  color-scheme: light;
}
html[data-theme="gold"] {
  --bg: #000000; --panel: #0a0a0a; --card: #141414; --line: #2a2a2a; --line2: #383838;
  --text: #f2f2f2; --muted: #a3a3a3; --dim: #8a8a8a; --accent: #ffcb05; --on-accent: #000000;
  --up: #00B67A; --down: #ff4d6d; --warn: #ff00ff; --halt: #ff00ff;
  --shadow: 0 6px 24px rgba(0, 0, 0, .5); --drawer-edge: -8px 0 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
html[data-theme="graphite"], html[data-theme="navy"], html[data-theme="teal"], html[data-theme="gold"] {
  --ext: var(--chart-blue);
}
/* R31 B119 part 6: the line since the last close, blue with a dot before its word. */
.home-ext.n { color: var(--ext); }
.home-ext::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: currentColor; vertical-align: 1px; }

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
html { scrollbar-color: var(--line2) var(--bg); }
* { scrollbar-width: thin; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font: 13px/1.45 var(--font); font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* The document pages read at 14px; the desk page keeps its dense 13px. */
body.railed { font-size: var(--fs-md); line-height: 1.5; }
h1, h2, h3, h4, h5, .brand { font-family: var(--font); }
h1 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
h2 { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
body.railed h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; }
body.railed h2 { font-size: var(--fs-lg); margin: 22px 0 10px; }
body.railed h3 { font-size: var(--fs-md); font-weight: 700; margin: 14px 0 6px; }
/* One family everywhere. .mono stays as a class name because markup and
   scripts carry it; it means "digits line up", which tabular numerals do. */
.mono, code, pre, kbd { font-family: var(--font); font-variant-numeric: tabular-nums; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
/* B87 (desktop audit item 16): the one visible focus ring, so keyboard use can be seen. */
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); }
p { margin: 0 0 .6em; }

input, select, textarea {
  background: var(--ground); color: var(--text); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 6px 8px; font: 13px var(--font);
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--cyan); outline-offset: -1px; }
button, .btn {
  background: none; color: var(--muted); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 5px 10px; cursor: pointer;
  font: 600 12px var(--font);
}
button:hover, .btn:hover { color: var(--text); border-color: var(--muted); text-decoration: none; }
/* B47: the on-accent ink on the accent fill (white on Ember reads at 5.2:1). */
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
button[disabled] { opacity: .45; cursor: not-allowed; }
/* R24b: the hidden attribute always wins over a display rule above (the Account page's
   Turn on / Turn off notifications pair showed both at once). */
[hidden] { display: none !important; }
/* On the document pages controls are calmer and easier to hit. */
body.railed input, body.railed select, body.railed textarea {
  border-radius: var(--r-ctl); padding: 8px 10px; font-size: var(--fs-md); min-height: 40px;
}
body.railed button, body.railed .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 6px 14px; border-radius: var(--r-ctl);
  font-size: var(--fs-sm); color: var(--text); background: var(--panel2);
}
body.railed button:hover, body.railed .btn:hover { border-color: var(--cyan); background: var(--panel2); }
body.railed button.primary, body.railed .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
body.railed .btn.block, body.railed button.block { display: flex; width: 100%; }
body.railed .btn.quiet, body.railed button.quiet { background: none; color: var(--muted); }

table { border-collapse: collapse; }
th {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); text-align: left; font-weight: 700;
}
body.railed th { font-size: var(--fs-xs); letter-spacing: .02em; text-transform: none; color: var(--muted); }

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.up { color: var(--green); } .dn { color: var(--loss); }
.err { color: var(--loss); }

/* ------------------------------------------------------------ THE BRAND LINE
   One 3px line in the accent, first thing on every page (R31 B47; the four-colour
   bar is retired). In normal flow, so it scrolls away with the page. */
.brandline { height: 3px; background: var(--accent); }

/* THE LOCKUP (round 3, Signal Ring; R31 B47): Charlie's ring badge, then the lowercase
   name in the body face at 800, "ike" in the text colour and "digs" in the accent, with
   the account mode as a small tag beside it. The badge is an SVG, so it is sharp at any
   pixel density. */
.lockup { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.lockup:hover { text-decoration: none; }
.lockup img { display: block; width: 28px; height: 28px; }
.wordmark { font: 800 16px var(--font); letter-spacing: -.01em; color: var(--text); }
.wordmark b { color: var(--accent-ink); }
.wordmark small, .papertag {
  font-weight: 600; color: var(--muted); font-size: 10px; letter-spacing: .08em;
  margin-left: 8px;
}
/* R18a: several desks inside ONE account (desks/one_account.py). Rendered only then. */
.onepill {
  font-weight: 700; color: var(--cyan); font-size: 10px; letter-spacing: .04em;
  margin-left: 6px; padding: 1px 6px; border: 1px solid var(--cyan); border-radius: 9px;
  white-space: nowrap;
}

/* --------------------------------------------------------------- STATUS TEXT
   Status is small caps text coloured by what it means. No stripes. */
.s { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.s.ok { color: var(--green); } .s.arm { color: var(--gold); }
.s.halt { color: var(--halt); } .s.idle { color: var(--dim); }
.s.bad { color: var(--loss); }
.s.info { color: var(--cyan); }
body.railed .s { font-size: var(--fs-xs); letter-spacing: .03em; }

/* THE STATUS CHIP (R23u): the same five meanings as a small pill with a tint,
   for a card head or a row end. <span class="chip ok">ok</span> */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 1px 9px;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 1.2;
  white-space: nowrap; color: var(--muted); background: var(--idle-bg); border: 1px solid transparent;
}
.chip.ok { color: var(--green); background: var(--ok-bg); }
.chip.arm { color: var(--gold); background: var(--arm-bg); }
.chip.bad { color: var(--loss); background: var(--bad-bg); }
.chip.halt { color: var(--halt); background: var(--halt-bg); }
.chip.info { color: var(--cyan); background: var(--info-bg); }
.chip.idle { color: var(--muted); background: var(--idle-bg); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip.plain::before { content: none; }

/* THE DOT (R23u): a status light before a sentence. */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.ok, .dot.green { background: var(--green); }
.dot.arm, .dot.amber { background: var(--gold); }
.dot.bad, .dot.red { background: var(--loss); }
.dot.halt { background: var(--halt); }
.dotline { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.dotline .dot { margin-top: 7px; }
.dotline > p, .dotline > span { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dotline + .dotline { border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------- CARDS
   .panel is the old name and keeps its zero padding (pages with a caption
   bar rely on it). .card is the same box with padding and a head. */
.panel { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-card); }
.card { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-card); padding: 14px 16px; margin: 0 0 12px; overflow-wrap: anywhere; }
.card > :last-child { margin-bottom: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 8px; }
.card-h h2, .card-h h3, .card-h .card-t { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.card-h .card-sub { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.card.tone-ok { border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.card.tone-arm { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.card.tone-bad { border-color: color-mix(in srgb, var(--down) 55%, transparent); }
/* THE CAPTION BAR the older pages draw inside a .panel (scoreboard, home). */
.ph { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 10px 16px;
      border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text); font-weight: 700; }
.ph em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }

/* THE PAGE HEAD: the title, one plain sentence, and a small meta line. */
.pagehead { margin: 0 0 16px; }
.pagehead h1 { margin: 0; }
.pagehead .lede { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-md); max-width: 44rem; }
.pagehead .meta { margin: 6px 0 0; color: var(--dim); font-size: var(--fs-xs); }
.pagehead .crumb { font-size: var(--fs-sm); margin: 0 0 6px; }

/* THE VERDICT LINE: one sentence that answers the page's question. */
.verdict { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 12px;
           border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-card);
           background: var(--panel); font-size: var(--fs-lg); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.verdict.ok { border-left-color: var(--green); }
.verdict.arm { border-left-color: var(--gold); }
.verdict.bad { border-left-color: var(--loss); }
.verdict.info { border-left-color: var(--cyan); }
.verdict.idle { border-left-color: var(--dim); color: var(--muted); }
.verdict small, .verdict .sub { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 400; margin-top: 2px; }

/* THE STAT TILE: a label, the big number, one short sentence. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 12px; }
.stat { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-card); padding: 12px 14px; min-width: 0; }
.stat .k { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.stat .v { display: block; font-size: var(--fs-2xl); font-weight: 800; line-height: 1.15; margin: 2px 0; letter-spacing: -.01em; overflow-wrap: anywhere; }
.stat .v.up { color: var(--green); } .stat .v.dn { color: var(--loss); }
.stat .t { display: block; font-size: var(--fs-sm); color: var(--muted); }
.stat.big .v { font-size: var(--fs-3xl); }

/* KEY / VALUE ROWS inside a card. */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.kv:first-child, .card-h + .kv, .kvs > .kv:first-child { border-top: 0; }
.kv .k { color: var(--muted); font-size: var(--fs-sm); flex: 1 1 auto; min-width: 0; }
.kv .v { font-weight: 600; text-align: right; flex: 0 1 auto; overflow-wrap: anywhere; }
.kv .v.up { color: var(--green); } .kv .v.dn { color: var(--loss); }

/* THE HELP LINE: what a number means, in plain words, under it. */
.help { font-size: var(--fs-sm); color: var(--muted); margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--line2); }
details.help { padding: 0; border: 0; }
details.help summary { list-style: none; cursor: pointer; color: var(--cyan); font-size: var(--fs-sm); padding: 6px 0; min-height: 32px; display: flex; align-items: center; gap: 6px; }
details.help summary::-webkit-details-marker { display: none; }
details.help summary::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--cyan); font-size: 11px; font-weight: 700; }
details.help[open] summary::before { content: "\2212"; }
details.help .body { padding: 4px 0 6px 10px; border-left: 2px solid var(--line2); font-size: var(--fs-sm); color: var(--muted); }
.term { border-bottom: 1px dotted var(--dim); cursor: help; text-decoration: none; }
.note { font-size: var(--fs-xs); color: var(--muted); }

/* THE EMPTY STATE: calm, never red. */
.empty { padding: 14px 16px; color: var(--muted); border: 1px dashed var(--line2); border-radius: var(--r-card); font-size: var(--fs-md); }

/* FILTER CHIPS: a row of pills, the chosen one filled. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center; }
.chips a, .chips button { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px;
  border: 1px solid var(--line2); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted); background: var(--panel); text-decoration: none; }
.chips a:hover, .chips button:hover { border-color: var(--cyan); color: var(--text); }
.chips a.on, .chips button.on, .chips [aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chips .sep { color: var(--dim); }

/* A GRID OF CARDS. */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0 0 12px; }
.grid > .card { margin: 0; }
.stack > * + * { margin-top: 12px; }

/* THE DOCUMENT PAGES' PLAIN TABLE. Reports, the Lab and the desk pages all
   mark their tables .lab; it is a hairline panel table here, once. */
table.lab { width: 100%; border: 1px solid var(--line); background: var(--panel); }
table.lab th, table.lab td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.lab tr:last-child td { border-bottom: 0; }
table.lab td.n, table.lab th.n { text-align: right; font-variant-numeric: tabular-nums; }
body.railed table.lab { border-radius: var(--r-card); overflow: hidden; border-collapse: separate; border-spacing: 0; }
body.railed table.lab th { background: var(--panel2); padding: 8px 12px; }
body.railed table.lab th, body.railed table.lab td { padding: 9px 12px; vertical-align: top; }
.tablewrap { overflow-x: auto; }
body.railed .tablewrap { border-radius: var(--r-card); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* R23u: page changes crossfade like an app (Safari 18.2+, Chrome 126+; ignored elsewhere). */
@view-transition { navigation: auto; }

/* ------------------------------------------------------- TABLES AS CARDS
   Under 600px (round 4, item 1) a wide table inside a .cardsy block becomes
   one card per row: the header row goes, each cell is a label and a value
   on one line, the label from the cell's own data-label. A cell with no
   label keeps its value alone. The Desks table, the journal, the trades and
   the reports tables carry the markup; a table that lacks data-label keeps
   scrolling in its .tablewrap instead. */
@media (max-width: 600px) {
  .cardsy table, .cardsy tbody, .cardsy tr, .cardsy td { display: block; }
  .cardsy thead { display: none; }
  /* The reports and bot-notes tables write their header as a plain row. */
  .cardsy tr:has(th) { display: none; }
  .cardsy table { border: 0; background: none; }
  .cardsy tr { border: 1px solid var(--line); background: var(--panel); padding: 8px 14px; margin-bottom: 8px; border-radius: var(--r-card); }
  .cardsy tr:last-child td { border-bottom: 0; }
  .cardsy td, .cardsy table.lab td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 5px 0; border: 0; text-align: right; white-space: normal; }
  .cardsy td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600;
    letter-spacing: 0; text-transform: none; flex: 0 0 auto; text-align: left; }
  .cardsy td:not([data-label])::before { content: none; }
  .cardsy td.n { text-align: right; }
  .cardsy .tablewrap { overflow: visible; border-radius: 0; }
  /* The first cell of a card is its title: the symbol, the name, the date. */
  .cardsy td.who, .cardsy td:first-child { font-weight: 700; font-size: var(--fs-md); }
  .grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ PHONES
   Under 640px (Kevin's phone, round 3): every control is at least 44px tall so
   a thumb can hit it, inputs sit at 16px so iOS does not zoom the page on
   focus, and the document pages keep a 12px gutter. Tables scroll inside
   .tablewrap; the page itself never scrolls sideways. */
@media (max-width: 640px) {
  button, .btn { min-height: 44px; padding: 8px 12px; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
  input[type=checkbox], input[type=radio] { min-height: 0; width: 24px; height: 24px; }
  table.lab th, table.lab td { padding: 8px 10px; }
  /* Nothing reads under 12px on a phone (round 4). */
  th, .s, .papertag, .wordmark small { font-size: 12px; }
  .lockup { min-height: 40px; }
  summary { min-height: 40px; display: flex; align-items: center; }
  /* A wrapped table scrolls sideways rather than folding every cell into a
     tall stack of two-word lines. */
  .tablewrap th, .tablewrap td { white-space: nowrap; }
  .card { padding: 12px 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .v { font-size: 24px; }
  .stat.big .v { font-size: var(--fs-2xl); }
  .verdict { font-size: var(--fs-md); }
  body.railed h1 { font-size: 22px; }
  .chips a, .chips button { min-height: 40px; }
}