/* 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]
 *
 * 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. */
  --fs-title:2.4rem; --fs-head:1.45rem; --fs-body:1rem;
  --fs-hint:.85rem;  --fs-cap:.72rem;

  --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); }
/* 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:.9rem; }
label { display:block; font-size:.85rem; 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:.85rem; 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:.95rem; }

/* 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:.72rem; 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:.8rem; color:var(--muted); }
.drop-remove { background:none; color:var(--muted); border:1px solid var(--line);
               padding:.2rem .55rem; font-size:.8rem; 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; }
#file-error { color:var(--sev-high); font-size:.9rem; 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:1rem; 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:.85rem; 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:.8rem; }
#steps .lag { font-family:var(--mono); font-size:.8rem; 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. */

#ledger, #review { margin-top:3rem; border-top:1px solid var(--line);
                   padding-top:1.75rem; }
#ledger h2, #review h2 { font-size:1rem; 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:.78rem;
                          color:var(--muted); word-break:break-all; }
.src .excerpt { margin-top:.55rem; color:var(--muted); font-size:.9rem; }
.toggle { background:none; color:var(--muted); border:1px solid var(--line);
          padding:.35rem .75rem; font-size:.8rem; 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; }
#propose { margin-top:1.75rem; }
#propose-note { color:var(--muted); font-size:.85rem; margin:.6rem 0 0; }

/* The proposal run's own step line — the same shape the intake draws, on the
   second workflow's stream. The lag column is NFR-1.4's number, re-measured. */
#propose-steps { list-style:none; margin:1.25rem 0 0; padding:0; }
#propose-steps li { display:flex; gap:.75rem; align-items:baseline;
                    padding:.5rem 0; border-bottom:1px solid var(--line); }
#propose-steps .name { flex:1; }
#propose-steps .state, #propose-steps .lag { font-family:var(--mono); font-size:.8rem; }
#propose-steps .lag { color:var(--muted); }
#propose-steps li[data-state="running"] .state { color:var(--muted); }
#propose-steps li[data-state="done"]    .state { color:var(--sev-ok); }
#propose-steps li[data-state="failed"]  .state { color:var(--sev-high); }

/* 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:.95rem; letter-spacing:-0.01em; margin:0 0 .75rem; }
.fields { margin:0; }
.fields dt { font-family:var(--mono); font-size:.72rem; 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:.85rem; 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:.9rem; }
.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:1.02rem; letter-spacing:-0.01em; }
#reauth .hint { margin:.7rem 0 0; }
#reauth .acts { margin-top:1.4rem; }

/* 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:.78rem; color:var(--muted); }
.draft-notice .acts { margin-top:.8rem; }
.draft-notice button { padding:.4rem .8rem; font-size:.85rem; }

/* ══ 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,
   four times — NOT a shared JS component (criterion 23): four <nav> blocks of
   ten lines are cheaper than an import, an init and a sync problem on four
   pages with no build step.

     <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">Strategy</p>
         <p class="rail-sub">AISCE alpha</p>
         <a class="rail-item" href="artefact.html" aria-current="page">Strategy</a>
         <a class="rail-item" href="start.html">Capture</a>
         <a class="rail-item" href="form.html">Form</a>
       </nav>
       <main class="panel"> … </main>
       <aside class="log"> … </aside>            <!-- only with .has-aside -->
     </div>
     <footer class="govstrip"> … </footer>

   THREE rail destinations and no more (§Rulings 3, criterion 20) — Strategy,
   Capture, Form. The rail grows one item per milestone; it never carries a
   promise with no date. `a.rail-item` is therefore EXACTLY 3 on every surface
   and `[aria-current="page"]` EXACTLY 1 (criterion 87's assertion b).

   `index.html` is the seam: it is not one of the three 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. That keeps the
   anchor count at three and states the truth — you cannot navigate to the page
   you are on. Raised to Anthony with A6 (the rail renders signed out). */

.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:1.75rem; 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; }

.shell { display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr);
         min-height:70vh; }
.shell.has-aside { grid-template-columns:var(--rail-w) minmax(0,1fr) 17rem; }

.rail { background:var(--rail-bg); border-right:1px solid var(--line);
        padding:1.6rem 1rem 2rem; display:flex; flex-direction:column; gap:.15rem; }
.rail-title { margin:0 0 .1rem; padding:0 .75rem; font-weight:700; font-size:1rem; }
.rail-sub { margin:0 0 1.3rem; padding:0 .75rem; color:var(--muted);
            font-size:var(--fs-hint); }
.rail-item { display:block; padding:.62rem .75rem; border-radius:var(--radius);
             color:var(--ink); text-decoration:none; font-size:.95rem; }
.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; }

/* 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:.92rem; 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). */
.panel { max-width:68ch; padding:2.75rem 2rem 4rem; }
.log { padding:2.75rem 1.5rem 3rem; border-left:1px solid var(--line); }

/* The governance strip is REAL and it states facts a row already carries:
   `strategies.updated_at` and the section's status — NEVER a name (criterion
   22, story 2.4 ruling 5: actor_id is null at M2, and a null dressed as a name
   is the failure AC-8 exists to stop).
   A5's empty state, and it is not a placeholder: where no strategy row is in
   hand — index.html, and every signed-out state — the strip renders the dot and
   the words and NOTHING ELSE. Never a fabricated `4m ago`.
     <footer class="govstrip">
       <span class="gov-dot" aria-hidden="true"></span>Governance active
       <span class="gov-sep" aria-hidden="true">·</span>
       <span class="when">Last updated 12 Sep, 14:32</span>
       <span class="pill pill-draft">Draft</span>
     </footer> */
.govstrip { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
            padding:1.05rem 2rem; border-top:1px solid var(--line);
            color:var(--muted); font-size:var(--fs-hint); }
.gov-dot { width:.5rem; height:.5rem; border-radius:50%;
           background:var(--sev-ok); display:inline-block; }
.gov-sep { color:var(--line); }
.govstrip .pill { margin-left:auto; }
.when { font-family:var(--mono); font-size:.78rem; 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:.8rem; 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; }

/* 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); }
  .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); }
  .topbar, .panel, .govstrip, .log { padding-left:1.15rem; padding-right:1.15rem; }
  .panel { padding-top:2rem; }
}