.radar-section { margin-top:36px; }
.radar-heading,.radar-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.radar-heading { margin-bottom:16px; gap:20px; }
.radar-meta { font-size:12px; color:var(--muted); line-height:1.7; margin:10px 0 0; }
.radar-heading .radar-meta { margin:5px 0 0; }
.radar-panel { border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); }
.radar-map { height:460px; background:var(--soft); isolation:isolate; }
.radar-map .leaflet-control-attribution { font-size:10px; }
.radar-map .leaflet-control-zoom a { color:var(--text); background:var(--panel); }
.radar-controls { padding:18px 22px; display:flex; align-items:center; gap:22px; }
.radar-controls button { min-width:92px; }
.radar-timeline { flex:1; min-width:0; }
.radar-timeline label,.radar-range { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); }
.radar-timeline output { color:var(--text); font-variant-numeric:tabular-nums; text-align:right; }
.radar-timeline input { display:block; width:100%; margin:8px 0; min-height:24px; accent-color:var(--rain); cursor:pointer; }
.radar-credit { max-width:900px; }
.radar-map .leaflet-container { font-family:inherit; }
@media(max-width:600px) { .radar-heading { align-items:flex-start; flex-direction:column; } .radar-actions { width:100%; } .radar-actions .pill { flex:1; } .radar-map { height:360px; } .radar-controls { padding:16px; gap:12px; } .radar-controls button { min-width:76px; padding:9px 12px; } .radar-timeline label { flex-direction:column; gap:2px; } .radar-timeline output { text-align:left; } }

.radar-legends { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:14px; }
.radar-legend { display:flex; align-items:center; gap:9px; font-size:11px; color:var(--muted); }
.radar-legend i { width:110px; height:8px; border-radius:10px; background:linear-gradient(90deg,#88ddee,#00a3e0,#005588,#ffee00,#ffaa00,#ff4400); }

.radar-legend strong { min-width:34px; font-weight:600; color:var(--text); }
.radar-legend-snow i { background:linear-gradient(90deg,#bfffff,#9fdfff,#7fbfff,#5f9fff,#3f7fff,#1f5fff,#003fff); }


.radar-section [hidden] { display:none !important; }
.radar-map-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.radar-layer-switches { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--soft); }
.radar-layer-switches label { position:relative; cursor:pointer; }
.radar-layer-switches input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.radar-layer-switches span { display:flex; align-items:center; justify-content:center; min-height:42px; min-width:84px; padding:0 14px; border-radius:999px; color:var(--muted); font-size:13px; font-weight:500; }
.radar-layer-switches input:checked + span { background:var(--panel); color:var(--text); box-shadow:0 2px 6px #00000012; }
.radar-layer-switches input:focus-visible + span { outline:2px solid var(--rain); outline-offset:2px; }
.radar-layer-switches input:disabled + span { opacity:0.55; }
.radar-mode { font-size:11px; color:var(--muted); }
.radar-section .radar-actions { justify-content:flex-end; margin-bottom:12px; }
.radar-forecast-map { height:560px; background:#283e50; }
.radar-windy-frame { display:block; width:100%; height:100%; border:0; }
.radar-forecast-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:12px; font-size:11px; color:var(--muted); }
.radar-forecast-caption a { color:var(--text); text-decoration:none; }
.radar-source-note { color:var(--muted); font-size:11px; margin-top:14px; }
.radar-source-note summary { cursor:pointer; padding:8px 0; }
@media(max-width:600px) {
  .radar-layer-switches {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:6px;
    padding:6px;
    border-radius:28px;
  }
  .radar-layer-switches label { min-width:0; }
  .radar-layer-switches span {
    min-width:0;
    min-height:44px;
    padding:0 6px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:12px;
    transition:background .18s,color .18s,border-color .18s;
  }
  .radar-layer-switches label:hover input:not(:disabled):not(:checked) + span {
    background:color-mix(in srgb,var(--panel) 65%,transparent);
    color:var(--text);
  }
  .radar-layer-switches input:checked + span {
    border-color:color-mix(in srgb,var(--rain) 40%,var(--line));
    color:var(--rain);
    font-weight:600;
    box-shadow:0 2px 5px #0000000a;
  }
  .radar-layer-switches input:focus-visible + span { outline-offset:0; }
  .radar-forecast-map { height:520px; }
  .radar-panel { border-radius:16px; }
}


.smoke-legend { margin-top:16px; color:var(--muted); font-size:11px; }
.smoke-legend strong { display:block; margin-bottom:8px; font-weight:500; }
.smoke-scale { display:flex; width:min(100%,420px); }
.smoke-scale span { flex:1; border-top:8px solid; padding-top:5px; }
.smoke-scale span:nth-child(1) { border-color:#fade8f; }
.smoke-scale span:nth-child(2) { border-color:#f6b94f; }
.smoke-scale span:nth-child(3) { border-color:#e68230; }
.smoke-scale span:nth-child(4) { border-color:#c84e2b; }
.smoke-scale span:nth-child(5) { border-color:#973044; }
.smoke-scale span:nth-child(6) { border-color:#5c2459; }

.lightning-toggle { position:relative; display:inline-flex; margin-right:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lightning-toggle input { position:absolute; width:1px; height:1px; padding:0; margin:0; opacity:0; }
.lightning-toggle-body { box-sizing:border-box; display:flex; align-items:center; gap:9px; width:100%; min-height:44px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--text); transition:background .18s,border-color .18s; }
.lightning-toggle:hover .lightning-toggle-body { background:var(--soft); }
.lightning-toggle-icon { width:17px; height:17px; flex-shrink:0; color:var(--muted); }
.lightning-toggle-label { display:flex; align-items:baseline; gap:7px; font-size:13px; font-weight:500; }
.lightning-toggle-region { color:var(--muted); font-size:10px; font-weight:400; }
.lightning-toggle-track { position:relative; flex-shrink:0; width:30px; height:18px; margin-left:auto; border-radius:999px; background:var(--muted); transition:background .18s; }
.lightning-toggle-track::after { content:""; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:var(--panel); box-shadow:0 1px 2px #0002; transition:transform .18s; }
.lightning-toggle input:checked + .lightning-toggle-body { background:var(--glow); border-color:var(--sun); }
.lightning-toggle input:checked + .lightning-toggle-body .lightning-toggle-icon { color:var(--sun); }
.lightning-toggle input:checked + .lightning-toggle-body .lightning-toggle-track { background:var(--sun); }
.lightning-toggle input:checked + .lightning-toggle-body .lightning-toggle-track::after { transform:translateX(12px); }
.lightning-toggle input:focus-visible + .lightning-toggle-body { outline:3px solid var(--rain); outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .lightning-toggle-body,.lightning-toggle-track,.lightning-toggle-track::after { transition:none; } }
.lightning-legend { box-sizing:border-box; width:100%; max-width:420px; margin:12px 0 16px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.lightning-legend figcaption { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-bottom:14px; }
.lightning-legend strong { color:var(--text); font-size:12px; font-weight:500; }
.lightning-legend figcaption span { color:var(--muted); font-size:10px; }
.lightning-legend-bar { height:12px; border-radius:6px; background:linear-gradient(90deg,#000078,#0002cc,#003bfd,#03b3fa,#30fccd,#94fc69,#e4e919,#fd9b00,#fd3700,#d10400,#820000); box-shadow:inset 0 0 0 1px #00000012; }
.lightning-legend-ticks { display:flex; justify-content:space-between; margin-top:7px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.lightning-legend-ticks span { width:0; display:flex; justify-content:center; }
.lightning-legend-ticks span:first-child { justify-content:flex-start; }
.lightning-legend-ticks span:last-child { justify-content:flex-end; }
@media(max-width:600px) { #radarObserved > .radar-actions { flex-wrap:wrap; } .lightning-toggle { flex-basis:100%; } }

.radar-layer-switches { flex-wrap:wrap; }
.radar-layer-switches span { white-space:nowrap; }
.ptype-legend { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:16px; color:var(--text); font-size:11px; }
.ptype-legend > span { display:flex; align-items:center; gap:7px; }
.ptype-legend i { display:block; width:48px; height:10px; border-radius:5px; box-shadow:inset 0 0 0 1px #00000015; }
.ptype-snow { background:linear-gradient(90deg,#7fdfeb,#47a4f0,#0000e0); }
.ptype-mixed { background:linear-gradient(90deg,#e0bde6,#c36dd2,#9b27af); }
.ptype-rain { background:linear-gradient(90deg,#9afd9a,#00cb00,#008000); }
.ptype-hail { background:#fec007; }
.ptype-freezing { background:linear-gradient(90deg,#fecbc8,#fe1e0d); }

@media(prefers-reduced-motion:reduce) { .radar-layer-switches span { transition:none; } }

/* Readable controls and legends without squeezing the phone map. */
@media (max-width:700px) {
  .radar-section { margin-top:30px; }
  .radar-map-toolbar { gap:10px; }
  .radar-layer-switches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:6px; padding:6px; border-radius:28px; }
  .radar-layer-switches label { min-width:0; }
  .radar-layer-switches span { min-width:0; min-height:46px; padding:0 4px; font-size:14px; }
  .radar-mode,.radar-meta,.radar-source-note,.radar-forecast-caption { font-size:13px; line-height:1.65; }
  .radar-actions { flex-wrap:wrap; }
  .radar-actions .pill { flex:1; min-height:44px; }
  .lightning-toggle { flex-basis:100%; margin-right:0; }
  .lightning-toggle-body { min-height:46px; }
  .lightning-toggle-label { font-size:14px; }
  .lightning-toggle-region { font-size:12px; }
  .radar-map { height:360px; height:clamp(300px,48svh,440px); }
  .radar-forecast-map { height:480px; }
  .radar-controls { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:16px; }
  .radar-controls button { justify-self:start; min-width:92px; }
  .radar-timeline label { flex-direction:row; flex-wrap:wrap; font-size:13px; gap:4px 12px; }
  .radar-timeline output { text-align:left; }
  .radar-timeline input { min-height:44px; margin:4px 0; }
  .radar-range { font-size:12px; }
  .radar-legends { display:grid; gap:10px; }
  .radar-legend { font-size:13px; }
  .radar-legend i { flex:1; max-width:180px; min-width:40px; }
  .radar-source-note summary { display:flex; align-items:center; min-height:44px; }
  .ptype-legend,.smoke-legend { font-size:13px; }
  .lightning-legend figcaption span,.lightning-legend-ticks { font-size:12px; }
}