#chart.panel{background:#2c3034;border-color:var(--navy)}
.rhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:10px 14px;background:#383c41;color:#fff}
.rhead .lab{font:700 12px var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:#b9c0c6;line-height:1.2}
.rhead .lab b{display:block;font:800 15px var(--body);text-transform:none;letter-spacing:0;color:#fff}
.rhead #rval{font:800 30px var(--body);color:#fff;font-variant-numeric:tabular-nums}
.rhead #rval small{font-size:18px}
.rhead #rval em{font-style:normal;margin:0 6px}
.rhead #rval span{font:600 16px var(--body);color:#d6dbe0}
/* isolation keeps Leaflet's own z-indexes (panes 400+, controls 1000) inside the map, so it can't paint over the sticky header;
   contain:paint makes every browser (Safari included) clip the map's layers to the box. */
#radar{width:100%;height:clamp(340px,52vh,480px);background:#1e2a36;isolation:isolate;contain:paint}
.rlab span{position:absolute;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none}
.rlab.land span{font:800 12px var(--narrow);text-transform:uppercase;letter-spacing:.18em;color:#3b4a5a;text-shadow:0 0 3px #e6d7b4,0 0 3px #e6d7b4}
.rlab.sea span{font:italic 600 14px Georgia,serif;letter-spacing:.06em;color:#f6efdf;text-shadow:0 1px 2px rgba(31,48,68,.9)}
.rlab.small span{font-size:11px}
.rparts{position:absolute;inset:0;z-index:470;pointer-events:none}
.rbar{display:flex;flex-direction:column;background:#3a3e43;color:#fff}
.rtop{display:flex;align-items:center;gap:12px;padding:10px 14px 4px}
#play{width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#2c3034;display:flex;align-items:center;justify-content:center;flex:none}
#play::before{content:"";border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
#play[aria-pressed="true"]::before{border:0;width:11px;height:14px;margin:0;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
#slider{flex:1;accent-color:var(--mustard);min-width:0}
#rtime{background:var(--mustard);color:#1f3044;font:800 14px var(--body);border-radius:6px;padding:6px 10px;white-space:nowrap}
#rdays{display:flex;gap:2px;padding:6px 14px 10px;overflow:hidden}
#rdays button{border:0;background:#2c3034;color:#d6dbe0;font:700 13px var(--body);padding:8px 6px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#rdays button[aria-pressed="true"]{background:#4a4f55;color:#fff;box-shadow:inset 0 3px 0 var(--mustard)}
#rlegend{padding:0 14px 12px;background:#3a3e43}
#rlegend .grad{height:12px;border-radius:2px}
#rlegend .ticks{display:flex;justify-content:space-between;font:700 11px var(--narrow);color:#d6dbe0;padding-top:4px}
#rlegend .ticks span:first-child::after{content:" m"}
.rpop .leaflet-popup-content{font:600 14px var(--body)}
@media (max-width:760px){#radar{height:min(380px,58vh)}.rlab.small{display:none}#radar .leaflet-control-attribution{font-size:10px;line-height:1.3}.rhead #rval{font-size:24px}}