@font-face{font-family:Manrope;src:url('manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('manrope-semibold.ttf') format('truetype');font-weight:600 700;font-display:swap}@font-face{font-family:Manrope;src:url('manrope-extrabold.ttf') format('truetype');font-weight:800;font-display:swap}@font-face{font-family:'JetBrains Mono';src:url('jetbrains-medium.ttf') format('truetype');font-weight:500 700;font-display:swap}
:root{color-scheme:dark;--v4-bg:#0a172e;--v4-map-bg:#0c1b36;--v4-panel:#11274b;--v4-panel-alt:#0c243f;--v4-input:#0a1830;--v4-border:#294261;--v4-text:#e3ebf8;--v4-muted:#a6b6ce;--v4-faint:#7f94b2;--v4-accent:#31bbee;--v4-accent-text:#07213a;--v4-land:#183a65;--v4-coast:#315985;--v4-typical:#4cc38a;--v4-elevated:#ffcc3d;--v4-rising:#b9e8ff;--v4-above:#ff9142;--v4-high:#ff5b63;--v4-rain:#3c86ff;--v4-sewage:#cf8b52;--v4-alert:#ffbe37;--v4-low:#3e638f;--v4-shadow:0 14px 44px #0003;--v4-font:Manrope,Arial,sans-serif}
:root[data-theme=light]{color-scheme:light;--v4-bg:#f3f6fb;--v4-map-bg:#d7e3f2;--v4-panel:#fff;--v4-panel-alt:#ffffffeb;--v4-input:#f3f6fb;--v4-border:#d0d9e6;--v4-text:#123051;--v4-muted:#536581;--v4-faint:#71829c;--v4-accent:#087fda;--v4-accent-text:#fff;--v4-land:#f6f9fc;--v4-coast:#8ea9c8;--v4-typical:#2e8f5f;--v4-elevated:#cf8f00;--v4-rising:#2173b8;--v4-above:#e2670c;--v4-high:#c81e2a;--v4-rain:#2873d8;--v4-sewage:#6b4423;--v4-alert:#dc8900;--v4-low:#bfcee0;--v4-shadow:0 14px 34px #18345224}
#home-v4{margin:0;background:var(--v4-bg);color:var(--v4-text);font-family:var(--v4-font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}#home-v4 *{box-sizing:border-box}#home-v4 [hidden]{display:none!important}#home-v4 button,#home-v4 input{font:inherit}#home-v4 button,#home-v4 a{-webkit-tap-highlight-color:transparent}#home-v4 button{cursor:pointer}#home-v4 a{color:inherit;text-decoration:none}#home-v4 a:hover{text-decoration:underline}#home-v4 button:focus-visible,#home-v4 a:focus-visible,#home-v4 input:focus-visible{outline:3px solid var(--v4-accent);outline-offset:4px}
/* The map is a tabindex=0 region, and both Chromium and WebKit promote an already-focused element
   to :focus-visible on ANY keypress and then hold it there through every later mouse click — so
   one arrow key, or Escape closing a gauge card (which focuses the map back), left a permanent
   blue box round the map. The page decides instead: the ring is on while the keyboard is driving
   and off the moment a pointer touches it. */
#v4-map:focus,#v4-map:focus-visible{outline:none}
#v4-map[data-keyboard]{outline:2px solid var(--v4-accent);outline-offset:-2px}#home-v4 button{color:inherit}#home-v4 h1,#home-v4 h2,#home-v4 p{margin:0}#home-v4 h1,#home-v4 h2{font-weight:800}#home-v4 .v4-sr,.v4-symbols{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.v4-skip{position:absolute;top:-90px;z-index:100;background:var(--v4-accent);color:var(--v4-accent-text)!important;padding:14px 24px}.v4-skip:focus{top:8px}.v4-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.v4-header{height:76px;padding:0 32px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--v4-border);position:relative;z-index:30;background:var(--v4-bg)}.v4-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;font-size:23px;font-weight:800;letter-spacing:-.5px}.v4-brand img{width:38px;height:38px;object-fit:contain}.v4-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:1;white-space:nowrap;font-weight:600;font-size:15px}.v4-search{position:relative;display:flex;align-items:center;gap:10px;width:320px;flex-shrink:0;border:1px solid var(--v4-border);border-radius:13px;padding:11px 15px;background:var(--v4-panel);color:var(--v4-faint)}.v4-search input{border:0;min-width:0;width:100%;color:var(--v4-text);background:transparent;font-size:15px;outline:none}.v4-search input::placeholder{color:var(--v4-faint)}.v4-search .v4-icon{width:17px}.v4-search-results{position:absolute;top:calc(100% + 9px);left:0;width:360px;max-height:440px;overflow:auto;border:1px solid var(--v4-border);border-radius:12px;background:var(--v4-panel);box-shadow:var(--v4-shadow);z-index:80}.v4-search-result{display:block;width:100%;padding:13px 16px!important;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--v4-border);font-size:14px;color:var(--v4-text)}.v4-search-result:hover{background:var(--v4-input)}.v4-search-result small{display:block;color:var(--v4-muted);font-size:12px}.v4-themes{display:flex;align-items:center;border:1px solid var(--v4-border);background:var(--v4-panel);padding:3px;border-radius:30px;flex-shrink:0}.v4-themes button{border:0;background:transparent;border-radius:24px;min-width:37px;height:31px;padding:0 10px;font-size:12px;font-weight:800;color:var(--v4-muted)}.v4-themes button[aria-pressed=true]{background:var(--v4-accent);color:var(--v4-accent-text)}.v4-themes .v4-icon{width:16px;height:16px}.v4-login{font-size:14px;font-weight:600;white-space:nowrap}.v4-button{display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--v4-accent);color:var(--v4-accent-text)!important;border-radius:10px;padding:13px 18px;font-weight:800!important;white-space:nowrap;text-decoration:none!important}.v4-button:hover{filter:brightness(1.07)}.v4-header-signup{font-size:14px;flex-shrink:0}.v4-menu{display:none}
.v4-warning-strip,.v4-weather-strip{padding:17px 32px;display:flex;align-items:center;gap:16px;font-size:14px;background:#ffbe371d;color:#ffcb64;border-bottom:1px solid #ffbe3738;position:relative;z-index:20}.v4-warning-strip>p,.v4-weather-strip>p{flex:1}.v4-warning-strip strong{font-weight:800}.v4-warning-strip a,.v4-weather-strip a{font-weight:700;white-space:nowrap}.v4-warning-strip .v4-strip-meta{font-size:13px;margin-left:auto}.v4-warning-strip[data-level=warning],.v4-warning-strip[data-level=severe]{background:#b91c1c;color:#fff;border-color:#d84a4a}.v4-warning-strip[data-level=severe]>.v4-icon{filter:drop-shadow(0 0 7px #ffb7b7);animation:v4-severe-light 2.8s ease-in-out infinite}.v4-warning-strip[data-level=unknown]{background:var(--v4-panel);color:var(--v4-muted);border-color:var(--v4-border)}.v4-weather-strip{padding-top:12px;padding-bottom:12px}.v4-storm-chip{display:flex;gap:8px;align-items:center;border-radius:30px;background:#ffffff17;padding:6px 14px}.v4-weather-square{width:12px;height:12px;border-radius:3px;background:#ffb222;flex:none}:root[data-theme=light] .v4-warning-strip[data-level=alert],:root[data-theme=light] .v4-weather-strip{background:#fff4d6;color:#805000}.v4-stale-note{font-size:12px;font-weight:400;opacity:.85}
.v4-stage{position:relative;min-height:740px;height:740px;max-height:980px;background:var(--v4-map-bg);overflow:hidden}.v4-live{position:absolute;left:32px;right:32px;top:20px;display:flex;align-items:center;gap:9px;color:var(--v4-muted);font-size:12px;z-index:7;pointer-events:none}.v4-live-dot{width:9px;height:9px;background:#2cd2a0;border-radius:50%;box-shadow:0 0 0 5px #2cd2a020}.v4-live[data-stale=true] .v4-live-dot{background:#8da0b8;box-shadow:0 0 0 5px #8da0b820}.v4-view-switch{display:flex;position:absolute;left:50%;transform:translateX(-50%);border:1px solid var(--v4-border);border-radius:7px;overflow:hidden;pointer-events:auto;background:var(--v4-bg)}.v4-view-switch a{padding:4px 13px;font-size:12px;font-weight:700;color:var(--v4-muted)}.v4-view-switch a:hover{background:var(--v4-panel-alt);text-decoration:none}#home-v4 .v4-view-switch a[aria-current=page]{background:var(--v4-accent);color:var(--v4-accent-text)}.v4-view-switch a[aria-current=page]{background:var(--v4-panel);color:var(--v4-accent)}.v4-briefing{position:absolute;left:32px;top:64px;width:350px;z-index:6;pointer-events:none}.v4-briefing>*{pointer-events:auto}.v4-eyebrow{color:var(--v4-accent);text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:1.05px}.v4-briefing #v4-headline{font-size:29px;line-height:1.18;letter-spacing:-.7px;margin:9px 0 16px!important;text-wrap:balance}.v4-summary{display:none;color:var(--v4-muted);font-size:14px}.v4-metrics{display:grid;gap:9px}.v4-metric{display:flex;align-items:center;gap:12px;text-align:left;background:var(--v4-panel-alt);border:1px solid var(--v4-border);border-radius:12px;padding:13px 14px;min-height:69px;box-shadow:0 1px 1px #0001}.v4-metric:hover{border-color:var(--v4-accent)}.v4-dot{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;background:var(--v4-typical)}.v4-dot.typical{background:var(--v4-typical)}.v4-dot.rising{background:var(--v4-rising)}.v4-dot.high{background:var(--v4-high)}
.v4-dot.above{background:var(--v4-above)}.v4-dot.rain{background:var(--v4-rain)}.v4-dot.sewage{background:var(--v4-sewage)}.v4-dot.alert{background:var(--v4-alert)}.v4-dot.low{background:var(--v4-low)}
.v4-dot.elevated{background:var(--v4-elevated)}
.v4-dot.unknown{background:var(--v4-faint)}
.v4-dot.pulse{background:transparent;box-shadow:0 0 0 1.5px var(--v4-elevated) inset;animation:v4-legend-pulse 3.5s ease-out infinite}
@keyframes v4-legend-pulse{0%{transform:scale(.6);opacity:.6}60%{transform:scale(1);opacity:1}100%{transform:scale(1.25);opacity:0}}.v4-dot.ring{border:1.5px dashed var(--v4-alert);background:transparent;width:12px;height:12px}.v4-metric-number{min-width:45px;font-family:'JetBrains Mono',monospace;font-size:23px;letter-spacing:-1px;line-height:1}.v4-metric-copy{flex:1;min-width:0;font-size:13px;line-height:1.35}.v4-metric-copy strong{display:block;font-weight:700}.v4-metric-copy>span{display:block;color:var(--v4-muted);margin-top:2px}.v4-switch{width:34px;height:20px;border-radius:20px;background:var(--v4-accent);flex:none;position:relative}.v4-switch:after{content:"";position:absolute;width:14px;height:14px;top:3px;right:3px;background:var(--v4-input);border-radius:50%;transition:transform .15s}.v4-metric[aria-pressed=false] .v4-switch{background:var(--v4-border)}.v4-metric[aria-pressed=false] .v4-switch:after{transform:translateX(-14px);background:var(--v4-muted)}.v4-legend{display:flex;flex-wrap:wrap;gap:6px 13px;font-size:11px;color:var(--v4-muted);margin-top:15px}.v4-legend>span{display:flex;align-items:center;gap:5px}.v4-legend .v4-dot{width:8px;height:8px}
.v4-map-region{position:absolute;top:0;bottom:0;left:27%;right:var(--v4-map-r,22%);z-index:2}.v4-map{height:100%;width:100%;position:relative;touch-action:pan-y;cursor:grab;overflow:hidden}.v4-map.is-dragging{cursor:grabbing}.v4-map-svg{display:block;width:100%;height:100%;overflow:visible}.v4-map-loading{position:absolute;left:50%;bottom:75px;transform:translateX(-50%);background:var(--v4-bg);border:1px solid var(--v4-border);border-radius:30px;padding:7px 14px;font-size:12px;color:var(--v4-muted);white-space:nowrap;max-width:95%}.v4-coast-path{fill:var(--v4-land);stroke:var(--v4-coast);stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}.v4-settlement{pointer-events:none}.v4-settlement-dot{fill:var(--v4-coast)}.v4-settlement-name{font-family:var(--v4-font);font-size:10px;font-weight:700;fill:var(--v4-muted);stroke:var(--v4-map-bg);stroke-width:3.2;stroke-linejoin:round;paint-order:stroke;dominant-baseline:middle}.v4-settlement[data-tier="2"] .v4-settlement-name{font-size:10.5px;fill:var(--v4-text)}.v4-settlement[data-tier="1"] .v4-settlement-name{font-size:11.5px;font-weight:800;letter-spacing:.2px;fill:var(--v4-text)}.v4-settlement[data-tier="1"] .v4-settlement-dot{fill:var(--v4-text)}:root[data-theme=light] .v4-settlement-name{stroke:#fff;stroke-width:3.4}.v4-gauge{fill:var(--v4-typical);opacity:.5}.v4-gauge[data-status=unknown]{fill:var(--v4-faint);opacity:.34}.v4-gauge[data-status=low]{fill:var(--v4-low);opacity:.65}.v4-gauge[data-status=elevated]{fill:var(--v4-elevated);opacity:.95}.v4-gauge[data-status=high]{fill:var(--v4-above);stroke:#fff;stroke-width:1;opacity:1;vector-effect:non-scaling-stroke}
/* Two rungs inside "above its typical high", the same split the station chart and app.js already draw:
   above typical is orange, well above typical is red. */
.v4-gauge[data-status=high][data-severe]{fill:var(--v4-high)}
.v4-gauge-halo{fill:var(--v4-above)}
.v4-marker[data-severe] .v4-gauge-halo{fill:var(--v4-high)}
.v4-pulse-ring[data-status=high]{stroke:var(--v4-above)}
.v4-pulse-ring[data-status=high][data-severe]{stroke:var(--v4-high)}
.v4-dot.above{background:var(--v4-above)}.v4-marker{cursor:pointer;pointer-events:all}.v4-marker:hover .v4-gauge,.v4-marker:focus .v4-gauge{stroke:var(--v4-text);stroke-width:2;opacity:1}.v4-gauge-halo{opacity:.14}.v4-pulse-ring{fill:none;stroke:var(--v4-high);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:v4-pulse 3.5s ease-out infinite;animation-delay:var(--delay,0s);vector-effect:non-scaling-stroke}
.v4-pulse-ring[data-status=elevated]{stroke:var(--v4-elevated)}
.v4-pulse-ring[data-status=typical]{stroke:var(--v4-typical)}
.v4-pulse-ring[data-status=low]{stroke:var(--v4-low)}/* Rainfall by shade, not by size: five steps from barely wet to exceptional. The old wide
   translucent discs merged into one blue mass over half the country on any wet day. The hairline
   keeps a cluster of gauges reading as gauges rather than as one blob. */
.v4-rain-dot{fill:var(--v4-rain);stroke:var(--v4-map-bg);stroke-width:.45;vector-effect:non-scaling-stroke}
[data-rain="1"] .v4-rain-dot{opacity:.22}
[data-rain="2"] .v4-rain-dot{opacity:.40}
[data-rain="3"] .v4-rain-dot{opacity:.62;fill:#2f74d0}
[data-rain="4"] .v4-rain-dot{opacity:.85;fill:#1d55a8}
[data-rain="5"] .v4-rain-dot{opacity:1;fill:#123a7d}
[data-rain="6"] .v4-rain-dot{opacity:1;fill:#3a1d6e}
:root[data-theme=dark] [data-rain="3"] .v4-rain-dot{fill:#5b9dff}
:root[data-theme=dark] [data-rain="4"] .v4-rain-dot{fill:#8fc0ff}
:root[data-theme=dark] [data-rain="5"] .v4-rain-dot{fill:#cfe4ff}
:root[data-theme=dark] [data-rain="6"] .v4-rain-dot{fill:#f0e4ff}.v4-rain-ripple{fill:none;stroke:var(--v4-rain);stroke-width:1;opacity:.45;animation:v4-rain 4.5s ease-out infinite;transform-box:fill-box;transform-origin:center;animation-delay:var(--delay,0s)}.v4-rain-drop{stroke:#a2d1ff;stroke-width:1;opacity:.6;animation:v4-drop 1.8s linear infinite;animation-delay:var(--delay,0s)}.v4-warning-area{fill:#ffbe3710;stroke:var(--v4-alert);stroke-dasharray:3 3;stroke-width:1.2;vector-effect:non-scaling-stroke}.v4-warning-area[data-severity="1"],.v4-warning-area[data-severity="2"]{fill:#ff4d5530;stroke:#ff555e;stroke-dasharray:none}.v4-warning-area[data-severity="1"]{stroke:#fff;stroke-width:1.7}.v4-warning-outline{fill:#ffbe3729;stroke:var(--v4-alert);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer;pointer-events:all}.v4-warning-outline[data-severity="2"]{fill:#ff4d5540;stroke:#ff555e}.v4-warning-outline[data-severity="1"]{fill:#ff4d5559;stroke:#fff;stroke-width:1.4}.v4-warning-outline:hover{fill-opacity:.9}.v4-sewage-point{fill:var(--v4-sewage);stroke:var(--v4-map-bg);stroke-width:.9;vector-effect:non-scaling-stroke}.v4-sewage-ripple{fill:none;stroke:var(--v4-sewage);stroke-width:1.5;opacity:.7;animation:v4-sewage 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;animation-delay:var(--delay,0s);vector-effect:non-scaling-stroke}
.v4-sewage-glow{fill:var(--v4-sewage);opacity:.13}
/* An overflow darkens the longer it has been discharging: ten minutes and six days both read
   "discharging" in the feed, and that is the difference worth seeing on a live map. */
[data-spell="1"] .v4-sewage-glow{opacity:.10}
[data-spell="2"] .v4-sewage-glow{opacity:.15}
[data-spell="3"] .v4-sewage-glow{opacity:.22}
[data-spell="4"] .v4-sewage-glow{opacity:.30}
[data-spell="5"] .v4-sewage-glow{opacity:.38}
[data-spell="1"] .v4-sewage-point{opacity:.62}
[data-spell="2"] .v4-sewage-point{opacity:.76}
[data-spell="3"] .v4-sewage-point{opacity:.88}
[data-spell="4"] .v4-sewage-point{opacity:1}
[data-spell="5"] .v4-sewage-point{opacity:1;fill:#4a2a12}
[data-spell="1"] .v4-sewage-ripple{opacity:.42}
[data-spell="5"] .v4-sewage-ripple{opacity:.9;stroke-width:2}
:root[data-theme=dark] [data-spell="5"] .v4-sewage-point{fill:#f0c79b}.v4-sewage-stopped{fill:none;stroke:var(--v4-sewage);stroke-width:1.4;opacity:.62;vector-effect:non-scaling-stroke}
/* Detail layers: recorded outlines (EA, OGL), community reports and the EA raster planning frames. */
.v4-flood-outline{fill:#3b82f6;fill-opacity:.28;stroke:#1d4ed8;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.v4-community-outline{fill:#14b8a6;fill-opacity:.3;stroke:#0f766e;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.v4-community-outline[data-quality=unverified]{stroke-dasharray:5 4}
.v4-community-depth{fill:#087d80;stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke;pointer-events:none}
.v4-community-summary{fill:none;stroke:#397891;stroke-width:2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:none}
.v4-raster-frame{pointer-events:none;opacity:.55}
.v4-raster-frame[data-raster=surface]{opacity:.45}
.v4-layer-option small{display:block;font-size:11px;font-weight:400;color:var(--v4-faint)}
.v4-layer-note{font-size:12px;line-height:1.5;color:var(--v4-muted);margin:8px 0 0}
.v4-layer-note:empty{display:none}
/* Radar and Brief are views of this page; Map leaves for the full Leaflet map, so it is marked. */
.v4-view-switch .v4-view-away{position:relative;padding-right:22px}
.v4-view-switch .v4-view-away:after{content:'';position:absolute;right:8px;top:50%;width:7px;height:7px;margin-top:-5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.65}
.v4-search-head{margin:6px 0 2px;padding:0 13px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-faint)}
.v4-search-result .v4-icon{width:15px;height:15px;vertical-align:-2px;margin-right:6px;color:var(--v4-faint)}.v4-prediction-point{fill:none;stroke:var(--v4-rising);stroke-width:1.4;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}.v4-map-paused .v4-pulse-ring,.v4-map-paused .v4-rain-ripple,.v4-map-paused .v4-rain-drop,.v4-map-paused .v4-sewage-ripple,.v4-map-paused .v4-warning-strip>.v4-icon{animation:none!important}.v4-map-paused .v4-pulse-ring{opacity:.3}.v4-popup{position:absolute;left:5%;top:35%;width:310px;max-width:calc(100% - 20px);padding:18px 18px 16px;border:1px solid #d8dfeb;border-radius:13px;background:#fff;color:#143353;box-shadow:0 15px 50px #0003;z-index:10;font-size:13px;cursor:auto}.v4-popup-close{position:absolute;right:8px;top:8px;width:26px;height:26px;border:0;background:transparent;color:#71829c!important}.v4-popup-close .v4-icon{width:15px}.v4-popup small{color:#68758a;display:block;padding-right:12px}.v4-popup h2{font-size:17px;line-height:1.3;margin:5px 0 10px!important;padding-right:10px}.v4-popup .v4-reading{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:9px 0}.v4-popup .v4-reading strong{font-family:'JetBrains Mono',monospace;font-size:27px;line-height:1.2}.v4-popup .v4-reading span{font-weight:800;color:#d93936}.v4-popup p{color:#65728a;line-height:1.5;font-size:12px}.v4-popup a{display:inline-block;margin-top:9px;color:#1176c2!important;font-weight:800}.v4-popup .v4-popup-spark{width:100%;height:47px;margin-top:8px;overflow:visible}/* ── the gauge card (design: docs/design/gauge-card.html) ────────────────────────────────
   One severity variable per card: the rail, the state dot, the range marker and the trend chip
   all inherit --v4-sev, so the card can never disagree with the dot that opened it. */
#v4-popup[hidden]{display:none!important}
#v4-popup[data-type=station]{padding:0;overflow:hidden;width:342px;top:11%;max-height:calc(100% - 120px);display:flex;flex-direction:column;--v4-sev:var(--v4-typical);--v4-sev-soft:#e4f5ec;--v4-thr:#96590a}
#v4-popup[data-type=station][data-sev=high]{--v4-sev:#c05708;--v4-sev-soft:#fdeee2}
#v4-popup[data-type=station][data-sev=severe]{--v4-sev:#a8121d;--v4-sev-soft:#fbe9e9}
#v4-popup[data-type=station][data-sev=elevated]{--v4-sev:#96590a;--v4-sev-soft:#fbf0dc}
#v4-popup[data-type=station][data-sev=typical]{--v4-sev:#1c7a5b;--v4-sev-soft:#e4f5ec}
#v4-popup[data-type=station][data-sev=low]{--v4-sev:#4e6e86;--v4-sev-soft:#eaf0f5}
#v4-popup[data-type=station][data-sev=unknown]{--v4-sev:#7d8b9e;--v4-sev-soft:#eef1f6}
#v4-popup[data-type=station] .v4-popup-close{top:12px;right:10px;z-index:2}
.v4-pc-rail{height:3px;background:var(--v4-sev)}
.v4-pc-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.v4-pc-head{display:flex;align-items:flex-start;gap:4px;padding-right:44px}
.v4-pc-titles{flex:1;min-width:0}
.v4-pc-river{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#68758a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-pc-place{font-size:20px!important;font-weight:800;letter-spacing:-.015em;margin:2px 0 0!important;padding:0!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-pc-warn{display:flex;gap:9px;align-items:flex-start;background:var(--v4-sev-soft);border-radius:10px;padding:9px 11px;border:1px solid var(--v4-sev);margin:0!important;text-decoration:none}
#v4-popup .v4-pc-warn{color:inherit!important}
.v4-pc-warn .v4-icon{width:16px;height:16px;flex:none;color:var(--v4-sev);margin-top:1px}
.v4-pc-warn b{display:block;font-size:12px;font-weight:800;color:var(--v4-sev)}
.v4-pc-warn>span>span{display:block;font-size:11px;color:#4a5a70;line-height:1.4;margin-top:1px}
.v4-pc-warn[data-severity="1"],.v4-pc-warn[data-severity="2"]{--v4-sev:#a32320;--v4-sev-soft:#fae6e4}
.v4-pc-warn[data-severity="3"]{--v4-sev:#96590a;--v4-sev-soft:#fbefdb}
.v4-pc-status{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:#68758a}
.v4-pc-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--v4-sev)}
.v4-pc-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.v4-pc-sep{color:#c8d2e0}
.v4-pc-reading{display:flex;align-items:baseline;gap:9px}
.v4-pc-value{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:40px;font-weight:500;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.v4-pc-unit{font-size:14px;font-weight:600;color:#3c5060}
.v4-pc-unit small{display:block;font-size:10px;font-weight:600;color:#68758a;letter-spacing:.02em;white-space:nowrap}
.v4-pc-trend{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:#eef2f7;color:#3c5060;white-space:nowrap}
.v4-pc-trend.hot{background:var(--v4-sev-soft);color:var(--v4-sev)}
.v4-pc-trend .v4-icon{width:11px;height:11px}
.v4-pc-range{display:flex;flex-direction:column;gap:6px}
.v4-pc-bar{position:relative;height:8px;border-radius:4px;background:#eef2f7;border:1px solid #e2e9f1}
.v4-pc-band{position:absolute;top:-1px;bottom:-1px}
.v4-pc-band.ok{background:#1c7a5b;opacity:.2}
.v4-pc-band.amber{background:#96590a;opacity:.24}
.v4-pc-band.red{background:#c05708;opacity:.26}
.v4-pc-band.severe{background:#a8121d;opacity:.32;border-radius:0 4px 4px 0}
.v4-pc-marker{position:absolute;top:-5px;width:3px;height:18px;border-radius:2px;background:var(--v4-sev);box-shadow:0 0 0 2px #fff}.v4-pc-record{position:absolute;top:-3px;width:2px;height:14px;border-radius:1px;background:#5a6b82;box-shadow:0 0 0 1.5px #fff}
.v4-pc-scale{display:flex;justify-content:space-between;gap:8px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:#68758a;font-variant-numeric:tabular-nums}
.v4-pc-scale b{font-weight:500;color:#3c5060}
.v4-pc-chart{display:flex;flex-direction:column;gap:5px}
.v4-pc-chart-head{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#68758a}
.v4-pc-chart-head span:last-child{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:0;text-transform:none;font-weight:500}
.v4-pc-spark{display:block;width:100%;height:62px;overflow:visible}
/* The datum line, the zone above it and its label describe the THRESHOLD, so they keep a
   fixed warning colour. They used to inherit --v4-sev, which paints the above-typical zone
   green on a calm gauge — the card's own status colouring the thing it is measured against.
   The marker and the last-reading dot below DO stay --v4-sev: they are the current level. */
.v4-pc-over{fill:var(--v4-thr);opacity:.09}
.v4-pc-area{fill:#1176c2;opacity:.1}
.v4-pc-datum{stroke:var(--v4-thr);stroke-width:1;stroke-dasharray:3 3;opacity:.85;vector-effect:non-scaling-stroke}
.v4-pc-line{fill:none;stroke:#1176c2;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.v4-pc-last{fill:#fff;stroke:var(--v4-sev);stroke-width:2;vector-effect:non-scaling-stroke}
.v4-pc-axis{display:flex;justify-content:space-between;gap:6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;color:#68758a}
.v4-pc-axis span:nth-child(2){color:var(--v4-thr)}
.v4-pc-rain{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#3c5060;background:#f1f5f9;border-radius:9px;padding:7px 10px}
.v4-pc-rain .v4-icon{width:16px;height:16px;flex:none;color:#1176c2}
.v4-pc-rain[data-state=dry] .v4-icon,.v4-pc-rain[data-state=unavailable] .v4-icon{color:#8fa0b3}
.v4-pc-rain b{font-weight:800;color:#143353}
.v4-pc-qty{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:#68758a;white-space:nowrap}
.v4-pc-meta{display:flex;flex-wrap:wrap;gap:3px 10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:#8593a8;border-top:1px solid #e9eff3;padding-top:10px}
.v4-pc-actions{display:flex;gap:8px}
#v4-popup .v4-pc-btn{flex:1;margin:0!important;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:800;padding:9px 10px;border-radius:9px;background:#1176c2;color:#fff!important;border:1px solid #1176c2;text-decoration:none}
#v4-popup .v4-pc-btn.ghost{background:transparent;color:#1176c2!important;border-color:#d8e1e8}
.v4-pc-btn:hover{filter:brightness(1.08);text-decoration:none}
.v4-pc-btn .v4-icon{width:14px;height:14px}
.v4-fav{position:absolute;right:36px;top:8px;width:26px;height:26px;border:0;background:transparent;color:#a3b0c4!important;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.v4-fav .v4-icon{width:17px;height:17px}
.v4-fav:hover{color:#e0a02e!important}
.v4-fav[aria-pressed=true]{color:#e0a02e!important}
.v4-fav[aria-pressed=true] .v4-icon{fill:#e0a02e}
.v4-open-map{display:none}.v4-map-controls{position:absolute;bottom:16px;left:32px;display:flex;align-items:center;gap:9px;z-index:9}.v4-map-controls button,.v4-map-controls a,.v4-zoom button{border:1px solid var(--v4-border);background:var(--v4-bg);border-radius:10px;padding:11px 16px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:800;box-shadow:0 1px 3px #0001}.v4-map-controls .v4-icon{width:17px;height:17px}.v4-map-controls #v4-motion{padding:11px}.v4-map-controls button[aria-pressed=true]{color:var(--v4-accent)}.v4-zoom{position:absolute;right:calc(var(--v4-map-r,22%) + 14px);bottom:15px;display:grid;gap:6px;z-index:8}.v4-zoom button{padding:10px;width:40px;height:40px}.v4-zoom .v4-icon{width:18px}/* Nine layers plus their notes outgrew the viewport and took the close button off the top of the
   screen with them. The panel scrolls inside itself and the heading stays put. */
.v4-layer-panel{position:absolute;left:32px;bottom:77px;z-index:15;width:310px;max-width:calc(100% - 28px);max-height:calc(100vh - 190px);overflow-y:auto;overscroll-behavior:contain;padding:0 18px 18px;background:var(--v4-panel);border:1px solid var(--v4-border);border-radius:14px;box-shadow:var(--v4-shadow)}.v4-panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;position:sticky;top:0;z-index:1;padding:16px 0 8px;background:var(--v4-panel)}.v4-panel-heading h2{font-size:17px}.v4-panel-heading button{border:0;background:transparent;padding:5px}.v4-layer-panel p{font-size:12px;color:var(--v4-muted);margin:10px 0!important}.v4-layer-panel a{color:var(--v4-accent)!important;font-size:12px}.v4-layer-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;font-size:14px}.v4-layer-option input{accent-color:var(--v4-accent);width:18px;height:18px}.v4-layer-panel .v4-icon{width:15px}
.v4-account{position:absolute;right:32px;top:78px;width:365px;background:var(--v4-panel);border:1px solid var(--v4-border);border-radius:17px;padding:23px;box-shadow:var(--v4-shadow);z-index:6}.v4-account .v4-eyebrow{display:flex;align-items:center;gap:9px}.v4-account .v4-eyebrow .v4-icon{width:16px;height:16px}.v4-account h2{font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:17px 0 14px!important}.v4-account>p:not(.v4-eyebrow){color:var(--v4-muted);font-size:14px;line-height:1.55}.v4-account form{margin-top:18px}.v4-account form>label:not(.v4-terms){display:block;font-size:11px;text-transform:uppercase;color:var(--v4-muted);font-weight:600;margin-bottom:6px}.v4-account input:not([type=hidden]):not([type=checkbox]),.v4-near input{width:100%;padding:13px;border:1px solid var(--v4-border);background:var(--v4-input);border-radius:9px;color:var(--v4-text);font-size:14px;min-height:48px;margin-bottom:15px}.v4-account input::placeholder,.v4-near input::placeholder{color:var(--v4-faint)}.v4-account .v4-button{width:100%;font-size:14px;padding:13px}.v4-terms{display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.5;color:var(--v4-muted);margin-bottom:15px}.v4-terms input{margin:2px 0 0;accent-color:var(--v4-accent);width:15px;height:15px;flex-shrink:0}.v4-terms a,.v4-account-foot a{color:var(--v4-accent)!important}.v4-account .v4-account-foot{font-size:11px!important;margin-top:12px!important}
/* ── the right-hand briefing panel ─────────────────────────────────────────────────────── */
.v4-br-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.v4-br-head .v4-eyebrow{margin:0!important}
.v4-br-close{flex:none;width:28px;height:28px;border:0;background:transparent;color:var(--v4-muted);display:grid;place-items:center;border-radius:8px;cursor:pointer}
.v4-br-close:hover{background:var(--v4-input);color:var(--v4-text)}
.v4-br-close .v4-icon{width:15px;height:15px}
.v4-br-tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--v4-border)}
.v4-br-tabs button{flex:1;border:0;background:transparent;color:var(--v4-muted);font:800 12.5px var(--v4-font);padding:9px 6px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-br-tabs button[aria-selected=true]{color:var(--v4-accent);border-bottom-color:var(--v4-accent)}
.v4-br-tabs button{display:flex;align-items:center;justify-content:center;gap:5px}
.v4-br-tabs .v4-tab-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-br-tabs .v4-tab-n{flex:none;padding:1px 6px;border-radius:9px;background:var(--v4-input);font-size:11px}
.v4-br-alarm{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid var(--v4-elevated);background:var(--v4-input);border-radius:10px;padding:9px 11px;margin-bottom:12px;color:var(--v4-text);cursor:pointer}
.v4-br-alarm.is-high{border-color:var(--v4-high)}
.v4-br-alarm>.v4-icon{width:16px;height:16px;flex:none;color:var(--v4-elevated)}
.v4-br-alarm.is-high>.v4-icon{color:var(--v4-high)}
.v4-br-alarm span{flex:1;min-width:0}
.v4-br-alarm b{display:block;font-size:12.5px;font-weight:800}
.v4-br-alarm small{display:block;font-size:11px;color:var(--v4-muted)}
.v4-br-alarm .v4-icon:last-child{width:13px;height:13px;color:var(--v4-faint);flex:none}
.v4-br-sub{font-size:11.5px!important;color:var(--v4-muted);margin:0 0 4px!important}
.v4-br-rows{display:flex;flex-direction:column}
.v4-br-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;min-height:44px;padding:9px 0;border:0;border-top:1px solid var(--v4-border);background:transparent;color:var(--v4-text);cursor:pointer;text-decoration:none}
.v4-br-row:first-child{border-top:0}
.v4-br-row>.v4-icon{width:19px;height:19px;flex:none;color:var(--v4-faint)}
.v4-br-row .t{flex:1;min-width:0}
.v4-br-row .t b{display:block;font-size:13.5px;font-weight:800;line-height:1.3}
.v4-br-row .t small{display:block;font-size:11.5px;color:var(--v4-muted);line-height:1.35;margin-top:1px}
.v4-br-row .v4-icon:last-child{width:13px;height:13px;color:var(--v4-faint);flex:none}
.v4-br-row.is-warn>.v4-icon:first-child{color:var(--v4-elevated)}
.v4-br-row.is-sev>.v4-icon:first-child{color:var(--v4-high)}
.v4-br-row.is-muted .t b{color:var(--v4-muted);font-weight:700}
a.v4-br-row:hover,button.v4-br-row:hover{text-decoration:none;color:var(--v4-accent)}
/* The official likelihood band, coloured. A tinted chip rather than a solid fill: white on the
   amber of "Medium" fails contrast, and the panel is already busy. Same four bands, same order
   of severity as postcode-flood.php's $bandTone, which is where the row now links. */
.v4-br-band{display:inline-block;font-style:normal;font-weight:800;padding:0 8px;border-radius:20px;white-space:nowrap;background:#7f94b22e;color:var(--v4-muted)}
.v4-br-band.is-high{background:#dc262633;color:#ff7b80}
.v4-br-band.is-medium{background:#e67e2230;color:#ffa94d}
.v4-br-band.is-low{background:#0d948833;color:#35d3c2}
.v4-br-band.is-very_low{background:#16a34a2e;color:#5fd67f}
:root[data-theme=light] .v4-br-band.is-high{background:#dc26261f;color:#b91c1c}
:root[data-theme=light] .v4-br-band.is-medium{background:#e67e2224;color:#b45309}
:root[data-theme=light] .v4-br-band.is-low{background:#0d94881f;color:#0f766e}
:root[data-theme=light] .v4-br-band.is-very_low{background:#16a34a1f;color:#15803d}
/* The band row doubles as the way through to the postcode's own page, so it is lifted out of the
   list as a warm block rather than one more divider-separated line. The wash is deliberately weak:
   in a panel where colour means severity, a strong orange row would read as a warning. */
.v4-br-row.is-report{border-top:0;margin-top:8px;padding:11px 12px;border-radius:11px;background:#e67e2218}
:root[data-theme=light] .v4-br-row.is-report{background:#e67e2220}
.v4-br-row.is-report .v4-br-cta{display:block;margin-top:3px;font-size:12px;font-weight:800;color:#ffa94d}
:root[data-theme=light] .v4-br-row.is-report .v4-br-cta{color:#b45309}
.v4-br-row.is-report .t small{color:var(--v4-text);opacity:.72}
/* On the wash a tinted chip would disappear, so the band becomes an outline in its own colour. */
.v4-br-row.is-report .v4-br-band,
:root[data-theme=light] .v4-br-row.is-report .v4-br-band{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.v4-br-links{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:12px;font-size:13px;font-weight:800}
.v4-br-links a{color:var(--v4-accent)!important;display:inline-flex;align-items:center;gap:5px}
.v4-br-links .v4-icon{width:13px;height:13px}
.v4-br-empty{font-size:13px;color:var(--v4-muted);margin:0 0 12px!important}
.v4-br-form{display:flex;gap:8px}
.v4-br-form input{flex:1 1 auto;width:auto;min-width:0;margin:0!important;padding:11px;border:1px solid var(--v4-border);background:var(--v4-input);border-radius:9px;color:var(--v4-text);font-size:14px}
.v4-br-form .v4-button{width:auto;flex:none;padding:11px 18px;font-size:13px}
.v4-br-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--v4-border);font-size:12.5px;color:var(--v4-muted);line-height:1.5}
.v4-br-foot b{color:var(--v4-text)}
.v4-br-foot .v4-button{display:flex;margin-top:12px;font-size:13.5px;padding:12px}
.v4-saved{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px}
/* A grid item's default min-width:auto is its MIN-CONTENT width, and each row's min-content is
   the gauge name at full length (nowrap) plus the reading column, which is wider than the rail.
   The track stretched to fit it, the row hung 19px past the panel, and the right-hand reading was
   cut off mid-number — "0.59 mASD" showing as "0". min-width:0 lets the track cap at the panel
   and the name ellipsise, which is what .t was already set up to do. */
.v4-saved li{min-width:0}
.v4-saved a{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px;color:var(--v4-text);text-decoration:none}
.v4-saved a:hover{background:var(--v4-input)}
.v4-saved .v4-dot{flex:none;width:9px;height:9px}
.v4-saved .t{flex:1;min-width:0}
.v4-saved .t b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-saved .t small{display:block;font-size:11px;color:var(--v4-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-saved .v{flex:none;text-align:right;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600}
.v4-saved .v .v4-dir{display:block;font-family:var(--v4-font);font-size:10px;font-weight:700;color:var(--v4-muted)}
.v4-saved .v .v4-dir[data-dir=rising]{color:var(--v4-high)}
.v4-saved-more{font-size:11px;color:var(--v4-muted);margin-top:8px!important}.v4-form-hint{color:var(--v4-muted);font-size:11px;margin-top:7px!important}.v4-rising-list,.v4-near{display:none}.v4-ticker{display:flex;align-items:center;gap:20px;border-top:1px solid var(--v4-border);padding:11px 32px;font-size:11px;color:var(--v4-muted);white-space:nowrap}.v4-ticker strong{color:var(--v4-text);flex:none}.v4-ticker-items{overflow:hidden}#v4-ticker-items{display:flex;gap:24px;overflow:hidden;flex:1}#v4-ticker-items a{flex-shrink:0}#v4-ticker-time{font-size:10px}.v4-support{display:grid;grid-template-columns:1fr 1fr 1fr;gap:17px;padding:20px 32px 0}.v4-card{padding:21px;background:var(--v4-panel);border:1px solid var(--v4-border);border-radius:14px;min-width:0}.v4-card h2{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:17px;line-height:1.3;margin-bottom:14px!important;letter-spacing:-.2px}.v4-card h2>.v4-icon{color:var(--v4-accent);width:19px;height:19px}.v4-rain-card h2>.v4-icon{color:var(--v4-rain)}.v4-card p{color:var(--v4-muted);font-size:13px;line-height:1.55}.v4-text-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--v4-accent)!important;margin-top:12px}.v4-text-link .v4-icon{width:15px;height:15px}.v4-data-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;margin:11px 0;color:var(--v4-text)}.v4-data-row>span{min-width:0}.v4-data-row .v4-place{color:var(--v4-muted)}.v4-data-row strong{font-family:'JetBrains Mono',monospace;font-size:13px;white-space:nowrap}.v4-reservoir-row{display:grid;grid-template-columns:minmax(70px,.85fr) 1.2fr 40px;gap:15px;align-items:center;font-size:14px;margin:13px 0}.v4-reservoir-row meter{width:100%;height:8px;appearance:none;border:0;border-radius:5px;background:var(--v4-border)}.v4-reservoir-row meter::-webkit-meter-bar{background:var(--v4-border);border:0;border-radius:5px;height:8px}.v4-reservoir-row meter::-webkit-meter-optimum-value{background:var(--v4-accent);border-radius:5px 0 0 5px}.v4-reservoir-row meter::-moz-meter-bar{background:var(--v4-accent)}.v4-reservoir-row>span{text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px}.v4-reservoir-date{font-size:10px;color:var(--v4-faint)}.v4-property-card{background:#143461}.v4-property-card h2>.v4-icon{color:var(--v4-alert)}:root[data-theme=light] .v4-property-card{background:#e0ecfc}.v4-overflow-card{display:none}.v4-footer{padding:20px 32px 45px;color:var(--v4-faint);font-size:11px}.v4-footer>div{display:flex;gap:15px;margin-top:12px}.v4-footer>div>span{margin-left:auto;opacity:.65}.v4-footer{border-top:1px solid var(--v4-border);margin-top:26px}.v4-footer>.v4-footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2.7fr);gap:26px 34px;margin:8px 0 24px}.v4-footer-col h2{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:var(--v4-accent);margin-bottom:11px!important}.v4-footer-col ul{list-style:none;margin:0;padding:0}.v4-footer-col li{margin:0 0 7px;break-inside:avoid}#home-v4 .v4-footer-col a{color:var(--v4-muted);font-size:12px;line-height:1.4}#home-v4 .v4-footer-col a:hover,#home-v4 .v4-footer-col a:focus-visible{color:var(--v4-accent)}#home-v4 .v4-footer-all{display:inline-flex;align-items:center;gap:4px;color:var(--v4-accent);font-weight:800}.v4-footer-all .v4-icon{width:13px;height:13px}.v4-footer-col-wide ul{columns:2;column-gap:30px}.v4-footer-beta{font-size:9px;font-weight:800;letter-spacing:.4px;color:var(--v4-typical);margin-left:4px}#home-v4 .v4-footer-x{display:inline-flex;align-items:center;gap:8px;background:var(--v4-text);color:var(--v4-bg);font-weight:800;font-size:11px;padding:9px 15px;border-radius:99px;margin-bottom:13px}#home-v4 .v4-footer-x:hover{opacity:.85;text-decoration:none}.v4-footer>p{max-width:78ch;line-height:1.6}.v4-empty{color:var(--v4-muted);font-size:13px;padding:10px 0}.v4-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--v4-panel);border:1px solid var(--v4-border);box-shadow:var(--v4-shadow);padding:13px 20px;max-width:calc(100% - 32px);border-radius:12px;font-size:14px;z-index:100}.v4-noscript{margin:24px;padding:20px;border:1px solid var(--v4-border)}
@keyframes v4-pulse{0%{transform:scale(.55);opacity:.65}80%,100%{transform:scale(1.65);opacity:0}}@keyframes v4-rain{0%{transform:scale(.6);opacity:.45}100%{transform:scale(1.25);opacity:0}}@keyframes v4-drop{0%{transform:translateY(-4px);opacity:0}25%{opacity:.5}100%{transform:translateY(6px);opacity:0}}@keyframes v4-sewage{0%,100%{transform:scale(.62);opacity:.12}50%{transform:scale(1.5);opacity:.72}}@keyframes v4-severe-light{0%,100%{opacity:1}50%{opacity:.6}}
/* Editorial Brief: the alternate reference is a layout, not just a colour change. */
:root[data-view=brief]{color-scheme:light;--v4-bg:#faf8f2;--v4-map-bg:#f5f2e9;--v4-panel:#fff;--v4-panel-alt:#fff;--v4-input:#fff;--v4-border:#dcd7c9;--v4-text:#18213b;--v4-muted:#657089;--v4-faint:#7b8190;--v4-accent:#1975bd;--v4-accent-text:#fff;--v4-land:#fbf9f3;--v4-coast:#a89d86;--v4-typical:#33875c;--v4-elevated:#bd8300;--v4-rising:#1774b9;--v4-above:#d1660f;--v4-high:#bc2a20;--v4-rain:#6b9feb;--v4-sewage:#6b4423;--v4-alert:#d3921b;--v4-low:#c6d5dd;--v4-shadow:none}
[data-view=brief] .v4-header{margin:0 4%;padding:16px 0 44px;height:110px;border-bottom:1px solid var(--v4-border);gap:22px}[data-view=brief] .v4-brand{font-family:Georgia,serif;font-size:29px;font-weight:700}[data-view=brief] .v4-nav{position:absolute;bottom:0;left:0;right:0;height:38px;justify-content:flex-start;gap:25px;border-top:2px solid var(--v4-text);font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.5px}[data-view=brief] .v4-search{margin-left:auto;width:210px;background:transparent;border:0}[data-view=brief] .v4-themes{display:none}[data-view=brief] .v4-header-signup{background:transparent;border:1px solid var(--v4-text);color:var(--v4-text)!important;border-radius:4px;font-size:12px}[data-view=brief] .v4-warning-strip,[data-view=brief] .v4-weather-strip{margin:0 4%}[data-view=brief] .v4-stage{display:grid;grid-template-columns:28% 39% 28%;column-gap:2.5%;grid-template-rows:auto auto 1fr;min-height:1100px;height:auto;max-height:none;overflow:visible;background:transparent;margin:0 4%;padding-top:34px;padding-bottom:30px;border-bottom:1px solid var(--v4-border)}[data-view=brief] .v4-live{position:relative;grid-column:1/-1;top:auto;left:auto;right:auto;font-size:11px;margin-bottom:18px}[data-view=brief] .v4-live-dot{display:none}[data-view=brief] .v4-briefing{grid-column:1/-1;position:static;width:auto;display:grid;grid-template-columns:60% 37%;column-gap:3%;border-bottom:1px solid var(--v4-border);margin-bottom:28px;padding-bottom:28px}[data-view=brief] .v4-briefing .v4-eyebrow{grid-column:1/-1;color:#90600d;font-size:10px}[data-view=brief] .v4-briefing #v4-headline{font-family:Georgia,serif;font-size:clamp(35px,4.2vw,63px);line-height:1.02;font-weight:500;letter-spacing:-2px;margin-bottom:0!important}[data-view=brief] .v4-summary{display:block;font-family:Georgia,serif;font-size:21px;line-height:1.45;align-self:end;padding-bottom:2px;color:#404b65}[data-view=brief] .v4-metrics,[data-view=brief] .v4-briefing .v4-legend{display:none}[data-view=brief] .v4-near{display:block;grid-column:1;grid-row:3;align-self:start}[data-view=brief] .v4-near h2{color:#90600d;font-size:10px;margin-bottom:12px!important}.v4-near form{display:flex;gap:8px}.v4-near input{margin:0;border-radius:4px;min-width:0}.v4-near .v4-button{border-radius:4px;font-size:12px;background:#18213b;padding:10px 16px}.v4-near>p{font-size:11px;color:var(--v4-muted);margin:10px 0 20px!important}#v4-near-data .v4-data-row{padding:14px 0;border-top:1px solid var(--v4-border);font-size:12px}[data-view=brief] .v4-map-region{position:relative;grid-column:2;grid-row:3/5;top:auto;bottom:auto;left:auto;right:auto;height:660px;border:1px solid var(--v4-border);border-radius:7px;background:var(--v4-map-bg);overflow:hidden}[data-view=brief] .v4-map{height:100%}[data-view=brief] .v4-open-map{display:inline-flex;position:absolute;right:13px;bottom:13px;background:var(--v4-text);color:white!important;border-radius:5px;font-size:12px}[data-view=brief] .v4-map-controls,[data-view=brief] .v4-zoom{display:none}[data-view=brief] .v4-rising-list{display:block;position:static;grid-column:3;grid-row:3/5;align-self:start}[data-view=brief] .v4-rising-list h2{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#d04131;padding:0 0 10px;border-bottom:1px solid var(--v4-border)}.v4-river-row{display:block;padding:12px 0;border-bottom:1px solid var(--v4-border)}.v4-river-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;font-weight:800}.v4-river-line strong{white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:12px}.v4-river-detail{display:flex;align-items:center;justify-content:space-between;gap:7px;color:var(--v4-muted);font-size:10px;margin-top:2px}.v4-river-detail b{color:var(--v4-high);font-size:10px;text-align:right}.v4-predicted-list{margin-top:30px}[data-view=brief] .v4-predicted-list h2{color:#b47508}[data-view=brief] .v4-account{position:static;grid-column:1;grid-row:4;width:auto;margin-top:25px;align-self:end;border-radius:5px;border-color:var(--v4-text);padding:18px}[data-view=brief] .v4-account h2{font-family:Georgia,serif;font-size:23px;font-weight:500;letter-spacing:0}[data-view=brief] .v4-account .v4-button{background:var(--v4-text);border-radius:4px}[data-view=brief] .v4-account>p:not(.v4-eyebrow){font-size:12px}[data-view=brief] .v4-account input{border-radius:4px!important}[data-view=brief] .v4-ticker{display:none}[data-view=brief] .v4-support{grid-template-columns:repeat(4,1fr);gap:30px;padding:26px 4%}[data-view=brief] .v4-card{background:transparent;border:0;border-radius:0;padding:0}[data-view=brief] .v4-card h2{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--v4-accent)}[data-view=brief] .v4-card .v4-icon{display:none}[data-view=brief] .v4-data-row{padding:14px 0;margin:0;border-top:1px solid var(--v4-border);font-size:12px}[data-view=brief] .v4-data-row strong{font-size:11px}[data-view=brief] .v4-reservoir-row{font-size:12px;gap:8px}[data-view=brief] .v4-overflow-card{display:block}[data-view=brief] .v4-property-card{padding:20px;background:#18213b;border-radius:5px;color:white}[data-view=brief] .v4-property-card h2{font-family:Georgia,serif;font-size:24px;line-height:1.15;text-transform:none;letter-spacing:0;color:white;font-weight:400}[data-view=brief] .v4-property-card p{color:#bdc7d9;font-size:12px}[data-view=brief] .v4-property-card a{display:flex;justify-content:center;padding:12px;background:#f7bd3c;color:#17213b!important;font-weight:800;border-radius:4px;font-size:12px}[data-view=brief] .v4-footer{border-top:1px solid var(--v4-border);margin:0 4%;padding:16px 0 30px}
@media(min-width:1600px){.v4-stage{min-height:840px}.v4-briefing{width:375px}.v4-account{width:420px;padding:26px}.v4-account h2{font-size:28px}.v4-account input:not([type=hidden]):not([type=checkbox]){min-height:53px}.v4-header{gap:26px}.v4-nav{font-size:16px}.v4-metric-copy{font-size:14px}.v4-briefing #v4-headline{font-size:32px}.v4-metric{padding:15px;min-height:75px}}
@media(max-width:1300px){.v4-header{gap:16px;padding:0 24px}.v4-nav{gap:12px;font-size:13px}.v4-brand{font-size:20px;gap:8px}.v4-search{width:250px}.v4-header-signup{padding:11px;font-size:12px}.v4-briefing{left:24px;width:305px}.v4-briefing #v4-headline{font-size:26px}.v4-account{right:24px;width:315px;padding:20px}.v4-account h2{font-size:23px}.v4-metric{gap:9px;padding:12px}.v4-metric-copy{font-size:12px}.v4-metric-number{font-size:21px;min-width:36px}.v4-stage{--v4-map-r:20%}.v4-map-region{left:25%}.v4-themes button{min-width:31px;padding:0 7px}.v4-live{left:24px;right:24px}.v4-support{padding-left:24px;padding-right:24px}.v4-card{padding:18px}.v4-card h2{font-size:15px}}
@media(max-width:1100px) and (min-width:901px){.v4-nav{position:absolute;top:75px;left:0;right:0;display:none;padding:20px;background:var(--v4-panel);border-bottom:1px solid var(--v4-border)}.v4-nav.is-open{display:flex}.v4-menu{display:flex;background:transparent;border:1px solid var(--v4-border);border-radius:8px;width:39px;height:39px;align-items:center;justify-content:center}.v4-search{margin-right:auto;width:270px}.v4-stage{min-height:820px}.v4-briefing{width:270px}.v4-briefing #v4-headline{font-size:23px}.v4-account{width:270px;padding:18px}.v4-account h2{font-size:21px}.v4-account>p:not(.v4-eyebrow){font-size:12px}.v4-stage{--v4-map-r:21%}.v4-map-region{left:25%}.v4-metric-copy{font-size:11px}.v4-metric-number{font-size:20px;min-width:33px}.v4-metric{gap:7px;padding:11px}.v4-switch{width:29px;height:18px}.v4-switch:after{width:12px;height:12px}.v4-metric[aria-pressed=false] .v4-switch:after{transform:translateX(-11px)}.v4-map-controls{left:24px}.v4-map-controls button,.v4-map-controls a{padding:11px 13px;font-size:12px}.v4-warning-strip{font-size:12px}.v4-strip-meta{display:none}[data-view=brief] .v4-nav{display:flex;top:auto;padding:0;background:transparent}[data-view=brief] .v4-menu{display:none}[data-view=brief] .v4-stage{grid-template-columns:28% 39% 28%}[data-view=brief] .v4-summary{font-size:17px}[data-view=brief] .v4-map-region{height:600px}[data-view=brief] .v4-account{padding:14px}[data-view=brief] .v4-account h2{font-size:20px}}
@media(max-width:900px){#home-v4{font-size:16px}.v4-header{height:57px;padding:0 16px;gap:12px}.v4-brand{font-size:17px;gap:7px;margin-right:auto}.v4-brand img{width:28px;height:28px}.v4-header-signup{display:none}.v4-login{font-size:12px}.v4-themes{border:1px solid var(--v4-border);border-radius:8px;background:transparent;padding:0}.v4-themes button{display:none;width:39px;height:39px;padding:9px;border-radius:7px}.v4-themes button[data-theme-choice=light]{display:block}.v4-themes button[aria-pressed=true]{background:transparent;color:var(--v4-text)}:root[data-theme=light] .v4-themes button[data-theme-choice=light]{display:none}:root[data-theme=light] .v4-themes button[data-theme-choice=dark]{display:block}.v4-themes .v4-icon{width:18px;height:18px}.v4-menu{display:flex;width:39px;height:39px;align-items:center;justify-content:center;border:1px solid var(--v4-border);background:transparent;border-radius:8px}.v4-menu .v4-icon{width:17px}.v4-nav{display:none;position:absolute;top:57px;left:0;right:0;padding:16px;background:var(--v4-panel);border-bottom:1px solid var(--v4-border);box-shadow:var(--v4-shadow);white-space:normal;gap:0}.v4-nav.is-open{display:grid;grid-template-columns:1fr 1fr}.v4-nav a{padding:10px;font-size:14px}.v4-search{position:absolute;left:16px;right:16px;top:calc(100% + var(--v4-banner-height,0px) + 12px);width:auto;padding:11px 12px;border-radius:8px;z-index:4;min-height:45px}.v4-search input{font-size:13px}.v4-search-results{width:100%;max-height:350px}.v4-warning-strip,.v4-weather-strip{font-size:11px;padding:12px 16px;gap:10px;line-height:1.5}.v4-warning-strip>.v4-icon{width:14px;height:14px}.v4-warning-strip>a{font-size:0}.v4-warning-strip>a .v4-icon{width:15px}.v4-strip-meta{display:none}.v4-weather-strip{flex-wrap:wrap;gap:7px}.v4-weather-strip p{flex-basis:85%}.v4-storm-chip{font-size:10px;margin-left:20px;padding:4px 10px}.v4-weather-square{width:9px;height:9px}.v4-stage{height:auto;max-height:none;min-height:0;padding-top:590px;padding-bottom:0;background:var(--v4-panel);overflow:hidden}.v4-map-region{left:0;right:0;top:0;bottom:auto;height:590px;background:var(--v4-map-bg)}.v4-map{height:100%;padding-top:87px;padding-bottom:21px}.v4-map-svg{width:100%;height:100%;overflow:visible}.v4-map-loading{bottom:61px;font-size:10px;padding:6px 10px;white-space:normal;text-align:center;width:max-content;max-width:80%}.v4-live{top:569px;left:16px;right:16px;font-size:9px;z-index:8;gap:7px}.v4-live-dot{width:5px;height:5px;box-shadow:0 0 0 3px #2cd2a020}.v4-view-switch{border-radius:4px}.v4-view-switch a{padding:1px 7px;font-size:9px}.v4-briefing{position:static;width:auto;padding:18px 16px 0;pointer-events:auto}.v4-briefing #v4-headline{font-size:23px;line-height:1.17;letter-spacing:-.45px;margin:7px 0 8px!important;max-width:520px;text-wrap:pretty}.v4-eyebrow{font-size:10px;letter-spacing:.8px}.v4-summary{display:block;font-size:12px;line-height:1.5;margin:5px 0 13px!important}.v4-metrics{position:absolute;left:16px;right:0;top:70px;display:flex;gap:7px;overflow:auto;z-index:5;padding:0 16px 8px 0;scrollbar-width:none}.v4-metric{display:flex;gap:6px;flex-shrink:0;min-height:35px;border-radius:8px;padding:7px 9px;background:var(--v4-panel-alt)}.v4-metric-number{font-size:13px;min-width:auto;letter-spacing:0}.v4-metric .v4-dot{width:8px;height:8px}.v4-metric-copy{font-size:10px}.v4-metric-copy strong{font-weight:400;white-space:nowrap}.v4-metric-copy>span,.v4-metric .v4-switch{display:none}.v4-metric[aria-pressed=false]{opacity:.5}.v4-legend{display:none}.v4-map-controls{top:514px;bottom:auto;left:16px;gap:8px}.v4-map-controls button,.v4-map-controls a{font-size:12px;min-height:39px;padding:9px 12px;border-radius:8px}.v4-map-controls .v4-icon{width:15px;height:15px}.v4-map-controls>a span{display:none}.v4-map-controls #v4-motion{padding:10px}.v4-zoom{top:392px;bottom:auto;right:16px;gap:4px}.v4-zoom button{width:31px;height:31px;padding:7px;border-radius:7px}.v4-layer-panel{left:16px;top:164px;bottom:auto;width:295px;padding:0 16px 16px;max-height:calc(100vh - 210px)}.v4-popup{top:39%;left:16px;width:280px;max-width:calc(100% - 32px);padding:16px;font-size:12px}.v4-popup h2{font-size:16px}.v4-popup .v4-reading strong{font-size:24px}.v4-popup .v4-reading span{font-size:12px}.v4-rising-list{display:block;margin:0 16px 19px}.v4-rising-list h2{font-size:11px;font-weight:700;color:var(--v4-muted);padding:0 0 8px;border-bottom:1px solid var(--v4-border)}.v4-river-row{padding:11px 0}.v4-river-line{font-size:14px;gap:7px}.v4-river-line strong{font-size:12px;color:var(--v4-high)}.v4-river-detail{font-size:10px}.v4-river-detail b{font-size:10px}.v4-rising-list>.v4-text-link{display:none}.v4-predicted-list{display:none}.v4-account{position:relative;top:auto;left:auto;right:auto;width:auto;margin:14px 16px;background:var(--v4-bg);padding:20px;border-radius:13px;box-shadow:none}.v4-account h2{font-size:23px;letter-spacing:-.6px;margin:12px 0!important}.v4-account>p:not(.v4-eyebrow){font-size:12px}.v4-account input:not([type=hidden]):not([type=checkbox]){font-size:14px;min-height:47px;padding:12px;margin-bottom:13px}.v4-account form>label:not(.v4-terms){font-size:10px}.v4-account .v4-button{font-size:13px}.v4-terms{font-size:10px}.v4-account .v4-account-foot{font-size:10px!important}.v4-form-hint{font-size:10px}.v4-ticker{display:none}.v4-support{display:grid;grid-template-columns:1fr;gap:14px;padding:0 16px 0;background:var(--v4-panel)}.v4-card{padding:19px 20px;border-radius:13px}.v4-card h2{font-size:15px;margin-bottom:14px!important}.v4-data-row{font-size:14px}.v4-data-row strong{font-size:12px}.v4-reservoir-row{font-size:14px}.v4-property-card p{font-size:12px}.v4-text-link{font-size:12px;margin-top:7px}.v4-footer{background:var(--v4-panel);font-size:9px;padding:15px 16px 24px}.v4-footer>div{gap:12px;font-size:9px}.v4-footer>div>span{display:none}.v4-overflow-card{display:none}[data-theme=light] .v4-account{background:#fff}[data-theme=light] .v4-stage,[data-theme=light] .v4-support,[data-theme=light] .v4-footer{background:var(--v4-bg)}
[data-view=brief] .v4-header{height:65px;margin:0 5%;padding:0;gap:12px;border-bottom:2px solid var(--v4-text)}[data-view=brief] .v4-brand{font-size:23px}[data-view=brief] .v4-brand img{width:28px;height:28px}[data-view=brief] .v4-login{font-size:11px}[data-view=brief] .v4-menu{border-color:var(--v4-text);border-radius:4px}[data-view=brief] .v4-nav{height:auto;top:63px;bottom:auto;background:var(--v4-bg);font-size:12px;padding:10px;border-top:0;z-index:40}[data-view=brief] .v4-search{display:none}[data-view=brief] .v4-warning-strip,[data-view=brief] .v4-weather-strip{margin:0;padding-left:5%;padding-right:5%}[data-view=brief] .v4-stage{display:flex;flex-direction:column;margin:0 5%;padding:10px 0 20px;min-height:0;border-bottom:0;background:transparent;overflow:visible}[data-view=brief] .v4-live{position:static;font-size:9px;margin-bottom:14px;order:0}[data-view=brief] .v4-briefing{display:block;padding:0 0 20px;order:1;margin-bottom:20px}[data-view=brief] .v4-briefing .v4-eyebrow{font-size:9px}[data-view=brief] .v4-briefing #v4-headline{font-size:33px;line-height:1.02;letter-spacing:-.8px;max-width:none;margin:9px 0 14px!important}[data-view=brief] .v4-summary{font-family:Georgia,serif;font-size:16px;line-height:1.5;margin:0!important}[data-view=brief] .v4-near{order:2;display:block}[data-view=brief] .v4-near h2{font-size:9px}.v4-near form{gap:9px}.v4-near input{font-size:13px;min-height:43px;padding:10px}[data-view=brief] .v4-near>p{font-size:10px}[data-view=brief] .v4-map-region{order:3;height:510px;width:100%;margin:18px 0 22px;flex:none;border-radius:6px}[data-view=brief] .v4-map{padding:0 0 15px;touch-action:pan-y}[data-view=brief] .v4-map-loading{bottom:62px}[data-view=brief] .v4-popup{top:29%}[data-view=brief] .v4-open-map{font-size:11px;padding:11px}[data-view=brief] .v4-rising-list{order:4;margin:0 0 18px}[data-view=brief] .v4-rising-list h2{font-size:9px}[data-view=brief] .v4-river-line{font-size:13px}[data-view=brief] .v4-account{order:5;margin:10px 0 0;align-self:auto;padding:20px;border-radius:4px;background:#fff}[data-view=brief] .v4-account h2{font-size:25px}[data-view=brief] .v4-account .v4-eyebrow{font-size:9px}[data-view=brief] .v4-support{display:block;padding:0 5%;background:transparent}[data-view=brief] .v4-card{border-top:1px solid var(--v4-border);padding:19px 0;margin-top:8px}[data-view=brief] .v4-card h2{font-size:9px;margin-bottom:13px!important}[data-view=brief] .v4-rain-card h2{font-size:0}[data-view=brief] .v4-rain-card h2:before{content:'Rain, last 24 hours';font-size:9px}[data-view=brief] .v4-data-row{font-size:12px;padding:14px 0}[data-view=brief] .v4-data-row strong{font-size:11px}[data-view=brief] .v4-reservoir-row{font-size:12px;margin:13px 0}[data-view=brief] .v4-overflow-card{display:block}[data-view=brief] .v4-property-card{padding:20px;border:0;margin-top:0}[data-view=brief] .v4-property-card h2{font-size:25px}[data-view=brief] .v4-footer{margin:22px 5% 0;background:transparent;font-size:9px;padding-top:16px}[data-view=brief] .v4-footer>div{font-size:9px}}
@media(max-width:360px){.v4-header{gap:8px;padding:0 13px}.v4-brand{font-size:15px}.v4-login{font-size:10px}.v4-map-region{height:545px}.v4-stage{padding-top:545px}.v4-live{top:526px}.v4-map-controls{top:474px;left:13px;gap:6px}.v4-zoom{top:386px}.v4-map-controls button,.v4-map-controls a{padding:8px 10px;font-size:11px}.v4-search{left:13px;right:13px}.v4-briefing{padding-left:13px;padding-right:13px}.v4-briefing #v4-headline{font-size:21px}.v4-account,.v4-rising-list{margin-left:13px;margin-right:13px}.v4-account{padding:17px}.v4-account h2{font-size:21px}.v4-support{padding-left:13px;padding-right:13px}[data-view=brief] .v4-map-region{height:455px}}
@media(prefers-reduced-motion:reduce){#home-v4 *,#home-v4 *:before,#home-v4 *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.v4-pulse-ring{opacity:.25}}

/* Final reference refinements. */
[data-view=brief] #home-v4 h1,[data-view=brief] #home-v4 .v4-account h2,[data-view=brief] #home-v4 .v4-property-card h2{font-weight:400}
[data-view=brief] .v4-warning-strip[data-level=alert],[data-view=brief] .v4-weather-strip{background:#fff4d6;color:#805000}
#v4-warning-tiers{display:contents}.v4-warning-tier .v4-icon{width:17px;color:var(--v4-muted)}
.v4-strip-extra{font-size:12px;white-space:nowrap}
[data-warning-level=severe] .v4-metric[data-layer=warnings]>.v4-dot,[data-warning-level=warning] .v4-metric[data-layer=warnings]>.v4-dot{background:var(--v4-high)}
[data-warning-level=severe] .v4-metric[data-layer=sewage],[data-warning-level=severe] .v4-metric[data-layer=predictions]{display:none}
@media(min-width:901px){[data-warning-level=severe] .v4-metric[data-layer=warnings]{min-height:73px}}
@media(max-width:900px){.v4-strip-extra{display:none}.v4-warning-tier .v4-icon{display:none}.v4-warning-tier .v4-metric-copy strong{font-size:10px}}

.v4-phone-nav{display:none}
@media(min-width:901px){[data-view=radar] .v4-stage{height:var(--v4-stage-height,740px);max-height:none}}
@media(max-width:600px){
 #home-v4{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
 .v4-phone-nav{position:fixed;bottom:0;left:0;right:0;z-index:35;display:flex;justify-content:space-around;padding:9px 10px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--v4-border);background:var(--v4-panel);box-shadow:0 -5px 20px #0000000a}
 .v4-phone-nav a,.v4-phone-nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:20%;min-height:44px;border:0;background:transparent;color:var(--v4-muted);font-size:11px;font-weight:700}
 /* The base's `#home-v4 button{font:inherit}` outranks the rule above for the "More" button, which read at 16px beside four 11px tabs (2026-09-09; the chrome carries this everywhere). */
 #home-v4 .v4-phone-nav button{font-size:11px;font-weight:700}
 .v4-phone-nav a[aria-current=page]{color:var(--v4-accent)}.v4-phone-nav .v4-icon{width:24px;height:24px;stroke-width:1.9}
 .v4-phone-warning-count{position:absolute;top:-4px;left:calc(50% + 4px);padding:1px 5px;min-width:18px;border-radius:10px;background:var(--v4-high);color:white;font-size:10px;font-weight:800;line-height:15px}
 .v4-nav.is-bottom-open{position:fixed;top:auto;bottom:calc(72px + env(safe-area-inset-bottom,0px));left:10px;right:10px;border:1px solid var(--v4-border);border-radius:12px;z-index:40;padding:12px;background:var(--v4-panel);box-shadow:var(--v4-shadow)}
 .v4-toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 [data-view=brief] .v4-phone-nav{display:none}[data-view=brief] #home-v4{padding-bottom:0}
}

/* Independent forecasts can exceed a map card: keep its close control visible. */
.v4-popup[data-type=prediction]{top:120px;max-height:calc(100% - 200px);max-height:min(calc(100% - 200px),calc(100dvh - 160px));display:flex;flex-direction:column;overflow:hidden}
.v4-popup[data-type=prediction] #v4-popup-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:3px}

/* ── Grouped navigation (2026-09-07) ──────────────────────────────────────────
   v4 shipped with seven flat links while the classic header carried 21 across
   four groups. The full set is now here, consolidated into three dropdowns plus
   four standalone links. No JavaScript: :hover opens it for a mouse,
   :focus-within for a keyboard, and inside the collapsed panel every group is
   laid out open, because a dropdown inside a dropdown is no use on a phone. */
.v4-nav-grp{position:relative;display:flex;align-items:center}
.v4-nav-btn{display:inline-flex;align-items:center;gap:5px}
.v4-caret{width:14px;height:14px;flex:0 0 auto;transition:transform .15s ease}
.v4-nav-grp:hover .v4-caret,.v4-nav-grp:focus-within .v4-caret{transform:rotate(180deg)}
.v4-nav-menu{position:absolute;top:100%;left:0;z-index:60;display:none;min-width:270px;padding:10px;
  background:var(--v4-panel);border:1px solid var(--v4-border);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);white-space:normal}
@media(hover:hover){.v4-nav-grp:hover>.v4-nav-menu{display:block}}
.v4-nav-grp:focus-within>.v4-nav-menu{display:block}
.v4-menu-head{display:block;padding:2px 10px 8px;font-size:11px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--v4-muted)}
.v4-nav-menu a{display:block;padding:8px 10px;border-radius:8px;font-weight:600;line-height:1.3}
.v4-nav-menu a:hover,.v4-nav-menu a:focus-visible{background:var(--v4-panel-alt)}
.v4-mi-t{display:block}
.v4-mi-d{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--v4-muted)}
.v4-nav-accent{color:var(--v4-accent)}

/* Collapsed panel (hamburger): groups sit open in the flow, never as overlays. */
@media(max-width:1100px){
  .v4-nav.is-open{flex-direction:column;align-items:flex-start;gap:6px}
  .v4-nav.is-open .v4-nav-grp{display:block;width:100%}
  .v4-nav.is-open .v4-nav-menu{position:static;display:block;min-width:0;padding:4px 0 10px;
    background:none;border:0;border-radius:0;box-shadow:none}
  .v4-nav.is-open .v4-caret{display:none}
  .v4-nav.is-open .v4-mi-d{display:none}   /* the panel is a list, not a menu card */
}

/* Footer link columns: three lists plus the wide monitoring column, folding as it narrows. */
@media(max-width:1100px){.v4-footer>.v4-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .v4-footer-col-wide{grid-column:1/-1}}
@media(max-width:600px){.v4-footer>.v4-footer-cols{grid-template-columns:1fr;gap:20px;margin-bottom:18px}
  .v4-footer-col h2{font-size:10px}#home-v4 .v4-footer-col a{font-size:13px}
  .v4-footer-col li{margin-bottom:9px}.v4-footer-col-wide ul{columns:2;column-gap:18px}
  #home-v4 .v4-footer-x{font-size:11px}}

/* Between the full header and the 1300px compact one the row did not fit: brand, search, nav,
   themes, log in and the signup button came to ~1550px, so 1440px screens got a horizontal
   scrollbar. Tighten the header alone here — the map, briefing and account layout are unchanged. */
@media(min-width:1301px) and (max-width:1560px){
  .v4-header{gap:15px;padding:0 26px}
  .v4-nav{gap:13px;font-size:14px}
  .v4-search{width:265px}
  .v4-header-signup{padding:11px 13px;font-size:13px}
  .v4-themes button{min-width:33px;padding:0 8px}
}

/* The header's account menu. Same items and the same order as the rest of the site's
   (includes/auth-nav.php), in v4's own type and colour. Click to open, not hover: it holds Log out. */
.v4-who{position:relative;flex-shrink:0}
#home-v4 .v4-who>button{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;font-size:14px;
  font-weight:700;background:var(--v4-panel);border:1px solid var(--v4-border);border-radius:30px;
  color:var(--v4-text);max-width:200px}
#home-v4 .v4-who>button:hover{border-color:var(--v4-accent)}
.v4-who-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;flex:none;
  background:var(--v4-accent);color:var(--v4-accent-text);font-size:13px;font-weight:800}
.v4-who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-who>button .v4-caret{width:15px;height:15px;flex:none;transition:transform .15s}
.v4-who>button[aria-expanded=true] .v4-caret{transform:rotate(180deg)}
.v4-who-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:70;min-width:248px;padding:9px;
  background:var(--v4-panel);border:1px solid var(--v4-border);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.3)}
.v4-who-head{padding:8px 11px 12px;margin-bottom:6px;border-bottom:1px solid var(--v4-border)}
.v4-who-head strong{display:block;font-size:16px;line-height:1.25}
.v4-who-head span{display:block;margin-top:2px;font-size:12px;color:var(--v4-muted);
  overflow:hidden;text-overflow:ellipsis}
.v4-who-head em{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:20px;font-style:normal;
  font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  background:var(--v4-input);border:1px solid var(--v4-border);color:var(--v4-accent)}
#home-v4 .v4-who-menu a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--v4-text)}
#home-v4 .v4-who-menu a:hover,#home-v4 .v4-who-menu a:focus-visible{background:var(--v4-panel-alt);text-decoration:none}
.v4-who-menu .v4-icon{width:18px;height:18px;color:var(--v4-muted)}
#home-v4 .v4-who-out{margin-top:6px;padding-top:13px!important;border-top:1px solid var(--v4-border);
  border-radius:0 0 9px 9px;color:var(--v4-high)}
.v4-who-out .v4-icon{color:var(--v4-high)}
@media(max-width:900px){
  .v4-who-name,.v4-who>button .v4-caret{display:none}
  #home-v4 .v4-who>button{padding:4px;border-radius:50%}
  .v4-who-menu{right:-4px;min-width:224px}
}

/* Three-position controls. Rainfall is measured over a window and an overflow has a recent past as
   well as a present, so neither is an on/off switch. The tile wraps and the positions sit on their
   own row beneath the reading, so the name and the number stay the first thing read. */
.v4-metric--modes{flex-wrap:wrap;row-gap:11px}
.v4-modes{display:flex;flex-basis:100%;padding:3px;gap:3px;background:var(--v4-input);
  border:1px solid var(--v4-border);border-radius:9px}
#home-v4 .v4-modes button{flex:1;min-width:0;padding:6px 4px;border:0;border-radius:6px;background:transparent;
  font-size:11px;font-weight:700;color:var(--v4-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home-v4 .v4-modes button:hover{color:var(--v4-text)}
#home-v4 .v4-modes button[aria-checked=true]{background:var(--v4-accent);color:var(--v4-accent-text)}
.v4-metric--modes[data-state=off] .v4-metric-number,
.v4-metric--modes[data-state=off] .v4-metric-copy,
.v4-metric--modes[data-state=off] .v4-dot{opacity:.45}
@media(max-width:900px){
  /* The tiles are a scrolling chip row here; the positions come with them, just smaller. */
  .v4-metric--modes{flex-wrap:wrap;row-gap:6px}
  .v4-modes{padding:2px;gap:2px;border-radius:7px}
  #home-v4 .v4-modes button{padding:4px 5px;font-size:9px}
  .v4-metric--modes[data-state=off]{opacity:1}
  .v4-metric--modes[data-state=off] .v4-metric-number,
  .v4-metric--modes[data-state=off] .v4-metric-copy,
  .v4-metric--modes[data-state=off] .v4-dot{opacity:.5}
}

/* The rain gauge card: two figures, a word for the intensity, and the spell hour by hour. */
.v4-rc-now{display:flex;align-items:flex-end;gap:20px;margin:10px 0 4px}
.v4-rc-figure{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:4px;color:#65728a}
.v4-rc-figure b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:24px;line-height:1;color:#143353}
.v4-rc-figure i{font-style:normal;font-size:12px}
.v4-rc-figure small{grid-column:1/-1;font-size:10px;color:#68758a;margin-top:3px}
.v4-rc-word{margin-left:auto;text-align:center;padding:4px 11px;border-radius:14px;font-size:11px;font-weight:800;
  white-space:nowrap;background:#eaf1fb;color:#1d55a8}
.v4-rc-word small{display:block;font-size:9px;font-weight:600;opacity:.75;margin-top:1px}
.v4-rc-word[data-step="0"],.v4-rc-word[data-step="1"]{background:#eef2f7;color:#68758a}
.v4-rc-word[data-step="4"]{background:#dbe8fb;color:#123a7d}
.v4-rc-word[data-step="5"]{background:#123a7d;color:#fff}
.v4-rc-word[data-step="6"]{background:#3a1d6e;color:#fff}
.v4-rc-record{margin-top:6px;font-size:11px;color:#68758a}
.v4-rc-bar[data-step="6"]{opacity:1;background:#3a1d6e}
.v4-rc-chart{margin-top:12px}
.v4-rc-head{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:#68758a;margin-bottom:6px}
.v4-rc-bars{display:flex;align-items:flex-end;gap:2px;height:64px;padding:0 1px;
  background:linear-gradient(#f6f9fd,#eef3f9);border-radius:6px}
.v4-rc-bar{flex:1;min-width:0;border-radius:2px 2px 0 0;background:#2f74d0;opacity:.42}
.v4-rc-bar[data-step="2"]{opacity:.6}
.v4-rc-bar[data-step="3"]{opacity:.78;background:#1d55a8}
.v4-rc-bar[data-step="4"]{opacity:.92;background:#1d55a8}
.v4-rc-bar[data-step="5"]{opacity:1;background:#123a7d}
/* An hour with no reading is not a dry hour: it is drawn as a gap, not as a floor. */
.v4-rc-bar[data-none="1"]{height:100%;background:repeating-linear-gradient(45deg,#dfe6ef 0 2px,transparent 2px 5px);
  opacity:.65;border-radius:2px}

/* The rain shades, in the legend, with the numbers behind them named by the controller so the
   window on the map and the scale under it always agree. */
.v4-legend-rain{display:inline-flex;align-items:center;gap:3px}
.v4-legend-step{width:9px;height:9px;border-radius:50%;background:var(--v4-rain);flex:none}
.v4-legend-step[data-rain-step="1"]{opacity:.22}
.v4-legend-step[data-rain-step="2"]{opacity:.40}
.v4-legend-step[data-rain-step="3"]{opacity:.62;background:#2f74d0}
.v4-legend-step[data-rain-step="4"]{opacity:.85;background:#1d55a8}
.v4-legend-step[data-rain-step="5"]{opacity:1;background:#123a7d}
.v4-legend-step[data-rain-step="6"]{opacity:1;background:#3a1d6e}
:root[data-theme=dark] .v4-legend-step[data-rain-step="3"]{background:#5b9dff}
:root[data-theme=dark] .v4-legend-step[data-rain-step="4"]{background:#8fc0ff}
:root[data-theme=dark] .v4-legend-step[data-rain-step="5"]{background:#cfe4ff}
:root[data-theme=dark] .v4-legend-step[data-rain-step="6"]{background:#f0e4ff}
#v4-legend-rain-scale{margin-left:4px;color:var(--v4-faint)}

/* The overflow card. Same shape as the gauge card: what is happening, for how long, and the
   site's own record behind it. */
.v4-oc-state{display:flex;align-items:center;gap:9px;margin:10px 0 4px;font-weight:800;font-size:14px}
.v4-oc-state i{width:11px;height:11px;border-radius:50%;background:var(--v4-sewage);flex:none}
.v4-oc-since{display:flex;align-items:baseline;gap:6px;margin:2px 0 10px}
.v4-oc-since b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:24px;line-height:1;color:#143353}
.v4-oc-since span{font-size:12px;color:#68758a}
.v4-oc-facts{margin:10px 0 4px;border-top:1px solid #e2e9f1}
.v4-oc-fact{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #eef2f7;font-size:12px}
.v4-oc-fact span{color:#68758a}
.v4-oc-fact b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:#143353;text-align:right}
.v4-oc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.v4-oc-tag{padding:3px 9px;border-radius:20px;font-size:10px;font-weight:800;background:#fdf0e2;color:#8a4a12}

/* Hovering a dot says only what it is; the card waits for a click. */
.v4-tip{position:absolute;z-index:9;padding:4px 9px;border-radius:6px;pointer-events:none;
  background:var(--v4-text);color:var(--v4-bg);font-size:11px;font-weight:700;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.22);transform:translate(-50%,-140%)}

/* When a saved gauge's reading was taken: quiet, because the reading is the point, but present,
   because these gauges report at very different cadences. */
.v4-saved-at{display:block;margin-top:2px;font-size:10px;font-weight:500;color:var(--v4-faint)}

/* Your saved gauges: up to thirty, scrolled rather than truncated at six. The rail is a fixed
   height, so the list gets its own scroll instead of pushing the card's footer off the bottom. */
.v4-saved{max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain}
.v4-saved::-webkit-scrollbar{width:6px}
.v4-saved::-webkit-scrollbar-thumb{background:var(--v4-border);border-radius:3px}

/* The coastline was clipped to the map's middle band, so panning or zooming sliced it down a
   straight vertical line where the container ended — the rectangles Marc saw. The band still sets
   where the popup, the zoom stack and the controls sit; only the drawing runs past it, and the
   stage clips instead. The briefing and account cards sit above it and cover what runs under them. */
@media(min-width:901px){
  [data-view=radar] .v4-map{overflow:visible}
}

/* Waterways. Hairline and pale: they are there to tell you where the water is, not to compete with
   the gauges sitting on them. non-scaling-stroke keeps them a hairline at every zoom. */
.v4-river{fill:none;stroke:#9cc3ea;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;
  opacity:.42;vector-effect:non-scaling-stroke}
.v4-rivers-tier[data-tier="2"] .v4-river{stroke-width:.5;opacity:.28}
:root[data-theme=dark] .v4-river{stroke:#33587f;opacity:.55}
:root[data-theme=dark] .v4-rivers-tier[data-tier="2"] .v4-river{opacity:.34}

/* The search box's keyboard hint, and results shaped like /map's: a level dot, the name and where
   it is, and the current reading on the right. */
#home-v4 .v4-search-result{display:flex;align-items:center;gap:9px;width:100%;text-align:left}
.v4-sr-text{flex:1;min-width:0}
.v4-sr-text small{display:block;color:var(--v4-muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-sr-value{flex:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--v4-text)}
.v4-search-result .v4-dot{flex:none}

/* The way through to the full map, at the foot of the rail where the briefing runs out. */
#home-v4 .v4-to-map{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
  padding:12px 15px;border:0;border-radius:11px;background:var(--v4-accent);
  font-size:13px;font-weight:700;color:var(--v4-accent-text)}
#home-v4 .v4-to-map:hover{filter:brightness(1.07);text-decoration:none;color:var(--v4-accent-text)}
.v4-to-map small{display:block;font-weight:500;font-size:11px;color:var(--v4-accent-text);opacity:.82}
.v4-to-map .v4-icon{color:var(--v4-accent-text)}

/* The label under the place pin — same treatment as a settlement name so it sits in the map's
   own typography, but in the accent colour because it is the thing the visitor just asked for. */
.v4-place-label{font-family:var(--v4-font);font-size:5.4px;font-weight:800;fill:var(--v4-accent);
  stroke:var(--v4-map-bg);stroke-width:1.8;stroke-linejoin:round;paint-order:stroke;
  text-anchor:middle;dominant-baseline:hanging}