:root {
  --paper: #f0e8d0;
  --paper-warm: #e8dcbf;
  --paper-edge: #e3d8b8;
  --surface: #fbf6e3;
  --ink: #2a221b;
  --ink-muted: #665a4a;
  --ink-faint: #8d8470;
  --rule: #cdbf9f;
  --forest: #2d4a2b;
  --forest-deep: #1f361d;
  --rust: #a8442a;
  --rust-deep: #82321f;
  --mustard: #c08a2a;
  --mustard-deep: #7a5618;
  --river-blue: #365672;
  --cream: #f4ecd8;

  --font-display: 'Anton', 'Impact', 'Helvetica Neue', sans-serif;
  --font-numerals: 'Roboto Slab', 'Rockwell', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  --fs-banner: 3rem;
  --fs-hero: 5.5rem;
  --fs-h1: 2.5rem;
  --fs-h2: 1.625rem;
  --fs-h3: 1rem;
  --fs-stamp: 1rem;
  --fs-lede: 1.25rem;
  --fs-body: 1rem;
  --fs-meta: 0.875rem;
  --fs-caption: 0.75rem;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --r-sm: 2px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-stamp: 12px;

  --shadow-card: 0 2px 0 rgba(42,34,27,0.06), 0 6px 16px rgba(42,34,27,0.05);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Scoped override: about-page prose uses a slightly looser line-height than
   the dashboard. The body.page-about class is set on about.html only. */
body.page-about { line-height: 1.65; }

/* A11y utility — visible only to screen readers and on keyboard focus */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--cream);
  color: var(--forest-deep);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  z-index: 1000;
  transform: translateY(-150%);
  transition: transform 0.15s ease-out;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--mustard-deep);
  outline-offset: 2px;
}

/* ── Identity Bar — full-width forest ─────────────── */
.site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-6);
  background: var(--forest);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.site-bar .wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: 0.04em;
  color: var(--cream);
  text-decoration: none;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.site-bar .wordmark .mtn {
  width: 1.2em;
  height: 0.85em;
  display: inline-block;
  flex-shrink: 0;
}
.site-bar .wordmark .mtn path { fill: var(--cream); }
.site-bar nav {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}
.site-bar nav a {
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--s-4) 0;
  display: inline-block;
  line-height: 1;
}
.site-bar nav a:hover { color: var(--mustard); }
.site-bar nav .sep { color: rgba(244, 236, 216, 0.4); }

/* ── Page Hero ─────────────────────────────────────── */
.page-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-6);
}
.page-hero .lede {
  font-size: var(--fs-lede);
  color: var(--ink);
  line-height: 1.55;
  max-width: 38ch;
  margin-bottom: var(--s-3);
}
.page-hero .dateline {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.page-hero .dateline::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--mustard);
}

/* ── Data Warning Banner — rust strip ─────────────── */
.data-warning-banner {
  background: var(--rust);
  color: var(--cream);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-align: center;
  display: none;
}
.data-warning-banner .warn-icon { margin-right: var(--s-2); }

/* ── Rivers Container ─────────────────────────────── */
#rivers-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* ── River Card — stacked panel ───────────────────── */
.river-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-7);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Banner */
.card-banner {
  background: var(--forest);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
  padding: var(--s-5) var(--s-6);
  position: relative;
  overflow: hidden;
}
.card-banner .mountain-glyph {
  position: absolute;
  top: 50%;
  right: var(--s-5);
  transform: translateY(-50%);
  width: 90px;
  height: auto;
  pointer-events: none;
}
.card-banner .mountain-glyph path {
  fill: rgba(244, 236, 216, 0.18);
}
.card-banner .banner-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-banner);
  line-height: 1.0;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
  position: relative;
}
.card-banner .banner-meta {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  color: rgba(244, 236, 216, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
}
.card-banner .banner-meta .mid-dot {
  color: var(--mustard);
  margin: 0 0.5em;
}

/* Wave 3 Phase 1 — observed_only badge in card banner.
   Sits absolute-positioned over the mountain glyph slot for cards whose
   river has no forecast layer. Rendered conditionally by buildRiverCard()
   in site/index.html when entry.forecast_type === "observed_only".
   On the smallest breakpoint (where the glyph is hidden), the badge
   repositions to bottom-right via the .smallest-breakpoint rule below. */
.card-banner .observed-only-badge {
  position: absolute;
  top: 50%;
  right: var(--s-5);
  transform: translateY(-50%);
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--ink-muted);
  background: var(--cream);
  border: 1.5px solid var(--ink-muted);
  border-radius: 2px;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  white-space: nowrap;
}

.card-banner .observed-only-badge .mid-dot {
  color: var(--ink-muted);
  margin: 0 0.4em;
}

/* Section tabs (between banner and hero) */
.section-tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--s-6);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: thin;
}
.section-tabs::-webkit-scrollbar { height: 4px; }
.section-tabs::-webkit-scrollbar-thumb { background: var(--rule); }
.section-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}
.section-tab:hover { color: var(--ink); }
.section-tab.active {
  color: var(--forest-deep);
  border-bottom-color: var(--forest);
}
.section-tabs.hidden { display: none; }

/* PR 2 — content tabs (below chart). Differentiated from .section-tabs
   by font-family (sans, not display-caps) and active state (filled
   rectangle, not underline). Equal-width buttons span the full row;
   no trailing 1fr column. The mobile accordion (≤640px) overrides
   this layout via `display: contents ↔ block` on .tab-pair — see the
   mobile @media block below. */
.content-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
  column-gap: 6px;
  margin-top: var(--s-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}
.content-tabs .tab-pair { display: contents; }
.content-tabs .content-tab {
  grid-row: 1;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-right: 0;
  text-align: center;
  width: 100%;
}
.content-tabs .content-tab:hover {
  background: var(--paper-edge);
  border-color: var(--ink-muted);
}
.content-tabs .content-tab:focus-visible {
  outline: 2px solid var(--mustard-deep);
  outline-offset: 2px;
}
/* Active state: filled pill — keyed via attribute selector since cardId
   is per-card and CSS can't interpolate. "stress-stress" pattern in the
   outfitter-strip section uses the same approach. */
.content-tabs[data-active-tab="weather"]    .content-tab[data-tab-id="weather"],
.content-tabs[data-active-tab="hatching"]   .content-tab[data-tab-id="hatching"],
.content-tabs[data-active-tab="conditions"] .content-tab[data-tab-id="conditions"],
.content-tabs[data-active-tab="hazards"]    .content-tab[data-tab-id="hazards"],
.content-tabs[data-active-tab="beta"]       .content-tab[data-tab-id="beta"] {
  background: var(--forest-deep);
  color: var(--paper);
  border-color: var(--forest-deep);
}
/* Panels: hidden by default, revealed when their tab is active.
   :has() targets the .tab-pair sibling whose tab matches data-active-tab. */
.content-panel {
  display: none;
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--paper-warm);
  border-radius: 6px;
}
.content-tabs[data-active-tab="weather"]    .tab-pair:has(.content-tab[data-tab-id="weather"]) .content-panel,
.content-tabs[data-active-tab="hatching"]   .tab-pair:has(.content-tab[data-tab-id="hatching"]) .content-panel,
.content-tabs[data-active-tab="conditions"] .tab-pair:has(.content-tab[data-tab-id="conditions"]) .content-panel,
.content-tabs[data-active-tab="hazards"]    .tab-pair:has(.content-tab[data-tab-id="hazards"]) .content-panel,
.content-tabs[data-active-tab="beta"]       .tab-pair:has(.content-tab[data-tab-id="beta"]) .content-panel {
  display: block;
}
/* Empty body styling */
.panel-empty { color: var(--ink-muted); font-style: italic; margin: 0; }
.panel-placeholder { color: var(--ink-muted); margin: 0; }
/* Conditions grid */
.cond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.cond-cell .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.cond-cell .val { font-size: 15px; font-weight: 600; color: var(--ink); }
.cond-cell.empty .val { font-weight: 400; color: var(--ink-muted); font-style: italic; }

/* Weather panel — 7-day grid, auto-fits 1-2 columns at narrow widths. */
.weather-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--s-2);
}
.weather-day {
  text-align: center;
  padding: 6px 4px;
  background: var(--paper);
  border-radius: 4px;
}
.weather-day .day-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.weather-day .day-temps {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.weather-day .day-precip {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.weather-day .day-summary {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.3;
  margin-top: 4px;
}

/* PR 2 — mobile accordion (≤640px). Same DOM, different layout.
   .tab-pair becomes a stacked block; the button is full-width with
   a chevron; the panel renders inline beneath when active. */
@media (max-width: 640px) {
  .content-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .content-tabs .tab-pair {
    display: block;
    border-bottom: 1px solid var(--rule);
  }
  .content-tabs .tab-pair:last-child { border-bottom: 0; }
  .content-tabs .content-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 8px;
    margin-right: 0;
    border-radius: 0;
    font-size: 14px;
    text-align: left;
    background: transparent;   /* override desktop paper-warm */
    border: 0;                 /* override desktop 1px rule */
  }
  .content-tabs .content-tab::after {
    content: "▾";  /* down-chevron */
    font-size: 12px;
    color: var(--ink-muted);
    transition: transform 0.15s;
  }
  /* Active tab keeps the desktop fill but rotates the chevron */
  .content-tabs[data-active-tab="weather"]    .content-tab[data-tab-id="weather"]::after,
  .content-tabs[data-active-tab="hatching"]   .content-tab[data-tab-id="hatching"]::after,
  .content-tabs[data-active-tab="conditions"] .content-tab[data-tab-id="conditions"]::after,
  .content-tabs[data-active-tab="hazards"]    .content-tab[data-tab-id="hazards"]::after,
  .content-tabs[data-active-tab="beta"]       .content-tab[data-tab-id="beta"]::after {
    transform: rotate(180deg);
    color: var(--paper);
  }
  .content-panel {
    margin-top: 0;
    border-radius: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
  }
}

/* Section actions row (put-in name + directions link) */
.section-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.92rem;
  flex-wrap: wrap;
}
.section-actions.empty { display: none; }
.section-actions .put-in-label {
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
  margin-right: 0.5em;
}
.section-actions .put-in-name {
  color: var(--ink);
  font-weight: 500;
}
.section-actions .directions-link {
  color: var(--forest-deep);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  white-space: nowrap;
  padding: var(--s-4) 0;
  display: inline-block;
  line-height: 1;
}
.section-actions .directions-link:hover { text-decoration: underline; }

/* Hazard callout (above chart) */
.hazard-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  background: rgba(168, 68, 42, 0.07);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--rust-deep);
  font-size: 0.86rem;
  line-height: 1.4;
}
.hazard-callout.empty { display: none; }
.hazard-callout .hazard-icon {
  font-size: 1.05em;
  flex-shrink: 0;
  line-height: 1.4;
}
.hazard-callout .hazard-body {
  flex: 1;
}
.hazard-callout .hazard-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--rust-deep);
  display: block;
  margin-bottom: 2px;
}
.hazard-callout ul {
  margin: 0;
  padding-left: var(--s-4);
  list-style: disc;
}
.hazard-callout ul li {
  margin: 2px 0;
}
.hazard-callout ul li::marker {
  color: var(--rust);
}

/* Weather strip (below chart) */
.weather-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6) var(--s-5);
  background: var(--surface);
  border-top: 1px solid var(--rule);
}
.weather-strip.empty { display: none; }
.weather-strip-title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-bottom: var(--s-1);
}
.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-2) 4px;
  border-radius: 4px;
  background: rgba(141, 132, 112, 0.06);
  color: var(--ink-muted);
}
.weather-day .day-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.weather-day .temps {
  font-family: var(--font-numerals);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  margin-top: 4px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.weather-day .temps .lo { color: var(--ink-faint); font-weight: 500; }
.weather-day .precip {
  color: var(--forest);
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 2px;
}
.weather-day .precip.dry { color: transparent; }
.weather-day .summary {
  font-size: 0.68rem;
  line-height: 1.2;
  margin-top: 4px;
  color: var(--ink-muted);
}
@media (max-width: 640px) {
  .weather-strip {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-4) var(--s-5);
  }
  .weather-strip .weather-day { min-width: 76px; flex-shrink: 0; }
  .weather-strip-title { display: none; }
}

/* Hero band */
.card-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-7);
  padding: var(--s-6);
  align-items: start;
  position: relative;
}
.card-hero .hero-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  /* Reserve space for the absolutely-positioned .hero-stamp-wrap badge
     in the top-right of .card-hero (~140px wide). The decision sentence
     starts at the same vertical baseline as the big number on the left;
     padding-right keeps it from running under the badge. */
  padding-right: 140px;
}

.hero-left .hero-number {
  font-family: var(--font-numerals);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hero-left .hero-unit {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-top: var(--s-2);
}
.hero-unit-band {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.hero-unit-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.unit-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--r-stamp);
  overflow: hidden;
}
.unit-toggle button {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  min-width: 44px;
  min-height: 28px;
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  line-height: 1;
}
.unit-toggle button + button {
  border-left: 1px solid var(--rule);
}
.unit-toggle button.active {
  background: var(--ink);
  color: var(--paper);
}
.unit-toggle button:disabled {
  cursor: not-allowed;
  color: var(--ink-faint);
  background: rgba(205, 191, 159, 0.18);
}
.hero-left .freshness-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-top: var(--s-2);
}
.hero-left .freshness-label.live { color: var(--forest); }

.range-hint {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: var(--s-4);
  line-height: 1.5;
}

/* Status stamp — anchored to the top-right corner of .card-hero
   (which is position: relative). Sits as a sibling of .hero-left and
   .hero-right rather than nested inside .hero-right, so the decision
   sentence in the right column can top-align with the big number on
   the left without the badge pushing it down. The right column has
   padding-right (see .card-hero .hero-right below) so its content
   doesn't run under the badge. */
.hero-stamp-wrap {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: flex-end;
  z-index: 2;
}
.outfitter-strip {
  margin-top: var(--s-2);
  font-size: 14px;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.outfitter-strip.empty { display: none; }
.outfitter-strip .outfitter-cell { white-space: nowrap; }
.outfitter-strip .outfitter-cell.stress-stress { color: var(--mustard-deep); font-weight: 600; }
.outfitter-strip .outfitter-cell.stress-danger { color: var(--rust-deep); font-weight: 700; }
.outfitter-strip .mid-dot { color: var(--rule); }
.hero-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: var(--r-stamp);
  font-family: var(--font-display);
  font-size: var(--fs-stamp);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.hero-stamp .stamp-icon {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9em;
}
.hero-stamp.status-ideal { border-color: var(--forest); color: var(--forest); }
.hero-stamp.status-low-runnable, .hero-stamp.status-high-runnable {
  border-color: var(--mustard);
  color: var(--mustard-deep);
}
.hero-stamp.status-too-low, .hero-stamp.status-too-high {
  border-color: var(--rust);
  color: var(--rust-deep);
}
.hero-stamp.status-unknown { border-color: var(--rule); color: var(--ink-muted); }

/* AQI pill (smaller secondary pill alongside status) */
.aqi-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--s-3);
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-stamp);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.aqi-pill.empty { display: none; }
.aqi-pill.aqi-good { border-color: var(--forest); color: var(--forest); }
.aqi-pill.aqi-moderate { border-color: var(--mustard); color: var(--mustard-deep); }
.aqi-pill.aqi-sensitive { border-color: var(--rust); color: var(--rust-deep); }
.aqi-pill.aqi-unhealthy,
.aqi-pill.aqi-very-unhealthy,
.aqi-pill.aqi-hazardous {
  border-color: var(--rust-deep);
  color: var(--rust-deep);
  background: rgba(168, 68, 42, 0.06);
}

.hero-right .lede-decision {
  font-family: var(--font-body);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: var(--s-5);
  max-width: 52ch;
}

.stats-strip {
  display: flex;
  gap: var(--s-6);
  align-items: flex-start;
  flex-wrap: wrap;
}
.stats-strip .stat {
  flex: 1 1 0;
  min-width: 0;
}
.stats-strip .stat .label {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--s-1);
}
.stats-strip .stat .val {
  font-family: var(--font-numerals);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stats-strip .stat .unit {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: var(--s-1);
}

/* Chart band */
.chart-band {
  background: var(--surface);
  padding: var(--s-5) var(--s-6) var(--s-6);
  border-top: 1px solid var(--rule);
}

.chart-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.legend-row {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.legend-swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
}
.legend-swatch-dashed {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px dashed;
}
.legend-swatch-band {
  display: inline-block;
  width: 14px;
  height: 10px;
}
.legend-text {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
/* Analog-year multi-select dropdown — replaces the older single
   "Analog years" checkbox. Each checkbox toggles one dataset on the
   chart. Per-card isolation via #analog-picker-${id}. */
.analog-picker {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  user-select: none;
}
.analog-picker-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.35em 0.75em;
  background: var(--cream);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.analog-picker-summary::-webkit-details-marker { display: none; }
.analog-picker-summary::after {
  content: "▾";
  font-size: 0.85em;
  margin-left: 0.15em;
}
.analog-picker[open] .analog-picker-summary {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}
.analog-picker-list {
  position: absolute;
  top: calc(100% + 0.25em);
  right: 0;
  z-index: 5;
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 9em;
  box-shadow: 0 4px 12px rgba(42, 34, 27, 0.12);
}
.analog-year-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25em 0.4em;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: var(--fs-meta);
  color: var(--ink);
}
.analog-year-row:hover { background: rgba(42, 34, 27, 0.06); }
.analog-year-row input { accent-color: var(--forest); cursor: pointer; }
.analog-year-swatch {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px dashed;
}
.analog-year-label {
  font-variant-numeric: tabular-nums;
}

/* Reset-zoom button — hidden by default, surfaced by zoom/pan plugin
   callbacks after the first zoom event. Per-card via #reset-zoom-${id}. */
.reset-zoom-btn {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 0.35em 0.75em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.reset-zoom-btn:hover, .reset-zoom-btn:focus-visible {
  background: var(--forest);
  color: var(--cream);
  outline: none;
}

/* Chart container */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 380px;
}
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* Loading / Error */
.loading-msg {
  text-align: center;
  padding: 3rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.loading-msg .spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--rule);
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--s-2);
}
@keyframes spin { to { transform: rotate(360deg); } }
.error-msg {
  color: var(--rust);
  font-size: var(--fs-meta);
  text-align: center;
  margin-top: var(--s-2);
}

/* Footer — full-width forest band */
.page-footer {
  background: var(--forest-deep);
  color: var(--cream);
  padding: var(--s-6) var(--s-5);
  margin-top: var(--s-7);
  text-align: center;
  font-size: var(--fs-meta);
  line-height: 1.7;
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.18);
}
/* About page sits the footer flush against the methodology container's
   bottom padding (the container already provides the gap). */
body.page-about .page-footer { margin-top: 0; }
.page-footer strong { color: var(--cream); font-weight: 600; }
.page-footer a {
  color: var(--mustard);
  text-decoration: none;
  font-weight: 600;
}
.page-footer a:hover { text-decoration: underline; }
.page-footer .est {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(244,236,216,0.55);
}

/* Hatch windows panel */
.hatch-panel {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.hatch-panel.empty { display: none; }
.hatch-panel-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 var(--s-3) 0;
}
.hatch-list {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.hatch-item {
  border-left: 3px solid var(--ink-muted);
  padding-left: var(--s-3);
}
.hatch-item.status-active { border-left-color: var(--forest); }
.hatch-item.status-approaching { border-left-color: var(--mustard); }
.hatch-item.status-fading { border-left-color: var(--rule); opacity: 0.85; }
.hatch-item .hatch-insect {
  font-weight: 600;
  color: var(--ink);
}
.hatch-item .hatch-status {
  display: inline-block;
  margin-left: var(--s-2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.hatch-item.status-active .hatch-status {
  color: var(--forest-deep);
  font-weight: 600;
}
.hatch-item.status-approaching .hatch-status {
  color: var(--mustard-deep);
  font-weight: 600;
}
.hatch-item.status-fading .hatch-status {
  color: var(--ink-faint);
}
.hatch-item .hatch-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.hatch-item .hatch-patterns {
  font-size: 0.85rem;
  color: var(--ink);
  margin-top: 4px;
}

/* Clarity badge – sits alongside the AQI pill */
.clarity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 0.78rem;
  font-weight: 600;
}
.clarity-pill.empty { display: none; }
.clarity-pill.clarity-clear { color: var(--forest-deep); border-color: var(--forest); }
.clarity-pill.clarity-clearing { color: var(--mustard-deep); border-color: var(--mustard); }
.clarity-pill.clarity-turbid { color: var(--rust-deep); border-color: var(--rust); }

/* Fish stress banner */
.stress-banner {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(168, 68, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stress-banner.empty { display: none; }
.stress-banner.level-danger { background: rgba(168, 68, 42, 0.18); }
.stress-banner .stress-label {
  font-weight: 700;
  color: var(--rust-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}
.stress-banner .stress-detail {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

/* Booking window callout */
.booking-callout {
  padding: var(--s-3) var(--s-5);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.booking-callout.empty { display: none; }
.booking-callout .booking-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-size: 0.75rem;
}
.booking-callout .booking-window {
  font-weight: 600;
}
.booking-callout .booking-window.ideal {
  color: var(--forest-deep);
}

/* ─────────────────────────────────────────────────────────────────────
   About page — methodology / prose layout
   Class-named selectors (.page-banner, .container, .callout, .river-table)
   are unique to about.html so they stay global. Bare-element selectors
   (h2, p, strong, a, code, …) and the shared .lede class are scoped via
   :where(body.page-about) so they cannot bleed into the dashboard page,
   while contributing zero specificity from the wrapper. That preserves
   the original cascade where chrome rules like `.site-bar nav a`
   (specificity 0,1,2) outrank bare-element rules (0,0,1).
   ───────────────────────────────────────────────────────────────────── */

/* Page banner — second forest strip */
.page-banner {
  background: var(--forest);
  color: var(--cream);
  padding: var(--s-7) var(--s-5) var(--s-6);
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.18);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.page-banner h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.0;
  margin-bottom: var(--s-3);
}
.page-banner .river-stroke {
  width: 80px;
  height: 12px;
  margin: 0 auto;
  display: block;
  opacity: 0.7;
}
.page-banner .river-stroke path {
  fill: none;
  stroke: var(--mustard);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Container */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-7);
}

/* Lede (shared class — scoped via :where() so the dashboard's
   `.page-hero .lede` stays in control of margin/text-align/font-weight
   on index.html). */
:where(body.page-about) .lede {
  font-size: var(--fs-lede);
  color: var(--ink);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto var(--s-7);
  text-align: center;
  font-weight: 500;
}

:where(body.page-about) h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--forest);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: var(--s-7) 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
:where(body.page-about) h2::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background: var(--rust);
  flex-shrink: 0;
}

:where(body.page-about) h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--s-5) 0 var(--s-2);
}

:where(body.page-about) p,
:where(body.page-about) li {
  font-size: var(--fs-body);
  color: var(--ink);
  margin-bottom: var(--s-3);
  max-width: 65ch;
}
:where(body.page-about) ul,
:where(body.page-about) ol {
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
}
:where(body.page-about) li { margin-bottom: var(--s-2); }

:where(body.page-about) strong { color: var(--ink); font-weight: 700; }
:where(body.page-about) em { font-style: italic; }

:where(body.page-about) code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper-edge);
  color: var(--ink);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
}

:where(body.page-about) a {
  color: var(--forest);
  text-decoration: underline;
  text-decoration-color: var(--mustard);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 500;
}
:where(body.page-about) a:hover {
  color: var(--rust);
  text-decoration-color: var(--rust);
}

/* Callout — poster sidebar */
.callout {
  background: var(--surface);
  border-top: 6px solid var(--rust);
  border-radius: 0;
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
  color: var(--ink);
}
.callout .eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rust);
  margin-bottom: var(--s-2);
}
.callout p { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* River table — poster style */
.river-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-3) 0 var(--s-5);
  font-size: var(--fs-body);
}
.river-table th {
  text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--ink);
}
.river-table td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.river-table tbody tr:nth-child(even) td {
  background: var(--paper-edge);
}
.river-table .section-cell {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding-left: var(--s-3);
}
.river-table .class-cell,
.river-table .gauge-cell {
  font-family: var(--font-numerals);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* Responsive */
@media (max-width: 900px) {
  .card-hero { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5); }
  /* When the hero collapses to a single column, the right column is no
     longer beside the badge — it's stacked below the left column. Drop
     the desktop padding-right reservation, and instead reserve room on
     .hero-left so the big number doesn't run under the absolute badge
     in the top-right of the card. */
  .card-hero .hero-right { padding-right: 0; }
  .hero-left { padding-right: 140px; }
  .hero-stamp-wrap { top: var(--s-5); right: var(--s-5); }
  .hero-right .lede-decision { margin-top: 0; }
  .hero-left .hero-number { font-size: 4rem; }
  .card-banner { padding: var(--s-4) var(--s-5); }
  .card-banner .banner-title { font-size: 2.25rem; }
  .card-banner .mountain-glyph { width: 64px; }
  .chart-band { padding: var(--s-4) var(--s-5) var(--s-5); }
}

@media (max-width: 640px) {
  .site-bar { padding: var(--s-3) var(--s-4); }
  .site-bar nav { gap: var(--s-3); font-size: var(--fs-caption); }
  .site-bar .wordmark { font-size: 1.25rem; }
  .page-hero { padding: var(--s-5) var(--s-4) var(--s-5); }
  .page-hero .lede { font-size: 1.05rem; }
  #rivers-container { padding: 0 var(--s-4); }
  .card-banner { padding: var(--s-4); }
  .card-banner .banner-title { font-size: 1.625rem; }
  .card-banner .mountain-glyph { display: none; }
  .card-banner .observed-only-badge {
    position: static;
    transform: none;
    display: inline-block;
    margin-top: var(--s-2);
  }
  .card-hero { padding: var(--s-4); }
  .hero-stamp-wrap { top: var(--s-4); right: var(--s-4); }
  /* Tighter badge clearance at the smallest breakpoint — the badge is
     ~117px wide; reserve a bit less than at 900px so the IDEAL/RUNNABLE
     range hint still wraps cleanly under the big number. */
  .hero-left { padding-right: 120px; }
  .chart-band { padding: var(--s-3) var(--s-4) var(--s-4); }
  .hero-left .hero-number { font-size: 3.5rem; }
  .stats-strip { gap: var(--s-4); }
  .chart-wrap { height: 280px; }

  /* About-page mobile adjustments */
  .page-banner { padding: var(--s-5) var(--s-4); }
  .page-banner h1 { font-size: 1.75rem; }
  .container { padding: var(--s-5) var(--s-4); }
  :where(body.page-about) h2 { font-size: 1.25rem; margin-top: var(--s-5); }
  :where(body.page-about) .lede { font-size: 1.05rem; text-align: left; }
}

@media (max-width: 480px) {
  .site-bar {
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
  }
  .site-bar nav {
    justify-content: center;
  }
}