/* Palette in oklch: one hue per variable, light/dark differ only in
   lightness (and a touch of chroma). temp red, RH light blue, wind
   dark blue, gust neutral ("white" on dark), csi sun-yellow,
   rain = wind blue. */
:root {
  --bg: oklch(100% 0 0);
  --fg: oklch(22% 0.01 260);
  --muted: oklch(52% 0.015 260);
  --grid: oklch(0% 0 0 / 0.07);
  --day: oklch(0% 0 0 / 0.18);
  --c-temp: oklch(55% 0.21 28);
  --c-rh: oklch(62% 0.12 235);
  --c-wind: oklch(45% 0.18 262);
  --c-gust: oklch(35% 0.02 262);
  --c-csi: oklch(58% 0.13 75);
  --c-csin: oklch(52% 0.045 260); /* night csi = raw NWP: muted slate */
  --night: oklch(45% 0.05 260 / 0.08);
  --c-rain: var(--c-wind);
  --c-pwet: oklch(58% 0.2 356);
  --freeze: oklch(55% 0.12 245 / 0.55);
  --c-bft: oklch(55% 0.13 55);
  --warn: oklch(58% 0.13 75);
  --err: oklch(52% 0.19 28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(20% 0.01 250);
    --fg: oklch(88% 0.005 250);
    --muted: oklch(65% 0.01 250);
    --grid: oklch(100% 0 0 / 0.08);
    --day: oklch(100% 0 0 / 0.22);
    --c-temp: oklch(72% 0.16 28);
    --c-rh: oklch(82% 0.08 235);
    --c-wind: oklch(66% 0.15 262);
    --c-gust: oklch(91% 0.005 262);
    --c-csi: oklch(82% 0.14 85);
    --c-csin: oklch(74% 0.05 260);
    --night: oklch(0% 0 0 / 0.22);
    --c-rain: var(--c-wind);
    --c-pwet: oklch(76% 0.14 356);
    --freeze: oklch(75% 0.1 235 / 0.55);
    --c-bft: oklch(78% 0.1 75);
    --warn: oklch(82% 0.14 85);
    --err: oklch(72% 0.16 28);
  }
}

/* reserve the scrollbar gutter: panels are sized to the measured width
   before the page grows tall enough to need a vertical scrollbar */
html { overflow-y: scroll; }
body {
  margin: 0 auto;
  padding: 0 12px 20px;
  max-width: 1500px;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 system-ui, sans-serif;
}
h1 { font-size: 20px; margin: 12px 0 2px; }
#meta { color: var(--muted); font-size: 12.5px; min-height: 1.4em; }
.err { color: var(--err); }
.warn { color: var(--warn); }
#cursor { font-variant-numeric: tabular-nums; }

#charts { display: grid; grid-template-columns: 1fr; column-gap: 18px; }

.ptitle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  font-weight: 600;
  margin: 10px 0 0;
}
.ptitle .readout {
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
svg { display: block; color: var(--muted); max-width: 100%; height: auto; }
svg text { font: 11px system-ui, sans-serif; }
.axis text { fill: var(--muted); }
.right-axis text { fill: var(--c); }

.grid line { stroke: var(--grid); }
.night-band { fill: var(--night); }
.zeroline { stroke: var(--freeze); stroke-width: 1.2; }
.bft-band { fill: var(--c-bft); }
.bftlabel { fill: var(--muted); font-size: 9px; }
.dayline { stroke: var(--day); stroke-width: 1; }
.daylabel { fill: var(--muted); font-size: 11px; }
.nowline { stroke: var(--muted); stroke-dasharray: 3 3; }
.nowlabel { fill: var(--muted); font-size: 10px; }
.cursorline { stroke: var(--muted); stroke-opacity: 0.7; }

/* Every series sits in a <g style="--c: var(--c-<var>)"> — one set of
   structural classes, color from the variable. Observed lines/dots are
   the variable's color pulled toward the foreground. */
.fan-outer { fill: var(--c); fill-opacity: 0.14; stroke: none; }
.fan-inner { fill: var(--c); fill-opacity: 0.28; stroke: none; }
.median { stroke: var(--c); stroke-width: 1.6; fill: none; }
.obs {
  stroke: color-mix(in srgb, var(--c) 45%, var(--fg));
  stroke-width: 1.1;
  fill: none;
}

.rain-outer { fill: var(--c); fill-opacity: 0.16; }
.rain-inner { fill: var(--c); fill-opacity: 0.32; }
.rain-med { stroke: var(--c); stroke-width: 1.6; }
.obs-bar { fill: color-mix(in srgb, var(--c) 45%, var(--fg)); fill-opacity: 0.5; }
.pwet { stroke: var(--c); stroke-width: 1.2; fill: none; }
.pwet6 { stroke: var(--c); stroke-width: 1; stroke-dasharray: 4 3; fill: none; opacity: 0.7; }

/* wdir-dot opacity/radius are set per timestep in JS (circular
   concentration): CSS must not pin fill-opacity or it wins over the
   presentation attribute. */
.wdir-dot { fill: var(--c); }
.wdir-mean { stroke: var(--c); stroke-width: 1.6; fill: none; }
.wdir-obs { fill: color-mix(in srgb, var(--c) 45%, var(--fg)); }