/* Hurricane tracker (/hurricanes). The map area is dark so NHC category colors read clearly. */
.hx-hero{background:var(--ink);color:#fff;padding:clamp(44px,7vw,84px) 0 clamp(28px,4vw,40px)}
.hx-kicker{color:var(--accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 12px}
.hx-hero h1{font-family:var(--serif);font-size:clamp(40px,6vw,72px);line-height:1;margin:0 0 16px;letter-spacing:-.02em}
.hx-hero .lead{color:#cfcfcf;max-width:680px;font-size:18px;margin:0 0 22px}
.hx-status{display:inline-flex;align-items:center;gap:10px;background:#1b1b1b;border:1px solid var(--line);padding:9px 14px;font-size:14px;color:#ddd}
.hx-status b{color:#fff}
.hx-dot{width:9px;height:9px;border-radius:50%;background:#ff6060;box-shadow:0 0 0 0 rgba(255,96,96,.6);animation:hxPulse 2s infinite}
.hx-dot.calm{background:#3ddc84;box-shadow:none;animation:none}
.hx-dot.off{background:#888;animation:none}
@keyframes hxPulse{70%{box-shadow:0 0 0 9px rgba(255,96,96,0)}100%{box-shadow:0 0 0 0 rgba(255,96,96,0)}}
@media (prefers-reduced-motion:reduce){.hx-dot{animation:none}}

.hx-loc-sec{background:var(--ink);padding:0 0 22px}
.hx-loc{background:#161616;border:1px solid var(--line);padding:16px 18px;color:#fff}
.hx-loc label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.hx-loc-in{display:flex;gap:10px;position:relative}
.hx-loc-in input{flex:1;min-width:0;padding:13px 14px;font:inherit;font-size:16px;border:1px solid #3a3a3a;background:#0f0f0f;color:#fff}
.hx-loc-in input:focus{outline:2px solid var(--accent);outline-offset:1px}
.hx-loc-in .btn{white-space:nowrap}
.hx-loc-now{margin:10px 0 0;font-size:14px;color:#cfcfcf}
.hx-loc-now button{background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.hx-loc .vy-pl-list,.hx-loc [role=listbox]{color:var(--text)}

.hx-main{background:var(--ink);color:#eee;padding:0 0 clamp(40px,6vw,64px)}
.hx-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.hx-mapbox{min-width:0}
.hx-map{position:relative;z-index:0;height:min(70vh,680px);min-height:380px;background:#0d1520;border:1px solid var(--line)}
.hx-map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.6)}
.hx-map .leaflet-control-attribution{background:rgba(10,10,10,.75);color:#aaa}
.hx-map .leaflet-control-attribution a{color:#ddd}
.hx-map .leaflet-bar a{background:#1b1b1b;color:#fff;border-color:#333}
.hx-tip{background:rgba(10,10,10,.85);color:#fff;border:0;font-weight:700;font-size:12px;box-shadow:none}
.hx-tip::before{display:none}
.hx-x{color:#ff3b30;font:900 22px/22px var(--sans);text-align:center;text-shadow:0 0 3px #000}
.hx-layers{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.hx-layers label{display:inline-flex;align-items:center;gap:7px;background:#161616;border:1px solid var(--line);padding:7px 11px;font-size:13px;cursor:pointer;user-select:none}
.hx-layers input{accent-color:var(--accent);margin:0}
.hx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:#bbb}
.hx-legend span,.hx-mlist span{display:inline-flex;align-items:center;gap:6px}
.hx-legend i,.hx-mlist i{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid #000}
.hx-mlist i{border-radius:0;height:4px;width:18px;border:0}
.hx-models{margin-top:14px;background:#161616;border:1px solid var(--line);padding:12px 14px;font-size:13px;color:#ccc}
.hx-models p{margin:0 0 8px}
.hx-mlist{display:flex;flex-wrap:wrap;gap:6px 14px}

.hx-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.hx-side-h{font-family:var(--serif);font-size:20px;margin:8px 0 0;color:#fff}
.hx-side .muted,.hx-main .muted{color:var(--muted-dark)}
.hx-card,.hx-calm,.hx-you,.hx-ol{background:#161616;border:1px solid var(--line);padding:14px 16px}
.hx-calm b{display:block;color:#fff;margin-bottom:4px}
.hx-calm span{color:#bbb;font-size:14px}
.hx-card-top{display:flex;gap:12px;align-items:center}
.hx-card h3{margin:0;font-size:17px;color:#fff}
.hx-card-top p{margin:2px 0 0;font-size:12px;color:#999}
.hx-badge{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#0a0a0a;font:800 15px/1 var(--sans)}
.hx-badge.sm{width:28px;height:28px;font-size:11px}
.hx-card dl,.hx-you dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
.hx-card dt,.hx-you dt{font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.05em}
.hx-card dd,.hx-you dd{margin:2px 0 0;font-weight:700;color:#fff;font-size:15px}
.hx-card-you{margin:12px 0 0;font-size:13px;padding:8px 10px;background:#0f0f0f;border-left:3px solid #3ddc84}
.hx-card-you.watch{border-color:#ffe14b}.hx-card-you.cone{border-color:#ff9f1a}.hx-card-you.warn{border-color:#ff2d55;background:#2a0d12}
.hx-card-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hx-card-act button,.hx-card-act a{background:#222;border:1px solid #333;color:#fff;font:600 13px var(--sans);padding:7px 10px;cursor:pointer;text-decoration:none}
.hx-card-act button:hover,.hx-card-act a:hover{border-color:var(--accent)}
.hx-ol{display:flex;gap:12px;align-items:center}
.hx-risk{flex:none;min-width:48px;padding:6px 8px;text-align:center;font-weight:800;color:#0a0a0a;font-size:14px}
.hx-ol b{display:block;color:#fff;font-size:14px}
.hx-ol span{font-size:12px;color:#aaa}

.hx-you{border-left:4px solid #3ddc84}
.hx-you.lvl1{border-left-color:#ffe14b}.hx-you.lvl2{border-left-color:#ff9f1a}.hx-you.lvl3{border-left-color:#ff2d55;background:#200b0f}
.hx-you-k{margin:0 0 4px;font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.05em}
.hx-you h3{margin:0;font-size:18px;color:#fff;line-height:1.25}
.hx-you .fine{color:#999;margin:10px 0 0}
.hx-you-do{margin:12px 0 0;font-size:14px}
.hx-you a{color:var(--accent)}
.hx-alertbox{background:#3a0c14;border:1px solid #ff2d55;padding:9px 11px;margin:6px 0 10px;font-size:13px}
.hx-alertbox b{display:block;color:#fff}
.hx-alertbox span{color:#f2c6cf}

.hx-sec{padding:clamp(48px,7vw,84px) 0}
.hx-sec.alt{background:var(--paper-2)}
.hx-hist-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.hx-hist-top .fine{margin:0}
.hx-chips{display:flex;gap:6px;flex-wrap:wrap}
.hx-chips button{border:2px solid var(--ink);background:#fff;padding:8px 14px;font:600 14px var(--sans);cursor:pointer}
.hx-chips button[aria-pressed=true]{background:var(--ink);color:#fff}
.hx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ddd;border:1px solid #ddd}
.hx-stats div{background:#fff;padding:18px}
.hx-stats b{display:block;font-family:var(--serif);font-size:clamp(22px,3vw,36px);line-height:1.05}
.hx-stats span{font-size:13px;color:var(--muted)}
.hx-hist-note{margin:18px 0}
.hx-charts{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin:8px 0 22px}
.hx-ch-h{font-weight:700;font-size:13px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.hx-bars{display:flex;align-items:flex-end;gap:3px;height:120px;border-bottom:2px solid var(--ink);padding-bottom:0}
.hx-bars span{flex:1;max-width:26px;background:var(--ink);position:relative;min-width:4px}
.hx-bars span:hover{background:#ff8f20}
.hx-bars i{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:600 10px var(--sans);color:var(--muted);font-style:normal;margin-top:4px}
.hx-bars:not(.hx-mon) span:nth-child(odd) i{visibility:hidden}
.hx-charts>div{padding-bottom:18px}
.hx-hlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.hx-hlist button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:#fff;border:1px solid #ddd;padding:10px 12px;cursor:pointer;font:inherit}
.hx-hlist button .hx-badge{grid-row:1/3}
.hx-hlist button b{font-size:15px}
.hx-hlist button span:last-child{font-size:12px;color:var(--muted)}
.hx-hlist button:hover,.hx-hlist button.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hx-hlist .hx-badge{border:1px solid #0003}

.hx-prep{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,5vw,64px);align-items:start}
.hx-check{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hx-check label{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #ddd;padding:12px 14px;cursor:pointer}
.hx-check input{width:20px;height:20px;accent-color:var(--ink);margin:1px 0 0;flex:none}
.hx-check input:checked+span{text-decoration:line-through;color:var(--muted)}
.hx-check-n{font-weight:700;font-size:14px;padding:6px 2px}
.hx-prep h3{font-family:var(--serif);font-size:22px;margin:0 0 14px}
.hx-links{display:grid;gap:8px}
.hx-links a{display:flex;justify-content:space-between;gap:10px;background:var(--ink);color:#fff;padding:14px 16px;text-decoration:none;font-weight:600}
.hx-links a:hover{background:#222}
.hx-links a span{color:var(--accent)}

.hx-alert{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);background:var(--ink);color:#fff;padding:clamp(24px,4vw,44px)}
.hx-alert h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);line-height:1.05;margin:0 0 12px}
.hx-alert .muted{color:var(--muted-dark)}
.hx-alert-f{display:grid;gap:12px;align-content:start}
.hx-alert-f label{display:grid;gap:6px;font-weight:600;font-size:14px}
.hx-alert-f input,.hx-alert-f select{padding:12px 13px;font:inherit;font-size:16px;border:1px solid #3a3a3a;background:#0f0f0f;color:#fff}
.hx-alert-loc{margin:0;color:#bbb}
.hx-alert-loc a{color:var(--accent)}
.hx-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hx-alert.soon button[type=submit]{opacity:.6;cursor:not-allowed}
.hx-msg{margin:0;font-size:14px;padding:10px 12px;background:#1b1b1b;border-left:3px solid #3ddc84}
.hx-msg.err{border-color:#ff6060}
.hx-about{padding-top:0}
.hx-about .fine a{color:inherit}

@media (max-width:980px){.hx-grid{grid-template-columns:1fr}.hx-map{height:62vh}}
@media (max-width:760px){
  .hx-loc-in{flex-direction:column}
  .hx-stats{grid-template-columns:repeat(2,1fr)}
  .hx-charts,.hx-prep,.hx-alert{grid-template-columns:1fr}
  .hx-layers label{font-size:12px;padding:6px 9px}
  .hx-map{height:56vh;min-height:320px}
}
.hx-loc-in .vp{flex:1;min-width:0}
.hx-loc-in .vp input{width:100%}
.hx-loc .vp-list{z-index:40}