/* Fontokmai — a shared, light interface for observations and forecasts. */
:root{--ink:#1d2b3a;--muted:#647487;--green:#087f80;--accent:#087f80;--line:#e3e9ed;--bg:#f5f7fa;--surface:#fff;--radius:16px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Thonburi","Tahoma",sans-serif;font-synthesis:none;color:var(--ink);background:var(--bg);color-scheme:light;font-size:14px;line-height:1.5}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);min-height:42px;padding:9px 14px;font-size:12px;font-weight:550;transition:background .15s,border-color .15s}button:hover{background:#f0f7f7;border-color:#b6d4d4}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #45a9c1;outline-offset:3px}a{color:var(--accent)}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.45}h2{font-size:18px;margin-bottom:0}p{line-height:1.75}svg{vertical-align:middle}strong{font-weight:700;font-variant-numeric:tabular-nums}input::placeholder{color:#8793a2}select,input{min-width:0}html{scroll-padding-top:20px}.skip-link{position:fixed;top:12px;left:12px;z-index:9999;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip-link:focus{clip-path:none;width:auto;height:auto;padding:12px;background:#fff}
/* Navigation and page identity */
.site-header{height:76px;padding:0 max(28px,calc((100% - 1440px)/2));background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;font-weight:750;font-size:22px;letter-spacing:-.5px;color:var(--ink)}.brand-icon{display:grid;place-items:center;width:42px;height:42px;background:#e7f5f4;color:var(--accent);border-radius:12px}.brand-icon svg{width:28px;height:28px}.brand small{display:block;color:var(--muted);font-size:10px;font-weight:450;letter-spacing:.15px}.header-nav{display:flex;align-items:center;gap:28px}.header-nav a{font-size:12px;text-decoration:none;color:var(--muted);padding:10px 0}.header-nav a:hover{color:var(--accent)}.header-end{display:flex;align-items:center;gap:20px}.source-pill{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.source-pill i{width:6px;height:6px;border-radius:50%;background:#16a28c}.help-link{font-size:11px;text-decoration:none;color:var(--muted)}main{max-width:1496px;padding:28px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.eyebrow{color:var(--accent);font-size:10px;font-weight:650;letter-spacing:.5px;margin:0 0 7px}h1{font-size:32px;font-weight:700;letter-spacing:-.8px;margin-bottom:6px}.page-heading p:not(.eyebrow){font-size:13px;color:var(--muted);margin:0}.update{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 18px}.update-cycle{font-size:11px;color:#42556a}.update small{grid-column:1;font-size:10px;color:var(--muted);max-width:330px}.refresh{grid-row:1/3;grid-column:2;background:#fff;font-size:11px}.refresh span{font-size:18px;vertical-align:middle;margin-right:5px}#message:not(:empty){padding:12px 16px;background:#fff7e8;border:1px solid #f0dfb9;border-radius:10px;color:#86601c;font-size:12px;margin-bottom:18px}
/* Shared filters */
.filter-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px}.filter-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.tabs{display:flex;gap:4px;padding:4px;background:#f1f4f7;border-radius:11px}.tabs button{border:0;background:transparent;color:var(--muted);min-height:38px;padding:8px 18px;white-space:nowrap}.tabs button.active{background:#fff;color:var(--accent);box-shadow:0 1px 5px #182b3c15}.tabs button span{margin-right:5px;font-size:17px;vertical-align:middle}.location-button{background:#f0f9f8;border-color:#d6eae7;color:#137776;font-size:12px}.location-button span{font-size:18px;vertical-align:middle;margin-right:5px}.filter-fields{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(150px,1fr) minmax(180px,1fr) auto;gap:16px;align-items:end}.field label{display:block;font-size:11px;color:#506176;font-weight:550;margin-bottom:7px}.field input,.field select{width:100%;border:1px solid #dfe6eb;border-radius:9px;min-height:44px;padding:10px 12px;background:#fbfcfd;color:var(--ink);font-size:13px}.field select:disabled{background:#f3f5f7;color:#8592a1}.search-wrap{position:relative}.search-wrap input{padding-left:37px}.search-wrap svg{width:17px;height:17px;position:absolute;left:12px;top:14px;fill:none;stroke:#8493a3;stroke-width:1.7}.reset{border-color:transparent;color:var(--muted);font-size:11px}
/* Readable summaries, with status colour confined to a small accent. */
.overview{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;margin:18px 0}.summary-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;gap:15px;align-items:start}.metric-icon{width:36px;height:36px;display:grid;place-items:center;background:#f0f5f8;color:#718598;border-radius:10px;font-size:22px;flex-shrink:0}.primary .metric-icon{background:#e8f6f3;color:var(--accent)}.summary-card span{font-size:12px;color:var(--muted)}.metric-line{display:flex;align-items:baseline;gap:7px;margin:5px 0}.metric-line strong{font-size:32px;line-height:1.2;letter-spacing:-1px}.primary strong{color:var(--accent)}.metric-line small{font-size:11px;color:var(--muted)}.summary-card p{font-size:10px;color:var(--muted);margin:6px 0 0}.freshness .metric-icon{background:#fff6e7;color:#ac792c}.water-mode .overview{grid-template-columns:1fr 1fr}.water-mode .overview .primary{display:none}.water-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.water-summary{background:white;border:1px solid var(--line);border-radius:14px;padding:16px 18px;position:relative}.water-summary:before{content:'';position:absolute;width:4px;height:30px;background:var(--water-fg);left:0;top:20px;border-radius:0 3px 3px 0}.water-summary strong{font-size:28px;line-height:1.3;color:var(--water-fg);display:block}.water-summary span{font-size:12px;font-weight:600;display:block;margin:4px 0}.water-summary small{color:var(--muted);font-size:10px}
/* Collapsible forecast, distinct from measurements. */
.forecast-panel{margin:0 0 22px;padding:16px 20px;background:#f0f6fc;border:1px solid #dce7f2;border-radius:14px;scroll-margin-top:16px}.forecast-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.forecast-heading>div:first-child{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.forecast-badge{font-size:10px;color:#46698b;background:#e0ecf7;padding:5px 8px;border-radius:6px}.forecast-heading h2{font-size:16px;color:#2d4a66}.forecast-actions{display:flex;gap:8px;flex-shrink:0}.forecast-actions button{font-size:11px;color:#406384;border-color:#d2e0ed;background:#ffffff80;min-height:36px}.forecast-empty{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px}.forecast-empty p,.forecast-loading{font-size:12px;color:#536f89;margin:10px 0}.forecast-empty button{white-space:nowrap;font-size:11px}.forecast-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;margin-top:20px}.forecast-date{font-size:11px;color:#5d7590;margin-bottom:8px}.forecast-assessment h3{font-size:22px;color:#294b6b;margin:0 0 10px}.forecast-assessment p:not(.forecast-date){font-size:12px;color:#506d87;margin:7px 0}.forecast-advice{font-size:11px!important}.forecast-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-self:center}.forecast-values>div{background:#fff;border:1px solid #dfe8f0;border-radius:10px;padding:15px 12px}.forecast-values span{display:block;font-size:11px;color:#5d7490}.forecast-values strong{display:block;font-size:23px;line-height:1.5;color:#2c5277;margin-top:8px}.forecast-values small{font-size:10px;font-weight:400}.forecast-values p{font-size:10px;color:#61758b;margin:4px 0 0}.forecast-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.forecast-periods>div{border-top:2px solid #afcce4;padding:12px;background:#ffffff85;border-radius:0 0 8px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}.forecast-periods span{font-size:12px;color:#466782}.forecast-periods span small{display:block;font-size:10px;margin-top:3px;color:#5f7890}.forecast-periods strong{font-size:20px;color:#345777;white-space:nowrap}.forecast-periods strong small{font-size:10px;font-weight:400}.forecast-foot{font-size:10px;color:#5e7389;line-height:1.8;border-top:1px solid #d8e3ed;padding-top:10px}.forecast-foot p{margin:5px 0}.forecast-foot a{color:#426584}.forecast-warning{background:#fff6df;color:#815b1a;border:1px solid #edddb6;border-radius:8px;padding:12px;font-size:12px}
/* Maps and ordinary station lists */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:start}.map-card,.side-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}.map-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}.map-heading .eyebrow{margin-bottom:3px}.map-heading h2{font-size:18px}.icon-button{width:40px;padding:3px;font-size:24px}.map-container{position:relative}#map{height:550px;background:#e5edf0;z-index:0}.map-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:#ffffffed;border:1px solid #e0e7eb;border-radius:24px;padding:8px 14px;font-size:11px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px #21344414;z-index:400}.legend-panel{padding:16px 20px}.legend-title{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.legend-title strong{font-size:12px}.legend-title>span{font-size:10px;color:var(--muted);text-align:right;max-width:60%}.legend{display:flex;flex-wrap:wrap;gap:9px 14px;margin:12px 0}.legend span{display:flex;align-items:center;gap:6px;font-size:11px;color:#52677a}.legend i{width:10px;height:10px;border:1px solid #00000012;border-radius:3px;flex-shrink:0}.map-note{font-size:10px;color:var(--muted);margin:0;line-height:1.8}.list-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:19px 20px 10px}.count-badge{font-size:12px;background:#edf4f6;color:#557483;border-radius:7px;padding:5px 10px;font-weight:650}.list-description{padding:0 20px 14px;font-size:11px;color:var(--muted);margin:0;border-bottom:1px solid var(--line)}#stations{height:535px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c7d4dd transparent}.station{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;width:100%;padding:16px 20px;text-align:left;border:0;border-bottom:1px solid #edf1f4;border-radius:0;min-height:106px}.station:hover{background:#f6fafb}.station-name{font-size:14px;font-weight:650;line-height:1.6;overflow-wrap:anywhere}.station-location{font-size:11px;color:var(--muted);margin-top:3px}.station-value{text-align:right;font-size:22px;font-weight:700;color:var(--accent)}.station-unit{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:3px}.station-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:10px;color:var(--muted)}.badge{font-size:10px;padding:3px 6px;border-radius:5px;color:#287565;background:#eaf6f1;white-space:nowrap}.badge.old{background:#fff4dc;color:#886423}.badge.missing{background:#eef1f4;color:#657487}.more{margin:12px 18px;width:calc(100% - 36px);font-size:12px}.list-foot{font-size:10px;color:var(--muted);text-align:center;margin:12px}.empty-state{padding:40px 20px;text-align:center;font-size:12px;color:var(--muted);line-height:1.8}.empty-state strong{display:block;color:var(--ink);margin-bottom:7px}.detail{padding:20px}.back-button{border:0;background:transparent;color:var(--muted);padding:8px 0;margin-bottom:15px;font-size:12px}.detail h2{font-size:22px;overflow-wrap:anywhere;margin:5px 0 8px}.detail .subtitle{font-size:12px;color:var(--muted)}.detail-value{background:#f2f8f8;border:1px solid #ddecec;border-radius:12px;padding:18px;margin:18px 0}.detail-value>span{display:block;font-size:12px;color:#557779}.detail-value strong{display:inline-block;font-size:36px;letter-spacing:-1px;margin:8px 8px 5px 0;color:var(--accent)}.detail-value small,.detail-value p{font-size:12px;color:#5c767e}.detail-value p{margin:5px 0 0}.detail dl{display:grid;grid-template-columns:90px 1fr;gap:10px;font-size:12px;line-height:1.8}.detail dt{color:var(--muted)}.detail dd{margin:0;overflow-wrap:anywhere}.detail h3{font-size:15px;margin:22px 0 12px}.detail-note{font-size:11px;color:var(--muted)}.detail-forecast{width:100%;background:#f0f6fc;border-color:#dce8f1;color:#496d8b;font-size:12px}.history{max-height:270px;overflow:auto;scrollbar-width:thin}table{border-collapse:collapse;width:100%;font-size:12px}th,td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}th{font-weight:550;color:var(--muted);background:#f8fafb}th:last-child,td:last-child{text-align:right}.history-empty{padding:20px;font-size:12px;color:var(--muted)}.area-stations{max-height:350px;overflow:auto}.area-stations .station{padding:14px 0}
/* River comparison cards */
.water-above,.water-at{--water-bg:#fff0f1;--water-fg:#b23847}.water-near{--water-bg:#fff6e7;--water-fg:#956015}.water-below{--water-bg:#eaf6f2;--water-fg:#20755f}.water-unknown,.water-stale{--water-bg:#edf1f4;--water-fg:#617083}.water-status{display:inline-flex;border-radius:6px;padding:4px 8px;background:var(--water-bg);color:var(--water-fg);font-size:11px;font-weight:650}.station-water{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:8px}.station-water small{font-size:11px;color:var(--muted)}.water-assessment{background:var(--water-bg);border-radius:12px;padding:18px;margin:16px 0;color:var(--water-fg)}.water-assessment p,.water-assessment>span{font-size:12px}.water-assessment strong{font-size:20px}.river-toolbar{display:flex;justify-content:space-between;align-items:center;margin:24px 0 16px}.river-toolbar h2{font-size:21px;letter-spacing:-.4px}.river-toolbar p{font-size:12px;color:var(--muted);margin:5px 0 0}.water-paired{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}.water-paired #mapWorkspace{grid-column:1;grid-row:1;display:block;position:sticky;top:18px;min-width:0}.water-paired #map{height:495px}.water-paired #riverPanel{grid-column:2;grid-row:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.river-list-heading{display:flex;justify-content:space-between;align-items:center;padding:19px 20px 0}.river-list-heading h3{font-size:16px;margin:0}.river-list-heading span{font-size:11px;color:var(--muted)}.river-explainer{font-size:10px;line-height:1.8;color:var(--muted);margin:8px 20px 16px}#riverList{max-height:630px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c7d4dd transparent}.river-card{display:grid;grid-template-columns:minmax(135px,.8fr) minmax(0,1fr);gap:14px;padding:20px;border-top:1px solid var(--line);background:#fff;align-items:center}.river-card:hover{background:#fcfdfd}.river-picture svg{width:100%;height:auto;display:block}.river-info h3{font-size:16px;margin:0 0 3px;overflow-wrap:anywhere}.river-info .eyebrow{font-size:9px;margin-bottom:5px;color:#687e8e}.river-location{font-size:11px;color:var(--muted);margin:0 0 9px}.river-distance{font-size:18px;font-weight:700;color:var(--water-fg);margin:7px 0 10px;letter-spacing:-.3px}.river-values{display:flex;gap:18px;flex-wrap:wrap;margin:0}.river-values dt{font-size:10px;color:var(--muted)}.river-values dd{margin:3px 0;font-size:19px;font-weight:650}.river-values small{font-size:10px;font-weight:400;color:var(--muted)}.river-time{font-size:10px;color:var(--muted);line-height:1.8;margin:7px 0 0}.river-actions{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}.river-actions button{min-height:38px;font-size:11px}.river-details{background:#edf7f7;color:var(--accent);border-color:#d5eaea}.river-details:hover{background:#deeeee}.river-on-map{border-color:transparent;color:#597288}#riverDetailHost .detail:not([hidden]){border-bottom:1px solid var(--line)}
/* Station history dialog */
body.modal-open{overflow:hidden}.water-modal{width:min(940px,calc(100% - 40px));max-height:92dvh;padding:0;border:1px solid #e1e8ed;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 24px 100px #152b4240}.water-modal::backdrop{background:#172b4366;backdrop-filter:blur(4px)}.water-modal-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:22px 28px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:1}.water-modal-heading h2{font-size:23px;letter-spacing:-.4px}.water-modal-heading p:not(.eyebrow){font-size:12px;color:var(--muted);margin:6px 0 0}.water-modal-heading button{flex-shrink:0;font-size:12px;background:#f6f8fa}.water-modal-body{padding:22px 28px}.modal-reading{border:1px solid var(--line);border-left:4px solid var(--water-fg);background:#fff;border-radius:12px;padding:16px 20px}.modal-reading h3{font-size:24px;margin:8px 0;color:var(--water-fg);letter-spacing:-.5px}.modal-reading p{font-size:13px;margin:5px 0}.modal-reading small{font-size:11px;color:var(--muted)}.history-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:end;margin:22px 0 16px}.history-controls label{display:grid;gap:7px;font-size:11px;color:var(--muted)}.history-controls input,.history-controls select{border:1px solid #dbe4eb;border-radius:8px;padding:10px 12px;min-height:42px;background:#fafcfd;color:var(--ink);font-size:12px}.history-controls #historyDates{display:flex;gap:12px;flex-wrap:wrap}.history-chart-scroll{border:1px solid var(--line);border-radius:12px;overflow-x:auto;padding:10px 0;background:#fff}.history-chart-scroll svg{display:block;width:100%}.history-chart-scroll text{font:11px system-ui,sans-serif;fill:#62758a}.history-chart-scroll circle:focus{outline:2px solid var(--accent)}.chart-legend,.history-coverage,.history-footnote{font-size:11px;color:var(--muted);line-height:1.8}.chart-legend{margin:12px 0 6px}.history-coverage{margin:6px 0 12px}.history-metrics{display:flex;gap:30px;background:#f6f9fb;padding:14px 18px;border-radius:10px;font-size:12px;color:var(--muted)}.history-metrics strong{font-size:21px;color:var(--ink);margin:0 5px}.history-table{margin-top:16px;font-size:12px}.history-table summary{cursor:pointer;padding:10px 0;font-weight:550;color:var(--accent)}.history-table .history{max-height:260px}.history-footnote{border-top:1px solid var(--line);padding-top:14px;margin-top:18px;margin-bottom:0}.water-modal .history-empty{padding:32px 16px;background:#f8fafb;border-radius:10px}
/* Supporting information and Leaflet chrome */
.guide{margin-top:24px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:24px}.guide-intro{display:flex;align-items:center;gap:12px}.guide-icon{width:28px;height:28px;display:grid;place-items:center;background:#edf4f7;color:#618094;border-radius:50%}.guide-intro h2{font-size:16px}.guide-intro p{font-size:12px;color:var(--muted);margin:4px 0 0}.guide-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin:20px 0}.guide-points strong{font-size:12px}.guide-points p{font-size:12px;color:var(--muted);margin:7px 0 0;line-height:1.8}.guide details{border-top:1px solid var(--line);padding-top:14px;font-size:11px;color:var(--muted)}.guide summary{cursor:pointer;width:fit-content}.guide details p{margin:12px 0 0}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0 4px;font-size:10px;color:var(--muted)}footer a{text-decoration:none;color:var(--muted)}.footer-brand{font-weight:650;font-size:14px}.leaflet-container{font-family:inherit}.leaflet-popup-content{font-size:12px;line-height:1.8;min-width:190px}.leaflet-popup-content strong{font-size:14px}.popup-value{font-size:24px;font-weight:700;color:var(--accent)}.popup-small{font-size:10px;color:var(--muted)}.leaflet-control-zoom{border:1px solid #d5e0e5!important;box-shadow:0 2px 7px #18324712!important}.leaflet-control-zoom a{color:#36536a!important}.leaflet-tile-pane{filter:saturate(.6) brightness(1.03)}.leaflet-tooltip{font-size:11px}
/* Responsive layouts */
@media(max-width:1200px){.header-nav{gap:18px}.help-link{display:none}.update{display:flex;flex-direction:column;align-items:flex-end;gap:5px;max-width:290px}.update small{text-align:right}.page-heading{align-items:start}.filter-fields{grid-template-columns:1.4fr 1fr 1fr}.reset{grid-column:1/-1;justify-self:end;min-height:26px;padding:2px 5px;margin-top:-5px}.metric-icon{display:none}.workspace{grid-template-columns:minmax(0,1fr) 300px}.river-card{grid-template-columns:minmax(0,1fr)}.river-picture{width:100%;max-width:270px;margin:auto}.forecast-grid{grid-template-columns:1fr;gap:16px}}
@media(max-width:850px){.site-header{padding:0 20px}.header-nav{display:none}main{padding:22px 20px}.filter-fields{grid-template-columns:1fr 1fr}.search-field{grid-column:1/-1}.overview{gap:10px}.summary-card{padding:16px}.water-overview{gap:10px}.water-summary{padding:14px}.workspace{grid-template-columns:minmax(0,1fr)}#stations{height:380px}#map{height:450px}.water-paired{display:flex;flex-direction:column;gap:18px}.water-paired #mapWorkspace{position:static;order:0;width:100%}.water-paired #riverPanel{order:1;width:100%}.water-paired #map{height:350px}#riverList{max-height:750px}.river-card{grid-template-columns:minmax(150px,.8fr) minmax(0,1fr)}.river-picture{max-width:none}.forecast-periods>div{display:block}.forecast-periods strong{display:block;margin-top:6px}.guide-points{gap:20px}.detail{scroll-margin-top:16px}.forecast-actions{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:560px){.site-header{height:68px;padding:0 16px;gap:12px}.brand{font-size:20px;gap:9px}.brand-icon{width:36px;height:36px;border-radius:10px}.brand-icon svg{width:24px;height:24px}.brand small{font-size:9px}.source-pill{font-size:9px}.header-end{gap:0}main{padding:20px 14px}.page-heading{display:block;margin-bottom:18px}h1{font-size:28px}.page-heading p:not(.eyebrow){font-size:12px}.update{display:grid;grid-template-columns:1fr auto;max-width:none;gap:3px 10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);align-items:center}.update-cycle{font-size:10px}.update small{text-align:left;font-size:9px}.refresh{font-size:10px;padding:8px 10px}.filter-panel{padding:12px}.filter-top{flex-wrap:wrap;gap:10px;margin-bottom:12px}.tabs{width:100%;gap:2px}.tabs button{flex:1;font-size:11px;padding:8px 7px}.tabs button span{font-size:15px;margin-right:3px}.location-button{font-size:11px;min-height:34px;padding:6px 9px;margin-left:auto}.filter-fields{gap:12px 10px}.field label{font-size:10px}.field input,.field select{font-size:12px;padding:10px}.search-wrap input{padding-left:34px}.reset{font-size:10px}.overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:14px 0}.summary-card{padding:12px 10px;display:block}.summary-card span{display:block;font-size:10px;min-height:30px}.metric-line{flex-wrap:wrap;gap:3px}.metric-line strong{font-size:27px}.metric-line small{font-size:9px}.summary-card p{font-size:9px}.freshness p{display:none}.water-mode .overview .summary-card{padding:13px}.water-mode .overview .summary-card span{min-height:0}.water-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}.water-summary{padding:13px 16px}.water-summary strong{font-size:26px}.water-summary span{font-size:11px}.water-summary small{font-size:9px}.forecast-panel{padding:13px 14px;margin-bottom:18px}.forecast-heading{gap:10px}.forecast-heading>div:first-child{gap:5px;display:block}.forecast-badge{font-size:9px;padding:3px 6px;display:inline-block;margin-bottom:5px}.forecast-heading h2{font-size:15px}.forecast-actions{max-width:105px}.forecast-actions button{font-size:10px;padding:6px 8px;min-height:34px}.forecast-empty{display:block}.forecast-empty p{font-size:11px}.forecast-empty button{margin-top:5px}.forecast-assessment h3{font-size:19px}.forecast-values{gap:6px}.forecast-values>div{padding:12px 8px}.forecast-values span{font-size:10px;min-height:30px}.forecast-values strong{font-size:19px;overflow-wrap:anywhere}.forecast-values p{font-size:9px}.forecast-periods{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.forecast-periods>div{display:flex}.forecast-periods strong{margin:0}.forecast-foot{font-size:10px}.river-toolbar{margin:20px 0 13px}.river-toolbar h2{font-size:19px}.river-toolbar p{font-size:11px}.map-heading{padding:15px 16px}.map-heading h2{font-size:16px}.map-heading .eyebrow{font-size:9px}.legend-panel{padding:14px 16px}.legend-title{display:block}.legend-title>span{display:block;text-align:left;max-width:none;margin-top:5px}.legend{gap:9px 12px}.legend span{font-size:10px}.map-note{font-size:10px}.map-hint{font-size:10px;padding:7px 12px}#map{height:380px}.water-paired #map{height:320px}.river-list-heading{padding:17px 16px 0}.river-explainer{margin:8px 16px 14px}.river-card{grid-template-columns:minmax(0,1fr);padding:18px 16px;gap:14px}.river-picture{max-width:320px}.river-info h3{font-size:18px}.river-info .eyebrow{font-size:10px}.river-distance{font-size:20px}.river-values dd{font-size:21px}.river-actions{justify-content:stretch}.river-actions button{flex:1;min-height:42px}#riverList{max-height:none}.station{padding:15px 16px}.list-heading{padding:17px 16px 10px}.list-description{padding:0 16px 12px}.station-name{font-size:13px}.station-value{font-size:21px}.station-bottom{font-size:9px}.badge{font-size:9px}.detail{padding:18px 16px}.detail dl{grid-template-columns:95px 1fr}.guide{padding:20px 16px}.guide-points{grid-template-columns:1fr;gap:18px}.guide-points p{font-size:11px}.guide details{font-size:10px}footer{flex-wrap:wrap;justify-content:flex-start;gap:10px;font-size:9px}.footer-brand{width:100%}.water-modal{width:calc(100% - 16px);max-height:94dvh;border-radius:14px}.water-modal-heading{padding:16px;gap:10px}.water-modal-heading h2{font-size:19px}.water-modal-heading button{font-size:11px;padding:7px 9px}.water-modal-heading p:not(.eyebrow){font-size:11px}.water-modal-body{padding:16px}.modal-reading{padding:14px}.modal-reading h3{font-size:21px}.modal-reading p{font-size:12px}.modal-reading small{font-size:10px}.history-controls{gap:12px;margin:18px 0 14px}.history-controls input{max-width:140px;padding:9px}.history-chart-scroll text{font-size:11px}.history-chart-scroll{padding:14px 0}.history-metrics{flex-wrap:wrap;gap:8px;padding:12px}.history-metrics strong{font-size:20px}.history-footnote,.history-coverage,.chart-legend{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* One summary row in water mode, rather than two competing dashboards. */
.water-mode .summary-block{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:18px 0}.water-mode .overview,.water-mode .water-overview{display:contents}.water-mode .summary-card{padding:16px;display:block}.water-mode .summary-card .metric-icon{display:none}.water-mode .summary-card .metric-line strong{font-size:28px}.water-mode .summary-card span{font-size:11px}.water-mode .summary-card p{font-size:10px}.water-mode .water-summary{padding:16px}.water-mode .river-toolbar{margin:20px 0 14px}
@media(max-width:1100px){.water-mode .summary-block{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.water-mode .summary-block{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.water-mode .summary-card,.water-mode .water-summary{padding:12px 14px}.water-mode .summary-card span{min-height:0}.water-mode .summary-card p{margin:3px 0}.water-mode .water-summary small{display:none}}
.map-actions{display:flex;align-items:center;gap:8px}.cctv-toggle{font-size:12px;min-height:38px;padding:7px 12px;white-space:nowrap}.cctv-toggle.active{background:var(--accent);border-color:var(--accent);color:#fff}.cctv-toggle:disabled{opacity:.65;cursor:not-allowed}.cctv-marker{display:grid;place-items:center;background:#1d2b3a;color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #1d2b3a55}.cctv-marker svg{width:15px;height:15px}.cctv-popup img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#e5edf0;border-radius:8px;margin-bottom:8px}.cctv-popup p{margin:6px 0}.cctv-link{display:inline-block;font-weight:650;color:var(--accent)}
@media(max-width:560px){.map-heading{flex-wrap:wrap;gap:8px}.cctv-toggle{font-size:11px;min-height:34px;padding:6px 10px}}

.cctv-available{background:#087e8b;color:#fff}.cctv-unavailable{background:#64748b;color:#fff;border-style:dashed}.cctv-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:12px;color:#475569}.cctv-legend[hidden]{display:none}.cctv-legend span{display:flex;align-items:center;gap:6px}.cctv-key{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1}