:root{
            --bg:            #0a0e14;
            --panel:         #111925;
            --panel-border:  #1f2c3d;
            --scope:         #5eead4;   /* phosphor teal — radar sweep / active accents */
            --forecast-accent:#5eead4;
            --alert:         #fb7185;   /* NWS warning red */
            --text:          #dfe8ef;
            --text-dim:      #7d8ea3;
            --radius:        10px;
        }

        *{ box-sizing:border-box; }

        html,body{
            margin:0; padding:0; width:100%;
            background:var(--bg);
            font-family:'Inter',sans-serif;
            color:var(--text);
        }

        /* The map app fills exactly one viewport, so on load the page looks
           identical to the old fixed/non-scrolling layout. #mapViewport (the
           map + every floating control) and #adDock are structurally
           separate boxes — #mapViewport's bottom offset tracks #adDock's
           actual rendered height via --ad-dock-h (kept in sync by JS next to
           the ad script), so the two never overlap regardless of ad size or
           fill state, without relying on flexbox to size the map container.
           A flex-computed (not explicit) height for #mapViewport broke the
           map on older tablet WebKit — gmp-map needs its absolutely
           positioned ancestor to resolve to a definite height, which these
           engines don't reliably do for flex items. Plain absolute
           positioning with an explicit bottom offset is the same technique
           already proven to work across this app's tablet fleet. */
        #appViewport{
            position:relative; width:100%; height:100vh; overflow:hidden;
        }
        #mapViewport{
            position:absolute; inset:0; overflow:hidden;
            bottom:var(--ad-dock-h, 0px);
            transform:translateZ(0);
        }

        #aboutSection{
            max-width:720px; margin:0 auto; padding:48px 20px 64px;
            font-size:14px; line-height:1.7; color:var(--text-dim);
        }
        #aboutSection h1{ font-family:'Space Mono',monospace; font-size:20px; color:var(--text); margin:0 0 24px; }
        #aboutSection h2{ font-family:'Space Mono',monospace; font-size:15px; color:var(--text); margin:28px 0 6px; }
        #aboutSection h2:first-of-type{ margin-top:0; }
        #aboutSection p{ margin:0 0 10px; }
        #aboutSection ul{ margin:0 0 10px; padding-left:20px; }
        #aboutSection li + li{ margin-top:4px; }
        #aboutSection a{ color:var(--scope); }
        #aboutSection .back-to-map{
            display:inline-block; margin-bottom:32px;
            font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--scope);
            text-decoration:none;
        }

        gmp-map{ position:absolute; inset:0; width:100%; height:100%; }
        .lightning-marker{
            color:#fff; font-size:24px; line-height:24px; text-align:center;
            filter:drop-shadow(0 0 6px rgba(0,0,0,0.75));
        }

        /* ---------- Publisher information and policy navigation ---------- */
        #siteNav{
            position:fixed; top:16px; left:50%; z-index:1000;
            transform:translateX(-50%);
            display:flex; align-items:center; justify-content:center; gap:12px;
            padding:8px 12px;
            background:var(--panel); border:1px solid var(--panel-border);
            border-radius:999px; box-shadow:0 4px 18px rgba(0,0,0,0.4);
            font-family:'JetBrains Mono',monospace; font-size:10px;
            white-space:nowrap;
        }
        #siteNav a,
        #siteNav button{
            padding:0; background:none; border:0; color:var(--scope);
            font:inherit; text-decoration:none; cursor:pointer;
        }
        #siteNav a:hover,
        #siteNav a:focus-visible,
        #siteNav button:hover,
        #siteNav button:focus-visible{ text-decoration:underline; }
        #siteNav .nav-break{ display:none; }

        /* ---------- Floating round buttons ---------- */
        .fab{
            /* fixed, not absolute: on some mobile/tablet browsers, off-viewport
               content widens the absolute-positioning containing block, which
               silently pushes every right/bottom-anchored element (all of these)
               past the visible edge. fixed pins to the true viewport instead. */
            position:fixed; z-index:1000;
            width:44px; height:44px; border-radius:50%;
            background:var(--panel); border:1px solid var(--panel-border);
            color:var(--text); display:flex; align-items:center; justify-content:center;
            cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,0.4);
            transition:background 120ms ease, transform 120ms ease, border-color 120ms ease;
        }
        .fab:hover{ border-color:var(--scope); }
        .fab:active{ transform:scale(0.94); }
        .fab svg{ width:20px; height:20px; }

        #settingsBtn{ top:16px; right:16px; }
        #radarPrecipToggle{ top:68px; right:16px; }
        #radarPrecipToggle.precip-active{ color:var(--scope); border-color:var(--scope); }
        #radarPrecipToggle .icon-radar{ display:none; }
        #radarPrecipToggle.precip-active .icon-precip{ display:none; }
        #radarPrecipToggle.precip-active .icon-radar{ display:block; }
        /* Extra 20px of clearance above the baseline spacing, so these
           controls sit further from #adDock's top edge, not flush against
           it — a bigger buffer between the ad and tappable map chrome. */
        #homeBtn{ right:16px; bottom:156px; }
        #homeBtn.home-set{ color:var(--scope); border-color:var(--scope); }
        #locateBtn{ right:16px; bottom:108px; }
        #zoomIn{ right:16px; bottom:60px; width:44px; height:36px; border-radius:10px 10px 0 0; }
        #zoomOut{ right:16px; bottom:24px; width:44px; height:36px; border-radius:0 0 10px 10px; border-top:none; }

        /* ---------- Settings panel ---------- */
        #settingsPanel{
            position:fixed; top:0; right:0; bottom:0; z-index:1001;
            width:290px; max-width:84vw;
            background:var(--panel); border-left:1px solid var(--panel-border);
            transform:translateX(100%);
            transition:transform 220ms cubic-bezier(.4,0,.2,1);
            display:flex; flex-direction:column;
            box-shadow:-8px 0 30px rgba(0,0,0,0.5);
        }
        #settingsPanel.open{ transform:translateX(0); }

        /* ---------- Weather forecast panel ---------- */
        #weatherPanel{
            position:fixed; top:0; bottom:0; left:0; z-index:1001;
            width:340px; max-width:84vw; overflow-y:auto;
            -webkit-overflow-scrolling:touch; /* momentum touch-scroll on older iOS */
            padding:14px; background:var(--panel); border-right:1px solid var(--panel-border);
            box-shadow:8px 0 30px rgba(0,0,0,0.5);
            transform:translateX(-100%); opacity:0; pointer-events:none;
            transition:transform 220ms cubic-bezier(.4,0,.2,1), opacity 160ms ease;
        }
        #weatherPanel.open{ transform:translateX(0); opacity:1; pointer-events:auto; }
        body.weather-panel-pinned gmp-map{
            left:340px; right:0; width:auto !important;
        }
        body.weather-panel-pinned #legend{ left:356px; }
        body.weather-panel-pinned #precipLegend{ left:356px; }
        .weather-panel-header{ position:relative; display:block; }
        .weather-panel-header > div:first-child{ text-align:center; }
        .weather-panel-header > .panel-close{ position:absolute; top:0; right:0; }
        .weather-panel-title{ margin:0; font-family:'Space Mono',monospace; font-size:14px; text-transform:uppercase; }
        #weatherDate, #weatherTime{
            font-family:'JetBrains Mono',monospace; color:var(--forecast-accent);
            font-size:30px; font-weight:700; line-height:1.15; letter-spacing:-0.05em;
        }
        #weatherDate{ margin-top:8px; }
        #weatherTime{ margin-top:2px; }
        #weatherLocation{ margin-top:14px; color:var(--text-dim); font-size:12px; }
        #weatherCurrent{ margin-top:6px; font-size:14px; line-height:1.45; }
        #weatherStatus{ margin:14px 0 0; color:var(--text-dim); font-size:12px; }
        #weatherDays{ display:grid; gap:1px; margin-top:14px; border:1px solid var(--panel-border); border-radius:7px; overflow:hidden; }
        .weather-day{ display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:8px; padding:9px 10px; background:rgba(255,255,255,0.02); font-size:12px; }
        .weather-day + .weather-day{ border-top:1px solid var(--panel-border); }
        .weather-day-name{ font-weight:600; }
        .weather-day-details{ min-width:0; }
        .weather-day-details > span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .weather-day-metrics{ margin-top:2px; color:var(--text-dim); font-size:10px; }
        .weather-day strong{ color:var(--forecast-accent); font-family:'JetBrains Mono',monospace; font-size:11px; white-space:nowrap; }
        .weather-hourly-label{
            margin-top:18px; font-family:'JetBrains Mono',monospace; font-size:10px;
            letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim);
        }
        #weatherHourly{
            display:grid; grid-template-columns:1fr; gap:1px; margin-top:8px;
            border:1px solid var(--panel-border); border-radius:7px; overflow:hidden;
        }
        .weather-hour{
            display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:8px;
            min-width:0; padding:9px 10px; background:rgba(255,255,255,0.02); font-size:11px;
        }
        .weather-hour + .weather-hour{ border-top:1px solid var(--panel-border); }
        .weather-hour span, .weather-hour strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .weather-hour-time{ color:var(--forecast-accent); font-family:'JetBrains Mono',monospace; font-weight:700; }
        .weather-hour strong{ font-family:'JetBrains Mono',monospace; font-size:10px; }
        .rainfall-totals{
            display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px;
        }
        .rainfall-total{
            min-width:0; padding:10px 6px; text-align:center;
            background:rgba(255,255,255,0.02); border:1px solid var(--panel-border);
            border-radius:7px;
        }
        .rainfall-total span{
            display:block; color:var(--text-dim); font-size:9px;
            letter-spacing:0.04em; text-transform:uppercase;
        }
        .rainfall-total strong{
            display:block; margin-top:4px; color:var(--forecast-accent);
            font-family:'JetBrains Mono',monospace; font-size:14px;
        }
        #rainfallStatus{ margin:8px 0 0; color:var(--text-dim); font-size:10px; line-height:1.4; }

        .panel-header{
            display:flex; align-items:center; justify-content:space-between;
            padding:16px; border-bottom:1px solid var(--panel-border);
        }
        .panel-header h2{
            margin:0; font-family:'Space Mono',monospace; font-size:14px;
            letter-spacing:0.03em; text-transform:uppercase; color:var(--text);
        }
        .panel-close{
            background:none; border:none; color:var(--text-dim); cursor:pointer;
            font-size:18px; line-height:1; padding:4px;
        }
        .panel-close:hover{ color:var(--text); }

        .panel-body{ overflow-y:auto; padding:6px 0 20px; flex:1; -webkit-overflow-scrolling:touch; }

        .group-label{
            font-family:'JetBrains Mono',monospace; font-size:10px;
            letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim);
            padding:16px 16px 8px;
        }

        .option-row{
            display:flex; align-items:center; gap:12px;
            padding:10px 16px; cursor:pointer;
            transition:background 100ms ease;
        }
        .option-row:hover{ background:rgba(94,234,212,0.06); }
        .option-row span.label{ flex:1; font-size:13px; color:var(--text); }

        input[type="radio"], input[type="checkbox"]{
            accent-color:var(--scope);
            width:16px; height:16px; flex:none; cursor:pointer;
        }

        .option-row select{
            background:var(--bg); color:var(--text);
            border:1px solid var(--panel-border); border-radius:6px;
            padding:4px 6px; cursor:pointer;
            font-family:'JetBrains Mono',monospace; font-size:12px;
        }
        .option-row.sub{ padding-left:34px; }
        .option-row.sub .label{ color:var(--text-dim); font-size:12px; }

        .option-row input[type="range"]{
            accent-color:var(--scope); width:110px; flex:none; cursor:pointer;
        }
        .option-row .value-badge{
            font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);
            min-width:34px; text-align:right; flex:none;
        }

        hr.sep{ border:none; border-top:1px solid var(--panel-border); margin:6px 16px; }

        .key-note{
            margin:4px 16px 4px; padding:8px 10px;
            background:rgba(251,113,133,0.08); border:1px solid rgba(251,113,133,0.35);
            border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
            color:var(--text-dim); line-height:1.5;
        }
        .key-note a{ color:var(--scope); }
        .key-note code{ color:var(--text); }

        /* ---------- Radar frame legend ---------- */
        #legend{
            position:fixed; left:16px; bottom:36px; z-index:1000;
            background:var(--panel); border:1px solid var(--panel-border);
            border-radius:var(--radius); padding:10px 14px;
            font-family:'JetBrains Mono',monospace; font-size:11px;
            color:var(--text-dim); min-width:150px;
        }
        #legend .frame-time{ color:var(--scope); font-size:13px; font-weight:500; }
        #legend .dots{ display:flex; gap:3px; margin-top:7px; }
        #legend .dot{
            width:5px; height:5px; border-radius:50%; background:var(--panel-border);
        }
        #legend .dot.active{ background:var(--scope); }
        #legend .dot.nowcast{ box-shadow:0 0 0 1px var(--scope); }
        #legend .radar-source{
            margin-top:6px; font-size:9px; letter-spacing:0.05em;
            text-transform:uppercase; color:var(--text-dim);
        }
        #legend .rv-attribution{ margin-top:2px; font-size:9px; color:var(--text-dim); }
        #legend .rv-attribution a{ color:var(--scope); }

        /* ---------- Precipitation scale, left-middle ---------- */
        #precipLegend{
            position:fixed; left:16px; top:50%; transform:translateY(-50%); z-index:900;
            background:var(--panel); border:1px solid var(--panel-border);
            border-radius:var(--radius); padding:10px 8px 10px 10px;
            display:none; align-items:center; gap:7px;
            font-family:'JetBrains Mono',monospace; color:var(--text-dim);
        }
        #precipLegend.show{ display:flex; }
        #precipLegend .precip-legend-title{
            writing-mode:vertical-rl; transform:rotate(180deg);
            font-size:10px; color:#fff; font-weight:600; opacity:1;
            letter-spacing:0.04em; white-space:nowrap;
        }
        #precipLegend .precip-legend-bar{
            width:12px; height:160px; border-radius:3px;
            background:linear-gradient(to top,
                #000cff 0%, #00fede 15%, #00fe00 30%,
                #feea00 45%, #fe4800 58%, #fe0000 66%,
                #fe00fe 78%, #fee8fe 100%);
            border:1px solid var(--panel-border);
        }
        #precipLegend .precip-legend-ticks{
            position:relative; width:24px; height:160px;
        }
        #precipLegend .precip-legend-ticks span{
            position:absolute; left:0; transform:translateY(50%);
            color:#fff; font-size:9px; font-weight:600;
            white-space:nowrap; opacity:1;
        }

        /* ---------- Docked ad banner, bottom-centre ---------- */
        /* Anchored to #appViewport's bottom edge, sized to its own content.
           #mapViewport's own bottom offset (--ad-dock-h, set by JS next to
           the ad script whenever this height changes) always matches this
           box's actual height, so the map area and the ad never overlap. */
        #adDock{
            position:absolute; left:0; right:0; bottom:0; z-index:1000;
            display:block; text-align:center;
            padding:0;
            background:transparent; border-top:0;
            overflow:hidden;
        }
        #adDock.filled{
            padding:12px 0;
            background:var(--panel); border-top:1px solid var(--panel-border);
        }
        #adDock.empty{ display:none; }              /* no ad served — collapse */
        /* block layout (not flex/grid) — AdSense's auto/responsive sizing script
           can't measure its container inside a flex item and collapses to 0x0 */
        #adDock .adslot{ width:100%; max-width:970px; margin:0 auto; }
        #adDock ins{ display:block; }
        /* Long inactivity (e.g. an unattended wall-mounted display) hides the
           already-served ad in favour of a quiet placeholder instead of
           leaving it on screen with nobody looking — see the inactivity
           watcher below the ad script. Never re-requests or refreshes the ad. */
        #adDock .ad-paused-msg{
            display:none; align-items:center; justify-content:center;
            padding:10px 0; font-size:11px; letter-spacing:.04em;
            text-transform:uppercase; color:var(--text-dim);
        }
        #adDock.paused .adslot ins{ display:none; }
        #adDock.paused .adslot .ad-paused-msg{ display:flex; }
        /* #adDock is normal flow below #mapViewport now, not an overlay, so
           the bottom-anchored chrome (#legend, FABs) never needs to be
           pushed up out of its way — #mapViewport already stops short of it. */

        #legend .radar-notice{
            margin-top:6px; font-size:10px; line-height:1.4;
            color:var(--alert); max-width:190px;
        }

        /* ---------- Loading / status toast ---------- */
        #toast{
            position:fixed; left:50%; top:16px; z-index:1002;
            transform:translate(-50%,-140%);
            visibility:hidden; opacity:0; pointer-events:none;
            background:var(--panel); border:1px solid var(--panel-border);
            border-left:3px solid var(--alert);
            border-radius:8px; padding:10px 16px;
            font-size:12.5px; color:var(--text);
            box-shadow:0 4px 18px rgba(0,0,0,0.4);
            transition:transform 220ms ease, opacity 220ms ease, visibility 0s linear 220ms;
            max-width:min(90vw, 420px);
            white-space:pre-line; line-height:1.45;
            max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
        }
        #toast.show{
            transform:translate(-50%,0);
            visibility:visible; opacity:1; pointer-events:auto;
            transition-delay:0s;
        }

        /* ---------- Refreshing indicator ---------- */
        #refreshingIndicator{
            position:fixed; top:50%; left:50%; z-index:999;
            transform:translate(-50%, -50%);
            display:none; align-items:center; gap:8px;
            background:var(--panel); border:1px solid var(--panel-border);
            border-radius:var(--radius); padding:12px 16px;
            font-size:12px; color:var(--text);
            box-shadow:0 4px 18px rgba(0,0,0,0.4);
        }
        #refreshingIndicator.show{ display:flex; }
        #refreshingIndicator .spinner{
            color:var(--scope);
            animation:spin 1s linear infinite;
        }
        @keyframes spin{ to{ transform:rotate(360deg); } }

        /* ---------- Blocking notice shown only if Maps fails to load ---------- */
        #keyGate{
            position:fixed; inset:0; z-index:2000;
            background:var(--bg); display:flex; align-items:center; justify-content:center;
            padding:24px; text-align:center;
        }
        #keyGate.hidden{ display:none; }
        #keyGate .box{ max-width:420px; }
        #keyGate h1{ font-family:'Space Mono',monospace; font-size:18px; margin:0 0 12px; }
        #keyGate p{ color:var(--text-dim); font-size:13.5px; line-height:1.6; margin:0 0 8px; }
        #keyGate code{
            display:block; margin-top:14px; padding:10px 12px; background:var(--panel);
            border:1px solid var(--panel-border); border-radius:8px; color:var(--scope);
            font-family:'JetBrains Mono',monospace; font-size:12px; text-align:left;
        }
        #keyGate a{ color:var(--scope); }

        /* ---------- Blocking notice for unsupported (too-old) devices ---------- */
        #compatWarning{
            position:fixed; inset:0; z-index:2200;
            background:var(--bg); display:none; align-items:center; justify-content:center;
            padding:24px; text-align:center;
        }
        #compatWarning.show{ display:flex; }
        #compatWarning .box{ max-width:420px; }
        #compatWarning h1{ font-family:'Space Mono',monospace; font-size:18px; margin:0 0 12px; }
        #compatWarning p{ color:var(--text-dim); font-size:13.5px; line-height:1.6; margin:0 0 8px; }

        @media (max-width:560px){
            #settingsPanel{ width:100%; max-width:100%; }
            #weatherPanel{ width:100%; max-width:100%; }
            body.weather-panel-pinned gmp-map{ left:0; width:100% !important; }
            body.weather-panel-pinned #legend{ left:16px; }
            body.weather-panel-pinned #precipLegend{ left:16px; }
            #siteNav{
                left:8px; right:8px; transform:none;
                display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px;
                padding:8px 10px; overflow:visible; border-radius:14px;
                font-size:12px; text-align:center;
            }
            #siteNav .nav-break{ display:block; flex-basis:100%; height:0; }
            #settingsBtn{ top:76px; }
            #radarPrecipToggle{ top:128px; }
            #precipLegend .precip-legend-bar,
            #precipLegend .precip-legend-ticks{ height:120px; }
        }

        @media (min-width:561px) and (max-width:1050px){
            #siteNav{
                left:252px; right:68px; transform:none; gap:8px;
                padding:7px 8px; overflow-x:auto; justify-content:flex-start;
                -webkit-overflow-scrolling:touch;
            }
        }

        @media (min-width:561px) and (max-width:1050px) and (orientation:portrait){
            #siteNav{
                left:50%; right:auto; transform:translateX(-50%);
                display:flex; flex-wrap:wrap; justify-content:center;
                gap:6px 12px; overflow:visible; border-radius:14px;
                font-size:12px; text-align:center;
            }
            #siteNav .nav-break{ display:block; flex-basis:100%; height:0; }
        }

        /* Phone in landscape: short viewport height, so lay the top-right
           buttons out in a row instead of stacking them vertically. */
        @media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
            #siteNav{
                left:50%; right:auto; transform:translateX(-50%);
                display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px;
                padding:7px 10px; overflow:visible; border-radius:14px;
                font-size:12px; text-align:center;
            }
            #siteNav .nav-break{ display:block; flex-basis:100%; height:0; }
            #settingsBtn{ top:16px; right:16px; }
            #radarPrecipToggle{ top:16px; right:68px; }
        }

        /* Tablets previously needed a reserved gap here because the ad dock
           was a position:fixed overlay and fill was often slow/unreliable at
           this width (see adsense-setup memory) — #adDock is normal flow now
           (see "Docked ad banner" above), so #mapViewport already excludes
           its height up front regardless of fill timing. Nothing to do here. */