/* v3.2.6 A: full-screen interactive weather radar (/weather/radar). Phone-first, safe-area aware. */
.wxm-head{padding:8px 0 4px}.wxm-crumb{margin:0 0 4px}.wxm-intro{margin:0 0 8px;max-width:54ch}
.wxm{--wxm-ocean:var(--ocean);--wxm-land:var(--chip);--wxm-border:var(--muted);position:relative;height:min(78vh,720px);min-height:340px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--ocean);isolation:isolate}
.wxm.wxm-fs{position:fixed;inset:0;z-index:50;height:100dvh;min-height:100vh;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}
.wxm-map{position:absolute;inset:0;z-index:0}
.wxm-map.leaflet-container{background:var(--wxm-ocean);font:inherit}
.wxm-map canvas,.wxm-map svg,.wxm-map img{max-width:none!important}   /* the site-wide media guard (max-width:100%) would squash Leaflet canvases to 0 inside its 0-width panes */
.wxm-map .leaflet-control-attribution{font-size:10px;background:color-mix(in srgb,var(--panel) 85%,transparent)!important;color:var(--muted)!important;max-width:70%;padding:2px 6px}
.wxm-map .leaflet-control-zoom a{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important;width:36px;height:36px;line-height:36px;font-size:18px}
.wxm-map .leaflet-bar{border:1px solid var(--line)!important;box-shadow:var(--shadow)}
.wxm-top{position:absolute;top:10px;left:10px;right:10px;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none}
.wxm-top > *{pointer-events:auto}
.wxm-time{margin:0;padding:6px 10px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);max-width:min(60%,280px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wxm-tbtns{display:flex;gap:6px}
.wxm-btn{appearance:none;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(8px);color:var(--ink);border-radius:999px;padding:8px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:6px;line-height:1}
.wxm-btn:hover,.wxm-btn[aria-pressed=true],.wxm-btn[aria-expanded=true]{border-color:var(--brand);color:var(--brand)}
.wxm-btn:disabled{opacity:.45;cursor:not-allowed}
.wxm-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wxm-locate{width:44px;height:44px;padding:0;justify-content:center;font-size:20px;border-radius:50%}
.wxm-locate.leaflet-control{margin:0 10px 8px 0;clear:both;float:right}
.wxm-map .leaflet-bottom{bottom:76px}                                  /* zoom, locate and credits sit above the play bar */
.wxm.wxm-fs .wxm-map .leaflet-bottom{bottom:calc(80px + env(safe-area-inset-bottom))}
.wxm.wxm-fs .wxm-map .leaflet-right{right:env(safe-area-inset-right)}.wxm.wxm-fs .wxm-map .leaflet-left{left:env(safe-area-inset-left)}
.wxm.wxm-fs .wxm-top{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right))}
.wxm.wxm-fs .wxm-layers{top:calc(54px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}
.wxm-bottom{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 10px;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.wxm.wxm-fs .wxm-bottom{bottom:calc(10px + env(safe-area-inset-bottom));left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right))}
.wxm-play{flex:0 0 auto;min-width:44px;justify-content:center}
.wxm-range{flex:1 1 auto;min-width:0;accent-color:var(--brand);height:28px}
.wxm-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);flex:0 0 auto}
.wxm-legend i{display:block;width:56px;height:8px;border-radius:4px;background:linear-gradient(90deg,#00a3e0,#005588,#ffaa00,#c10000,#ff77ff)}   /* RainViewer "Universal Blue" (scheme 2): 20 / 30 / 40 / 50 / 60 dBZ */ .wxm-x{}
.wxm-layers{position:absolute;top:52px;right:10px;z-index:6;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-hover);min-width:200px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.wxm-layers label{display:flex;align-items:center;gap:8px;cursor:pointer}
.wxm-lh{margin:0 0 4px}
.wxm-msg{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);z-index:7;margin:0;padding:8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:999px;font-size:13px;box-shadow:var(--shadow);max-width:min(90%,340px);text-align:center}
.wxm-note{margin:10px 0 0}
.wxm-lists{margin-top:18px}
.wxm-alerts{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.wxm-alerts li{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.wxm-alerts .sev{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;padding:1px 7px;border-radius:4px;margin-right:6px;background:var(--chip)}
.wxm-alerts .sev-Extreme{background:#7f1d14;color:#fff}.wxm-alerts .sev-Severe{background:#c2410c;color:#fff}.wxm-alerts .sev-Moderate{background:#a16207;color:#fff}
.wxm-alerts a{font-weight:700}
.wxm-marker{background:var(--brand);color:#fff;border:2px solid #fff;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.wxm-you{background:#2563eb}
.wxm-alert-poly{fill-opacity:.28;stroke-width:1.5}
@media(max-width:720px){
  .wxm{height:min(70vh,560px);min-height:300px;border-radius:10px}
  .wxm-bl{display:none}                         /* icon-only buttons on phones; aria-label / title keep the name */
  .wxm-btn{padding:10px;min-width:44px;min-height:44px;justify-content:center}
  .wxm-legend span:first-child,.wxm-legend span:last-child{display:none}
  .wxm-legend i{width:40px}
  .wxm-time{font-size:12px;padding:5px 8px;max-width:55%}
  .wxm-head{padding:2px 0 0}.wxm-head h1{font-size:22px;margin:0 0 6px}.wxm-intro{display:none}  /* phone-first: the map gets the screen */
  body:has(.wxm.wxm-fs) .tabbar,body:has(.wxm.wxm-fs) .site-header{visibility:hidden}  /* full-screen owns the phone */
}
@media(prefers-reduced-motion:reduce){.wxm-btn,.wxm{transition:none}}