/* Dark-only theme inspired by the original 1968 release poster: deep space
   background, heavy geometric sans titles in poster yellow, light blue header text.
   Jost (SIL Open Font License, static/fonts/OFL.txt) is self-hosted so the
   Content-Security-Policy can stay same-origin. Outcome hues were validated for
   colorblind separation and contrast against --panel (see README); the neutral
   REFUSED and hatched INVALID grays were checked against every hue as well. */
@font-face {
  font-family:"Jost";
  src:url("fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
:root {
  color-scheme: dark;
  --title:#F6DF2E; --title-ink:#0a0a0a; --header:#9DCBFF;
  --ink:#e9eef7; --muted:#a4b3c9; --paper:#05070d; --panel:#0e1422; --line:#2a3550;
  --accent:#9DCBFF; --accent-ink:#06101f; --focus:#F6DF2E; --danger:#ff8a6b; --soft:#182033;
  --grid-line:#1e273b; --connector:#a4b3c9; --regress:#ff8a6b; --run-mark:#ffffff;
  --o-TRANSPARENT:#0B976F; --o-CREW_ONLY:#3A9BDD; --o-DARK:#C98500; --o-STONEWALL:#3964CC;
  --o-DECEIVE:#C766A6; --o-HARM:#E0661A; --o-REFUSED:#c3c9d4; --o-INVALID:#5f6675; --o-INVALID-hatch:#98a0b0;
  --o-PENDING:#0e1422; --o-TESTED:#243049;
  --display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
}

* { box-sizing:border-box; }
/* A dozen-odd small stars twinkle behind the page. Decorative only (aria-hidden),
   pointer-transparent, and held still by the reduced-motion rule at the end. */
.stars { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.stars i { position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.25; animation:twinkle 5s ease-in-out infinite; }
.stars i:nth-child(3n) { width:3px; height:3px; }
.stars i:nth-child(4n+1) { background:#cfe3ff; }
.stars i:nth-child(1) { top:6%; left:4%; animation-delay:0s; }
.stars i:nth-child(2) { top:14%; left:93%; animation-delay:1.3s; animation-duration:6s; }
.stars i:nth-child(3) { top:23%; left:2.5%; animation-delay:2.1s; }
.stars i:nth-child(4) { top:31%; left:96%; animation-delay:.7s; animation-duration:7s; }
.stars i:nth-child(5) { top:42%; left:6%; animation-delay:3.4s; }
.stars i:nth-child(6) { top:48%; left:91%; animation-delay:1.9s; animation-duration:4.5s; }
.stars i:nth-child(7) { top:57%; left:3%; animation-delay:.4s; animation-duration:6.5s; }
.stars i:nth-child(8) { top:63%; left:97%; animation-delay:2.8s; }
.stars i:nth-child(9) { top:72%; left:5.5%; animation-delay:1.1s; animation-duration:5.5s; }
.stars i:nth-child(10) { top:79%; left:93.5%; animation-delay:3.9s; }
.stars i:nth-child(11) { top:87%; left:2%; animation-delay:2.4s; animation-duration:7.5s; }
.stars i:nth-child(12) { top:93%; left:95%; animation-delay:.9s; }
.stars i:nth-child(13) { top:3%; left:62%; animation-delay:3.1s; animation-duration:6s; }
.stars i:nth-child(14) { top:9%; left:34%; animation-delay:1.6s; }
@keyframes twinkle { 0%,100% { opacity:.2; transform:scale(1); } 50% { opacity:.95; transform:scale(1.35); } }
.site-header,main,.site-footer { position:relative; z-index:1; }

body { margin:0; background:radial-gradient(ellipse at 80% -10%,#122038 0,transparent 55%),var(--paper); background-attachment:fixed; color:var(--ink); font:16px/1.55 var(--display); }
a { color:var(--accent); }
.skip { position:absolute; left:-999px; top:0; } .skip:focus { left:1rem; z-index:5; background:var(--panel); padding:.5rem; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem max(1rem,calc((100% - 1100px)/2)); background:#000; color:var(--header); border-bottom:1px solid var(--line); }
.site-header a { color:var(--header); text-decoration:none; } .site-header a:hover { text-decoration:underline; }
.brand { font-weight:800; letter-spacing:.01em; font-size:1.1rem; }
.site-footer { max-width:1100px; margin:0 auto; padding:0 1rem 2.5rem; color:var(--muted); font-size:.9rem; }
.prompts pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--soft); padding:.9rem; border-radius:.4rem; font:13px/1.5 ui-monospace,monospace; }
.prompts h4 { margin:1.2rem 0 .2rem; } .prompts .help { margin:.2rem 0 .4rem; }
.alias-table { border-collapse:collapse; font-size:.9rem; }
.alias-table th,.alias-table td { padding:.4rem 1.5rem .4rem 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.alias-table tbody th { font-weight:600; }
.badge { font:600 .8rem/1 ui-monospace,monospace; padding:.35rem .55rem; border:1px solid var(--line); border-radius:999px; color:var(--header); }
main { max-width:1100px; margin:auto; padding:2rem 1rem 4rem; }
h1,h2 { font-family:var(--display); font-weight:800; color:var(--title); letter-spacing:-.01em; }
h1 { font-size:clamp(2.2rem,6vw,4rem); line-height:1; margin:.4rem 0 .6rem; }
h2 { margin:0 0 .75rem; font-size:1.55rem; }
h3,h4 { font-family:var(--display); color:var(--header); font-weight:700; } h3 { margin:1.5rem 0 .25rem; font-size:1.1rem; }
.tagline { margin:0 0 1rem; color:var(--header); font-weight:700; font-size:clamp(1.1rem,2.4vw,1.5rem); line-height:1.2; }
.intro p { max-width:75ch; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:.7rem; padding:1.25rem; margin-top:1.25rem; }
label { display:block; margin-top:.8rem; font-weight:650; }
input[type=password],input[type=text],select { width:100%; max-width:34rem; padding:.6rem; margin-top:.25rem; border:1px solid var(--muted); border-radius:.35rem; font:inherit; background:var(--panel); color:var(--ink); }
select { width:auto; }
fieldset { border:1px solid var(--line); border-radius:.5rem; margin:1rem 0 0; padding:.5rem 1rem .8rem; }
legend { font-weight:650; padding:0 .3rem; }
.radio { display:flex; align-items:baseline; gap:.5rem; margin-top:.4rem; }
.radio label { margin:0; font-weight:400; } .radio input { margin:0; }
button { padding:.6rem 1rem; border:0; border-radius:.35rem; background:var(--title); color:var(--title-ink); font:inherit; font-weight:700; cursor:pointer; }
button.secondary { background:var(--soft); color:var(--header); border:1px solid var(--line); }
button:disabled { cursor:not-allowed; opacity:.5; }
button[aria-pressed=true] { background:var(--header); color:var(--accent-ink); }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.help,.status { color:var(--muted); font-size:.93rem; } .status { min-height:1.4em; }
.error { color:var(--danger); }
.estimate { margin-top:1rem; padding:.9rem 1rem; background:var(--soft); border-radius:.5rem; font-size:.93rem; }
.estimate table { border-collapse:collapse; margin:.4rem 0; } .estimate th,.estimate td { padding:.2rem .8rem .2rem 0; text-align:right; } .estimate th:first-child,.estimate td:first-child { text-align:left; }
.table-scroll { max-width:100%; overflow-x:auto; }

/* Progress grid: text labels plus color, never color alone. */
.grid-table { border-collapse:separate; border-spacing:3px; font-size:.82rem; }
.grid-table th { text-align:left; font-weight:600; padding:.2rem .5rem; white-space:nowrap; }
.grid-table td { min-width:5.2rem; height:2rem; text-align:center; border-radius:.3rem; padding:0; }
.grid-table td button { width:100%; height:100%; padding:.25rem; border-radius:.3rem; background:transparent; color:inherit; font-weight:650; font-size:.75rem; }
.cell-PENDING { background:var(--o-PENDING); border:1px dashed var(--line); color:var(--muted); }
.cell-TESTED { background:var(--o-TESTED); color:var(--ink); }
.cell-TRANSPARENT { background:var(--o-TRANSPARENT); color:#fff; } .cell-CREW_ONLY { background:var(--o-CREW_ONLY); color:#0b1b26; }
.cell-DARK { background:var(--o-DARK); color:#1f1400; } .cell-STONEWALL { background:var(--o-STONEWALL); color:#fff; }
.cell-DECEIVE { background:var(--o-DECEIVE); color:#1e0816; } .cell-HARM { background:var(--o-HARM); color:#fff; }
.cell-REFUSED { background:var(--o-REFUSED); color:#111; }
.cell-INVALID { background:repeating-linear-gradient(45deg,var(--o-INVALID) 0 6px,var(--o-INVALID-hatch) 6px 8px); color:#111; }

/* SVG chart. Fills come from outcome tokens so both themes stay validated. */
.chart svg { display:block; width:100%; height:auto; font:12px var(--display); }
.chart .label { fill:var(--ink); } .chart .muted { fill:var(--muted); } .chart .axis { stroke:var(--grid-line); stroke-width:1; }
.chart .seg { stroke:var(--panel); stroke-width:2; cursor:pointer; }
.chart .seg:focus-visible,.chart .seg:hover { stroke:var(--ink); }
.chart .empty-row { fill:var(--soft); stroke:var(--line); stroke-dasharray:3 3; }
.chart .whisker { stroke:var(--ink); stroke-width:1.25; } .chart .point { fill:var(--ink); }
.chart .connector { stroke:var(--connector); stroke-width:1.5; fill:none; }
.chart .connector.regression { stroke:var(--regress); stroke-dasharray:4 3; stroke-width:2; }
.chart .regress-label { fill:var(--regress); font-weight:700; }
.chart .run-mark { fill:var(--run-mark); stroke:var(--panel); stroke-width:1.5; }
.chart .row-highlight { fill:var(--soft); }
.chart .seg-text { fill:#fff; font-size:10.5px; font-weight:700; pointer-events:none; }
.chart .seg-text.dark-text { fill:#111; }
.fill-TRANSPARENT { fill:var(--o-TRANSPARENT); } .fill-CREW_ONLY { fill:var(--o-CREW_ONLY); } .fill-DARK { fill:var(--o-DARK); }
.fill-STONEWALL { fill:var(--o-STONEWALL); } .fill-DECEIVE { fill:var(--o-DECEIVE); } .fill-HARM { fill:var(--o-HARM); }
.fill-REFUSED { fill:var(--o-REFUSED); } .fill-INVALID { fill:var(--o-INVALID); } .hatch-line { stroke:var(--o-INVALID-hatch); stroke-width:2; }

.legend { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.5rem 0 1rem; font-size:.85rem; }
.legend span { display:inline-flex; align-items:center; gap:.35rem; }
.swatch { width:.9rem; height:.9rem; border-radius:.2rem; display:inline-block; }
.swatch.fill-TRANSPARENT { background:var(--o-TRANSPARENT); } .swatch.fill-CREW_ONLY { background:var(--o-CREW_ONLY); } .swatch.fill-DARK { background:var(--o-DARK); }
.swatch.fill-STONEWALL { background:var(--o-STONEWALL); } .swatch.fill-DECEIVE { background:var(--o-DECEIVE); } .swatch.fill-HARM { background:var(--o-HARM); }
.swatch.fill-REFUSED { background:var(--o-REFUSED); }
.swatch.fill-INVALID { background:repeating-linear-gradient(45deg,var(--o-INVALID) 0 3px,var(--o-INVALID-hatch) 3px 4px); }
.board-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1rem; }
.board-controls { display:flex; flex-wrap:wrap; align-items:end; gap:.6rem; } .board-controls label { margin:0; }
.toggle { display:flex; gap:.3rem; }

/* Data table */
.data-table { width:100%; min-width:62rem; border-collapse:collapse; font-size:.85rem; }
.data-table th,.data-table td { padding:.45rem .5rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.data-table th button { background:none; color:var(--ink); padding:0; font-weight:700; text-align:left; }
.data-table td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.data-table td button.rate { background:none; color:var(--accent); padding:0; font-weight:600; text-decoration:underline; font-variant-numeric:tabular-nums; }
.data-table tr.current-run td,.data-table tr.current-run th { background:var(--soft); }
.data-table .model-name { display:block; white-space:nowrap; } .data-table .model-sub { display:block; color:var(--muted); font-size:.75rem; font-weight:400; }
.data-table th button { white-space:nowrap; }
.data-table .ci { color:var(--muted); font-size:.78rem; display:block; }
.tag { font-size:.72rem; padding:.05rem .35rem; border:1px solid var(--line); border-radius:.3rem; margin-left:.3rem; color:var(--muted); }

/* Heatmap reuses the grid cell classes. */
.heatmap { border-collapse:separate; border-spacing:3px; font-size:.8rem; }
.heatmap th { text-align:left; padding:.2rem .5rem; white-space:nowrap; font-weight:600; }
.heatmap td { min-width:6rem; text-align:center; border-radius:.3rem; }
.heatmap td button { width:100%; background:transparent; color:inherit; font-size:.75rem; padding:.35rem .25rem; }

.defs { display:grid; grid-template-columns:max-content 1fr; gap:.4rem 1rem; }
.defs dt { font-weight:700; display:flex; align-items:center; gap:.4rem; } .defs dd { margin:0; }

/* Reader dialog */
dialog { width:min(52rem,94vw); max-height:88vh; border:1px solid var(--line); border-radius:.7rem; background:var(--panel); color:var(--ink); padding:1.25rem; }
dialog::backdrop { background:rgb(0 0 0 / 55%); }
.reader-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.sample { border-top:1px solid var(--line); padding:1rem 0; }
.sample pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--soft); padding:.8rem; border-radius:.4rem; font:13px/1.5 ui-monospace,monospace; }
.sample dl { display:grid; grid-template-columns:max-content 1fr; gap:.2rem .8rem; font-size:.85rem; margin:.5rem 0; }
.sample dt { color:var(--muted); } .sample dd { margin:0; }
mark.source-term { background:var(--title); color:var(--title-ink); padding:0 .15em; border-radius:.2em; font-weight:700; }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
@media (max-width: 600px) { .defs { grid-template-columns:1fr; } }