[hidden] { display: none !important; }
.view-tabs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.view-tabs button, .radar-toolbar button { padding:11px 16px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); cursor:pointer; font:inherit; }
.view-tabs button[aria-pressed="true"] { background:var(--accent); color:white; }
#radar-panel { background:var(--panel); padding:clamp(12px,3vw,26px); border:1px solid var(--line); border-radius:18px; box-shadow:var(--soft-shadow); }
.radar-heading, .radar-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.radar-heading h2 { margin:0; } .radar-heading p, .radar-notes { color:var(--muted); line-height:1.6; }
.radar-heading select { max-width:100%; padding:10px; font:inherit; border:1px solid var(--line); border-radius:8px; background:white; }
.radar-heading label { min-width:0; } .radar-toolbar { justify-content:flex-start; margin:16px 0; }
.radar-toolbar label { display:flex; align-items:center; gap:8px; }
#rain-map { height:clamp(340px,60vh,660px); border-radius:12px; background:#e4ece8; isolation:isolate; }
.radar-timeline { display:grid; gap:10px; margin-top:18px; } .radar-timeline input { width:100%; }
#radar-timestamp { font-weight:600; } .radar-notes { font-size:.88rem; } .radar-notes a { color:var(--accent-strong); }
.radar-toolbar button:disabled { opacity:.5; cursor:default; }
.view-tabs button:focus-visible, #radar-panel :focus-visible { outline:3px solid #0891b2; outline-offset:3px; }

/* Interpolate enlarged radar pixels; keep map labels and distance rings sharp. */
#rain-map .leaflet-rainRadar-pane img { image-rendering: auto; }

.radar-scale { display:flex; margin-top:12px; overflow-x:auto; border:1px solid var(--line); border-radius:8px; font-size:.75rem; font-weight:700; }
.radar-scale-unit { background:#edf4f1; color:var(--ink); padding:8px; white-space:nowrap; display:flex; align-items:center; }
.radar-scale-step { flex:1 0 39px; padding:8px 5px; text-align:center; background:var(--scale-color); color:var(--scale-ink); }
.radar-legend { margin-top:10px; font-size:.82rem; color:var(--muted); line-height:1.5; }
.radar-legend summary { cursor:pointer; color:var(--accent-strong); font-weight:600; padding:5px 0; }
.radar-legend table { border-collapse:collapse; width:100%; max-width:480px; color:var(--ink); margin:12px 0; }
.radar-legend th, .radar-legend td { padding:6px 10px; text-align:left; border-bottom:1px solid var(--line); }
.radar-legend caption { text-align:left; margin-bottom:8px; }
.radar-color-swatch { display:block; width:52px; height:20px; border:1px solid #87958f; border-radius:4px; }
.radar-legend a { color:var(--accent-strong); }

.radar-toolbar .radar-icon-button { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; padding:10px; flex:0 0 46px; }
.radar-icon-button svg { display:block; }
.radar-pause-symbol { display:none; }
#radar-play[aria-pressed="true"] .radar-play-symbol { display:none; }
#radar-play[aria-pressed="true"] .radar-pause-symbol { display:inline; }
.radar-toolbar .radar-icon-button:hover:not(:disabled) { background:#edf6f2; border-color:var(--accent); }

.radar-map-time { margin:10px 0; font-size:.9rem; line-height:1.5; color:var(--accent-strong); }

.rain-alert-settings { margin:14px 0; padding:14px; background:#f3f8f5; border:1px solid var(--line); border-radius:12px; line-height:1.6; }
.rain-alert-settings summary { cursor:pointer; font-weight:600; color:var(--accent-strong); }
.rain-alert-settings fieldset { display:grid; gap:6px; border:1px solid var(--line); margin-bottom:12px; }
.rain-alert-settings select { padding:8px; max-width:100%; font:inherit; }
.rain-alert-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.rain-alert-actions button { padding:9px 13px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--ink); font:inherit; cursor:pointer; }
.rain-alert-actions button:disabled { opacity:.5; cursor:default; }
.rain-alert-settings small { display:block; color:var(--muted); }

.rain-alert-settings fieldset { min-width:0; }