/* /tropics/ (2026-09-28): Atlantic storms now, where storms form, every
   season since 1851, storms near a place. Everything is scoped under .th
   except the jump bar and the Hazards tab row, which sit outside it. Dark
   colours follow the site rule: only :root[data-theme="dark"]. */
:root{--ocean:#d9e5f0; --land:#f3f0e6; --coast:#9aa1ad; --grat:rgba(31,79,130,.10); --form:184,87,31; --c-td:#8a8f99; --c-ts:#3b7fd6; --c-1:#e0a526; --c-2:#e2702f; --c-3:#d8403a; --c-4:#c1185c; --c-5:#7a0d2e; --c-ex:#b3b8c2; --ring:#0b1220; --live:#0b1220; --g-ens:#7d9cc0; --g-single:#2a9d8f; --g-cons:#5a4fcf;}   /* consensus blue-violet (2026-10-08, user): was the brand orange, too close to Cat 2 #e2702f; teal is taken by --g-single */
:root[data-theme="dark"]{--ocean:#0f1b29; --land:#2a3140; --coast:#56607a; --grat:rgba(148,187,233,.08); --form:242,160,90; --c-td:#8e95a3; --c-ts:#5b9cf0; --c-5:#e05a8a; --c-ex:#5d6678; --ring:#eef2f8; --live:#eef2f8; --g-ens:#6c86a8; --g-single:#4fc3b4; --g-cons:#a99cff; color-scheme:dark;}
.th *{box-sizing:border-box}
.th{font-size:15px; line-height:1.6; display:grid; gap:44px; padding-block:8px 48px}
.th h2, .th h3{font-family:var(--font-display); text-wrap:balance; margin:0; line-height:1.15}
.th h2{font-size:24px}
.th .th-eb{font:700 12px var(--font-bug); letter-spacing:.14em; text-transform:uppercase; color:var(--pig)}
.th section{display:grid; gap:14px}
.th .sec-head{display:grid; gap:4px}
.th .sec-head p{margin:0; color:var(--ink-2); max-width:72ch}
.th .controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.th .chip{font:600 13px var(--font-body); border:1px solid var(--line-2); background:var(--bg); color:var(--ink); padding:6px 12px; border-radius:999px; cursor:pointer}
.th .chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.th .chip:focus-visible, .th select:focus-visible, .th button:focus-visible{outline:2px solid var(--sky-deep); outline-offset:2px}
.th .sep{width:1px; height:22px; background:var(--line-2); margin-inline:4px}
.th select{font:600 13px var(--font-body); padding:6px 10px; border-radius:8px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink)}
.th .lbl{font:700 11.5px var(--font-bug); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.th .grid2{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start}
@media (max-width:860px){.th .grid2{grid-template-columns:1fr}}
.th .map{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--ocean)}
.th .map svg{display:block; width:100%; height:auto}
.th .land{fill:var(--land); stroke:var(--coast); stroke-width:.6}
.th .grat{stroke:var(--grat); stroke-width:1; fill:none}
.th .gl{font:500 10px var(--font-bug); fill:var(--ink-3)}
.th .side{display:grid; gap:12px}
.th .card{border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--panel); display:grid; gap:8px}
.th .big{font:700 30px var(--font-display); line-height:1; font-variant-numeric:tabular-nums}
.th .muted{color:var(--ink-3); font-size:13px}
.th .legend{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12.5px; color:var(--ink-2); align-items:center}
.th .sw{display:inline-block; width:14px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.th .swl{display:inline-block; width:18px; height:4px; border-radius:2px; margin-right:5px; vertical-align:2px}

.th .bars{display:grid; grid-template-columns:repeat(8,1fr); gap:6px; align-items:end; height:140px; padding-top:18px}
.th .bar{display:grid; grid-template-rows:auto 1fr auto; height:100%; text-align:center; cursor:pointer; background:none; border:0; padding:0; color:inherit; font:inherit}
.th .bar .v{font:700 11.5px var(--font-bug); color:var(--ink-2); font-variant-numeric:tabular-nums}
.th .bar .col{align-self:end; background:rgba(var(--form),.35); border-radius:4px 4px 0 0; min-height:2px}
.th .bar[aria-pressed="true"] .col{background:rgb(var(--form))}
.th .bar[aria-pressed="true"] .v{color:var(--ink)}
.th .bar .m{font:700 11px var(--font-bug); letter-spacing:.06em; color:var(--ink-3); padding-top:4px; border-top:1px solid var(--line-2)}

.th .tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:620px){.th .tiles{grid-template-columns:repeat(2,1fr)}}
.th .tile{border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--panel); display:grid; gap:4px}
.th .tile .n{font:700 28px var(--font-display); line-height:1; font-variant-numeric:tabular-nums}
.th .tile .vs{font-size:12.5px; color:var(--ink-3)}
.th .tile .vs b{font-weight:700}
.th .up{color:var(--c-3)}
.th .dn{color:var(--c-ts)}
:root:not([data-theme="dark"]) .th .dn{color:#2a67b8}   /* storm blue as text on a tile read 3.8:1 (clean sweep 2026-10-07) */
.th .tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px}
.th table{border-collapse:collapse; width:100%; font-size:13.5px; font-variant-numeric:tabular-nums}
.th th{font:700 11px var(--font-bug); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:8px 10px; background:var(--panel-2); white-space:nowrap}
.th td{padding:7px 10px; border-top:1px solid var(--line); white-space:nowrap}
.th tbody tr{cursor:pointer}
.th tbody tr.on{background:var(--panel-2)}
.th .tag{display:inline-block; font:700 11px var(--font-bug); letter-spacing:.06em; padding:2px 7px; border-radius:4px; color:#fff; background:var(--c-td)}
.th .tag.ts{background:var(--c-ts)}
.th .tag.c1{background:var(--c-1); color:#231a00}
.th .tag.c2{background:var(--c-2)}
.th .tag.c3{background:#cf3a34}   /* 4.9:1 with white (var(--c-3) gave 4.45, sweep 10/7) */
.th .tag.c4{background:var(--c-4)}
.th .tag.c5{background:var(--c-5)}
.th .tag.ex{background:var(--c-ex); color:var(--ink)}
.th .yearnav{display:flex; gap:6px; align-items:center}
.th .yearnav button{font:700 14px var(--font-body); width:32px; height:32px; border-radius:8px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink); cursor:pointer}
.th .trk{fill:none; stroke-linecap:round; stroke-linejoin:round}
/* Zoomed to one storm (2026-09-29): lines keep their on-screen weight, names give way to the detail box. */
.th #recapMap svg .trk, .th #nearMap svg .trk, .th #recapMap svg .land, .th #nearMap svg .land, .th #recapMap svg .grat, .th #nearMap svg .grat,
.th #nearMap svg circle.ring, .th #recapMap svg .dot, .th #nearMap svg .dot,
.th #nearMap svg .pt-ring, .th #nearMap svg .pt-x, .th #nearMap svg .live-trk, .th #nearMap svg .live-pt{vector-effect:non-scaling-stroke}
.th svg.zoomed .nm, .th svg.zoomed .gl{display:none}
.th .dim .trk{opacity:.18}
.th .dim .trk.hl{opacity:1}
.th .nm{font:700 11px var(--font-display); fill:var(--ink); paint-order:stroke; stroke:var(--ocean); stroke-width:3px; pointer-events:none}
/* 2026-09-29: season names open their storm; state lines on every map; one
   way back out of a zoom, on the map. */
.th #recapMap .nm{pointer-events:auto; cursor:pointer}
@media (hover:hover){ .th #recapMap .nm:hover{fill:var(--live)} }
.th .states{fill:none; stroke:var(--coast); stroke-width:.5; opacity:.75; vector-effect:non-scaling-stroke; pointer-events:none}
.th .map-back{display:none; position:absolute; top:10px; left:10px; z-index:2; align-items:center; font:600 13px var(--font-display); padding:7px 12px; border-radius:100px;
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink); box-shadow:0 2px 10px rgba(0,0,0,.18); cursor:pointer}
.th .map.is-zoomed .map-back{display:inline-flex}
.th .map-back:focus-visible{outline:2px solid var(--live); outline-offset:2px}
@media (hover:hover){ .th .map-back:hover{border-color:var(--live)} }
.th .now-storm{cursor:pointer}
.th #nowMap .now-storm .live-nm{pointer-events:auto}

.th .hitmap{cursor:crosshair}
.th .pt-ring{fill:rgba(15,111,149,.12); stroke:var(--ring); stroke-width:1.6}
.th .pt-x{stroke:var(--ring); stroke-width:1.6}
.th .live-trk{fill:none; stroke:var(--live); stroke-width:1.6; stroke-dasharray:5 4}
.th .live-pt{stroke:#fff; stroke-width:1.4; cursor:pointer}
.th .live-nm{font:700 14px var(--font-display); fill:var(--ink); paint-order:stroke; stroke:var(--ocean); stroke-width:3px; pointer-events:none}
.th .quick{display:flex; flex-wrap:wrap; gap:6px}
.th .list-head{display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center}
.th .count{font:700 18px var(--font-display)}
.th .toggle-all{font:600 13px var(--font-body); padding:7px 12px; border-radius:8px; border:1px solid var(--ink); background:var(--ink); color:var(--bg); cursor:pointer}
.th .toggle-all[aria-pressed="true"]{background:var(--bg); color:var(--ink)}
.th .plist{display:grid; max-height:520px; overflow:auto; border:1px solid var(--line); border-radius:12px}
.th .prow{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 12px; border-top:1px solid var(--line); cursor:pointer; background:none; border-left:0; border-right:0; border-bottom:0; text-align:left; color:inherit; font:inherit}
.th .prow:first-child{border-top:0}
.th .prow[aria-pressed="true"]{background:var(--panel-2)}
.th .box{width:16px; height:16px; border-radius:4px; border:1.5px solid var(--line-2); display:grid; place-items:center}
.th .prow[aria-pressed="true"] .box{background:var(--ink); border-color:var(--ink)}
.th .prow[aria-pressed="true"] .box::after{content:""; width:8px; height:4px; border:2px solid var(--bg); border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px)}
.th .prow .nm2{font-weight:600}
.th .prow .sub{font-size:12.5px; color:var(--ink-3)}
.th .old{font:700 10px var(--font-bug); letter-spacing:.06em; color:var(--ink-3); border:1px solid var(--line-2); border-radius:4px; padding:0 4px; margin-left:4px}
.th .empty{padding:16px; color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){.th .trk{transition:opacity .15s}}
.th [hidden]{display:none!important}
.th .map-tip{position:absolute; z-index:3; width:210px; padding:9px 11px; border-radius:10px; background:var(--bg); border:1px solid var(--line-2); box-shadow:0 6px 20px rgba(0,0,0,.18); font-size:12.5px; line-height:1.45; pointer-events:none}
.th .map-tip b{display:block; font:700 14px var(--font-display)}
.th .dot{stroke:var(--bg); stroke-width:1.2; cursor:pointer}
.th .dot.near{stroke:var(--ring); stroke-width:2.2}
.th .detail{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:14px; display:grid; gap:10px}
.th .detail-head{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; justify-content:space-between}
.th .detail-head h3{font-size:20px}
.th .facts{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--ink-2)}
.th .facts b{color:var(--ink); font-variant-numeric:tabular-nums}
.th .x{font:600 13px var(--font-body); border:1px solid var(--line-2); background:var(--bg); color:var(--ink); border-radius:8px; padding:5px 10px; cursor:pointer}
.th .dtbl{max-height:340px; overflow:auto; border:1px solid var(--line); border-radius:10px; background:var(--bg)}
.th .dtbl th{position:sticky; top:0}
.th .dtbl tr.near td{background:rgba(15,111,149,.12); font-weight:600}
.th .dtbl tr{cursor:default}
.th .lf{font:700 10px var(--font-bug); letter-spacing:.06em; color:var(--pig); border:1px solid var(--pig); border-radius:4px; padding:0 4px; margin-left:6px}
.th .prelim{font:700 10.5px var(--font-bug); letter-spacing:.08em; color:var(--pig); border:1px solid var(--pig); border-radius:4px; padding:1px 6px}
.th .prow2{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; border-top:1px solid var(--line); padding-right:10px}
.th .prow2:first-child{border-top:0}
.th .prow2 .prow{border:0; padding-right:0}
.th .prow2.open{background:var(--panel-2)}
.th .dbtn{font:600 12px var(--font-body); border:1px solid var(--line-2); background:var(--bg); color:var(--ink); border-radius:6px; padding:3px 8px; cursor:pointer; white-space:nowrap}

.th .g-ens{fill:none; stroke:var(--g-ens); stroke-width:1; opacity:.55}
.th .g-single{fill:none; stroke:var(--g-single); stroke-width:1.6; opacity:.9}
.th .g-cons{fill:none; stroke:var(--g-cons); stroke-width:3.2; stroke-linecap:round}
.th .nhc-cone{fill:rgba(120,128,142,.20); stroke:#8a8f99; stroke-width:1}
.th .nhc-trk{fill:none; stroke:var(--live); stroke-width:2.4; stroke-dasharray:6 4}
.th .past-trk{fill:none; stroke:var(--ink-2); stroke-width:2}
.th .lead{font:700 11px var(--font-bug); fill:var(--ink); paint-order:stroke; stroke:var(--ocean); stroke-width:3px}
.th .intens{font-variant-numeric:tabular-nums}
.th .intens td, .th .intens th{text-align:center}
.th .intens td:first-child, .th .intens th:first-child{text-align:left}
.th .offseason{border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--panel); display:grid; gap:6px}
.th .offseason b{font:700 20px var(--font-display)}

/* The section bar: pill buttons (user, 2026-09-28: back to buttons after a
   text-link try), the section in view filled in. One line always; on a phone
   four pills don't fit (they need ~360px of 342), so the row scrolls
   sideways and tropics.js keeps the lit pill in view. */
/* The bar never paints a strip (user 2026-09-29, twice: a white band at the top, then again once
   stuck under the menu). The row stays transparent; stuck, each pill carries its own frosted fill so
   it reads over whatever scrolls beneath it, like the menu's own glass. */
.th-jump{display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; scrollbar-width:none; position:sticky; top:calc(var(--navh, 64px) + env(safe-area-inset-top, 0px)); z-index:5; padding-block:10px; background:transparent}
.th-jump.stuck a:not(.on){background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); box-shadow:0 2px 10px rgba(11,18,32,.12)}
.th-jump.stuck a.on{box-shadow:0 2px 10px rgba(11,18,32,.18)}
.th-jump::-webkit-scrollbar{display:none}
.th-jump a{flex:none; font:600 13.5px var(--font-body); color:var(--ink); text-decoration:none; border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; white-space:nowrap}
.th-jump a.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .th-jump a:not(.on):hover{border-color:var(--ink)} }
.th-jump .t-short{display:none}
/* Phones: the Hazards tabs' short labels ("Now", "Seasons") keep the scroll short. */
@media (max-width:480px){ .th-jump .t-long{display:none} .th-jump .t-short{display:inline} }
.th section{scroll-margin-top:130px}
.th .th-more{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:600px){ .th .th-more{grid-template-columns:1fr} }
.th .th-more p{margin:4px 0 0}
.th .tr-storm{margin:0}
.th .th-sat{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start}
@media (max-width:860px){ .th .th-sat{grid-template-columns:1fr} }
.th .th-satv{display:grid; gap:6px}
.th .th-sat .th-more{grid-template-columns:1fr}
.th .src{font-size:12.5px; color:var(--ink-3)}
/* "Hazards › Tropics": the way back to /hazards/ (replaced the repeated
   Hazards tab row, user 2026-09-28). */
.th-crumb{ display:flex; gap:8px; align-items:center; margin:0 0 14px; font:600 13.5px var(--font-body); color:var(--ink-3); }
.th-crumb a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2); }
@media (hover: hover){ .th-crumb a:hover{ color:var(--ink); border-bottom-color:var(--ink); } }
.th-crumb [aria-current]{ color:var(--ink); }
.th .th-satv video{ width:100%; border-radius:12px; border:1px solid var(--line); background:#000; display:block; aspect-ratio:1800/1080; }
.th .nhc-two{ fill:rgba(226,129,47,.2); stroke:#e2812f; stroke-width:1.6; stroke-dasharray:6 4; }
.th .two-l{ font:700 11px var(--font-bug); letter-spacing:.06em; fill:#b8571f; paint-order:stroke; stroke:var(--ocean); stroke-width:3px; }
.th .tr-areas, .th .tr-games{ margin:4px 0 0; padding:0; list-style:none; display:grid; gap:6px; font-size:14px; }
.th .tr-quiet{ margin:4px 0 0; }
/* The "storms near a place" share card, drawn by tropics.js into a
   1200x630 host that publish_share_cards.js screenshots. Never on the page. */
/* border/radius 0: style.css's NFL team-hub tile .th-card (same name) rounded the share card's corners onto a grey backdrop and drew its 5 px team strip (2026-10-08). */
.th-card{ width:1200px; height:630px; display:grid; grid-template-columns:52% 48%; background:#ffffff; color:#0b1220; font-family:var(--font-body); overflow:hidden; border:0; border-radius:0; }
.th-card::before{ content:none; }
.th-card .l{ padding:60px 48px; display:grid; align-content:space-between; }
.th-card .mid{ display:grid; gap:16px; }
.th-card .eb{ font:700 23px var(--font-bug); letter-spacing:.14em; text-transform:uppercase; color:#b8571f; }
.th-card .num{ font:700 132px/0.95 var(--font-display); }
.th-card .t{ font:600 35px/1.25 var(--font-display); }
.th-card .s{ font:500 25px/1.4 var(--font-body); color:#48546c; }
.th-card .ft{ font:700 24px var(--font-bug); letter-spacing:.06em; color:#6b7690; }
.th-card .r svg{ width:100%; height:100%; display:block; }
.th-card .trk{ fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* Phone (2026-09-29): the season table keeps Storm, Peak and Landfall on screen;
   the dates fold under the name, pressure and ACE are desktop-only. */
@media (max-width:560px){
  .th .recap-t th:nth-child(2), .th .recap-t td:nth-child(2), .th .recap-t th:nth-child(4), .th .recap-t td:nth-child(4),
  .th .recap-t th:nth-child(5), .th .recap-t td:nth-child(5){ display:none; }
  .th .recap-t .st-mdates{ display:block; font-size:12px; color:var(--ink-3); }
  .th .recap-t td:first-child{ white-space:normal; }
  /* 360px (2026-10-06): the table ran 6px past its frame and hid LANDFALL;
     Landfall may wrap ("after / review"), and the cells sit tighter. */
  .th .recap-t th, .th .recap-t td{ padding-left:8px; padding-right:8px; }
  .th .recap-t td:nth-child(6){ white-space:normal; }
}

/* ── Storm pages (/tropics/<year>/<name>/, publish_storm_pages.py, 2026-09-29) ── */
.sp-crumb{ font-size:14px; color:var(--ink-2); margin:0 0 10px; } .sp-crumb a{ color:var(--ink-2); }
.sp-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:16px; max-width:720px; }
.sp-stats > div{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg-2); display:grid; gap:2px; }
.sp-stats b{ font-family:var(--font-display); font-size:20px; font-weight:600; }
.sp-map, .tw-map{ margin:4px 0 12px; position:relative; }
/* No max-height: a height cap letterboxes the drawing into bare side bands (seen 9/29). The
   tall wind map is held to a width instead. */
.sp-map svg, .tw-map svg{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:12px; }
.tw-map{ max-width:780px; }
.sp-sea, .tw-sea{ fill:#dbe7f3; } .sp-land{ fill:#f1ede4; stroke:#b8b2a4; stroke-width:.7; }
.sp-states, .tw-states{ fill:none; stroke:#b9b1a1; stroke-width:.7; }
:root[data-theme="dark"] .sp-sea, :root[data-theme="dark"] .tw-sea{ fill:#0f1c2b; }
:root[data-theme="dark"] .sp-land{ fill:#1d2530; stroke:#3a4655; } :root[data-theme="dark"] .sp-states, :root[data-theme="dark"] .tw-states{ stroke:#44505f; }
.sp-cone, .tw-cone{ fill:rgba(255,255,255,.5); stroke:var(--ink); stroke-width:1.4; stroke-dasharray:6 5; }
.tw-cone{ fill:none; }
:root[data-theme="dark"] .sp-cone{ fill:rgba(255,255,255,.08); }
.sp-trk, .tw-track{ fill:none; stroke:var(--ink); stroke-width:1.4; } .tw-track{ opacity:.6; } .sp-pt{ stroke:#fff; stroke-width:1.5; }
.sp-ww{ fill:none; stroke-width:5; stroke-linecap:round; }
.sp-lbl{ font:600 13px var(--font-body, system-ui); fill:var(--ink); paint-order:stroke; stroke:var(--bg); stroke-width:3px; }
.sp-map figcaption, .tw-map figcaption{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin-top:8px; font-size:12.5px; color:var(--ink-2); }
.sp-k{ display:inline-block; width:10px; height:10px; border-radius:50%; }
.sp-k-cone, .tw-k-cone{ display:inline-block; width:22px; border-top:2px dashed var(--ink); }
.sp-k-ww{ display:inline-block; width:18px; height:5px; border-radius:3px; }
.tw-key{ display:inline-flex; align-items:center; gap:6px; }
.tw-k-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--ink); }
.sp-t, .tw-t{ min-width:0; } .cp-table.sp-t td, .cp-table.sp-t th{ white-space:normal; }
.tw-t .tw-when{ color:var(--ink-2); white-space:normal; font-size:12.5px; min-width:7em; }
.cp-table.tw-t tbody tr .cp-team{ position:static; background:transparent; white-space:normal; }
.sp-tag{ font-size:12.5px; font-weight:600; } .sp-hu{ color:#c2410c; } .sp-ts{ color:#2563eb; } .sp-td, .sp-pt{ color:var(--ink-3); }
.tw-lead{ font-size:17px; line-height:1.5; color:var(--ink); max-width:62ch; margin:0 0 14px; text-wrap:pretty; }
.tw-layer[hidden]{ display:none; }
.tw-v circle{ fill:#fff; stroke:var(--ink); stroke-width:2.5; } .tw-v .tw-hit{ fill:transparent; stroke:none; }
.tw-v{ cursor:pointer; outline:none; } .tw-v:focus-visible circle:first-child{ stroke:var(--sky-deep); stroke-width:4; }
.tw-tip{ position:absolute; pointer-events:none; background:var(--ink); color:var(--bg); font-size:13px; padding:6px 9px; border-radius:8px; max-width:220px; transform:translate(-50%,-115%); z-index:2; }
.tw-legend{ display:flex; align-items:center; } .tw-legend i{ display:block; width:22px; height:10px; } .tw-legend span{ margin:0 6px; font-variant-numeric:tabular-nums; }
.tw-beyond{ margin-top:14px; }
.sp-games{ margin:0; padding:0; list-style:none; display:grid; gap:10px; } .sp-games li{ line-height:1.5; } .sp-games a{ font-weight:600; }
@media (max-width:560px){
  .sp-t th:nth-child(4), .sp-t td:nth-child(4), .tw-cities th:nth-child(6), .tw-cities td:nth-child(6), .tw-t th:nth-child(4), .tw-t td:nth-child(4){ display:none; }
  .tw-t th{ white-space:normal; vertical-align:bottom; } .cp-table.tw-t th, .cp-table.tw-t td{ padding:8px 6px; }
  .sp-stats b{ font-size:18px; } .tw-lead{ font-size:16px; }
}

/* Phone review 2026-09-29: the Details buttons in "Storms near a place" get a finger-sized touch area. */
@media (max-width:640px){ .th .dbtn{ padding:9px 12px; } }

/* Invests on Right now + per-system share cards (2026-10-05) */
:root{--r-sea:#b3c3d6; --r-mx:#8a8f99; --r-tx:#d8403a; --r-la:#3b7fd6; --r-fl:#e2702f; --r-east:#2a9d8f; --r-carib:#e0a526; --g-hurr:#c1185c;}
:root[data-theme="dark"]{--r-sea:#3c4f68; --r-mx:#8e95a3; --r-tx:#ef6a5f; --r-la:#5b9cf0; --r-fl:#f2a761; --r-east:#4fc3b4; --r-carib:#f0bf4c; --g-hurr:#e05a8a;}
.tr-tag.inv{ background:#b8571f; }
.th .inv-x{ stroke:var(--live); stroke-width:2.6; stroke-linecap:round; fill:none }
.th .inv-faint .g-ens{ opacity:.35 }
.th .inv-faint .g-single{ opacity:.7; stroke-width:1.2 }
.th .inv-flag{ position:absolute; right:10px; top:10px; font:700 11px var(--font-bug); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); background:var(--bg); border:1px solid var(--line-2); padding:2px 7px; border-radius:4px; pointer-events:none }
.th .tr-reach{ display:grid; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line) }
.th .tr-bar{ display:flex; height:12px; border-radius:4px; overflow:hidden; background:var(--bg-2) }
.th .tr-bar span{ display:block; height:100% }
.th .tr-rows{ display:grid; gap:3px; font-size:13.5px }
.th .tr-rows div{ display:grid; grid-template-columns:12px 1fr auto; gap:8px; align-items:center }
.th .tr-rows i{ width:10px; height:10px; border-radius:2px; display:block }
.th .tr-rows b{ font-variant-numeric:tabular-nums; font-weight:600 }
#nowShare{ align-items:center }
#nowShare .lbl{ font:700 11.5px var(--font-bug); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.th-card .num small{ font-size:52px; font-weight:600; letter-spacing:0 }
.th-card .nb{ color:#b8571f; font-size:21px; font-family:var(--font-bug); font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.th .now-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 24px; align-items:end }
.th .now-head #nowShare{ margin:0; justify-content:flex-end; align-self:start; padding-top:2px }
@media (max-width:760px){ .th .now-head{ grid-template-columns:1fr } .th .now-head #nowShare{ justify-content:flex-start } }
.th .now-head #nowShare .sb-act{ display:inline-flex; align-items:center; gap:6px; font:600 13px var(--font-body); letter-spacing:0; text-transform:none; color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; opacity:1; text-decoration:none; animation:none }
.th .now-head #nowShare .sb-act svg{ width:14px; height:14px }
@media (hover:hover){ .th .now-head #nowShare .sb-act:hover{ border-color:var(--ink) } }
.th .now-head #nowShare .sb-act:focus-visible{ outline:2px solid var(--sky-deep); outline-offset:2px }
.th .g-hurr{fill:none; stroke:var(--g-hurr); stroke-width:1.6; opacity:.9}
.th .inv-faint .g-hurr{ opacity:.7; stroke-width:1.2 }
.th #invGroups .chip{ display:inline-flex; align-items:center; gap:7px }
.th #invGroups .chip .n{ font:700 12px var(--font-bug); letter-spacing:.04em; opacity:.75; text-transform:uppercase }
.th #invGroups .chip:disabled{ cursor:default; color:var(--ink-3); border-style:dashed; background:transparent }
/* Storms near a place, month chips (2026-10-08): count inside each chip, same look as #invGroups */
.th #nearMonths .chip{ display:inline-flex; align-items:center; gap:7px }
.th #nearMonths .chip .n{ font:700 12px var(--font-bug); letter-spacing:.04em; opacity:.75; font-variant-numeric:tabular-nums }
.th #nearMonths .chip:disabled{ cursor:default; color:var(--ink-3); border-style:dashed; background:transparent }
.th #invGroups .swl{ width:16px; height:3px; border-radius:2px; display:inline-block }
.th .tr-rt{ width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums }
.th .tr-rt th{ font:700 11px var(--font-bug); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:right; padding:0 0 2px 8px }
.th .tr-rt td{ padding:2px 0 2px 8px; text-align:right }
.th .tr-rt td:first-child{ text-align:left; padding-left:0; display:flex; align-items:center; gap:8px }
.th .tr-rt td:first-child i{ width:10px; height:10px; border-radius:2px; display:block; flex:none }
.th .tr-rt tr.tot td{ border-top:1px solid var(--line); color:var(--ink-3); padding-top:4px }
/* Share card key (invests): bottom of the map side. */
.th-card .r{ position:relative; border-left:1px solid rgba(31,79,130,.14); }
.th-card .key{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; gap:6px 20px; padding:14px 20px 16px; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.94) 35%); font:600 19px var(--font-bug); letter-spacing:.04em; text-transform:uppercase; color:#2b3446; }
.th-card .key span{ display:inline-flex; align-items:center; gap:8px; }
.th-card .key i{ width:22px; height:4px; border-radius:2px; display:block; }
.th-card .key b{ color:#0b1220; font-weight:700; }
.th-card .key .none{ color:#7f8ba0; }
.th-card .key .none i{ opacity:.45; }
.th-card .key .none b{ color:#7f8ba0; font-weight:600; }
/* Right now layout pass (2026-10-05): landfall table under the map, NHC text
   shortened, stadium dots only with an advisory storm, short chip labels. */
.th .now-main{ display:grid; gap:14px; min-width:0 }
.th #nowBelow:empty{ display:none }
.th #nowBelow .tr-reach{ margin-top:0; padding-top:0; border-top:0 }
.th #nowBelow .tr-rt{ max-width:560px }
.th .ven circle{ fill:var(--pig); opacity:.55; pointer-events:none }
.th #invGroups .g-short{ display:none }
@media (max-width:600px){ .th #invGroups .g-long{ display:none } .th #invGroups .g-short{ display:inline } }
.th .nhc-more{ font:600 12.5px var(--font-body); color:var(--sky-deep); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px }
.th .nhc-more:focus-visible{ outline:2px solid var(--sky-deep); outline-offset:2px }
.th #nowBelow .tr-reach{ max-width:560px }
@media (max-width:860px){ .th #nowLive .now-main{ display:contents } .th #nowLive .side{ order:2 } .th #nowLive #nowBelow{ order:3 } }

/* Area row (2026-10-06): above the System row; phones keep it on one line
   that scrolls sideways, like the section bar. During the glide strokes keep
   their resting width and labels their size; the 5-degree grid fades in. */
.th #nowMap .minor{ opacity:0; transition:opacity .3s }
.th #nowMap svg.reg-zoom .minor{ opacity:1 }
.th .now-zoom{ margin-bottom:10px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.th .now-zoom::-webkit-scrollbar{ display:none }
.th .now-zoom .chip{ flex:none; display:inline-flex; align-items:center; gap:6px }
.th .now-zoom .chip .n{ font:700 11px var(--font-bug); min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:inline-grid; place-items:center; background:var(--live); color:var(--bg) }   /* was #fff: on dark, --live turns light (sweep 10/7: 1.1:1) */
.th .now-zoom .chip[aria-pressed="true"] .n{ background:var(--bg); color:var(--ink) }
/* Side column: card, legend, then Next 7 days and games; satellite under the
   map. Phones: map, card, legend, outlook, games, landfall table, satellite. */
.th .side .th-more{ grid-template-columns:1fr; gap:12px; padding-top:12px; border-top:1px solid var(--line) }
.th .now-main #satBox:empty{ display:none }
@media (max-width:860px){ .th #nowLive #satBox{ order:4 } }
.th #nowQuiet .th-more{ grid-template-columns:1fr }

/* Satellite view switch (2026-10-06): label left, chips right; wraps on phones. */
.th .sat-head{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between }
.th .sat-pick{ display:flex; gap:6px; flex-wrap:wrap }
.th .sat-pick .chip{ padding:4px 10px; font-size:12.5px }
/* Stadiums with a game in the next 7 days: hover/tap for the games (2026-10-06). */
.th .ven .vg{ opacity:.95 }
.th .ven .vhit{ fill:transparent; opacity:1; pointer-events:all; cursor:pointer }
.th .map-tip:has(.vtip){ pointer-events:auto }
.th .map-tip .vtip + b{ margin-bottom:2px }
.th .map-tip a{ color:var(--accent, #1f4f82); font-weight:600 }
/* Storm card with games in its path (2026-10-06). */
.th-card.has-games .l{ padding:46px 48px 44px; }
.th-card.has-games .num{ font-size:112px; }
.th-card.has-games .mid{ gap:12px; }
.th-card .gm{ display:grid; gap:6px; margin-top:4px; }
.th-card .gm .gl{ font:700 19px var(--font-bug); letter-spacing:.1em; text-transform:uppercase; color:#b8571f; }
.th-card .gm .gr{ font:600 23px/1.3 var(--font-body); color:#0b1220; }
.th-card .gm .gr b{ font:700 17px var(--font-bug); letter-spacing:.06em; color:#6b7690; margin-right:4px; }
.th-card .gm .gr em{ font-style:normal; color:#6b7690; font-size:19px; white-space:nowrap; }
.th-card .gm .more{ font-size:19px; color:#6b7690; }

/* Storm page map tips (2026-10-07, user: "the hover does not work real well on all the maps"):
   one tip per map, placed by storm-page.js inside the figure; a picked dot rings. */
.sp-map .tw-tip, .tw-map .tw-tip{ transform:none; max-width:240px; line-height:1.4; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.tw-tip hr{ border:0; border-top:1px solid color-mix(in srgb, var(--bg) 30%, transparent); margin:6px 0; }
.tw-tip-s{ opacity:.8; font-size:12px; }
.sp-tipt{ cursor:pointer; outline:none; }
.sp-pt.on, .sp-pt:focus-visible{ stroke:var(--ink); stroke-width:3; }
.tw-v.on circle, .tw-v:focus-visible circle{ stroke:var(--sky-deep); stroke-width:4; }
.tw-map svg{ cursor:crosshair; }
.tw-hint{ color:var(--ink-3); }

/* Storm page, one map (2026-10-07, user: the wind map "is not being highlighted enough"): Wind chance |
   When winds could arrive | Track under the header. Arrival lines are NHC's earliest / most likely times,
   drawn over the 39 mph shading, soonest darkest. */
.sp-jump-wrap{ margin-top:18px; } .sp-jump{ position:static; margin:0; }
#spTrack .sp-map{ max-width:780px; }
.tw-arr{ display:none; } .tw-arr-l{ fill:none; stroke-width:2.4; stroke-linecap:round; }
.tw-arr-t{ font:700 15px var(--font-body); fill:#0b1f4d; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
:root[data-theme="dark"] .tw-arr-l{ stroke:#8fb8ff; } :root[data-theme="dark"] .tw-arr-t{ fill:#dbe7ff; stroke:#0f1c2b; }
.tw-map[data-mode="arrival"] .tw-layer{ opacity:.4; }
@media (max-width:560px){ .tw-arr-t{ font-size:32px; stroke-width:7px; } .tw-arr-l{ stroke-width:4; } }   /* the 900-wide drawing is ~0.38x on a phone */
.tw-map[data-mode="arrival"][data-k="earliest"] .tw-arr[data-k="earliest"],
.tw-map[data-mode="arrival"][data-k="likely"] .tw-arr[data-k="likely"]{ display:block; }
.tw-arrkey{ display:none; } .tw-map[data-mode="arrival"] .tw-arrkey{ display:inline-flex; } .tw-map[data-mode="arrival"] .tw-legend{ opacity:.5; }
.tw-arr-sw{ display:inline-block; flex:none; width:22px; border-top:3px solid #255fbf; }
:root[data-theme="dark"] .tw-arr-sw{ border-top-color:#8fb8ff; }

/* /tropics/ storm block and section cards (2026-10-07, user: "a lot of scrolling"; mocked and signed off).
   A block per storm with a storm page: top stadiums, games, share cards, a big way to the page. Then the
   three sections that are now their own pages, as cards. */
.ts-wrap{ display:grid; gap:18px; margin-top:26px; }
.ts-blk{ border:1px solid var(--line-2); border-radius:16px; padding:18px; background:var(--bg-2); display:grid; gap:16px; }
.ts-top{ display:flex; flex-wrap:wrap; gap:12px 20px; align-items:flex-end; justify-content:space-between; }
.ts-top .kicker{ margin:0; }
.ts-blk h2, .ts-h2{ font:600 clamp(22px,2.6vw,30px)/1.15 var(--font-display); margin:4px 0 0; color:var(--ink); text-wrap:balance; }
.ts-btn{ display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border-radius:12px; background:var(--ink); color:var(--bg); font-weight:600; text-decoration:none; }
.ts-btn:focus-visible{ outline:2px solid var(--sky-deep); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .ts-btn:hover{ opacity:.9; } .ts-cell:hover{ border-color:var(--ink-3); } }
.ts-g{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:22px; }
.ts-col{ min-width:0; } .ts-col > .lbl{ display:block; margin-bottom:8px; }
.ts-t{ width:100%; border-collapse:collapse; font-size:14px; }
.ts-t th{ text-align:left; font:600 12px var(--font-bug, var(--font-body)); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:6px 8px; border-bottom:1px solid var(--line-2); }
.ts-t td{ padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
.ts-t td small{ display:block; color:var(--ink-3); font-size:12.5px; }
.ts-t td:nth-child(2){ white-space:nowrap; } .ts-t td:nth-child(3){ font-size:13px; }
.ts-extra{ font-size:13px; margin:8px 0 0; }
.ts-share{ margin-top:14px; }
section.ts-more{ margin-top:44px; display:grid; gap:14px; }
.ts-cells{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ts-cell{ display:grid; grid-template-rows:auto 1fr; border:1px solid var(--line-2); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink); background:var(--bg); min-height:44px; }
.ts-cell img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--line); }
.ts-cell-b{ display:grid; gap:4px; padding:12px 14px; }
.ts-cell-b b{ font:600 17px var(--font-display); }
.ts-cell-b span{ font-size:14px; color:var(--ink-2); line-height:1.45; }
.ts-cell-b .ts-cell-u{ color:var(--sky-deep); font-weight:600; font-size:13px; }
.ts-cell:focus-visible{ outline:2px solid var(--sky-deep); outline-offset:2px; }
@media (max-width:860px){
  .ts-cells{ grid-template-columns:minmax(0,1fr); }
  .ts-cell{ grid-template-columns:120px minmax(0,1fr); grid-template-rows:auto; }
  .ts-cell img{ height:100%; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--line); }
}
@media (max-width:760px){ .ts-g{ grid-template-columns:minmax(0,1fr); } .ts-btn{ width:100%; justify-content:center; text-align:center; } }

/* Storm share cards (2026-10-07): drawn by storm-page.js into a 1200x630 host that
   publish_share_cards.js screenshots; never on the page. LIGHT, like the Hazards and scorebug
   cards (user 2026-09-14, and again 10/7: shared cards should not be dark). */
.sp-card{ width:1200px; height:630px; display:grid; grid-template-columns:52% 48%; background:#ffffff; color:#0b1220; font-family:var(--font-body); overflow:hidden; }
.sp-card.st{ grid-template-columns:100%; }
.sp-card .l{ padding:54px 48px 44px; display:grid; align-content:space-between; gap:18px; }
.sp-card .mid{ display:grid; gap:14px; align-content:start; }
.sp-card .eb{ font:700 23px var(--font-bug); letter-spacing:.14em; text-transform:uppercase; color:#b8571f; }
.sp-card .num{ font:700 120px/0.95 var(--font-display); }
.sp-card .t{ font:600 35px/1.2 var(--font-display); }
.sp-card .s{ font:500 25px/1.35 var(--font-body); color:#2b3446; }
.sp-card .note{ font:500 19px/1.4 var(--font-body); color:#48546c; max-width:560px; }
.sp-card .key{ display:flex; align-items:center; gap:0; margin-top:6px; font:600 18px var(--font-body); color:#48546c; }
.sp-card .key i{ display:block; width:34px; height:14px; } .sp-card .key span{ margin:0 10px; }
.sp-card .ft{ display:grid; gap:6px; font:700 24px var(--font-bug); letter-spacing:.06em; color:#6b7690; text-transform:uppercase; }
.sp-card .ft .adv{ color:#b8571f; font-size:21px; }
.sp-card .r svg{ width:100%; height:100%; display:block; }
.sp-card .tw-sea{ fill:#dbe7f3; } .sp-card .sp-land{ fill:#f1ede4; stroke:#b8b2a4; } .sp-card .tw-states{ stroke:#b9b1a1; }
.sp-card .r{ border-left:1px solid rgba(31,79,130,.14); }
.sp-card .tw-cone, .sp-card .tw-track{ stroke:#0b1220; } .sp-card .tw-v circle{ fill:#fff; stroke:#0b1220; stroke-width:3; r:11px; }
.sp-card .tw-arr-l{ stroke-width:3.5; } .sp-card .tw-arr-t{ fill:#0b1f4d; stroke:#ffffff; font-size:28px; stroke-width:6px; }
.sp-card .rows{ display:grid; gap:12px; margin-top:6px; }
.sp-card .row{ display:grid; grid-template-columns:minmax(0,1fr) 260px 160px; align-items:center; gap:22px; }
.sp-card .row b{ display:block; font:600 25px/1.2 var(--font-body); } .sp-card .row small{ display:block; font:500 18px/1.3 var(--font-body); color:#48546c; }
.sp-card .bar{ height:16px; border-radius:8px; background:#e8edf3; overflow:hidden; } .sp-card .bar i{ display:block; height:100%; background:#f3a347; border-radius:8px; }
.sp-card .pct{ font:700 24px var(--font-body); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Share rows in the storm block and on storm pages: the same pills as Right now's. */
.ts-share, .sp-share{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-start; text-align:left; }
.ts-share .lbl, .sp-share .lbl{ font:700 11.5px var(--font-bug); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-right:2px; }
.ts-share .sb-act, .sp-share .sb-act{ display:inline-flex; align-items:center; gap:6px; font:600 13px var(--font-body); letter-spacing:0; text-transform:none; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; opacity:1; text-decoration:none; animation:none; }
.ts-share .sb-act svg, .sp-share .sb-act svg{ width:14px; height:14px; }
@media (hover:hover) and (pointer:fine){ .ts-share .sb-act:hover, .sp-share .sb-act:hover{ border-color:var(--ink); } }
.ts-share .sb-act:focus-visible, .sp-share .sb-act:focus-visible{ outline:2px solid var(--sky-deep); outline-offset:2px; }
@media (pointer:coarse), (max-width:760px){ .ts-share .sb-act, .sp-share .sb-act{ min-height:44px; padding:8px 14px; } }
.sp-share{ margin:14px 0 0; }
/* Phones: Earliest folds under the stadium (the column was cut off at 390). */
.ts-t td{ white-space:normal; } .ts-t .ts-e{ display:none; }
@media (max-width:560px){ .ts-t th:nth-child(3), .ts-t td:nth-child(3){ display:none; } .ts-t .ts-e{ display:block; } }
.sp-card .nw{ white-space:nowrap; }

/* Stadium -> its game (2026-10-07, user), and the storm page button in the storm card. */
.ts-t a.ts-stad, .sp-stad-a{ font-weight:700; color:var(--sky-deep); text-decoration:underline; text-underline-offset:3px; }
.ts-t small.ts-g, .sp-stad-g{ display:block; color:var(--ink-2); font-size:12.5px; }
.th .tr-page a.ts-btn{ width:100%; justify-content:center; text-align:center; margin-top:4px; font-size:14px; line-height:1.3; color:var(--bg); text-decoration:none; }
.ts-all{ margin:12px 0 0; font-weight:600; } .ts-all a{ color:var(--sky-deep); }
@media (pointer:coarse), (max-width:760px){ .ts-t a.ts-stad, .ts-all a{ display:inline-block; padding-block:6px; } }

/* Storm page layered map (2026-10-07, user; mock signed off): presets, layers, key, Share this view,
   the intensity chart. Guidance lines use /tropics/'s colours. */
.tw-map.sp-layers{ max-width:860px; }
/* SVG ignores the hidden attribute without a rule: layers switched off are not drawn. */
.sp-layers .L[hidden], .sp-card .L[hidden], .sp-layers .tw-layer[hidden], .sp-card .tw-layer[hidden]{ display:none; }
.tw-map.fade .L-chance{ opacity:.4; }
.sp-layers .g-ens, .sp-card .g-ens{ fill:none; stroke:var(--g-ens); stroke-width:1; opacity:.45; }
.sp-layers .g-single, .sp-card .g-single{ fill:none; stroke:var(--g-single); stroke-width:1.8; opacity:.9; }
.sp-layers .g-cons, .sp-card .g-cons{ fill:none; stroke:var(--g-cons); stroke-width:3; stroke-linecap:round; }
.sp-layers .sp-pt{ stroke:#fff; stroke-width:1.5; }
.sp-key{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin-top:8px; font-size:12.5px; color:var(--ink-2); }
.g-k{ display:inline-block; width:22px; border-top:2px solid; } .g-k-single{ border-color:var(--g-single); } .g-k-ens{ border-color:var(--g-ens); border-top-width:1px; } .g-k-cons{ border-color:var(--g-cons); border-top-width:3px; }
.ic-wrap{ max-width:860px; margin:4px 0 0; }
.ic-svg{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.ic-g{ stroke:var(--line-2); stroke-dasharray:3 4; } .ic-gl{ font:600 12px var(--font-body); fill:var(--ink-3); paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
.ic-d{ stroke:var(--line); } .ic-dl{ font:600 12.5px var(--font-body); fill:var(--ink-2); } .ic-yl{ font:600 12px var(--font-body); fill:var(--ink-3); } .ic-ax{ stroke:var(--line-2); }
.ic-band{ fill:var(--g-single); opacity:.2; } .ic-mid{ fill:none; stroke:var(--g-single); stroke-width:2.4; stroke-dasharray:6 5; }
.ic-nhc{ fill:none; stroke:var(--ink); stroke-width:3; } .ic-n{ fill:var(--ink); stroke:var(--bg); stroke-width:2; cursor:pointer; } .ic-hit{ fill:transparent; cursor:pointer; }
.ic-key{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:8px; font-size:13px; color:var(--ink-2); }
.ic-key i{ display:inline-block; width:22px; vertical-align:middle; margin-right:6px; }
.ic-k-nhc{ border-top:3px solid var(--ink); } .ic-k-mid{ border-top:2px dashed var(--g-single); } .ic-k-band{ height:10px; background:var(--g-single); opacity:.3; }
@media (max-width:560px){ .ic-gl, .ic-dl, .ic-yl{ font-size:22px; } .ic-gl{ stroke-width:7px; } }
.th .ic-tr{ display:grid; gap:6px; } .th .ic-sum{ margin:0; font-size:14px; } .th .ic-sum a{ color:var(--sky-deep); font-weight:600; }
.th .ic-more{ margin-top:8px; } .th .ic-more summary{ cursor:pointer; font-weight:600; font-size:13.5px; color:var(--sky-deep); min-height:32px; }
.th #intenWrap{ border:0; overflow:visible; }
.sp-card .sp-pt{ r:12px; stroke:#ffffff; stroke-width:3; } .sp-card .sp-lbl{ font-size:26px; fill:#0b1220; stroke:#ffffff; }
.sp-ktnote{ font-size:12.5px; }
#twKt .cr-chip:disabled{ opacity:.4; cursor:not-allowed; }

/* Clean sweep 10/7 late morning: the season arrows reach a finger (32 px). */
@media (pointer:coarse), (max-width:760px){ .th .yearnav button{ width:44px; height:44px; } }

/* Storm map switches (2026-10-07, mock take 2 signed off): one row of on/off switches, the same on a
   phone and a computer; the 39/58/74 and arrival rows show under them only while their layer is on;
   Share is the scorebug's chip. */
.sp-sw{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.sp-swb{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--bg); color:var(--ink); font:600 15px var(--font-body); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sp-swb .sp-box{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--ink-3); flex:none; display:inline-grid; place-items:center; }
.sp-swb[aria-pressed="true"]{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.sp-swb[aria-pressed="true"] .sp-box{ border-color:var(--bg); background:var(--bg); }
.sp-swb[aria-pressed="true"] .sp-box::after{ content:""; width:8px; height:4px; border:2px solid var(--ink); border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px); }
.sp-swb:focus-visible, .sp-seg:focus-visible{ outline:2px solid var(--sky-deep); outline-offset:2px; }
.sp-sub{ display:flex; flex-wrap:wrap; align-items:center; margin:0 0 8px; }
.sp-sub[hidden]{ display:none; }
.sp-sub .lbl{ font:700 11.5px var(--font-bug); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-right:10px; }
.sp-seg{ min-height:40px; padding:8px 14px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink); font:600 14px var(--font-body); cursor:pointer; margin-left:-1px; -webkit-tap-highlight-color:transparent; }
.sp-sub .sp-seg:first-of-type{ border-radius:10px 0 0 10px; margin-left:0; } .sp-sub .sp-seg:last-of-type{ border-radius:0 10px 10px 0; }
.sp-seg[aria-pressed="true"]{ background:var(--sky-deep); border-color:var(--sky-deep); color:#fff; position:relative; }
@media (max-width:560px){ .sp-swb{ font-size:14px; padding:8px 12px; } .sp-sub .lbl{ width:100%; margin-bottom:4px; } .sp-seg{ min-height:44px; } }
.sp-shr{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-start; text-align:left; margin:12px 0 0; }
@media (pointer:coarse), (max-width:760px){ .sp-shr .sb-act{ min-height:40px; padding:8px 14px; } }
#sp-int .sp-shr{ margin:-4px 0 10px; }
/* The intensity card (publish_share_cards.js): the page's chart on the cards' dark ground. */
.sp-card.ic{ grid-template-columns:38% 62%; position:relative; } .sp-card.ic .r{ padding:40px 36px 80px 0; }
.sp-card.ic .r{ border-left:0; } .sp-card.ic .r svg{ background:#f5f7fa; border-radius:12px; border:1px solid rgba(31,79,130,.14); }
.sp-card.ic .ic-g, .sp-card.ic .ic-d, .sp-card.ic .ic-ax{ stroke:#cfd8e3; } .sp-card.ic .ic-gl, .sp-card.ic .ic-dl, .sp-card.ic .ic-yl{ fill:#48546c; font-size:19px; } .sp-card.ic .ic-gl{ stroke:#ffffff; stroke-width:6px; }
.sp-card.ic .ic-nhc{ stroke:#0b1220; stroke-width:4; } .sp-card.ic .ic-n{ fill:#0b1220; stroke:#ffffff; r:7px; } .sp-card.ic .ic-band{ fill:#2a9d8f; opacity:.25; } .sp-card.ic .ic-mid{ stroke:#2a9d8f; }
.sp-card.ic .ick{ position:absolute; right:36px; bottom:30px; display:flex; gap:22px; font:500 18px var(--font-body); color:#48546c; }
.sp-card.ic .ick i{ display:inline-block; width:26px; vertical-align:middle; margin-right:8px; }
.sp-card.ic .ick .ic-k-nhc{ border-top:3px solid #0b1220; } .sp-card.ic .ick .ic-k-mid{ border-top:2px dashed #2a9d8f; } .sp-card.ic .ick .ic-k-band{ height:12px; background:#2a9d8f; opacity:.3; }
/* Evening sweep 10/7: the picked wind speed was white on dark mode's light blue (2:1). */
.sp-seg[aria-pressed="true"]{ color:var(--bg); }
.th .near-cap{ margin-left:12px; font-size:13px; color:var(--ink-3); }
/* Storm page: "Is the forecast shifting?" (2026-10-08, user): every hurricane-center and guidance run, oldest lightest, newest bold */
.st-l{ fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.st-l.st-nhc{ stroke:var(--ink); } .st-l.st-gd{ stroke:var(--g-cons); } .st-l.st-new{ stroke-width:6; }
.st-d{ stroke:var(--bg); stroke-width:2.5; cursor:pointer; } .st-d.st-nhc{ fill:var(--ink); } .st-d.st-gd{ fill:var(--g-cons); }
.st-d.on, .st-d:focus-visible{ stroke:var(--sky-deep); stroke-width:3; outline:none; }
.st-t{ font:700 30px var(--font-bug); letter-spacing:.03em; paint-order:stroke; stroke:var(--bg); stroke-width:7px; stroke-linejoin:round; }
/* Labels are in map units, so they grow with the map: 30 reads ~11 px on a phone but ~32 px on a desktop (user 10/8: size down). */
@media (min-width:700px){ .st-t{ font-size:18px; stroke-width:5px; } }
.st-t-nhc{ fill:var(--ink); } .st-t-gd{ fill:var(--g-cons); }
.st-map svg{ cursor:default; }
.st-key .st-age{ color:var(--ink-3); }
.st-k{ display:inline-block; width:22px; border-top:3px solid; vertical-align:middle; margin-right:7px; }
.st-k-nhc{ border-color:var(--ink); } .st-k-gd{ border-color:var(--g-cons); }
.st-ramp{ display:inline-block; width:34px; height:3px; vertical-align:middle; margin-right:7px; border-radius:2px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--ink) 25%, var(--bg)), var(--ink)); }
.st-sub{ margin-top:18px; }
#sp-trend .cp-tablewrap{ max-width:780px; } .st-tbl th, .st-tbl td{ text-align:left; }
.st-tbl td b{ font-weight:600; } .st-when{ display:block; color:var(--ink-3); font-size:13px; font-variant-numeric:tabular-nums; }
.st-tbl tbody tr:first-child td{ font-weight:600; }

.st-map [hidden]{ display:none; }   /* runs, labels AND a source turned off (10/8: the guidance group stayed drawn) */
.st-win-note{ margin:-4px 0 10px; font-size:13px; color:var(--ink-3); max-width:62ch; }
/* How high could the water get? (2026-10-08, user): NHC's storm surge map on the storm pages (nhc_surge.py
   draws it). The map keeps the light storm-map palette in dark mode, like the other storm maps; no taps on
   it (user). Labels: 20 map units on wide screens, 30 on phones (the map shrinks ~2.3x there). */
.sg-map{ max-width:860px; margin:4px 0 0; }
.sg-map svg{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:12px; }
.sg-town circle{ fill:#1b2333; stroke:#fff; stroke-width:1.6; }
.sg-town text{ font:600 20px var(--font-body); fill:#1b2333; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
.sg-stad rect{ fill:#fff; stroke:#1b2333; stroke-width:2.2; }
.sg-stad text{ font:600 15px var(--font-body); fill:#1b2333; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
.sg-cty{ fill:none; stroke:#8a8273; stroke-width:.9; stroke-dasharray:4 3; }
.sg-cname text{ font:600 14px var(--font-body); letter-spacing:.08em; fill:#7a7263; }
@media (max-width:560px){
  .sg-town text{ font-size:30px; stroke-width:6px; } .sg-town circle{ r:7px; }
  .sg-cname text{ font-size:22px; } .sg-stad text{ font-size:24px; stroke-width:6px; }
  #sgView .sp-seg{ padding:8px 10px; font-size:13px; }
}
.sg-key .sg-k{ display:inline-block; width:16px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:6px; }
.sg-k1{ background:#2f6fde; } .sg-k2{ background:#f2c230; } .sg-k3{ background:#f07c1e; } .sg-k4{ background:#d62020; }
.sg-key .sg-k-lev{ background:repeating-linear-gradient(45deg,#787878 0 2px,#e6e6e6 2px 6px); }
.sg-key .sg-k-cty{ height:0; border-top:1.5px dashed #8a8273; border-radius:0; vertical-align:middle; }
.sg-dia{ display:inline-block; width:9px; height:9px; border:2px solid var(--ink); background:var(--bg); transform:rotate(45deg); margin-right:8px; }
.sg-note{ font-size:14px; line-height:1.5; color:var(--ink-2); max-width:70ch; margin:10px 0 0; }
#sgView{ margin-top:4px; }
/* How much rain? (2026-10-08, user): storm_rain.py's maps on the storm pages -- the light storm-map palette in
   dark mode too, like Surge; the forecast track dashed; WPC's Moderate/High flash-flood areas outlined. */
.rn-st{ fill:none; stroke:#8a8273; stroke-width:1; }
.rn-trk{ fill:none; stroke:#1b2333; stroke-width:2.5; stroke-dasharray:7 6; } .rn-tp{ fill:#fff; stroke:#1b2333; stroke-width:2; }
.rn-ero{ fill:none; stroke-width:3.5; stroke-dasharray:10 6; } .rn-ero-moderate{ stroke:#b0102a; } .rn-ero-high{ stroke:#c2187f; }
.sg-key .rn-k-trk{ height:0; border-top:2.5px dashed var(--ink); border-radius:0; vertical-align:middle; }
.sg-key .rn-k-ero{ height:0; border-top:3px dashed #b0102a; border-radius:0; vertical-align:middle; } .sg-key .rn-k-high{ border-top-color:#c2187f; }
.rn-cap .src-chip{ margin-right:6px; } #rnView{ margin:10px 0 6px; }
@media (max-width:560px){ #rnView .sp-seg{ padding:8px 12px; } }
.sg-look{ margin:10px 0 0; font-size:15px; font-weight:600; } .sg-look a{ color:var(--sky-deep); }
/* The forecast first (2026-10-08, user): NHC's advisory ranges above the map, bars on a 0-12 ft scale in the map's band colours. */
.sg-adv{ margin:18px 0 6px; max-width:760px; }
.sg-adv-h{ font-size:17px; margin:0 0 4px; }
.sg-adv-sub{ font-size:14px; line-height:1.5; color:var(--ink-2); margin:0 0 12px; max-width:70ch; }
.sg-adv-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.sg-adv-list li, .sg-adv-axis{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 62px; gap:12px; align-items:center; }
.sg-adv-place{ font-size:15px; line-height:1.3; min-width:0; }
.sg-adv-ft{ font-weight:700; font-size:15px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sg-adv-trk{ position:relative; height:12px; border-radius:3px;
  background:linear-gradient(90deg, rgba(47,111,222,.16) 0 25%, rgba(242,194,48,.22) 25% 50%, rgba(240,124,30,.2) 50% 75%, rgba(214,32,32,.16) 75%); }
.sg-adv-bar{ position:absolute; inset:0; border-radius:3px; background:linear-gradient(90deg, #2f6fde 0 25%, #f2c230 25% 50%, #f07c1e 50% 75%, #d62020 75%); }
.sg-adv-axis{ margin-top:4px; font-size:12px; color:var(--ink-3); }
.sg-adv-ticks{ position:relative; height:14px; }
.sg-adv-ticks span{ position:absolute; transform:translateX(-50%); font-variant-numeric:tabular-nums; }
.sg-adv-ticks span:first-child{ transform:none; } .sg-adv-ticks span:last-child{ transform:translateX(-100%); }
.sg-adv-unit{ text-align:right; }
.sg-adv-src{ margin-top:8px; }
.sg-map-intro{ margin:30px 0 0; max-width:70ch; }
.sg-map-lead{ font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 0 12px; } .sg-map-lead b{ color:var(--ink); }
.sg-adv-why{ font-size:15px; line-height:1.5; margin:12px 0 0; max-width:70ch; padding:10px 12px; border-left:3px solid #f07c1e; background:var(--panel); border-radius:0 6px 6px 0; }
@media (max-width:560px){
  .sg-adv-list li{ grid-template-columns:minmax(0,1fr) auto; row-gap:4px; }
  .sg-adv-list li .sg-adv-trk{ grid-column:1 / -1; grid-row:2; }
  .sg-adv-axis{ grid-template-columns:minmax(0,1fr); } .sg-adv-axis > span:first-child, .sg-adv-unit{ display:none; }
}
/* Could it bring tornadoes? (2026-10-08, user): SPC's outlook areas in SPC's own colours (inline), its EF2+ hatch,
   tornado watches (yellow) and warnings (red) in effect, today's tornado reports (red triangles). */
#sp-torn [hidden]{ display:none !important; }      /* a .sp-key row is display:flex, which beat [hidden] (all days' keys showed) */
.tn-a{ fill-opacity:.8; stroke-width:2; } .tn-sig{ stroke:#1b2333; stroke-width:1.5; }
.tn-watch{ fill:#f2c230; fill-opacity:.25; stroke:#a37b00; stroke-width:2.5; } .tn-warn{ fill:#d62020; fill-opacity:.45; stroke:#8e0f0f; stroke-width:2.5; }
.tn-rep{ fill:#d62020; stroke:#fff; stroke-width:1.5; }
.sg-key .tn-k-sig{ background:repeating-linear-gradient(45deg,#1b2333 0 2px,transparent 2px 6px); outline:1px solid #1b2333; }
.sg-key .tn-k-watch{ background:rgba(242,194,48,.35); outline:2px solid #a37b00; outline-offset:-2px; }
.sg-key .tn-k-warn{ background:rgba(214,32,32,.5); outline:2px solid #8e0f0f; outline-offset:-2px; }
.sg-key .tn-k-rep{ display:inline-block; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:12px solid #d62020; margin-right:6px; vertical-align:-1px; }
#tnView{ margin:10px 0 6px; }
/* Stadium tips on the Rain and Tornadoes maps (2026-10-08, user: hover or tap a stadium for its numbers). */
.sp-tipfig{ position:relative; } .sp-tipfig .tw-tip{ transform:none; max-width:250px; line-height:1.4; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.sp-tipfig .sg-stad.on rect{ stroke-width:3.4; }
/* Games in the path on the storm map's cards (2026-10-08, user). */
.sp-card.gm .num{ font-size:92px; }
.sp-card .gms{ margin-top:4px; }
.sp-card .gh{ font:700 17px var(--font-bug); letter-spacing:.12em; color:#b8571f; border-bottom:1px solid rgba(31,79,130,.18); padding-bottom:6px; margin-bottom:10px; }
.sp-card .gr{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 10px; }
.sp-card .gt{ min-width:0; } .sp-card .gt b{ display:block; font:600 20px var(--font-body); color:#0b1220; }
.sp-card .gt small{ display:block; font:500 15px var(--font-body); color:#6b7690; margin-top:2px; }
.sp-card .gp{ flex:none; font:700 14px var(--font-bug); letter-spacing:.06em; padding:4px 10px; border-radius:999px; background:#c2410c; color:#fff; }
.sp-card .gp.hur{ background:#a3166b; } .sp-card .gp.cone{ background:none; border:1.5px solid #6b7690; color:#2b3446; }
.sp-card .gm-l{ font-family:var(--font-body); font-weight:600; fill:#1b2333; paint-order:stroke; stroke:#fff; stroke-linejoin:round; }
.sp-card.gm .l{ padding:44px 48px 30px; gap:12px; } .sp-card.gm .mid{ gap:10px; }
.sp-card.gm .s{ font-size:23px; } .sp-card.gm .note{ font-size:17px; } .sp-card.gm .t{ font-size:33px; }

/* Where will it come ashore? (storm pages, 2026-10-09, user): landfall map, coast chart, landfall hour, card.
   Teal is the section's own hue (coast shading, callouts); the dashed black line stays NHC's track alone. */
:root{ --lf-ink:#1b2333; --lf-sp:rgba(27,35,51,.16); --lf-dot:#063330; --lf-halo:#ffffff; --lf-call:#0f5a53; --lf-cty:#6f685b; --lf-area:#38a092; --lf-areal:#0f5a53;
  --lf-grid:rgba(27,35,51,.10); --lf-mut:#5b6476; --lf-hi:#0f5a53; --lf-bar:#7fcdc0; --lf-tipbg:#ffffff; --lf-tipln:rgba(27,35,51,.18); }
:root[data-theme="dark"]{ --lf-ink:#e6ebf2; --lf-sp:rgba(230,235,242,.16); --lf-dot:#d3efe9; --lf-halo:#0f1c2b; --lf-call:#7fcdc0; --lf-cty:#8d97a6; --lf-area:#38a092; --lf-areal:#a9e0d6;
  --lf-grid:rgba(230,235,242,.12); --lf-mut:#9aa6b8; --lf-hi:#7fcdc0; --lf-bar:#24887c; --lf-tipbg:#16202d; --lf-tipln:rgba(230,235,242,.2); }
#sp-land [hidden]{ display:none !important; }
#sp-land .lf-strong{ margin:4px 0 10px; font-size:16px; line-height:1.5; max-width:62ch; } #sp-land .lf-strong .src-chip{ margin-right:6px; }
#sp-land .lf-strong a.lf-more{ white-space:nowrap; color:var(--sky-deep, #1d6fa5); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
#lfView{ margin:10px 0 6px; }
.lf-trk{ fill:none; stroke:var(--lf-ink); stroke-width:2.5; stroke-dasharray:7 6; }
.lf-st{ fill:none; stroke:#8a8273; stroke-width:1; }
.lf-sp{ fill:none; stroke:var(--lf-sp); stroke-width:1.3; stroke-linejoin:round; }
.lf-cty{ fill:none; stroke:var(--lf-cty); stroke-width:1.6; stroke-linejoin:round; } .lf-gap{ stroke:var(--lf-halo); stroke-width:3.5; }
.lf-rib{ fill:none; stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }
.lf-dot{ fill:var(--lf-dot); stroke:var(--lf-halo); stroke-width:.8; opacity:.75; }
.lf-lead{ stroke:var(--lf-call); stroke-width:2; } .lf-anc{ fill:var(--lf-call); stroke:var(--lf-halo); stroke-width:1.5; }
.lf-pct{ font:800 30px var(--font-bug); fill:var(--lf-ink); paint-order:stroke; stroke:var(--lf-halo); stroke-width:6px; stroke-linejoin:round; }
.lf-cn{ font:700 15px var(--font-bug); letter-spacing:.1em; fill:var(--lf-ink); paint-order:stroke; stroke:var(--lf-halo); stroke-width:5px; stroke-linejoin:round; }
.lf-cnm{ display:none; font:700 26px var(--font-bug); letter-spacing:.06em; fill:var(--lf-ink); paint-order:stroke; stroke:var(--lf-halo); stroke-width:6px; stroke-linejoin:round; }
.lf-now circle{ fill:#c2410c; stroke:#fff; stroke-width:3; } .lf-now text{ font:700 20px var(--font-body); fill:var(--lf-ink); paint-order:stroke; stroke:var(--lf-halo); stroke-width:5px; stroke-linejoin:round; }
.lf-k-sp{ height:0 !important; border-top:2px solid var(--lf-ink); opacity:.35; border-radius:0 !important; vertical-align:middle !important; }
.lf-k-trk{ height:0 !important; border-top:2.5px dashed var(--lf-ink); border-radius:0 !important; vertical-align:middle !important; }
.lf-k-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lf-dot); margin-right:6px; vertical-align:middle; }
.lf-rkey{ display:inline-grid !important; grid-template-columns:auto; gap:3px; margin-right:14px; }
.lf-rl{ font-weight:600; } .lf-rbar{ display:flex; gap:2px; } .lf-rk{ width:30px; height:10px; border-radius:2px; }
.lf-rnum{ display:flex; gap:2px; font-size:11px; color:var(--lf-mut); } .lf-rnum span{ width:30px; }
.lf-h4{ font:700 13px var(--font-bug); letter-spacing:.08em; text-transform:uppercase; color:var(--lf-mut); margin:22px 0 4px; } .lf-h4s{ font-weight:600; letter-spacing:.04em; text-transform:none; margin-left:6px; }
.lf-chart{ position:relative; width:100%; } .lf-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.lf-chart text{ font:500 12.5px var(--font-body); fill:var(--lf-mut); font-variant-numeric:tabular-nums; } .lf-chart .lf-sv{ font:800 15px var(--font-bug); fill:var(--lf-ink); }
.lf-chart .lf-tn{ fill:var(--lf-ink); font-weight:600; } .lf-chart .lf-halo{ paint-order:stroke; stroke:var(--lf-halo); stroke-width:4px; stroke-linejoin:round; }
.lf-chart .lf-cnt{ font:700 11.5px var(--font-bug); letter-spacing:.06em; fill:var(--lf-mut); text-transform:uppercase; }
.lf-chart .lf-grid{ stroke:var(--lf-grid); } .lf-chart .lf-div{ stroke:var(--lf-ink); stroke-opacity:.35; stroke-dasharray:3 4; } .lf-chart .lf-base{ stroke:var(--lf-ink); stroke-opacity:.35; }
.lf-chart .lf-area{ fill:var(--lf-area); fill-opacity:.55; } .lf-chart .lf-line{ fill:none; stroke:var(--lf-areal); stroke-width:2; }
.lf-chart .lf-nhc{ stroke:var(--lf-ink); stroke-width:1.6; stroke-dasharray:6 5; } .lf-chart .lf-xh{ stroke:var(--lf-ink); stroke-width:1; }
.lf-chart .lf-b{ fill:var(--lf-bar); } .lf-chart .lf-b.hi{ fill:var(--lf-hi); } .lf-chart .lf-b.on{ fill:var(--lf-ink); }
.lf-tip{ position:absolute; pointer-events:none; background:var(--lf-tipbg); border:1px solid var(--lf-tipln); border-radius:8px; padding:7px 10px; font:500 13px/1.35 var(--font-body); color:var(--lf-ink); box-shadow:0 4px 14px rgba(0,0,0,.12); white-space:nowrap; z-index:3; }
.lf-det{ margin:16px 0 0; } .lf-det summary{ cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; }
.lf-tbl{ width:100%; border-collapse:collapse; margin:8px 0 4px; font-size:15px; } .lf-tbl th{ text-align:left; font:700 12px var(--font-bug); letter-spacing:.06em; text-transform:uppercase; color:var(--lf-mut); padding:4px 6px; border-bottom:1px solid var(--line-2); }
.lf-tbl td{ padding:7px 6px; border-bottom:1px solid var(--line-2); } .lf-tbl .num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
@media (max-width:640px){ .lf-pct{ font-size:40px; stroke-width:8px; } .lf-cn{ display:none; } .lf-cnm{ display:inline; } .lf-rib{ stroke-width:17; } .lf-cty{ stroke-width:2.6; } .lf-gap{ stroke-width:5; }
  .lf-now text{ font-size:28px; } .lf-rk, .lf-rnum span{ width:26px; } }
.ts-land{ margin:4px 0 12px; font-size:16px; } .ts-land a{ color:inherit; text-decoration:underline; text-decoration-color:var(--lf-call); text-decoration-thickness:2px; text-underline-offset:4px; }
.ts-land a b{ color:var(--lf-call); }
/* storm-page.js: a new advisory on an open page (10/9) */
.sp-fresh{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:12px;
  max-width:calc(100% - 32px); padding:10px 10px 10px 16px; border-radius:12px; background:#0b1f4d; color:#fff;
  font:600 15px/1.3 var(--font-body); box-shadow:0 6px 24px rgba(0,0,0,.25); }
.sp-fresh button{ flex:none; min-height:44px; padding:0 16px; border:0; border-radius:8px; background:#fff; color:#0b1f4d; font:700 15px var(--font-body); cursor:pointer; }
:root[data-theme="dark"] .sp-fresh{ background:#dbe7ff; color:#0b1f4d; } :root[data-theme="dark"] .sp-fresh button{ background:#0b1f4d; color:#fff; }