/* Runs — design tokens (Chart D: Tol high-contrast light, Night ledger dark)
   Every color in the UI must come from these variables.
   Theme: follows prefers-color-scheme; override with <html data-theme="light|dark">. */

@font-face { font-family: "Berkeley Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Berkeley Mono"), local("BerkeleyMono-Regular"), url("../fonts/BerkeleyMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Berkeley Mono"; font-weight: 700; font-style: normal; font-display: swap;
  src: local("Berkeley Mono Bold"), local("BerkeleyMono-Bold"), url("../fonts/BerkeleyMono-Bold.woff2") format("woff2"); }

:root {
  --font: "Berkeley Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* surfaces */
  --ground: #EEEEEE;  --panel: #F7F7F7;  --panel2: #FFFFFF;
  --rowRun: #F7F7F7;  --rowAbn: #FFFFFF; --rowDim: #EEEEEE; --group: #E3E3E3;
  --rule: #D5D5D5;    --rule2: #E6E6E6;  --frame: #111111;  --hollow: #FFFFFF;

  /* text */
  --ink: #111111; --mute: #4A4A4A;
  --inv: #111111; --invOn: #FFFFFF;

  /* state (Paul Tol high-contrast) */
  --run: #6E6E6E;
  --stale: #DDAA33; --staleOn: #000000; --stripe2: #000000;
  --unk: #004488;   --unkOn: #FFFFFF;
  --fail: #BB5566;  --failOn: #FFFFFF;
  --sel: #117733;   --selOn: #FFFFFF;

  /* data */
  --spark: #222222; --train: #9A9A9A; --trainRaw: #D9D9D9; --val: #004488;
  --series-0: #111111; --series-1: #004488; --series-2: #BB5566; --series-3: #997700;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E1012;  --panel: #15181B;  --panel2: #1A1D21;
    --rowRun: #15181B;  --rowAbn: #1F2328; --rowDim: #111416; --group: #0A0B0C;
    --rule: #2C3135;    --rule2: #22262A;  --frame: #5C6166;  --hollow: #15181B;
    --ink: #E4E4DE; --mute: #A2A6A3; --inv: #E4E4DE; --invOn: #0E1012;
    --run: #7E8285;
    --stale: #FFC14D; --staleOn: #000000; --stripe2: #0E1012;
    --unk: #C792EA;   --unkOn: #000000;
    --fail: #FF6B61;  --failOn: #000000;
    --sel: #4FC3F7;   --selOn: #000000;
    --spark: #D0D0CA; --train: #7E8285; --trainRaw: #33383C; --val: #7FB2FF;
    --series-0: #E4E4DE; --series-1: #7FB2FF; --series-2: #FF8A80; --series-3: #FFD54F;
  }
}
:root[data-theme="dark"] {
  --ground: #0E1012;  --panel: #15181B;  --panel2: #1A1D21;
  --rowRun: #15181B;  --rowAbn: #1F2328; --rowDim: #111416; --group: #0A0B0C;
  --rule: #2C3135;    --rule2: #22262A;  --frame: #5C6166;  --hollow: #15181B;
  --ink: #E4E4DE; --mute: #A2A6A3; --inv: #E4E4DE; --invOn: #0E1012;
  --run: #7E8285;
  --stale: #FFC14D; --staleOn: #000000; --stripe2: #0E1012;
  --unk: #C792EA;   --unkOn: #000000;
  --fail: #FF6B61;  --failOn: #000000;
  --sel: #4FC3F7;   --selOn: #000000;
  --spark: #D0D0CA; --train: #7E8285; --trainRaw: #33383C; --val: #7FB2FF;
  --series-0: #E4E4DE; --series-1: #7FB2FF; --series-2: #FF8A80; --series-3: #FFD54F;
}

html { color-scheme: light dark; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: 12px; line-height: 1.3;
  font-variant-ligatures: none; font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}
:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }

/* ---------- state textures (apply to any box) ---------- */
.tx { display: inline-block; width: 12px; height: 12px; flex: none; vertical-align: middle; }
.tx-bar { width: 4px; height: 100%; }
.tx-run   { background: var(--run); }
.tx-stale { background: repeating-linear-gradient(-45deg, var(--stale) 0 3px, var(--stripe2) 3px 5px); }
.tx-unk   { background-color: var(--hollow);
            background-image: radial-gradient(var(--unk) 1.1px, transparent 1.3px);
            background-size: 4px 4px; box-shadow: inset 0 0 0 1px var(--unk); }
.tx-fail  { background-color: var(--hollow);
            background-image: repeating-linear-gradient(45deg, var(--fail) 0 1.5px, transparent 1.5px 4px),
                              repeating-linear-gradient(-45deg, var(--fail) 0 1.5px, transparent 1.5px 4px);
            box-shadow: inset 0 0 0 1px var(--fail); }
.tx-queue { background: var(--hollow); outline: 1.5px dashed var(--mute); outline-offset: -1.5px; }
.tx-done  { background: var(--hollow); box-shadow: inset 0 0 0 1.5px var(--frame); }
.tx-loading { background-image: repeating-linear-gradient(0deg, var(--rule) 0 2px, transparent 2px 4px); }

/* ---------- code chips ---------- */
.chip { display: inline-flex; align-items: center; height: 13px; flex: none; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; padding: 0 4px; line-height: 13px; white-space: nowrap; }
.chip-stale { background: var(--stale); color: var(--staleOn); }
.chip-unk   { color: var(--unk); box-shadow: inset 0 0 0 1px var(--unk); background: var(--hollow); }
.chip-fail  { background: var(--fail); color: var(--failOn); }
.chip-queue { background: var(--hollow); color: var(--mute); outline: 1px dashed var(--mute); outline-offset: -1px; }
.chip-done { background: var(--hollow); color: var(--ink); box-shadow: inset 0 0 0 1px var(--frame); }
.chip-inv { background: var(--inv); color: var(--invOn); }
.chip-sel { background: var(--sel); color: var(--selOn); }

/* ---------- compare line styles (SVG) ---------- */
.ls-0 { stroke: var(--series-0); }
.ls-1 { stroke: var(--series-1); stroke-dasharray: 7 3; }
.ls-2 { stroke: var(--series-2); stroke-dasharray: 1.5 3; stroke-linecap: round; }
.ls-3 { stroke: var(--series-3); stroke-dasharray: 9 3 2 3; }
/* markers: 0 square · 1 circle · 2 diamond · 3 hollow square */

/* ---------- shared hatch for "not reached" / empty plots ---------- */
.hatch { background-image: repeating-linear-gradient(-45deg, transparent 0 6px, var(--rule2) 6px 7px); }

/* ---------- type scale ---------- */
.t-label { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.t-group { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: var(--mute); }
.t-name  { font-size: 11.5px; }
.t-value { font-size: 11px; font-weight: 700; }
.t-title { font-size: 18px; font-weight: 700; letter-spacing: .06em; }