/* Shared style for the project site. Same tokens and fonts as the step reports (docs/steps). */
:root {
  --node: #ffffff; --node-alt: #eef1fb; --train: #2d4fd0; --test: #d98a00; --failed: #8a919d; --notusable: #c3c8d0; --pick: #dcefd9; --ov-both: #2f9e5b; --ov-base: #2d4fd0; --ov-wam: #d98a00; --ov-neither: #c3c8d0;
  --img: #dae8fc; --img-l: #6c8ebf; --flw: #fff2cc; --flw-l: #d6b656; --prp: #e1d5e7; --prp-l: #9673a6; --act: #f8cecc; --act-l: #b85450; --net: #d5e8d4; --net-l: #82b366; --big: #6c8ebf;
  --bg: #f5f6f8; --surface: #ffffff; --fg: #1a1e26; --muted: #5d6573; --line: #dde1e8; --accent: #2d4fd0;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #12151b; --surface: #1a1e26; --fg: #e6e9ef; --muted: #98a0ae; --line: #2c323d; --accent: #8aa2ff; --node: #1a1e26; --node-alt: #1e2540; --train: #8aa2ff; --test: #f2b33d; --failed: #8a919d; --notusable: #4a515d; --pick: #1f3320; --ov-both: #2f9a5c; --ov-base: #6f8cf5; --ov-wam: #bf8219; --ov-neither: #4a515d; color-scheme: dark } }
  --img: #1f2b40; --img-l: #6c8ebf; --flw: #3a3320; --flw-l: #d6b656; --prp: #33283a; --prp-l: #a988ba; --act: #3d2323; --act-l: #c96a66; --net: #1f3320; --net-l: #82b366; --big: #8aa2ff;
:root[data-theme="dark"] {
  --bg: #12151b; --surface: #1a1e26; --fg: #e6e9ef; --muted: #98a0ae; --line: #2c323d; --accent: #8aa2ff; --node: #1a1e26; --node-alt: #1e2540; --train: #8aa2ff; --test: #f2b33d; --failed: #8a919d; --notusable: #4a515d; --pick: #1f3320; --ov-both: #2f9a5c; --ov-base: #6f8cf5; --ov-wam: #bf8219; --ov-neither: #4a515d; color-scheme: dark }
  --img: #1f2b40; --img-l: #6c8ebf; --flw: #3a3320; --flw-l: #d6b656; --prp: #33283a; --prp-l: #a988ba; --act: #3d2323; --act-l: #c96a66; --net: #1f3320; --net-l: #82b366; --big: #8aa2ff;

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--display); }

.top { border-bottom: 1px solid var(--line); background: var(--surface); }
.top-inner { max-width: 60rem; margin: 0 auto; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.brand { font-weight: 800; color: var(--fg); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.top nav a { font: 500 14px var(--mono); color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--accent); }
.top a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

main { max-width: 60rem; margin: 0 auto; padding: 40px 16px 72px; display: grid; gap: 28px; }
h1 { font: 800 clamp(30px, 6vw, 42px)/1.1 var(--display); margin: 0; text-wrap: balance; }
h2 { font: 700 22px/1.25 var(--display); margin: 8px 0 0; text-wrap: balance; }
p { margin: 0; max-width: 68ch; }
.lede { color: var(--muted); }
section { display: grid; gap: 12px; min-width: 0; }
.todo { font: 13px var(--mono); color: var(--muted); }
code { font: 0.9em var(--mono); }
img, video { max-width: 100%; }

footer { border-top: 1px solid var(--line); }
footer p { max-width: 60rem; margin: 0 auto; padding: 18px 16px; font: 13px var(--mono); color: var(--muted); }

.toc { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 14px 18px; max-width: 26rem; }
.toc h2 { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
.toc a { color: var(--accent); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html { scroll-behavior: smooth; }
section { scroll-margin-top: 16px; }

.diagram { margin: 0; min-width: 0; }
.scroll { overflow-x: auto; }
.diagram svg { display: block; width: 100%; min-width: 860px; max-width: 66rem; height: auto; }
.diagram rect { fill: var(--node); stroke: var(--line); stroke-width: 1.2; }
.diagram .alt rect { fill: var(--node-alt); stroke: var(--accent); }
.diagram text { text-anchor: middle; fill: var(--fg); }
.diagram .t { font: 700 14px var(--display); }
.diagram .s { font: 12px var(--mono); fill: var(--muted); }
.diagram .b { font: 500 11px var(--mono); letter-spacing: .08em; fill: var(--accent); }
.diagram .edge { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.diagram .ah { fill: var(--muted); }
.arch svg { max-width: 60rem; }
.arch rect, .arch circle { stroke-width: 1.2; }
.arch .frame { fill: var(--node); stroke: var(--fg); }
.arch .c-img { fill: var(--img); stroke: var(--img-l); }
.arch .c-flow { fill: var(--flw); stroke: var(--flw-l); }
.arch .c-prop { fill: var(--prp); stroke: var(--prp-l); }
.arch .c-act { fill: var(--act); stroke: var(--act-l); }
.arch .c-net { fill: var(--net); stroke: var(--net-l); }
.arch .s { fill: var(--fg); }
.arch .dash { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 3 3; }
.arch .dashedge { fill: none; stroke: var(--fg); stroke-width: 1.3; stroke-dasharray: 7 5; }
.arch .big { fill: var(--big); }
.arch .plus circle { fill: var(--node); stroke: var(--fg); }
.arch .plus path { stroke: var(--fg); stroke-width: 1.4; }

.photo { margin: 0; display: grid; gap: 8px; max-width: 36rem; }
.photo img { display: block; width: 100%; max-width: 36rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.sub { margin: 4px 0 0; font: 700 17px/1.3 var(--display); }
.points { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; max-width: 70ch; }
.points ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.stats { border-collapse: collapse; font: 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.stats th, .stats td { text-align: left; padding: 8px 20px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stats thead th { font-weight: 500; color: var(--muted); }
.stats tbody th { font-weight: 400; }
.note { margin: 0; font-size: 14px; color: var(--muted); max-width: 70ch; }
.format { margin: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font: 13px/1.6 var(--mono); overflow-x: auto; }
.chart { margin: 0; display: grid; gap: 8px; min-width: 0; max-width: 40rem; }
.chart svg { display: block; width: 100%; min-width: 420px; height: auto; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { font: 11px var(--mono); fill: var(--muted); }
.chart .axis { font: 12px var(--mono); fill: var(--muted); }
.chart .pt { stroke-width: 1.4; }
.chart .train { fill: var(--train); stroke: var(--bg); }
.chart .test { fill: var(--test); stroke: var(--bg); }
.chart .failed { fill: none; stroke: var(--failed); }
.chart .notusable { fill: none; stroke: var(--notusable); }
.chart .marker { fill: var(--fg); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: -1px; }
.key:first-child { margin-left: 0; }
.key.train { background: var(--train); } .key.test { background: var(--test); }
.key.failed { border: 1.5px solid var(--failed); } .key.notusable { border: 1.5px solid var(--notusable); }
.key.marker { background: var(--fg); border-radius: 0; }
.deps a { color: var(--accent); text-decoration: none; }
.deps a:hover { text-decoration: underline; }
.deps a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.episode { margin: 0; display: grid; gap: 8px; min-width: 0; }
.episode h3 { margin: 8px 0 0; font: 500 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.episode video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 304; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
figcaption { font: 13px/1.5 var(--mono); color: var(--muted); }
.results { font-size: 12px; }
.results th, .results td { padding: 7px 8px 7px 0; }
.results thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.results td { text-align: center; }
.results td.type { text-align: left; }
.results .num { text-align: right; }
.results tbody th { font-weight: 500; }
.results tr.pick th, .results tr.pick td { background: var(--pick); }
.results strong { font-weight: 700; color: var(--fg); }
.picker .eps { display: flex; flex-wrap: wrap; gap: 6px; }
.picker .eps button { font: 500 13px var(--mono); min-width: 2.4rem; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
.picker .eps button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.picker .eps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arch .c-flow-d { fill: var(--flw-l); fill-opacity: .45; stroke: var(--flw-l); }
.arch .sep { stroke: var(--line); stroke-width: 1; }
.wamd svg { max-width: 62rem; }
.arch .grp { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.arch .cell { stroke: var(--flw-l); stroke-width: .5; }
.arch .cell2 { stroke: var(--flw-l); stroke-width: 1; }
.arch .half { stroke: var(--fg); stroke-width: 1.4; }
.arch .patch { fill: var(--act); stroke: var(--act-l); stroke-width: 1.5; }
.tiled svg { min-width: 760px; max-width: 54rem; }
.evald svg { max-width: 62rem; }
.arch .h { font: 700 18px var(--display); fill: var(--fg); }
.results tr.split th, .results tr.split td { border-bottom: 2px solid var(--fg); }
.overlap { max-width: 64rem; }
.overlap svg { min-width: 760px; }
.pt.ov-both { fill: var(--ov-both); } .pt.ov-base { fill: var(--ov-base); } .pt.ov-wam { fill: var(--ov-wam); } .pt.ov-neither { fill: var(--ov-neither); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.sw.ov-both { background: var(--ov-both); } .sw.ov-base { background: var(--ov-base); } .sw.ov-wam { background: var(--ov-wam); } .sw.ov-neither { background: var(--ov-neither); }
.eps-rows { display: grid; gap: 8px; }
.eps-label { font: 500 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; min-width: 5.5rem; align-self: center; }
.method { margin: 0; display: grid; gap: 8px; max-width: 66rem; }
.mflow { display: grid; grid-template-columns: 1.6fr 44px 1.6fr 44px 1fr 44px 1fr; grid-template-rows: auto 36px auto; align-items: center; row-gap: 0; min-width: 820px; }
.mmedia { display: grid; gap: 4px; align-self: end; }
.mmedia.mend { align-self: center; }
.mmedia img, .mmedia video { box-sizing: border-box; display: block; width: 100%; max-width: 100%; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.mtitle { font: 700 14px var(--display); color: var(--fg); text-align: center; }
.mcap { font: 12px/1.3 var(--mono); color: var(--muted); text-align: center; }
.mbox { box-sizing: border-box; display: grid; gap: 2px; align-content: center; align-self: stretch; text-align: center; padding: 14px 10px; border-radius: 8px; border: 1.2px solid; }
.mbox strong { font: 700 14px var(--display); color: var(--fg); }
.mbox span { font: 12px/1.35 var(--mono); color: var(--fg); }
.m-net { background: var(--net); border-color: var(--net-l); }
.marrow { text-align: center; font: 20px var(--display); color: var(--muted); }
.mvarrow { text-align: center; font: 22px/1 var(--display); color: var(--muted); }
.ha { position: relative; height: 3px; background: var(--muted); margin-right: 1px; }
.ha::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-left: 11px solid var(--muted); border-right: 0; }
.ha.back { margin: 0 0 0 1px; }
.ha.back::after { right: auto; left: -1px; border-left: 0; border-right: 11px solid var(--muted); }
.ha2 { display: grid; gap: 12px; }
.va { position: relative; width: 3px; height: 100%; justify-self: center; background: var(--muted); }
.va::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 7px solid transparent; }
.va.up::after { top: -1px; border-top: 0; border-bottom: 11px solid var(--muted); }
.va.down::after { bottom: -1px; border-bottom: 0; border-top: 11px solid var(--muted); }
.mpick { margin-top: 6px; }
.results.full { width: 100%; }
.results th.grp-tag { font: 700 13px/1.3 var(--display); color: var(--fg); white-space: normal; width: 9rem; vertical-align: middle; border-bottom: 2px solid var(--fg); padding-right: 16px; }
.mprompt { box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 6px 8px; font: 12px/1.35 var(--mono); color: var(--fg); text-align: center; }
.mprompt span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }