/* The capture surfaces' one design vocabulary.
 *
 * Lifted verbatim out of `start.html`'s inline <style> (story 2.4, §G A4) so the
 * artefact page and the form LINK it rather than copy it. Three surfaces holding
 * three copies of one token block is three places for the same accent to drift;
 * one file is the design contract, and a page's own <style> is for what only
 * that page has.
 *
 * Nothing in the moved half was rewritten — same rules, same order, same
 * cascade — so `/start` renders byte-for-byte as it did at 4090cae. Only the
 * two blocks at the end are new, and both belong to `intake-client.js`, which
 * every capture surface loads.
 *
 * conforms: docs/02-prd.md#FR-3.8 — plain files served by Pages; no framework,
 *   no build step, no CSS toolchain
 * conforms: docs/02-prd.md#FR-1.4 — the re-auth modal's appearance lives beside
 *   the one helper that opens it, so a second surface cannot style it differently
 * conforms: story 2.2 §Rulings 7 — a capture UI, not a chat app: the affordances
 *   are tactile (chips, pills, buttons), and no rule here composes a message
 * conforms: docs/coding-standards/CS.md#CS-36 — a stylesheet holds no key, and it
 *   does not name the privileged one either: CS-36's enforcement grep over web/
 *   must stay exit 1, and a comment quoting the string it looks for is the
 *   cheapest way to break it
 *
 * ── story 2.5 (2026-08-31) — the sketches become the surface ───────────────
 * The four citations above are the file's, and they still hold. These are the
 * ones the token layer below is built to. The rule is the ADR clause; the PNG
 * is the specific drawing — a PNG alone is not a citation.
 *
 * conforms: docs/03-adr-0000-stack.md#1 — the AISCE-Sketches are the normative
 *   visual direction (amended 2026-08-31, story 2.5 ruling 8); the stack half of
 *   §1.1 is unchanged, so this file gains no framework and no build step
 * conforms: docs/_inputs/AISCE-Sketches/aisce_strategy_flow.png (via ADR-0000 §1)
 *   — the topbar wordmark, the left rail with its filled ink current block, the
 *   STEP 01 stamp, the boxed info card, the label/input/mono-helper field stack,
 *   the segmented cards, the two-button footer, the governance strip
 * conforms: docs/_inputs/AISCE-Sketches/aisce_strategy_presentation.png (via
 *   ADR-0000 §1) — the titled bands with their left rule, the mono version
 *   stamp, the right-hand CHANGE LOG rail with its dot timeline
 * conforms: docs/_inputs/AISCE-Sketches/aisce_strategy_flow_mobile.png (via
 *   ADR-0000 §1) — the state pills at the section head and the inverted ink
 *   block (story 2.5 §G A2's Red Lines pick)
 * conforms: docs/_inputs/AISCE-Sketches/aisce_strategy_review.png (via ADR-0000
 *   §1) — the three E4 chip pairings ONLY (Reviewed / Approved / Rejected):
 *   tokens with no surface, criterion 17's single stated exception
 * conforms: docs/02-prd.md#FR-3.8 — still no toolchain: one hand-written file
 * conforms: docs/02-prd.md#NFR-8.1 — no build step, no CSS framework
 * conforms: docs/02-prd.md#NFR-1.1 — no render-blocking font: the type scale is
 *   executed on the system stack (§Rulings 7), so no font import, no
 *   face declaration and no font file appears anywhere below
 * conforms: docs/coding-standards/CS.md#CS-16 — one file holds the vocabulary;
 *   a page's own <style> keeps only what that page alone has
 * conforms: docs/coding-standards/CS.md#CS-11 — no new dependency of any kind
 * conforms: global CLAUDE.md Layer-2 design contract — the light paper theme is
 *   locked, the contrast floors are measured (body ≥7:1, muted and chip text
 *   ≥4.5:1), and where a sketch treatment missed a floor THE INK DARKENED and
 *   the paper did not (§Rulings 6). The two that were darkened below their
 *   sketch value are named at the chip tokens.
 * [Source: frontend-design SKILL.md, read 2026-08-31 — the type scale and its
 *   weights; the skill supplies craft, the sketches and the Layer-2 contract
 *   win wherever they disagree with it]
 *
 * ── story 3.2 (2026-09-01) — the rail gains a Switch, the footer goes ──────
 * Two changes and no third. (a) The rail HEADER becomes the current strategy's
 * identity plus a Switch affordance (`.rail-switch` then; `Home`/`.rail-home`
 * since story 3.4 — see that dated block below), because a founder with
 * two strategies could only ever see the last one. (b) The governance-footer
 * family story 2.5 shipped is DELETED — CS-50's scheduled first application —
 * and the two real signals it carried are re-homed by the pages that own them,
 * never dropped. The class names themselves are gone from this file, so the
 * enforcement grep over `web/capture.css` returns exit 1 and this comment does
 * not defeat it by quoting what it looks for (the same discipline CS-36 gets
 * eight lines up).
 *
 * conforms: docs/coding-standards/PROPOSED.md#CS-50 (STAGED — not ratified as of
 *   CS.md v1.8; authored by Anthony, first application scheduled to this story)
 *   — "● Governance active" presents no checkable fact. Acting on a staged
 *   rule's own scheduled first application is following its author's
 *   instruction; this file does not claim the rule is binding.
 * conforms: docs/02-prd.md#FR-3.2 — the last-modified fact CS-50 protects is a
 *   MUST, so `.when` STAYS and gains `.signals`, a home for the re-homing. The
 *   rule removes the decoration, not the meaning sitting next to it.
 * conforms: docs/02-prd.md#NFR-9.1 — desktop normative, 375px a floor: the
 *   Home is the ONLY route to the browser, so it is NOT in `.rail-sub`'s
 *   `display:none` list and it survives the floor
 * conforms: docs/02-prd.md#FR-3.8 · #NFR-8.1 — still one hand-written file
 * conforms: story 2.5 §Rulings 1 — one accent, on links and :focus-visible: the
 *   Home is a link and takes the accent that way, and NO rule below adds a
 *   second use of it
 * conforms: story 2.5 §Rulings 2 — EXACTLY ONE media query. `.rail-home`'s
 *   mobile treatment is ONE LINE INSIDE the existing block at the foot of this
 *   file; a second media block is what the ruling forbids, and the at-rule is
 *   not spelled here so the counting grep stays honest
 * conforms: Rule 2 — no new `:root` custom property. The Home link reuses
 *   `--fs-hint`; the three unused E4-S1 chip pairs are still unused
 * conforms: Rule 3 — `.rail-title`, `.rail-sub` and `.when` are byte-unchanged
 *
 * ── story 3.2 · C6 (2026-09-01, Anthony's direct addition) ────────────────
 * The block above says "two changes and no third". This is the THIRD, added
 * after it landed and stated here rather than folded into that sentence: a
 * small `.build-tag` at the foot of every page, answering ONE question —
 * *which bytes am I looking at?* Its content is written by
 * `intake-client.js` from `web/build.json`; this file only says how it looks.
 *
 * It is FOOTER-ANCHORED, not `position:fixed`, and that is the pick rather
 * than the default: a fixed element sits over whatever is beneath it, and the
 * two places it would land are the artefact's right-hand `.log` at 1440 and
 * the `.formbar`'s buttons at 375 — a tag that covers an affordance costs
 * more than it tells. Anchored last in the document it can overlap nothing by
 * construction, it prints, and "lower right" is still where it reads.
 * (Veto note: fixed is a three-declaration change here and nothing else.)
 *
 * conforms: docs/02-prd.md#FR-3.8 · #NFR-8.1 — READ AS THE NO-TOOLCHAIN RULE,
 *   the reading §10 row 14 restates: plain hand-written files, no framework,
 *   no build step. A deploy-time stamp is not a build step — nothing compiles,
 *   bundles or rewrites this tree; one JSON file is written beside it by the
 *   deploy invocation, exactly as `web/config.js` already is
 *   (`tools/web-config.sh`). The precedent is shipped, not invented here.
 * conforms: docs/02-prd.md#NFR-9.1 — desktop normative, 375px a floor: its
 *   mobile padding is ONE NAME added to the existing list in the single media
 *   query at the foot of this file, not a rule and not a second block
 * conforms: story 2.5 §Rulings 1 — one accent: this tag declares no colour but
 *   `--muted`, and holds no link
 * conforms: story 2.5 §Rulings 2 — still EXACTLY ONE media query
 * conforms: Rule 2 — no new `:root` custom property; the treatment is
 *   `.helper`'s three declarations (mono · `--fs-cap` · `--muted`), reused
 * conforms: Rule 3 — one rule and one selector-list name; nothing else moved
 * [Source: frontend-design SKILL.md, read 2026-09-01 — its craft guidance is
 *   OVERRIDDEN here by the Layer-2 contract and the shipped 2.5 vocabulary,
 *   the same resolution C2 recorded: an amendment to a ruled surface invents
 *   no face, no token and no signature element]
 *
 * ── story 3.4 (2026-09-02) — the Switch becomes Home ────────────────────
 * ONE affordance renamed and nothing else. Anthony, 2026-09-01: *"instead of
 * switch, lets use a home button that navigates us to the switch strategy
 * view."* The word became `Home` and the class became `.rail-home` on all six
 * pages; the destination (`strategies.html`), the placement (the rail HEADER,
 * a sibling of `.rail-title`), the two rules below and the one media query are
 * unchanged. A `.rail-switch` that renders *Home* is a mismatch every later
 * reader pays for, and the six markup copies had to be edited identically
 * either way, so the rename is free (criterion 87).
 *
 * The SUPERSEDED source, preserved rather than deleted (criterion 86): story
 * 3.2 §Rulings 2 ruled the browser *"reached from the RAIL HEADER (a 'Switch'
 * affordance on the `.rail-title` block)"*. What changed is the word and the
 * class. What did NOT change: Home is still in the rail header and is still
 * NOT a fifth rail item (criterion 90) — that would spend E4's allowance a
 * milestone early. The story-3.2 blocks above keep their own dated wording,
 * because they record what that story did; every operative comment naming the
 * live affordance now names it `Home`.
 *
 * conforms: [Source: story 3.4 §Ruled R2] — Anthony's words, quoted above
 * conforms: story 2.5 §Rulings 2 — EXACTLY ONE media query, still: the mobile
 *   treatment is the same single line inside the same block, renamed
 * conforms: Rule 3 — no new rule, no new token, no declaration added or
 *   removed; a class name and a word
 *
 * Amended, never regenerated (criterion 77): every comment above this line is
 * story 2.2/2.3/2.4's reasoning and is left exactly as it was.
 */

:root {
  color-scheme: only light;
  /* The ground and the ink DO NOT MOVE (criterion 10): the sketches and the
     shipped tokens already agree, and a "palette refresh" here is a broken
     criterion, not an improvement. */
  --paper:#faf9f6; --ink:#1a1a1a; --muted:#6b6b6b; --line:#e4e1da;
  /* Retained and NARROWED to links + :focus-visible only (§Rulings 1). Filled
     primaries are --ink below; an ink ring on an ink button is invisible, which
     is the reason the accent survives at all (criterion 12). */
  --accent:#0f62fe;
  --sev-high:#c62828; --sev-ok:#2e7d32;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;

  /* ── story 2.5 — the sketches' own surfaces ────────────────────────────
     The rail sits on a very slightly warmer grey than the paper, exactly as
     every railed sketch draws it; --fill is the sketches' one filled-neutral
     (the STEP 01 stamp, a chosen segmented card, the REF: block). */
  --rail-bg:#f2f0eb;
  --fill:#eceae5;

  /* The type SCALE (criterion 15), as tokens, because four sizes that happen
     to differ is not a scale. ~2.4rem title / ~1.45rem head / 1rem body /
     .85rem hint / .72rem mono cap — the sketches' own range. .72rem is a FLOOR
     (criterion 80): the mono cap never goes below it however small it looks in
     a 1600px sketch render. */
  /* FC-8 (docs/16 §14 C2): SIX text sizes, the ruled 12 · 13.6 · 16 · 20 · 28 · 38 px ratios
     in rem, so the root (14px) scales them all. Every font-size in web/css reads one of these. */
  --fs-title:2.375rem; --fs-display:1.75rem; --fs-head:1.25rem; --fs-body:1rem;
  --fs-hint:.85rem;  --fs-cap:.75rem;

  --rail-w:15rem; --radius:4px;

  /* State chips: each state gets its own ink so the text contrast is a token
     and not an accident (criterion 13). MEASURED, and two were DARKENED BELOW
     THE SKETCH (§Rulings 6, A10) — said out loud here so it does not read as
     palette drift at audit:
       AGREED   — the sketch's mint ink (#2e7d32) is 4.27:1 on this mint fill.
                  Darkened to #14532d = 7.59:1.
       NEEDS WORK — the sketch's rose ink (#c62828) is 4.61:1 on this rose fill,
                  a rounding error away from the floor. Darkened to #9f1c28
                  = 6.45:1.
     The paper never darkens; the ink does. */
  --chip-agreed-bg:#d8f0e4;    --chip-agreed-ink:#14532d;
  --chip-draft-bg:#eceae5;     --chip-draft-ink:#3f3f3f;
  --chip-needswork-bg:#fbe3e5; --chip-needswork-ink:#9f1c28;

  /* The ONLY tokens in this file with no shipped call site — criterion 17's
     single stated exception, exactly three pairs and no more (A11). Read off
     aisce_strategy_review.png's STATE column; first call site E4-S1. */
  --chip-reviewed-bg:#d8f0e4;  --chip-reviewed-ink:#14532d; /* E4-S1 */
  --chip-approved-bg:#1a1a1a;  --chip-approved-ink:#ffffff; /* E4-S1 */
  --chip-rejected-bg:#fbe3e5;  --chip-rejected-ink:#9f1c28; /* E4-S1 */
}
html, body { background:var(--paper); color:var(--ink); }
/* Density (Anthony, 2026-09-29: "the general sizing of the page is just a bit too large").
   Every size here is in rem, so one root step scales type and space together, in proportion. */
html { font-size:87.5%; } /* 14px — Anthony, 2026-09-29 (again): "at 100% sizing everything is still a bit too big" */
/* Criterion 25 / A4: `max-width:44rem` on <body> is SUPERSEDED here, once, so
   no surface chunk re-derives it. The shell is wide; the reading column is
   bounded on `.panel` instead (68ch — the global contract's prose column, and
   what the sketches actually draw). */
body { font:var(--fs-body)/1.55 system-ui,sans-serif; margin:0; padding:0; }
/* The single number that separates "restyled" from "repainted" (A1): 2.4rem is
   38.4px at 1440, against the 21.6px this line used to set. */
h1 { font-size:var(--fs-title); font-weight:800; line-height:1.1;
     letter-spacing:-0.028em; margin:0 0 .5rem; }
.sub { color:var(--muted); margin:0 0 2rem; font-size:var(--fs-hint); }
label { display:block; font-size:var(--fs-hint); color:var(--muted); margin-bottom:.4rem; }
input, button, textarea { font:inherit; }
/* `box-sizing` added in story 2.5: `width:100%` plus padding plus a border is
   wider than its container under the default content-box, which was invisible
   while every field sat directly on a 44rem body and is NOT invisible once a
   field sits inside a `.card` at 375px (criterion 85). Scoped to the two
   elements that carry `width:100%`, not applied as a global reset. */
input, textarea { box-sizing:border-box;
        width:100%; padding:.6rem .7rem; border:1px solid var(--line);
        border-radius:4px; background:#fff; color:var(--ink); }
textarea { resize:vertical; }
input:focus-visible, button:focus-visible, a:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* §Rulings 1: the filled primary is INK, not the accent. Every sketch fills its
   primary with ink (CONTINUE, Open Document, New Strategy Phase, Open Review),
   and the accent has to survive somewhere other than the button it outlines. */
button { padding:.65rem 1.2rem; border:0; border-radius:var(--radius);
         background:var(--ink); color:#fff; cursor:pointer;
         font-weight:600; letter-spacing:.005em; }
button[disabled] { opacity:.55; cursor:default; }
a { color:var(--accent); }
[hidden] { display:none !important; }
#who { color:var(--muted); font-size:var(--fs-hint); margin:0 0 1.5rem; }

/* FR-2.6, on the capture surface, where the founder is deciding what to hand
   over. Set by start.js from one constant and asserted byte-exact. */
#banner { border-left:3px solid var(--accent); padding:.55rem 0 .55rem .8rem;
          margin:0 0 2.5rem; font-size:var(--fs-body); }

/* The three affordances. Each carries the NAME OF THE MATERIAL it takes —
   FR-11.2 names three kinds, so the label is the structure, not decoration. */
.affordance { border-top:1px solid var(--line); padding:1.5rem 0 0; margin:0 0 1.5rem; }
.tag { font-family:var(--mono); font-size:var(--fs-cap); letter-spacing:.08em;
       text-transform:uppercase; color:var(--muted); margin:0 0 .5rem; }
.hint { color:var(--muted); font-size:var(--fs-hint); margin:.5rem 0 0; }

/* Links: an add/remove list, never a blob of text to parse in your head. */
.row { display:flex; gap:.5rem; align-items:center; }
.row button { padding:.6rem .9rem; white-space:nowrap; }
#url-list, #file-list, #audience-list { list-style:none; margin:.75rem 0 0; padding:0; }
#url-list li, #file-list li, #audience-list li {
      display:flex; gap:.75rem; align-items:baseline; padding:.45rem 0;
      border-bottom:1px solid var(--line); }
#url-list .what, #file-list .what, #audience-list .what { flex:1; word-break:break-all; }
#file-list .size { font-family:var(--mono); font-size:var(--fs-hint); color:var(--muted); }
.drop-remove { background:none; color:var(--muted); border:1px solid var(--line);
               padding:.2rem .55rem; font-size:var(--fs-hint); border-radius:3px; }
.drop-remove:hover { color:var(--ink); border-color:var(--ink); }

/* Documents: a zone with an edge, so it reads as somewhere to put things. */
#drop { border:1.5px dashed var(--line); border-radius:6px; background:#fff;
        padding:1.6rem 1rem; text-align:center; color:var(--muted); }
#drop.over { border-color:var(--accent); color:var(--ink); }
#drop button { margin-top:.75rem; }
#drop .drop-title { margin:0; }
#file-error { color:var(--sev-high); font-size:var(--fs-hint); margin:.75rem 0 0; }

#read { margin-top:1.5rem; }
.error { color:var(--sev-high); margin-top:1.25rem; }

/* The narrated flow: the agent's output, beneath the capture surface. One
   voice, in sentences — no bubbles, no turn history, nothing of the founder's
   own words echoed back (§Rulings 4 and 7). */
#flow { margin-top:3rem; border-top:1px solid var(--line); padding-top:1.75rem; }
#flow h2 { font-size:var(--fs-body); letter-spacing:-0.01em; margin:0 0 1rem; }
#narration { margin:0; padding:0 0 0 1rem; border-left:2px solid var(--line); }
.said { margin:0 0 .7rem; }
.said.trouble { color:var(--sev-high); }

/* Enumerable answers are taps (criterion 77). */
.question { margin:1.5rem 0 0; }
.question p { margin:0 0 .6rem; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { background:#fff; color:var(--ink); border:1px solid var(--line);
        border-radius:999px; padding:.45rem 1rem; }
.chip:hover { border-color:var(--ink); }
.chip[aria-pressed="true"] { border-color:var(--accent); color:var(--accent);
        box-shadow:inset 0 0 0 1px var(--accent); }
.chip[aria-pressed="true"]::before { content:"✓ "; }
#confirm { margin-top:1.75rem; }
#confirm-note { color:var(--muted); font-size:var(--fs-hint); margin:.6rem 0 0; }

/* One line per step, exactly as the tracer page draws them: the state is a
   word AND a colour, never colour alone. */
#steps { list-style:none; margin:1.5rem 0 0; padding:0; }
#steps li { display:flex; gap:.75rem; align-items:baseline;
            padding:.5rem 0; border-bottom:1px solid var(--line); }
#steps .name { flex:1; }
#steps .state { font-family:var(--mono); font-size:var(--fs-hint); }
#steps .lag { font-family:var(--mono); font-size:var(--fs-hint); color:var(--muted); }
#steps li[data-state="running"] .state { color:var(--muted); }
#steps li[data-state="done"]    .state { color:var(--sev-ok); }
#steps li[data-state="failed"]  .state { color:var(--sev-high); }

/* ── story 2.3 ────────────────────────────────────────────────────────────
   Two more bands under the same rules as the capture surface above: a shelf
   of what was read, then five sections offered one at a time. Same tokens,
   same one accent, same "a state is a word AND a colour" discipline — a
   second surface is not a second design. */

/* `#review` left this rule on 2026-09-29: on Review inputs it is the whole page, not a second
   band, and the band's margin, rule and padding pushed the heading ~90px below the sidebar's. */
#ledger { margin-top:3rem; border-top:1px solid var(--line);
                   padding-top:1.75rem; }
#ledger h2, #review h2 { font-size:var(--fs-body); letter-spacing:-0.01em; margin:0 0 .25rem; }

/* The ledger. One row per source, and the row shows the five things FR-11.6
   names: where it came from, its title, its address, when it was read, and
   the excerpt we actually kept. */
#ledger-list { list-style:none; margin:1.5rem 0 0; padding:0; }
#ledger-list li { display:flex; gap:1rem; align-items:flex-start;
                  padding:1.1rem 0; border-bottom:1px solid var(--line); }
.src { flex:1; min-width:0; }
.src p { margin:0 0 .2rem; }
.src .title { font-weight:600; }
.src .where, .src .when { font-family:var(--mono); font-size:var(--fs-cap);
                          color:var(--muted); word-break:break-all; }
.src .excerpt { margin-top:.55rem; color:var(--muted); font-size:var(--fs-hint); }
.toggle { background:none; color:var(--muted); border:1px solid var(--line);
          padding:.35rem .75rem; font-size:var(--fs-hint); border-radius:3px;
          white-space:nowrap; }
.toggle:hover { color:var(--ink); border-color:var(--ink); }
/* Excluded is carried by a word ("Excluded", and the button's own label),
   by the rule through the title, and by the accent — never by colour alone. */
li[data-excluded="true"] .src { opacity:.6; }
li[data-excluded="true"] .title { text-decoration:line-through; }
li[data-excluded="true"] .toggle { color:var(--accent); border-color:var(--accent); }
#ledger-note { margin:1.25rem 0 0; }

/* One section, three affordances. Named fields on the left, the agent's
   rationale beneath them, and Accept / Edit / Reject as three buttons —
   never a composer, never a bubble for the founder's own decision. */
#agreed-count { font-family:var(--mono); }
#proposals { margin:1.5rem 0 0; }
.section-card { border-top:1px solid var(--line); padding:1.5rem 0 0; margin:0 0 1.75rem; }
.section-card h3 { font-size:var(--fs-body); letter-spacing:-0.01em; margin:0 0 .75rem; }
.fields { margin:0; }
.fields dt { font-family:var(--mono); font-size:var(--fs-cap); letter-spacing:.08em;
             text-transform:uppercase; color:var(--muted); margin:.7rem 0 .15rem; }
.fields dd { margin:0; }
.item + .item { border-top:1px dotted var(--line); margin-top:1.1rem; padding-top:.6rem; }
.section-card .hint { margin:.9rem 0 0; }
/* The one conversational element on this surface, and it is the agent's, not
   the founder's: the same rule the narrated flow above uses to mark a voice. */
.section-card .said { margin:1.1rem 0 0; padding-left:.85rem;
                      border-left:2px solid var(--line); }
.cites { color:var(--muted); font-size:var(--fs-hint); margin:.6rem 0 0; padding-left:.85rem; }
.acts { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.15rem; }
.ghost { background:none; color:var(--ink); border:1px solid var(--line); }
.ghost:hover { border-color:var(--ink); }
.edit-form { margin-top:1.25rem; border-left:2px solid var(--accent); padding-left:1rem; }
.edit-form label { margin-top:.85rem; }
.edit-form .acts { margin-top:1.1rem; }
.verdict { margin:1.1rem 0 0; font-size:var(--fs-hint); }
.verdict[data-kind="agreed"]   { color:var(--sev-ok); }
.verdict[data-kind="rejected"] { color:var(--muted); }
/* The outcome line. Criterion 65: a founder who turned everything down made a
   choice, so this is a plain sentence in the ordinary voice — no error colour,
   no warning shape. */
#outcome { margin-top:2rem; border-left:3px solid var(--line);
           padding:.55rem 0 .55rem .8rem; }

/* ── story 2.4 — the two pieces `intake-client.js` builds ──────────────────
   Both are shared by definition: one helper opens them, on whichever capture
   surface the founder happened to be on, so their appearance lives here and
   not in any one page. */

/* FR-1.4's re-auth modal. Centred, because the session ending is not a note in
   the margin — it is the only thing the founder can act on until they answer
   it. Two affordances, laid out with the same `.acts` row every other decision
   on these surfaces uses, so the primary reads as the primary. */
#reauth { position:fixed; inset:0; z-index:50;
          display:flex; align-items:center; justify-content:center;
          padding:1.5rem; background:rgba(26,26,26,.32); }
/* Story 2.5 (A3): the modal's own card is `.modal`, not `.panel` — `.panel` is
   now the shell's reading column and one name may not mean two things (CS-16).
   The card itself is unchanged; it gains the sketches' hairline-and-stamp
   vocabulary and nothing else. FR-1.4's sentence is byte-identical. */
#reauth .modal { background:#fff; border:1px solid var(--line); border-radius:6px;
                 max-width:26rem; width:100%; padding:1.6rem 1.5rem;
                 box-shadow:0 8px 32px rgba(26,26,26,.14); }
#reauth .microcap { margin:0 0 .6rem; }
/* The FR-1.4 sentence itself, verbatim and compared with ===. It is a
   statement, not a heading, so it is set as one. */
#reauth-copy { margin:0; font-size:var(--fs-body); letter-spacing:-0.01em; }
#reauth .hint { margin:.7rem 0 0; }
#reauth .acts { margin-top:1.4rem; }

/* A brief welcome shared by all signed-in pages. Native dialog supplies focus
   containment and Escape; the page underneath remains the user's destination. */
.release-notes { box-sizing:border-box; width:calc(100% - 2rem); max-width:29rem;
  max-height:calc(100dvh - 2rem); overflow:auto; margin:auto;
  padding:clamp(1.25rem, 4vw, 2rem); border:1px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--ink); color-scheme:only light;
  font:1rem/1.55 system-ui; }
.release-notes::backdrop { background:rgba(26,26,26,.32); }
.release-notes h2 { margin:0 0 .65rem; font-size:var(--fs-display); line-height:1.2;
  letter-spacing:-.025em; color:var(--ink); }
.release-notes p { margin:0; color:var(--muted); }
.release-notes ul { margin:1.5rem 0; padding-left:1.15rem; }
.release-notes li { padding-left:.2rem; margin:.85rem 0; }
.release-notes form { margin:0; }
.release-notes .release-notes-preference { display:flex; align-items:center;
  gap:.55rem; margin:0 0 1rem; font:inherit; font-size:var(--fs-hint); color:var(--muted); }
.release-notes input[type="checkbox"] { width:1rem; height:1rem; margin:0;
  padding:0; flex-shrink:0; accent-color:var(--ink); }
.release-notes button { width:100%; }

/* Criterion 79. The saved section moved while the draft sat in this browser,
   so both are named and the founder picks — never a silent last-writer-wins
   against their own earlier work. Accent rule, because it is a decision; not
   error colour, because nothing went wrong. */
.draft-notice { margin:1.25rem 0 0; border-left:3px solid var(--accent);
                padding:.55rem 0 .55rem .8rem; }
.draft-notice p { margin:0 0 .3rem; }
.draft-notice .when { font-family:var(--mono); font-size:var(--fs-cap); color:var(--muted); }
.draft-notice .acts { margin-top:.8rem; }
.draft-notice button { padding:.4rem .8rem; font-size:var(--fs-hint); }

/* ══ story 2.5 — the sketches become the surface ═══════════════════════════
   The chrome the sketches make the identity, and the primitives every surface
   draws with. Written ONCE, here, in C3's first commit, because four surface
   chunks re-deriving a band or a pill is four bands and four pills.

   The shell, frozen (A1). Every surface renders exactly this, hand-written,
   by hand — NOT a shared JS component (criterion 23): a <nav> block of a dozen
   lines is cheaper than an import, an init and a sync problem on a tree with no
   build step. Four copies at story 2.5; SIX from story 3.2 (criterion 13).

     <header class="topbar">
       <a class="wordmark" href="index.html">AISCE</a>
       <span class="topbar-sub">Governance portal</span>
     </header>
     <div class="shell">                          <!-- + " has-aside" for a right rail -->
       <nav class="rail" aria-label="Surfaces">
         <p class="rail-title" id="rail-strategy">Strategy</p>
         <p class="rail-updated" id="rail-updated">Updated 29 Sep 2026</p>
         <a class="rail-item" href="start.html">Capture</a>
         <a class="rail-item" href="form.html" aria-current="page">Review inputs</a>
         <a class="rail-item" href="plan.html">Strategy</a>
         <a class="rail-item" href="derive.html">Derivation</a>
       </nav>
       <main class="panel"> … </main>
       <aside class="log"> … </aside>            <!-- only with .has-aside -->
     </div>

   FOUR rail destinations and no more (story 3.2 §Rulings 2, criterion 12) —
   Strategy, Capture, Form, Derivation. The rail grows one item per milestone
   (E3 spends its one HERE); it never carries a promise with no date. The
   strategy BROWSER is deliberately NOT a fifth item: it is reached from the
   header's Home, because a fifth item would spend E4's allowance a milestone
   early. `a.rail-item` is therefore EXACTLY 4 on every surface and
   `[aria-current="page"]` EXACTLY 1, with two STATED exceptions:

     · `index.html` is the seam — not one of the four destinations — so its
       current-item marker is a NON-LINK `<span class="rail-item rail-here"
       aria-current="page">Tracer</span>` placed first in the rail. It has five
       `.rail-item`s and four anchors. Carried forward from story 2.5, not
       introduced here; you cannot navigate to the page you are on.
     · `strategies.html` is not a rail destination either, and it has NO self
       item, so it carries four anchors and ZERO `[aria-current="page"]`.

   The HEADER is the current strategy's identity plus Home (criterion 53).
   `.rail-title` carries the identity and is filled by each page from its own
   resolved strategy (`currentStrategy()` in `intake-client.js`) — that is what
   criterion 70 means by "visible on every signed-in surface". `.rail-sub` KEEPS
   whatever copy the page already had: "AISCE alpha" on index/start/artefact and
   the two new pages, and form.html's own instruction sentence, which story 2.5
   moved there deliberately so that no copy was deleted. This settles the two
   contradicting `.rail-title` conventions 2.5 shipped ("Surfaces" the list vs.
   "Your first turn" the surface) by replacing BOTH with one.

   Every href that carries a strategy is written `<page>.html?strategy=<id>` —
   the shipped convention (start.js:1132, form.js:697). There is no second one.

   Hand-duplicated, six times, still on purpose (criterion 13): six <nav> blocks
   are cheaper than an import, an init and a sync problem on a tree with no
   build step. A test reads the bytes so the duplication is survivable. */

.topbar { display:flex; align-items:baseline; flex-wrap:wrap; gap:.9rem;
          padding:1.05rem 2rem; border-bottom:1px solid var(--line); }
/* Set as TEXT in the type stack — not an image, not an SVG asset, not a font
   file (criterion 18, §Rulings 7). A tight-tracked heavy system-ui carries most
   of the sketches' title character; the face is revisited at M6. */
.wordmark { font-size:var(--fs-display); font-weight:800; letter-spacing:-0.045em;
            line-height:1; color:var(--ink); text-decoration:none; }
.topbar-sub { color:var(--muted); font-size:var(--fs-hint);
              border-left:1px solid var(--line); padding-left:.9rem; }
/* docs/16 §13 D2 (ruled 2026-09-29): the person lives top-right — an avatar
   (initials) that opens the email and Sign out. Built by `navigation.js`. */
.user-menu { margin-left:auto; position:relative; align-self:center; }
.avatar { width:2.25rem; height:2.25rem; padding:0; border-radius:50%; border:0;
          background:var(--ink); color:#fff; font-size:var(--fs-hint); font-weight:600; letter-spacing:.02em; }
.user-menu-panel { position:absolute; right:0; top:calc(100% + .4rem); z-index:5; min-width:15rem;
                   background:var(--paper); border:1px solid var(--line); border-radius:8px;
                   box-shadow:4px 4px 8px rgba(26,26,26,.10); padding:.9rem 1rem; }
.user-menu-panel[hidden] { display:none; }
.user-email { margin:0 0 .7rem; font-size:var(--fs-hint); overflow-wrap:anywhere; }
/* docs/16 §13 D2 (amended 2026-09-29): Settings, Workflows and Administration, in the menu. */
.user-menu-links { display:flex; flex-direction:column; margin:0 -.5rem .6rem; padding:.5rem 0 0;
                   border-top:1px solid var(--line); }
.user-menu-links a { padding:.45rem .5rem; border-radius:var(--radius); color:var(--ink); text-decoration:none; }
.user-menu-links a:hover { background:rgba(26,26,26,.055); }
.user-menu-links a[hidden] { display:none; }
/* Account utilities remain reachable below the workspace navigation. */
.topbar { position:sticky; top:0; z-index:3; min-height:4.5rem;
          box-sizing:border-box; background:var(--paper); }
.rail-main { display:flex; flex-direction:column; gap:.15rem; flex-shrink:0; }
/* docs/16 §13 D1 (ruled 2026-09-29): the whole sidebar is ONE scroll (`.rail`). The foot
   sits at the bottom edge while the whole rail fits (`margin-top:auto`) and scrolls with
   the list once it does not — a pinned foot squeezed a 1280×720 window's list to four
   rows (FC-1, Anthony's screenshot 2026-09-29 20:49). */
.rail-footer { margin:auto -1rem 0; padding:.8rem 1rem 1rem;
               border-top:1px solid var(--line); flex-shrink:0; background:var(--rail-bg); }
.rail-utility { display:flex; align-items:center; gap:.6rem; min-height:44px;
                padding:.5rem .75rem; color:var(--ink); text-decoration:none; border-radius:var(--radius); }
.rail-utility:hover { text-decoration:underline; text-underline-offset:.2em; }
.rail-utility[aria-current] { background:var(--ink); color:var(--paper); }
.settings-icon { display:inline-flex; width:1.15rem; flex-shrink:0; }
.settings-icon svg { width:100%; }
/* FC-2 (docs/16 §14 C4, Owner 2026-09-29): the organisation's name lives in the avatar
   menu, above the email — once per page, not over the sidebar header. */
.user-organisation { margin:0 0 .2rem; font-weight:600; overflow-wrap:anywhere; }

.shell { display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr);
         min-height:70vh; }
/* C3 (docs/16 §14, ruled 2026-09-29): rail · content (up to 68rem) · panel (18rem, now
   15rem: FC-14, Anthony 2026-09-29 "the right side bar being too large").
   The content column stops growing at 68rem and the panel sits at its edge; any
   width past that is paper to the RIGHT of the panel, never a gutter between them.
   The panel fills its column; prose inside keeps the 68ch measure. */
/* FC-7 (docs/16 §14 C3 amended 2026-09-29, Anthony: equal gutters, and on a wide screen the
   content and panel sit centred in the width right of the rail). Two flexible spacer columns
   take whatever the rail, 68rem and the panel leave; on a laptop they are 0, so V1 is as before. */
.shell.has-aside, .aside-wide .shell.has-aside {
  grid-template-columns:var(--rail-w) minmax(0,1fr) minmax(0,68rem) 15rem minmax(0,1fr); }
.shell.has-aside > .rail { grid-column:1; }
.shell.has-aside > .panel { grid-column:3; padding-right:1.3rem; }
.shell.has-aside > .log { grid-column:4; }
.shell.has-aside .panel { max-width:none; }
.shell.has-aside .panel p { max-width:68ch; }

.rail { background:var(--rail-bg); border-right:1px solid var(--line);
        padding:1.6rem 1rem 2rem; display:flex; flex-direction:column; gap:.15rem; }
/* Story 5.4 AC-1 (U-01): the rail stays in reach. It is a DRAWER (Run 2 ruling,
   Anthony 2026-09-08): it holds its place while the panel scrolls and casts one
   shadow right onto the page; its items stay flat. A NEW rule after the one
   above, so it wins by order and the shipped rule is untouched; the ≤60rem
   block at the foot turns it static again, where the rail is a top strip. */
.rail { position:sticky; top:4.5rem; align-self:start; height:calc(100dvh - 4.5rem); box-sizing:border-box;
        overflow-y:auto; overscroll-behavior:contain; box-shadow:var(--drawer); z-index:1;
        /* A thin scrollbar, shown while the pointer is on the sidebar (Anthony, 2026-09-29: a
           classic 21px bar made the sidebar's right edge ragged). Wheel, trackpad and keys scroll. */
        scrollbar-width:thin; scrollbar-color:transparent transparent;
        padding-bottom:0; } /* D1: the foot carries the bottom gutter */
.rail:hover, .rail:focus-within { scrollbar-color:var(--line) transparent; }
.rail-title { margin:0 0 .1rem; padding:0 .75rem; font-weight:700; font-size:var(--fs-body); }
.rail-sub { margin:0 0 1.3rem; padding:0 .75rem; color:var(--muted);
            font-size:var(--fs-hint); }
/* `.rail-home` (criterion 53) is gone: docs/16 §13 D2 (ruled 2026-09-29) makes the
   topbar wordmark Home, and the wordmark is in reach at every width. */
.rail-item { display:block; padding:.42rem .75rem; border-radius:var(--radius);
             color:var(--ink); text-decoration:none; font-size:var(--fs-body); }
.rail-item:hover { background:rgba(26,26,26,.055); }
/* The sketches' own device for "you are here": a filled ink block with reversed
   type — AND aria-current, so the state is in the accessibility tree and not
   only in the pixels (criterion 21). */
.rail-item[aria-current="page"], .rail-here { background:var(--ink); color:#fff;
             font-weight:600; }
.rail-item[aria-current="page"]:hover { background:var(--ink); }
.rail-sep { margin:1.4rem .75rem; }
/* docs/16 §13 D1 + §14 C4: the header is two lines — the strategy's name, then a
   muted "Updated 29 Sep 2026" — and a section list sits indented under its
   destination. */
.rail-updated { margin:0 0 .9rem; padding:0 .75rem; color:var(--muted); font-size:var(--fs-hint); }
.rail-updated:empty { display:none; }
.rail-nest { margin:.1rem 0 .3rem .75rem; padding-left:.35rem; border-left:1px solid var(--line); }

/* The form's five sections live in the rail on that surface (criterion 39).
   They are STEPS, not destinations: `li.rail-step`, never `a.rail-item`, and
   their current one is aria-current="step" — so the frozen counts above hold
   on the form too. A completed step is marked by a word-shape (the check), not
   by colour (criterion 82). */
.rail-steps { list-style:none; margin:0; padding:0; }
.rail-step { display:block; padding:.55rem .75rem; border-radius:var(--radius);
             font-size:var(--fs-hint); color:var(--ink); }
.rail-step[aria-current="step"] { background:var(--ink); color:#fff; font-weight:600; }
.rail-step[data-done="true"]::before { content:"✓ "; color:var(--sev-ok); }
.rail-step[aria-current="step"][data-done="true"]::before { color:#fff; }

/* The reading column. 68ch is the global contract's prose measure and what the
   sketches draw — the shell is wide, the words are not (criterion 25). */
/* Top padding = the rail's (1.6rem), so the page's first line sits level with the sidebar's
   (Anthony, 2026-09-29: "the left side of the page the sizing is not aligned"). */
.panel { max-width:68ch; padding:1.6rem 2rem 4rem; }
.log { padding:1.6rem .6rem 1rem; border-left:1px solid var(--line); } /* FC-14: top level with the rail */
/* Story 5.4 AC-1 (U-02): the right column stays beside what it describes. */
.log { position:sticky; top:0; align-self:start; max-height:100vh; box-sizing:border-box;
       overflow-y:auto; }

/* The build tag (story 3.2 · C6). LAST element in the document, one per page,
   created by `renderBuildTag()` in `intake-client.js`:

     <p class="build-tag">959809a · deployed 01/09/2026, 16:03:11</p>

   Quiet on purpose. It is a stamp, not a status: the same mono / `--fs-cap` /
   `--muted` treatment `.helper` and `.stamp` already carry, no border, no
   fill, no colour that means anything. Nothing here can say "local" or a sha
   — the honest degradations are the helper's, and this file must not be able
   to disagree with it about what the words are. */
.build-tag { margin:0; padding:.9rem 2rem 1.2rem; text-align:right;
             font-family:var(--mono); font-size:var(--fs-cap); color:var(--muted); }

/* The governance footer story 2.5 shipped on all four pages is GONE, and its
   whole vocabulary went with it — the strip, the dot, the separator, its pill
   override, its mobile padding entry, and both of the comment blocks that
   explained it. CS-50's scheduled first application: "● Governance active" is a
   gesture at governance carrying no checkable fact, and on a product whose bet
   is warranted trust that trains a founder to ignore the real signals. Dead CSS
   for a deleted element is the same defect one layer down (Rule 3).

   What did NOT go: the two REAL signals the footer happened to carry. A
   last-updated time and a status pill both pass CS-50's own test, so they are
   RE-HOMED by the pages that own them. `.when` therefore
   STAYS: it is the mono timestamp treatment, and it was never the footer's.

   `.signals` is the one small hook that re-homing needs — a signal line that
   sits under a heading and carries a `.when` and a `.pill` on one row. Nothing
   more: where a signal lands in the artefact's `.facts` grid instead, `.fact` +
   `.microcap` + `.v` already exist and no new rule is wanted.

   conforms: docs/coding-standards/PROPOSED.md#CS-50 (STAGED — not ratified as of
     CS.md v1.8; authored by Anthony, first application scheduled to this story)
   conforms: docs/02-prd.md#FR-3.2 — the last-modified fact is a MUST and it
     SURVIVES the deletion; deleting the footer without re-homing it would
     delete a MUST that no CI check would catch (Rule 11) */
.signals { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
           margin:.35rem 0 0; color:var(--muted); font-size:var(--fs-hint); }
.when { font-family:var(--mono); font-size:var(--fs-cap); color:var(--muted); }

/* ── the primitives ─────────────────────────────────────────────────────── */

/* ONE mono micro-cap class (criterion 14), not five near-copies of `.tag` and
   `.fields dt`. .72rem is the floor, not a suggestion (criterion 80). */
.microcap { font-family:var(--mono); font-size:var(--fs-cap); letter-spacing:.08em;
            text-transform:uppercase; color:var(--muted); margin:0 0 .5rem; }
/* The sketches' helper line under a field: mono, micro-cap size, sentence case. */
.helper { font-family:var(--mono); font-size:var(--fs-cap); color:var(--muted);
          margin:.4rem 0 0; }
/* The hairline mono stamp — `v1.3`, `Derived from …`, `REF: …`. `.stamp-fill`
   is its filled variant, which is what `STEP 01` is drawn as. */
.stamp { display:inline-block; font-family:var(--mono); font-size:var(--fs-cap);
         color:var(--muted); border:1px solid var(--line); border-radius:3px;
         padding:.16rem .45rem; }
.stamp-fill { background:var(--fill); border-color:transparent; color:var(--ink); }
/* Numbering, ONLY where the order is a stored fact (criterion 31: story 2.3's
   `seq`). A decorative 01/02/03 is the template answer; this one is earned. */
.num { font-family:var(--mono); font-size:var(--fs-hint); color:var(--muted); }

/* A titled band: the artefact's sections, and the same class names on /start's
   proposal cards (criterion 50 — the same section on two surfaces is visibly
   one object). The left rule is a structural device that encodes something
   true: it marks the artefact's OWN WORDS as distinct from the page's chrome. */
.band { margin:0 0 2.75rem; }
.band-head { display:flex; align-items:baseline; justify-content:space-between;
             gap:1rem; margin:0 0 .9rem; }
.band-title { margin:0; font-size:var(--fs-head); font-weight:500;
              letter-spacing:-0.015em; }
.band-body { margin:0; }
.band-rule { border-left:2px solid var(--line); padding-left:1.5rem; }

/* The state pill. The pill's own WORD is the state; the colour is the second
   carrier, never the only one (criterion 13/82). */
.pill { display:inline-block; font-family:var(--mono); font-size:var(--fs-cap);
        letter-spacing:.08em; text-transform:uppercase; padding:.26rem .62rem;
        border-radius:999px; border:1px solid transparent;
        background:var(--fill); color:var(--ink); }
.pill-agreed    { background:var(--chip-agreed-bg);    color:var(--chip-agreed-ink); }
.pill-draft     { background:var(--chip-draft-bg);     color:var(--chip-draft-ink); }
/* Declared here, rendered nowhere: `NEEDS WORK` is in the sketch and is NOT in
   the `status` check constraint. A third pill value must not reach the page
   (criterion 30). */
.pill-needswork { background:var(--chip-needswork-bg); color:var(--chip-needswork-ink); }

.card { background:#fff; border:1px solid var(--line); border-radius:6px;
        padding:1.15rem 1.25rem; }
/* FR-2.6's banner, drawn where and how the sketch draws it — boxed, with the
   glyph, the sentence italic and byte-exact. */
.infocard { display:flex; gap:.85rem; align-items:flex-start; background:#fff;
            border:1px solid var(--line); border-radius:6px;
            padding:1.1rem 1.25rem; margin:0 0 2.25rem; }
.infocard-glyph { flex:none; color:var(--muted); }
.infocard p { margin:0; font-style:italic; }
/* The sketches' filled neutral block: the Evidence `REF:` card, a pinned note. */
.notecard { background:var(--fill); border-radius:var(--radius);
            padding:1rem 1.15rem; }

/* A2 — the Red Lines pick: the INVERTED INK BLOCK from flow_mobile.png, never
   presentation.png's red left rule, and never a blend (Rule 7). It survives 375
   unchanged, it double-encodes without colour doing any work, and the red rule
   would introduce a third fill semantic beside --sev-high. C4 states the pick
   in its own notes; the primitive is here so it is not drawn twice. */
.inverted { background:var(--ink); color:#fff; border-radius:6px; padding:1.4rem; }
.inverted .microcap { color:rgba(255,255,255,.78); }
.inverted-item { display:flex; gap:.8rem; margin:1rem 0 0; }
.inverted-num { flex:none; font-family:var(--mono); font-size:var(--fs-cap);
                border:1px solid rgba(255,255,255,.5); border-radius:3px;
                padding:.12rem .38rem; }

/* A field, as the sketch stacks it: micro-cap label → input → mono helper. */
.field { margin:0 0 1.6rem; }
.field label { margin-bottom:.45rem; }

/* The step footer: the sketch's two-button row. AISCE has THREE affordances,
   not the sketch's two (story 2.4 ruling 3) — Agree is a distinct click and is
   not smuggled into either of these (criterion 43). Flagged, picked, not
   blended: `.formbar` holds the two, Agree sits in its own `.acts` row. */
.formbar { display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
           justify-content:space-between; border-top:1px solid var(--line);
           margin-top:2.5rem; padding-top:1.75rem; }
.primary   { background:var(--ink); color:#fff; border:1px solid var(--ink); }
.secondary { background:none; color:var(--ink); border:1px solid var(--ink); }
/* The caps-and-tracking treatment belongs to the STEP FOOTER, which is the only
   place the sketch draws it — not to every primary on every surface. */
.formbar .primary, .formbar .secondary { text-transform:uppercase;
           letter-spacing:.09em; font-size:var(--fs-hint); padding:.8rem 1.5rem; }

/* The segmented control. A REAL radio group (criterion 83): three <button>s
   with a class look identical and answer nothing when a keyboard arrives.
     <fieldset class="seg" role="radiogroup">
       <legend class="seg-legend microcap">Claim type</legend>
       <div class="seg-row">
         <label class="seg-card">
           <input class="seg-input" type="radio" name="claim_type" value="capability">
           <span class="seg-body">
             <span class="seg-label">Capability</span>
             <span class="seg-sub microcap">What it can do</span>
           </span>
         </label> … </div></fieldset>
   The input stays in the DOM and stays focusable — arrow keys are the browser's
   and are not re-implemented. Chosen is carried three ways: the fill, the 2px
   ink border, and a check after the word. */
.seg { min-width:0; border:1px solid var(--line); border-radius:6px; padding:1.1rem 1.15rem;
       margin:0 0 1.6rem; }
.seg-legend { padding:0; }
.seg-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.seg-card { position:relative; flex:1 1 9rem; display:block; cursor:pointer; }
.seg-input { position:absolute; inset:0; width:100%; height:100%; margin:0;
             opacity:0; cursor:pointer; }
.seg-body { display:block; text-align:center; background:#fff;
            border:1px solid var(--line); border-radius:var(--radius);
            padding:.85rem .8rem; }
.seg-label { display:block; font-weight:600; }
.seg-sub { display:block; margin:.35rem 0 0; }
.seg-input:checked + .seg-body { background:var(--fill); border-color:var(--ink);
            box-shadow:inset 0 0 0 1px var(--ink); }
.seg-input:checked + .seg-body .seg-label::after { content:" ✓"; }
.seg-input:focus-visible + .seg-body { outline:2px solid var(--accent);
            outline-offset:2px; }

/* The change log as the sketch's dot timeline: an open ring for the current
   entry, filled dots below. Content unchanged — the same six *_history reads.
     <li class="timeline-item is-current">
       <span class="timeline-dot" aria-hidden="true"></span>
       <span class="num">v1.3</span><p>…</p><p class="when">…</p></li> */
.timeline { list-style:none; margin:0; padding:0; }
.timeline-item { position:relative; padding:0 0 1.5rem 1.35rem;
                 border-left:1px solid var(--line); }
.timeline-item:last-child { border-left-color:transparent; padding-bottom:0; }
.timeline-item p { margin:.2rem 0 0; }
.timeline-dot { position:absolute; left:-4.5px; top:.4rem; width:8px; height:8px;
                border-radius:50%; background:var(--line); }
.timeline-item.is-current .timeline-dot { left:-6.5px; top:.25rem;
                width:12px; height:12px; background:var(--paper);
                border:2px solid var(--ink); }

hr { border:0; border-top:1px solid var(--line); margin:2rem 0; }

/* ── story 3.7 (2026-09-02) — the first table this product has ever drawn ──
   `/usr/bin/grep -n "overflow\|table" web/capture.css` returned NOTHING at
   HEAD `d12e384`: five surfaces and not one tabular fact between them. The
   strategy plan carries exactly one — the client's own High-level
   Communications Timeline and Cadence, one row per period and one column per
   audience — so these rules exist for that table and are written to the shipped
   token set, at the shipped densities, with no new custom property.

   THE WIDE CONTENT SCROLLS IN ITS OWN CONTAINER and the page body never scrolls
   horizontally (the Layer-2 design contract's hard rule): `.tbl` is the wrapper,
   `overflow-x:auto` is on the wrapper and never on `.panel`, and the type is
   NEVER shrunk to fit — a wide table gets a scroll container, not a smaller
   font. Proved at 375px, where a four-column table cannot fit, rather than at
   1440 where the failure is invisible.

   The header row is SENTENCE CASE, deliberately, and this is the one place the
   house's mono micro-cap idiom is declined: those column names are the FOUNDER'S
   OWN audience names, copied character for character by the generator (story
   3.6's `header_row_for`, and the guard that refused a run over one capital
   letter). Rendering "Industrial partners" as "INDUSTRIAL PARTNERS" would show a
   founder a word they did not write, on the one surface whose whole promise is
   that it did not paraphrase them.

   conforms: global CLAUDE.md Layer-2 design contract — wide content in its own
     `overflow-x:auto` container; padded rows plus a `tr:hover` highlight; colour
     carries meaning or is absent, and none of it is decorative here
   conforms: docs/02-prd.md#NFR-9.1 — desktop normative, 375px a floor
   conforms: docs/02-prd.md#FR-3.8 · #NFR-8.1 — still one hand-written file, no
     framework, no build step, no CSS toolchain
   conforms: docs/coding-standards/CS.md#CS-16 — one vocabulary: `.tbl` is the
     only table rule in the product and `web/plan.html` invents no second one
   conforms: story 2.5 §Rulings 2 — EXACTLY ONE media query: nothing below adds
     a second, and nothing below needed one, because the wrapper is what makes
     the table survive the floor
   conforms: Rule 2 — no new `:root` custom property */
.tbl { overflow-x:auto; margin:1.1rem 0 0; border:1px solid var(--line);
       border-radius:6px; background:#fff; }
.tbl table { border-collapse:collapse; width:100%; min-width:32rem;
             font-size:var(--fs-hint); }
.tbl th, .tbl td { text-align:left; vertical-align:top; padding:.62rem .85rem;
                   border-bottom:1px solid var(--line); }
.tbl th { font-weight:600; color:var(--ink); background:var(--fill);
          white-space:nowrap; }
.tbl tbody tr:nth-child(even) { background:var(--rail-bg); }
.tbl tbody tr:hover { background:var(--fill); }
.tbl tbody tr:last-child td { border-bottom:0; }

/* The assumption parenthetical, as a chip INSIDE a sentence.
   `agents/plan.py`'s `ASSUMPTION_LABEL` makes every unsourced claim in the plan
   carry *(assumption, see Assumptions section)* in italics, so a founder reading
   a paragraph can see which half of it AISCE had to assume. `.stamp` is the
   standalone band form and sits in a `.stampband`; this is its inline sibling,
   and it is the same fill, the same mono, the same micro-cap size — one
   vocabulary, two positions. Muted ink on `--fill` clears the 4.5:1 floor the
   contract sets for text inside a chip. */
.assumption { font-family:var(--mono); font-size:var(--fs-cap);
              color:var(--muted); background:var(--fill); border-radius:3px;
              padding:.08rem .34rem; font-style:normal; white-space:nowrap; }

/* ── The touch of neumorphism (Run 2, RULED by Anthony 2026-09-08) ─────────
   Exactly this much and no more: a LIFT on the place you act (the live question
   card), the one primary action, and the system's voice (the right-column info
   card); a PRESS on the fields you type into; a DRAWER shadow on the rail. The
   lift is declared ONCE, here, so no surface grows a second shadow recipe.
   Every lifted surface carries a 1px muted edge (the ruled 5:1 border) — a
   shadow on paper is not an edge on its own. No gradient, no glow, no motion.

   conforms: _bmad-output/implementation-artifacts/ux-session-2026-09-08/stitch/
     DESIGN-BRIEF.md and README.md §"Run 2 — the brief, RULED by Anthony"
   conforms: Rule 3 — additions only; six other pages share this file */
:root {
  --lift:-3px -3px 6px #ffffff, 4px 4px 8px rgba(26,26,26,.10);
  --press:inset 0 3px 3px rgba(26,26,26,.08);
  --drawer:4px 0 8px rgba(26,26,26,.07);
  --radius-lift:8px;
  --aside-w:15rem; /* FC-14: was 19rem; the panel is 15rem on every page */
}
.lift { background:var(--paper); border:1px solid var(--muted);
        border-radius:var(--radius-lift); box-shadow:var(--lift); }
.lift-live { padding:1.75rem 1.75rem 1.5rem; margin:0 0 2.25rem; }
.lift-info { padding:1.15rem 1.25rem; }
.lift-info-head { margin:0 0 .8rem; padding:0 0 .6rem; border-bottom:1px solid var(--line);
                  font-size:var(--fs-body); font-weight:600; line-height:1.35; }
.lift-info-list { list-style:none; margin:0; padding:0; }
.lift-info-list li { margin:0 0 .45rem; }
.lift-info-list li:last-child { margin-bottom:0; }
/* The one primary action: the accent, lifted — sentence case, never the step
   footer's caps. Disabled, it drops the lift AND the accent, and the line under
   it says why in words, so the state is never carried by colour alone. */
.btn-lift { background:var(--accent); color:#fff; border:1px solid var(--muted);
            border-radius:6px; box-shadow:var(--lift); }
.formbar .btn-lift, .formbar .secondary.btn-flat { text-transform:none; letter-spacing:normal;
            font-size:var(--fs-body); padding:.7rem 1.4rem; }
.btn-lift[disabled] { background:var(--fill); color:var(--ink); border-color:var(--line);
            box-shadow:none; opacity:1; }
/* Typed-into fields are PRESSED, and keep a visible hairline edge. */
.pressed { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
           box-shadow:var(--press); }
.pressed::placeholder { color:var(--muted); opacity:1; }
/* A page whose right column carries an info card and the next action needs a
   little more than the shared 17rem; opted into per page, the shared line untouched. */
.aside-wide .shell.has-aside { grid-template-columns:var(--rail-w) minmax(0,1fr) minmax(0,68rem) var(--aside-w) minmax(0,1fr); }

/* Story 3.11: the contextual guidance, in the RIGHT aside (`.shell.has-aside`
   + `aside.log`) — Anthony, 2026-09-23: the left rail is navigation only. The
   one media block already stacks `.log` below the panel at the floor. */
.guidance-title { margin:0 0 .4rem; }
.guidance-lede { margin:0 0 .4rem; font-size:var(--fs-hint); line-height:1.4; }
/* It stays in view below the sticky topbar while the page scrolls, as the rail
   does; the change-log's own `.log` rule is not touched. */
#guidance-aside { top:4.5rem; max-height:calc(100dvh - 4.5rem); }
.guidance-list { margin:0; font-size:var(--fs-hint); }
.guidance-list dt { margin:.4rem 0 0; }
.guidance-list dt:first-child { margin-top:0; }
.guidance-list dd { margin:0; line-height:1.4; }
/* FC-14: in the right panel the card is compact — a narrower inset, so the §12 answers
   fit the column without the card scrolling inside itself at a laptop's height. */
.log .lift-info { padding:.85rem .9rem; }
.log .lift-info-head { margin-bottom:.5rem; padding-bottom:.4rem; }
.guidance-body > button { margin-top:.9rem; font-size:var(--fs-hint); padding:.5rem .9rem; }
.guidance-next { margin-top:.9rem; }

/* Story 3.11: the no-hover tooltip (`js/shared/guidance.js` makeTip), shared by
   Review Inputs and the Strategy page. */
/* A tooltip needs no hover: the button opens it on click, focus or touch. */
.tip-wrap { position:relative; display:inline-flex; }
.tip { width:1.6rem; height:1.6rem; padding:0; border-radius:50%;
       background:#fff; color:var(--ink); border:1px solid var(--muted);
       font-size:var(--fs-hint); line-height:1; }
.tooltip { position:absolute; top:calc(100% + .35rem); left:0; z-index:5; width:16rem;
           max-width:70vw; background:var(--ink); color:#fff; border-radius:var(--radius);
           padding:.55rem .7rem; font-size:var(--fs-hint); line-height:1.4; }
.tooltip[hidden] { display:none; }


/* The ONE media query this story adds (criterion 24, §Rulings 2): the rail
   COLLAPSES — it does not become a bottom tab bar. The mobile sketches draw a
   five-item tab bar whose items are four surfaces AISCE does not have; building
   it would build criterion 20's dead ends a second time. Desktop is normative;
   375px is a floor, not a second design.
   No transition, no animation, anywhere in this file — so there is no ambient
   motion for `prefers-reduced-motion` to gate (criterion 84), and no second
   media query to add for it. */
@media (max-width:60rem) {
  .shell, .shell.has-aside { grid-template-columns:minmax(0,1fr); }
  .shell.has-aside > .rail, .shell.has-aside > .panel, .shell.has-aside > .log { grid-column:auto; }
  .rail { flex-direction:row; flex-wrap:wrap; align-items:center; gap:.35rem;
          border-right:0; border-bottom:1px solid var(--line);
          padding:.85rem 1.15rem; }
  .rail-title { margin:0 .5rem 0 0; padding:0; }
  .rail-sub, .rail-sep { display:none; }
  .rail-steps { display:flex; flex-wrap:wrap; gap:.35rem; }
  .log { border-left:0; border-top:1px solid var(--line); }
  /* Story 3.2 · C6: `.build-tag` joins the list that already exists rather than
     taking a rule of its own — its 2rem gutter is the topbar's, so its mobile
     gutter is the topbar's too, and one name in one selector is the whole
     amendment (Rule 3). */
  .topbar, .panel, .log, .build-tag { padding-left:1.15rem; padding-right:1.15rem; }
  .panel { padding-top:2rem; }
  /* Story 5.4 AC-1: at the floor the rail is a top strip and the right column
     stacks below the panel — neither holds its place. */
  .topbar { position:static; }
  .rail { position:static; height:auto; box-shadow:none; overflow:visible; }
  .rail-main { display:contents; }
  .rail-footer { display:flex; flex-wrap:wrap; width:100%; position:static; margin:.5rem 0 0;
                 padding:.8rem 0 0; background:none; }
  .log { position:static; max-height:none; overflow-y:visible; }
  #guidance-aside { position:static; max-height:none; }
  .aside-wide .shell.has-aside { grid-template-columns:minmax(0,1fr); }
  /* Run 2 at 375: the lift stays on the live card only; the info card becomes a
     hairline band and the primary button sits flat. */
  .lift.lift-info { box-shadow:none; border:0; border-radius:0; border-top:1px solid var(--line);
                    border-bottom:1px solid var(--line); padding:1rem 0; background:none; }
  .btn-lift { box-shadow:none; }
}