/* The extreme weather pages: right now, the map and the rankings. Cards follow the app's Add a Place board, each over
   the live radar around its place (extreme-weather-cards.js); colors are DreadcastTheme's. */
.extremes-page{--midnight:#10192d;--shelter:#142536;--porcelain:#eef0f5;--mist:#a8bbc3;--boundary:#75899b;--lamp:#ffcc9f}
.extremes{width:min(1120px,calc(100% - 64px));margin:16px auto 88px}
.site-icon{display:block;width:20px;height:20px;flex:none}

/* The header: the homepage's wordmark and line, and on a phone a way to the app (on a wide screen it ends the site menu's bar). */
.extremes-header{position:relative;width:min(1120px,calc(100% - 64px));min-height:112px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #9baec21c}
.extremes-header .brand{display:flex;align-items:center;gap:9px}
.extremes-header .brand-wordmark{display:block;width:246px;height:auto;flex:none}
.extremes-header .brand-description{font:400 14px/1.3 var(--sans);color:#d8e1e9;border-left:1px solid #94a6be4d;padding-left:12px;margin-left:5px}
.get-app{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 7px;border:1px solid #ffcc9f66;border-radius:999px;
  background:linear-gradient(180deg,#ffcc9f24,#ffcc9f08),#10192dcc;font-size:16px;font-weight:600;color:var(--porcelain);white-space:nowrap;transition:border-color .2s,transform .2s}
.get-app img{width:32px;height:32px;flex:none}
.get-app .site-icon{width:20px;height:20px;color:currentColor}
.extremes-header .get-app{border:0;color:#0c1420;font-weight:700}
.get-app:hover{border-color:var(--lamp);transform:translateY(-1px)}
.get-app:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
@media(min-width:761px){.extremes-header .get-app{display:none}}
.extremes .policy-label{display:flex;align-items:center;gap:10px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#ff947d;box-shadow:0 0 0 0 #ff947d88;animation:live-pulse 2s ease-out infinite}
@keyframes live-pulse{70%{box-shadow:0 0 0 9px #ff947d00}100%{box-shadow:0 0 0 0 #ff947d00}}
/* Right now's heading, with the switch between the United States and the rest of the world beside it. */
.hero-split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.hero-words{flex:1 1 520px;min-width:0}
.hero-split .scope-bar{margin:0 0 4px}
.extremes-hero h1{font:400 clamp(36px,4.6vw,52px)/1.05 Georgia,serif;letter-spacing:-.035em;margin:10px 0 8px;max-width:820px}
.extremes-lede{font-size:17px;line-height:1.6;color:#d1dbe5;max-width:640px}
.extremes-lede a{color:var(--lamp);font-weight:600;white-space:nowrap}
.live-updated{color:var(--mist)}
.board-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;margin:28px 0 12px}
.board-heading h2{font:600 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
/* Below the capsule on a wide screen; the capsule and the phone's menu hold Right now and Rankings. */
@media(min-width:761px){.extremes-hero{padding-top:36px}}
.extremes-board,.extremes-rankings{margin-top:24px}
.extremes-hero+.extremes-board{margin-top:22px}
.extremes-status{margin-top:14px;font-size:14px;line-height:1.6;color:#aebdce}
.extremes[data-state=error] .extremes-status{color:#ff947d}
.extremes-status:empty{display:none}


.extremes-section{margin-top:64px}
.extremes-hero+.extremes-section{margin-top:44px}
.section-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:18px}
.section-heading h2{font:400 clamp(28px,4vw,38px)/1.15 Georgia,serif;letter-spacing:-.02em}
.section-note{font-size:15px;line-height:1.5;color:#aebdce}

/* The lead: the event to see first, its live map beside its numbers, then what to do with it: watch it on the map, share
   it, and the app's alert for one like it. */
.lead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin:0 0 28px;border:1px solid color-mix(in srgb,var(--tone) 45%,#75899b55);border-radius:20px;overflow:hidden;background:#0f1828}
.lead[hidden]{display:none}
.lead-picture-frame{position:relative;display:grid}
.lead-picture{position:relative;display:block;min-height:340px;background:#141c2b}
.lead-map{position:absolute;inset:0}
.lead.no-map .lead-picture-frame{display:none}.lead.no-map{grid-template-columns:minmax(0,1fr)}
.lead-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 26px}
/* What it is, once, in its color, with its symbol; a story Storm Desk is following says so beside it. */
.lead-kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:17px;font-weight:700;color:var(--tone)}
.lead-kind .site-icon{width:20px;height:20px;color:var(--tone)}
.lead-story{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lamp);background:#ffcc9f24}
.lead-title{margin:0;font-size:clamp(28px,3vw,36px);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.lead-facts{display:flex;flex-wrap:wrap;gap:10px 24px;margin:2px 0 0}
.lead-facts[hidden]{display:none}
.lead-facts div{display:flex;flex-direction:column-reverse}
.lead-facts dd{margin:0;font-size:22px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.lead-facts dt{font-size:14px;color:var(--mist)}
.lead-facts dd .site-icon{display:inline-block;width:.8em;height:.8em;margin-right:6px;vertical-align:-.05em;color:var(--tone)}
.lead-line{margin:0;font-size:15px;line-height:1.5;color:#c3cfdc}
.lead-line:empty{display:none}
.lead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:6px}
.lead-go{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:700;color:#0c1420;
  background:linear-gradient(180deg,#ffe1c6,var(--lamp) 55%,#e5b48c);box-shadow:inset 0 1px 0 #ffffffa6,0 6px 20px #ffcc9f33}
/* Share beside the button, as its symbol alone. */
.lead-share{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #75899b88;border-radius:50%;background:#10192d99;
  color:var(--porcelain);cursor:pointer;transition:border-color .2s,color .2s}
.lead-share .site-icon{width:18px;height:18px}
.lead-share:hover{border-color:var(--lamp);color:var(--lamp)}
/* The app's alert for one like it: one quiet line. */
.lead-go:focus-visible,.lead-share:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
/* Over a map where more than one warning covers the ground: each in its color, the one shown first and brightest. */
.map-key{position:absolute;z-index:2;left:10px;bottom:10px;display:grid;gap:4px;max-width:calc(100% - 20px);margin:0;padding:8px 10px;list-style:none;
  border-radius:10px;background:#10192de6;font-size:13px;line-height:1.35;color:#c3cfdc;pointer-events:none}
.map-key[hidden]{display:none}
.map-key li{display:flex;align-items:center;gap:8px}
.map-key li.shown{color:var(--porcelain);font-weight:600}
.key-swatch{width:14px;height:10px;flex:none;border:1.5px solid var(--tone);border-radius:3px;background:transparent}
.map-key li.shown .key-swatch{background:color-mix(in srgb,var(--tone) 40%,transparent)}
/* The tags above the cards, and beside them how they're ordered. */
.board-controls{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;margin:0 0 16px}
.board-controls .kind-field{margin:0;flex:1 1 auto}
.board-sort{display:flex;align-items:center;gap:8px;height:42px;font-size:14px;color:var(--mist);white-space:nowrap}
.board-sort select{height:42px;padding:0 12px;border:1px solid #75899b66;border-radius:999px;background:#10192d99;color:var(--porcelain);font:inherit;font-size:15px;cursor:pointer}
.board-sort select:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
/* The tags above the cards: each category's symbol in its color, and the one shown filled with it. */
.kind-field{min-width:0;border:0;padding:0;margin:0 0 16px}
.kind-tags{display:flex;flex-wrap:wrap;gap:8px;min-height:42px}
.kind-tags label{position:relative}
.kind-tags input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kind-tag{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid #75899b66;border-radius:999px;font-size:16px;color:#d1dbe5;white-space:nowrap;transition:background .2s,border-color .2s}
.kind-tag .site-icon{width:18px;height:18px;margin-left:-3px;color:var(--tone)}
.kind-tag b{font-weight:600;color:var(--porcelain);font-variant-numeric:tabular-nums}
.kind-tags label:hover .kind-tag{border-color:#aebdce}
.kind-tags input:checked+.kind-tag{background:var(--tone,var(--lamp));border-color:var(--tone,var(--lamp));color:#14212b;font-weight:600}
.kind-tags input:checked+.kind-tag .site-icon{color:inherit}
.kind-tags input:checked+.kind-tag b{color:inherit}
.kind-tags input:focus-visible+.kind-tag{outline:2px solid var(--lamp);outline-offset:3px}

/* The cards: each event once, three across on six columns, so a last row of one becomes two rows of two and a last row
   of two shares the width; two across on a tablet, one on a phone. */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0}
.board-card{position:relative;min-width:0;container-type:inline-size}
@media(min-width:901px){
  .board{grid-template-columns:repeat(6,minmax(0,1fr))}
  .board-card{grid-column:span 2}
  .board-card:nth-child(3n+1 of .board-card):nth-last-child(1 of .board-card){grid-column:span 6}
  .board-card:nth-child(3n+1 of .board-card):is(:nth-last-child(4 of .board-card),:nth-last-child(2 of .board-card)),
  .board-card:nth-child(3n+1 of .board-card):is(:nth-last-child(4 of .board-card),:nth-last-child(2 of .board-card))~.board-card{grid-column:span 3}
  .board-card.placeholder{grid-column:span 2}
}
/* A card: a picture across its top (the map and radar around the event), its words below on solid ground, and the
   whole card a link to the map. */
.card-action{display:flex;flex-direction:column;width:100%;height:100%;text-align:left;overflow:hidden;
  border:1px solid #75899b73;border-radius:16px;background:#0f1828;transition:border-color .2s,transform .2s}
.card-action:hover{border-color:color-mix(in srgb,var(--lamp) 60%,transparent);transform:translateY(-2px)}
.card-picture{position:relative;isolation:isolate;display:block;height:172px;overflow:hidden;background:#141c2b}
/* RadarCardBackground: the map and radar windows share a frame, set by extreme-weather-cards.js, with the event at its
   center (a ranking leader's at 70% across and 44% down), marked with a dot and a faint ring, or its symbol. */
.card-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.leader .card-scene{z-index:-1}
.card-window{position:absolute;inset:0}
.card-window canvas{position:absolute;inset:0;width:100%;height:100%;animation:card-layer .35s ease-out}
@keyframes card-layer{from{opacity:0}}
.card-ring,.card-dot{position:absolute;z-index:2;left:70%;top:44%;border-radius:50%;transform:translate(-50%,-50%)}
.card-scene[data-focus=center] :is(.card-ring,.card-dot){left:50%;top:50%}
.card-ring{width:30px;height:30px;border:1px solid #eef0f540}
.card-dot{width:7px;height:7px;border:1.5px solid var(--midnight);background:var(--porcelain)}
/* A marker with the event's symbol, in its color, for everything but the radar's places, whose rain is the picture. */
.card-ring[data-icon]:not([data-icon=""]){display:grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--mark);background:#10192dcc;color:var(--mark);
  box-shadow:0 0 18px 4px color-mix(in srgb,var(--mark) 35%,transparent)}
.card-ring[data-icon]:not([data-icon=""]) .site-icon{width:18px;height:18px}
.card-ring[data-icon]:not([data-icon=""])+.card-dot{display:none}
/* A warning's own area marks where to look, so its picture has no ring or dot. */
.card-scene[data-area=true] :is(.card-ring,.card-dot){display:none}
/* An earthquake's ripples, spreading from where it struck, over a glow that grows with its magnitude (--strength), so an
   M7 reads stronger than an M4.5. */
.card-scene[data-kind=earthquake] .card-ring::before,.card-scene[data-kind=earthquake] .card-ring::after{content:'';position:absolute;inset:-2px;border-radius:50%;
  border:1.5px solid var(--mark);animation:quake-ripple 2.4s ease-out infinite;pointer-events:none}
.card-scene[data-kind=earthquake] .card-ring::after{animation-delay:1.2s}
@keyframes quake-ripple{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.card-picture .card-scene[data-kind=earthquake]::before{content:'';position:absolute;z-index:1;left:50%;top:50%;width:calc(var(--strength,1) * 150px);aspect-ratio:1;
  border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--mark) 38%,transparent),transparent 68%);pointer-events:none}
/* A tropical cyclone's symbol turns, as the storm does (counterclockwise in the northern hemisphere). */
.card-scene[data-kind=tropical_cyclone] .card-ring .site-icon{animation:storm-turn 6s linear infinite}
@keyframes storm-turn{to{transform:rotate(-360deg)}}
/* A fire's and a warning's glow. */
.card-scene:is([data-kind=wildfire],[data-kind=warning]) .card-ring{animation:mark-glow 2.2s ease-in-out infinite alternate}
@keyframes mark-glow{to{box-shadow:0 0 30px 10px color-mix(in srgb,var(--mark) 55%,transparent)}}
@media(prefers-reduced-motion:reduce){.card-scene .card-ring,.card-scene .card-ring::before,.card-scene .card-ring::after,.card-scene .card-ring .site-icon{animation:none}}
/* Shaded only at the top, for the tag, and into the words at the foot. */
.card-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0f182899,#0f182800 34%,#0f182800 72%,#0f1828)}
.card-top{position:absolute;z-index:3;top:12px;left:12px;right:58px;display:flex;align-items:center;gap:8px;height:24px}
.card-top .tag{height:22px;padding:0 9px;font-size:13px}
.card-icon{display:grid;place-items:center;width:24px;height:24px;flex:none;color:var(--tone);filter:drop-shadow(0 1px 2px #000c)}
.card-icon .site-icon{width:22px;height:22px}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:var(--tone);background:color-mix(in srgb,var(--tone) 18%,#10192dcc)}
/* Severity, as the API says: a tinted tag as its kind usually comes, a stronger one when it's dangerous, and for the worst
   its kind gets, filled, with the card's edge in its color. */
.board-card[data-severity="2"] .card-top .tag{background:color-mix(in srgb,var(--tone) 36%,#10192dcc);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 70%,transparent)}
.board-card[data-severity="3"] .card-top .tag{background:var(--tone);color:#14212b}
.board-card[data-severity="3"] .card-action{border-color:color-mix(in srgb,var(--tone) 80%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tone) 35%,transparent),0 0 26px color-mix(in srgb,var(--tone) 24%,transparent)}
/* As the app does with a tag too long for its card, a narrow card leaves things out rather than widening. */
@container (max-width:250px){.board-card .card-top .tag{font-size:10px;padding:0 6px}}
/* The words: where, as the headline; how far the town is, when it says near; what makes it extreme, in its kind's
   color; up to two more numbers, each with its symbol; and at the foot, when, and the temperature there now. */
.card-words{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:5px;padding:10px 16px 14px}
.card-city{font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.01em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card-where{font-size:14px;line-height:1.35;color:var(--mist)}
.card-measure{margin-top:2px;font-size:16px;font-weight:700;line-height:1.3;color:var(--tone);font-variant-numeric:tabular-nums}
.card-details{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:14px;line-height:1.4;color:#c3cfdc}
.card-detail{display:inline-flex;align-items:center;gap:6px}
.card-detail .site-icon{width:15px;height:15px;color:var(--tone)}
.card-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;margin-top:auto;padding-top:8px;font-size:13px;color:var(--mist)}
.card-temp{margin-left:auto;font-weight:600;color:#c3cfdc;font-variant-numeric:tabular-nums;white-space:nowrap}
.card-temp:empty{display:none}
.card-temp::before{content:'Now ';font-weight:400;color:var(--mist)}
/* Share sits over the picture, beside the card's link rather than in it. */
.card-share{position:absolute;z-index:3;top:10px;right:10px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #eef0f538;border-radius:50%;
  background:#10192dcc;color:var(--porcelain);cursor:pointer;transition:border-color .2s,color .2s}
.card-share .site-icon{width:17px;height:17px}
.card-share:hover{border-color:var(--lamp);color:var(--lamp)}
.card-share:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.share-toast{position:fixed;z-index:20;left:50%;bottom:28px;transform:translateX(-50%);padding:10px 18px;border-radius:999px;background:var(--porcelain);color:#14212b;
  font-size:15px;font-weight:600;box-shadow:0 8px 30px #0008}
.share-toast[hidden]{display:none}
.board-card.placeholder{min-height:330px;border:1px solid #75899b4d;border-radius:16px;background:#10192d73;animation:placeholder 1.8s ease-in-out infinite alternate}
@keyframes placeholder{to{opacity:.5}}
/* The install band, moved up among the cards on Right now: the grid's full width. */
.board-band{grid-column:1/-1;list-style:none}
.board-band .get-band{margin:4px 0}
.board-empty{grid-column:1/-1;padding:28px;border:1px dashed #75899b66;border-radius:16px;font-size:17px;color:#d1dbe5}
.board-more{display:block;margin:20px auto 0;padding:12px 24px;border:1px solid #75899b88;border-radius:999px;background:#10192d99;color:var(--porcelain);font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:border-color .2s}
.board-more:hover{border-color:var(--lamp)}
.board-more[hidden]{display:none}


/* Rankings: the United States, or the rest of the world, which the API ranks apart. */
.scope-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:20px}
.scope-bar[hidden]{display:none}
.scope-field{min-width:0;border:0;padding:0;margin:0}
.scope-switch{display:flex;padding:4px;border:1px solid #75899b55;border-radius:999px;background:#10192d99}
.scope-switch label{position:relative;flex:1}
.scope-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.scope-option{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:16px;font-weight:600;color:#aebdce;white-space:nowrap;transition:background .2s,color .2s}
/* Each scope's mark: the U.S. flag, small and rounded, and the Earth for the rest of the world. */
.scope-option .site-icon{width:18px;height:18px}
.scope-flag{display:block;width:19px;height:10px;flex:none;clip-path:inset(0 round 2px);opacity:.92}
.scope-switch input:checked+.scope-option .scope-flag{opacity:1}
.scope-switch label:hover .scope-option{color:var(--porcelain)}
.scope-switch input:checked+.scope-option{background:var(--porcelain);color:#14212b}
.scope-switch input:focus-visible+.scope-option{outline:2px solid var(--lamp);outline-offset:2px}
.scope-note{font-size:16px;line-height:1.5;color:#aebdce}
.rankings[aria-busy=true],.leaders,.standings{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-items:start;gap:14px}
/* Each ranking's leader: the place large, then its number in the ranking's color, then what the number means. */
.leader{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;border:1px solid #75899b55;border-radius:16px;background:#10192d99}
.leader .ranking-head{margin-bottom:10px}
/* A picture across the top of each leader: the radar around its place, as Right now's cards draw it, the place marked
   in the ranking's color with a glow, so a storm at sea or a quake offshore still has one. The words sit below it. */
.leader.has-scene{position:relative;isolation:isolate;overflow:hidden;padding-top:156px;background:#10192d}
.leader.has-scene .card-scene{inset:0 0 auto 0;height:150px}
.leader.has-scene .card-scene::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 70% 44%,color-mix(in srgb,var(--tone) 32%,transparent),transparent 42%)}
.leader.has-scene .card-scene::after{z-index:1;background:linear-gradient(180deg,#10192d00 60%,#10192d)}
.leader.has-scene .card-ring,.leader.has-scene .card-dot{z-index:2}
.leader.has-scene .card-ring{width:44px;height:44px;border:1.5px solid var(--tone)}
.leader.has-scene .card-ring[data-icon=""]{animation:leader-pulse 2.6s ease-out infinite}
.leader.has-scene .card-ring .site-icon{width:22px;height:22px}
.leader.has-scene .card-dot{width:10px;height:10px;background:var(--tone);border-color:#10192d}
@keyframes leader-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tone) 50%,transparent)}100%{box-shadow:0 0 0 20px color-mix(in srgb,var(--tone) 0%,transparent)}}
@media(prefers-reduced-motion:reduce){.leader.has-scene .card-ring[data-icon=""]{animation:none}}
.leader.has-scene .leader-label,.leader.has-scene .leader-stat,.leader.has-scene .ranking-description{text-shadow:0 1px 3px #000c}
.leader.has-scene .ranking-description{color:#c3cfdc}
.leader-label{font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--porcelain);overflow-wrap:anywhere}
.leader-stat{font-size:16px;line-height:1.45;color:#d1dbe5}
.leader-aside{font-size:14px;color:var(--mist)}
.leader-stat strong{font-size:18px;font-weight:700;color:var(--tone);font-variant-numeric:tabular-nums}
.leader .ranking-description{margin-top:8px;margin-bottom:0}
.leaders{align-items:stretch}
.leader .entry-show{margin-top:auto;padding-top:10px}
.rankings-quiet{margin-bottom:14px;padding:14px 18px;border:1px dashed #75899b66;border-radius:14px;font-size:16px;line-height:1.5;color:#d1dbe5}
.standings-title{margin:36px 0 14px;font:600 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.standings .ranking h3{display:flex;align-items:center;gap:10px}
.standings .ranking h3::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--tone,var(--lamp));flex:none}
.ranking{padding:20px;border:1px solid #75899b55;border-radius:16px;background:#10192d99}
.ranking.placeholder{min-height:280px;animation:placeholder 1.8s ease-in-out infinite alternate}
.ranking-head{display:flex;align-items:center;gap:12px}
.ranking-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;color:var(--tone);background:color-mix(in srgb,var(--tone) 16%,#10192d)}
.ranking h3{margin:0;font-size:19px;font-weight:600;line-height:1.3}
.rankings-empty{grid-column:1/-1;padding:28px;border:1px dashed #75899b66;border-radius:16px;font-size:17px;color:#d1dbe5}
.ranking-description{margin-top:6px;font-size:14px;line-height:1.5;color:#aebdce}
.ranking-list{list-style:none;padding:0;margin:14px 0 0}
.ranking-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 12px;padding:10px 0;border-top:1px solid #75899b33}
.entry-main{display:flex;align-items:baseline;gap:10px;min-width:0}
.entry-rank{flex:none;width:22px;font:600 14px var(--mono);color:var(--tone,var(--lamp))}
.entry-label{font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.entry-value{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.entry-detail{grid-column:1;padding-left:32px;font-size:14px;line-height:1.45;color:#aebdce}
.entry-show{grid-column:2;grid-row:2;justify-self:end;background:none;border:0;padding:2px 0;font-size:14px;color:var(--lamp);text-decoration:underline;text-underline-offset:3px}

.text-button,.text-link{background:none;border:0;padding:0;font-size:14px;color:var(--lamp);text-decoration:underline;text-underline-offset:3px}

/* Get Dreadcast: the app's card on the live pages, and on the extreme weather pages a band, its icon, words and button
   in a row. */
.get-dreadcast{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:48px;margin-top:88px;padding:48px;
  border:1px solid #ffcc9f4d;border-radius:28px;background:radial-gradient(ellipse 70% 90% at 0 0,#ffcc9f2e,transparent 60%),radial-gradient(ellipse 60% 80% at 100% 100%,#73bff22b,transparent 65%),#0f1828}
.get-dreadcast::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
  background:repeating-radial-gradient(circle at 78% 50%,transparent 0 46px,#73bff212 46px 47px)}
.get-icon{display:block;width:76px;height:76px;margin-left:-6px;filter:drop-shadow(0 10px 22px #0008)}
.get-dreadcast h2{margin-top:16px;font:400 clamp(32px,4.2vw,46px)/1.08 Georgia,serif;letter-spacing:-.025em;text-wrap:balance}
.get-pitch{margin:14px 0 28px;max-width:540px;font-size:17px;line-height:1.65;color:#d1dbe5}
.get-button{display:inline-flex;font-size:16px}
.get-free{margin:12px 0 0;font-size:13px;color:#aebdce}
.get-band{grid-template-columns:auto minmax(0,1fr) auto;gap:28px;margin-top:64px;padding:28px 34px;border-radius:22px}
.get-band .get-icon{width:64px;height:64px;margin:0}
.get-band h2{margin:0;font-size:clamp(26px,3vw,34px)}
.get-band .get-pitch{max-width:none;margin:8px 0 0;font-size:16px}
.get-action{display:flex;flex-direction:column;align-items:center;gap:8px}
.get-action .get-free{margin:0}
/* The credits the maps under Right now's cards need; the rest are in Data & Sources. */
.extremes-credits{margin-top:40px;font-size:14px;line-height:1.6;color:#aebdce}
.extremes-credits a{text-decoration:underline;text-underline-offset:3px;color:#d1dbe5}

@media(prefers-reduced-motion:reduce){.card-window canvas{animation:none}.get-app,.card-action{transition:none}}
@media(max-width:900px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board-card:nth-last-child(1 of .board-card):nth-child(odd of .board-card){grid-column:1/-1}
  .lead{grid-template-columns:minmax(0,1fr)}.lead-picture{min-height:260px}
  .get-dreadcast{gap:28px;padding:40px}
}
@media(max-width:760px){
  .extremes{width:calc(100% - 32px);margin-top:24px}
  /* Live and how fresh, on one line. */
  .live-what{display:none}
  /* One row, so the heading and the first cards make the first screen: the menu, the wordmark, and the way to the app. */
  .extremes-header{width:calc(100% - 32px);gap:10px;min-height:0;padding:16px 0 0 56px;border:0}
  .extremes-header .brand-wordmark{width:clamp(104px,34vw,150px)}
  .extremes-header .brand-description{display:none}
  .extremes-header .get-app{height:40px;gap:8px;padding:0 14px 0 6px;font-size:14px}
  .extremes-header .get-app img{width:28px;height:28px}
  .extremes-header .get-app .site-icon{display:none}
  /* Room between the label, the heading, its line and what follows, so the top doesn't read as one block. */
  .extremes-hero h1{margin:14px 0 12px}
  .extremes-board,.extremes-rankings{margin-top:36px}
  .scope-bar{gap:14px;margin-bottom:28px}
  .extremes-lede{font-size:17px}
  .extremes-section{margin-top:48px}
  .hero-split{gap:18px}
  .board{grid-template-columns:minmax(0,1fr);gap:12px}
  .board-card:nth-last-child(1 of .board-card):nth-child(odd of .board-card){grid-column:auto}
  .card-picture{height:156px}.card-words{padding:10px 14px 12px}.card-city{font-size:21px}
  .lead-picture{min-height:210px}.lead-copy{padding:16px 18px;gap:8px}.lead-facts dd{font-size:20px}.lead-title{font-size:26px}
  .board-sort{height:auto}
  /* The tags in one row that scrolls sideways, from edge to edge, so the cards start on the first screen. */
  .kind-tags{flex-wrap:nowrap;overflow-x:auto;margin:-6px -16px 6px;padding:6px 16px;scroll-padding-inline:16px;scrollbar-width:none}
  .kind-tags::-webkit-scrollbar{display:none}
  .kind-tags label{flex:none}
  .kind-tag{height:40px;padding:0 14px}
  .rankings[aria-busy=true],.leaders,.standings{grid-template-columns:minmax(0,1fr)}
  .leader-label{font-size:24px}
  .scope-field{flex:1 1 100%}.scope-option{padding:0 10px}
  .get-dreadcast{margin-top:64px;padding:30px 22px;border-radius:22px}
  .get-pitch{font-size:16px}
  /* The band's icon beside its heading, then its line, then the button across. */
  .get-band{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:22px 20px;margin-top:40px}
  .get-band .get-copy{display:contents}
  .get-band .get-icon{width:48px;height:48px;align-self:center}
  .get-band h2{font-size:26px}
  .get-band .get-pitch{grid-column:1/-1;margin:0}
  .get-action{grid-column:1/-1;align-items:stretch;text-align:center}
  .get-band .get-button{justify-content:center}
}


/* A grouped card's chip: the rest of its storm or sequence, which its page shows. */
.card-more{position:absolute;z-index:3;left:12px;bottom:10px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--porcelain);
  background:color-mix(in srgb,var(--tone) 30%,#10192de6);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 60%,transparent)}

/* An event's page: the place and what it is over the live map, its numbers as tiles, what to know beside the app's
   alert for one like it, then what's around it and what's happening elsewhere. As Storm Desk's live pages are. */
.event{display:grid;gap:26px}
.event-hero{display:grid;gap:10px;padding-top:28px}
.event-status{margin:0}
.event[data-state=ended] .live-dot{display:none}
.event-kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 0;font-size:18px;font-weight:700;color:var(--tone)}
.event-kind:empty{display:none}
.event-kind .site-icon{width:22px;height:22px;color:var(--tone)}
.event-hero h1{margin:0;font:400 clamp(38px,5vw,58px)/1.04 Georgia,serif;letter-spacing:-.03em;text-wrap:balance}
.event-where{margin:0;font-size:17px;line-height:1.5;color:#c3cfdc}
.event-where:empty{display:none}
.event-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.event-share[hidden],.event-follow[hidden]{display:none}
.event-follow{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:700;color:#0c1420;
  background:linear-gradient(180deg,#ffe1c6,var(--lamp) 55%,#e5b48c)}
.event-map-frame{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--tone,#75899b) 45%,#75899b55);border-radius:22px;background:var(--midnight)}
.event-map-frame[hidden]{display:none}
.event-map{position:relative;height:min(64vh,560px);min-height:340px}
/* The numbers people feel, each with its symbol, what it counts, and a note where one helps. */
.event-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0}
.event-tiles[hidden]{display:none}
/* Five or more go three to a row (two on a narrower screen), so a long number stays on one line. */
@media(min-width:761px){.event-tiles:has(>:nth-child(5)){grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.event-tile{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid #75899b44;border-radius:16px;background:#0f1828}
.tile-label{order:-1;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.tile-value{display:flex;align-items:center;gap:8px;margin:0;font-size:24px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.tile-value .site-icon{width:20px;height:20px;color:var(--tone)}
.tile-note{margin:0;font-size:14px;line-height:1.4;color:#c3cfdc}
.event-columns{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:stretch}
.event-know{padding:20px 22px;border:1px solid #75899b44;border-radius:16px;background:#0f1828}
.event-know[hidden],.event-alert[hidden]{display:none}
.event-know h2,.event-related h2,.event-more h2{margin:0 0 10px;font:400 24px/1.2 Georgia,serif}
.know-line,.know-towns{margin:0 0 10px;font-size:16px;line-height:1.55;color:#d1dbe5}
.know-towns strong{color:var(--porcelain)}
.know-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}
.know-links .text-link{font-size:15px}
.event-alert{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:8px 14px;padding:20px 22px;border:1px solid #ffcc9f4d;border-radius:16px;
  background:radial-gradient(ellipse 80% 100% at 0 0,#ffcc9f26,transparent 60%),#0f1828;color:inherit;transition:border-color .2s}
.event-alert:hover{border-color:var(--lamp)}
.event-alert .site-icon{width:24px;height:24px;color:var(--lamp)}
.event-alert span{display:grid;gap:6px;font-size:15px;line-height:1.5;color:#c3cfdc}
.event-alert strong{font-size:18px;line-height:1.3;color:var(--porcelain)}
.event-alert b{grid-column:2;justify-self:start;margin-top:4px;padding:10px 16px;border-radius:999px;color:#0c1420;
  background:linear-gradient(180deg,#ffe1c6,var(--lamp) 55%,#e5b48c)}
.event-alert:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.event-related[hidden]{display:none}
.event-more .section-heading{margin-bottom:12px}
.event-all{color:var(--lamp);font-weight:600}
@media(max-width:760px){
  .event{gap:20px}
  .event-hero{padding-top:8px}
  .event-map{height:58vh;min-height:300px}
  .event-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .event-tile{padding:12px 14px}
  .tile-value{font-size:20px}
  .event-columns{grid-template-columns:minmax(0,1fr)}
}
/* This week's standings: cards or a table, switched beside the scope. The table sorts by its columns and filters by
   kind and a search; on a phone each row stacks. */
.view-field{min-width:0;border:0;padding:0;margin:0}
.view-switch .scope-option{padding:0 16px}
.week[hidden],.rankings[hidden]{display:none}
.week-controls{margin-bottom:12px}
.week-search input{height:42px;width:min(260px,100%);padding:0 14px;border:1px solid #75899b66;border-radius:999px;background:#10192d99;color:var(--porcelain);font:inherit;font-size:15px}
.week-search input:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.week-table-wrap{overflow-x:auto;border:1px solid #75899b44;border-radius:16px;background:#0f1828}
.week-table{width:100%;min-width:760px;border-collapse:collapse;font-size:15px}
.week-table th{position:sticky;top:0;padding:0;background:#121c2b;text-align:left;border-bottom:1px solid #75899b44}
.week-table th button{display:flex;align-items:center;gap:6px;width:100%;padding:12px 16px;border:0;background:none;color:var(--mist);font:inherit;font-size:12px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.week-table th button::after{content:'↕';opacity:.35}
.week-table th[aria-sort=descending] button::after{content:'↓';opacity:1;color:var(--lamp)}
.week-table th[aria-sort=ascending] button::after{content:'↑';opacity:1;color:var(--lamp)}
.week-table th[aria-sort=descending] button,.week-table th[aria-sort=ascending] button{color:var(--porcelain)}
.week-table td{padding:12px 16px;border-bottom:1px solid #75899b26;vertical-align:top;line-height:1.4}
.week-table tr:last-child td{border-bottom:0}
.week-table tbody tr:hover{background:#ffffff06}
.week-what{display:flex;align-items:center;gap:8px;white-space:nowrap}
.week-what .card-icon{width:20px;height:20px}.week-what .card-icon .site-icon{width:18px;height:18px}
.week-where a{font-weight:600;color:var(--porcelain)}
.week-where a:hover{color:var(--lamp)}
.week-size strong{display:block;font-weight:700;color:var(--tone)}
.week-size span{display:block;font-size:13px;color:var(--mist)}
.week-people,.week-when,.week-status{white-space:nowrap;font-variant-numeric:tabular-nums;color:#c3cfdc}
/* Still going says so in the lamp's color; an ended one, quietly when. Today's standings have no status to give. */
.week-status{font-size:14px;color:var(--mist)}
.week-status.going{font-weight:600;color:var(--lamp)}
.week-table[data-period=now] :is(.week-status-head,.week-status){display:none}
#week-more{margin-top:14px}
#week-more[hidden]{display:none}
.leader-when{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--mist)}
.week-count{margin:12px 0 0;font-size:14px;color:var(--mist)}
.week-sort{display:none}
@media(max-width:760px){
  .week-table{min-width:0}
  .week-table thead{display:none}
  .week-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px;border-bottom:1px solid #75899b26}
  .week-table td{padding:0;border:0}
  .week-what{grid-column:1/-1}
  .week-size{grid-column:1/-1}
  .week-people::before{content:'People ';color:var(--mist)}
  .week-when::before{content:'Peaked ';color:var(--mist)}
  .week-status{grid-column:1/-1}
  .week-sort{display:flex}
}

/* A warning's card over the map (extreme-weather-alerts.js), as the app's alert reader: NWS's call to action, when it
   applies, where, what to do and what to expect in NWS's own words, and who sent it. On a phone it sits at the foot of
   the map. */
.alert-card{position:absolute;z-index:5;top:12px;left:12px;display:flex;flex-direction:column;width:min(380px,calc(100% - 24px));max-height:calc(100% - 24px);
  overflow:hidden;border:1px solid color-mix(in srgb,var(--tone,#ff947d) 42%,#75899b55);border-radius:18px;background:#0f1828f5;box-shadow:0 18px 50px #000a;color:var(--porcelain)}
.alert-card[hidden]{display:none}
.key-open{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;pointer-events:auto;text-decoration:underline;text-decoration-color:#75899b88;text-underline-offset:3px;cursor:pointer}
.key-open:hover{text-decoration-color:currentColor}
.alert-card-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:1px solid #75899b33}
.alert-card-heading{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;margin:0}
.alert-card-heading strong{font-size:14px}
.alert-card-heading span{overflow:hidden;font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;text-overflow:ellipsis;color:var(--mist)}
.alert-card-close,.alert-card-back{display:grid;flex:none;place-items:center;min-width:34px;height:34px;padding:0 10px;border:1px solid #75899b66;border-radius:999px;
  background:none;color:var(--porcelain);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.alert-card-close .site-icon{width:16px;height:16px}
.alert-card-close:hover,.alert-card-back:hover{border-color:var(--lamp)}
.alert-card-close:focus-visible,.alert-card-back:focus-visible,.alert-show:focus-visible,.alert-more:focus-visible,.alert-list-row:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.alert-card-body{display:grid;align-content:start;gap:12px;padding:14px 16px 16px;overflow-y:auto;overscroll-behavior:contain}
.alert-identity{display:flex;align-items:flex-start;gap:12px}
.alert-badge{display:grid;flex:none;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--tone) 18%,transparent);color:var(--tone)}
.alert-badge .site-icon{width:20px;height:20px}
.alert-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.alert-chips:empty{display:none}
.alert-chip{padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--tone) 18%,transparent);color:var(--tone);font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.alert-chip.ending,.alert-chip.quiet{background:#75899b33;color:var(--mist)}
.alert-card-title{margin:0;font-size:19px;font-weight:650;line-height:1.25}
.alert-card-title:focus{outline:none}
.alert-when-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:0;font-size:15px;font-weight:600}
.alert-when-line .site-icon{align-self:center;width:16px;height:16px;color:var(--tone)}
.alert-when-line small{font-size:12px;font-weight:500;color:var(--mist)}
.alert-when-detail{margin:2px 0 0 22px;font-size:13px;color:var(--mist)}
.alert-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.alert-tag{padding:4px 10px;border:1px solid color-mix(in srgb,var(--tone) 45%,transparent);border-radius:999px;font-size:13px;font-weight:600}
.alert-areas{margin:0;font-size:14px;line-height:1.5;color:var(--mist)}
.alert-more{padding:0;border:0;background:none;color:var(--lamp);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.alert-show{display:inline-flex;justify-self:start;align-items:center;gap:6px;padding:7px 12px;border:1px solid #75899b66;border-radius:999px;background:none;
  color:var(--porcelain);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.alert-show .site-icon{width:16px;height:16px}
.alert-show:hover{border-color:var(--lamp)}
.alert-section{padding:12px 14px;border:1px solid #75899b33;border-radius:12px;background:#ffffff05}
.alert-section.emphasized{border-color:color-mix(in srgb,var(--tone) 55%,transparent);background:color-mix(in srgb,var(--tone) 8%,transparent)}
.alert-section h4,.alert-section summary{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:14px;font-weight:700}
.alert-section summary{margin:0;cursor:pointer}
.alert-section[open] summary{margin-bottom:8px}
.alert-section h4 .site-icon{width:16px;height:16px;color:var(--tone)}
.alert-rows{display:grid;gap:8px}
.alert-row{margin:0;font-size:14px;line-height:1.55;white-space:pre-line;color:#d1dbe5}
.alert-row strong{color:var(--porcelain)}
.alert-row.columns{overflow-x:auto;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}
.alert-provenance,.alert-card-note,.alert-card-loading,.alert-list-status{margin:0;font-size:13px;line-height:1.5;color:var(--mist)}
.alert-source{justify-self:start;font-size:14px;color:var(--lamp)}
.alert-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.alert-list-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid #75899b33;border-radius:12px;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer}
.alert-list-row:hover{border-color:var(--tone)}
.alert-list-words{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.alert-list-words strong{font-size:15px}
.alert-list-words span{font-size:13px;color:var(--mist)}
.alert-list-words .alert-list-apart{font-size:12px;color:#c3cfdc}
.alert-list-words .alert-chip{align-self:flex-start;margin-bottom:2px;font-size:11px;color:var(--tone)}
@media(max-width:600px){
  .alert-card{top:auto;right:8px;bottom:8px;left:8px;width:auto;max-height:80%}
}