/* ============================================================================
   THE CRAINUM — Rob.ot's interface vocabulary.
   Guide: docs/superpowers/specs/2026-08-13-the-crainum-style-guide.md
   Enforcer: tools/crainum_lint.py  (this is the ONE file allowed raw values)

   Every number here is a floor with a receipt in §3 of the guide, not a taste.
   Screens use these names. Screens never type numbers.
   ========================================================================= */

:root {
  /* ── Type ──────────────────────────────────────────────────────────────
     18px default for client seats, 16px absolute floor (guide §3, Rob 8/13).
     Size is a first-class user setting: --crn-type-scale is the dial — since
     the walked review (guide §6, Q1 rider) it is a VISIBLE control, the
     A− / A / A+ group in the chrome (base_crainum.html), steps 0.89/1/1.11.
     Everything below is relative to it, so one change moves every screen.
     The A− step lands the 18px body exactly on the floor (0.89 × 18 =
     16.02px); the 16px steps are CLAMPED because 16 × 0.89 would land under
     it — the floor binds every size, not just the body. */
  --crn-type-scale: 1;
  --crn-text: calc(18px * var(--crn-type-scale));   /* body — the default    */
  --crn-text-lg: calc(21px * var(--crn-type-scale)); /* lead-in, card stake  */
  --crn-text-xl: calc(26px * var(--crn-type-scale)); /* the question itself  */
  --crn-text-sm: max(16px, calc(16px * var(--crn-type-scale))); /* receipt line — FLOOR */

  /* No step below --crn-text-sm exists, by design. If a surface needs
     smaller, the surface is too dense — that is the bug, not the size. */

  --crn-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --crn-font-doc: Georgia, "Times New Roman", serif;  /* INSIDE the document viewer only,
                                                         where the client's own file rules */
  --crn-weight: 400;        /* floor — thin strokes lose aging eyes          */
  --crn-weight-strong: 600;
  --crn-leading: 1.5;
  --crn-measure: 62ch;      /* 50-65ch line length                            */

  /* ── Colour — light only on client seats (guide §3, Rob 8/13) ───────────
     Contrast is asserted here and PROVEN by the enforcer, which computes the
     real ratios from these values. No green light without a probe. */
  /* ── Rob's palette, adopted 2026-08-13 from the Audit Workspace mockup ──
     These values are the FOUNDER's, not a house default. The enforcer does not
     care whose taste the numbers are — only that screens reference tokens and
     that the floors hold. Measured on adoption: ink 14.7:1 on the page,
     13.6:1 on a card. Source: design/2026-08-13-audit-workspace/. */
  --crn-bg: #f3f2f2;        /* the page — warm grey; pure white glares        */
  --crn-surface: #eae9e9;   /* chrome and raised panels (his "surface")       */
  --crn-paper: #ffffff;     /* the GRID and document faces — the client's own
                               page is white, and it should look like paper   */
  --crn-ink: #201f1d;       /* body text — 14.7:1 on the page                 */
  --crn-ink-muted: #454545; /* secondary                                      */
  --crn-ink-quiet: #5e5e5e; /* receipt lines — still above the floor          */

  /* THE GOLD, IN TWO PARTS — and the split is the whole point.
     Rob's #b68235 is beautiful as an edge and fails as text: measured 3.0:1 on
     the page, 2.8:1 on a card, against a 4.5:1 floor for text and 3.0:1 for a
     UI edge. So the exact value he designed is KEPT wherever it is a border,
     a rule, or a fill, and a darkened sibling carries it wherever it is a word.
     Nothing about the design's character changes; the link text stops being
     unreadable to the eyes it was drawn for. */
  --crn-accent: #b68235;      /* edges, rules, fills, the 11px top border     */
  --crn-accent-text: #85591b; /* the same gold AS TEXT — 5.5:1 page, 5.0:1 card */
  --crn-line: #d6d3cc;       /* hairline separators — decorative, not a control edge */
  --crn-line-strong: #857f72; /* control borders — must clear 3:1 on BOTH backgrounds.
                                 The enforcer caught #b4b0a7 here at 2.2:1 on 2026-08-13;
                                 a border a younger eye reads as "refined" is one an
                                 older eye does not see at all. */

  /* State colours. Meaning NEVER rides on colour alone — every state ships a
     word and a shape too (guide §3: blue/green and blue/purple fail first). */
  --crn-attention: #a02c22;  /* needs your eyes                               */
  --crn-attention-bg: #fdf3f2;
  --crn-settled: #1c6236;    /* read, recomputed, holds                       */
  --crn-settled-bg: #f1f8f3;
  --crn-waiting: #6b4a00;    /* not confident / pending                       */
  --crn-waiting-bg: #fdf8ec;

  --crn-focus: #1a4fa0;      /* focus ring only — never a meaning colour      */

  /* ── Space — roomy by default, user-tightenable (guide §3, Rob 8/13) ────
     --crn-density is the dial a heavy reviewer turns down himself. The
     FLOORS below do not move with it; only air does. */
  --crn-density: 1;
  --crn-space-1: calc(6px * var(--crn-density));
  --crn-space-2: calc(12px * var(--crn-density));
  --crn-space-3: calc(20px * var(--crn-density));
  --crn-space-4: calc(32px * var(--crn-density));
  --crn-space-5: calc(52px * var(--crn-density));

  /* ── Targets — floors, immune to the density dial ───────────────────── */
  --crn-target: 44px;        /* Apple HIG / WCAG 2.5.5 minimum                */
  --crn-target-gap: 12px;    /* spacing matters as much as size               */
  --crn-radius: 10px;
  --crn-focus-ring: 3px;

  /* ── Overlay tint — the glow on the page image (report screen) ─────────
     The one translucent value in the vocabulary: --crn-attention (#a02c22)
     at low alpha, laid OVER the client's own page pixels. Never used for
     text, so no contrast pair applies; the meaning is carried by the 3px
     attention outline around it and the words in the finding it came from. */
  --crn-highlight-tint: rgba(160, 44, 34, 0.16);

  /* ── The audit workspace: type scale and targets ────────────────────────
     Sizes only. The workspace's PALETTE, spacing, radius, shadow and typeface
     come from Rob's own _ds/classical vocabulary, transcribed below the
     :root block and scoped to .crn-ws.

     TYPE. The guide's binding split (§3, corrected 2026-08-13) is: "prose and
     chrome keep the 16px floor. The grid follows spreadsheet convention —
     denser default, user-set... Zoom is the control." Rob's _ds runs 11-15px
     chrome. Holding the 16px floor is the one standing deviation, adjudicated
     2026-08-14 and carried as an OPEN QUESTION for him. Reversal is one line:
     point --crn-ws-chrome-text at 14px and --crn-ws-fine-text at 12px. */
  --crn-ws-zoom: 1;
  --crn-ws-grid-text: max(16px, calc(16px * var(--crn-ws-zoom)));
  --crn-ws-chrome-text: var(--crn-text-sm);
  --crn-ws-fine-text: var(--crn-text-sm);
  --crn-ws-row-height: max(46px, calc(46px * var(--crn-ws-zoom)));
  --crn-ws-gutter: 52px;

  /* TARGETS. The guide's other split: decision controls (anything recording a
     judgment) stay >=44px; dense tool controls may go to 24px. */
  --crn-ws-tool-target: 28px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ROB'S _ds/classical VOCABULARY — the workspace's single style source.

   Transcribed verbatim from the mockup package,
   docs/design/2026-08-14-beaumont-audit-workspace/_ds/classical-e04f90d0/styles.css,
   and SCOPED TO .crn-ws so it cannot reach any other screen. John's drop,
   history, queue and report screens are untouched by every line below.

   His token NAMES are kept, not translated, so the workspace CSS reads as a
   transcription of his design rather than an interpretation of it — and so
   markup ported from the mockup later lands on the vocabulary it was drawn
   against.

   Adopted 2026-08-14 after Rob's first drive: the deployed page wore system
   type and plain chrome instead of this. The warm paper feel is the product
   strategy (familiar surfaces borrow trust), not decoration.

   On the gold: --color-accent is 3.02:1 on the page — an EDGE colour, and it
   is only ever used here as a border, ring or fill. Gold that carries TEXT
   uses his darker ramp steps, which is what his own markup does:
   accent-700 5.97:1, accent-800 9.10:1, accent-900 12.73:1 (all measured, on
   his --color-bg). So his palette clears the floor without being altered.

   Scoped to .crn-ws-page — a class only the workspace document carries — so
   everything inside it (including chrome that sits outside the grid element)
   inherits the vocabulary, and nothing outside it can see these names.
   ══════════════════════════════════════════════════════════════════════════ */
.crn-ws-page {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* The four tickmarks. Contract rule 4: every mark carries a WORD; colour is
     only ever the second signal. Fills are Rob's ramp; the inks are the ramp
     steps that clear 4.5:1 on those fills. */
  --mark-open-bg: var(--color-accent-200);
  --mark-open-ink: var(--color-accent-900);
  --mark-agreed-bg: oklch(0.9 0.055 148);
  --mark-agreed-ink: oklch(0.42 0.09 148);
  --mark-scope-bg: var(--color-neutral-200);
  --mark-scope-ink: var(--color-neutral-800);
  --edited-bg: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --negative-ink: oklch(0.5 0.17 27);
}

/* ── The typeface, SELF-HOSTED ─────────────────────────────────────────────
   Rob's design is Cormorant Garamond (headings) over Lora (body). The first
   build dropped both for system type to avoid making a client firm's browser
   call fonts.googleapis.com from an audit surface — a real privacy rail, but
   a false dichotomy: the third option is to serve the files ourselves.

   Both families are SIL Open Font License 1.1, which permits redistribution;
   the licences ship beside the files in static/fonts/. Variable fonts, so one
   file per family per subset covers 400 and 600 — 4 files, 126 KB total, and
   nothing is fetched until a page actually uses the family, so no screen but
   the workspace pays for them. Zero third-party requests. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/lora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* A heavy reviewer tightens his own room; the floors above still bind. */
[data-crn-density="tight"] { --crn-density: 0.7; }
[data-crn-density="roomy"] { --crn-density: 1; }

/* ── Base ────────────────────────────────────────────────────────────────── */
body.crn {
  background: var(--crn-bg);
  color: var(--crn-ink);
  font-family: var(--crn-font);
  font-size: var(--crn-text);
  font-weight: var(--crn-weight);
  line-height: var(--crn-leading);
  margin: 0;
  text-align: left;              /* never justified — ragged right reads faster */
}

.crn p, .crn li { max-width: var(--crn-measure); }

/* Focus must be loud. A faint ring is no ring for an aging eye. */
.crn :focus-visible {
  outline: var(--crn-focus-ring) solid var(--crn-focus);
  outline-offset: 2px;
}

/* Nothing is revealed by hovering — hover may only emphasise what is already
   visible, because hover does not exist on touch and cannot be reached by
   keyboard (guide §3). */
.crn a:hover, .crn button:hover { filter: brightness(0.96); }
.crn a:focus-visible, .crn button:focus-visible { filter: brightness(0.96); }

/* ── Buttons — the decision returns here ─────────────────────────────────── */
.crn-btn {
  font-family: inherit;
  font-size: var(--crn-text);
  font-weight: var(--crn-weight-strong);
  min-height: var(--crn-target);
  min-width: var(--crn-target);
  padding: var(--crn-space-2) var(--crn-space-3);
  margin-right: var(--crn-target-gap);
  border: 2px solid var(--crn-line-strong);
  border-radius: var(--crn-radius);
  background: var(--crn-surface);
  color: var(--crn-ink);
  cursor: pointer;
}
.crn-btn--primary { border-color: var(--crn-ink); }
.crn-btn-row { display: flex; flex-wrap: wrap; gap: var(--crn-target-gap); }
/* a link wearing the button shape (the export doors): same floor, no underline
   — the border is the affordance here, exactly as on the buttons beside it */
a.crn-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* ── THE ROUND-TRIP DOORS — every document screen carries its exits ─────── */
.report-exports { display: flex; flex-wrap: wrap; gap: var(--crn-target-gap);
                  margin-bottom: var(--crn-space-2); }

/* ── THE WALKED QUEUE — the daily front door ─────────────────────────────
   Opens with a count and an invitation, presents ONE item, keeps position
   visible, and always offers the door to the full list. */
.crn-walk { max-width: 76ch; margin: 0 auto; padding: var(--crn-space-4); }
.crn-walk__invite { font-size: var(--crn-text-lg); margin-bottom: var(--crn-space-3); }
.crn-walk__position { font-size: var(--crn-text-sm); color: var(--crn-ink-muted); }
.crn-walk__escape { font-size: var(--crn-text-sm); margin-left: var(--crn-space-3); }
.crn-walk__done { font-size: var(--crn-text-xl); padding: var(--crn-space-5) 0; }

/* ── THE DECISION CARD — the one shape every judgment arrives in ──────────
   Question top-left in plain words, stake under it, proposal labelled as a
   proposal, evidence to the right, decision returns bottom-left. */
.crn-card {
  background: var(--crn-surface);
  border: 1px solid var(--crn-line);
  border-left: 5px solid var(--crn-line-strong);
  border-radius: var(--crn-radius);
  padding: var(--crn-space-4);
  margin-bottom: var(--crn-space-4);
}
.crn-card--attention { border-left-color: var(--crn-attention); }
.crn-card--settled   { border-left-color: var(--crn-settled); }
.crn-card--waiting   { border-left-color: var(--crn-waiting); }

.crn-card__question { font-size: var(--crn-text-xl); font-weight: var(--crn-weight-strong);
                      margin: 0 0 var(--crn-space-2); }
.crn-card__stake    { font-size: var(--crn-text-lg); margin: 0 0 var(--crn-space-3); }
.crn-card__proposal { background: var(--crn-bg); border: 1px solid var(--crn-line);
                      border-radius: var(--crn-radius); padding: var(--crn-space-3);
                      margin-bottom: var(--crn-space-3); }
.crn-card__proposal-label { font-size: var(--crn-text-sm); color: var(--crn-ink-muted);
                            display: block; margin-bottom: var(--crn-space-1); }

/* The receipt: which check, which version, as of when. Small but always present,
   never below the floor. */
.crn-receipt { font-size: var(--crn-text-sm); color: var(--crn-ink-quiet);
               margin-top: var(--crn-space-3); }

/* State chips ALWAYS carry a word — the colour is the second signal, never the
   only one. */
.crn-state {
  display: inline-block; font-size: var(--crn-text-sm); font-weight: var(--crn-weight-strong);
  padding: var(--crn-space-1) var(--crn-space-2); border-radius: var(--crn-radius);
  border: 2px solid currentColor;
}
.crn-state--attention { color: var(--crn-attention); background: var(--crn-attention-bg); }
.crn-state--settled   { color: var(--crn-settled);   background: var(--crn-settled-bg); }
.crn-state--waiting   { color: var(--crn-waiting);   background: var(--crn-waiting-bg); }

/* ── THE SPLIT WORKSPACE — judgment left, evidence right ─────────────────
   The left pane never scrolls away from the question; the right never steals
   focus. Collapses to one column on narrow screens and at high zoom, which is
   the same code path — reflow at 320px is a floor, not a phone feature. */
.crn-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
             gap: var(--crn-space-4); align-items: start; }
.crn-split__judgment { position: sticky; top: var(--crn-space-3); }
.crn-split__evidence { overflow-x: auto; }
@media (max-width: 1100px) { .crn-split { grid-template-columns: 1fr; }
                             .crn-split__judgment { position: static; } }

/* Inside the evidence pane the client's own document rules — serif is allowed
   here and nowhere else in the chrome. */
.crn-doc { font-family: var(--crn-font-doc); background: var(--crn-paper);
           border: 1px solid var(--crn-line); padding: var(--crn-space-3); }

/* ── THE TRUST PANEL — every line is an instrument reading ──────────────── */
.crn-trust__row { display: flex; justify-content: space-between; gap: var(--crn-space-3);
                  padding: var(--crn-space-2) 0; border-bottom: 1px solid var(--crn-line); }
.crn-trust__asof { font-size: var(--crn-text-sm); color: var(--crn-ink-quiet); }

/* ── MESSAGE-ON-ITEM — the margin note the profession has used for 30 years */
.crn-note { border-left: 3px solid var(--crn-line-strong); background: var(--crn-bg);
            padding: var(--crn-space-2) var(--crn-space-3); margin: var(--crn-space-2) 0; }
.crn-note__who { font-size: var(--crn-text-sm); color: var(--crn-ink-muted); }

/* ── THE "SHOW ME THE DETAILS" DOOR ──────────────────────────────────────
   One door, one level deep, identically worded and placed on every surface.
   Nothing a decision depends on is allowed to hide behind it. */
.crn-door > summary {
  font-size: var(--crn-text); font-weight: var(--crn-weight-strong);
  min-height: var(--crn-target); display: flex; align-items: center;
  cursor: pointer; color: var(--crn-ink-muted);
}
.crn-door__body { padding: var(--crn-space-3); background: var(--crn-bg);
                  border: 1px solid var(--crn-line); border-radius: var(--crn-radius); }

/* ── Tables — wide content scrolls in its own box, never the page ───────── */
.crn-table-wrap { overflow-x: auto; }
.crn-table { border-collapse: collapse; font-size: var(--crn-text); }
.crn-table th, .crn-table td { padding: var(--crn-space-2) var(--crn-space-3);
                               border-bottom: 1px solid var(--crn-line); text-align: left; }
.crn-table th { font-weight: var(--crn-weight-strong); }

/* THE DEAD CLICK (John-seat drive, 2026-08-14 — his FIRST action in the app
   silently failed). A document name that wraps to two lines is an INLINE box,
   so the gap between the two line boxes belongs to the cell, not the link:
   a click landing there hits nothing. Verified twice on /drop.

   The link becomes a block and takes the cell's padding as its own, so the
   whole cell is the target — no interior gap, and no dead margin around the
   words either. :only-child keeps this to cells whose entire content IS the
   link (drop, history, operator), so a cell mixing text and a link is
   untouched. */
.crn-table td > a:only-child {
  display: block;
  margin: calc(var(--crn-space-2) * -1) calc(var(--crn-space-3) * -1);
  padding: var(--crn-space-2) var(--crn-space-3);
}

/* ── Motion: respect the system setting, always ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .crn *, .crn *::before, .crn *::after {
    animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLIENT-SEAT VOCABULARY, PART TWO — added 2026-08-13 when the four client
   screens (drop, report, queue, history) were converted to the guide.
   Same law as above: raw values live HERE and only here; screens speak in
   these class names. Where a class name is not crn-prefixed it is a
   JS-contract hook (chat.js / arbitration.js bind to it) — the NAME is
   frozen by the scripts, the LOOK is defined here.
   ═════════════════════════════════════════════════════════════════════════ */

/* The hidden attribute always wins. chat.js and arbitration.js toggle
   [hidden] to run the page; a display rule that out-specifies it would
   silently break the machinery (the old stylesheet learned this on
   .arb-reveal). One guard, globally. */
.crn [hidden] { display: none !important; }

/* Links: dark ink with a visible underline — the affordance is a shape,
   never a colour (guide §3: meaning never rides on colour alone). */
.crn a { color: var(--crn-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Screen-reader-only, still focusable (the drop screen's file input). */
.crn-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── THE LIGHT CHROME — header, nav, footer for every client seat ─────────
   Navigation sits in the same order on every screen (WCAG 3.2.3); the
   current page is marked by weight and an underline, not colour alone. */
.crn-chrome {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--crn-target-gap);
  padding: var(--crn-space-2) var(--crn-space-4);
  background: var(--crn-surface);
  border-bottom: 1px solid var(--crn-line);
}
.crn-chrome__wordmark {
  font-weight: var(--crn-weight-strong); letter-spacing: 0.08em;
  text-decoration: none;
  min-height: var(--crn-target); display: inline-flex; align-items: center;
}
.crn-chrome__tagline { color: var(--crn-ink-quiet); font-size: var(--crn-text-sm); }
.crn-chrome__nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--crn-space-1);
  margin-left: auto;
}
.crn-chrome__nav a {
  text-decoration: none;
  min-height: var(--crn-target); display: inline-flex; align-items: center;
  padding: 0 var(--crn-space-2); border-radius: var(--crn-radius);
}
.crn-chrome__nav a[aria-current="page"] {
  font-weight: var(--crn-weight-strong);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.crn-chrome__user { color: var(--crn-ink-muted); font-size: var(--crn-text-sm);
                    padding: 0 var(--crn-space-2); }

/* ── THE TYPE DIAL — text size as a visible control (guide §6, Q1 rider) ──
   Three worded steps, A− / A / A+, in the chrome of every client screen.
   The active step is marked by weight and a filled border, never colour
   alone; the buttons are sized OFF the type scale so the dial itself never
   shrinks out of reach at A−. */
.crn-type-dial { display: inline-flex; align-items: center; gap: var(--crn-space-1); }
.crn-type-dial__label { color: var(--crn-ink-quiet); font-size: var(--crn-text-sm);
                        padding-right: var(--crn-space-1); }
.crn-type-dial button {
  font-family: inherit; font-size: 16px; /* fixed: the dial must stay usable at A− */
  font-weight: var(--crn-weight-strong); color: var(--crn-ink);
  min-height: var(--crn-target); min-width: var(--crn-target);
  border: 2px solid var(--crn-line-strong); border-radius: var(--crn-radius);
  background: var(--crn-surface); cursor: pointer;
}
.crn-type-dial button[aria-pressed="true"] {
  border-color: var(--crn-ink); background: var(--crn-bg);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.crn-chrome__footer {
  color: var(--crn-ink-quiet); font-size: var(--crn-text-sm); text-align: center;
  padding: var(--crn-space-4); border-top: 1px solid var(--crn-line);
  margin-top: var(--crn-space-5);
}

/* ── Page shells ──────────────────────────────────────────────────────────
   .crn-walk (above) is the narrow reading room. .crn-page is the standard
   room; --wide is the report's split workspace. */
.crn-page { max-width: 84rem; margin: 0 auto; padding: var(--crn-space-4); }
.crn-page--wide { max-width: 118rem; }
.crn-title { font-size: var(--crn-text-xl); font-weight: var(--crn-weight-strong);
             margin: 0 0 var(--crn-space-2); }
.crn-lead { font-size: var(--crn-text-lg); margin: 0 0 var(--crn-space-3); }

/* Inline problem text: what happened and what to do next, in words, next to
   the thing (GOV.UK error anatomy). The colour is the second signal. */
.crn-problem { color: var(--crn-attention); font-weight: var(--crn-weight-strong); }

/* ── THE STATE BANNER — the verdict, worn where the eye lands ───────────── */
.crn-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--crn-space-3);
  background: var(--crn-surface);
  border: 1px solid var(--crn-line); border-left: 5px solid var(--crn-line-strong);
  border-radius: var(--crn-radius);
  padding: var(--crn-space-3) var(--crn-space-4);
  margin: var(--crn-space-3) 0;
}
.crn-banner--attention { border-left-color: var(--crn-attention); }
.crn-banner--settled   { border-left-color: var(--crn-settled); }
.crn-banner--waiting   { border-left-color: var(--crn-waiting); }
.crn-banner__detail { margin: 0; }

/* ── COUNTS — one compact line, never a wall of tiles (walked review 8/13:
   "It doesn't look simple") ─────────────────────────────────────────────── */
.report-counts { color: var(--crn-ink-muted); margin: var(--crn-space-2) 0; }
.report-counts strong { color: var(--crn-ink); font-weight: var(--crn-weight-strong); }
.report-counts__attention, .report-counts__attention strong { color: var(--crn-attention); }

/* ── PROGRESS — a real count, never a spinner (anti-pattern 1) ──────────── */
.crn-progress-track {
  height: var(--crn-space-2);
  background: var(--crn-surface);
  border: 1px solid var(--crn-line-strong); border-radius: var(--crn-radius);
  overflow: hidden;
  margin: var(--crn-space-2) 0;
}
.crn-progress-fill { height: 100%; background: var(--crn-waiting); }

/* ── Action rows: forms side by side, targets at the floor ──────────────── */
.crn-actions { display: flex; flex-wrap: wrap; align-items: center;
               gap: var(--crn-target-gap); margin: var(--crn-space-3) 0; }
.crn-confirm { display: inline-flex; align-items: center; gap: var(--crn-space-1);
               min-height: var(--crn-target); color: var(--crn-attention);
               font-weight: var(--crn-weight-strong); }
.crn input[type="checkbox"], .crn input[type="radio"] {
  width: var(--crn-space-3); height: var(--crn-space-3);
  accent-color: var(--crn-ink); flex-shrink: 0;
}
.crn-input {
  font-family: inherit; font-size: var(--crn-text); color: var(--crn-ink);
  min-height: var(--crn-target);
  padding: var(--crn-space-1) var(--crn-space-2);
  border: 2px solid var(--crn-line-strong); border-radius: var(--crn-radius);
  background: var(--crn-surface);
}

/* ═══ THE DROP SCREEN — the front door ═══════════════════════════════════ */
.drop-zone {
  background: var(--crn-surface);
  border: 3px dashed var(--crn-line-strong); border-radius: var(--crn-radius);
  padding: var(--crn-space-5) var(--crn-space-4);
  text-align: center;
  margin: var(--crn-space-3) 0;
}
.drop-zone:focus-within { outline: var(--crn-focus-ring) solid var(--crn-focus);
                          outline-offset: 2px; }
.drop-zone--active { border-color: var(--crn-ink); background: var(--crn-waiting-bg); }
.drop-zone-label { display: block; cursor: pointer; }
.drop-zone-text { display: inline-block; font-size: var(--crn-text-lg);
                  font-weight: var(--crn-weight-strong);
                  min-height: var(--crn-target); padding: var(--crn-space-2); }
.drop-zone--verifying .drop-zone-label { display: none; }
.drop-verifying { display: none; }
.drop-zone--verifying .drop-verifying { display: block;
                                        font-size: var(--crn-text-lg); }

/* ═══ THE REPORT — THE DOCUMENT-DOMINATES LAW (guide §6, walked 8/13) ═════
   The document IS the page: viewer RIGHT, ~2/3 of the room or more, always
   visible. Judgment, counts, receipts and Winston live in the LEFT sidebar,
   which scrolls inside itself and folds to a thin worded rail. Below 1100px
   the two stack — same code path as high zoom; reflow at 320px is a floor. */
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr);
               gap: var(--crn-space-3); align-items: start; }
.report-grid > * { min-width: 0; }
@media (min-width: 1101px) {
  .report-grid--split { grid-template-columns: minmax(19rem, 27rem) minmax(0, 1fr); }
  /* the sidebar folded to its rail: the document takes the whole room */
  .report-grid--split.report-grid--side-collapsed {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .report-grid--split .report-side {
    position: sticky; top: var(--crn-space-2);
    max-height: calc(100vh - var(--crn-space-4));
    overflow-y: auto;
  }
}
.report-side__head { display: flex; align-items: flex-start;
                     gap: var(--crn-target-gap); justify-content: space-between; }
.report-side__title { flex: 1 1 12rem; overflow-wrap: anywhere; }
.report-side__meta { margin-top: 0; }
.side-collapse {
  font-family: inherit; font-size: var(--crn-text-sm);
  font-weight: var(--crn-weight-strong); color: var(--crn-ink);
  min-height: var(--crn-target); min-width: var(--crn-target);
  padding: 0 var(--crn-space-2); flex-shrink: 0;
  border: 2px solid var(--crn-line-strong); border-radius: var(--crn-radius);
  background: var(--crn-surface); cursor: pointer;
}
/* the folded sidebar's standing handle — worded, never below a target */
.side-rail {
  font-family: inherit; font-size: var(--crn-text-sm);
  font-weight: var(--crn-weight-strong); color: var(--crn-ink);
  min-width: var(--crn-target); min-height: var(--crn-target);
  padding: var(--crn-space-3) var(--crn-space-1);
  border: 2px solid var(--crn-line-strong); border-radius: var(--crn-radius);
  background: var(--crn-surface); cursor: pointer;
  align-self: start; position: sticky; top: var(--crn-space-2);
}
.side-rail-label { writing-mode: vertical-rl; }

/* The evidence pane — the client's own page, in a frame that scrolls
   inside itself, never the whole screen. */
.page-viewer { background: var(--crn-surface); border: 1px solid var(--crn-line);
               border-radius: var(--crn-radius); padding: var(--crn-space-2); }
.page-viewer-head { display: flex; flex-wrap: wrap; align-items: center;
                    gap: var(--crn-target-gap); justify-content: space-between;
                    margin-bottom: var(--crn-space-2); }
.page-zoom, .page-viewer-nav { display: flex; flex-wrap: wrap; align-items: center;
                               gap: var(--crn-space-1); }
.page-viewer button {
  font-family: inherit; font-size: var(--crn-text-sm); color: var(--crn-ink);
  min-height: var(--crn-target); min-width: var(--crn-target);
  padding: 0 var(--crn-space-2);
  border: 2px solid var(--crn-line-strong); border-radius: var(--crn-radius);
  background: var(--crn-surface); cursor: pointer;
}
.page-viewer button:disabled { color: var(--crn-ink-quiet);
                               border-color: var(--crn-line); cursor: default; }
.page-zoom-level, .page-viewer-nav span { color: var(--crn-ink-muted);
                                          font-size: var(--crn-text-sm); }
.page-jump { display: inline-flex; align-items: center; gap: var(--crn-space-1);
             color: var(--crn-ink-muted); font-size: var(--crn-text-sm); }
.page-jump input {
  font-family: inherit; font-size: var(--crn-text); color: var(--crn-ink);
  width: 5ch; min-height: var(--crn-target);
  padding: 0 var(--crn-space-1); text-align: center;
  border: 2px solid var(--crn-line-strong); border-radius: var(--crn-radius);
  background: var(--crn-surface);
}
.page-image-scroll { overflow: auto; max-height: 76vh;
                     border: 1px solid var(--crn-line);
                     background: var(--crn-bg); }
.page-image-wrap { position: relative; width: 100%; }
.page-image-wrap img { display: block; width: 100%; }
.page-highlight-layer { position: absolute; inset: 0; pointer-events: none; }
/* chat.js positions these in percentages of the page itself */
.page-highlight { position: absolute; outline: 3px solid var(--crn-attention);
                  background: var(--crn-highlight-tint); border-radius: 2px; }
@keyframes crn-highlight-pulse {
  0%, 100% { outline-offset: 0; } 50% { outline-offset: 6px; }
}
.page-highlight--pulse { animation: crn-highlight-pulse 1.1s ease-in-out 2; }
@keyframes crn-frame-flash {
  from { border-color: var(--crn-attention); } to { border-color: var(--crn-line); }
}
.page-viewer--flash .page-image-scroll { animation: crn-frame-flash 0.9s ease-out 1; }
/* (the hide-the-page fold was retired by THE DOCUMENT-DOMINATES LAW —
   the sidebar folds now, the document never does; see .side-rail above) */

/* ── THE WORKBOOK VIEW — an Excel drop renders AS a workbook (guide §6) ───
   Tabs per sheet, a read-only grid of the stored values per tab. A
   spreadsheet is a grid, so the interface sans rules here — the serif
   allowance is for the client's own typography, and a value grid has none.
   Wide sheets scroll inside their own box, never the page. */
.crn-workbook { background: var(--crn-surface); border: 1px solid var(--crn-line);
                border-radius: var(--crn-radius); padding: var(--crn-space-2); }
.crn-sheet-tabs { display: flex; flex-wrap: wrap; gap: var(--crn-space-1);
                  margin-bottom: var(--crn-space-2); }
.crn-sheet-tab {
  font-family: inherit; font-size: var(--crn-text-sm); color: var(--crn-ink);
  min-height: var(--crn-target); min-width: var(--crn-target);
  padding: 0 var(--crn-space-2);
  border: 2px solid var(--crn-line-strong); border-radius: var(--crn-radius);
  background: var(--crn-surface); cursor: pointer;
}
.crn-sheet-tab[aria-selected="true"] {
  border-color: var(--crn-ink); background: var(--crn-bg);
  font-weight: var(--crn-weight-strong);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.crn-sheet__caps { margin: 0 0 var(--crn-space-1); }
.crn-sheet__scroll { overflow: auto; max-height: 76vh;
                     border: 1px solid var(--crn-line);
                     background: var(--crn-paper); }
.crn-sheet__table { border-collapse: collapse; font-size: var(--crn-text-sm); }
.crn-sheet__table th, .crn-sheet__table td {
  border: 1px solid var(--crn-line); background: var(--crn-paper);
  padding: var(--crn-space-1) var(--crn-space-2);
  text-align: left; white-space: nowrap; font-weight: var(--crn-weight);
}
/* the frame: column letters and row numbers, pinned while the grid scrolls */
.crn-sheet__table thead th { position: sticky; top: 0;
                             background: var(--crn-bg);
                             color: var(--crn-ink-muted); text-align: center; }
.crn-sheet__table tbody th { position: sticky; left: 0;
                             background: var(--crn-bg);
                             color: var(--crn-ink-muted); text-align: right; }
.crn-sheet__num { text-align: right; }
.crn-sheet__empty { color: var(--crn-ink-muted); }
/* the referenced cell — the exact place a receipt row is about */
.crn-sheet__hit { outline: 3px solid var(--crn-attention); outline-offset: -3px; }

/* ── The findings — every flag arrives as a decision card ───────────────── */
.review-progress { color: var(--crn-ink-muted); font-size: var(--crn-text-sm);
                   font-weight: var(--crn-weight); margin-left: var(--crn-space-2); }
.findings-list { list-style: none; margin: 0; padding: 0; }

.finding {
  background: var(--crn-surface);
  border: 1px solid var(--crn-line); border-left: 5px solid var(--crn-line-strong);
  border-radius: var(--crn-radius);
  margin-bottom: var(--crn-space-3);
}
.finding--not_confident   { border-left-color: var(--crn-waiting); }
.finding--cant_identify   { border-left-color: var(--crn-attention); }
.finding--machine_settled { border-left-color: var(--crn-waiting); }
.finding--done { border-left-color: var(--crn-settled); background: var(--crn-settled-bg); }
.finding--active { outline: 3px solid var(--crn-ink); outline-offset: 1px; }

.finding-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--crn-space-2);
  width: 100%; min-height: var(--crn-target);
  padding: var(--crn-space-2) var(--crn-space-3);
  font-family: inherit; font-size: var(--crn-text); color: var(--crn-ink);
  text-align: left; background: none; border: none; cursor: pointer;
}
.finding-step { color: var(--crn-ink-quiet); font-size: var(--crn-text-sm); }
.finding-ref { font-weight: var(--crn-weight-strong); }
.finding-summary-desc { flex: 1 1 16rem; }
.finding--done .finding-summary-desc { color: var(--crn-ink-muted); }
.finding-caret { color: var(--crn-ink-quiet); margin-left: auto; }
.finding:not(.finding--collapsed) .finding-caret { transform: rotate(180deg); }
.finding--collapsed .finding-body { display: none; }
/* the reviewed state carries its word, not a coloured dot */
.finding-review-dot { display: none; }
.finding--done .finding-review-dot {
  display: inline-block; font-size: var(--crn-text-sm);
  font-weight: var(--crn-weight-strong); color: var(--crn-settled);
}
.finding--done .finding-review-dot::before { content: "reviewed ✓"; }

/* the mark: symbol AND word, always together (words over icons). Every
   registered mark has a rule here — an unregistered mark must never render
   QUIETER than a real flag (test_every_mark_has_a_symbol_a_label_and_css). */
.mark { flex-shrink: 0; }
.mark--verified        { color: var(--crn-settled); }
.mark--scanned_clean   { color: var(--crn-settled); }
.mark--not_confident   { color: var(--crn-waiting); }
.mark--cant_identify   { color: var(--crn-attention); }
.mark--machine_settled { color: var(--crn-waiting); }
.finding-badge {
  display: inline-block; font-size: var(--crn-text-sm);
  font-weight: var(--crn-weight-strong);
  padding: var(--crn-space-1) var(--crn-space-2);
  border: 2px solid currentColor; border-radius: var(--crn-radius);
}
.finding-badge--not_confident   { color: var(--crn-waiting); background: var(--crn-waiting-bg); }
.finding-badge--cant_identify   { color: var(--crn-attention); background: var(--crn-attention-bg); }
.finding-badge--machine_settled { color: var(--crn-waiting); background: var(--crn-waiting-bg); }
.finding-badge--verified { color: var(--crn-settled); background: var(--crn-settled-bg); }
/* scanned_clean is a PASS and never enters the findings list — these two
   rules are the defence the mark-binding test demands: if a pass row ever
   DID land there by a bug, it must not render quieter than a real flag. */
.finding--scanned_clean { border-left-color: var(--crn-settled); }
.finding-badge--scanned_clean { color: var(--crn-settled); background: var(--crn-settled-bg); }

.finding-body { padding: 0 var(--crn-space-3) var(--crn-space-3); }
.finding-question { font-size: var(--crn-text-lg); font-weight: var(--crn-weight-strong);
                    margin: 0 0 var(--crn-space-2); }
.finding-compare { display: flex; flex-wrap: wrap; gap: var(--crn-space-3);
                   margin-bottom: var(--crn-space-3); }
.finding-compare > div {
  flex: 1 1 14rem; background: var(--crn-bg);
  border: 1px solid var(--crn-line); border-radius: var(--crn-radius);
  padding: var(--crn-space-2) var(--crn-space-3);
}
.finding-compare-label { display: block; color: var(--crn-ink-muted);
                         font-size: var(--crn-text-sm); }
.finding-compare-val { font-weight: var(--crn-weight-strong); }
.finding-reason { background: var(--crn-bg); border: 1px solid var(--crn-line);
                  border-radius: var(--crn-radius);
                  padding: var(--crn-space-2) var(--crn-space-3);
                  margin-bottom: var(--crn-space-3); }
.finding-reason-label { display: block; color: var(--crn-ink-muted);
                        font-size: var(--crn-text-sm); }

.finding-actions { display: flex; flex-wrap: wrap; align-items: center;
                   gap: var(--crn-target-gap); }
.finding-class { display: flex; flex-wrap: wrap; gap: var(--crn-target-gap);
                 flex-basis: 100%; }
.finding-class label { display: inline-flex; align-items: center;
                       gap: var(--crn-space-1); min-height: var(--crn-target);
                       cursor: pointer; }
.finding-note { flex: 1 1 100%; max-width: var(--crn-measure); }
.finding-receipt { flex-basis: 100%; }

/* ── The receipts table — every mark, line by line ──────────────────────── */
.receipts > summary {
  font-size: var(--crn-text-lg); font-weight: var(--crn-weight-strong);
  min-height: var(--crn-target); display: flex; align-items: center;
  gap: var(--crn-space-2); cursor: pointer; margin: var(--crn-space-3) 0;
}
.li-row--clickable { cursor: pointer; }
.li-row--sheet { cursor: pointer; }
/* THE REFERENCED-VERDICT LAW: the row's evidence, inline, quiet but present */
.li-evidence { display: block; color: var(--crn-ink-quiet);
               font-size: var(--crn-text-sm); font-weight: var(--crn-weight); }
.finding-evidence { margin: 0 0 var(--crn-space-3); }
.li-row--not_confident > td:first-child   { box-shadow: inset 5px 0 var(--crn-waiting); }
.li-row--cant_identify > td:first-child   { box-shadow: inset 5px 0 var(--crn-attention); }
.li-row--machine_settled > td:first-child { box-shadow: inset 5px 0 var(--crn-waiting); }
.li-reason-row td { color: var(--crn-ink-muted); font-size: var(--crn-text-sm);
                    border-bottom: 1px solid var(--crn-line); }
.crn-table caption { text-align: left; color: var(--crn-ink-quiet);
                     font-size: var(--crn-text-sm);
                     padding-bottom: var(--crn-space-2); }

/* ── Arbitration — answer first, then see the machine's ─────────────────── */
.arb { background: var(--crn-bg); border: 1px solid var(--crn-line);
       border-left: 5px solid var(--crn-waiting); border-radius: var(--crn-radius);
       padding: var(--crn-space-3); margin-bottom: var(--crn-space-3); }
.arb-head { display: flex; flex-wrap: wrap; align-items: center;
            gap: var(--crn-space-2); margin-bottom: var(--crn-space-2); }
.arb-rung { display: inline-block; font-size: var(--crn-text-sm);
            font-weight: var(--crn-weight-strong); color: var(--crn-waiting);
            background: var(--crn-waiting-bg); border: 2px solid currentColor;
            border-radius: var(--crn-radius);
            padding: var(--crn-space-1) var(--crn-space-2); }
.arb-order { color: var(--crn-ink-quiet); font-size: var(--crn-text-sm); }
.arb-q { margin: 0 0 var(--crn-space-2); }
.arb-ask { display: flex; flex-direction: column; gap: var(--crn-space-1);
           align-items: flex-start; }
.arb-ask-q { font-weight: var(--crn-weight-strong); }
.arb-choice { display: inline-flex; align-items: center; gap: var(--crn-space-1);
              min-height: var(--crn-target); cursor: pointer; }
.arb-answer-note { align-self: stretch; max-width: var(--crn-measure); }
.arb-warn { color: var(--crn-attention); font-weight: var(--crn-weight-strong); }
.arb-locked { color: var(--crn-ink-quiet); font-size: var(--crn-text-sm);
              margin: var(--crn-space-2) 0 0; }
.arb-options { list-style: none; margin: 0 0 var(--crn-space-2); padding: 0; }
.arb-option { padding: var(--crn-space-1) 0; }
.arb-option--winner { font-weight: var(--crn-weight-strong); }
.arb-option-tag { display: inline-block; font-size: var(--crn-text-sm);
                  font-weight: var(--crn-weight-strong); color: var(--crn-waiting);
                  background: var(--crn-waiting-bg); border: 2px solid currentColor;
                  border-radius: var(--crn-radius);
                  padding: 0 var(--crn-space-1); margin-left: var(--crn-space-1); }
.arb-citation { color: var(--crn-ink-muted); font-size: var(--crn-text-sm);
                margin-bottom: var(--crn-space-2); }
.arb-crop { display: block; max-width: 100%; border: 1px solid var(--crn-line-strong);
            border-radius: 2px; margin: var(--crn-space-2) 0 var(--crn-space-1); }
.arb-refused { color: var(--crn-attention); }
.arb-outcome { font-weight: var(--crn-weight-strong); margin: var(--crn-space-2) 0 0; }

/* ── Winston — a message panel ON the document, not a floating chat ─────── */
.chat-panel { background: var(--crn-surface); border: 1px solid var(--crn-line);
              border-radius: var(--crn-radius); padding: var(--crn-space-3);
              margin-top: var(--crn-space-4); }
.chat-head { display: flex; flex-wrap: wrap; align-items: center;
             gap: var(--crn-space-2); margin-bottom: var(--crn-space-2); }
.chat-title { font-size: var(--crn-text-lg); font-weight: var(--crn-weight-strong); }
.chat-sub { color: var(--crn-ink-muted); font-size: var(--crn-text-sm);
            flex: 1 1 18rem; }
/* while an answer is arriving the panel says so in a word — never a dot alone */
.chat-stream-dot { display: none; color: var(--crn-waiting);
                   font-size: var(--crn-text-sm);
                   font-weight: var(--crn-weight-strong); }
.chat-panel--streaming .chat-stream-dot { display: inline; }
.chat-stream-dot::before { content: "answering…"; }
.chat-expand { font-family: inherit; font-size: var(--crn-text-sm);
               color: var(--crn-ink); min-height: var(--crn-target);
               padding: 0 var(--crn-space-2);
               border: 2px solid var(--crn-line-strong);
               border-radius: var(--crn-radius); background: var(--crn-surface);
               cursor: pointer; margin-left: auto; }
.chat-log { max-height: 21rem; overflow-y: auto; }
.chat-panel--tall .chat-log { max-height: 60vh; min-height: 24rem; }
.chat-log:empty::before { content: "Name a line and he looks at the page itself. The answer lands here, on the document.";
                          color: var(--crn-ink-quiet); font-size: var(--crn-text-sm); }
.chat-bubble { border-left: 3px solid var(--crn-line-strong); background: var(--crn-bg);
               padding: var(--crn-space-2) var(--crn-space-3);
               margin: var(--crn-space-2) 0; max-width: var(--crn-measure);
               white-space: pre-wrap; overflow-wrap: break-word; }
.chat-bubble::before { display: block; color: var(--crn-ink-muted);
                       font-size: var(--crn-text-sm);
                       font-weight: var(--crn-weight-strong); }
.chat-bubble--user { border-left-color: var(--crn-ink); margin-left: var(--crn-space-4); }
.chat-bubble--user::before { content: "You"; }
.chat-bubble--specialist { border-left-color: var(--crn-settled); }
.chat-bubble--specialist::before { content: "Winston"; }
.chat-bubble--thinking::after { content: "reading the report…";
                                color: var(--crn-ink-quiet);
                                font-size: var(--crn-text-sm); }
.chat-note { color: var(--crn-ink-muted); font-size: var(--crn-text-sm);
             margin: var(--crn-space-1) 0 var(--crn-space-2); }
.chat-status { color: var(--crn-ink-quiet); font-size: var(--crn-text-sm);
               margin: var(--crn-space-1) 0; }
.chat-form { display: flex; flex-wrap: wrap; gap: var(--crn-target-gap);
             margin-top: var(--crn-space-2); }
.chat-form input { flex: 1 1 20rem; }

/* ── The walked queue's controls ────────────────────────────────────────── */
.walk-controls { display: flex; flex-wrap: wrap; align-items: center;
                 gap: var(--crn-target-gap); margin: var(--crn-space-3) 0; }
.walk-doc { color: var(--crn-ink-muted); font-size: var(--crn-text-sm);
            margin: 0 0 var(--crn-space-1); }

/* ═══ THE SIGN-IN DOOR — the first screen anyone from a client firm sees ═══
   Converted off the legacy dark chrome 2026-08-14 (Rob-directed design night).
   The law it serves is the newest one: appearance earns trust, and first
   impressions are the ones that last — a partner meeting this system for the
   first time meets THIS page, so it obeys the same floors as every seat.
   Centred single card, one job, no walls of choices (guide §2, §4 anti-12). */
.crn-signin { display: flex; justify-content: center;
              padding: var(--crn-space-5) var(--crn-space-3); }
.crn-signin__card { background: var(--crn-paper);
                    border: 1px solid var(--crn-line);
                    border-top: 4px solid var(--crn-accent);
                    border-radius: var(--crn-radius);
                    padding: var(--crn-space-4);
                    width: 100%; max-width: 34rem; }
.crn-signin__note { color: var(--crn-ink-muted); font-size: var(--crn-text-sm);
                    margin: var(--crn-space-3) 0 0; }

/* A labelled field: the label is a real word above a real target, never a
   placeholder pretending to be one (placeholders vanish on focus — invisible
   to the eyes we designed for). */
.crn-field { display: block; margin: 0 0 var(--crn-space-3); }
.crn-field__label { display: block; font-weight: var(--crn-weight-strong);
                    margin: 0 0 var(--crn-space-1); }
.crn-field .crn-input { display: block; width: 100%; box-sizing: border-box; }

/* ── The dead-end page ──────────────────────────────────────────────────
   Never "an error occurred" (guide §4 anti-13): say what happened and the
   next step, in their words, with the way out as a real target. */
.crn-deadend { max-width: var(--crn-measure); }