:root {
  --bg: #f2f5f8; --card: #ffffff; --ink: #14232e; --muted: #465866; --line: #d0dbe2;
  --brand: #0b3d5c; --brand-ink: #ffffff;
  --bransford: #0b6fa8; --knightsford: #506677; --stanford: #6b46c1;
  --amber: #92400e; --amber-bg: #fef3c7; --amber-line: #d98a00; --amber-inset: #fffbeb; --amber-inset-line: #fde68a;
  --red: #991b1b; --red-bg: #fef2f2; --red-line: #ef4444; --red-chart: #991b1b;
  --green: #19633f; --green-bg: #edf7f1;
  --btn-off-bg: #e2e8f0; --btn-off-ink: #475569;
  --amber-chart: #b87100; --stale-ink: #364755; --raised: #ffffff; --raised-line: #d0dbe2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e161c; --card: #16222b; --ink: #ecf2f6; --muted: #94a7b5; --line: #253644;
    --brand: #163245;
    --bransford: #5cb8ee; --knightsford: #9cb2c2; --stanford: #bfa7ec;
    --amber: #fbbf24; --amber-bg: #2a1f0d; --amber-line: #d98a00; --amber-inset: #221a11; --amber-inset-line: #5a4210;
    --red: #f87171; --red-bg: #341416; --red-line: #ef4444; --red-chart: #f87171;
    --green: #4ade80; --green-bg: #0e2b1d;
    --btn-off-bg: #253644; --btn-off-ink: #94a7b5;
    --amber-chart: #d98a00; --stale-ink: #94a7b5; --raised: #1f2d38; --raised-line: #3b5162; --line: #354c5e;
  }
}
:root[data-theme="dark"] {
    --bg: #0e161c; --card: #16222b; --ink: #ecf2f6; --muted: #94a7b5; --line: #253644;
    --brand: #163245;
    --bransford: #5cb8ee; --knightsford: #9cb2c2; --stanford: #bfa7ec;
    --amber: #fbbf24; --amber-bg: #2a1f0d; --amber-line: #d98a00; --amber-inset: #221a11; --amber-inset-line: #5a4210;
    --red: #f87171; --red-bg: #341416; --red-line: #ef4444; --red-chart: #f87171;
    --green: #4ade80; --green-bg: #0e2b1d;
    --btn-off-bg: #253644; --btn-off-ink: #94a7b5;
    --amber-chart: #d98a00; --stale-ink: #94a7b5; --raised: #1f2d38; --raised-line: #3b5162; --line: #354c5e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap, main, footer { max-width: 680px; margin: 0 auto; }
.wrap { padding: 0 16px; }
header { background: var(--brand); color: var(--brand-ink); padding: 14px 0 12px; padding-top: max(14px, env(safe-area-inset-top)); }
header h1 { margin: 0; font-size: 20px; font-weight: 700; }
header .sub { margin: 0; opacity: .8; font-size: 14px; }
main { padding: 10px 16px 8px; display: grid; gap: 10px; }
footer { padding: 8px 16px 32px; color: var(--muted); font-size: 12px; }
footer a { color: inherit; display: inline-block; padding: 8px 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.card.flood { border: 2px solid var(--amber-line); }
.card h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.card p { margin: 6px 0; }
.small { font-size: 12px; font-weight: 500; color: var(--muted); }
.loading { color: var(--muted); }
@media (min-width: 720px) { .card { padding: 20px; } }

/* banners: amber for delayed data, red only when data is delayed while a flood is possible */
.banner { border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; border: 1px solid; }
.banner p { margin: 2px 0; }
.banner.delayed { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.banner.delayed-flood { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.banner a { color: inherit; font-weight: 700; }
.banner.notice { background: var(--card); border-color: var(--line); color: var(--muted); }

/* the present: status pill, the reading, trend, distance to the lines */
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 700; }
.pill.calm { background: var(--green-bg); color: var(--green); }
.pill.flood { background: var(--amber-bg); color: var(--amber); }
.pill.passed { background: var(--card); color: var(--muted); border: 1px solid var(--line); }
.reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 8px 0 2px; }
.hero { font-size: 32px; font-weight: 700; line-height: 1.15; }
.trend { font-size: 14px; font-weight: 500; color: var(--muted); }
.stale .hero { opacity: .72; color: var(--stale-ink); }
.distance { font-size: 14px; font-weight: 500; margin: 2px 0; }

.prediction { background: var(--amber-inset); border: 1px solid var(--amber-inset-line); border-radius: 8px; padding: 12px 14px; margin: 10px 0 8px; }
.prediction h3 { margin: 0 0 2px; font-size: 20px; font-weight: 700; }
.prediction p { margin: 2px 0; font-size: 14px; line-height: 1.45; }
.prediction .tag { font-size: 12px; font-weight: 700; color: var(--amber); }
.quiet-note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

#chart { width: 100%; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 12px; font-weight: 500; }
.chart .line { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-width: 1.75; }
.chart .line.main { stroke-width: 3; }
.chart .ref.alert { stroke: var(--amber-chart); stroke-width: 1.5; stroke-dasharray: 6 4; }
.chart .ref.house { stroke: var(--red-chart); stroke-width: 2; }
.chart .pill-bg { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.chart .reflabel { font-size: 10px; font-weight: 700; }
.chart .reflabel.alert { fill: var(--amber); }
.chart .reflabel.house { fill: var(--red-chart); }
.chart .now { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; font-weight: 500; color: var(--muted); }
.swatch { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.swatch.bransford { background: var(--bransford); } .swatch.knightsford { background: var(--knightsford); } .swatch.stanford { background: var(--stanford); }

button { font: inherit; font-size: 15px; font-weight: 600; width: 100%; background: var(--brand); color: var(--brand-ink); border: 2px solid var(--brand); border-radius: 10px; padding: 12px 18px; min-height: 48px; cursor: pointer; }
button.on { background: var(--raised); color: var(--ink); border-color: var(--raised-line); }
button:disabled { background: var(--btn-off-bg); color: var(--btn-off-ink); border-color: var(--btn-off-bg); cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--bransford); outline-offset: 2px; }
#alerts-note { margin-top: 8px; }
#recent { padding-left: 18px; margin: 8px 0 0; }
.banner a.official { display: flex; align-items: center; min-height: 44px; margin-top: 4px; text-decoration: underline; font-weight: 700; }

.rainbars .bar { fill: var(--bransford); opacity: .55; }
.rainbars .bar.wettest { opacity: 1; }
.sub-h { margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
.outlook-band { fill: var(--bransford); opacity: .22; stroke: none; }
.outlook-median { fill: none; stroke: var(--bransford); stroke-width: 2.5; stroke-linejoin: round; }
.outlook-band.inner { opacity: .4; }