body[data-page="radar"] .radar-hero{padding:28px 0}
body[data-page="radar"] .radar-hero h1{font-size:42px;margin:4px 0}
body[data-page="radar"] .radar-hero p{font-size:15px;margin:7px 0 0}
body[data-page="radar"] .radar-shell{padding-top:28px;padding-bottom:38px}
.interactive-radar{--radar-text:#e5f1f4;background:#101f2a!important;color:var(--radar-text);border:1px solid #344955;border-radius:20px;isolation:isolate}
.interactive-radar .radar-toolbar{padding:14px 18px;gap:16px;border-color:#30424e;flex-wrap:wrap}
.radar-mode-label{font-size:11px;font-weight:700;color:#9eb7c3;letter-spacing:.04em;display:flex;align-items:center;gap:12px}
.interactive-radar select,.interactive-radar button{font:600 13px "Segoe UI",Arial,sans-serif;color:#e5f1f4;background:#213641;border:1px solid #435c67;border-radius:9px;padding:10px 12px;cursor:pointer;min-height:40px}
.interactive-radar select{min-width:225px;color-scheme:dark}
.interactive-radar button:hover{background:#304b58}
.interactive-radar button:disabled{opacity:.45;cursor:wait}
.interactive-radar :focus-visible{outline:2px solid #74e1c5;outline-offset:3px}
.radar-actions{display:flex;gap:8px}
.radar-map-wrap{position:relative}
#radar-map{height:clamp(380px,58vh,620px);background:#17232c;z-index:0}
.radar-scan{position:absolute;right:14px;top:14px;z-index:450;pointer-events:none;background:rgba(11,27,38,.9);border:1px solid #405866;padding:9px 13px;border-radius:10px;box-shadow:0 3px 14px #0003;text-align:right}
.radar-scan span{display:block;color:#9bc4cf;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.radar-scan strong{font-size:15px;font-variant-numeric:tabular-nums}
#radar-message{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:450;background:#122f40ee;color:#e5f1f4;border:1px solid #5b8495;border-radius:9px;font-size:12px;padding:8px 12px;max-width:90%;width:max-content}
#radar-message[hidden]{display:none}
.radar-playback{padding:12px 18px;display:flex;align-items:center;gap:14px;border-top:1px solid #30424e}
#radar-play{min-width:87px;background:#236c62;border-color:#34887b}
.radar-timeline{flex:1;min-width:0}
#radar-timeline{display:block;width:100%;accent-color:#66d4b9;cursor:pointer;margin:0;height:20px}
.radar-timeline>div{display:flex;justify-content:space-between;color:#a2bac6;font-size:10px;font-variant-numeric:tabular-nums}
.radar-legend{border-top:1px solid #30424e;padding:12px 18px 14px}
.radar-legend>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center}
.radar-legend b{font-size:12px}.radar-legend span{color:#94adb9;font-size:11px}
.radar-legend-image{overflow-x:auto;margin-top:9px}
#radar-legend{width:500px;max-width:none;height:30px;display:block;background:#fff;border-radius:3px}
#radar-legend[hidden]{display:none}
.radar-legend p{font-size:12px;color:#a9c0ca;margin:8px 0 0;line-height:1.5}
.radar-footnote{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);padding:13px 2px}
.radar-footnote a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
#radar-map .leaflet-control-zoom a{background:#142c3a;color:#e5f1f4;border-color:#415561}
#radar-map .leaflet-control-attribution{background:#142635dd;color:#aac2cf;font-size:9px}
#radar-map .leaflet-control-attribution a{color:#c5d9e2}
#radar-map .leaflet-tooltip.tow-label{background:#112b39;color:white;border:1px solid #70e3c6;box-shadow:0 2px 8px #0005;font-size:11px;font-weight:700;padding:4px 8px}
#radar-map .leaflet-tooltip-right:before{border-right-color:#70e3c6}
.radar-zoom-hint{background:#142635dd;color:#bfd3dd;padding:5px 7px;border-radius:4px;font-size:9px;line-height:1.3;max-width:78px}
.interactive-radar:fullscreen,.interactive-radar.radar-expanded{display:flex;flex-direction:column;border:0;border-radius:0;width:100%;height:100%;background:#101f2a}
.interactive-radar.radar-expanded{position:fixed;inset:0;z-index:10000;height:100dvh}
.interactive-radar:fullscreen .radar-map-wrap,.interactive-radar.radar-expanded .radar-map-wrap{flex:1;min-height:0}
.interactive-radar:fullscreen #radar-map,.interactive-radar.radar-expanded #radar-map{height:100%}
body.radar-lock{overflow:hidden}
@media(max-width:650px){
 body[data-page="radar"] .radar-hero h1{font-size:34px}
 body[data-page="radar"] .radar-shell{width:calc(100% - 22px);padding-top:16px}
 .interactive-radar .radar-toolbar{padding:12px;gap:10px;flex-direction:row;align-items:center}
 .radar-mode-label{display:block;flex:1;min-width:180px}
 .interactive-radar select{display:block;width:100%;min-width:0;margin-top:4px;font-size:14px}
 .radar-actions{width:100%}.radar-actions button{flex:1}
 #radar-map{height:440px;max-height:62vh;min-height:330px}
 .radar-playback{padding:10px;gap:8px}
 .radar-legend{padding:12px}.radar-legend>div:first-child{align-items:start;flex-direction:column;gap:3px}
 .radar-footnote{flex-direction:column;gap:5px}
 .radar-scan{right:9px;top:9px}.radar-scan strong{font-size:13px}
 .interactive-radar:fullscreen #radar-map,.interactive-radar.radar-expanded #radar-map{max-height:none;min-height:0}
}

/* Expanded radar products and map preferences */
.radar-settings{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid #30424e;background:#142732}
.radar-settings label{font-size:11px;color:#b5cbd4;display:flex;align-items:center;gap:7px;white-space:nowrap}
.radar-settings input{accent-color:#66d4b9}
.radar-settings input[type="checkbox"]{width:16px;height:16px;margin:0;cursor:pointer}
.radar-settings select{min-width:0!important;padding:5px 8px;min-height:32px;font-size:12px}
.radar-opacity-label{flex:1;min-width:175px}
#radar-opacity{width:90px;flex:1;max-width:150px;cursor:pointer}
#radar-opacity-value{min-width:28px}
.radar-alert-info{padding:8px 18px 11px;border-top:1px solid #30424e;color:#9eb8c5;display:flex;gap:14px;align-items:start;justify-content:space-between;font-size:11px}
.radar-alert-info summary{cursor:pointer;color:#c4dce7;white-space:nowrap}
#radar-alert-legends>div{display:flex;flex-wrap:wrap;gap:15px;max-height:200px;overflow:auto;padding-top:8px}
#radar-alert-legends figure{margin:0}#radar-alert-legends figcaption{margin-bottom:5px}
#radar-alert-legends img{display:block;max-width:240px;background:white}
.interactive-radar:fullscreen .radar-alert-info,.interactive-radar.radar-expanded .radar-alert-info{flex-shrink:0}
@media(max-width:650px){.radar-settings{gap:10px 14px;padding:10px 12px}.radar-settings label{font-size:11px}.radar-opacity-label{flex-basis:100%}.radar-settings select{margin:0!important;width:auto!important}.radar-alert-info{padding:8px 12px;flex-wrap:wrap}.radar-alert-info>span{flex:1;min-width:190px}}
@media(max-height:620px){.interactive-radar:fullscreen .radar-legend p,.interactive-radar.radar-expanded .radar-legend p{display:none}.interactive-radar:fullscreen .radar-toolbar,.interactive-radar.radar-expanded .radar-toolbar{padding-block:6px}}

/* Readable, touch-friendly NWS alert inspection. */
#radar-map .radar-alert-tooltip{background:#112b39;color:#fff;border:1px solid #70e3c6;box-shadow:0 3px 15px #0006;max-width:260px;white-space:normal}
.radar-alert-tooltip strong,.radar-alert-tooltip small{display:block}
.radar-alert-tooltip small{color:#bdd4dd;margin-top:4px}
#radar-map .radar-alert-popup .leaflet-popup-content-wrapper,#radar-map .radar-alert-popup .leaflet-popup-tip{background:#112b39;color:#e5f1f4}
#radar-map .radar-alert-popup .leaflet-popup-content{font:13px/1.5 "Segoe UI",Arial,sans-serif;max-width:calc(100vw - 95px)}
#radar-map .radar-alert-popup a{color:#80e9cd}
#radar-map .radar-alert-popup .leaflet-popup-close-button{color:#fff;font-size:24px;width:32px;height:32px}
.radar-alert-content h3{color:#80e9cd;font-size:17px;line-height:1.3;margin:0 0 10px}
.radar-alert-content h4{color:#e5f1f4;font-size:14px;margin:12px 0 4px}
.radar-alert-content p{margin:8px 0}
.radar-alert-content section+section{border-top:1px solid #46616d;margin-top:16px;padding-top:16px}
.radar-alert-content .radar-alert-body{white-space:pre-line}

#radar-map .radar-alert-tooltip{min-width:180px;padding:8px 10px}