/* Sprint 15 (D6): nothing on a public page renders below 12.5px.
   Anything smaller is uncomfortable on a 1920 display, which is the width
   the Owner actually uses. Enforced here at source AND asserted per page by
   e2e/ui-standards.spec.js -- do not reintroduce a 0.6-0.72rem badge or tag. */
:root {
  --bg: #0b0d12;
  --panel: #14171f;
  --panel-hover: #171b25;
  --border: #262b3a;
  --text: #eef0f4;
  --muted: #8b93a7;
  --accent: #5b93ff;
  --accent-soft: #1b2740;
  --green: #3ecf8e;
  --red: #ef5a5a;
  --amber: #e6b450;
  --radius: 12px;

  /* Sprint 16 -- SPACING SCALE. One ratio, so gaps are decisions rather than
     guesses, and so PROXIMITY can do its job: related things share the small
     steps, separate things get the large ones. The pages previously used
     near-uniform margins, which is why nothing looked grouped. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* TYPE LAYERS. Four distinct steps, each clearly different from its
     neighbour -- a section label must not be mistakable for a heading, and a
     heading must not be mistakable for body. Sizes clamp so they scale
     smoothly rather than jumping at a breakpoint. */
  --t-display: clamp(30px, 2.8vw, 40px);
  --t-title:   clamp(21px, 1.7vw, 25px);
  --t-section: clamp(15px, 1.05vw, 16px);
  --t-body:    17px;
  --t-small:   14px;
  --t-micro:   12.5px;

  /* ELEVATION. A 1px border on near-black is almost invisible; a lifted
     surface plus a real shadow makes a panel an object. */
  --lift-1: 0 1px 2px rgba(0,0,0,0.30);
  --lift-2: 0 4px 16px rgba(0,0,0,0.38), 0 1px 2px rgba(0,0,0,0.40);
  --panel-raised: #171b24;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(91,147,255,0.08), transparent),
    var(--bg);
  color: var(--text);
  /* Sprint 15: 17px to match the home page. The dark pages were 16px, so body
     text changed size as the visitor moved between pages. */
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Sprint 15: ONE shell for the whole public surface. Before this, header used
   max-width 1000 + 32px padding while main used 1000 + 20px, so the header sat
   12px right of its own panels; usage/dashboard used 1100 and sat 62px out;
   and home/case-study used 860/700, so every navigation shifted the page
   sideways by 60-140px. --shell is the single source of that geometry now. */
:root {
  --shell: 1200px;
  --shell-pad: 2rem;
  /* 58ch, tuned EMPIRICALLY once the guard could measure real characters per
     line rather than estimate them from width. The ch unit is the width of
     "0" in the current font, so the same ch value yields different real line
     lengths per face -- 68ch of Inter measured 76-88 actual characters. 58ch
     lands in the 50-75 band for the faces this site actually uses. */
  --prose: 58ch;
}

header {
  padding: var(--s8) var(--shell-pad) var(--s5);
  border-bottom: 1px solid var(--border);
  max-width: var(--shell);
  margin: 0 auto;
}

/* Sprint 15: was 1.65rem (26.4px) against home's 44px -- a page title that
   read as body text. clamp keeps it sane on a phone. */
h1 { margin: 0 0 var(--s3); font-size: var(--t-display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
h1 .sub { color: var(--muted); font-weight: 400; }
.tagline {
  margin: 0; color: var(--muted); font-size: var(--t-body);
  max-width: var(--prose); line-height: 1.6;
}

/* Sprint 16 (DD3): the nav sat directly under the tagline at a similar size
   and weight, so three rows of look-alike text stacked before any content
   began. It now has its own band -- separated above, tighter type, and a
   visible active state -- so the eye reads it as a control strip. */
.top-nav {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; row-gap: var(--s2);
  gap: var(--s5); align-items: center;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
}
.top-nav a { color: var(--muted); text-decoration: none; font-size: 0.88rem; font-weight: 600; padding-bottom: 0.15rem; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.top-nav a:hover { color: var(--text); }
.top-nav a strong { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 0.15rem; font-weight: 700; }

/* Keyboard-focus visibility (accessibility basics) -- browsers vary in
   whether they show a default focus ring on custom interactive elements
   like our card-as-link pattern; make it explicit and consistent. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  header { padding: 1.5rem 1rem 1rem; }
  main { padding: 1.25rem 0.85rem 3rem; }
  h1 { font-size: 1.35rem; }
  .top-nav { gap: 0.85rem; }
  .panel { padding: 1.1rem 1.1rem; }
}

main {
  max-width: var(--shell);
  margin: 0 auto;
  /* padding-x MUST match header's, or the header and the panels below it do
     not share a left edge -- that was the 12px offset on four pages. */
  padding: 2rem var(--shell-pad) 4.5rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.panel h2 {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.panel h2::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.panel > p { line-height: 1.65; }
.panel + .panel { margin-top: -0.25rem; }

.hint { color: var(--muted); font-size: 0.85rem; margin-top: -0.4rem; line-height: 1.5; }

textarea {
  width: 100%;
  background: #0d0f14;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}

button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.75rem;
  margin-right: 0.5rem;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary { background: #2a2e3a; color: var(--muted); font-weight: 500; }

.status-badge {
  display: inline-block;
  margin-left: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
  border: 1px solid transparent;
}
.status-idle { background: #2a2e3a; color: var(--muted); }
.status-running { background: #1e3a5f; color: #7db4ff; }
.status-waiting { background: #4a3a12; color: var(--amber); }
.status-completed { background: #124a35; color: var(--green); }
.status-failed { background: #4a1616; color: var(--red); }

#activity-list, #verification-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 0.85rem;
}
/* Bounded, internally-scrollable log — growing activity never grows the
   whole page or shifts content the user has scrolled down to read. */
#activity-list {
  max-height: 320px;
  overflow-y: auto;
  overflow-anchor: none;
}
#activity-list li, #verification-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
#activity-list li:last-child, #verification-list li:last-child { border-bottom: none; }
#activity-list .tool-name { color: var(--accent); font-weight: 600; }
#activity-list .ok { color: var(--green); }
#activity-list .err { color: var(--red); }
#activity-list .stage-marker { color: var(--text); font-weight: 700; margin-top: 0.4rem; }

.proposal-meta { font-size: 0.9rem; margin-bottom: 0.75rem; }
.proposal-meta div { margin-bottom: 0.25rem; }

.diff {
  background: #0d0f14;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.approval-controls button.approve { background: var(--green); }
.approval-controls button.reject { background: var(--red); }

#approval-result { font-size: 0.9rem; color: var(--muted); }

#result-banner {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
#result-banner.success { background: #124a35; color: var(--green); }
#result-banner.failed { background: #4a1616; color: var(--red); }
#result-banner.neutral { background: #2a2e3a; color: var(--muted); }

#result-text {
  background: #0d0f14;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  white-space: pre-wrap;
  font-size: 0.85rem;
  max-height: 400px;
  overflow-y: auto;
}

#verification-list li { padding: 0.6rem 0; }
.verification-summary {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.7rem;
  background: #0d0f14;
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: pre-wrap;
  font-size: 0.8rem;
  max-height: 220px;
  overflow-y: auto;
}

/* Sprint 15, minimum legible size. Measured on production 2026-09-29:
   showcase rendered text at 10.88px, dashboard at 11.2px, usage at 11.52px.
   Anything under 12px is uncomfortable on a 1920 display, so the floor is
   enforced here rather than left to each component. */
/* Targeted, not blanket. The first attempt used
   `body, p, li, ... { font-size: max(1em, 12px) }`, which resolved to 1em of
   the ROOT (16px) and silently overrode the 17px body set above -- a rule
   meant to raise a floor instead lowered the baseline on seven pages. Only
   the classes that actually rendered below 12px are named here. */
.hint, .tiny, .note, .badge, .exec-note, .econ-note,
.sc-live-badge, .sc-story-field-label, .sc-status-pill,
.st-ok, .st-warn, .st-bad { font-size: 12.5px; }

/* Sprint 15: Usage and Dashboard offered a visitor nothing to act on in the
   first screen -- measured 0 interactive elements above the fold outside the
   navigation. A primary action above the fold is one of the few landing-page
   findings with a consistent effect size, so both pages now carry one. */
.fold-actions { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fold-actions a { color: var(--accent); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.fold-actions a:hover { text-decoration: underline; }

/* Sprint 15 (D9). The Owner's review found raw ledger identifiers --
   `delivery_events`, `event_type=run_usage_summary`,
   `DEPLOYMENT_STATUS_UNKNOWN` -- printed into sentences on a page recruiters
   read. The identifiers are real provenance and are not deleted; they are
   folded behind a summary written in English. Closed by default so the page
   reads as prose, one click from open so no evidence is lost. */
details.prov {
  margin: 0.6rem 0 0;
  font-size: 12.5px;
  color: var(--muted);
  max-width: var(--prose);
}
details.prov > summary {
  cursor: pointer;
  display: inline-block;
  padding: 0.15rem 0;
  color: var(--muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
details.prov > summary:hover { color: var(--text); }
details.prov > code {
  display: block;
  margin-top: 0.45rem;
  padding: 0.5rem 0.65rem;
  background: rgba(127, 127, 127, 0.10);
  border-radius: 3px;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  line-height: 1.5;
}

/* The machine value kept alongside its English label: present and copyable,
   visibly secondary to the words next to it. */
code.raw-enum {
  font-size: 12.5px;
  color: var(--muted);
  opacity: 0.85;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Sprint 16 -- DD1, the defect the Owner actually felt.

   Measured on production 2026-09-30: paragraphs rendering at 172 characters
   on dashboard, usage, workbench, triage and ask-codebase, with 53 paragraphs
   sitewide over 90. The readable band is 50-75 (66 optimal). Sprint 15
   defined --prose: 68ch and applied it to .tagline, .lede and a few named
   children -- never to the body text inside panels, which is where nearly all
   of this site's prose lives. The two pages with zero violations (case-study,
   standing-interview) are precisely the two where it was applied.

   So it is applied structurally here rather than class by class, because
   enumerating the classes is what failed last time.
   ========================================================================== */
main p,
main li,
main dd,
main blockquote,
.wrap p,
.wrap li,
.wrap dd,
.si-wrap p,
.panel > p,
.panel li {
  max-width: var(--prose);
}

/* Things that are NOT prose must keep the full width, or tables and stat
   grids collapse into a narrow column. This is the exception list, and it is
   deliberately about STRUCTURE (a table is a table) rather than about a
   particular page's class names. */
main table, main table > *,
.exec-grid, .exec-grid > *,
.tiles, .tiles > *,
.proof, .proof > *,
.erow, .erow > *,
.cap-table, .cap-table > *,
.si-chips, .si-chips > * {
  max-width: none;
}

/* ==========================================================================
   Sprint 16 -- DD6, visual hierarchy.
   ========================================================================== */

/* Panels read as objects, not outlined regions. A 1px border on a near-black
   ground gives almost no separation; a lifted surface and a real shadow do. */
.panel {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
  padding: var(--s6);
  margin-bottom: var(--s6);
}

/* Section labels sit ABOVE their heading in the hierarchy but BELOW it in
   visual weight -- small, spaced, quiet. They were competing with headings. */
.panel > h2,
.panel > h3 {
  font-size: var(--t-section);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 var(--s5);
}

/* Real headings inside a panel: the layer the eye should land on second. */
.panel h4 {
  font-size: var(--t-title);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 var(--s3);
  max-width: var(--prose);
}

main h2 {
  font-size: var(--t-title);
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: var(--s8) 0 var(--s4);
  max-width: var(--prose);
}

main > section,
main > .panel {
  margin-bottom: var(--s7);
}

/* Body copy earns its own line-height. 1.55 is fine for a tagline and tight
   for a paragraph someone has to read several of. */
main p { line-height: 1.65; margin: 0 0 var(--s4); }
main li { line-height: 1.6; }

/* Links inside prose should be findable without shouting. */
main p a, main li a { color: var(--accent); text-underline-offset: 3px; }

/* ==========================================================================
   Sprint 16 -- SURFACE IDENTITY.

   The Owner asked for every page to look unique. The 2026 portfolio research
   says the opposite for a single site: one accent, used sparingly. Both are
   right about different things, so the split is deliberate --

     SHARED   spacing scale, layout, reading measure, hierarchy rules
     UNIQUE   accent, display face, surface tint, heading treatment

   Each page is recognisably itself and recognisably part of one product.

   home is ABSENT from this block on purpose: the Owner said its colour and
   font already look good, so its inline styles keep full control.
   ========================================================================== */

body[data-surface] {
  font-family: var(--font-body, Inter), -apple-system, "Segoe UI", Roboto, sans-serif;
}
body[data-surface] h1,
body[data-surface] main h2,
body[data-surface] .panel h4 {
  font-family: var(--font-display, var(--font-body, Inter)), -apple-system, "Segoe UI", sans-serif;
}

/* Accent is used on the four places it earns attention, and nowhere else. */
body[data-surface] h1 .sub { color: var(--accent); opacity: 0.92; }
body[data-surface] .panel > h2,
body[data-surface] .panel > h3 { color: var(--accent); }
body[data-surface] a:focus-visible,
body[data-surface] button:focus-visible,
body[data-surface] input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
body[data-surface] header { border-bottom-color: var(--accent-line, var(--border)); }
body[data-surface] .top-nav a[aria-current],
body[data-surface] .top-nav a.active { color: var(--accent); }

/* ---- workbench: the agent doing work. Indigo, Inter, tight. ------------- */
body[data-surface="workbench"] {
  --font-display: Sora;
  --accent: #818cf8;
  --accent-soft: #1e1b3a;
  --accent-line: #2e2a52;
  --font-body: Inter;
  --bg: #0a0b10;
  letter-spacing: -0.006em;
}

/* ---- triage: incidents. Amber, because attention is the whole point. ---- */
body[data-surface="triage"] {
  --font-display: "IBM Plex Sans";
  --accent: #f0b429;
  --accent-soft: #2a2110;
  --accent-line: #3d3018;
  --font-body: Inter;
  --bg: #0c0a07;
  letter-spacing: -0.006em;
}

/* ---- ask-codebase: retrieval. Cyan, Space Grotesk. --------------------- */
body[data-surface="ask-codebase"] {
  --accent: #22d3ee;
  --accent-soft: #08303a;
  --accent-line: #124957;
  --font-body: Inter;
  --font-display: "Space Grotesk";
  --bg: #070d10;
}

/* ---- showcase: proof. Emerald -- the colour of a passing check. -------- */
body[data-surface="showcase"] {
  --accent: #34d399;
  --accent-soft: #072e22;
  --accent-line: #0f4835;
  --font-body: Inter;
  --font-display: Outfit;
  --bg: #060d0a;
}

/* ---- usage: money and telemetry. Gold, and MONOSPACE NUMERALS, which is
       the one place a mono face is functional rather than stylistic --
       figures line up in a column and can be compared down the page. ----- */
body[data-surface="usage"] {
  --accent: #d4a574;
  --accent-soft: #2b2113;
  --accent-line: #3f301c;
  --font-body: Inter;
  --font-display: "JetBrains Mono";
  --bg: #0b0906;
}
body[data-surface="usage"] .exec-value,
body[data-surface="usage"] .summary-value,
body[data-surface="usage"] td {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---- dashboard: the control surface. Blue, the system default. --------- */
body[data-surface="dashboard"] {
  --font-display: Manrope;
  --accent: #60a5fa;
  --accent-soft: #10243f;
  --accent-line: #1d3a5f;
  --font-body: Inter;
  --bg: #080b11;
}

/* ---- standing-interview: a conversation. Violet, warmer, softer. ------- */
body[data-surface="standing-interview"] {
  --font-display: Fraunces;
  --accent: #c084fc;
  --accent-soft: #2a1938;
  --accent-line: #3d2652;
  --font-body: Inter;
  --bg: #0a070e;
}

/* ---- case-study: long-form narrative. A serif, because this page is read
       rather than scanned, and a serif at 17px/1.7 is measurably easier to
       read in long passages. ------------------------------------------- */
body[data-surface="case-study"] {
  --accent: #b08968;
  --font-body: "Source Serif 4";
  --font-display: "Source Serif 4";
}
body[data-surface="case-study"] main p,
body[data-surface="case-study"] .wrap p {
  font-size: 18px;
  line-height: 1.75;
}

/* Inter reads as default at normal tracking and as premium at tight
   tracking. This is the single cheapest typographic upgrade available. */
body[data-surface] h1 { letter-spacing: -0.028em; }

/* Serif display faces carry differently from geometric sans: they need a
   touch more size and much less negative tracking, or they look cramped. */
body[data-surface="standing-interview"] h1,
body[data-surface="case-study"] h1 {
  letter-spacing: -0.012em;
  font-size: clamp(32px, 3vw, 44px);
}
/* Mono as a display face only works at a heavier weight and wider tracking. */
body[data-surface="usage"] h1 {
  letter-spacing: 0.005em;
  font-size: clamp(26px, 2.2vw, 33px);
}

/* ==========================================================================
   Sprint 16 -- SURFACE SIGNATURES.

   Colour and type alone still leave eight pages with the same silhouette. A
   signature is one structural move per surface, drawn from what the page does,
   so the variation reads as considered rather than decorative. One move each,
   deliberately -- two would be costume.
   ========================================================================== */

/* workbench: a machine working. Squared corners and a scan-line hairline at
   the top of each panel -- the visual language of an instrument, not a card. */
body[data-surface="workbench"] .panel {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
body[data-surface="workbench"] .panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 60%);
  opacity: 0.7;
}

/* triage: incidents. A left accent bar is the universal shorthand for
   "something needs looking at", and it is the one page where that is true. */
body[data-surface="triage"] .panel {
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ask-codebase: retrieval. A soft focus glow behind the panel, because the
   page is about surfacing something out of a large dark corpus. */
body[data-surface="ask-codebase"] .panel {
  border-radius: 16px;
  box-shadow: var(--lift-2), 0 0 60px -20px rgba(34, 211, 238, 0.25);
}

/* showcase: the argument. Generous radius, a lifted surface, and a rule under
   each section label so the page reads as a structured document. */
body[data-surface="showcase"] .panel {
  border-radius: 14px;
  box-shadow: var(--lift-2);
}
body[data-surface="showcase"] .panel > h2,
body[data-surface="showcase"] .panel > h3 {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--accent-line);
}

/* usage: a ledger. Ruled rows and tabular figures -- the page is a set of
   numbers that must be comparable down a column. */
body[data-surface="usage"] .panel { border-radius: 6px; }
body[data-surface="usage"] table tr { border-bottom: 1px solid var(--border); }
body[data-surface="usage"] .exec-stat {
  border-left: 2px solid var(--accent-line);
  padding-left: var(--s4);
}

/* dashboard: a control surface. Denser, flatter, more panels visible at once
   -- this is the one page where compactness is the point. */
body[data-surface="dashboard"] .panel {
  padding: var(--s5);
  margin-bottom: var(--s5);
  border-radius: 8px;
}
body[data-surface="dashboard"] main h2 { margin-top: var(--s7); }

/* standing-interview: a conversation. The widest breathing room on the site
   and a centred column, because one question at a time is the whole idea. */
body[data-surface="standing-interview"] .si-wrap { padding-top: var(--s7); }
body[data-surface="standing-interview"] .si-exchange {
  border-top: 1px solid var(--accent-line);
  padding: var(--s6) 0;
}

/* case-study: long-form. An editorial opening -- the first paragraph carries
   more size and colour, the way a standfirst does in print. */
body[data-surface="case-study"] .wrap > p:first-of-type {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text);
}

/* ==========================================================================
   Sprint 16 -- PROTOTYPICALITY.

   Research basis: Tuch et al. (IJHCS 2012) and the 2023 follow-up find that
   prototypical page structure predicts perceived trustworthiness, accounting
   for 29-68% of the variance depending on category. For a portfolio whose
   entire job is to be believed by a recruiter, that is the highest-value
   property on this page -- higher than any accent choice.

   Measured here before the fix: the navigation sat at y=0 on home, case-study
   and standing-interview, and at y=206-305 on the other six, because those
   pages render it INSIDE the header below the title. A visitor moving between
   pages had the primary control move by a third of a screen.

   The nav is now first on every page. Done with flex order rather than by
   moving nine elements, so the document order (title first) stays correct for
   a screen reader while the visual order matches convention.
   ========================================================================== */
header {
  display: flex;
  flex-direction: column;
  padding-top: var(--s5);
}
header .top-nav {
  order: -1;
  margin-top: 0;
  margin-bottom: var(--s7);
  padding-top: 0;
  padding-bottom: var(--s4);
  border-top: none;
  border-bottom: 1px solid var(--accent-line, var(--border));
}

/* Long prose inside a table cell is still prose. The exception list above
   un-caps tables so columns can size themselves, which is right for figures
   and wrong for a sentence -- these are the cells that carry sentences. */
main td, main th, main .hint, main .cap-table td {
  max-width: 54ch;
}

/* Case-study paragraphs sit directly in .wrap, which the page's own rules do
   not cap and which the exception list above un-caps. Set explicitly, with
   enough specificity to win, rather than adding another selector to a list
   that has already been wrong twice this sprint. */
body[data-surface="case-study"] .wrap p,
body[data-surface="case-study"] .wrap li,
body[data-surface="case-study"] .wrap dd {
  max-width: var(--prose);
}

/* ask-codebase renders its evidence notes as .hint inside panels, which the
   54ch cap reaches only when they are in a table. */
body[data-surface="ask-codebase"] .panel .hint,
body[data-surface="ask-codebase"] .panel p {
  max-width: 54ch;
}

/* ask-codebase: its evidence notes live in .panel li and .ev rows, which the
   panel paragraph cap does not reach. */
body[data-surface="ask-codebase"] .panel li,
body[data-surface="ask-codebase"] li {
  max-width: 54ch;
}

/* ask-codebase describes its mechanism in a <dl>, which sits outside <main>
   and so was missed by every container-scoped rule above. Definition lists
   carry prose like any other element. */
body[data-surface="ask-codebase"] dd,
body[data-surface="ask-codebase"] dt {
  max-width: 54ch;
}

/* ==========================================================================
   Sprint 16 -- SHELL WIDTH FOLLOWS CONTENT TYPE.

   Capping prose at 58ch inside a 1136px panel fixed the reading measure and
   created a new imbalance: a wide panel with a narrow column of text and a
   large empty right half. That is DD2 again, one level down.

   A page's container should be as wide as its widest REAL content. Pages
   built from data grids need the full shell; pages built from paragraphs do
   not, and forcing them to it is what produced the empty space.
   ========================================================================== */

/* Prose-dominant surfaces: the shell hugs the text. */
body[data-surface="triage"],
body[data-surface="ask-codebase"],
body[data-surface="standing-interview"] {
  --shell: 860px;
}

/* Data-dominant surfaces keep the full shell -- stat grids, tables and
   multi-column evidence genuinely need it. */
body[data-surface="usage"],
body[data-surface="dashboard"],
body[data-surface="workbench"],
body[data-surface="showcase"] {
  --shell: 1200px;
}

/* Inside a wide shell, a panel that holds only prose should not stretch to
   fill it either. Panels containing grids or tables are exempt. */
body[data-surface="workbench"] .panel:not(:has(table)):not(:has(.exec-grid)),
body[data-surface="showcase"] .panel:not(:has(table)):not(:has(.exec-grid)) {
  max-width: 76ch;
}

/* Automation Sprint 4: showcase prose measured 77 characters a line at 58ch
   (design-standards caps it at 75). Its panel copy runs to longer words than
   the other surfaces, so the same ch value packs more characters. A smaller
   measure here only; every other surface is unchanged. */
body[data-surface="showcase"] {
  --prose: 54ch;
}