/* Palette + chrome. SVG marks carry classes s0..s3, colors live ONLY here
   so dark mode is a variable swap (validated palette, dataviz skill).
   Dark s2/s3 snapped to the dataviz reference palette's dark orange/violet
   steps (#d95926, #9085e9) — the brief's #e0954a/#a883dd failed the OKLCH
   lightness band check (validate_palette.js --mode dark). */
:root {
  --bg: #fcfcfb; --card: #ffffff; --ink: #1f2328; --ink2: #59626b;
  --line: #e3e5e2; --s0: #2a78d6; --s1: #1baf7a; --s2: #d97f26;
  --s3: #8a63c9; --night: rgba(90, 110, 140, .10); --hl: rgba(42, 120, 214, .14);
  --ok-bg: #eaf3ec; --ok-ink: #205b31; --warn-bg: #fdf3d7; --warn-ink: #7a5a00;
  --fail-bg: #fbe9e7; --fail-ink: #8c2f24;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a19; --card: #232322; --ink: #e8e6e3; --ink2: #a5a29d;
    --line: #343432; --s0: #3987e5; --s1: #199e70; --s2: #d95926;
    --s3: #9085e9; --night: rgba(160, 180, 210, .08); --hl: rgba(57, 135, 229, .22);
    --ok-bg: #1f3325; --ok-ink: #9ed3ab; --warn-bg: #3a3010; --warn-ink: #ecd48a;
    --fail-bg: #3d211d; --fail-ink: #f0a99e;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, sans-serif; }
nav { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 2; }
nav a { padding: 6px 12px; border-radius: 8px; color: var(--ink2);
  text-decoration: none; font-weight: 600; }
nav a.on { background: var(--hl); color: var(--ink); }
main { max-width: 780px; margin: 0 auto; padding: 12px; }
h1 { font-size: 1.25rem; }
figure { margin: 12px 0; }
svg.lm-chart { width: 100%; height: auto; display: block; }
svg.lm-chart .grid { stroke: var(--line); stroke-width: 1; }
svg.lm-chart .axis { fill: var(--ink2); font-size: 11px; }
svg.lm-chart .title { fill: var(--ink); font-size: 12px; font-weight: 600; }
svg.lm-chart .night { fill: var(--night); }
svg.lm-chart .nowline { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.lm-chart .cross { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 2 2; }
svg .line { fill: none; stroke-width: 2; }
svg .line.s0 { stroke: var(--s0); } svg .line.s1 { stroke: var(--s1); }
svg .line.s2 { stroke: var(--s2); } svg .line.s3 { stroke: var(--s3); }
svg circle.s0, svg .bar.s0 { fill: var(--s0); } svg circle.s1 { fill: var(--s1); }
svg circle.s2 { fill: var(--s2); } svg circle.s3 { fill: var(--s3); }
svg.lm-strip .arrow { stroke: var(--s0); stroke-width: 2; }
svg.lm-strip .val { fill: var(--ink); font-size: 14px; font-weight: 700; }
svg.lm-strip .axis { fill: var(--ink2); font-size: 11px; }
svg.lm-strip .hl { fill: var(--hl); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.banner { padding: 10px 14px; border-radius: 10px; margin: 12px 0;
  background: var(--ok-bg); color: var(--ok-ink); }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); }
.daycard { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin: 12px 0; }
.daycard > div { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; }
.daycard .k { display: block; color: var(--ink2); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em; }
.daycard .v { font-size: 1.5rem; font-weight: 700; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
  white-space: nowrap; }
.pill { padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.pill.success { background: var(--ok-bg); color: var(--ok-ink); }
.pill.partial { background: var(--warn-bg); color: var(--warn-ink); }
.pill.failed { background: var(--fail-bg); color: var(--fail-ink); }
.btn { display: inline-block; padding: 8px 14px; border-radius: 10px;
  background: var(--s0); color: #fff; text-decoration: none; font-weight: 600;
  border: 0; font-size: 1rem; cursor: pointer; }
.note { color: var(--ink2); }
.tabs { display: flex; gap: 4px; margin: 8px 0; }
.tabs a { padding: 4px 10px; border-radius: 8px; color: var(--ink2);
  text-decoration: none; }
.tabs a.on { background: var(--hl); color: var(--ink); }
.tip { position: absolute; pointer-events: none; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  font-size: .75rem; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.tip .k { color: var(--ink2); }