/* riverlvl — stylesheet.
   Hand-maintained, lives at the repo root (not in _generator/) and is copied
   into the deploy directory by scripts/stage.sh, matching lakelvl's layout.
   Cache-busted by content hash from build.js. */

:root {
  --bg: #f7fafc;
  --card: #ffffff;
  --ink: #10222f;
  --ink-2: #33505f;
  --mut: #5f7686;
  --line: #dde6ec;
  --line-2: #eef3f6;

  /* Series palette — validated with the dataviz checker on a light surface. */
  --blue: #2a78d6;
  --blue-dk: #1c5da9;
  --green: #008300;

  /* Flood severity: one hue, monotonic lightness, all >= 3:1 on white. */
  --sev-action: #d97066;
  --sev-minor: #d15f54;
  --sev-moderate: #b93b30;
  --sev-major: #8f1f16;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 34, 47, .05), 0 4px 14px rgba(16, 34, 47, .04);

  /* Extended palette. Every colour the site paints now has a name, so the
     dark theme below is a value swap and nothing has to be hunted down in a
     rule. */
  --head-bg: #0f3f6b;
  --head-ink: #ffffff;
  --head-nav: #d6e8f7;
  --accent: #8dc4f0;
  --foot-bg: #0e2c48;
  --foot-ink: #b9cfe0;
  --foot-link: #9ecdf2;
  --foot-fine: #8fa9bd;
  --on-accent: #ffffff;
  --input-bg: #ffffff;
  --placeholder: #7e93a3;
  --focus: #8dc4f0;
  --pop-bg: #ffffff;
  --pop-shadow: 0 8px 26px rgba(10, 32, 52, .22);
  --tint: #f2f8fd;
  --tint-line: #cfe3f5;
  --hover: #f6fbff;
  --th-bg: #f1f6fa;
  --row-hover: #f8fbfd;
  --code-bg: #0e2c48;
  --code-ink: #dbe9f5;
  --field-bg: #fbfdfe;
  --chip-bg: #ffffff;
  --muted-load: #b8c6d0;
  --warn-ink: #8a4b16;
  --cat-bg: #fcfdfe;
  --cat-reached-bg: #fff6f5;
  --alert-line: #f0c4bd;
  --alert-bg: #fff7f6;
  --sponsor-line: #b9d4ea;
  --sponsor-bg: #f7fbfe;
  --verdict-low: #c07a25;
  --verdict-below: #c9a227;
  --sev-tint-action: #fff8f7;
  --sev-tint-minor: #fff6f5;
  --sev-tint-moderate: #fff4f2;
  --sev-tint-major: #fff2f0;
  --use-float-bg: #dcefff;
  --use-float-ink: #0f5289;
  --use-paddle-bg: #e4e6ff;
  --use-paddle-ink: #38409e;
  --use-fish-bg: #dcf3e2;
  --use-fish-ink: #1a6634;
  --use-flood-bg: #fde7e3;
  --use-flood-ink: #9a2d24;
  --use-bg: #e8eff4;
  --pct-bg: #eef3f7;
  --pct-very-low-bg: #fbe4d3;
  --pct-very-low-ink: #8a4212;
  --pct-low-bg: #fdeedd;
  --pct-low-ink: #8a4b16;
  --pct-below-normal-bg: #fdf5e3;
  --pct-below-normal-ink: #7d5f14;
  --pct-normal-bg: #e2f2e6;
  --pct-normal-ink: #1a6634;
  --pct-above-normal-bg: #e2ecfb;
  --pct-above-normal-ink: #17548f;
  --pct-high-bg: #d8e4f8;
  --pct-high-ink: #123f78;
  --pct-very-high-bg: #fde2de;
  --pct-very-high-ink: #8f1f16;
  --chart-veil: rgba(255,255,255,.7);
  --spark-fill: rgba(42,120,214,.10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
a { color: var(--blue-dk); }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.015em; }
h1 { font-size: clamp(26px, 4vw, 36px); margin: 6px 0 4px; }
h2 { font-size: 21px; margin: 0 0 12px; }
h3 { font-size: 16.5px; margin: 0 0 6px; }
p { margin: 0 0 12px; }
.mut, .fine { color: var(--mut); font-size: 13.5px; }
.lede { font-size: 17.5px; color: var(--ink-2); max-width: 66ch; }

/* ---------------------------------------------------------------- chrome */
.site-head { background: var(--head-bg); color: var(--head-ink); }
.site-head .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px; }
.brand { color: var(--head-ink); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.brand span { color: var(--accent); }
.site-head nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-head nav a { color: var(--head-nav); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.site-head nav a:hover { color: var(--head-ink); }

.title-sponsor { background: var(--tint); border-bottom: 1px solid var(--tint-line); text-align: center; padding: 7px 16px; font-size: 13.5px; color: var(--ink-2); }

/* ------------------------------------------------------------- search
   font-size on the input is 16px and never smaller: below that, iOS Safari
   zooms the whole page on focus and the visitor has to pinch back out.
   The results list is absolutely positioned in the header so opening it
   never pushes the page content down. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.rl-search { position: relative; flex: 0 1 320px; margin: 0; }
.rl-search-input {
  width: 100%; font: inherit; font-size: 16px; padding: 9px 13px;
  border: 1px solid transparent; border-radius: 9px; background: var(--input-bg);
  color: var(--ink); min-height: 42px;
}
.rl-search-input::placeholder { color: var(--placeholder); }
.rl-search-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.rl-search-note { font-size: 12.5px; color: var(--mut); margin: 6px 0 0; }
.rl-search-results { margin-top: 6px; }
/* .gauge-list sets display:grid, and an author display beats the [hidden]
   attribute's UA display:none — without this the empty results panel renders
   as a white bar across the nav. Same trap as .chart-loading below. */
.rl-search-results[hidden], .rl-search-note[hidden] { display: none; }
.rl-search-results li a { padding: 11px 13px; min-height: 44px; align-items: center; }
/* Empty state. "No gauges match that." used to be the end of the road; the
   panel now offers the state list instead, so a mistyped river name still
   leads somewhere. */
.rl-search-results.rl-nomatch { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-nomatch-head { flex: 0 0 100%; font-size: 12.5px; color: var(--mut); margin: 2px 0 2px; }
.rl-search-results.rl-nomatch li a { padding: 6px 12px; min-height: 0; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; text-decoration: none; }

/* Header instance: float the results over the page. */
.site-head .rl-search-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--pop-bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; box-shadow: var(--pop-shadow); max-height: 62vh;
  overflow-y: auto; grid-template-columns: 1fr; gap: 2px;
}
.site-head .rl-search-results li a { border: 0; }
.site-head .rl-search-note {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 6px);
  background: var(--pop-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; box-shadow: var(--pop-shadow); margin: 0;
}
/* When results are open the note sits inside the panel instead. */
.site-head .rl-search-results:not([hidden]) ~ .rl-search-note { display: none; }

/* Hero instance: bigger target, results in flow. */
.rl-search-hero { flex: none; max-width: 560px; margin-top: 14px; }
.rl-search-hero .rl-search-input { border-color: var(--line); min-height: 50px; padding: 13px 15px; }
.rl-search-hero .rl-search-input:focus { outline-color: var(--blue); border-color: var(--blue); }
.rl-search-hero .rl-search-results { grid-template-columns: 1fr; margin-top: 10px; }

main { padding: 22px 0 48px; }
.crumbs { font-size: 13.5px; color: var(--mut); margin-bottom: 10px; }
.crumbs a { color: var(--mut); }

.site-foot { background: var(--foot-bg); color: var(--foot-ink); padding: 30px 0 44px; margin-top: 40px; font-size: 14px; }
.site-foot a { color: var(--foot-link); }
.site-foot .fine { color: var(--foot-fine); font-size: 12.5px; max-width: 78ch; }

/* --------------------------------------------------------------- sections */
main > section, .state-grid, table.hub, .hero { margin-bottom: 26px; }
main > section {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
}
main > section > h2 { margin-top: 0; }

/* ------------------------------------------------------- gauge head/reading */
.gauge-head .loc { color: var(--mut); font-size: 14.5px; margin: 0 0 16px; }
.use-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--use-bg); color: var(--ink-2); }
.use-float { background: var(--use-float-bg); color: var(--use-float-ink); }
.use-paddle { background: var(--use-paddle-bg); color: var(--use-paddle-ink); }
.use-fish { background: var(--use-fish-bg); color: var(--use-fish-ink); }
.use-flood { background: var(--use-flood-bg); color: var(--use-flood-ink); }

.reading { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px; }
.big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* The server renders 309 and refresh() may replace it with 1,240. .big is a
   baseline flex row, so a width change shoves the percent badge sideways
   after paint — inside the LCP region. Tabular figures make every digit the
   same width, and the min-width stops a 3-character reading from being
   narrower than the space the badge was laid out against. */
#bigVal {
  font-size: clamp(44px, 9vw, 68px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  min-width: 3.2ch; display: inline-block;
}
#bigVal.muted-load { color: var(--muted-load); }
.unit { font-size: 20px; font-weight: 700; color: var(--mut); }
/* Same reason as #bigVal: both of these are rewritten by refresh(). */
.read-at { color: var(--mut); font-size: 13.5px; margin: 10px 0 0; min-height: 1.6em; }
#readTime, #readAge { font-variant-numeric: tabular-nums; }
.read-at.read-stale { color: var(--warn-ink); }

.pct { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: var(--pct-bg); color: var(--ink-2); white-space: nowrap; }
.pct-very-low { background: var(--pct-very-low-bg); color: var(--pct-very-low-ink); }
.pct-low { background: var(--pct-low-bg); color: var(--pct-low-ink); }
.pct-below-normal { background: var(--pct-below-normal-bg); color: var(--pct-below-normal-ink); }
.pct-normal { background: var(--pct-normal-bg); color: var(--pct-normal-ink); }
.pct-above-normal { background: var(--pct-above-normal-bg); color: var(--pct-above-normal-ink); }
.pct-high { background: var(--pct-high-bg); color: var(--pct-high-ink); }
.pct-very-high { background: var(--pct-very-high-bg); color: var(--pct-very-high-ink); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.stat span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); margin-bottom: 3px; }
.stat b { font-size: 18px; font-weight: 700; }
.stat small { font-weight: 500; color: var(--mut); font-size: 12.5px; }
.stat-alert b { color: var(--sev-major); }

/* Record high and low. A second stat row rather than four more tiles in the
   first: the first row answers "what is it doing", this one answers "how
   unusual is that", and grid-packing them together made the reading and its
   period-of-record context read as one undifferentiated wall of six figures.
   Lighter type, no top border, so it reads as a footnote to the row above
   rather than a competing headline. */
.stat-row-rec { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.stat-row-rec .stat b { font-size: 16px; font-weight: 600; }
.stat-row-rec .stat small { display: block; margin-top: 2px; font-size: 11.5px; }

/* -------------------------------------------------------------- verdict */
.verdict { border-left: 5px solid var(--blue); }
.verdict-head { font-size: 19px; margin: 0 0 8px; }
.verdict p { max-width: 72ch; }
.verdict-fine { color: var(--mut); font-size: 12.5px; margin-bottom: 0; }
.verdict-low { border-left-color: var(--verdict-low); }
.verdict-below { border-left-color: var(--verdict-below); }
.verdict-normal { border-left-color: var(--green); }
.verdict-above { border-left-color: var(--blue); }
.verdict-high { border-left-color: var(--blue-dk); }
.verdict-action { border-left-color: var(--sev-action); background: var(--sev-tint-action); }
.verdict-minor { border-left-color: var(--sev-minor); background: var(--sev-tint-minor); }
.verdict-moderate { border-left-color: var(--sev-moderate); background: var(--sev-tint-moderate); }
.verdict-major { border-left-color: var(--sev-major); background: var(--sev-tint-major); }
.verdict-action .verdict-head, .verdict-minor .verdict-head,
.verdict-moderate .verdict-head, .verdict-major .verdict-head { color: var(--sev-major); }
/* A gauge that stopped reporting is not a river condition, it is the absence
   of one — so it does not get the blue "informational" bar that every normal
   reading carries. Grey reads as "nothing here to act on", which is exactly
   what the page now says. */
.verdict-dark { border-left-color: var(--mut); background: var(--card); }
.verdict-dark .verdict-head { color: var(--ink-2); }
.verdict-unrated { border-left-color: var(--line-2); }

/* ---------------------------------------------------------- flood ladder */
.ladder { list-style: none; margin: 0 0 12px; padding: 0; }
.cat { border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 8px; padding: 10px 13px; margin-bottom: 8px; background: var(--cat-bg); }
.cat-action { border-left-color: var(--sev-action); }
.cat-minor { border-left-color: var(--sev-minor); }
.cat-moderate { border-left-color: var(--sev-moderate); }
.cat-major { border-left-color: var(--sev-major); }
.cat-now { border-left-color: var(--blue); background: var(--tint); }
.cat.reached { background: var(--cat-reached-bg); }
.cat-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cat-name { font-weight: 700; }
.cat-stage { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cat-flag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--sev-major); color: var(--on-accent); padding: 2px 7px; border-radius: 4px; }
.impacts { margin: 8px 0 0; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); }
.impacts li { margin-bottom: 4px; }
.impacts b { font-variant-numeric: tabular-nums; color: var(--ink); }
.fcst { background: var(--tint); border: 1px solid var(--tint-line); border-radius: 8px; padding: 10px 13px; font-size: 14.5px; margin: 0; }

/* ---------------------------------------------------------------- charts */
/* Build-time sparkline: the trend, on first paint, with no JavaScript. */
.spark-fig { margin: 0 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 10px; box-shadow: var(--shadow); }
.spark30 { display: block; width: 100%; height: 96px; }
.spark-fig figcaption { color: var(--mut); font-size: 12.5px; margin-top: 4px; }
.spark-key { white-space: nowrap; }

/* The container height is fixed and the canvas fills it exactly, so the
   canvas occupies its final geometry before Chart.js ever runs and nothing
   below the chart moves when it draws. */
.chart-wrap { position: relative; height: 300px; }
#chart { display: block; width: 100%; height: 100%; }
.chart-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--mut); font-size: 14px; background: var(--chart-veil); }
/* display:flex above beats the [hidden] attribute's default display:none, so
   the overlay would sit on top of a perfectly good chart. Restate it. */
.chart-loading[hidden] { display: none; }
.chart-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.chart-tabs button { font: inherit; font-size: 13.5px; font-weight: 600; padding: 6px 13px; border: 1px solid var(--line); background: var(--chip-bg); color: var(--ink-2); border-radius: 99px; cursor: pointer; }
.chart-tabs button.on { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }

/* --------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
table.hub, table.crests { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
th { text-align: left; padding: 10px 12px; background: var(--th-bg); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); border-bottom: 1px solid var(--line); }
td { padding: 10px 12px; border-top: 1px solid var(--line-2); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover td { background: var(--row-hover); }
td small { display: block; color: var(--mut); font-size: 12.5px; }

/* ----------------------------------------------------------------- lists */
.gauge-list, .lake-list, .chip-list { list-style: none; margin: 0; padding: 0; }
.gauge-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.gauge-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--chip-bg); font-size: 14.5px; }
.gauge-list a:hover { border-color: var(--blue); background: var(--hover); }
.gauge-list span { color: var(--mut); font-size: 12.5px; white-space: nowrap; }
.gauge-list li.alert a { border-color: var(--alert-line); background: var(--alert-bg); }

.lake-list a { display: block; text-decoration: none; color: var(--ink); padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip-bg); margin-bottom: 8px; }
.lake-list a:hover { border-color: var(--blue); background: var(--hover); }
.lake-list b { display: block; font-size: 16px; }
.lake-list span { color: var(--mut); font-size: 13px; }
.crosslink { border-left: 5px solid var(--green); }

.chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-list a { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; color: var(--ink-2); background: var(--chip-bg); border: 1px solid var(--line); border-radius: 99px; padding: 5px 13px; font-size: 14px; }
.chip-list a:hover { border-color: var(--blue); color: var(--blue-dk); }
.chip-list small { color: var(--mut); font-size: 12px; }
.chip-list.big a { font-size: 15px; padding: 8px 16px; }
.more { font-weight: 600; font-size: 14.5px; text-decoration: none; }

/* ------------------------------------------------- collapsible reference
   The FAQ and the crest table are worth having and worth indexing, but on a
   phone they are two screens of scrolling between the reader and the rest of
   the page. Collapsed by default; the content is still in the HTML, so
   crawlers and the FAQPage markup are unaffected. */
details > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; padding: 4px 0; min-height: 44px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary h2 { margin: 0; }
details > summary::after {
  content: "▾"; color: var(--mut); font-size: 14px; margin-left: auto;
  transition: transform .15s ease;
}
details[open] > summary::after { transform: rotate(180deg); }
details > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.det-hint { color: var(--mut); font-size: 13px; white-space: nowrap; }
.det-body { padding-top: 10px; }

/* ------------------------------------------------------------------- FAQ */
.faq-item { border-top: 1px solid var(--line-2); padding: 13px 0; }
.faq-item:first-of-type { border-top: 0; padding-top: 0; }
.faq-item p { margin: 0; color: var(--ink-2); max-width: 74ch; }
.blurb { max-width: 74ch; color: var(--ink-2); }

/* Recently checked. Hidden until the inline script on the homepage finds
   something in localStorage, and populated before first paint so the state
   grid never gets pushed down after the page has rendered. */
.recent[hidden] { display: none; }
.recent .gauge-list a { justify-content: flex-start; }

/* Numbered steps on /widget. Default list styling, just breathing room. */
.steps { max-width: 62ch; padding-left: 22px; }
.steps li { margin-bottom: 9px; }

/* ------------------------------------------------------------ contact form
   16px on the inputs and never smaller: below that iOS Safari zooms the whole
   page on focus and the visitor has to pinch back out — same rule as the
   search box. Every colour is a token so the form follows the dark theme;
   verify.js fails the build on a literal here. */
.contact-form { max-width: 34rem; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--field-bg); color: var(--ink);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: none; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--blue);
}
.field-hint { font-size: 12.5px; color: var(--mut); margin: 6px 0 0; }
.contact-form .btn { margin-top: 4px; }

/* --------------------------------------------------------------- sponsor */
.sponsor { border: 1px dashed var(--sponsor-line) !important; background: var(--sponsor-bg) !important; text-align: center; }
.sponsor.sold { border-style: solid !important; }
.sponsor-eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--mut); font-weight: 700; margin-bottom: 4px; }
.sponsor p { max-width: 56ch; margin-left: auto; margin-right: auto; color: var(--ink-2); font-size: 15px; }
.sponsor-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0 8px; }
/* A fixed box, not just a max. The logo is baked into the HTML now, but a
   sponsor who supplies no width/height would still be a zero-height element
   until it decodes, shifting everything below it. Fixing the height means
   the space is reserved from first paint whatever the image turns out to
   be. */
.sponsor-logo {
  height: 64px; width: auto; max-width: 260px;
  margin: 4px auto 10px; display: block; object-fit: contain;
}
.sponsor-fine { font-size: 12.5px; color: var(--mut); margin: 0; }
.btn, .btn-sponsor { font: inherit; font-weight: 700; font-size: 15px; padding: 10px 20px; border-radius: 9px; border: 0; cursor: pointer; text-decoration: none; display: inline-block; background: var(--blue); color: var(--on-accent); }
.btn-sponsor.alt { background: var(--chip-bg); color: var(--blue-dk); border: 1px solid var(--blue); }
.btn-sponsor span { font-weight: 500; opacity: .85; }

/* ------------------------------------------------------------ home/index */
.hero { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); }
.hero h1 { margin-top: 0; }
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.state-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow); }
.state-block h3 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.state-block h3 a { text-decoration: none; }
.state-block h3 small { color: var(--mut); font-weight: 500; font-size: 13px; }
.state-block .gauge-list { grid-template-columns: 1fr; }
.alerts { border-left: 5px solid var(--sev-moderate); }

/* -------------------------------------------- furthest from normal (home)
   Two columns on anything wider than a phone, stacked below it. minmax with
   a 260px floor rather than a media query, so the break happens when the
   content needs it rather than at a width someone guessed. */
.extremes h3 { font-size: 15px; margin: 0 0 8px; color: var(--ink-2); }
.extreme-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.extreme-cols .gauge-list { grid-template-columns: 1fr; }
.extremes .pct { white-space: nowrap; }

/* The browse-by-state chip block sits above the full alphabetical grid: 40
   links a reader can scan in one go, ahead of ~11,000px of gauge list. */
.browse-states { margin-bottom: 22px; }
.browse-states .mut { margin: 0 0 12px; }
.pitch { background: var(--tint) !important; border-color: var(--tint-line) !important; }

/* ------------------------------------------------------------ embed tool */
.embed-tool textarea { width: 100%; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; resize: vertical; background: var(--field-bg); }
pre { background: var(--code-bg); color: var(--code-ink); padding: 15px 17px; border-radius: 10px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 620px) {
  /* Two rows, not three. The search box added a row to the mobile header,
     and every pixel of chrome above the fold is a pixel the reading doesn't
     get — so the brand and the search share the top row and the section
     links wrap underneath. */
  /* Secondary numbers go two-up and lose the tile padding. They matter, but
     not enough to spend 190 px of the first screen on — the reading, the
     percent-of-normal, the status line and the trend come first. */
  .stat-row { grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 14px; padding-top: 13px; }
  .stat span { font-size: 10.5px; margin-bottom: 1px; }
  .stat b { font-size: 16px; }
  .reading { padding: 16px; }
  .spark30 { height: 78px; }
  .spark-fig { padding: 12px 14px 8px; }
  .verdict-head { font-size: 18px; }

  .site-head .nav { height: auto; padding: 9px 0; flex-wrap: wrap; align-items: center; gap: 7px 10px; }
  .brand { flex: 0 0 auto; font-size: 18px; }
  .site-head .nav .rl-search { flex: 1 1 180px; order: 1; }
  .site-head .nav > nav { order: 2; flex: 1 0 100%; gap: 14px; font-size: 14px; }
  .rl-search-input { padding: 8px 12px; min-height: 40px; }
  main > section { padding: 15px 16px; }
  .gauge-list { grid-template-columns: 1fr; }
  th, td { padding: 9px 10px; font-size: 14px; }
}

@media print {
  .site-head, .chart-tabs, .sponsor, .embed-tool, .title-sponsor { display: none; }
  body { background: #fff; }
}

/* The measuring point is often a mile or two from the town in the URL —
   say so plainly rather than letting the H1 imply otherwise. */
.station { font-size: 13.5px; color: var(--mut); margin: -6px 0 16px; }
.station a { color: var(--mut); text-decoration: underline; text-underline-offset: 2px; }
.station a:hover { color: var(--blue-dk); }

/* ---------------------------------------------------------------- dark mode
   A value swap on the tokens above, with two things designed rather than
   inverted.

   The severity ramp is rebuilt, not flipped. In light mode it runs light to
   dark as it escalates, because darker reads as heavier on white. Inverting
   those same values on a dark page would make MAJOR FLOOD the dimmest thing
   on screen. Here it runs dim to bright, so the scale still escalates
   visually and each step is still distinguishable from its neighbours.

   The seven percent-of-normal badges are hand-picked for the same reason.
   They are a diverging hue scale, not a lightness ramp - dry oranges through
   green at normal to blues and then flood red - so the hues are preserved
   and only the lightness is traded: a dark tint of the hue behind a light
   tint of it. Inverting the pastels would have turned them into seven
   near-identical muddy rectangles. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c161e;
    --card: #14222d;
    --ink: #e8f0f6;
    --ink-2: #b9cbd8;
    --mut: #8ba0b0;
    --line: #263a4c;
    --line-2: #1a2a37;
    --blue: #6aa9ee;
    --blue-dk: #9ac9f5;
    --green: #4cbf70;
    --head-bg: #0d3357;
    --head-ink: #eef6fd;
    --head-nav: #bcd8ef;
    --accent: #8dc4f0;
    --foot-bg: #0a2438;
    --foot-ink: #a9c1d3;
    --foot-link: #9ecdf2;
    --foot-fine: #7f97a9;
    --on-accent: #0c161e;
    --input-bg: #1b2c3a;
    --placeholder: #7d93a4;
    --focus: #8dc4f0;
    --pop-bg: #182734;
    --pop-shadow: 0 8px 26px rgba(0, 0, 0, .55);
    --tint: #152a3d;
    --tint-line: #28455f;
    --hover: #1a2d3d;
    --th-bg: #182734;
    --row-hover: #182a38;
    --code-bg: #081a29;
    --code-ink: #cfe2f2;
    --field-bg: #111e28;
    --chip-bg: #182734;
    --muted-load: #4a6070;
    --warn-ink: #e0a86a;
    --cat-bg: #16252f;
    --cat-reached-bg: #2a1a1a;
    --alert-line: #7a3b33;
    --alert-bg: #25171a;
    --sponsor-line: #33536e;
    --sponsor-bg: #152430;
    --verdict-low: #d99a4a;
    --verdict-below: #d7bb52;
    --sev-tint-action: #221619;
    --sev-tint-minor: #26171a;
    --sev-tint-moderate: #2b171a;
    --sev-tint-major: #301719;
    --sev-action: #c9695f;
    --sev-minor: #dd7a6c;
    --sev-moderate: #ee8b78;
    --sev-major: #ff9d89;
    --use-float-bg: #16324a;
    --use-float-ink: #9ccdf5;
    --use-paddle-bg: #232748;
    --use-paddle-ink: #b6bbf2;
    --use-fish-bg: #153524;
    --use-fish-ink: #83d99b;
    --use-flood-bg: #3a1f1b;
    --use-flood-ink: #f2a89c;
    --use-bg: #1d2f3d;
    --pct-bg: #1d2b37;
    --pct-very-low-bg: #3a2415;
    --pct-very-low-ink: #f0b183;
    --pct-low-bg: #3a2a17;
    --pct-low-ink: #f2c08c;
    --pct-below-normal-bg: #36301a;
    --pct-below-normal-ink: #e8d091;
    --pct-normal-bg: #16331f;
    --pct-normal-ink: #8ada9c;
    --pct-above-normal-bg: #17304c;
    --pct-above-normal-ink: #9cc4f2;
    --pct-high-bg: #152a4d;
    --pct-high-ink: #a8c2f5;
    --pct-very-high-bg: #3d1c1c;
    --pct-very-high-ink: #f7a79c;
    --chart-veil: rgba(12,22,30,.72);
    --spark-fill: rgba(106,169,238,.16);
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
  }
  /* The chart canvas is drawn by Chart.js with its own colours; this keeps
     the plot area from being a white slab in the middle of a dark page. */
  .chart-wrap { background: var(--card); border-radius: 8px; }
  /* Browser UI for form controls and scrollbars follows this. */
  :root { color-scheme: dark; }
}