/* Design tokens — single source for every scene (lead, Phase 4.1). Do not hard-code colours or sizes in scenes. */
@font-face { font-family: "Inter"; font-weight: 400; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Inter"; font-weight: 500; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Inter"; font-weight: 600; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Inter"; font-weight: 700; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-display: block; }
/* "Sudden shower" design (J's choice, 19 Oct 2026): Newsreader for headlines, Public Sans for everything else.
   Inter stays only as the fallback for glyphs the two lack (≤ ≥ Δ arrows). All OFL; licences in fonts/. */
@font-face { font-family: "Newsreader"; font-weight: 400; src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Newsreader"; font-weight: 500; src: url("../fonts/newsreader-latin-500-normal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Newsreader"; font-weight: 600; src: url("../fonts/newsreader-latin-600-normal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Public Sans"; font-weight: 400; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Public Sans"; font-weight: 500; src: url("../fonts/public-sans-latin-500-normal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Public Sans"; font-weight: 600; src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Public Sans"; font-weight: 700; src: url("../fonts/public-sans-latin-700-normal.woff2") format("woff2"); font-display: block; }

:root {
  /* LIGHT "Sudden shower" design (J's choice, 19 Oct 2026): pale paper and Prussian-blue ink, after Hiroshige's
     rain print. Data colours below are unchanged (validated, light mode, surface #eef3f8; this --bg is within 1%). */
  /* surfaces */
  --bg: #eef1f1;            /* stage background: pale paper */
  --bg-top: #e2e8eb;        /* top of the stage gradient (grey sky) */
  --panel: #fafbfb;         /* optional card / panel fill */
  --panel-line: #ccd5da;    /* panel border */
  --grid: #dce2e5;          /* gridlines, recessive */
  --axis: #9aa6ae;          /* axis lines */
  /* maps (Ch6-2 figure-ground, Ch11 base map): land is the light figure on the paper ground, edged by a dark
     coastline and a pale sea halo, so a map reads as a map without colouring the page */
  --land: #fcfcfb;          /* map land fill (1.1:1 vs --bg; the coast line + sea halo carry the edge) */
  --land-line: #c5cfd6;     /* planning-area outlines (internal) */
  --coast: #6f8394;         /* coastline (3.8:1 vs land) */
  --sea: #cfdce6;           /* sea halo hugging the coast */
  /* text (never use series colours for text) */
  --text: #18222c;          /* 14.2:1 on --bg */
  --text-2: #3f4b57;        /* 7.9:1 */
  --text-3: #5c6874;        /* 5.0:1 — minimum for any text */
  --accent: #1f3a5f;        /* Prussian blue (the print's ink): scene numbers, UI focus (10:1) */
  --deco-rain-color: #1f3a5f; /* title-scene rain lines (js/core/rain.js) */
  /* semantic data colours */
  --taxi: #c27c00;          /* taxi lines / bars / marks in charts */
  --taxi-dot: #d38400;      /* taxi points on maps (draw with --taxi-dot-edge outline) */
  --taxi-dot-edge: #6b4300;
  --normal: #6b7a8c;        /* "normal" reference (baseline) — dashed line / band */
  --rain-1: #7fa9e4;        /* rain ramp light → dark = more rain (light end ≥ 2:1 on --bg) */
  --rain-2: #3f7fd6;
  --rain-3: #1d4f99;
  /* rain intensity CLASSES (Ch6-3: bin quantitative colour; Ch8 rule 5 + 3-9 steps): mm per 10 min
     0.2-0.5 / 0.5-1 / 1-2 / 2-5 / 5+ ; pale = little, dark = a lot. Validated ordinal, light, surface = --land. */
  --rainc-0: #8fb6ea; --rainc-1: #5a8ed8; --rainc-2: #3169bd; --rainc-3: #1c4c92; --rainc-4: #112f5e;
  --dry: #9aa6b5;           /* dry state (neutral) */
  /* diverging deviation: negative (fewer taxis) purple — neutral grey — positive amber; darker = larger magnitude */
  --neg-1: #a08ae8; --neg-2: #6f4fc4; --neg-3: #42248f;
  --mid: #c9cfd8;
  --pos-1: #d2a03a; --pos-2: #a87400; --pos-3: #6e4a00;
  /* clusters (scene 6) and regions (scene 2) — avoid blue/amber/purple-deviation; always direct-labelled */
  --cl-0: #1baf7a; --cl-1: #6250d6; --cl-2: #e87ba4; --cl-3: #7f9a2e;
  --region-0: #1a9e6f; --region-1: #6c5fd0; --region-2: #e37ba4; --region-3: #c9a227; --region-4: #d64f4b;
  /* regions (S2, J review 19 Oct): five distinct hues (Ch6-3 nominal scale); Central stays full strength, the others are
     mixed 30% toward --bg (Few: highlight one) and still pass CVD + normal-vision separation (validator, adjacent in stack order) */
  /* status (UI only) */
  --focus: #1f3a5f;

  /* type scale (px at the 1280x720 stage) — 18 px is the hard minimum for ANY text */
  --fs-min: 18px;   /* axis ticks, source line, small labels */
  --fs-s: 20px;     /* legends, tooltips, annotations */
  --fs-m: 24px;     /* chart titles, key labels */
  --fs-l: 32px;     /* scene headline */
  --fs-xl: 56px;    /* hero numbers */
  --fs-xxl: 72px;   /* title scene */
  --font: "Public Sans", "Inter", "Segoe UI", system-ui, sans-serif;   /* labels, numbers, body */
  --font-display: "Newsreader", Georgia, serif;                       /* headlines, title */

  /* layout grid (1280 x 720 stage) */
  --stage-w: 1280px; --stage-h: 720px;
  --margin-x: 48px;         /* left/right safe margin */
  --header-top: 28px;       /* kicker baseline area */
  --content-top: 128px;     /* charts start here */
  --content-bottom: 648px;  /* charts end here (520 px tall content band) */
  --footer-top: 664px;      /* source line / controls */
  --cols: 12; --gutter: 24px; /* column width = (1184 - 11*24)/12 = 76.67 px */

  /* motion */
  --t-fast: 250ms; --t-med: 600ms; --t-slow: 1200ms;
}

html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); }
/* overcast-sky gradient behind every scene (rain theme); charts sit on the lighter lower part */
.stage { position: relative; width: var(--stage-w); height: var(--stage-h); overflow: hidden;
         background: linear-gradient(180deg, var(--bg-top) 0px, var(--bg) 240px, var(--bg) 100%); }
.scene { position: absolute; inset: 0; }
/* scene header: number in the serif (Prussian blue), name in sentence case; headline in the serif */
.kicker { position: absolute; left: var(--margin-x); top: 24px; font-size: 20px; font-weight: 500; color: var(--text-2); }
.kicker .k-num { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--accent); margin-right: 10px; }
.kicker .k-sep { display: none; }
.headline { position: absolute; left: var(--margin-x); right: var(--margin-x); top: 56px; font-family: var(--font-display);
            font-size: 36px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.08; color: var(--text); }
.source { position: absolute; left: var(--margin-x); bottom: 18px; font-size: var(--fs-min); color: var(--text-3); }
svg text { font-family: var(--font); fill: var(--text-2); font-size: var(--fs-min); }
.axis path, .axis line { stroke: var(--axis); }
.axis text { fill: var(--text-3); font-size: var(--fs-min); }
.grid line { stroke: var(--grid); stroke-width: 1; }
.tooltip { position: absolute; pointer-events: none; background: #ffffffee; border: 1px solid var(--panel-line);
           box-shadow: 0 2px 10px rgba(19, 32, 47, 0.12);
           border-radius: 6px; padding: 10px 12px; font-size: var(--fs-s); color: var(--text); line-height: 1.3;
           opacity: 0; transition: opacity var(--t-fast); z-index: 50; max-width: 360px; }
.legend { font-size: var(--fs-s); color: var(--text-2); }
button.ctl { font: inherit; font-size: var(--fs-min); color: var(--text); background: var(--panel);
             border: 1px solid var(--panel-line); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
button.ctl[aria-pressed="true"] { border-color: var(--accent); background: #dce3ea; color: var(--text); }