:root { --bg: #0b0e14; --panel: rgba(14, 18, 26, 0.86); --fg: #e6e9ef; --dim: #8b93a3; --line: #262c38; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
#map { position: absolute; inset: 0; }
#trails { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#panel { position: absolute; top: 12px; left: 12px; width: 300px; max-height: calc(100% - 24px); overflow: auto; z-index: 2;
         background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-sizing: border-box; }
header { display: flex; align-items: baseline; justify-content: space-between; }
h1 { font-size: 15px; margin: 0 0 2px; letter-spacing: 0.02em; }
.sub { color: var(--dim); margin-bottom: 8px; }
.date { font-size: 22px; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.row label { color: var(--dim); min-width: 56px; }
.hint { color: var(--dim); font-size: 11px; }
input[type=range] { flex: 1; accent-color: #7cc4ff; }
button, select { background: #1a2130; color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font: inherit; cursor: pointer; }
button:hover { background: #243048; }
#timeline { width: 100%; height: 64px; display: block; margin: 4px 0 2px; cursor: crosshair; }
.sp { display: grid; grid-template-columns: 18px 14px 1fr auto; align-items: center; gap: 6px; margin: 4px 0; font-variant-numeric: tabular-nums; }
button.split { font-size: 11px; padding: 2px 8px; margin: 0 0 4px 32px; color: var(--dim); }
.sw { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.num { color: var(--dim); text-align: right; white-space: nowrap; }
.num b { color: var(--fg); font-weight: 500; }
.modes { display: flex; gap: 4px; flex-wrap: wrap; }
.modes button.on { background: #2d4a73; border-color: #4a7fc0; }
.legend { height: 8px; border-radius: 4px; margin: 6px 0 2px; }
.legend-lab { display: flex; justify-content: space-between; color: var(--dim); font-size: 11px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
details summary { cursor: pointer; color: var(--dim); }
.foot { color: var(--dim); font-size: 11px; margin-top: 8px; }
.reach { margin: 7px 0 2px; }
.reach .lab { display: flex; justify-content: space-between; font-size: 12px; }
.reach .lab span:last-child { color: var(--dim); }
.bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: #1c2230; margin-top: 3px; }
.bar div { height: 100%; }
.bar .un { background: #5a6274; }
.bar .ok { background: #243244; }
.reach .txt { color: var(--dim); font-size: 11px; margin-top: 2px; }
.src { display: grid; grid-template-columns: 10px 1fr; gap: 6px; margin: 5px 0; font-size: 12px; }
.src .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: #4bd37b; }
.src.missing .dot { background: #5a6274; }
.src.failed .dot { background: #e5484d; }
.src .d { color: var(--dim); font-size: 11px; }
#transport { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; gap: 10px; align-items: center; }
#transport .buttons { display: flex; gap: 12px; align-items: center; }
/* the scrub slider: the year played by thumb, a pill the width of the screen on a phone */
/* the whole bar is the touch target (a finger that lands a little off must not pan the map); the wrapper drives the slider */
#scrub-wrap { width: min(520px, calc(100vw - 32px)); padding: 12px 0; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
#scrub { width: 100%; height: 40px; margin: 0; padding: 0 8px; box-sizing: border-box; border-radius: 20px; background: rgba(14, 18, 26, 0.86); backdrop-filter: blur(6px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
         pointer-events: none; -webkit-appearance: none; appearance: none; }
#scrub::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #2b3444; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: #7cc4ff; border: 2px solid #0b0e14; box-shadow: 0 0 8px rgba(124, 196, 255, 0.6); }
#scrub::-moz-range-track { height: 6px; border-radius: 3px; background: #2b3444; }
#scrub::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #7cc4ff; border: 2px solid #0b0e14; box-shadow: 0 0 8px rgba(124, 196, 255, 0.6); }
#transport button { width: 46px; height: 46px; border-radius: 50%; font-size: 22px; line-height: 1; padding: 0; background: rgba(14, 18, 26, 0.86); backdrop-filter: blur(6px); box-shadow: 0 2px 12px rgba(0,0,0,0.5); }
#transport #play-big { width: 64px; height: 64px; font-size: 22px; }
#transport button:active { background: #2d4a73; }
#inspect { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: min(440px, calc(100% - 24px)); box-sizing: border-box; z-index: 2; max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain;
           background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 10px; padding: 10px 36px 10px 12px; font-size: 12px; line-height: 1.5; }
#inspect[hidden] { display: none; }
#inspect-head { margin-bottom: 2px; padding-right: 30px; }   /* clear of the close button */
#spot-key { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; color: var(--dim); font-size: 11px; }   /* which colour is which fish */
#spot-key .sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; box-shadow: none; }
.pct { color: var(--dim); font-size: 10px; margin-left: 6px; white-space: nowrap; cursor: help; }   /* the year's rank against the record */
/* the percentile gauge: a banded 0-100 track (very poor .. very good) with the year's marker, the words beside it */
.gauge { display: grid; grid-template-columns: 96px 1fr 148px; align-items: center; gap: 8px; margin: 3px 0; font-size: 11px; cursor: help; }   /* fixed name and words columns: every track the same length */
.gauge .g-sp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-track { position: relative; height: 8px; border-radius: 4px; overflow: visible; background: #1c2230; min-width: 70px; }
.g-band { position: absolute; top: 0; height: 100%; opacity: 0.45; }
.g-band:first-child { border-radius: 4px 0 0 4px; } .g-band:nth-child(7) { border-radius: 0 4px 4px 0; }
.g0 { background: #d7263d; } .g1 { background: #e4572e; } .g2 { background: #d8a51d; } .g3 { background: #7f8c9b; } .g4 { background: #7fb069; } .g5 { background: #3fa37c; } .g6 { background: #1f9e89; }
.g-mark { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1.5px #0b0e14; }
.gauge .g-txt { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; } .gauge .g-txt em { color: var(--dim); font-style: normal; font-size: 10px; margin-left: 4px; }
#spot-report { margin-top: 8px; } #spot-report .rep-head { color: var(--dim); font-size: 11px; margin-bottom: 2px; }
/* the report card table */
table.gt { border-collapse: collapse; width: 100%; font-size: 11px; cursor: help; }
table.gt th { color: var(--dim); font-weight: normal; font-size: 10px; text-align: left; padding: 0 6px 3px 0; white-space: nowrap; }
table.gt td { padding: 3px 6px 3px 0; vertical-align: middle; white-space: nowrap; }
table.gt td.gsp { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
table.gt td.gtr { width: 38%; } table.gt td.gtr .g-track { display: block; }
table.gt td.gpct { text-align: right; padding-right: 10px; font-variant-numeric: tabular-nums; }
table.gt td.grat em { color: var(--dim); font-style: normal; font-size: 10px; margin-left: 4px; }
#species .gauge { grid-template-columns: 1fr 148px; margin: 0 0 6px 28px; }   /* under a species row: track and words */
#report summary { cursor: pointer; color: var(--dim); font-size: 11px; margin: 6px 0 2px; }
#report-body { font-size: 11px; line-height: 1.6; color: var(--dim); max-height: 220px; overflow-y: auto; }
#report-body .rep { margin: 4px 0 6px; }
#report-body .rep-river { white-space: nowrap; color: var(--fg, #e6e9ef); }
#report-body .rep-river i { color: var(--dim); font-style: normal; }
#inspect-more summary { cursor: pointer; color: var(--dim); font-size: 11px; margin-top: 6px; list-style: none; }
#inspect-more summary::before { content: '▸ '; }
#inspect-more[open] summary::before { content: '▾ '; }
#inspect-body { margin-top: 4px; }
#inspect-body .sec { margin: 8px 0 4px; }
#inspect-body .vbars { margin: 4px 0 2px; }
#inspect-body .vbar { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; }
#inspect-body .vbar-sp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inspect-body .vbar-track { height: 8px; border-radius: 4px; background: #1c2230; overflow: hidden; }
#inspect-body .vbar-fill { display: block; height: 100%; border-radius: 4px; opacity: 0.85; }
#inspect-body .vbar-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
#inspect-body .hint { color: var(--dim); font-size: 10.5px; line-height: 1.4; margin-top: 2px; }
#inspect-body table.t { border-collapse: collapse; margin: 4px 0 2px; font-size: 12px; }
#inspect-body table.t th { color: var(--dim); font-weight: normal; font-size: 10.5px; text-align: right; padding: 0 8px 2px 0; }
#inspect-body table.t td { padding: 1px 8px 1px 0; vertical-align: top; white-space: nowrap; }
#inspect-body table.t td.n { text-align: right; }
#inspect-body .prov-fold summary { cursor: pointer; color: var(--dim); font-size: 11px; margin-top: 8px; list-style: none; }
#inspect-body .prov-fold summary::before { content: '▸ '; }
#inspect-body .prov-fold[open] summary::before { content: '▾ '; }
#inspect-body .prov { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; line-height: 1.5; }
svg.scale { display: block; margin: 4px 0 6px; max-width: 100%; overflow: visible; }
svg.scale .sc-track { stroke: #4a5366; stroke-width: 1.5; }
svg.scale .sc-end { fill: #8b93a3; font-size: 9px; text-anchor: middle; }
svg.scale .sc-val { fill: #e6e9ef; font-size: 10px; }
svg.scale .sc-sp { font-size: 10px; text-anchor: middle; }
#inspect-close { position: sticky; float: right; top: 0; right: 0; margin: -4px -30px 0 0; z-index: 1; width: 26px; height: 26px; border-radius: 50%; padding: 0; font-size: 16px; }
#panel.collapsed > :not(header):not(.date) { display: none; }
#panel.collapsed .date { font-size: 17px; margin: 2px 0 0; }
#panel.collapsed { cursor: pointer; }
@media (max-width: 600px) {
  #panel { width: calc(100% - 24px - 50px); max-height: 62%; padding: 10px 12px; }   /* leave a column on the right for the map's zoom buttons */
  #transport { bottom: 22px; }
  #inspect { bottom: 140px; max-height: calc(100vh - 156px); }
}
.src.gap .dot { background: #e0b04a; }   /* a known data gap: amber, not red */
.notes-mark { color: #e0b04a; font-weight: bold; }
.gaps { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.gaps .head { font-size: 12px; margin-bottom: 2px; }
.gaps .head b { color: #e0b04a; }
.gaps.flash { animation: gapflash 1.6s ease-out; }
@keyframes gapflash { from { background: rgba(224, 176, 74, 0.35); } to { background: transparent; } }
#spot { width: 100%; height: 96px; display: block; margin-top: 8px; cursor: grab; touch-action: none; }   /* the spot's history across the years: drag to move, pinch or scroll to zoom */

/* the freshness banner: a failed or stale refresh, top centre, over the map */
#freshness { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; max-width: min(520px, calc(100% - 24px)); padding: 6px 12px; border-radius: 8px; font-size: 12px; backdrop-filter: blur(6px); }
#freshness[hidden] { display: none; }
#freshness.bad { background: rgba(215, 38, 61, 0.85); color: #fff; }
#freshness.stale { background: rgba(216, 165, 29, 0.85); color: #0b0e14; }

/* a pinned barrier: its story under the head, in place of the report card */
#spot-report p.note { margin: 6px 0 2px; font-size: 12.5px; line-height: 1.45; opacity: 0.9; }

/* the preseason outlook: the agencies' forecast as a hollow mark with the band of their past misses, ours in amber */
.g-range { position: absolute; top: 1px; height: 6px; background: rgba(255, 255, 255, 0.28); border-radius: 3px; }
.g-mark.hollow { background: transparent; border: 1.5px solid #fff; width: 6px; height: 12px; margin-left: -4px; top: -2px; box-shadow: none; }
.g-mark.ours { background: #ffd166; width: 4px; height: 10px; top: -1px; }
table.gt.outlook td.gsp em { color: var(--dim); font-style: normal; font-size: 10px; margin-left: 3px; }
table.gt.outlook + .rep-head { margin-top: 10px; }
table.gt.outlook td.gpct.now { font-weight: 600; }
/* the outlook's pace cell and the fold of how the forecast has moved (outlookTable, outlookHistory) */
table.gt .gpace { white-space: nowrap; font-size: 10px; line-height: 10px; text-align: right; } table.gt .gpace b { font-weight: normal; }
.pace-bars { display: inline-block; width: 26px; vertical-align: middle; margin-right: 4px; } .pace-bars i { display: block; height: 4px; border-radius: 2px; margin: 1px 0; background: #555; }
.pace-up { color: #7bd88f; } .pace-down { color: #ff7b7b; }
.spark-row { font-size: 11px; margin: 4px 0; white-space: nowrap; } .spark { vertical-align: middle; margin: 0 6px; } .spark-note { color: var(--dim); }
table.gt.outlook td.gsp { max-width: 76px; } table.gt.outlook td.gtr { width: 24%; } table.gt.outlook .g-track { min-width: 60px; } table.gt.outlook td { padding-right: 5px; } table.gt.outlook td.gpct { padding-right: 7px; }
table.gt.outlook td.grat { white-space: normal; font-size: 10px; line-height: 11px; max-width: 64px; }   /* 'below average' wraps rather than pushing the column out of the box */