/* 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{margin-top:24px}
/* Rankings' scope and view switches stand apart from the period links above them. */
.extremes-rankings{margin-top:36px}
.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. The week's table tags its rows the same way. */
.board-card[data-severity="2"] .card-top .tag,.week-table tr[data-severity="2"] .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,.week-table tr[data-severity="3"] .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-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-stat>.site-icon{display:inline-block;width:18px;height:18px;margin-right:6px;vertical-align:-3px;color:var(--tone)}
.leader-stat .meter{height:16px;margin-right:10px;vertical-align:-2px}
.leader-stat .meter i{width:6px}
.leader-detail{font-size:15px;line-height:1.45;color:#d1dbe5}
.leader.has-scene .leader-detail{text-shadow:0 1px 3px #000c}
.leader .amount{width:100%;height:8px;margin:4px 0 0}
.leader .parts{padding:0}
.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}
/* A standing for one event is its own way to its page, as the table's places are; one still going has the live dot. */
a.entry-label{color:var(--porcelain);text-decoration:underline;text-decoration-color:#75899b80;text-underline-offset:4px}
a.entry-label:hover{color:var(--lamp);text-decoration-color:currentColor}
a.entry-label:focus-visible{outline:2px solid var(--lamp);outline-offset:2px;border-radius:4px}
.entry-going{display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:#ff947d;vertical-align:2px}
.entry-value{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.entry-value .meter{margin-right:8px}
.entry-detail{grid-column:1/-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}
/* A strength in five rising steps, like a signal's, those it reaches filled in its color (a storm's in its dBZ color). */
.meter{display:inline-flex;align-items:flex-end;gap:2px;height:13px;vertical-align:-1px}
.meter i{width:5px;border-radius:1.5px;background:#75899b3d}
.meter i:nth-child(1){height:40%}.meter i:nth-child(2){height:55%}.meter i:nth-child(3){height:70%}.meter i:nth-child(4){height:85%}.meter i:nth-child(5){height:100%}
.meter i.on{background:var(--meter)}
/* How much of the leader's number a standing has: a bar in the ranking's color, or split into its kinds' colors, each
   named beside a square of its color below. */
.amount{grid-column:1/-1;display:block;height:6px;margin:6px 0 3px 32px;border-radius:3px;background:#75899b26;overflow:hidden}
.amount-fill{display:flex;gap:2px;height:100%;border-radius:3px;overflow:hidden}
.amount-fill i{flex:1 1 0;min-width:2px;background:var(--tone,var(--lamp))}
.parts{grid-column:1/-1;padding-left:32px;font-size:14px;line-height:1.45;color:#aebdce}
.parts>[aria-hidden]{display:flex;flex-wrap:wrap;gap:2px 14px}
.part{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.part b{font-weight:600;color:#d1dbe5;font-variant-numeric:tabular-nums}
.part::before{content:'';flex:none;width:8px;height:8px;border-radius:2px;background:var(--part)}

.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 maps' credit, small in the footer, under its links. */
.extremes-credits{grid-column:1/-1;margin:0;font-size:12px;line-height:1.5;color:#aebdce}
.extremes-credits a{text-decoration:underline;text-underline-offset:3px;color:#d1dbe5}
/* A storm's strongest echo in its color (dbzColor). */
.dbz{color:var(--dbz,inherit);font-weight:700;font-variant-numeric:tabular-nums}

@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,.event[data-state=record] .live-dot{display:none}
/* An ended event's page is its record, and says so before anything else. */
.event[data-state=record] .event-status{display:inline-flex;align-items:center;justify-self:start;padding:5px 12px;border-radius:999px;
  border:1px solid #c3cfdc66;background:#0f1828;color:#e9eef4;letter-spacing:.04em}
/* A record's story, how it unfolded, and the same day: cards with their symbol before the title. */
.event-story,.event-timeline,.event-day{padding:20px 22px;border:1px solid #75899b44;border-radius:16px;background:#0f1828}
.event-story[hidden],.event-timeline[hidden],.event-day[hidden]{display:none}
.event-story h2,.event-timeline h2,.event-day h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:400 24px/1.2 Georgia,serif}
.event-story h2 .site-icon,.event-timeline h2 .site-icon,.event-day h2 .site-icon{width:22px;height:22px;flex:none;color:var(--tone)}
.story-body p{margin:0;font-size:17px;line-height:1.6;color:#dfe6ee;max-width:72ch}
.day-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.day-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:9px 0;border-top:1px solid #75899b33}
.day-list li:first-child{border-top:0}
.day-list a{color:#e9eef4;font-weight:650;text-decoration:underline;text-decoration-color:#75899b88;text-underline-offset:3px}
.day-list span{font-size:14px;color:var(--mist)}
.day-standings{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 0;font-size:15px}
.day-standings:empty{display:none}
.day-standings a{color:var(--lamp);font-weight:600}
/* How it unfolded: a rail, a mark at each turn, when, what it was then, and NWS's line for it. */
.timeline{display:grid;gap:0;margin:0;padding:0;list-style:none}
.timeline-row{position:relative;display:grid;grid-template-columns:8.5em minmax(0,1fr);column-gap:14px;padding:10px 0 10px 22px;border-top:1px solid #75899b33}
.timeline-row:first-child{border-top:0}
.timeline-row::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--tone,#ff947d);
  box-shadow:0 0 0 3px #0f1828}
.timeline-row::after{content:"";position:absolute;left:6px;top:27px;bottom:-15px;width:2px;background:#75899b55}
.timeline-row:last-child::after{display:none}
.timeline-time{grid-row:span 2;font-size:15px;font-weight:600;color:var(--mist);font-variant-numeric:tabular-nums}
.timeline-what{font-size:16px}
.timeline-text{font-size:15px;line-height:1.45;color:#c3cfdc}
@media(max-width:560px){.timeline-row{grid-template-columns:1fr}.timeline-time{grid-row:auto}}
.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}
/* A piece of a major event links up to it (MajorPages). */
.event-part-of{margin:0;font-size:15px;font-weight:600;color:#c3cfdc}
.event-part-of[hidden]{display:none}
.event-part-of a{color:var(--lamp);text-decoration:underline;text-decoration-color:#75899b88;text-underline-offset:3px}
/* A major event's page: its reports quoted as filed, and their source under them. */
.major .event-kind{font-size:17px;font-weight:700;color:var(--tone)}
.major-reports .day-list li{display:grid;gap:3px}
.major-reports .day-list strong{color:#e9eef4;font-weight:650}
.major-credit{font-size:14px;color:var(--mist)}
.major .timeline-text a{color:inherit;text-decoration:underline;text-decoration-color:#75899b88;text-underline-offset:3px}
.major .event-know p{margin:0 0 10px;font-size:16px;line-height:1.55;color:#dfe6ee}
.major .event-know a{color:var(--lamp);font-weight:600}
.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}
/* A record's snapshot: the radar while it happened, labeled so it can't pass for live radar. */
.event-snapshot{margin:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--tone,#75899b) 45%,#75899b55);border-radius:22px;background:#0f1828}
.event-snapshot[hidden]{display:none}
.event-snapshot img{display:block;width:100%;height:auto;background:var(--midnight)}
.event-snapshot figcaption{display:grid;gap:6px;padding:14px 20px 16px;font-size:15px;line-height:1.5;color:var(--mist)}
.event-snapshot figcaption p{margin:0}
.snapshot-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:#e9eef4;font-weight:650;font-variant-numeric:tabular-nums}
.snapshot-chip{padding:3px 10px 2px;border:1px solid #c3cfdc66;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.snapshot-note a,.snapshot-use a{color:var(--lamp);font-weight:600}
/* The radar the site kept, drawn as the cards draw it, in the snapshot's place when the server has none. */
.event-kept .kept-picture{position:relative;width:100%;aspect-ratio:16/9;max-height:560px;overflow:hidden;background:var(--midnight)}
.event-kept .card-scene::after{background:linear-gradient(180deg,#0f182800 70%,#0f182880)}
/* A scene drawn from radar the site kept, tagged with when, and still: nothing about it pulses as if it were live. */
.scene-kept{position:absolute;z-index:3;top:12px;left:12px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:3px 10px 3px 3px;
  border-radius:999px;background:#0f1828d9;color:#e9eef4;font-size:12px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.scene-kept-chip{flex:none;padding:2px 8px 1px;border:1px solid #c3cfdc66;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.scene-kept-time{overflow:hidden;text-overflow:ellipsis}
.card-scene[data-kept=true] .card-ring,.card-scene[data-kept=true] .card-ring::before,.card-scene[data-kept=true] .card-ring::after,
.card-scene[data-kept=true] .card-ring .site-icon,.leader.has-scene .card-scene[data-kept=true] .card-ring[data-icon=""]{animation: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;
  overflow-wrap:anywhere}
.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}
/* A cell stays a table cell, so its row's rule runs straight across; its type lines up inside it. */
.week-type{display:flex;align-items:center;gap:8px;white-space:nowrap}
.week-severity{white-space:nowrap}
.week-severity .meter{height:14px;vertical-align:-2px}
.week-severity .meter i{width:6px}
.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-size .dbz{font-weight:700;color:var(--dbz,inherit)}
.week-people,.week-when,.week-status{white-space:nowrap;font-variant-numeric:tabular-nums;color:#c3cfdc}
.week-people .site-icon{display:inline-block;width:15px;height:15px;margin-right:7px;vertical-align:-2px;color:var(--mist)}
/* Still going says so in the lamp's color, after a dot; 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-status.going::before{content:'';display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:1px}
.week-table[data-period=now] :is(.week-status-head,.week-status){display:none}
#week-more{margin-top:14px}
/* How severity is measured: a line that opens to each kind's scale, below the cards and the table. */
.severity-key{max-width:760px;margin:28px 0 0;font-size:14px;line-height:1.55;color:#c3cfdc}
.severity-key summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;color:var(--porcelain);list-style:none}
.severity-key summary::-webkit-details-marker{display:none}
.severity-key summary::after{content:'+';font:600 15px var(--mono);color:var(--mist)}
.severity-key[open] summary::after{content:'−'}
.severity-key summary:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:4px}
.severity-key .meter{--meter:var(--lamp)}
.severity-key p{margin:12px 0 8px}
.severity-key dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
.severity-key dt{font-weight:600;color:var(--porcelain)}
.severity-key dd{margin:0}
#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}
  /* Each row wraps as it fits: its type with its meter at the end, then where and how big across, the people with
     when it peaked at the end, and its status. */
  .week-table tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:12px 14px;border-bottom:1px solid #75899b26}
  .week-table td{padding:0;border:0}
  .week-what{flex:1 1 auto;min-width:0;align-self:center}
  .week-severity{flex:none;margin-left:auto;align-self:center}
  .week-where,.week-size,.week-status{flex:1 1 100%}
  .week-people{flex:none}
  .week-when{flex:none;margin-left:auto}
  .severity-key dl{grid-template-columns:1fr;gap:2px}
  .severity-key dd{margin-bottom:8px}
  .week-people.none,.week-status.none{display:none}
  .week-when::before{content:'Peaked ';color:var(--mist)}
  .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%}
}

/* Rankings' filters, one row on every screen: the When and Where chips, each opening a menu below it, and the icon
   switch between cards and the table. */
.filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.filter-bar+.scope-note{margin:0 0 22px}
.chip-field{position:relative;min-width:0}
.chip-field[hidden]{display:none}
.filter-chip{display:flex;align-items:center;gap:10px;height:52px;max-width:100%;padding:0 12px 0 16px;border:1px solid #75899b55;
  border-radius:16px;background:linear-gradient(180deg,#16223a,#0f1828);color:var(--porcelain);font:inherit;cursor:pointer;
  transition:border-color .2s,box-shadow .2s}
.filter-chip:hover{border-color:#a8bbc399}
.filter-chip:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.filter-chip[aria-expanded=true]{border-color:#ffcc9f88;box-shadow:0 0 0 4px #ffcc9f14}
.chip-words{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;line-height:1}
.chip-label{font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.chip-value{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chip-mark{display:flex;flex:none}
.chip-mark .scope-flag{width:21px;height:11px;border-radius:1px;opacity:1}
.chip-mark .site-icon{width:20px;height:20px}
.chip-chevron{flex:none;width:16px;height:16px;margin-left:4px;fill:none;stroke:var(--mist);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s}
.filter-chip[aria-expanded=true] .chip-chevron{transform:rotate(180deg);stroke:var(--lamp)}
.chip-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;display:flex;flex-direction:column;gap:2px;width:max-content;
  min-width:250px;max-width:calc(100vw - 32px);margin:0;padding:6px;border:1px solid #75899b66;border-radius:16px;background:#141f33f2;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 48px -12px #000d}
.chip-menu[hidden]{display:none}
/* A menu's rows: the period links and the scope choices alike, the current one tinted with a check. */
.chip-menu .period-link,.chip-menu .scope-option{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:46px;
  padding:0 12px;border:0;border-radius:11px;background:none;font-size:15px;font-weight:600;color:#d1dbe5;text-decoration:none}
.chip-menu .period-link:hover,.chip-menu label:hover .scope-option{background:#ffffff0d;color:var(--porcelain)}
.chip-menu .period-link[aria-current=page],.chip-menu input:checked+.scope-option{background:#ffcc9f1a;color:var(--porcelain)}
.chip-menu .period-link:focus-visible,.chip-menu input:focus-visible+.scope-option{outline:2px solid var(--lamp);outline-offset:-2px}
.menu-check{flex:none;width:16px;height:16px}
.chip-menu .period-link[aria-current=page] .menu-check,.chip-menu input:checked+.scope-option::before{
  background:var(--lamp);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat}
.chip-menu .scope-option::before{content:'';flex:none;width:16px;height:16px}
.menu-dates{margin-left:auto;padding-left:18px;font-size:13px;font-weight:400;color:var(--mist)}
.chip-menu .scope-switch{display:flex;flex-direction:column;gap:2px;padding:0;border:0;background:none}
.chip-menu.scope-field{flex:none}
.chip-menu .scope-switch label{flex:none}
.chip-menu .scope-option .scope-flag{opacity:1}
/* Cards and table as icons, pushed to the row's end. */
.filter-bar .view-field{margin-left:auto;flex:none}
.filter-bar .view-switch .scope-option{width:46px;height:42px;padding:0}
.view-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  .filter-bar{gap:8px}
  .filter-bar .chip-field:first-child{flex:1 1 auto}
  .filter-chip{height:48px;padding:0 10px 0 13px;gap:8px}
  .filter-chip .chip-value{font-size:15px}
  .chip-field:first-child .filter-chip{width:100%}
  .chip-field:first-child .filter-chip .chip-chevron{margin-left:auto}
  /* Where's menu opens from its right edge, so it stays on screen. */
  #scope-bar .chip-menu{left:auto;right:0}
  .filter-bar .view-switch .scope-option{width:38px;height:38px}
}

/* Standings that stay: today, this week, this month and this year, and a period's page's neighbors. */
.period-nav[hidden]{display:none}
.period-link{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid #75899b66;border-radius:999px;font-size:15px;
  font-weight:600;color:#e9eef4;text-decoration:none;background:#0f1828}
.period-link:hover{border-color:#c3cfdc}
.period-link[aria-current=page]{color:#0c1420;border-color:transparent;background:linear-gradient(180deg,#ffe1c6,var(--lamp) 55%,#e5b48c)}
.period-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:14px 0 0;font-size:15px}
.period-nav a{color:var(--lamp);font-weight:600;text-decoration:none}
.period-nav .period-next{margin-left:auto}