/* The five ticks. One row per DECLARED step, filled as the run writes it, and
   the state is carried three ways — the mark, the ink, and the word — because
   colour alone is not a signal (Layer-2 contract). Nothing here is a bar and
   nothing here is a number: five real ticks against a known five is a progress
   RECORD, which is what an indeterminate mark can never be. */
.ticks { list-style:none; margin:1.1rem 0 0; padding:0; }
.ticks li { display:flex; gap:.7rem; align-items:baseline; padding:.55rem 0;
            border-top:1px dotted var(--line); color:var(--muted); }
.ticks li:first-child { border-top:0; }
.ticks li[data-done="true"] { color:var(--ink); }
.ticks .mark { flex:none; width:1rem; font-family:var(--mono);
               font-size:var(--fs-cap); color:var(--muted); }
.ticks li[data-done="true"] .mark { color:var(--sev-ok); }
.ticks .name { flex:1; min-width:0; }
.ticks .state { font-family:var(--mono); font-size:var(--fs-cap);
                color:var(--muted); }

/* The working mark, `derive.html`'s exactly: three dots fading in turn, drawn
   ONLY inside `#waiting`, which the founder's own action opens — so there is no
   ambient motion on this page either. It is decorative to a screen reader and
   hidden from it: `#waiting-line` is the `role="status"` region and says the
   same thing in words. */
#working { display:flex; align-items:center; gap:.4rem; height:1.2rem;
           color:var(--muted); margin:.6rem 0 0; }
#working span { width:.4rem; height:.4rem; border-radius:50%;
                background:currentColor; opacity:.3;
                animation:working 1.4s ease-in-out infinite; }
#working span:nth-child(2) { animation-delay:.18s; }
#working span:nth-child(3) { animation-delay:.36s; }
@keyframes working { 0%, 70%, 100% { opacity:.3; } 35% { opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  #working span { animation:none; opacity:.6; }
}

/* The document itself. The stored Markdown's own headings and levels are kept:
   the page does not re-decide the document's structure (criterion 41). `.tbl`
   and `.assumption` are `capture.css`'s, because a table is a product-wide
   primitive the moment a product has one.

   2026-10-02 (Anthony: "ideally we present it in editorial syle in html so its
   not just walls of text, include some illustrations"): the draft is laid out to
   be READ. A white sheet with a cover; a text column of 68 characters; every
   `##` a section opener with a full-width rule; tables and figures given the
   sheet's whole width, because wide content needs room and prose does not.
   Every size is one of the six tokens, every colour one of the shipped ones. */
.sheet { padding:0; overflow:hidden; }
.sheet .doc { padding:2.5rem clamp(1.25rem, 4vw, 3rem) 3rem; }
.doc { font:var(--fs-body)/1.65 system-ui,sans-serif; }
/* The measure. `68ch` is 68 ZEROS wide, and a zero is wider than the average
   letter: on the system face it sets about 90 characters to a line. 28.5rem is
   what holds EVERY line of running text to 68 characters or fewer (measured in
   a real browser on a 245,000-character document, 2026-10-02). The id is what it takes to outrank
   `capture.css`'s `.shell.has-aside .panel p` in both views. */
.doc > ul, .doc > ol, .doc > h3, .doc > h4,
#doc .doc p { max-width:28.5rem; }
.doc h2 { font-size:var(--fs-display); font-weight:700; letter-spacing:-0.02em;
          line-height:1.15; scroll-margin-top:5.5rem; }
.doc > h2 { margin:4rem 0 1.25rem; padding-top:1.4rem; border-top:2px solid var(--ink); }
.doc > h2:first-child { margin-top:0; }
/* the first words of a section, a size up: an opener, not another paragraph */
#doc .doc > h2 + p { font-size:var(--fs-head); line-height:1.5; max-width:35rem; }
.doc h3 { font-size:var(--fs-head); font-weight:600; letter-spacing:-0.01em;
          margin:2.25rem 0 .6rem; scroll-margin-top:5.5rem; }
.doc h4 { font-size:var(--fs-body); font-weight:600; margin:1.5rem 0 .4rem; }
.doc p { margin:0 0 1rem; }
.doc ul, .doc ol { margin:0 0 1.1rem; padding-left:1.25rem; }
.doc li { margin:.4rem 0; padding-left:.2rem; }
.doc li::marker { color:var(--muted); }
.doc li p { margin:0; }
.doc strong { font-weight:600; }
.doc > hr { margin:2.5rem 0; }
/* A wide table SCROLLS inside the sheet; its columns keep a readable width and
   its text keeps its size (Layer-2: never a smaller font). */
.doc .tbl { margin:1.5rem 0 2rem; }
.doc .tbl th, .doc .tbl td { min-width:9rem; }

/* On a wide sheet the sub-headings stand in the margin BESIDE the text they
   head, so the 68-character column does not leave half the sheet empty and a
   reader can scan the section down its left edge. Section openers, tables and
   figures keep the full width. Below this width the sheet is one column, as
   written above. 74rem (a media query's rem is the browser's 16px, so 1184px)
   is where the sheet, between the rail and the right panel, first has room
   for the margin and the measure together. */
@media (min-width:74rem) {
  .sheet .doc { display:grid; column-gap:2.25rem; align-items:start;
                grid-template-columns:12rem minmax(0,28.5rem) minmax(0,1fr); }
  .sheet .doc > * { grid-column:2 / -1; }
  .sheet .doc > h2, .sheet .doc > .tbl, .sheet .doc > .fig, .sheet .doc > hr { grid-column:1 / -1; }
  .sheet .doc > h3 { grid-column:1; margin-bottom:.6rem; line-height:1.3; }
  /* a grid's margins do not collapse: the sub-heading and the block beside it
     take the same space above, so their first lines sit level */
  .sheet .doc > h3, .sheet .doc > h3 + * { margin-top:1.75rem; }
  .sheet .doc > h2 + h3, .sheet .doc > h2 + h3 + * { margin-top:.25rem; }
}

/* The cover: what this is, whose it is, that it is a draft, and when. */
.cover { padding:2rem clamp(1.25rem, 4vw, 3rem) 2rem; background:var(--paper);
         border-top:.45rem solid var(--ink); border-bottom:1px solid var(--line); }
.cover-meta { display:flex; flex-wrap:wrap; align-items:center;
              justify-content:space-between; gap:.75rem; margin:0 0 2.75rem; }
/* The stamp is a WORD in an outlined shape; the chip fill only repeats it. */
.cover-stamp { border-color:var(--ink); }
.cover-date { font-family:var(--mono); font-size:var(--fs-cap); color:var(--muted); }
.cover-title { margin:0 0 .6rem; max-width:16ch; font-size:var(--fs-title);
               font-weight:800; line-height:1.06; letter-spacing:-0.035em; }
.cover-for { margin:0 0 2.25rem; font-size:var(--fs-head); }
.cover-note { border-top:1px solid var(--line); padding-top:1.25rem; }
.cover-note p { margin:0 0 .6rem; }
.cover-note p:last-child { margin-bottom:0; }
.cover[data-approved="true"] #cover-draft-line { display:none; }

/* What Generate gives, said beside it before a document exists. The left rule
   is the sketches' band rule: it marks AISCE's voice, not a state. */
.splash { margin:0 0 1.5rem; padding:1.3rem 1.5rem; border-left:.3rem solid var(--ink); }
.splash .band-title { margin:0 0 .6rem; font-weight:600; }
.splash p { margin:0 0 .5rem; }
.splash p:last-child { margin-bottom:0; }

/* ── The figures (`js/plan-document.js`) ───────────────────────────────────
   Drawn from the document's own tables. The geometry is SVG (`viewBox`, width
   100%, so nothing is a fixed pixel width and nothing clips); every word is
   HTML and wraps. A figure wider than a small screen scrolls in its own
   container. The order is carried by position and by the arrow, never by a
   colour. */
.fig { margin:1.75rem 0 2.5rem; }
.fig-scroll { position:relative; overflow-x:auto; padding:1.5rem 1.5rem 1.4rem; background:var(--paper);
              border:1px solid var(--line); border-radius:6px; }
.fig-inner { min-width:40rem; }
.fig figcaption { margin:.7rem 0 0; max-width:28.5rem; font-size:var(--fs-hint);
                  color:var(--muted); }
.fig-rail { display:block; width:100%; height:auto; }
.fig-rail .rail-base { stroke:var(--muted); stroke-width:1.5; }
.fig-rail .rail-head { fill:var(--muted); }
.fig-rail .rail-travel { stroke:var(--ink); stroke-width:4; }
.fig-rail .rail-on { fill:var(--ink); }
.fig-rail .rail-off { fill:var(--paper); stroke:var(--muted); stroke-width:1.5; }
/* read by a screen reader, not drawn: the stage a cell belongs to */
.fig .sr { position:absolute; width:1px; height:1px; overflow:hidden;
           clip-path:inset(50%); white-space:nowrap; }

/* The audience journey: one row per audience, its name beside its track, the
   four stages named once across the top. */
.journey-row { display:grid; grid-template-columns:14rem minmax(0,1fr); column-gap:1.75rem;
               align-items:start; }
.journey-head { padding:0 0 .6rem; font-size:var(--fs-hint); font-weight:700; }
.track { padding:.95rem 0; border-top:1px dotted var(--line); }
.track:last-child { padding-bottom:0; }
.fig .track-name { margin:.15rem 0 0; line-height:1.35; }
.fig .track-audience { font-weight:700; }
.fig .track-stages { list-style:none; margin:0; padding:0; display:grid;
                     grid-template-columns:repeat(4, minmax(0,1fr)); }
.fig .track-stages li, .fig .track-stages span { margin:0; padding:0 1rem 0 0; }
.fig .track-stages .sr { padding:0; }
.fig .stage-text { display:block; margin:.2rem 0 0; font-size:var(--fs-hint); line-height:1.45;
                   overflow-wrap:anywhere; }
/* four columns of words beside a name need this much room; less than it scrolls */
.fig .journey { min-width:46rem; }
.fig .stage-mark { font-weight:700; }

/* The timeline: the periods side by side under a rail, each a band that
   lists what happens in it. The bands are equal columns with no gap, so each
   starts under its own mark. */
.fig .timeline-bands { list-style:none; margin:.45rem 0 0; padding:0; }
.fig .bands-across { display:flex; align-items:flex-start; }
.fig .bands-across > li { flex:1 1 0; min-width:0; margin:0; padding:0 1.5rem 0 0; }
.fig .bands-across > li:last-child { padding-right:0; }
/* More than three periods: the rail names them, and the bands stack below it.
   Inside a stacked band the activities run in as many columns as fit, in
   reading order, so a long band is a block and never one strip. */
.fig .timeline-periods { list-style:none; margin:.4rem 0 0; padding:0; display:flex; }
.fig .timeline-periods li { flex:1 1 0; min-width:0; margin:0; padding:0 .75rem 0 0;
                            font-size:var(--fs-hint); font-weight:700; line-height:1.3; }
.fig .bands-stacked { margin:0; }
.fig .bands-stacked > li { margin:1.6rem 0 0; padding:0; }
.fig .bands-stacked .period-items { display:grid; column-gap:1.5rem;
                                    grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); }
.fig .bands-stacked .period-items > li:last-child { border-bottom:1px solid var(--line);
                                                    padding-bottom:.7rem; }
.fig .period { margin:0 0 .8rem; font-weight:700; }
.fig .period-items { list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.fig .period-items > li { margin:0; padding:.7rem 0; border-bottom:1px solid var(--line); }
.fig .period-items > li:last-child { border-bottom:0; padding-bottom:0; }
.entry-main, .entry-fact { display:block; font-size:var(--fs-hint); line-height:1.45;
                           overflow-wrap:anywhere; }
.entry-main { font-weight:600; }
.entry-fact { margin:.25rem 0 0; }
.fact-name { color:var(--muted); }
.fact-name::after { content:":"; }

/* ── AISCE's notes: a second VIEW of the page (`&view=notes`) ───────────────
   The founder navigates to it; it is not below the document. While it is on
   screen the run's own panel steps aside, so the view is the notes and a way
   back. Each `##` of the notes is a card that opens on a click, with a count:
   the state is the mark (+ / −) and the open card, never a colour. */
#plan[data-view="notes"] #process { display:none; }
.notes-back { margin:0 0 1.5rem; }
#notes-view > .band-title { margin:0 0 .5rem; font-size:var(--fs-display);
                            font-weight:700; letter-spacing:-0.02em; }
#notes-view > .sub { margin:0 0 1.25rem; }
#notes-count { margin:0 0 1rem; }
.notes { margin:0 0 1.75rem; }
.note-card { padding:0; margin:0 0 .75rem; }
.note-card > summary { display:flex; align-items:center; gap:.8rem; padding:1rem 1.25rem;
                       cursor:pointer; list-style:none; }
.note-card > summary::-webkit-details-marker { display:none; }
.note-card > summary::before { content:"+"; flex:none; width:1rem; font-family:var(--mono);
                               font-size:var(--fs-head); line-height:1; color:var(--muted); }
.note-card[open] > summary::before { content:"\2212"; }
.note-card > summary h2 { flex:1; min-width:0; margin:0; font-size:var(--fs-head);
                          font-weight:600; letter-spacing:-0.01em; }
.note-count { flex:none; }
.note-card[open] > summary { border-bottom:1px solid var(--line); margin-bottom:1.1rem; }
.note-card > :not(summary) { margin-left:1.25rem; margin-right:1.25rem; }
.note-card > ul, .note-card > ol { padding-left:1.25rem; max-width:30rem; }
.note-card > h3 { margin-top:1.5rem; }
.note-card > summary + h3 { margin-top:0; }
.note-card[open] { padding-bottom:.6rem; }

.plans { list-style:none; margin:0; padding:0; }
.plans li { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
            padding:.75rem 0; border-top:1px solid var(--line); }
.plans li a { flex:1; min-width:0; }

#waiting, #doc { margin-top:2.5rem; }

#nav { margin-top:3rem; }

/* Story 5.4 AC-2 #7: the plan stops scrolling sideways. `capture.css` keeps the
   chip on one line (`white-space:nowrap`), which is right for a short label and
   wrong here, where the generator writes parentheticals up to ~150 characters —
   one measured 1578 px. Inside the document the chip wraps; the page is the only
   place a long one appears, so the rule lives on the page. */
.doc .assumption { white-space:normal; }

/* AC-2 #10: the same three actions above the document as after it. */
#doc-acts-top { margin:0 0 1.2rem; }

/* AC-2 #12: the plan's contents, in the rail, nested under Strategy (docs/16 §13 D1). The rows are
   `capture.css`'s `.rail-step` — steps, not destinations — so the frozen count of
   five `.rail-item` anchors holds (test_web_rail.py). Below 60rem the shared
   `.rail-steps` line applies unchanged. */
#plan-contents .rail-step { text-decoration:none; }

/* ── Story 3.11 (slices 2–3): a thirteen-stage run ─────────────────────────
   Only what the run adds. Chips, cards, bands and the lifted primary are
   capture.css's; every word comes from js/shared/workflow-labels.js, and the
   state is a word AND a chip colour, never colour alone. */
.process { margin:0 0 2.75rem; }
.plan-notice { margin:0 0 1.25rem; }
.plan-notice .error { margin-top:0; }
#plan-historical { margin:0 0 1.25rem; }
#plan-historical p { margin:0; font-style:normal; }
#plan-phase { margin:0 0 .75rem; }
.plan-stages { list-style:none; margin:0 0 1.5rem; padding:0; border-top:1px solid var(--line); }
.plan-stages .stage { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
                      padding:.6rem 0; border-bottom:1px solid var(--line); }
.plan-stages .stage .name { flex:1 1 14rem; }
.plan-stages .stage-why { flex-basis:100%; margin:0; }
/* 2026-10-02: a finished run with its document on screen folds its steps to one
   line (`data-fold="true"`, set by process-plan.js). Otherwise the list is open
   and the line is not drawn, so a live run looks exactly as it did. The fold
   is the browser's own disclosure: no motion is added. */
.plan-steps:not([data-fold="true"]) > summary { display:none; }
.plan-steps[data-fold="true"] { margin:0 0 1.25rem; }
.plan-steps[data-fold="true"] > summary { cursor:pointer; }
.plan-steps[data-fold="true"][open] > summary { margin:0 0 .9rem; }
.plan-primary { margin:0 0 1.5rem; }
.plan-primary .hint { flex-basis:100%; margin:.2rem 0 0; }
.plan-regenerate { display:inline-flex; align-items:center; gap:.4rem; }
a.button-link { display:inline-block; padding:.7rem 1.4rem; text-decoration:none; color:#fff; }
.plan-quality { margin:2rem 0 0; }
.plan-quality .band-title { display:flex; align-items:center; gap:.6rem; }
.quality-criterion { margin:0 0 1rem; }
.quality-criterion h3 { display:flex; align-items:center; gap:.5rem; margin:0 0 .4rem; font-size:var(--fs-body); }
.quality-criterion ul { margin:.4rem 0 0; padding-left:1.2rem; }
.quality-remedy { font-weight:500; }