/* Public /storm-map/ styles. Fixed px type scale: 11 (map attribution) / 12 / 13 / 14 / 20.
   One family (site sans: Source Sans 3, self-hosted), line-height 1.45, 4/8/12/16 px spacing. */
:root{--navy:#132033;--cream:#F7F4EF;--gold:#9A6A3A;--gold-lt:#d9c3a5;--muted:#4a5566;--line:#e3dccf;--r64:#c0262d;--r50:#e8792b;--r34:#f2c94c;
  --sans:"Source Sans 3","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--navy);background:var(--navy);-webkit-font-smoothing:antialiased}
a{color:inherit}
header{position:absolute;top:0;left:0;right:0;z-index:1000;background:rgba(19,32,51,.96);color:var(--cream);display:flex;align-items:center;gap:24px;padding:12px 16px;border-bottom:3px solid var(--gold)}
.brand{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 4px}
header h1{margin:0;font-size:20px;line-height:1.2;font-weight:700;white-space:nowrap}
.stats{display:flex;gap:4px 16px;flex-wrap:wrap;font-size:13px}
.stats b{color:#fff;font-weight:600}
.credit{margin-left:auto;font-size:12px;text-align:right;color:#cdbfae}
.credit a{color:#e9d6bd}
#map{position:absolute;top:68px;bottom:0;left:0;right:0}
.panel{position:absolute;z-index:999;background:rgba(247,244,239,.97);border:1px solid rgba(19,32,51,.18);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.25);padding:12px 16px}
.panel h2,.panel label.h{display:block;margin:0 0 8px;font-size:12px;line-height:1.45;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}
#legend{left:16px;top:184px;bottom:40px;width:300px;overflow:auto}
#side{right:16px;top:84px;width:300px;max-height:calc(100% - 112px);overflow:auto}
.row{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.row.sub{margin-top:12px;font-weight:600}
.sw{flex:none;width:16px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.25)}
.sw.k64{background:var(--r64);opacity:.75}.sw.k50{background:var(--r50);opacity:.7}.sw.k34{background:var(--r34);opacity:.6}
.sw.krdr{width:24px;opacity:1;background:linear-gradient(90deg,#02fd02,#008e00,#fdf802,#fd9500,#fd0000,#f800fd)}
.btn.btn-sm{height:28px;padding:0 12px;font-size:13px}
.trk{flex:none;width:16px;height:3px;background:#fff;border:1px solid #556}
.note{font-size:12px;color:var(--muted);margin:8px 0 0}
.note.credits{color:#5d6675}
.zipform{display:flex;gap:8px;margin:0}
.zipform input{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid #b9ae9f;border-radius:6px;font:inherit;font-size:14px;background:#fff;color:var(--navy)}
.zipform input:focus{outline:2px solid var(--gold);outline-offset:1px}
.zipform button,.btn{height:36px;padding:0 16px;border:0;border-radius:6px;background:var(--navy);color:var(--cream);font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.zipform button:hover,.btn:hover{background:var(--gold)}
#zipres{margin:8px 0 0;min-height:19px;font-size:13px}
#zipres .tag{display:inline-block;margin-right:6px;padding:0 6px;border-radius:9px;font-size:12px;font-weight:700;color:#fff;vertical-align:1px}
.tag.near{background:#b3202a}.tag.far{background:#5b6b7f}
#zipres .est{font-style:italic;color:var(--muted)}
.cta{margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.cta p{margin:0 0 12px}
.cta .unof{font-size:12px;font-weight:600;color:#7a3324;margin:12px 0 0}
.cta .fine{font-size:12px;color:var(--muted);margin:8px 0 0}
.city{font-size:12px;line-height:16px;font-weight:700;color:#fff;text-shadow:0 0 3px #000,0 0 6px #000;white-space:nowrap}
.city span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid var(--navy);margin-right:5px;vertical-align:1px}
.city.l{position:absolute;right:145px;text-align:right}.city.l span{margin:0 0 0 5px}
.leaflet-container{font-family:var(--sans);font-size:13px;line-height:1.45}
.leaflet-popup-content{margin:12px 16px;font-size:13px;line-height:1.45}
.leaflet-popup-content .est{font-style:italic;color:var(--muted)}
.leaflet-control-layers{font-size:13px}
.leaflet-container .leaflet-control-attribution{font-size:11px;line-height:1.4}
@media (max-width:760px){
  /* mobile: page scrolls; map on top, ZIP lookup then legend/disclaimer in normal flow (nothing overlaps) */
  html,body{height:auto;background:var(--cream)}
  body{display:flex;flex-direction:column}
  header{order:0}#map{order:1}#side{order:2}#legend{order:3}
  header{position:static;flex-wrap:wrap;gap:4px 16px;padding:12px}
  .credit{margin-left:0;text-align:left;flex-basis:100%}
  #map{position:relative;top:auto!important;height:420px}
  .panel,#side,#legend{position:static;width:auto;max-height:none;margin:12px;box-shadow:none}
  .leaflet-control-attribution{display:none}
}
/* v5: NWS storm report dots + ZIP result button */
.dot{flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.d-wind{background:#2f80ed}.d-tree_home{background:#27ae60}.d-structure{background:#9b51e0}
#zipres .btn{margin:8px 0 0}
#zipres .msg{display:block}
.tag.out{background:#5b6b7f}
/* v6: collapsible legend (collapsed on desktop, bottom-left) */
#legend{top:auto;bottom:40px;max-height:calc(100% - 200px);padding:8px 12px}
#legend summary{cursor:pointer;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);list-style-position:inside}
#legend summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#legend details[open] summary{margin:0 0 8px}
#legend:has(details:not([open])){width:auto}
#legend .radar-row{margin:0 0 8px;gap:8px}.rlab{font-size:12px;color:var(--muted)}
