/* site.css: the portfolio console, one stylesheet for every page that links it.
   Colors come only from assets/theme/tokens.css (copied below by build_pages.py; do not edit
   between the tokens markers). The "chrome" block (canvas, bar, theme toggle) is also copied
   inline into the self-contained tool pages and the Quarto theme; the "shared" block (labels,
   status chips, typed links, notes, thumbnails) is copied into the Quarto theme.
   No external fonts, scripts or images. Dark is the default; see tokens.css for the rules. */

/* tokens:begin */
/* dark:begin */
:root {
  color-scheme: dark;
  --bg: #0b0f15; --bg-2: #080b10; --surface: #111721; --surface-2: #161e2a; --surface-3: #1c2533;
  --line: #222c3b; --line-2: #2e3a4d; --control: #62718a;
  --ink: #e8eef6; --text: #c9d3e1; --muted: #98a5b8; --faint: #8593a8;
  --accent: #3ad7c8; --accent-ink: #8ff0e6; --accent-soft: rgba(58,215,200,.12); --accent-ring: rgba(58,215,200,.35); --on-accent: #06231f;
  --blue: #7aa4ff; --green: #4fd394; --amber: #f0b450; --red: #ff7a7a; --violet: #c4a7f5;
  --blue-soft: rgba(122,164,255,.14); --green-soft: rgba(79,211,148,.14); --amber-soft: rgba(240,180,80,.14); --red-soft: rgba(255,122,122,.14);
  --led-fg: #93dbae; --led-bg: #17301f; --led-line: #2f6b45;
  --sup-fg: #a9ccff; --sup-bg: #1a2b40; --sup-line: #36557d;
  --tools-fg: #d3bcf7; --tools-bg: #2a2140; --tools-line: #57457f;
  --gap-fg: #f5b48a; --gap-bg: #3a2416; --gap-line: #7a4b2c;
  --note-bg: #2a2119; --note-line: #e0935f;
  --grid: rgba(58,215,200,.022); --glow: rgba(122,164,255,.10); --bar-bg: rgba(11,15,21,.82);
  --shadow-1: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 0 0 1px var(--accent-ring), 0 12px 28px rgba(0,0,0,.45);
}
/* dark:end */

/* static:begin (type, space, radius and motion: the same in both themes) */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-label: 12px; --fs-small: 13px; --fs-card: 14px; --fs-body: 16px; --fs-lede: 18px;
  --fs-h3: 17px; --fs-h2: 22px; --fs-h1: clamp(28px, 1.1rem + 2vw, 36px); --fs-display: clamp(36px, 1.4rem + 3.2vw, 52px); --fs-kpi: 26px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --r-lg: 12px; --r-md: 8px; --r-sm: 6px; --r-pill: 999px;
  --ease: cubic-bezier(.2,.7,.2,1); --dur: 140ms;
  --bar-h: 56px; --measure: 70ch; --wrap: 1200px;
}
/* static:end */

/* light:begin (the source of the light theme; the two copies below are generated from it) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f6f9; --bg-2: #eef1f5; --surface: #ffffff; --surface-2: #eef2f6; --surface-3: #e4e9ef;
    --line: #d7dee7; --line-2: #c3ccd8; --control: #7d8a9b;
    --ink: #121a24; --text: #1f2a37; --muted: #4d5a69; --faint: #5b6878;
    --accent: #0b7268; --accent-ink: #075b53; --accent-soft: rgba(11,114,104,.08); --accent-ring: rgba(11,114,104,.30); --on-accent: #ffffff;
    --blue: #0757bf; --green: #1d6b3c; --amber: #8a5300; --red: #b42318; --violet: #6b48a8;
    --blue-soft: rgba(7,87,191,.10); --green-soft: rgba(29,107,60,.10); --amber-soft: rgba(138,83,0,.10); --red-soft: rgba(180,35,24,.10);
    --led-fg: #1d5e35; --led-bg: #e3f2e8; --led-line: #9ccbad;
    --sup-fg: #0b4f9c; --sup-bg: #e5eefa; --sup-line: #a7c3e8;
    --tools-fg: #5b3a8e; --tools-bg: #efe9f8; --tools-line: #c6b5e3;
    --gap-fg: #8a3a10; --gap-bg: #fbebdf; --gap-line: #e3b796;
    --note-bg: #fbf3e9; --note-line: #b5561f;
    --grid: rgba(18,26,36,.035); --glow: rgba(11,114,104,.06); --bar-bg: rgba(244,246,249,.85);
    --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    --shadow-2: 0 0 0 1px var(--accent-ring), 0 10px 24px rgba(16,24,40,.12);
  }
}
/* light:end */

/* light-copy:begin (generated by build_pages.py from the light block above; do not edit) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9; --bg-2: #eef1f5; --surface: #ffffff; --surface-2: #eef2f6; --surface-3: #e4e9ef;
  --line: #d7dee7; --line-2: #c3ccd8; --control: #7d8a9b;
  --ink: #121a24; --text: #1f2a37; --muted: #4d5a69; --faint: #5b6878;
  --accent: #0b7268; --accent-ink: #075b53; --accent-soft: rgba(11,114,104,.08); --accent-ring: rgba(11,114,104,.30); --on-accent: #ffffff;
  --blue: #0757bf; --green: #1d6b3c; --amber: #8a5300; --red: #b42318; --violet: #6b48a8;
  --blue-soft: rgba(7,87,191,.10); --green-soft: rgba(29,107,60,.10); --amber-soft: rgba(138,83,0,.10); --red-soft: rgba(180,35,24,.10);
  --led-fg: #1d5e35; --led-bg: #e3f2e8; --led-line: #9ccbad;
  --sup-fg: #0b4f9c; --sup-bg: #e5eefa; --sup-line: #a7c3e8;
  --tools-fg: #5b3a8e; --tools-bg: #efe9f8; --tools-line: #c6b5e3;
  --gap-fg: #8a3a10; --gap-bg: #fbebdf; --gap-line: #e3b796;
  --note-bg: #fbf3e9; --note-line: #b5561f;
  --grid: rgba(18,26,36,.035); --glow: rgba(11,114,104,.06); --bar-bg: rgba(244,246,249,.85);
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-2: 0 0 0 1px var(--accent-ring), 0 10px 24px rgba(16,24,40,.12);
}
@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    --bg: #f4f6f9; --bg-2: #eef1f5; --surface: #ffffff; --surface-2: #eef2f6; --surface-3: #e4e9ef;
    --line: #d7dee7; --line-2: #c3ccd8; --control: #7d8a9b;
    --ink: #121a24; --text: #1f2a37; --muted: #4d5a69; --faint: #5b6878;
    --accent: #0b7268; --accent-ink: #075b53; --accent-soft: rgba(11,114,104,.08); --accent-ring: rgba(11,114,104,.30); --on-accent: #ffffff;
    --blue: #0757bf; --green: #1d6b3c; --amber: #8a5300; --red: #b42318; --violet: #6b48a8;
    --blue-soft: rgba(7,87,191,.10); --green-soft: rgba(29,107,60,.10); --amber-soft: rgba(138,83,0,.10); --red-soft: rgba(180,35,24,.10);
    --led-fg: #1d5e35; --led-bg: #e3f2e8; --led-line: #9ccbad;
    --sup-fg: #0b4f9c; --sup-bg: #e5eefa; --sup-line: #a7c3e8;
    --tools-fg: #5b3a8e; --tools-bg: #efe9f8; --tools-line: #c6b5e3;
    --gap-fg: #8a3a10; --gap-bg: #fbebdf; --gap-line: #e3b796;
    --note-bg: #fbf3e9; --note-line: #b5561f;
    --grid: rgba(18,26,36,.035); --glow: rgba(11,114,104,.06); --bar-bg: rgba(244,246,249,.85);
    --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    --shadow-2: 0 0 0 1px var(--accent-ring), 0 10px 24px rgba(16,24,40,.12);
  }
}
/* light-copy:end */
/* tokens:end */

/* chrome:begin */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--glow), transparent 62%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 44px 44px;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }   /* date and text fields focus an inner part */
[tabindex="-1"]:focus { outline: none; }   /* programmatic focus targets (main, tab panels) are not controls */
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); border: 1px solid var(--accent); font: 600 14px var(--sans); text-decoration: none; }
.skip:focus { top: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* the top bar: brand, seven destinations, a constant fact, the theme toggle, and Menu under 960 px */
.top { position: sticky; top: 0; z-index: 50; background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 0 var(--accent-soft); }
.top > .wrap { display: flex; align-items: center; gap: 4px 12px; min-height: var(--bar-h); max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.top .name { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; padding: 8px 0;
  font: 650 15px/1 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.top .name:hover { color: var(--ink); }
.top .mark { width: 10px; height: 10px; flex: none; background: var(--accent); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.top .nav { display: flex; align-items: center; gap: 2px; }
.top .nav a { position: relative; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-sm);
  font: 550 14px/1.2 var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.top .nav a:hover { color: var(--ink); background: var(--surface-3); }
.top .nav a[aria-current] { color: var(--accent-ink); background: var(--accent-soft); }
.top .nav a[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -11px; height: 2px; border-radius: 2px; background: var(--accent); }
.top .bar-facts { display: none; padding-left: 12px; border-left: 1px solid var(--line-2); font: 500 12px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.theme-toggle, .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  height: 36px; min-width: 36px; padding: 0 9px; border: 1px solid var(--control); border-radius: var(--r-sm);
  background: transparent; color: var(--text); font: 600 13px/1 var(--sans); cursor: pointer; }
.theme-toggle:hover, .menu-toggle:hover { color: var(--ink); background: var(--surface-3); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .i-moon { display: none; }
}
.menu-toggle { display: none; }
html:not(.js) .theme-toggle { display: none; }
@media (min-width: 720px) { .top > .wrap { padding: 0 24px; } }
@media (min-width: 1280px) { .top .bar-facts { display: inline; } }
@media (max-width: 959.98px) {
  .js .menu-toggle { display: inline-flex; }
  .js .top .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px 16px 14px; background: var(--surface); border-bottom: 1px solid var(--line-2); box-shadow: 0 18px 32px rgba(0,0,0,.35); }
  .js .top.open .nav { display: flex; }
  .js .top .nav a { min-height: 48px; display: flex; align-items: center; padding: 12px 14px; font-size: 16px; }
  .js .top .nav a[aria-current]::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  html:not(.js) .top > .wrap { flex-wrap: wrap; padding-top: 6px; }
  html:not(.js) .top .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html:not(.js) .top .nav a[aria-current]::after { bottom: 0; }
}
@media (pointer: coarse) { .theme-toggle, .menu-toggle { height: 44px; min-width: 44px; } }

/* legacy names used by the inline styles of older pages, mapped onto the tokens */
:root {
  --panel: var(--surface); --panel2: var(--surface-2); --panelhi: var(--surface-2); --line2: var(--line-2);
  --mut: var(--muted); --dim: var(--faint); --teal: var(--accent); --gold: var(--amber); --accent2: var(--blue); --r: var(--r-lg); --radius: var(--r-lg);
}
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  body::before { display: none; }
  .top .nav a[aria-current] { border-color: Highlight; }
  :focus-visible { outline-color: Highlight; }
}
@media print {
  body::before, .skip, .theme-toggle, .menu-toggle, .top .nav, .top .bar-facts { display: none !important; }
  .top { position: static; background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid #000; }
}
/* chrome:end */

/* shared:begin */
.eyebrow, .kicker { margin: 0 0 8px; font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.eyebrow .n { color: var(--faint); }

/* lifecycle labels: the four label hues, text verbatim */
.lab { display: inline-block; max-width: 100%; margin: 0 4px 4px 0; padding: 3px 10px; vertical-align: middle;
  border: 1px solid; border-radius: 11px; font: 600 12.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; white-space: normal; }
.lab.led { color: var(--led-fg); background: var(--led-bg); border-color: var(--led-line); }
.lab.sup { color: var(--sup-fg); background: var(--sup-bg); border-color: var(--sup-line); }
.lab.tools { color: var(--tools-fg); background: var(--tools-bg); border-color: var(--tools-line); }
.lab.gap { color: var(--gap-fg); background: var(--gap-bg); border-color: var(--gap-line); }

/* execution status: square chips with a shape marker, so color is never alone */
.st { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin: 0 4px 4px 0; padding: 3px 9px; vertical-align: middle;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text);
  font: 500 12px/1.35 var(--mono); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.st::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.st-runs { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.st-runs::before { background: currentColor; }
.st-parse, .st-struct { color: var(--blue); background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.st-parse::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.st-struct::before { border-radius: 1px; background: currentColor; width: 7px; height: 7px; }
.st-notrun { color: var(--muted); }
.st-manual, .st-revision, .st-synthetic { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.st-manual::before { border-radius: 1px; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.st-revision::before { content: "\21BB\FE0E"; width: auto; height: auto; border: 0; border-radius: 0; font: 700 12px/1 var(--sans); }
.st-synthetic::before { width: 6px; height: 6px; border: 0; background: currentColor; }
.st-fail { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.st-fail::before { border-radius: 1px; border: 0; width: 8px; height: 8px; background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%); }
.st-note::before { display: none; }
code span.st, pre span.st { display: inline; gap: 0; max-width: none; margin: 0; padding: 0; vertical-align: baseline; border: 0; border-radius: 0;
  background: none; font: inherit; overflow-wrap: normal; }   /* Pandoc marks string tokens in highlighted code with .st */
code span.st::before, pre span.st::before { content: none; display: none; }
.chips { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }
.labs { margin: 0 0 8px; }

/* lifecycle labels with qualifiers, as rows: the label name in its hue, then the qualifier */
.labs-dl { display: grid; gap: 5px; margin: 0 0 12px; padding: 0; font-size: 13.5px; line-height: 1.4; }
.labs-dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 0; }
.labs-dl dt { display: inline-flex; align-items: baseline; gap: 7px; margin: 0; font: 650 12.5px/1.4 var(--sans); white-space: nowrap; }
.labs-dl dt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.labs-dl dd { margin: 0; color: var(--text); }
.labs-dl .led dt { color: var(--led-fg); } .labs-dl .sup dt { color: var(--sup-fg); }
.labs-dl .tools dt { color: var(--tools-fg); } .labs-dl .gap dt { color: var(--gap-fg); }
.labs-dl .tools dt::before { border-radius: 2px; } .labs-dl .gap dt::before { border-radius: 1px; transform: translateY(-1px) rotate(45deg); }
.labs-dl .gap dd { color: var(--gap-fg); }

/* secondary statuses: a quiet line under the chip row, never a second chip pile */
.aux { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: -2px 0 10px; font: 500 12px/1.45 var(--mono); color: var(--muted); }
.aux .ax { display: inline-flex; align-items: baseline; gap: 6px; }
.aux .ax-synthetic { color: var(--amber); }
.aux .ax-synthetic::before { content: ""; flex: none; width: 6px; height: 6px; background: currentColor; transform: translateY(-1px); }
.aux .ax-manual, .aux .ax-revision { color: var(--amber); }
.aux .ax-parse, .aux .ax-struct { color: var(--blue); }
.aux .ax-runs { color: var(--green); }

/* typed link chips: the glyph says what kind of destination it is */
ul.go { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 14px 0 0; }
ul.go li { margin: 0; max-width: none; }
ul.go a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text);
  font: 500 12.5px/1.25 var(--mono); text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
ul.go a::before { content: "\25B8\FE0E"; color: var(--accent); font-family: var(--sans); }
ul.go a[data-type="run"]::before { content: "\25B6\FE0E"; font-size: 10px; }
ul.go a[data-type="snapshot"]::before { content: "\25A3\FE0E"; }
ul.go a[data-type="guide"]::before { content: "\00B6"; }
ul.go a[data-type="report"]::before { content: "\25A4\FE0E"; }
ul.go a[data-type="source"]::before { content: "</>"; font: 600 11px var(--mono); }
ul.go a[data-type="download"]::before { content: "\2193"; }
ul.go a[data-type="slides"]::before { content: "\25AD\FE0E"; }
ul.go a[href^="http"]::after { content: "\2197\FE0E"; color: var(--faint); font-family: var(--sans); }
ul.go a:hover { border-color: var(--accent); background: var(--surface-3); color: var(--ink); }
@media (pointer: coarse) { ul.go a { min-height: 44px; } }

/* notes */
.note, .synthetic, .not-covered { margin: 16px 0; padding: 12px 16px; border-left: 3px solid; border-radius: var(--r-md); color: var(--text); font-size: 15px; }
.note { background: var(--accent-soft); border-color: var(--accent); }
.synthetic { background: var(--note-bg); border-color: var(--note-line); font-size: 14px; }
.not-covered { background: var(--gap-bg); border-color: var(--gap-line); color: var(--text); max-width: none !important; }
.note > :last-child, .synthetic > :last-child, .not-covered > :last-child { margin-bottom: 0; }

/* screenshots in a fixed 16:10 frame; CSS-only tiles where there is no screenshot */
.thumb { position: relative; display: block; margin: 0; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
a.thumb:hover { border-color: var(--accent); }
.thumb picture { display: contents; }

/* three panels: what this shows, what was executed, what it is not */
.triad { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 20px 0; }
.triad > div { padding: 14px 16px; border: 1px solid var(--line-2); border-top: 3px solid var(--accent); border-radius: var(--r-md); background: var(--surface); }
.triad > .executed { border-top-color: var(--blue); }
.triad > .not { border-top-color: var(--gap-fg); }
.triad h2, .triad h3 { margin: 0 0 8px; font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.triad ul { margin: 0; padding-left: 1.1em; font-size: 14px; }
.triad li { margin: 0 0 6px; }
/* shared:end */

/* ---- base: site pages ----------------------------------------------------------------- */
body { color: var(--text); font: 400 var(--fs-body)/1.6 var(--sans); overflow-wrap: break-word; }
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 650; }
p { margin: 0 0 12px; text-wrap: pretty; }
strong, b { font-weight: 650; color: var(--ink); }
a { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
main :where(p, li, dd, blockquote) { max-width: 80ch; }
code, kbd, samp { font-family: var(--mono); font-size: max(12px, .88em); }
:not(pre) > code { padding: .05em .35em; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-3); color: var(--ink); overflow-wrap: anywhere; }
pre { position: relative; margin: 12px 0 16px; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface-3); color: var(--ink); font: 13.5px/1.5 var(--mono); tab-size: 2; font-variant-numeric: tabular-nums; }
pre code { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; }
pre.log { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
pre .copy { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border: 1px solid var(--control); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); font: 600 12px var(--sans); cursor: pointer; }
pre .copy:hover { color: var(--ink); border-color: var(--accent); }
pre.cmd { padding-right: 76px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 24px; } }
.small, .card .small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--text); max-width: 68ch; }
main { display: block; padding-bottom: 72px; }
main > section, main > .sec { margin-top: 52px; }
main > section:first-child, main > .hero:first-child, main > .page-head:first-child { margin-top: 0; }
main h2 { margin: 36px 0 12px; }
main h3 { margin: 22px 0 8px; }
main ul, main ol { padding-left: 1.25em; }
main li { margin: 0 0 6px; }

/* breadcrumbs and page heads */
.crumbs { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
main > .crumbs:first-child { margin-top: 22px; margin-bottom: 0; }
main > .crumbs + section, main > .crumbs + .page-head, main > .crumbs + .hero { margin-top: 0; padding-top: 16px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin: 0 6px 0 2px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.page-head, main > .hero:not(.hero--home) { padding: 28px 0 8px; }
.page-head h1, main > .hero:not(.hero--home) h1 { margin: 0 0 12px; }
.page-head .meta, .hero .meta { margin: 0 0 12px; }
.page-head > p:not(.kicker):not(.eyebrow):not(.meta):not(.synthetic):not(.note) { max-width: 72ch; }
.meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }

/* in-page jump links (hub pages) */
.jump { margin: 18px 0 0; }
.jump ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.jump li { margin: 0; }
.jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); font-size: 13.5px; text-decoration: none; }
.jump a::before { content: "\2193"; color: var(--accent); }
.jump a:hover { border-color: var(--accent); color: var(--ink); }
.card pre.cmd { font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; }

/* section heads with a numbered eyebrow */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin: 0 0 18px; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 6px 0 0; color: var(--muted); max-width: 70ch; }
.sec-head .more { font-size: 14px; white-space: nowrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--control); border-radius: var(--r-sm); background: transparent; color: var(--text);
  font: 600 14px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.btn:hover { color: var(--ink); border-color: var(--accent); background: var(--surface-3); }
.btn--primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.btn--primary:hover { color: var(--on-accent); background: var(--accent-ink); border-color: var(--accent-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
@media (pointer: coarse) { .btn { min-height: 48px; } }

/* ---- cards ------------------------------------------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 0; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 40%);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: 12px 12px 0 0;
  background: var(--seg, linear-gradient(90deg, var(--accent), transparent 75%)); opacity: .9; }
.cards .card:hover, .grid-12 .card:hover, .stage-grid .card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card h3 { margin: 0 0 8px; font-size: var(--fs-h3); }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--accent-ink); }
.card .eyebrow { margin-bottom: 6px; color: var(--muted); letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card p { font-size: var(--fs-card); line-height: 1.55; margin: 0 0 10px; color: var(--text); }
.card .meta, .card .chips { margin: 0 0 10px; }
.card .chips .lab, .card .chips .st { margin-bottom: 0; }
.card .chips { gap: 6px; }
.card .chips .lab, .card .chips .st { margin-right: 0; }
.card .labs-dl { margin: 2px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-3) 55%, transparent); }
.card .fact { font-size: 13px; line-height: 1.45; color: var(--muted); }
.card .thumb { margin: 0 0 16px; }
.card--feature { padding: 0; overflow: hidden; }
.card--feature > .thumb { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.card--feature > .body { display: flex; flex-direction: column; flex: 1; padding: 20px; min-width: 0; }
@media (min-width: 1100px) {
  .card--feature > .body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 28px; align-content: start; }
  .card--feature > .body > * { grid-column: 1; }
  .card--feature > .body > ul.go { grid-column: 2; grid-row: 1 / span 6; align-content: flex-start; margin: 0; padding: 4px 0 0; }
}
.card--compact { padding: 16px; }
.card--compact h3 { font-size: 16px; }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.shots figure { margin: 0; min-width: 0; }
.shots .thumb { margin: 0; }
.shots figcaption { margin-top: 6px; font-size: 13px; line-height: 1.3; }
.shots figcaption a { color: var(--muted); }
@media (max-width: 719.98px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 12-column layout for the featured work */
.grid-12 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
@media (min-width: 1100px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid-12 > .span-8 { grid-column: span 8; }
  .grid-12 > .span-4 { grid-column: span 4; }
  .grid-12 > .span-3 { grid-column: span 3; }
  .grid-12 > .span-6 { grid-column: span 6; }
}

/* ---- home ------------------------------------------------------------------------------- */
.hero--home { display: grid; gap: 24px; padding: 40px 0 28px; }
.hero--home h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.02em; font-weight: 750; margin: 0 0 16px; }
.hero--home .lede { margin: 0; }
@media (min-width: 1100px) {
  .hero--home { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 24px 40px; }
  .hero--home > .facts-grid { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  .hero--home > .facts-grid li { display: block; }
  .hero--home > .facts-grid .k { margin: 0 0 4px; }
}
.facts-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--line); overflow: hidden; }
.facts-grid li { margin: 0; max-width: none; padding: 12px 14px; background: var(--surface); font-size: 14px; line-height: 1.5; color: var(--text); }
.facts-grid .k { display: block; margin: 0 0 2px; color: var(--ink); font-weight: 650; font-size: 14px; }
@media (min-width: 720px) { .facts-grid li { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 16px; } .facts-grid .k { margin: 0; } }
.glance { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface) 30%); box-shadow: var(--shadow-1); min-width: 0; }
.glance > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.glance > header h2 { margin: 0; font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.glance > header .st { margin: 0; white-space: nowrap; flex: none; }
.glance ol { list-style: none; margin: 0; padding: 6px 0; }
.glance li { margin: 0; max-width: none; }
.glance li a { display: grid; grid-template-columns: 26px 64px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 16px; color: var(--text); text-decoration: none; }
.glance li a:hover { background: var(--surface-3); }
.glance .n { font: 600 12px/1.4 var(--mono); color: var(--accent); }
.glance .step { font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.glance .val { font-size: 14px; line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; }
.glance > footer { padding: 11px 16px 13px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
@media (max-width: 719.98px) {
  .glance li a { grid-template-columns: 22px 62px minmax(0, 1fr); gap: 8px; padding: 8px 14px; }
  .glance .val { font-size: 13.5px; }
}

/* status strip: real readouts, each with its source link and date */
.strip-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; max-width: none !important; margin: 0 0 8px; font: 500 12px/1.4 var(--mono); color: var(--faint); }
.strip-cap .k { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.strip-cap span + span::before { content: "·"; margin-right: 14px; color: var(--line-2); }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin: 8px 0 0; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--line); box-shadow: var(--shadow-1); }
.readout { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px 15px; background: var(--surface); color: var(--text); text-decoration: none; }
a.readout:hover { background: var(--surface-3); color: var(--text); }
.readout .k { font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.readout .v { font: 700 var(--fs-kpi)/1.1 var(--sans); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.readout .v.sm { font-size: 20px; line-height: 1.25; }
.readout .v .u { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.readout .s { font-size: 13px; line-height: 1.4; color: var(--muted); }
.readout .d { font: 500 12px/1.3 var(--mono); color: var(--faint); margin-top: auto; padding-top: 4px; }
.c-green { color: var(--green) !important; } .c-amber { color: var(--amber) !important; } .c-gap { color: var(--gap-fg) !important; } .c-red { color: var(--red) !important; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
.kpi { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.kpi .k { display: block; font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi .v { display: block; margin-top: 4px; font: 700 var(--fs-kpi)/1.1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .s { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

/* lifecycle grid on home */
.legend { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px; margin: 0 0 18px; padding: 0; }
.legend li { margin: 0; max-width: none; font-size: 14px; line-height: 1.45; color: var(--muted); }
.legend .lab { margin-right: 6px; }
.stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
@media (min-width: 1100px) { .stage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card--stage { padding: 16px 16px 14px; gap: 0; }
.card--stage h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 16px; line-height: 1.3; }
.card--stage h3 .num { flex: none; font: 600 12px/1 var(--mono); color: var(--accent); letter-spacing: .06em; }
.card--stage .labs-dl { margin: 0 0 12px; font-size: 13px; padding: 0; border: 0; background: none; }
.card--stage .labs-dl > div { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
.card--stage .strong { margin: 0 0 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--text); }
.card--stage .strong .k { display: block; font: 600 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.card--stage .strong .note-q { color: var(--muted); }
.card--stage h3 a { color: var(--ink); text-decoration: none; }
.card--stage h3 a:hover { color: var(--accent-ink); text-decoration: underline; }
/* phones: the twelve stage cards become one list of rows, the method cards drop their screenshots */
@media (max-width: 719.98px) {
  .stage-grid { gap: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
  .stage-grid .card--stage { padding: 12px 14px 12px 17px; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
  .stage-grid .card--stage:first-child { border-top: 0; }
  .stage-grid .card--stage::before { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; border-radius: 0;
    background: var(--seg, var(--accent)); }
  .stage-grid .card--stage:hover { transform: none; box-shadow: none; }
  .card--stage h3 { margin-bottom: 6px; }
  .card--stage .labs-dl { display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 0; }
  .card--stage .labs-dl > div { display: flex; gap: 6px; align-items: baseline; }
  .card--stage .strong { display: none; }
  #methods .card--compact > .fact, #methods .card--compact > ul.go { display: none; }
  #methods .card--compact { padding: 14px 16px; }
  #methods .sec-head > div > p:not(.eyebrow), #start .sec-head > div > p:not(.eyebrow) { display: none; }
  .research .chips { display: none; }
  .facts-grid .k { display: inline; margin-right: 6px; }
  .facts-grid .k::after { content: ":"; }
  .research .topics { display: none; }
  .facts-grid li { padding: 10px 12px; font-size: 13.5px; line-height: 1.45; }
  .card .labs-dl { padding: 0; border: 0; background: none; }
  .labs-dl > div { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
  .card--compact.span-3 > .thumb { display: none; }
  .filter .group:has(> [data-f-stage]) { display: none; }   /* on phones the folded stage list is the stage picker */
  .card--compact.span-3 > .sum { display: none; }
  .card--slim-phone > .thumb, .card--slim-phone .shots, .card--slim-phone > .sum, .card--slim-phone > .fact { display: none; }
  .card--feature > .thumb, .card--feature > .body > .sum { display: none; }
  #start .grid-12 ul.go li:nth-child(n+4) { display: none; }
  .span-4:not(.card--slim-phone) > .thumb { display: none; }
}

.research, .how-panel { display: grid; gap: 14px 28px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow-1); }
@media (min-width: 960px) { .research { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; } }
/* research and how-I-work side by side */
main > .duo { display: grid; gap: 16px; margin-top: 52px; }
.duo > section { margin: 0; }
@media (min-width: 960px) { main > .duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .duo > .research { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.how-panel { display: block; }
.how-panel h2 { margin: 0 0 10px; }
.how-panel > p { margin: 0 0 10px; }
.how-panel > .more { margin: 0; }
.research h2 { margin: 0 0 6px; }
.research p { margin: 0; color: var(--text); }
.research p.eyebrow, .how-panel p.eyebrow { margin: 0 0 8px; color: var(--accent); }
.topics { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.topics li { margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-3); font-size: 13px; line-height: 1.3; color: var(--text); }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.principles li { margin: 0; max-width: none; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.4; }
.how { padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.how > :last-child { margin-bottom: 0; }

/* gate rows (quality page) */
.gates { list-style: none; display: grid; gap: 6px; margin: 12px 0 4px; padding: 0; }
.gates li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "id name st" "id ev ev"; gap: 2px 12px; align-items: center;
  max-width: none; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.gates .gid { grid-area: id; font: 700 13px/1 var(--mono); color: var(--accent); }
.gates .gname { grid-area: name; color: var(--ink); font-weight: 650; font-size: 15px; }
.gates .st { grid-area: st; justify-self: end; margin: 0; }
.gates .gev { grid-area: ev; color: var(--muted); font-size: 13px; line-height: 1.45; }
.gates .g-green { border-left-color: var(--green); } .gates .g-amber { border-left-color: var(--amber); } .gates .g-red { border-left-color: var(--red); }
@media (max-width: 599.98px) { .gates li { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "id name" "id st" "id ev"; } .gates .st { justify-self: start; } }
.more { font-size: 14px; }
p.more { margin: 12px 0 0; }
.sec-status { margin-top: 4px !important; }

/* ---- footer ----------------------------------------------------------------------------- */
footer.site { margin: 0; padding: 28px 0 36px; border-top: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); font-size: 14px; }
footer.site .fine { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 90ch; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--accent-ink); }
footer.site h2 { margin: 0 0 10px; font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.foot-grid { display: grid; gap: 24px 40px; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); } }
.contact { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.contact li { margin: 0; color: var(--text); font-size: 14px; }
.contact .k { display: inline-block; min-width: 70px; margin-right: 8px; font: 600 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.foot-links { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.foot-links li { margin: 0; }
.linklike { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: var(--accent-ink); }
html:not(.js) .linklike { display: none; }

/* ---- module pages ------------------------------------------------------------------------ */
.hero-labs { max-width: 760px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1); }
.panel { margin: 12px 0; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.panel > :last-child { margin-bottom: 0; }
.panel ul { margin: 0; padding-left: 1.2em; }
.files { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 12px 0; padding: 0; }
.files li { margin: 0; max-width: none; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 14px; }
.files li > a { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.files li > a code { border: 0; background: none; padding: 0; color: inherit; }
.files .d { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.files .ft { display: inline-block; margin-right: 6px; padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 4px; font: 600 12px/1.3 var(--mono); color: var(--muted); vertical-align: 1px; }

/* tables */
.tblwrap { width: 100%; margin: 12px 0 18px; overflow-x: auto; border-radius: var(--r-md); -webkit-overflow-scrolling: touch;
  background: linear-gradient(90deg, var(--surface) 30%, transparent), linear-gradient(90deg, transparent, var(--surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.35), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.35), transparent) 100% 0;
  background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; }
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data, table.matrix, table.oc, .stages { width: 100%; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; }
table.data caption, table.matrix caption, .stages caption { caption-side: top; padding: 0 0 8px; text-align: left; color: var(--muted); font-size: 13px; }
table.data th, table.data td, table.matrix th, table.matrix td, .stages th, .stages td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data thead th, table.data tr:first-child th, table.matrix thead th, .stages thead th {
  background: var(--surface-2); color: var(--muted); font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
table.data tbody tr:hover, table.matrix tbody tr:hover { background: var(--surface-3); }
table.data td { overflow-wrap: normal; word-break: normal; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.shell td { font-family: var(--mono); font-size: 13px; }

/* coverage matrix (lifecycle page) */
table.matrix { table-layout: fixed; }
table.matrix thead th:first-child { width: 20%; }
table.matrix thead th:last-child { width: 27%; }
table.matrix td.best { font-size: 13px; }
table.matrix td.best .k { display: none; }
table.matrix td.best .note-q { color: var(--muted); }
.matrix-cap { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; max-width: 90ch; }
table.matrix tbody th { font-weight: 650; color: var(--ink); font-size: 14px; }
table.matrix tbody th a { color: var(--ink); text-decoration: none; }
table.matrix tbody th a:hover { color: var(--accent-ink); text-decoration: underline; }
table.matrix tbody th .num { display: inline-block; width: 28px; color: var(--accent); font: 600 12px var(--mono); }
table.matrix td { font-size: 13px; line-height: 1.4; color: var(--text); }
.mk { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; border: 1px solid; }
.mk.led { background: var(--led-fg); border-color: var(--led-line); } .mk.sup { background: var(--sup-fg); border-color: var(--sup-line); }
.mk.tools { background: var(--violet); border-color: var(--tools-line); } .mk.gap { background: var(--gap-fg); border-color: var(--gap-line); }
.mk-none { color: var(--faint); }
@media (max-width: 719.98px) {
  table.matrix, table.matrix tbody, table.matrix tr, table.matrix th, table.matrix td { display: block; width: auto !important; }
  table.matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.matrix tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.matrix th, table.matrix td { padding: 2px 0; border: 0; }
  table.matrix td:empty { display: none; }
  table.matrix td .sr { position: static !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; white-space: normal; }
  table.matrix caption { display: block; }
  table.matrix td.best { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); }
  table.matrix td.best .k { display: inline; margin-right: 6px; font: 600 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
}

/* filter bar (lifecycle, apps, methods) */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 20px; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
@media (min-width: 720px) { .filter--sticky { position: sticky; top: calc(var(--bar-h) + 8px); z-index: 20;
  background: var(--bar-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
.filter .group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter .group > .k { font: 600 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.filter button { min-height: 30px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: 500 13px/1.2 var(--sans); cursor: pointer; }
.filter button:hover { border-color: var(--accent); }
.filter button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }
.filter label { font-size: 13px; color: var(--muted); }
.filter input[type="search"] { min-width: 0; width: 220px; max-width: 100%; height: 34px; padding: 4px 10px; border: 1px solid var(--control); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 14px var(--sans); }
.filter .count { margin-left: auto; font: 500 12.5px var(--mono); color: var(--muted); }
.filter .fold-all { border-radius: var(--r-sm); font-weight: 600; }
.filter kbd { padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; font-size: 11.5px; }
html:not(.js) .filter { display: none; }
@media (pointer: coarse) { .filter button { min-height: 40px; } }
[hidden] { display: none !important; }

/* lifecycle stage sections: a disclosure per stage (open on desktop, folded on phones by ui.js);
   the stage text stays in view beside its modules */
details.stage-sec { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
details.stage-sec:first-of-type { border-top: 0; }
details.stage-sec > :not(summary) { margin-left: 0; margin-right: 0; }
details.stage-sec > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; padding: 24px 0 4px; border: 0; list-style: none; cursor: pointer; }
details.stage-sec[open] > summary { border-bottom: 0; }
details.stage-sec > summary::-webkit-details-marker { display: none; }
details.stage-sec > summary .labs-dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
details.stage-sec > summary .labs-dl > div { display: flex; gap: 7px; align-items: baseline; }
.stage-sec .fold { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--mono); color: var(--faint); white-space: nowrap; }
.stage-sec .fold::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur) var(--ease); }
.stage-sec[open] .fold::after { transform: rotate(225deg) translate(-2px, 0); }
.stage-sec > summary:hover .fold { color: var(--accent-ink); }
.stage-body { display: grid; gap: 8px 32px; padding: 8px 0 28px; }
@media (min-width: 960px) {
  .stage-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .stage-body > .stage-text { position: sticky; top: calc(var(--bar-h) + 20px); align-self: start; }
}
.stage-sec h2 { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.stage-sec h2 .num { font: 600 14px var(--mono); color: var(--accent); }
.stage-text > .sub:first-child { margin-top: 4px; }
.stage-sec .sub { margin: 16px 0 6px; font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stage-sec .mods > .sub { margin-top: 4px; }
.stage-sec .mods { display: grid; gap: 12px; align-content: start; }
.stage-sec .stage-text p { font-size: 15px; }

.mod-grid { display: grid; gap: 12px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.mod-grid .card { padding: 16px; }
.mod-grid .card h3 { font-size: 15.5px; }
.also { padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.also .sub { margin: 0 0 6px !important; }
.also ul { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.also li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; max-width: none; font-size: 14px; }
.also li > a { font-weight: 600; padding: 1px 0; }   /* a 24 px target (WCAG 2.2 target size) */
.also .st { margin: 0; font-size: 12px; padding: 1px 7px; }
.also .where { color: var(--muted); font-size: 13px; }
.also .where a { color: var(--muted); }
.stage-sec .none { margin: 0; padding: 12px 14px; border: 1px dashed var(--gap-line); border-radius: var(--r-md); color: var(--gap-fg); }
.f-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 20px; padding: 16px 18px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.f-empty p { margin: 0; color: var(--ink); font-weight: 600; }
.mod-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.group-sec { margin-top: 48px; }
.group-sec > .sec-head { margin-bottom: 14px; }
.disclosure { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--amber); border-radius: var(--r-md); background: var(--surface); font-size: 14px; max-width: none; }
.disclosure > :last-child { margin-bottom: 0; }

/* about: timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline > li { position: relative; display: grid; gap: 4px 24px; margin: 0; padding: 0 0 26px 22px; max-width: none; border-left: 1px solid var(--line-2); }
.timeline > li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg); }
.timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
@media (min-width: 720px) { .timeline > li { grid-template-columns: 148px minmax(0, 1fr); } }
.timeline .when { font: 500 12.5px/1.5 var(--mono); color: var(--muted); padding-top: 2px; }
.timeline h3 { margin: 0 0 2px; font-size: 17px; }
.timeline .org { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.timeline ul { margin: 0; padding-left: 1.1em; font-size: 15px; }

/* redirect stubs and 404 */
.stub { padding-block: 64px; }
.stub > * { max-width: 44em; }
.stub h1 { margin: 0 0 14px; }
.stub .actions a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--control); border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.stub .actions a:first-child { color: var(--on-accent); border-color: var(--accent); background: var(--accent); }
.stub .actions a:hover { border-color: var(--accent); }

/* worked example (study/) and other module pages */
.stage { margin: 18px 0; padding: 20px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface) 30%); box-shadow: var(--shadow-1); }
.stage > .kicker { margin-bottom: 4px; }
.stage h2 { margin: 0 0 10px; font-size: 20px; }
.stage h3 { margin: 18px 0 8px; font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stage ul:not(.files) { margin: 0 0 8px; padding-left: 1.2em; }
.flow { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 16px 0; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.flow li { position: relative; margin: 0; max-width: none; padding: 12px 14px; border-left: 1px solid var(--line); font-size: 14px; }
.flow li:first-child { border-left: 0; }
.flow li::before { counter-increment: step; content: "0" counter(step); display: block; font: 600 12px var(--mono); color: var(--accent); margin-bottom: 4px; }
.flow a { font-weight: 600; color: var(--ink); text-decoration: none; }
.flow a:hover { color: var(--accent-ink); text-decoration: underline; }
.flow .v { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 719.98px) {   /* phones: two columns of stages, no sideways scrolling */
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li { border-left: 0; border-top: 1px solid var(--line); }
  .flow li:nth-child(even) { border-left: 1px solid var(--line); }
  .flow li:nth-child(-n+2) { border-top: 0; }
}
.kv { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 12px 0; padding: 0; }
.kv li { margin: 0; max-width: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.kv .k { display: block; font: 600 var(--fs-label)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kv .v { color: var(--ink); font-weight: 650; font-size: 16px; font-variant-numeric: tabular-nums; }
.pass, .fail { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border: 1px solid; border-radius: var(--r-sm); font: 600 12px/1.4 var(--mono); }
.pass::before, .fail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pass { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.fail { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.fail::before { border-radius: 1px; }
.tlf { padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); overflow-x: auto; }
.tlf table { border-collapse: collapse; font: 13px/1.45 var(--mono); color: var(--text); }
.tlf th, .tlf td { padding: 2px 10px; border-color: var(--line) !important; }
.tlf .rtables-main-title { font-weight: 700; margin: 0 0 2px; color: var(--ink); }
.tlf .rtables-subtitle, .tlf .rtables-footer, .tlf .rtables-prov-footer { color: var(--muted); font-size: 13px; margin: 0 0 2px; }
.tlf .rtables-footers-block, .tlf .rtables-prov-footers-block { margin-top: 8px; }
section.shell { margin: 20px 0; }
section.shell h2 { font-size: 18px; margin: 0 0 6px; }
details { margin: 12px 0; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
details > summary { padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--ink); }
details[open] > summary { border-bottom: 1px solid var(--line); }
details > :not(summary) { margin-left: 14px; margin-right: 14px; }
figure { margin: 16px 0; }
figcaption { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
blockquote { margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--line-2); color: var(--text); }

/* ---- responsive, motion, print ------------------------------------------------------------ */
@media (max-width: 719.98px) {
  .hero--home { padding-top: 28px; gap: 24px; }
  .hero--home .lede { font-size: 17px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-cap { display: block; }
  .strip-cap .k { display: block; margin-bottom: 2px; }
  .strip-cap span + span::before { content: none; }
  .readout { padding: 12px 12px 13px; }
  .readout .v { font-size: 22px; }
  .readout .v .u { font-size: 13px; }
  .readout .s { font-size: 12.5px; line-height: 1.35; }
  main > section, main > .sec, main > .duo { margin-top: 36px; }
  .stage { padding: 16px; }
  .card { padding: 16px; }
  .research { padding: 18px; }
  .actions .btn--ghost { flex: 1 1 40%; }
  footer.site { padding: 22px 0 28px; }
  footer.site .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .foot-grid { gap: 18px; }
  .actions .btn--primary { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none !important; } }
@media (forced-colors: active) {
  .card, .lab, .st, ul.go a, .readout, .glance, .panel, .thumb { border: 1px solid CanvasText; }
  .card::before { display: none; }
}
@media print {
  body { font-size: 11pt; color: #000; }
  main { padding-bottom: 0; }
  .card, .panel, .stage, .readout, .glance, .kpi, .triad > div, .files li { box-shadow: none !important; background: #fff !important; break-inside: avoid; }
  .card::before { display: none; }
  .filter, .copy, .linklike { display: none !important; }
  a { color: #000; text-decoration: underline; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; overflow-wrap: anywhere; }
  ul.go a::after { content: none !important; }
  .lab, .st { border-color: #000 !important; color: #000 !important; background: #fff !important; }
  h2, h3 { break-after: avoid; }
  .thumb { break-inside: avoid; }
  .grid-12, .stage-grid, .cards { display: block; }
  .grid-12 > *, .stage-grid > *, .cards > * { margin: 0 0 10px; }
  .tblwrap { overflow: visible; background: none; }
  details { border: 0; } details > summary { display: none; } details > * { display: block !important; }
  footer.site { background: #fff; }
}

/* mc:begin */
/* ==== Mission Control look: the top bar, headings and panels of site.css (Home, Operations), on the tokens so
   both themes keep working. Hand-written and outside the generated regions, so only pages linking this file get it. */
.top { box-shadow: 0 1px 0 var(--accent-soft), 0 8px 24px rgba(0,0,0,.28); }
.top > .wrap { max-width: none; min-height: 46px; padding: 0 22px; gap: 4px 18px; }
.top .name { gap: 0; font: 700 12.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.top .mark { width: auto; height: auto; background: none; clip-path: none; color: var(--accent); font: inherit; letter-spacing: 0; }
.top .mark::before { content: "\25E2\00a0"; }
.top .nav { gap: 6px; }
.top .nav a { padding: 5px 10px; border-radius: 5px; font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.top .nav a:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line-2); }
.top .nav a[aria-current] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-ring); }
@media (min-width: 960px) { .top .nav a[aria-current]::after { display: none; } }
.top .mc-status { display: inline-flex; align-items: center; gap: 7px; padding-left: 12px; border-left: 1px solid var(--line-2);
  font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.top .mc-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: mc-pulse 2.4s infinite; }
.top .mc-clock { font: 400 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
@keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 1099.98px) { .top .mc-status, .top .mc-clock { display: none; } }
.theme-toggle { height: 30px; min-width: 30px; padding: 0 7px; border-color: var(--line-2); border-radius: 5px; color: var(--muted); }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); }
.menu-toggle { border-radius: 5px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (pointer: coarse) { .theme-toggle, .menu-toggle { height: 44px; min-width: 44px; } }
.crumbs { font: 400 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
main > .crumbs:first-child { margin-top: 30px; }
/* section labels: mono, gold, with the console arrow; the page kicker is the hero eyebrow */
main .kicker { font: 700 11.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
main .kicker::before { content: "\25B8\00a0"; color: var(--accent); }
main .stage > .kicker, main section > .kicker { color: var(--amber); }
.page-head .kicker, .hero .kicker, .page-head .eyebrow, .hero .eyebrow { font: 700 11px/1.3 var(--mono); letter-spacing: .22em; color: var(--accent); }
.page-head .kicker::before, .hero .kicker::before, .page-head .eyebrow::before, .hero .eyebrow::before { content: "//\00a0"; color: inherit; }
.page-head h1, .hero:not(.hero--home) h1 { font-size: 31px; line-height: 1.2; font-weight: 680; letter-spacing: -.01em; }
/* console panels */
.card, .stage, .flow, .synthetic, .note { border-radius: 6px; }
.card::before { border-radius: 6px 6px 0 0; }
.stage { position: relative; background: var(--surface); }
.stage::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 6px 0 0 6px; pointer-events: none;
  background: linear-gradient(180deg, var(--accent), transparent 70%); opacity: .5; }
.stage h2 { font-size: 20px; font-weight: 650; }
@media (max-width: 559.98px) { .top > .wrap { padding: 0 12px; gap: 4px 8px; } .top .name { font-size: 10.5px; letter-spacing: .1em; } }
@media print { .top .mc-status, .top .mc-clock { display: none !important; } }
/* mc:end */