/* Valley Rain — design tokens.
   The map is the page: shaded relief with the rain drawn over it. Two themes, each a full
   set of tokens: Desert (light) and Slate (dark). They follow prefers-color-scheme unless
   data-theme="light" | "dark" is set on <html>. Every color used anywhere, including on the
   map canvas, is a token here; app code reads the map and ramp tokens with getComputedStyle. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}

:root {
  /* type: display for numbers and headings, body for UI text, mono for small data labels */
  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* shape */
  --r-panel: 28px; --r-card: 18px; --r-pill: 999px;
  --panel-w: 380px;
  --blur-panel: blur(18px) saturate(1.5);
  --blur-glass: blur(14px) saturate(1.6);
  /* ink that sits on the warning color in both themes */
  --warning-ink: #1A1206;

  /* ---- Desert (light) ---- */
  color-scheme: light;
  --page: #E4D8BF;                       /* behind the terrain; matches its faded edge */
  /* the one inset panel (at least 84% opaque) and the glass used only on floating controls */
  --panel: rgba(250,246,236,.9); --panel-solid: #FAF6EC;
  --glass: rgba(250,246,236,.72); --glass-solid: #F6F0E2;
  --edge: rgba(62,46,28,.2); --faint: rgba(62,46,28,.1); --raise: rgba(62,46,28,.06);
  --sheen: rgba(255,255,255,.6);
  --shadow-panel: 0 20px 60px rgba(70,52,30,.28); --shadow-glass: 0 10px 30px rgba(70,52,30,.22);
  /* text */
  --ink: #221C16; --mute: #6A5F52; --link: #1B5FBF;
  --pressed: #221C16; --on-pressed: #FAF6EC;   /* selected segment */
  /* rain accent */
  --rain: #1D6FD6; --rain-deep: #0D366B; --rain-pale: #6DA7EC; --on-rain: #FFFFFF;
  --hero-1: #0B2A5C; --hero-2: #1D5FBF; --hero-3: #3C8DFF;   /* big-number gradient, top to bottom */
  --bar-from: #6DA7EC; --bar-to: #0D366B;                    /* value bars, low end to high end */
  --ember: #D9682A;                      /* selection ring only */
  /* reserved: NWS alerts and stale data, always with an icon and a label; never as text color */
  --warning: #F0A000; --critical: #C8372D;
  /* rain ramp, low to high: light to dark blue, multiplied onto the light terrain */
  --ramp-0: rgba(158,197,244,.30); --ramp-1: rgba(109,167,236,.45); --ramp-2: rgba(57,135,229,.58);
  --ramp-3: rgba(37,106,191,.70); --ramp-4: rgba(24,79,149,.80); --ramp-5: rgba(13,54,107,.88);
  --ramp-6: rgba(8,31,69,.94);
  /* map canvas */
  --map-grid: rgba(110,92,74,.32); --map-grid-2: rgba(110,92,74,.13);
  --map-river-a: rgba(150,128,100,.28); --map-river-b: rgba(255,250,240,.55);
  --map-lake-a: #86B9DE; --map-lake-b: #4E8BBE; --map-lake-edge: rgba(40,90,140,.4);
  --map-road: rgba(122,96,70,.5); --map-street: rgba(122,96,70,.36);
  --map-label: rgba(34,28,22,.92); --map-halo: rgba(246,240,226,.88); --map-vignette: rgba(120,100,80,.18);
  --map-streak: rgb(16,58,140); --map-pulse: rgb(20,90,210);
  --dot-ring: rgba(255,255,255,.95); --dot-dry: rgba(255,255,255,.7); --dot-dry-ring: rgba(70,60,50,.45);
  --select: #0D2246;
  --glow-blend: multiply;                /* how the rain layer mixes with the terrain: tints it, keeps the relief */
}

/* ---- Slate (dark): the rain ramp runs indigo to cyan to white and is drawn with "screen".
   The same values appear twice: once for the system setting, once for the manual toggle. ---- */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0B0F18;
    --panel: rgba(13,16,29,.86); --panel-solid: #111528;
    --glass: rgba(20,24,44,.6); --glass-solid: #161A30;
    --edge: rgba(206,214,255,.18); --faint: rgba(206,214,255,.1); --raise: rgba(255,255,255,.07);
    --sheen: rgba(255,255,255,.12);
    --shadow-panel: 0 20px 60px rgba(2,4,12,.55); --shadow-glass: 0 10px 30px rgba(2,4,12,.45);
    --ink: #F3F5FF; --mute: #AEB5D0; --link: #8CC8FF;
    --pressed: rgba(255,255,255,.92); --on-pressed: #0E1124;
    --rain: #19C2FF; --rain-deep: #3046FF; --rain-pale: #C9FFF4; --on-rain: #06101F;
    --hero-1: #FFFFFF; --hero-2: #A8EEFF; --hero-3: #3B8BFF;
    --bar-from: #3046FF; --bar-to: #C9FFF4;
    --ember: #FF9A5A;
    --warning: #FFB224; --critical: #FF6B5E;
    --ramp-0: rgba(52,52,170,.14); --ramp-1: rgba(48,70,255,.32); --ramp-2: rgba(28,134,255,.48);
    --ramp-3: rgba(18,196,255,.62); --ramp-4: rgba(91,240,226,.76); --ramp-5: rgba(207,255,244,.88);
    --ramp-6: rgba(255,255,255,.96);
    --map-grid: rgba(255,190,130,.24); --map-grid-2: rgba(255,190,130,.1);
    --map-river-a: rgba(5,8,16,.55); --map-river-b: rgba(170,190,220,.2);
    --map-lake-a: #1E3D70; --map-lake-b: #0B1838; --map-lake-edge: rgba(150,200,255,.35);
    --map-road: rgba(255,206,150,.34); --map-street: rgba(255,206,150,.2);
    --map-label: rgba(240,244,255,.9); --map-halo: rgba(8,11,20,.78); --map-vignette: rgba(8,11,20,.72);
    --map-streak: rgb(190,240,255); --map-pulse: rgb(25,194,255);
    --dot-ring: rgba(10,12,24,.8); --dot-dry: rgba(10,12,24,.6); --dot-dry-ring: rgba(206,214,255,.35);
    --select: #FFFFFF;
    --glow-blend: screen;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0B0F18;
  --panel: rgba(13,16,29,.86); --panel-solid: #111528;
  --glass: rgba(20,24,44,.6); --glass-solid: #161A30;
  --edge: rgba(206,214,255,.18); --faint: rgba(206,214,255,.1); --raise: rgba(255,255,255,.07);
  --sheen: rgba(255,255,255,.12);
  --shadow-panel: 0 20px 60px rgba(2,4,12,.55); --shadow-glass: 0 10px 30px rgba(2,4,12,.45);
  --ink: #F3F5FF; --mute: #AEB5D0; --link: #8CC8FF;
  --pressed: rgba(255,255,255,.92); --on-pressed: #0E1124;
  --rain: #19C2FF; --rain-deep: #3046FF; --rain-pale: #C9FFF4; --on-rain: #06101F;
  --hero-1: #FFFFFF; --hero-2: #A8EEFF; --hero-3: #3B8BFF;
  --bar-from: #3046FF; --bar-to: #C9FFF4;
  --ember: #FF9A5A;
  --warning: #FFB224; --critical: #FF6B5E;
  --ramp-0: rgba(52,52,170,.14); --ramp-1: rgba(48,70,255,.32); --ramp-2: rgba(28,134,255,.48);
  --ramp-3: rgba(18,196,255,.62); --ramp-4: rgba(91,240,226,.76); --ramp-5: rgba(207,255,244,.88);
  --ramp-6: rgba(255,255,255,.96);
  --map-grid: rgba(255,190,130,.24); --map-grid-2: rgba(255,190,130,.1);
  --map-river-a: rgba(5,8,16,.55); --map-river-b: rgba(170,190,220,.2);
  --map-lake-a: #1E3D70; --map-lake-b: #0B1838; --map-lake-edge: rgba(150,200,255,.35);
  --map-road: rgba(255,206,150,.34); --map-street: rgba(255,206,150,.2);
  --map-label: rgba(240,244,255,.9); --map-halo: rgba(8,11,20,.78); --map-vignette: rgba(8,11,20,.72);
  --map-streak: rgb(190,240,255); --map-pulse: rgb(25,194,255);
  --dot-ring: rgba(10,12,24,.8); --dot-dry: rgba(10,12,24,.6); --dot-dry-ring: rgba(206,214,255,.35);
  --select: #FFFFFF;
  --glow-blend: screen;
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--page); color: var(--ink);
  font: 400 15px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--rain); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.num { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--mute); }
.mute { color: var(--mute); }

/* Glass is for controls that float over the map, and nothing else. */
.glass {
  background: var(--glass); border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--sheen), var(--shadow-glass);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
}

/* ---------------------------------------------------------------- the map is the page */

.app { position: fixed; inset: 0; overflow: hidden; background: var(--page); }
.map { position: absolute; inset: 0; z-index: 0; }
.map.leaflet-container { background: var(--page); font: inherit; outline-offset: -4px; }
.map.on-gauge.leaflet-grab { cursor: pointer; }
/* The rain layer: lit onto the dark terrain with "screen", laid normally on the light one. */
.leaflet-vr-glow-pane { mix-blend-mode: var(--glow-blend); }
.vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 90% 90% at 60% 45%, transparent 38%, var(--map-vignette) 100%);
  animation: lift 1.6s ease-out both;   /* the map starts dimmed and the curtain lifts as the rain blooms */
}
@keyframes lift {
  from { background-color: color-mix(in srgb, var(--page) 55%, transparent); }
  to { background-color: transparent; }
}

.map .leaflet-bar { border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-glass); }
.map .leaflet-bar a, .map .leaflet-bar a:hover {
  width: 36px; height: 36px; line-height: 36px;
  background: var(--glass-solid); color: var(--ink); border-bottom: 1px solid var(--faint);
}
.map .leaflet-bar a:last-child { border-bottom: 0; }
.map .leaflet-bar a.leaflet-disabled { background: var(--glass-solid); color: var(--mute); opacity: .6; }
.map .leaflet-top.leaflet-right { top: 64px; right: 2px; }

.tip {
  position: absolute; z-index: 4; pointer-events: none; white-space: nowrap;
  padding: 8px 12px; border-radius: 14px; font-size: 13px;
  transform: translate(-50%, calc(-100% - 14px));
}
.tip b { font-size: 17px; margin-left: 6px; }

.status-msg {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: min(420px, calc(100% - 32px)); margin: 0; padding: 14px 18px;
  border-radius: var(--r-card); text-align: center; text-wrap: balance;
}

/* ---------------------------------------------------------------- floating controls (glass) */

.top {
  position: absolute; z-index: 2; top: 12px; left: calc(var(--panel-w) + 24px); right: 12px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; pointer-events: none;
}
.top > * { pointer-events: auto; }
.periods { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.periods::-webkit-scrollbar { display: none; }
.periods button {
  flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--mute); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .2s, color .2s;
}
.periods button:hover { color: var(--ink); }
.periods button[aria-pressed="true"] { background: var(--pressed); color: var(--on-pressed); }

/* NWS alert: always the warning icon plus the alert's name; the color is never the only cue. */
.alert {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px;
  border-radius: var(--r-pill); cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink);
  border-color: color-mix(in srgb, var(--warning) 55%, transparent);
}
.alert svg { flex: none; }
.alert .until { color: var(--mute); font-weight: 500; }
.alert[data-level="critical"] { border-color: var(--critical); }
.alert[data-level="critical"] .warn-fill { fill: var(--critical); }
.alertbox {
  position: absolute; z-index: 4; top: 66px; right: 12px; width: min(420px, calc(100% - 24px));
  max-height: 60%; overflow: auto; overscroll-behavior: contain;
  border-radius: 22px; padding: 16px 18px; background: var(--panel);
}
.alertbox:focus { outline: none; }
.alert-item + .alert-item { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--faint); }
.alert-item { padding-left: 12px; border-left: 3px solid var(--warning); }
.alert-item[data-level="critical"] { border-left-color: var(--critical); }
.alertbox h3 { margin: 0 0 4px; font: 700 20px/1.15 var(--display); }
.alertbox p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.alertbox .headline { font-weight: 600; }
.alertbox .mono { margin-top: 0; font-size: 12px; }
.alert-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px !important; }
.alert-foot .pill { margin-left: auto; }

.mode { display: flex; align-items: center; gap: 12px; margin: 0; padding: 4px 4px 4px 16px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; }

.dock {
  position: absolute; z-index: 2; left: calc(var(--panel-w) + 24px); right: 12px; bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-end; pointer-events: none;
}
.dock > * { pointer-events: auto; }
.replay { display: flex; align-items: center; gap: 10px; width: min(420px, 100%); padding: 6px 12px 6px 6px; border-radius: 30px; }
.play {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 22px; cursor: pointer;
  background: linear-gradient(180deg, var(--rain-pale), var(--rain) 55%, var(--rain-deep)); color: var(--on-rain);
  box-shadow: inset 0 0 0 1px var(--sheen), var(--shadow-glass);
}
.fill-icon path { fill: currentColor; }
.steps { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-left: 6px; }
.steps button {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 6px 2px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
}
.steps .track { height: 5px; border-radius: 3px; background: var(--faint); overflow: hidden; }
.steps .track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bar-from), var(--rain)); }
.steps .lb { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.steps .tiny { display: none; }
.steps button:hover .lb { color: var(--ink); }
.steps button[aria-pressed="true"] .lb { color: var(--ink); font-weight: 600; }
.replay-off { max-width: 420px; margin: 0; padding: 10px 16px; border-radius: 20px; font-size: 12.5px; line-height: 1.4; color: var(--mute); }
.legend { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 24px; font-size: 12px; }
.legend .ramp { width: 150px; height: 8px; border-radius: 4px; }
.legend .ends { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--mute); }

.theme-toggle {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px;
  border: 1px solid var(--edge); background: var(--raise); color: var(--ink); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--mute); }

/* ---------------------------------------------------------------- the panel
   One inset panel holds the words: a sidebar on wide screens, a bottom sheet on phones. */

.panel {
  position: absolute; z-index: 3; left: 12px; top: 12px; bottom: 12px; width: var(--panel-w);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--sheen), var(--shadow-panel);
  -webkit-backdrop-filter: var(--blur-panel); backdrop-filter: var(--blur-panel);
}
.grab { display: none; }
.panel-head { padding: 18px 20px 12px; display: flex; flex-direction: column; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.brand .drop { flex: none; }
.drop-a { stop-color: var(--rain-pale); } .drop-b { stop-color: var(--rain); } .drop-c { stop-color: var(--rain-deep); }
.brand-name { margin: 0; font: 800 20px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.stamp { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
.stamp .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rain); box-shadow: 0 0 10px var(--rain); }
.stamp .stale-icon { display: none; flex: none; }
.stamp[data-stale="true"] { color: var(--ink); }
.stamp[data-stale="true"] .dot { display: none; }
.stamp[data-stale="true"] .stale-icon { display: block; }
.warn-fill { fill: var(--warning); }
.warn-ink { fill: none; stroke: var(--warning-ink); stroke-width: 2.2; stroke-linecap: round; }
.warn-dot { fill: var(--warning-ink); }

.search { position: relative; }
.search input {
  width: 100%; height: 42px; padding: 0 16px 0 40px;
  border-radius: 21px; border: 1px solid var(--faint); background: var(--raise); color: var(--ink);
  font: 500 15px var(--body);
}
.search input::placeholder { color: var(--mute); opacity: 1; }
.search-icon { position: absolute; left: 14px; top: 13px; pointer-events: none; }
.search-icon circle, .search-icon path { fill: none; stroke: var(--mute); stroke-width: 2.2; stroke-linecap: round; }
.results { display: flex; flex-direction: column; }
.results:not(:empty) { margin-top: 6px; }
.results button {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline; text-align: left;
  border: 0; background: transparent; padding: 9px 12px; border-radius: 12px; cursor: pointer;
}
.results button:hover, .results button:focus-visible { background: var(--raise); }
.results .none { margin: 0; padding: 8px 12px; font-size: 14px; color: var(--mute); }

.scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 22px;
}
.scroll:focus { outline: none; }
.scroll p { margin: 0; }
.scroll h2 { margin: 0 0 8px; font: 700 19px/1.2 var(--display); letter-spacing: -.01em; }

.hero { display: flex; flex-direction: column; gap: 6px; }
.big {
  display: inline-block; font-size: 88px; line-height: .9; padding-bottom: 4px;
  background: linear-gradient(180deg, var(--hero-1) 10%, var(--hero-2) 60%, var(--hero-3) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: 17px; line-height: 1.4; text-wrap: balance; }
.sub { font-size: 14px; line-height: 1.45; color: var(--mute); }
.foot { font-size: 12px; line-height: 1.55; color: var(--mute); }

.now {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  border-radius: var(--r-card); cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--rain) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rain) 30%, transparent);
}
.now .ring { position: relative; width: 14px; height: 14px; flex: none; }
.now .ring::before, .now .ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--rain); }
.now .ring::after { inset: 0; background: transparent; border: 2px solid var(--rain); animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

.pill {
  display: inline-flex; align-items: center; gap: 7px; flex: none; height: 36px; padding: 0 14px;
  border-radius: 18px; border: 1px solid var(--edge); background: var(--raise); color: var(--ink);
  font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pill:hover { border-color: var(--mute); }
.pill[aria-pressed="true"] { background: var(--pressed); color: var(--on-pressed); border-color: transparent; }
.pill:disabled { opacity: .6; cursor: default; }
.line-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.star-icon path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.star-icon[data-on="true"] path { fill: currentColor; }
.near { display: flex; align-items: center; gap: 12px; }
.near-note { font-size: 12.5px; line-height: 1.4; color: var(--mute); }

.list { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; width: 100%;
  padding: 10px 4px; border: 0; border-bottom: 1px solid var(--faint); border-radius: 0;
  background: transparent; text-align: left;
}
button.row { cursor: pointer; }
button.row:hover .nm { text-decoration: underline; text-decoration-color: var(--mute); text-underline-offset: 3px; }
.row .nm { font-weight: 600; font-size: 15px; min-width: 0; }
.row .sm { grid-column: 1; font-size: 12.5px; color: var(--mute); }
.row .v { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 22px; }
.row .bar { grid-column: 1 / -1; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--faint); overflow: hidden; }
.row .bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--bar-from), var(--rain), var(--bar-to)); }

.scroll details > summary { cursor: pointer; padding: 10px 4px; font-weight: 600; font-size: 15px; border-radius: 8px; }
.about { font-size: 13px; line-height: 1.55; color: var(--mute); }
.about > summary { color: var(--ink); }
.about p { margin: 8px 0 0; }
.about h3 { margin: 14px 0 0; font: 700 14px/1.3 var(--body); color: var(--ink); }
.about ul { margin: 6px 0 0; padding-left: 18px; }
.about strong { color: var(--ink); }

/* Gauge mode */
.back { align-self: flex-start; padding-left: 10px; }
.scroll .g-name { margin: 0; font: 800 30px/1.04 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.g-name:focus { outline: none; }
.hero .g-value { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.g-value .unit { font-size: 18px; font-weight: 600; color: var(--mute); }
.g-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0;
  background: var(--faint); border: 1px solid var(--faint); border-radius: 16px; overflow: hidden;
}
.facts div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel-solid); }
.facts dt, .facts dd { margin: 0; }
.facts .mono { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
.facts .num { font-size: 20px; }
.when { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: end; height: 96px; }
.when .col { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; }
.when .val { text-align: center; }
.when .b {
  min-height: 3px; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--bar-to), var(--rain) 40%, var(--bar-from));
}
.when .b.zero { background: var(--faint); }
.when .lab { font-size: 11px; line-height: 1.2; color: var(--mute); text-align: center; }
.scroll .cap { display: block; margin-top: 8px; }

/* Plain pages: no-script message and 404. */
.note { max-width: 44ch; margin: 18vh auto 0; padding: 0 20px; }
.note h1 { margin: 0 0 8px; font: 800 30px/1.05 var(--display); letter-spacing: -.025em; }

@media (max-width: 959px) {
  .map .leaflet-control-zoom { display: none; }   /* phones pinch */
  .panel {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 46%;
    border-radius: var(--r-panel) var(--r-panel) 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: height .35s cubic-bezier(.2, .8, .2, 1);
  }
  .panel.open { height: 86%; }
  .grab {
    display: block; flex: none; align-self: center; position: relative; touch-action: none;
    width: 72px; height: 24px; margin-top: 6px; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  }
  .grab::after { content: ""; position: absolute; left: 16px; right: 16px; top: 9px; height: 5px; border-radius: 3px; background: var(--mute); opacity: .55; }
  .panel-head { padding-top: 4px; }
  .big { font-size: 72px; }
  .top { left: 12px; }
  .dock { left: 12px; bottom: calc(46% + 10px); }
  .alertbox { left: 12px; right: 12px; width: auto; max-height: 44%; }
  .legend { padding: 8px 12px; }
  .legend .ramp { width: 110px; }
  .replay-off { font-size: 12px; }
}
@media (max-width: 520px) {
  .alert .until { display: none; }
  /* One compact row above the sheet, so the map keeps as much room as it can. */
  .dock { flex-wrap: nowrap; gap: 8px; }
  .replay { flex: 1 1 auto; width: auto; min-width: 0; gap: 4px; padding: 5px 10px 5px 5px; }
  .play { width: 40px; height: 40px; }
  .steps { gap: 3px; padding-left: 4px; }
  .steps .full { display: none; }
  .steps .tiny { display: block; text-align: center; }
  .legend { flex: none; gap: 6px; padding: 8px 10px; }
  .legend .ramp { width: 68px; }
  .replay-off { flex: 1 1 auto; padding: 8px 12px; }
}
@media (forced-colors: active) {
  .big { background: none; color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel, .alertbox { background: var(--panel-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}