:root {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface2: #334155;
    --border: #475569;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #38bdf8;
    --green: #4ade80;
    --red: #f87171;
    --yellow: #fbbf24;
    --orange: #fb923c;
    --purple: #a78bfa;
    --teal: #2dd4bf;
    /* Chart-specific colors so Chart.js axes and gridlines stay
       legible in either theme. The chart builders read these via
       getComputedStyle() at render time. */
    --chart-grid: rgba(71,85,105,0.3);
    --chart-tooltip-bg: #1e293b;
    --chart-tooltip-border: #475569;
}
/* Light theme — opt-in via the header pill. Darker accent / status
   colors than dark mode because vivid mid-tones lose contrast on a
   white background. The user explicitly asked for this for bright
   sun on a boat, so contrast and legibility are the priority. */
body[data-theme="light"] {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface2: #f1f5f9;
    --border: #cbd5e1;
    --text: #0f172a;
    --text-muted: #475569;
    --accent: #0369a1;
    --green: #15803d;
    --red: #b91c1c;
    --yellow: #a16207;
    --orange: #c2410c;
    --purple: #6d28d9;
    --teal: #0f766e;
    --chart-grid: rgba(148,163,184,0.45);
    --chart-tooltip-bg: #ffffff;
    --chart-tooltip-border: #cbd5e1;
}
/* Map / Paper theme — opt-in via the header pill. Vintage-lake-chart look:
   parchment surfaces, ink + forest-green, rust/ochre status. Less "SaaS
   dashboard," more "a local made a lake tool." Status colors are darkened
   from the mockup for AA contrast on cream. Phase 1 (palette); cartographic
   motifs/masthead are a planned Phase 2 — see SITE-THEME-PLAN.md. The masthead
   SVG uses currentColor (var-driven) so it themes automatically. */
body[data-theme="map"] {
    --bg: #f4ecd8;
    --surface: #fbf5e6;
    --surface2: #ece0c4;
    --border: #d8c9a3;
    --text: #23303a;
    --text-muted: #6b6147;
    --accent: #2f6b46;
    --green: #2e7d4f;
    --red: #b4452f;
    --yellow: #8a6516;
    --orange: #b4490c;
    --purple: #6d4e9c;
    --teal: #1d6b63;
    --chart-grid: rgba(120,110,80,0.30);
    --chart-tooltip-bg: #fbf5e6;
    --chart-tooltip-border: #d8c9a3;
}
/* Map theme Phase 2 — cartographic identity. Faint depth-contour paper texture
   behind the page: cards' opaque --surface sit on top, so the texture only
   shows through the header, page margins, and gaps between cards — subtle by
   design so it never hurts legibility. Plus map-label letter-spacing on titles
   and a touch more presence on the lake-outline masthead. See SITE-THEME-PLAN. */
body[data-theme="map"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='160'%3E%3Cg%20fill='none'%20stroke='%23c7b58e'%20stroke-width='1'%20opacity='0.5'%3E%3Cpath%20d='M-20%2038%20Q55%2010%20130%2038%20T280%2038'/%3E%3Cpath%20d='M-20%2086%20Q55%2058%20130%2086%20T280%2086'/%3E%3Cpath%20d='M-20%20134%20Q55%20106%20130%20134%20T280%20134'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
body[data-theme="map"] .section-title,
body[data-theme="map"] .signal-card .signal-title { letter-spacing: 0.4px; }
/* Phase 2 polish — in Map theme the lake-outline masthead reads as a chart
   inset (a thin neatline frame + faint graticule behind the outlines) and a
   compass-rose flourish balances the header. Both are map-theme-scoped, so
   Dark/Light are untouched. Direction is honest: the outlines really are in
   their NW→SE geographic arrangement, so "north up" is true, not decorative. */
body[data-theme="map"] .yahara-masthead {
    opacity: 0.92;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background-color: rgba(251,245,230,0.55);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 11px, rgba(120,110,80,0.16) 11px 12px),
        repeating-linear-gradient(90deg, transparent 0 11px, rgba(120,110,80,0.16) 11px 12px);
    box-shadow: 0 1px 2px rgba(60,50,30,0.07);
}
.map-compass { display: none; }
body[data-theme="map"] .map-compass {
    display: flex; align-items: center; flex-shrink: 0;
    color: var(--teal); opacity: 0.82;
}
body[data-theme="map"] .map-compass svg { width: 56px; height: auto; }
@media (max-width: 600px) {
    body[data-theme="map"] .map-compass svg { width: 46px; }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}
.container { max-width: 1400px; margin: 0 auto; padding: 16px; }
header { text-align: center; padding: 24px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
header h1 { font-size: 2.2rem; font-weight: 400; font-family: var(--font-display); letter-spacing: -0.01em; }
.header-top {
    display: flex; align-items: center; justify-content: center;
    gap: 20px; margin-bottom: 6px;
}
.yahara-masthead { color: var(--teal); opacity: 0.75; flex-shrink: 0; display: flex; align-items: center; }
.yahara-masthead svg { width: 72px; height: auto; }
.header-title { text-align: left; }
@media (max-width: 600px) {
    .header-top { flex-direction: column; gap: 6px; }
    .yahara-masthead svg { width: 60px; }
    .header-title { text-align: center; }
}
header .tagline { color: var(--text-muted); margin-top: 4px; font-size: 0.9rem; }
#last-updated { color: var(--accent); font-size: 0.85rem; margin-top: 8px; }
#data-source { color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }

/* Cards & Grids */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card {
    background: var(--surface);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border);
}
.card h2 { font-size: 1.35rem; font-weight: 400; font-family: var(--font-display); letter-spacing: -0.01em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card h3 { font-size: 0.95rem; margin-bottom: 8px; }

/* Lake cards */
.lake-card .level { font-size: 2rem; font-weight: 700; margin-bottom: 2px; }
.lake-card .level-label { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 4px; }
.lake-card .year-extremes {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.5;
    opacity: 0.85;
}
.lake-card .year-extremes .ext-label { text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.75; }
.lake-card .year-extremes .ext-val { color: var(--text); font-weight: 600; }
.lake-card .today-so-far {
    font-size: 0.72rem;
    margin: 2px 0 6px;
    line-height: 1.4;
}
.lake-card .today-so-far .ext-label { text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.75; color: var(--text-muted); margin-right: 4px; }

/* Water-temperature sub-headline. Promoted to its own block between the
   level-label / today-so-far cluster and the range gauge so it gets
   visual weight without being a 5th metric tile (which would break grid
   widths on lakes without a temp source). Bigger temp value, neutral
   warming/cooling color encoding on the trend arrows (deliberately NOT
   the dashboard's good/bad green/red — temp deltas don't carry
   value judgment for fishers/swimmers). Border top+bottom gives the
   block a clear "section" feel.

   Layout: label · value (large) · trends · age (right-aligned).
   On narrow widths the trends wrap below the value rather than
   stacking on the right. */
.lake-card .water-temp-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    margin: 8px 0 10px;
    padding: 7px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.lake-card .water-temp-block .wt-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.lake-card .water-temp-block .wt-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}
.lake-card .water-temp-block .wt-trends {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78rem;
}
.lake-card .water-temp-block .wt-trend.wt-warming { color: var(--yellow); font-weight: 600; }
.lake-card .water-temp-block .wt-trend.wt-cooling { color: var(--accent); font-weight: 600; }
.lake-card .water-temp-block .wt-trend.wt-steady  { color: var(--text-muted); opacity: 0.8; }
.lake-card .water-temp-block .wt-age {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.7;
}
@media (max-width: 600px) {
    .lake-card .water-temp-block .wt-val { font-size: 1.1rem; }
    .lake-card .water-temp-block .wt-trends { font-size: 0.74rem; }
    .lake-card .water-temp-block .wt-age { margin-left: 0; }
}

/* Range gauge: horizontal bar showing where the lake sits across the
   operating range (winter min → summer min → mid → max → SNW → flood).
   The whole gauge is a fixed-height track with absolutely-positioned
   tick marks, zone shading, and a colored dot for the current level. */
.gauge { margin: 12px 0 8px; }
.gauge-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--surface2);
    margin: 8px 8px 36px 8px; /* room for two staggered label rows + dot's outer radius */
}
.gauge-zone {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 0;
}
.gauge-zone.zone-target { background: rgba(74,222,128,0.30); }
.gauge-zone.zone-warn   { background: rgba(251,191,36,0.25); }
.gauge-zone.zone-danger { background: rgba(248,113,113,0.30); }
.gauge-tick {
    position: absolute;
    top: -4px;
    width: 1px;
    height: 16px;
    background: var(--text-muted);
    opacity: 0.5;
}
/* Bottom labels — two rows so we can stagger neighbors that would
   otherwise overlap when the operating range is narrow. */
.gauge-tick-label {
    position: absolute;
    font-size: 0.6rem;
    color: var(--text-muted);
    transform: translateX(-50%);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    pointer-events: none;
}
.gauge-tick-label.row-1 { top: 14px; }
.gauge-tick-label.row-2 { top: 26px; }
.gauge-dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
    z-index: 3;
}
.gauge-dot.dot-zone-target { background: var(--green); box-shadow: 0 0 10px var(--green); }
.gauge-dot.dot-zone-low    { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.gauge-dot.dot-zone-warn   { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.gauge-dot.dot-zone-high   { background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.gauge-dot.dot-zone-snw    { background: var(--red); box-shadow: 0 0 10px var(--red); }
.gauge-summary {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.gauge-summary .key { color: var(--text); font-weight: 600; }
.gauge-summary .pos { color: var(--green); }
.gauge-summary .neg { color: var(--yellow); }
.gauge-summary .crit { color: var(--red); }
.lake-card .status-chip {
    display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.7rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 10px;
}
.chip-ok { background: rgba(74,222,128,0.15); color: var(--green); }
.chip-warn { background: rgba(251,191,36,0.15); color: var(--yellow); }
.chip-danger { background: rgba(248,113,113,0.15); color: var(--red); }
/* Below operating range. Yellow-amber so it reads as "needs attention"
   rather than the previous cyan, which was too close to chip-ok green. */
.chip-low { background: rgba(251,191,36,0.15); color: var(--yellow); }

/* Beach Status signal: per-lake count chips (reuse chip-danger/chip-warn
   colors) + a tap-to-expand for the individual beach names, so the card
   stays compact when many beaches close at once. */
.beach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 2px; }
.beach-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.beach-expand { margin-top: 6px; }
.beach-expand > summary { cursor: pointer; font-size: 0.78rem; color: var(--text-muted); opacity: 0.85; list-style-position: inside; }
.beach-expand[open] > summary { margin-bottom: 3px; }

/* Push-alert preference form (Lab panel). */
.push-prefs { margin: 8px 0 10px; }
.push-prefs-h { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin: 9px 0 3px; }
.push-pref { display: block; font-size: 0.85rem; margin: 3px 0; cursor: pointer; }
.push-pref input { margin-right: 7px; vertical-align: middle; }
.push-prefs-lakes { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.push-prefs-lakes .push-pref { display: inline-block; margin: 2px 0; }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { background: var(--surface2); border-radius: 8px; padding: 8px 12px; }
.metric .label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.metric .value { font-size: 1rem; font-weight: 600; }
.val-up { color: var(--red); }
.val-down { color: var(--green); }
.val-warn { color: var(--yellow); }
.val-danger { color: var(--red); }
.val-ok { color: var(--green); }
.val-neutral { color: var(--text-muted); }

/* Toggle */
.toggle-group { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); font-size: 0.8rem; }
.toggle-group button {
    background: var(--surface2); color: var(--text-muted); border: none; padding: 4px 14px;
    cursor: pointer; transition: all 0.15s;
}
.toggle-group button.active { background: var(--accent); color: var(--bg); }
/* Keyboard a11y — only show a focus ring when navigating by keyboard,
   not on mouse click. Applies to the toggle groups, chart control
   buttons, and header links. */
.toggle-group button:focus-visible,
.chart-controls button:focus-visible,
#patrick-link:focus-visible,
#angler-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Remove the default browser focus outline everywhere a click target
   gets a focus-visible style, so the two don't double up. */
.toggle-group button:focus,
.chart-controls button:focus,
#patrick-link:focus,
#angler-link:focus {
    outline: none;
}

/* View mode toggle — Simple vs Detailed. Default view is Detailed;
   .detailed-only elements are hidden when body[data-view="simple"] and
   .simple-only elements are hidden when body[data-view="detailed"]. */
body[data-view="simple"] .detailed-only { display: none !important; }
body[data-view="detailed"] .simple-only { display: none !important; }

#view-toggle-wrap {
    margin-top: 12px; display: flex; align-items: center; justify-content: center;
    gap: 12px; font-size: 0.8rem; flex-wrap: wrap;
}
#view-toggle-wrap .vt-label { color: var(--text-muted); }
/* Small screens: the pills are self-evident — drop the "View:"/"Theme:"
   labels and keep both toggle groups on one row (was wrapping to two). */
@media (max-width: 540px) {
    #view-toggle-wrap { flex-wrap: nowrap; gap: 8px; }
    #view-toggle-wrap .vt-label { display: none; }
    /* Slimmer than the generic 36px mobile tap floor, still above the
       24px accessibility minimum (R12-3 precedent). */
    #view-toggle-wrap .toggle-group button { padding: 3px 10px; font-size: 0.74rem; min-height: 30px; }
}

/* Compact weather block shown only in Simple mode */
.weather-compact {
    background: var(--surface); border-radius: 12px; padding: 14px 18px;
    border: 1px solid var(--border); margin-bottom: 16px;
    color: var(--text); font-size: 0.9rem;
}
.weather-compact strong { color: var(--accent); }
.weather-compact .wx-line { color: var(--text-muted); font-size: 0.8rem; margin-top: 4px; }

/* SNW banner */
.snw-banner { background: var(--surface); border-radius: 12px; padding: 20px; margin-bottom: 24px; border: 1px solid var(--border); }
.snw-banner.active { border-color: var(--red); background: rgba(248,113,113,0.08); }
.snw-banner.imminent { border-color: var(--orange); background: rgba(251,146,60,0.08); }
.snw-banner.approaching { border-color: var(--yellow); background: rgba(251,191,36,0.08); }
.snw-banner.safe { border-color: var(--green); background: rgba(74,222,128,0.06); }
.snw-status { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 600; flex-wrap: wrap; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-red { background: var(--red); box-shadow: 0 0 8px var(--red); }
.dot-orange { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.dot-yellow { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.dot-green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.snw-details { margin-top: 12px; color: var(--text-muted); font-size: 0.9rem; }
.snw-details strong { color: var(--text); }

/* Signals */
.signals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 24px; }
.signal-card {
    background: var(--surface); border-radius: 10px; padding: 16px; border: 1px solid var(--border);
}
/* Status-important cards keep the colored left accent so they stand
   out. Neutral info cards get no accent — the border color alone
   doesn't need to scream from every block, and muting them reduces
   the uniform "dashboard row of cards" look. */
.signal-card.signal-warn { border-left: 3px solid var(--yellow); }
.signal-card.signal-danger { border-left: 3px solid var(--red); }
.signal-card.signal-good { border-left: 3px solid var(--green); }
.signal-card .signal-title { font-size: 0.85rem; font-family: var(--font-display); font-style: italic; color: var(--text-muted); letter-spacing: 0; margin-bottom: 4px; }
.signal-card .signal-value { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.signal-card .signal-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }

/* Whitecap Watch — at-a-glance 4-lake surface row + sheltered-shore line.
   Chip palette mirrors the Cinco/Ozarks surface chips but dashboard-scoped
   (those are panel-scoped under #cinco-panel / #ozarks-panel). Whitecaps
   uses the dashboard's --yellow (matches the signal-warn accent) rather
   than a panel-specific accent. */
.signal-card .wc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 2px 0 7px; }
.signal-card .wc-arrow { display: inline-block; font-size: 0.95rem; line-height: 1; color: var(--text-muted); }
.signal-card .wc-chip { font-size: 0.72rem; padding: 2px 7px; border-radius: 10px; background: var(--surface2); color: var(--text); white-space: nowrap; }
.signal-card .wc-chip.glassy    { background: rgba(74,222,128,0.16);  color: var(--green); }
.signal-card .wc-chip.choppy    { background: var(--surface2);        color: var(--text); }
.signal-card .wc-chip.whitecaps { background: rgba(245,158,11,0.20);   color: var(--yellow); font-weight: 600; }
.signal-card .wc-chip.heavy     { background: rgba(248,113,113,0.20);  color: var(--red);    font-weight: 600; }
.signal-card .wc-chip.worst     { outline: 1.5px solid currentColor; outline-offset: -1px; }
.signal-card .wc-shelter { margin: 0 0 6px; font-size: 0.82rem; color: var(--text); line-height: 1.4; }
.signal-card .wc-prose { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }

/* Wind-arc strip (#1): next ~18h of hourly wind. SVG scales uniformly to
   the card width (no preserveAspectRatio=none, which would distort the
   arrows/labels). overflow:visible so the edge threshold-label and arrows
   aren't clipped. Bar fills reuse the dashboard tier palette. */
.signal-card .wind-arc { margin: 9px 0 2px; max-width: 440px; }
.signal-card .wa-cap { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 3px; }
.signal-card .wind-arc svg { width: 100%; height: auto; display: block; overflow: visible; }
.signal-card .wa-bar.glassy    { fill: var(--green);      opacity: 0.5; }
.signal-card .wa-bar.choppy    { fill: var(--text-muted); opacity: 0.55; }
.signal-card .wa-bar.whitecaps { fill: var(--yellow);     opacity: 0.85; }
.signal-card .wa-bar.heavy     { fill: var(--red);        opacity: 0.85; }
.signal-card .wa-gust { stroke: var(--text); stroke-width: 1.1; opacity: 0.45; }
.signal-card .wa-thresh { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.signal-card .wa-arrow { fill: var(--text-muted); font-size: 11px; }
.signal-card .wa-time { fill: var(--text-muted); font-size: 8px; }

/* Hidden "/#all" preview-mode indicator — only present when the skeleton key
   is active (see applyPreviewLinks in index.html). Unobtrusive bottom-left. */
#preview-indicator {
    position: fixed; bottom: 12px; left: 12px; z-index: 9999;
    background: var(--surface2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 12px; font-size: 0.78rem; box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
#preview-indicator a { color: var(--yellow); margin-left: 8px; text-decoration: underline; cursor: pointer; }

/* Dormant-signals expander. Lives below the active signals grid so
   returning viewers can see "what's in this dashboard's toolbelt"
   without making retired cards completely invisible. Muted on purpose. */
.signals-dormant { margin: -12px 0 24px; font-size: 0.8rem; color: var(--text-muted); }
.signals-dormant summary { cursor: pointer; opacity: 0.75; padding: 4px 0; }
.signals-dormant summary:hover { opacity: 1; }
.signals-dormant ul { margin: 6px 0 0 0; padding-left: 20px; line-height: 1.5; }
.signals-dormant li { margin-bottom: 4px; }
.signals-dormant strong { color: var(--text); font-weight: 600; }

/* Dam cards */
.dam-card { text-align: center; }
.dam-card .dam-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; text-align: left; }
.dam-card h3 { font-size: 1rem; margin: 0; }
.dam-card .pct { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.dam-card .dam-foot { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; line-height: 1.3; text-align: left; }
.dam-bar-bg { width: 100%; height: 8px; background: var(--surface2); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.dam-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }

/* Dam timeline */
.dam-event { background: var(--surface); border-radius: 10px; padding: 16px; border: 1px solid var(--border); margin-bottom: 12px; }
.dam-event .event-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.dam-event .event-change { font-size: 1.1rem; font-weight: 600; }
.dam-event .event-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.dam-event .event-date { font-size: 0.8rem; color: var(--text-muted); }
.dam-event .objective-chip {
    display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.7rem;
    font-weight: 600; text-transform: uppercase;
}
.obj-store { background: rgba(56,189,248,0.15); color: var(--accent); }
.obj-release { background: rgba(251,146,60,0.15); color: var(--orange); }
.dam-event .event-explain { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; }

/* Weather */
.weather-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.wx-card { background: var(--surface2); border-radius: 8px; padding: 12px; text-align: center; }
.wx-card .wx-period { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
.wx-card .wx-temp { font-size: 1.3rem; font-weight: 700; margin: 4px 0; }
.wx-card .wx-desc { font-size: 0.8rem; color: var(--text-muted); }
.wx-card .wx-precip { font-size: 0.9rem; font-weight: 600; margin-top: 4px; }
.wx-precip-high { color: var(--accent); }
.wx-precip-low { color: var(--text-muted); }

/* Hydrology */
.hydro-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; font-size: 0.85rem; }
.hydro-node { background: var(--surface2); border-radius: 8px; padding: 8px 14px; text-align: center; }
.hydro-arrow { color: var(--text-muted); font-size: 1.2rem; }
.hydro-detail { font-size: 0.85rem; color: var(--text-muted); margin: 6px 0; }
.hydro-detail strong { color: var(--text); }

/* Charts */
.chart-section { background: var(--surface); border-radius: 12px; padding: 20px; margin-bottom: 24px; border: 1px solid var(--border); }
.chart-section h2 { font-size: 1.35rem; font-weight: 400; font-family: var(--font-display); letter-spacing: -0.01em; margin-bottom: 4px; }
.chart-section .subtitle { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 16px; }
.chart-container { position: relative; height: 400px; }
.chart-controls { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.chart-controls button {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.15s;
}
.chart-controls button:hover { border-color: var(--accent); }
.chart-controls button.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.chart-controls .spacer { flex: 1; }
.chart-controls label { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.chart-controls input[type="checkbox"] { accent-color: var(--accent); }

/* Reference table */
.ref-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ref-table th {
    text-align: left; color: var(--text-muted); font-weight: 500; padding: 8px 12px;
    border-bottom: 1px solid var(--border); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px;
    white-space: nowrap;
}
.ref-table td { padding: 8px 12px; border-bottom: 1px solid var(--surface2); white-space: nowrap; }
/* Wrap the ref-table in a scroller so the right-edge fade gradient
   signals "swipe me" on narrow screens. The fade is a pseudo-element
   on the wrapper, not the table, so it doesn't move with horizontal
   scroll. */
.ref-table-scroller {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ref-table-scroller::after {
    content: '';
    position: sticky;
    top: 0; right: 0;
    display: none; /* shown via mobile media query below */
    width: 28px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface));
}
.ref-table-hint {
    display: none;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: right;
    font-style: italic;
    opacity: 0.75;
}

/* Section titles */
.section-title {
    font-size: 1.15rem; font-weight: 400; font-style: italic; font-family: var(--font-display); color: var(--teal); letter-spacing: 0;
    font-weight: 600; margin-bottom: 12px; margin-top: 8px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px;
}

.loading { text-align: center; padding: 60px; color: var(--text-muted); }
.loading .spinner {
    width: 40px; height: 40px; border: 3px solid var(--surface2); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Respect the OS-level "reduce motion" setting. Stops the spinner
   from rotating, kills the small hover/transition animations on
   toggles and dam bars, and (via the JS CO config below) disables
   Chart.js's built-in animate-in-on-render. Users with vestibular
   sensitivity shouldn't get motion they didn't ask for. */
@media (prefers-reduced-motion: reduce) {
    .loading .spinner { animation: none; border-top-color: var(--accent); }
    .toggle-group button,
    .chart-controls button,
    .dam-bar-fill,
    #patrick-link,
    #angler-link { transition: none !important; }
}
.error-msg { background: rgba(248,113,113,0.1); border: 1px solid var(--red); padding: 16px; border-radius: 8px; color: var(--red); margin-bottom: 16px; }
.warn-msg { background: rgba(251,191,36,0.1); border: 1px solid var(--yellow); padding: 12px; border-radius: 8px; color: var(--yellow); margin-bottom: 16px; font-size: 0.85rem; }

/* Split layout */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

footer { text-align: center; padding: 24px; color: var(--text-muted); font-size: 0.8rem; border-top: 1px solid var(--border); margin-top: 24px; }
footer a { color: var(--accent); text-decoration: none; }
footer .footer-privacy { font-size: 0.72rem; opacity: 0.65; }

/* Patrick easter egg */
#patrick-link-wrap { margin-top: 6px; font-size: 0.8rem; }
#patrick-link { color: var(--teal); text-decoration: none; border-bottom: 1px dotted var(--teal); cursor: pointer; }
#patrick-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
#patrick-panel {
    background: var(--surface); border-radius: 12px; padding: 20px; margin-bottom: 24px;
    border: 1px solid var(--border); border-left: 3px solid var(--teal);
}
#patrick-panel.beached { border-left-color: var(--red); }
#patrick-panel.marginal { border-left-color: var(--yellow); }
#patrick-panel.cruising { border-left-color: var(--green); }
.patrick-headline { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.patrick-sub { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 14px; }
.patrick-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.85rem; }
.patrick-row .item { background: var(--surface2); border-radius: 6px; padding: 6px 10px; }
.patrick-row .item .k { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; display: block; }
.patrick-row .item .v { font-weight: 600; }
.patrick-notes { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.patrick-notes strong { color: var(--text); }
.patrick-notes .plus { color: var(--green); }
.patrick-notes .minus { color: var(--red); }
.patrick-close { float: right; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; margin-top: -4px; }
.patrick-close:hover { color: var(--text); }

/* Fishers / Pro Angler panel — sibling of the Patrick pattern.
   The header link sits inline next to the Patrick? link inside
   #patrick-link-wrap, separated by a middot. */
#angler-link { color: var(--teal); text-decoration: none; border-bottom: 1px dotted var(--teal); cursor: pointer; }
#angler-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
#angler-panel {
    background: var(--surface); border-radius: 12px; padding: 20px; margin-bottom: 24px;
    border: 1px solid var(--border); border-left: 3px solid var(--teal);
}
#angler-panel.cold    { border-left-color: var(--accent); }
#angler-panel.cool    { border-left-color: var(--teal); }
#angler-panel.good    { border-left-color: var(--green); }
#angler-panel.optimal { border-left-color: var(--green); }
#angler-panel.warm    { border-left-color: var(--yellow); }
#angler-panel.hot     { border-left-color: var(--orange); }
.angler-title { font-size: 1.2rem; font-family: var(--font-display); font-style: italic; color: var(--text-muted); letter-spacing: 0; margin-bottom: 10px; font-weight: 400; }
.angler-headline { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.angler-sub { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 14px; line-height: 1.5; }
.angler-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.85rem; }
.angler-row .item { background: var(--surface2); border-radius: 6px; padding: 6px 10px; }
.angler-row .item .k { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; display: block; }
.angler-row .item .v { font-weight: 600; }
.angler-notes { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.angler-notes strong { color: var(--text); }
.angler-notes .plus { color: var(--green); }
.angler-notes .minus { color: var(--red); }
.angler-sub .plus { color: var(--green); }
.angler-sub .minus { color: var(--red); }
.angler-close { float: right; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; margin-top: -4px; }
.angler-close:hover { color: var(--text); }
/* Lab panel — experimental features staging area. Same shell pattern
   as Patrick/Fishers. Purple accent to visually distinguish. */
#lab-link { color: var(--purple); text-decoration: none; border-bottom: 1px dotted var(--purple); cursor: pointer; }
#lab-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
#lab-panel {
    background: var(--surface); border-radius: 12px; padding: 20px; margin-bottom: 24px;
    border: 1px solid var(--border); border-left: 3px solid var(--purple);
}
.lab-close { float: right; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; margin-top: -4px; }
.lab-close:hover { color: var(--text); }
.lab-title { font-size: 1.2rem; font-family: var(--font-display); font-style: italic; color: var(--text-muted); letter-spacing: 0; margin-bottom: 10px; font-weight: 400; }
.lab-section { margin-bottom: 18px; }
.lab-section h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; }
.lab-card { background: var(--surface2); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; font-size: 0.85rem; line-height: 1.5; }
.lab-card strong { color: var(--text); }
.lab-card .plus { color: var(--green); }
.lab-card .minus { color: var(--red); }
.lab-card em { opacity: 0.8; }
.lab-btn { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: 0.85rem; }
.lab-btn:hover { background: var(--border); }

/* Share panel — generates a QR code for the current URL (hash
   included) so someone scanning on their phone lands on exactly
   the view the sharer had open. Color accent picks var(--accent)
   so it's distinct from Patrick/Fishers (teal) and Lab (purple). */
#share-link { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: pointer; }
#share-link:hover { color: var(--teal); border-bottom-color: var(--teal); }
#share-panel {
    background: var(--surface); border-radius: 12px; padding: 20px; margin-bottom: 24px;
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
}
.share-close { float: right; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; margin-top: -4px; }
.share-close:hover { color: var(--text); }
.share-title { font-size: 1.2rem; font-family: var(--font-display); font-style: italic; color: var(--text-muted); letter-spacing: 0; margin-bottom: 14px; font-weight: 400; }
.share-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.share-qr { background: #fff; padding: 10px; border-radius: 8px; line-height: 0; }
.share-qr canvas { display: block; }
.share-url { font-size: 0.85rem; color: var(--text); word-break: break-all; text-align: center; background: var(--surface2); padding: 8px 12px; border-radius: 6px; max-width: 100%; }
.share-hint { font-size: 0.8rem; color: var(--text-muted); text-align: center; line-height: 1.4; }
.share-fallback { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 20px; }
/* "Today's Recommended Bait" pro-tip callout — deliberately over-
   serious framing around the punchline so the joke lands. */
.angler-bait-tip {
    margin: 12px 0;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(45,212,191,0.12), rgba(56,189,248,0.08));
    border: 1px solid rgba(45,212,191,0.35);
    border-radius: 8px;
}
.angler-bait-tip .k {
    display: block;
    font-size: 0.65rem;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 2px;
    font-weight: 600;
}
.angler-bait-tip .v { font-size: 0.95rem; }
.angler-bait-tip .v strong { color: var(--text); }
.angler-bait-tip .v em { color: var(--text-muted); font-size: 0.85rem; }

/* Cinco Cinco no-Sinko — special-event panel. Deliberately styled
   differently from Patrick/Fishers/Lab/Share: sunset gradient
   palette (#f59e0b → #ec4899 → #8b5cf6), a real sunburst SVG behind
   the title rather than the standard accent border, and route
   markers as small water-drop dots rather than the numbered-circle
   pattern used elsewhere. The point is a panel that feels themed
   rather than mass-produced. */
:root { --cinco-1: #f59e0b; --cinco-2: #ec4899; --cinco-3: #8b5cf6; }
#cinco-link-wrap { margin-top: 4px; font-size: 0.8rem; }
#cinco-link {
    background: linear-gradient(90deg, var(--cinco-1), var(--cinco-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    border-bottom: 1px dashed var(--cinco-2);
    font-weight: 600;
    cursor: pointer;
}
#cinco-link:hover { border-bottom-style: solid; }
#cinco-panel {
    position: relative; overflow: hidden;
    background: var(--surface); border-radius: 12px; padding: 20px 22px; margin-bottom: 24px;
    border: 1px solid var(--border);
    background-image:
        radial-gradient(circle at 100% 0%, rgba(245,158,11,0.10), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(139,92,246,0.08), transparent 50%);
}
.cinco-sunray {
    position: absolute; top: -40px; right: -40px; width: 180px; height: 180px;
    opacity: 0.18; pointer-events: none;
    color: var(--cinco-1);
}
body[data-theme="light"] .cinco-sunray { opacity: 0.30; }
.cinco-close { float: right; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; margin-top: -4px; position: relative; z-index: 2; }
.cinco-close:hover { color: var(--text); }
.cinco-header { position: relative; z-index: 2; margin-bottom: 14px; }
.cinco-title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 2px 0;
    letter-spacing: -0.01em;
}
.cinco-title .a {
    background: linear-gradient(90deg, var(--cinco-1), var(--cinco-2) 60%, var(--cinco-3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cinco-title .b { color: var(--text); font-style: italic; font-weight: 500; }
.cinco-motto {
    font-style: italic; font-size: 0.95rem; color: var(--text);
    opacity: 0.92; margin-top: 6px; letter-spacing: 0.01em;
}
.cinco-motto .sep {
    color: var(--cinco-2); margin: 0 6px; font-style: normal; font-weight: 700;
}
.cinco-date {
    font-size: 0.78rem; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 2px;
}
.cinco-date::before {
    content: ""; display: inline-block; width: 18px; height: 1px;
    background: linear-gradient(90deg, var(--cinco-1), transparent);
}
.cinco-banner {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1px; margin-bottom: 18px;
    background: var(--border);
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border);
}
.cinco-banner .item {
    background: var(--surface);
    padding: 10px 12px;
    font-size: 0.85rem;
}
.cinco-banner .item .k { display: block; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 2px; }
.cinco-banner .item .v { font-weight: 600; color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.cinco-banner .item .v.warm { color: var(--cinco-1); }
.cinco-banner .item .v.cool { color: var(--accent); }
/* Surface verdict — small label below the wind value indicating
   lake-surface state (glassy / light chop / whitecaps / heavy chop).
   Same palette used in the leg-by-leg table for consistency. */
.cinco-banner .item .surface,
#cinco-panel .surface {
    display: inline-block; font-size: 0.7rem; line-height: 1;
    padding: 2px 6px; border-radius: 4px; margin-top: 4px;
    letter-spacing: 0.04em;
    background: var(--surface2);
    color: var(--text-muted);
}
#cinco-panel .surface.glassy   { background: rgba(74,222,128,0.18);  color: var(--green); }
#cinco-panel .surface.choppy   { background: var(--surface2);        color: var(--text); }
#cinco-panel .surface.whitecaps{ background: rgba(245,158,11,0.22);  color: var(--cinco-1); font-weight: 600; }
#cinco-panel .surface.heavy    { background: rgba(248,113,113,0.22); color: var(--red);   font-weight: 600; }
/* In the leg table, the surface chip shares the verdict cell so
   it sits inline next to head/tail/cross. Tighter spacing. */
.cinco-legs .surface { font-size: 0.68rem; padding: 1px 5px; margin-top: 0; margin-left: 4px; }
/* Shorts-weather oracle — easter-egg humor card. Purple accent
   (cinco-3) and italic font to feel mock-mystical without going
   full crystal-ball-emoji. The breakdown line uses a monospace
   font to read as 'computation', the verdict line uses display
   italic to feel like a fortune. */
#cinco-panel .cinco-card.oracle {
    background:
        radial-gradient(circle at 0% 0%, rgba(139,92,246,0.16), transparent 55%),
        var(--surface2);
    box-shadow: inset 3px 0 0 var(--cinco-3);
}
#cinco-panel .oracle-flourish, #cinco-panel .oracle-total {
    text-align: center; color: var(--cinco-3);
    font-family: var(--font-display); font-style: italic;
    font-size: 0.85rem; letter-spacing: 0.06em;
    margin: 4px 0;
}
#cinco-panel .oracle-total { font-size: 1.1rem; margin: 6px 0 8px; }
#cinco-panel .oracle-total strong { color: var(--cinco-2); font-weight: 700; }
#cinco-panel .oracle-stats {
    display: flex; gap: 6px; flex-wrap: wrap;
    justify-content: center;
    margin: 6px 0;
}
#cinco-panel .oracle-stat {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(139,92,246,0.10);
    border: 1px solid rgba(139,92,246,0.30);
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 60px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    line-height: 1.3;
}
#cinco-panel .oracle-stat .glyph {
    font-size: 1.15rem; line-height: 1;
    color: var(--cinco-3);
    margin-bottom: 3px;
}
#cinco-panel .oracle-stat .value { color: var(--text); }
#cinco-panel .oracle-stat .pts { color: var(--text-muted); margin-top: 1px; }
#cinco-panel .oracle-stat.pos .pts { color: var(--green); }
#cinco-panel .oracle-stat.neg .pts { color: var(--red); }
#cinco-panel .oracle-verdict {
    font-size: 1rem; line-height: 1.5;
    font-family: var(--font-display); font-style: italic;
    text-align: center; margin-top: 4px;
}
#cinco-panel .oracle-verdict .who { color: var(--cinco-3); font-weight: 600; font-style: normal; font-family: inherit; }
#cinco-panel .oracle-verdict .arc { color: var(--cinco-3); margin: 0 4px; font-style: normal; }
.cinco-section { margin-bottom: 20px; position: relative; z-index: 2; }
.cinco-section h3 {
    font-size: 0.85rem; font-weight: 600; margin: 0 0 10px 0;
    color: var(--text-muted);
}
.cinco-section h3 .accent { color: var(--cinco-2); }
.cinco-card {
    background: var(--surface2); border-radius: 8px; padding: 12px 14px;
    margin-bottom: 10px; font-size: 0.88rem; line-height: 1.55;
}
.cinco-card strong { color: var(--text); }
.cinco-card em { opacity: 0.85; }
.cinco-card .plus { color: var(--green); }
.cinco-card .minus { color: var(--red); }
.cinco-card.warn { box-shadow: inset 3px 0 0 var(--yellow); }
.cinco-card.danger { box-shadow: inset 3px 0 0 var(--red); }
.cinco-card.sunburst {
    background:
        radial-gradient(circle at 95% 0%, rgba(245,158,11,0.18), transparent 55%),
        var(--surface2);
    box-shadow: inset 3px 0 0 var(--cinco-1);
}
.cinco-route { list-style: none; padding: 0; margin: 0; }
.cinco-route li {
    display: grid; grid-template-columns: 14px 1fr auto;
    gap: 12px; align-items: baseline;
    padding: 9px 0;
    position: relative;
}
.cinco-route li + li { border-top: 1px solid var(--border); }
.cinco-route .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: linear-gradient(180deg, var(--cinco-1), var(--cinco-2));
    margin-top: 5px;
}
.cinco-route li.walk .dot {
    background: transparent;
    border: 1.5px dashed var(--text-muted);
    opacity: 0.7;
}
.cinco-route .stop-name { color: var(--text); font-weight: 500; }
.cinco-route li.walk .stop-name { font-style: italic; font-weight: 400; color: var(--text-muted); }
.cinco-route .stop-meta { color: var(--text-muted); font-size: 0.78rem; text-align: right; white-space: nowrap; }
.cinco-legs { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.cinco-legs th, .cinco-legs td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.cinco-legs th { color: var(--text-muted); font-weight: 500; font-size: 0.72rem; }
.cinco-legs td.num { font-variant-numeric: tabular-nums; }
#cinco-panel .head { color: var(--red); font-weight: 600; }
#cinco-panel .tail { color: var(--green); font-weight: 600; }
#cinco-panel .cross { color: var(--yellow); font-weight: 600; }
.cinco-legs .past { opacity: 0.45; }
.cinco-foot { font-size: 0.72rem; color: var(--text-muted); opacity: 0.85; line-height: 1.5; margin-top: 8px; }
/* Collapsible section pattern — used for the Route block which is
   personalized but not the most-checked info during the event.
   Matches the visual weight of cinco-section h3 so the page rhythm
   stays consistent whether expanded or collapsed. */
details.cinco-section { margin-bottom: 20px; position: relative; z-index: 2; }
details.cinco-section > summary {
    list-style: none; cursor: pointer; user-select: none;
    font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
    padding: 4px 0; margin-bottom: 0;
    display: flex; align-items: center; gap: 8px;
}
details.cinco-section > summary::-webkit-details-marker { display: none; }
details.cinco-section > summary::before {
    content: "▶"; display: inline-block;
    color: var(--cinco-2); font-size: 0.95rem; line-height: 1;
    transition: transform 0.15s ease;
}
details.cinco-section[open] > summary::before { transform: rotate(90deg); }
details.cinco-section[open] > summary { margin-bottom: 10px; }
details.cinco-section .accent { color: var(--cinco-2); }
@media (prefers-reduced-motion: reduce) {
    details.cinco-section > summary::before { transition: none; }
}
/* Route map — Leaflet container. Sized for mobile-first; OSM
   tile attribution lives at the bottom of the map per ODbL. */
.cinco-map {
    height: 260px; border-radius: 8px; margin-bottom: 12px;
    background: var(--surface2); /* placeholder while tiles load */
    overflow: hidden;
}
@media (max-width: 600px) {
    .cinco-map { height: 220px; }
}
/* Custom paddle-stop marker — small numbered circle in cinco palette,
   overrides the default Leaflet marker which doesn't fit the panel
   visually. Created via L.divIcon. */
.cinco-pin {
    background: linear-gradient(180deg, var(--cinco-1), var(--cinco-2));
    color: #fff; font-weight: 700; font-size: 11px;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
    border: 2px solid #fff;
}
.cinco-pin.gathering { background: var(--cinco-3); }

@media (max-width: 600px) {
    #cinco-panel { padding: 16px 14px; }
    .cinco-sunray { width: 130px; height: 130px; top: -30px; right: -30px; }
    .cinco-title { font-size: 1.3rem; }
    .cinco-banner { grid-template-columns: 1fr 1fr; }
    .cinco-banner .item .v { font-size: 0.95rem; }
    /* On phones: stack each route stop as name → meta on a new line.
       The 3-column grid scrunches badly when the meta text is long
       (e.g. "Brave souls only — most leave from Bridge Rd"). */
    .cinco-route li { grid-template-columns: 14px 1fr; row-gap: 2px; }
    .cinco-route .stop-meta { grid-column: 2; text-align: left; white-space: normal; }
    /* Tighter table — drop the leg name to two lines if needed,
       keep wind and verdict columns as one-line values. */
    .cinco-legs { font-size: 0.78rem; }
    .cinco-legs th, .cinco-legs td { padding: 5px 4px; }
}

/* =============================================================================
   OZARKS DETOUR PANEL — vacation-mode panel for Lake of the Ozarks trip
   ============================================================================
   Visually distinct from Cinco on purpose: deep teal + warm coral palette
   (Cinco is amber→pink→violet), a horizontal ripple along the header bottom
   (Cinco's a sunburst in the top-right), pill buttons for the pontoon-time
   filter (Cinco doesn't have interactive filters), and tag chips for spot
   attributes (Cinco doesn't use tags). The point is two date-bound panels
   that don't read as the same template. */
:root { --ozk-1: #0e7490; --ozk-2: #f97316; --ozk-3: #e2c290; }
#ozarks-link-wrap { margin-top: 4px; font-size: 0.8rem; }
#ozarks-link {
    background: linear-gradient(90deg, var(--ozk-1), var(--ozk-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    border-bottom: 1px dotted var(--ozk-1);
    font-weight: 600;
    cursor: pointer;
}
#ozarks-link:hover { border-bottom-style: solid; }
#ozarks-panel {
    position: relative; overflow: hidden;
    background: var(--surface); border-radius: 12px;
    padding: 20px 22px; margin-bottom: 24px;
    border: 1px solid var(--border);
}
.ozk-close { float: right; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; margin-top: -4px; position: relative; z-index: 3; }
.ozk-close:hover { color: var(--text); }
.ozk-header { position: relative; z-index: 2; padding-bottom: 14px; }
.ozk-eyebrow {
    font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ozk-1); font-weight: 600; margin-bottom: 4px;
}
.ozk-title {
    font-family: var(--font-display);
    font-size: 1.7rem; font-weight: 700; line-height: 1.05;
    margin: 0 0 4px 0; color: var(--text);
    letter-spacing: -0.01em;
}
.ozk-sub { font-size: 0.92rem; color: var(--text); opacity: 0.85; }
.ozk-date { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; }
/* Header divider: a two-line waveform that runs the full width of the
   header. Mirrors the "water surface" idea without leaning on cliché
   nautical iconography. Real ripple geometry via repeated Q curves. */
.ozk-ripple {
    display: block; width: 100%; height: 18px;
    color: var(--ozk-1); margin-bottom: 16px;
    opacity: 0.55;
}
body[data-theme="light"] .ozk-ripple { opacity: 0.75; }
/* Banner: 4 condition cells, similar grid to Cinco's but with the value
   stacked above a small subline for context (vs full pool, verdict, etc). */
.ozk-banner {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px; margin-bottom: 18px;
    background: var(--border);
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border);
}
.ozk-banner .item {
    background: var(--surface);
    padding: 10px 12px;
    font-size: 0.85rem;
    display: flex; flex-direction: column; gap: 2px;
}
.ozk-banner .item .k { font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.ozk-banner .item .v { font-weight: 600; color: var(--text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ozk-banner .item .sub { font-size: 0.75rem; color: var(--text-muted); }
/* Chop surface chip — same four states as Whitecap Watch but using the
   Ozarks palette so it visually belongs to this panel. */
#ozarks-panel .ozk-surface {
    display: inline-block; align-self: flex-start;
    font-size: 0.7rem; line-height: 1;
    padding: 2px 6px; border-radius: 4px; margin-top: 2px;
    letter-spacing: 0.04em; background: var(--surface2); color: var(--text-muted);
}
#ozarks-panel .ozk-surface.glassy    { background: rgba(74,222,128,0.18);  color: var(--green); }
#ozarks-panel .ozk-surface.choppy    { background: var(--surface2);        color: var(--text); }
#ozarks-panel .ozk-surface.whitecaps { background: rgba(249,115,22,0.22);  color: var(--ozk-2); font-weight: 600; }
#ozarks-panel .ozk-surface.heavy     { background: rgba(248,113,113,0.22); color: var(--red);   font-weight: 600; }
/* Section pattern — small uppercase eyebrow header, no border above. */
.ozk-section { margin-bottom: 22px; position: relative; z-index: 2; }
.ozk-section h3 {
    font-size: 0.78rem; font-weight: 600; margin: 0 0 10px 0;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.ozk-section h3 .ozk-accent { color: var(--ozk-1); font-weight: 500; }
.ozk-card { background: var(--surface2); border-radius: 8px; padding: 12px 14px; font-size: 0.88rem; line-height: 1.55; }
.ozk-card.cove { box-shadow: inset 3px 0 0 var(--ozk-1); }
.ozk-foot { font-size: 0.72rem; color: var(--text-muted); opacity: 0.85; line-height: 1.5; }
/* Boat-wake line: a second verdict in the cove-conditions card,
   calendar-driven (no live data). Quiet styling for the low tiers,
   amber/red as traffic ramps up so a "glassy by wind" cove still
   announces peak-weekend chop. Inline-formatted to sit under the
   wind line, not a separate section. */
.ozk-wake-line { margin-top: 6px; font-size: 0.86rem; }
.ozk-wake-line strong { text-transform: capitalize; }
.ozk-wake-label { color: var(--text-muted); font-size: 0.78rem; margin-left: 2px; }
.ozk-wake-minimal  strong { color: var(--green); }
.ozk-wake-building strong { color: var(--ozk-3); }
.ozk-wake-heavy    strong { color: var(--ozk-2); }
.ozk-wake-extreme  strong { color: var(--red); }
/* Pontoon-time pill row — three buttons + an inline "X shown" note. */
.ozk-pill-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ozk-pill {
    background: var(--surface2); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 5px 12px; font-size: 0.8rem; cursor: pointer;
    font-family: inherit; font-weight: 500;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ozk-pill:hover { color: var(--text); border-color: var(--ozk-1); }
.ozk-pill.active {
    background: var(--ozk-1); color: #fff; border-color: var(--ozk-1);
}
.ozk-pill-note { font-size: 0.72rem; color: var(--text-muted); margin-left: 4px; }
.ozk-pill-note .ozk-spot-count { color: var(--text); font-weight: 600; }
/* Spots list — each row is a small card with a head line (name + meta)
   and a vibe + tag row underneath. Visually compact so 4-12 fit without
   the panel feeling like a wall. */
.ozk-spots { list-style: none; padding: 0; margin: 0; }
.ozk-spot {
    padding: 10px 0 11px;
    border-top: 1px solid var(--border);
}
.ozk-spot:first-child { border-top: none; }
.ozk-spot-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    margin-bottom: 3px;
}
.ozk-spot-head strong { color: var(--text); font-weight: 600; font-size: 0.95rem; }
.ozk-meta { color: var(--text-muted); font-size: 0.78rem; }
.ozk-spot-vibe { color: var(--text); opacity: 0.88; font-size: 0.85rem; line-height: 1.45; margin-bottom: 5px; }
.ozk-spot-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ozk-tag {
    background: rgba(14,116,144,0.12);
    color: var(--ozk-1);
    border-radius: 4px;
    padding: 1px 7px; font-size: 0.7rem;
    border: 1px solid rgba(14,116,144,0.25);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
body[data-theme="light"] .ozk-tag { background: rgba(14,116,144,0.10); }
.ozk-cam { color: var(--ozk-2); text-decoration: none; font-weight: 600; font-size: 0.78rem; }
.ozk-cam:hover { text-decoration: underline; }
/* Google rating chip on each spot — gold star + value + tiny review count.
   Hardcoded snapshot ratings with a refresh date in the column header, not
   live; treated as a single small visual element rather than a separate row. */
.ozk-rating {
    display: inline-flex; align-items: baseline; gap: 3px;
    font-size: 0.78rem; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.ozk-rating .star { color: #f59e0b; font-size: 0.85rem; }
.ozk-rating .val  { color: var(--text); font-weight: 600; }
.ozk-rating .n    { color: var(--text-muted); opacity: 0.85; font-size: 0.72rem; }
/* Drive-only footer — collapsed by default, expands to show Bagnell Strip
   + Coconuts. Uses the standard <details> pattern. */
.ozk-drive-details { margin-top: 14px; }
.ozk-drive-details > summary {
    list-style: none; cursor: pointer; user-select: none;
    font-size: 0.78rem; font-weight: 500; color: var(--ozk-1);
    padding: 4px 0;
}
.ozk-drive-details > summary::-webkit-details-marker { display: none; }
.ozk-drive-details > summary::before {
    content: "▸ "; color: var(--ozk-1); margin-right: 2px;
}
.ozk-drive-details[open] > summary::before { content: "▾ "; }
.ozk-drive-list { list-style: none; padding: 8px 0 0; margin: 0; }
.ozk-drive-list li { padding: 6px 0; border-top: 1px solid var(--border); font-size: 0.85rem; line-height: 1.5; }
.ozk-drive-list li:first-child { border-top: none; }
/* Coves — denser horizontal list, color-coded by vibe class. */
.ozk-coves { list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.ozk-cove {
    background: var(--surface2); border-radius: 8px; padding: 10px 12px;
    border-left: 3px solid var(--text-muted);
}
.ozk-cove.loud   { border-left-color: var(--ozk-2); }
.ozk-cove.family { border-left-color: var(--green); }
.ozk-cove.quiet  { border-left-color: var(--ozk-1); }
.ozk-cove.scenic { border-left-color: var(--ozk-3); }
.ozk-cove-name { font-weight: 600; color: var(--text); font-size: 0.92rem; margin-bottom: 2px; }
.ozk-cove-where { font-size: 0.74rem; color: var(--text-muted); margin-bottom: 4px; }
.ozk-cove-vibe { font-size: 0.78rem; color: var(--text); opacity: 0.85; font-style: italic; }
/* Swim-safety beach card — status-keyed tint (open=green, advisory=amber,
   closed=red) on the wrapper, matching pill on each beach row. Placed
   second in the panel so it's hard to miss when an advisory is active. */
.ozk-beach-card {
    background: var(--surface2); border-radius: 8px;
    padding: 12px 14px; font-size: 0.88rem; line-height: 1.55;
    box-shadow: inset 3px 0 0 var(--text-muted);
}
.ozk-beach-card.open     { box-shadow: inset 3px 0 0 var(--green); }
.ozk-beach-card.advisory { box-shadow: inset 3px 0 0 var(--yellow); }
.ozk-beach-card.closed   { box-shadow: inset 3px 0 0 var(--red); }
/* Headline stays neutral by default. The status pill on each beach row
   carries the color cue, so we don't double up by also painting the
   headline — the card was reading too prominent at advisory state when
   the headline matched the pill (user feedback 2026-05-23). Closed state
   keeps a red headline because "Beach CLOSED" is a stronger safety
   signal that warrants the second visual hit. */
.ozk-beach-headline {
    font-weight: 600; font-size: 0.92rem; color: var(--text);
    margin-bottom: 8px;
}
.ozk-beach-card.closed .ozk-beach-headline { color: var(--red); }
.ozk-beach-list { list-style: none; padding: 0; margin: 0; }
.ozk-beach { padding: 7px 0; border-top: 1px solid var(--border); }
.ozk-beach:first-child { border-top: none; padding-top: 0; }
.ozk-beach-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 2px;
}
.ozk-beach-head strong { font-weight: 600; color: var(--text); font-size: 0.92rem; }
.ozk-beach-status {
    display: inline-block; font-size: 0.7rem; line-height: 1;
    padding: 2px 7px; border-radius: 999px;
    letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--surface); color: var(--text-muted);
    border: 1px solid var(--border);
}
.ozk-beach-status.open     { background: rgba(74,222,128,0.18);  color: var(--green); border-color: rgba(74,222,128,0.30); }
.ozk-beach-status.advisory { background: rgba(245,158,11,0.18);  color: var(--yellow); border-color: rgba(245,158,11,0.30); font-weight: 500; }
.ozk-beach-status.closed   { background: rgba(248,113,113,0.22); color: var(--red);    border-color: rgba(248,113,113,0.35); font-weight: 600; }
.ozk-beach-meta { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ozk-beach-stale {
    background: var(--surface); color: var(--text-muted);
    padding: 1px 5px; border-radius: 3px; font-size: 0.68rem;
    margin-left: 4px;
}
.ozk-beach-comment {
    font-size: 0.8rem; font-style: italic; color: var(--text);
    opacity: 0.85; margin-top: 3px;
}
/* Webcams — plain ul, links use the orange accent. */
.ozk-cams { list-style: none; padding: 0; margin: 0 0 8px 0; }
.ozk-cams li { padding: 4px 0; font-size: 0.88rem; }
.ozk-cams a { color: var(--ozk-2); text-decoration: none; font-weight: 600; }
.ozk-cams a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    #ozarks-panel { padding: 16px 14px; }
    .ozk-title { font-size: 1.4rem; }
    .ozk-banner { grid-template-columns: 1fr 1fr; }
    .ozk-banner .item .v { font-size: 0.95rem; }
    .ozk-spot-head { gap: 6px; }
    .ozk-coves { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .container { padding: 12px; }
    header { padding: 16px 0 12px; margin-bottom: 16px; }
    header h1 { font-size: 1.4rem; }
    header .tagline { font-size: 0.85rem; }

    .card-grid, .card-grid-3, .signals-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
    .card { padding: 16px; }
    .lake-card .level { font-size: 1.75rem; }

    .snw-banner { padding: 16px; margin-bottom: 16px; }
    .snw-status { font-size: 1rem; }

    .chart-section { padding: 14px; margin-bottom: 16px; }
    .chart-container { height: 280px; }
    .chart-controls { gap: 6px; }
    .chart-controls button { padding: 10px 16px; min-height: 40px; font-size: 0.9rem; }

    /* Touch-friendlier unit toggle */
    .toggle-group { font-size: 0.85rem; }
    .toggle-group button { padding: 8px 16px; min-height: 36px; }

    /* Hydro flow: stack vertically; rotate arrows so → becomes ↓ and ↔ becomes ↕ */
    .hydro-flow { flex-direction: column; align-items: stretch; gap: 4px; }
    .hydro-flow .hydro-node { text-align: center; }
    .hydro-flow .hydro-arrow { transform: rotate(90deg); align-self: center; line-height: 1; }

    /* Dam timeline: stack header pieces */
    .dam-event { padding: 14px; }
    .dam-event .event-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .dam-event .event-change { font-size: 1rem; }

    /* Reference table: keep scrollable, tighten padding, show swipe hint */
    .ref-table th, .ref-table td { padding: 6px 10px; }
    .ref-table-hint { display: block; }

    /* Weather cards: 2-up wraps long NWS phrases into 5 lines on a
       393px viewport. Single column is much more legible. */
    .weather-grid { grid-template-columns: 1fr; gap: 8px; }
    .wx-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; text-align: left; }
    .wx-card .wx-temp { margin: 0; font-size: 1.2rem; }
    .wx-card .wx-precip { margin: 0; }

    footer { padding: 16px 4px; }
}

/* === Chain map (EXECUTION-PLANS U1) ============================
   Real-OSM mini-map of the chain above the lake cards. The SVG draws
   everything in currentColor; the container sets the muted base for
   rivers/minor water, and mountChainMap() (index.html) overrides each
   lake path's color to the lake's identity color + status stroke. */
.chain-map { max-width: 170px; margin: 2px auto 6px; color: var(--text-muted); }
.chain-map:empty { display: none; }
.chain-map svg { width: 100%; height: auto; display: block; }
.chain-map .map-lake { transition: filter 0.15s; }
.chain-map .map-lake.map-hover { filter: brightness(1.3); }
.chain-map .map-hit { cursor: pointer; }
.chain-map .map-hit:focus-visible { outline: none; stroke: var(--accent); stroke-width: 2; }
.chain-map .map-dam { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .chain-map .map-lake { transition: none; } }
@media (max-width: 480px) { .chain-map { max-width: 140px; } }

/* === "Since yesterday" strip (EXECUTION-PLANS item 2) ===========
   A quiet one-line delta digest for returning visitors — subtitle
   weight, no card chrome. Renders nothing when nothing changed. */
.since-strip { font-size: 0.85rem; color: var(--text-muted); margin: -2px 0 14px; line-height: 1.6; }
.since-strip em { opacity: 0.8; margin-right: 2px; }
.since-strip a { color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px; }
.since-strip a:hover { color: var(--accent); }
.since-strip .sy-sep { opacity: 0.45; margin: 0 2px; }

/* Dam-why line (EXECUTION-PLANS item 6) — one contextual sentence when
   gate position diverges from the week's rain; silent otherwise. */
.dam-why { margin-top: 8px; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); border-top: 1px solid var(--border, rgba(128,128,128,0.2)); padding-top: 7px; }

/* === Sparkline row (EXECUTION-PLANS item 4) =====================
   Four small-multiple 14-day traces above the lake cards. Hand-rolled
   SVG; per-lake colors come inline from the LAKES config. */
.spark-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 16px; }
.spark-cell { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--border, rgba(128,128,128,0.18)); border-radius: 8px; text-decoration: none; }
a.spark-cell:hover { border-color: var(--accent); }
a.spark-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spark-name { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.spark-cell svg { width: 100%; height: 36px; display: block; }
.spark-delta { font-size: 0.72rem; color: var(--text-muted); }
.spark-empty { justify-content: center; align-items: center; min-height: 78px; }
.spark-dash { color: var(--text-muted); opacity: 0.6; }
@media (max-width: 480px) {
    .spark-row { gap: 6px; }
    .spark-cell { padding: 6px 7px; }
    .spark-delta { font-size: 0.66rem; }
}

/* === Stage rail (EXECUTION-PLANS item 5 — preview-gated prototype) === */
.stage-rail { margin: 10px 0 2px; }
.stage-rail svg { width: 100%; height: auto; display: block; }
.stage-rail-caption { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.stage-rail-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
.stage-rail-name { font-size: 0.8rem; font-weight: 600; }
@media (max-width: 480px) { .stage-rail-row { grid-template-columns: 1fr; gap: 2px; } }

/* === Jump-nav (EXECUTION-PLANS U3) ==============================
   Thin sticky anchor row, Detailed view only. Sits below any warning
   banners in document order; z-index above cards, below panels. */
.jump-nav { position: sticky; top: 0; z-index: 40; display: flex; gap: 4px; padding: 7px 2px; margin: 0 0 6px; background: var(--bg); border-bottom: 1px solid var(--border, rgba(128,128,128,0.18)); }
.jump-nav a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; padding: 2px 9px; border-radius: 999px; }
.jump-nav a:hover { color: var(--text); }
.jump-nav a.active { color: var(--text); background: var(--surface2, rgba(128,128,128,0.15)); }
.jump-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#levels, #signals, #charts, #dams, #weather { scroll-margin-top: 44px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 480px) { .jump-nav { display: none; } }

/* === Dam gate glyph (EXECUTION-PLANS U4) ======================== */
.dam-head-right { display: flex; align-items: center; gap: 9px; }
.dam-glyph { width: 22px; height: 27px; display: block; flex-shrink: 0; }

/* === Eventful-lake emphasis (EXECUTION-PLANS U5) ================
   Outline (not border) so the nudge causes zero layout shift. */
.lake-card.eventful { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.eventful-chip { font-size: 0.62rem; font-weight: 600; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--bg); white-space: nowrap; }

/* === Advanced-charts expander (chart-declutter 2026-06-12) ====== */
.adv-charts { margin: 14px 0; }
.adv-charts summary { cursor: pointer; color: var(--text-muted); font-size: 0.85rem; padding: 8px 2px; }
.adv-charts summary:hover { color: var(--text); }
.adv-charts[open] summary { margin-bottom: 6px; }