/* Storm Mode, the public page: /event (SM-3, docs/plan/storm-mode-plan.md, the approved design in
   design-handoff/storm-mode/). Loaded after severe.css, whose map, key, clocks, freshness markers
   and NWS hazard colours this page shares.

   No colour is declared here but agencies' own: each chip's colour is set from `data-sm-chip`,
   because the site's CSP allows no inline style. A warning's and an SPC watch's come from
   severe.css's `--hz-*` (decision 11); a watch's or an advisory's is NWS's hazard-map legend's,
   held to `worker/event/colours.ts` by `worker/test/event/event-colours.test.ts`. Every chip carries
   the event's name in words. Everything else is a token. */

/* ---- The public page ------------------------------------------------------------------- */

.sm { max-width: var(--wrap-wide, 1360px); margin: 0 auto; padding: var(--sp-4) var(--gutter) var(--sp-7); display: grid; gap: var(--sp-4); }
.sm-pagehead .pagehead-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.sm-aux { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sm-pagehead[data-sm-loud] { box-shadow: inset 0 6px 0 var(--hz-tornado-warning); }
.sm-noscript-note { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); background: var(--wash); border-radius: var(--radius-control); }

/* The lens: what is included and why, printed, so a reader can check it. */
.sm-lens { display: grid; gap: var(--sp-1) var(--sp-5); margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--intro); border-radius: var(--radius-surface); font-size: var(--fs-small); }
@media (min-width: 900px) { .sm-lens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sm-lens > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-2); }
.sm-lens dt { font-weight: 800; color: var(--ink-2); }
.sm-lens dd { margin: 0; }
.sm-lens-note { margin: calc(-1 * var(--sp-2)) 0 0; font-size: var(--fs-small); color: var(--ink-2); max-width: 80ch; }

/* The frame: reading order on a phone (lens, in force, what changed, map, spotlight); on a desktop
   the plan's frame, the map beside the board and the spotlight beside what changed. */
.sm-grid { display: grid; gap: var(--sp-4); grid-template-areas: "board" "changed" "map" "spot"; }
@media (min-width: 1080px) {
  .sm-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "map board" "spot changed"; align-items: start; }
}
.sm-mapcard { grid-area: map; } .sm-board { grid-area: board; } .sm-changed { grid-area: changed; } .sm-spot { grid-area: spot; }
.sm-card { min-width: 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.sm-h { margin: 0 0 var(--sp-2); font-size: var(--fs-subhead); display: flex; align-items: baseline; gap: var(--sp-2); }
.sm-h--small { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.sm-n, .sm-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.sm-sub { font-size: var(--fs-small); color: var(--ink-2); }
.sm-caption { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--ink-2); max-width: 75ch; }
.sm-empty, .sm-none { margin: var(--sp-2) 0; padding: var(--sp-3) var(--sp-4); background: var(--wash); border-radius: var(--radius-control); max-width: 62ch; }
.sm-none { font-weight: 700; }

/* The map: the Briefing's base, framed to the lens; the country outside it veiled. */
.sm-mapframe { background: var(--graphic-wash); border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; }
.sm-map { display: block; width: 100%; height: auto; max-height: 62svh; }
.sm-veil { fill: var(--paper); fill-opacity: .62; }
.sm-lens-edge { stroke: var(--graphic-ink); stroke-width: 1.75; vector-effect: non-scaling-stroke; }
/* At night the frame takes the Briefing's ocean and land (severe.css, HB-14); the lens is outlined in paper. */
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) .sm-lens-edge { stroke: var(--graphic-paper); }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) .sm-fill--warning { stroke: var(--graphic-paper); }
.sm-fill { stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sm-fill--alert { fill-opacity: .8; stroke-opacity: .9; }
.sm-fill--forecast { fill-opacity: .9; }
.sm-fill--faint { fill-opacity: .35; stroke-opacity: .5; }
.sm-fill--outline { stroke-width: 2.75; }
.sm-fill--watch { stroke-width: 3; stroke-dasharray: 7 5; }
.sm-key { padding-inline: 0; border-top: 0; gap: var(--sp-1) var(--sp-4); }
.sm-key li.is-absent { color: var(--ink-2); }
.sm-key li:has(> .sm-sub) { display: block; }
.sm-key li.is-absent .sm-sw { opacity: .45; }
.sm-key .sm-n, .sm-key .sm-sub { margin-left: var(--sp-1); }
.sm-panel .sm-map { max-height: 26rem; }
.sm-figure { background: var(--graphic-wash); border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; }

/* An agency's colour carries its words, always: a chip is the event's name on its colour. */
.sm-chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-control); background: var(--chip); color: var(--chip-ink);
  font-weight: 800; font-size: var(--fs-small); line-height: 1.45; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent);
}

/* In force: one row per event, most urgent first, the count in figures, the columns shared. */
.sm-board-rows { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; grid-template-columns: max-content 4ch minmax(0, 1fr); column-gap: var(--sp-3); }
.sm-board-rows li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
@media (max-width: 479px) {
  .sm-board-rows { grid-template-columns: minmax(0, 1fr) 4ch; }
  .sm-board-rows li > .sm-sub { grid-column: 1 / -1; }
}
.sm-board-rows .sm-count { font-size: var(--fs-lead); text-align: right; }
/* The loud register and the pins take the leading item's own NWS colour (`data-sm-chip-edge`). */
[data-sm-chip-edge="tornado-warning"] { --sm-edge: var(--hz-tornado-warning); --sm-edge-ink: var(--hz-tornado-warning-ink); }
[data-sm-chip-edge="flash-flood-warning"] { --sm-edge: var(--hz-flash-flood-warning); --sm-edge-ink: var(--hz-flash-flood-warning-ink); }
[data-sm-chip-edge="tsunami-warning"] { --sm-edge: var(--hz-tsunami-warning); --sm-edge-ink: var(--hz-tsunami-warning-ink); }
[data-sm-chip-edge="extreme-wind-warning"] { --sm-edge: var(--hz-extreme-wind-warning); --sm-edge-ink: var(--hz-extreme-wind-warning-ink); }
.sm-fill--lead { stroke-width: 3; }
.sm-board--loud { border: 3px solid var(--sm-edge); }
.sm-pin { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 8px solid var(--sm-edge); background: var(--wash); border-radius: var(--radius-control); }
.sm-pin-head { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.sm-pin-word { padding: 2px 10px; background: var(--sm-edge); color: var(--sm-edge-ink); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--radius-control); }
.sm-pin-where { margin: var(--sp-1) 0 0; font-weight: 800; font-size: var(--fs-remarks); }
.sm-notice { padding: var(--sp-3) var(--sp-4); border-left: 6px solid var(--ink); background: var(--wash); border-radius: var(--radius-control); }
.sm-notice p { margin: 0 0 var(--sp-2); max-width: 70ch; }
.sm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* What changed: a time, and the product's own words. */
.sm-changes { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--sp-3); }
.sm-changes li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: var(--sp-1) 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.sm-changes time { font-weight: 700; color: var(--ink); }

/* The spotlight: a header with its place in the sequence and its controls, the panels as
   addresses, and one panel shown on a desktop. On a phone every panel is a section, in order. */
.sm-spot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
.sm-spot-head .sm-h { margin-right: auto; }
.sm-spot-status { font-size: var(--fs-small); color: var(--ink-2); }
.sm-spot-controls { display: flex; gap: var(--sp-1); }
.sm-spot-controls .btn { min-width: 44px; min-height: 44px; }
.sm-tabs ol { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; margin: var(--sp-2) 0; padding: 0; }
.sm-tabs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-2); border: 1px solid var(--edge); border-radius: var(--radius-control); font-size: var(--fs-small); color: var(--link); text-decoration: none; }
.sm-tabs a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }
.sm-tabs a[data-state="unavailable"]::after { content: "\00a0· not yet"; color: var(--ink-2); }
.sm-tabs a[data-state="stale"]::after { content: "\00a0· !! stale"; font-weight: 700; }
.sm-tabs a[aria-current][data-state]::after { color: inherit; }
.sm-panel { padding-top: var(--sp-3); border-top: 1px solid var(--line); margin-top: var(--sp-3); }
.sm-panel-h { margin: 0 0 var(--sp-2); font-size: var(--fs-remarks); font-weight: 800; }
@media (max-width: 1079px) { .sm-tabs { display: none; } }
@media (min-width: 1080px) {
  .sm-panels .sm-panel:not(.is-current) { display: none; }
  .sm-spot--pinned .sm-panels { display: none; }
  .sm-panels .sm-panel.is-current { border-top: 0; margin-top: 0; }
}
.sm-panel-state { margin: 0 0 var(--sp-2); font-size: var(--fs-small); }
.sm-caveat { margin: 0 0 var(--sp-2); padding-left: var(--sp-3); border-left: 3px solid var(--edge); font-size: var(--fs-small); max-width: 72ch; }
.sm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sm-rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.sm-region { margin: 0 0 var(--sp-1); font-size: var(--fs-remarks); }
.sm-quote { margin: 0 0 var(--sp-2); padding-left: var(--sp-3); border-left: 3px solid var(--line); max-width: 72ch; }
.sm-quote p { margin: 0 0 var(--sp-1); }
.sm-quote--do { border-left-color: var(--sm-edge, var(--ink)); }
.sm-quote-by { margin: 0 0 var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.sm-linkout { padding: var(--sp-3) var(--sp-4); background: var(--wash); border-radius: var(--radius-control); }
.sm-linkout p { margin: 0 0 var(--sp-2); max-width: 66ch; }
.sm-panel--pinned { margin-top: var(--sp-3); padding: var(--sp-3); border: 3px solid var(--sm-edge); border-radius: var(--radius-surface); }
.sm-pinned-note { margin: 0 0 var(--sp-2); font-size: var(--fs-small); }
.sm-pinned-cols { display: grid; gap: var(--sp-3); align-items: start; }
@media (min-width: 1080px) { .sm-pinned-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.sm-map--pinned { max-height: 18rem; }

/* Sources: every source in the view, its clock and its state in words and a mark. */
.sm-sources ul { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); list-style: none; margin: 0; padding: 0; }
.sm-sources .freshness { font-size: var(--fs-small); }
.sm-sources .freshness strong { color: var(--ink); }
.sm-disclaimer { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); background: var(--wash); border-radius: var(--radius-control); max-width: 100%; }

.sm-dim { color: var(--ink-2); }
.sm-notice-line { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); background: var(--wash); border-radius: var(--radius-control); }
.sm-noscript-note { margin: 0; }
.sm-fill--discussion { stroke-width: 2; stroke-dasharray: 1 4; stroke-linecap: round; }

/* Every alert, a disclosure under the board: the list the map and the counts summarise. */
.sm-all { margin: 0 0 var(--sp-2); font-size: var(--fs-small); }
.sm-all > summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; font-weight: 600; }
.sm-items { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; }
.sm-items li { display: grid; gap: 2px; padding: var(--sp-2) 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.sm-item-where { font-weight: 700; }
.sm-items .sm-chip { justify-self: start; }

/* The lens builder: a plain form, every control a target. */
.sm-builder .sm-form fieldset { margin: 0 0 var(--sp-4); padding: 0; border: 0; }
.sm-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sp-1) var(--sp-3); }
.sm-checks--wide { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.sm-checks label { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-small); }
.sm-checks input { width: 20px; height: 20px; }
.sm-field { display: grid; gap: var(--sp-1); max-width: 32rem; margin-bottom: var(--sp-3); font-size: var(--fs-small); font-weight: 700; }
.sm-field input { min-height: 44px; padding: 0 var(--sp-2); font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-control); }
.sm-builder .btn { min-height: 44px; }

/* The front page (SM-9): what is happening now, each one link, then the builder. */
.sm-front-about p { margin: 0 0 var(--sp-2); max-width: 75ch; }
.sm-front-about p:last-child { margin-bottom: 0; }
.sm-front-now { display: grid; gap: var(--sp-4); }
@media (min-width: 960px) { .sm-front-now { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.sm-front-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.sm-front-rows li { padding: var(--sp-2) 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.sm-front-rows li:first-child { border-top: 0; padding-top: 0; }
.sm-front-rows .sv-go { font-weight: 700; }
.sm-front-rows .sm-sub { margin: 2px 0 0; }
.sm-front-summary { margin: var(--sp-1) 0 0; max-width: 75ch; }
.sm-front-h { margin: var(--sp-2) 0 0; font-size: var(--fs-section); }

@media (pointer: coarse) {
  .sm-tabs a, .sm-all > summary, .sm-lens .sv-go { min-height: 44px; }
  .sm-front-rows .sv-go { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (forced-colors: active) {
  .sm-chip { forced-color-adjust: none; border: 1px solid CanvasText; }
  .sm-board--loud, .sm-panel--pinned, .sm-pin { border-color: Highlight; }
}

/* ---- A storm's event (/event/{storm_id}, SM-5) --------------------------------------------- */

/* The storm, by its warning centre's last advisory: the facts in a row, the clock with them. */
.sm-storm { display: grid; gap: var(--sp-2); }
.sm-storm .sm-h { margin: 0; }
.sm-storm-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; }
.sm-storm-facts > div { display: grid; gap: 2px; }
.sm-storm-facts dt { font-size: var(--fs-small); color: var(--ink-2); }
.sm-storm-facts dd { margin: 0; font-weight: 700; }
.sm-storm .sm-actions { margin: 0; }
/* No U.S. area: the note stands where the map, the board and what changed would. */
.sm-grid--noarea { grid-template-areas: "noarea" "spot"; }
@media (min-width: 1080px) { .sm-grid--noarea { grid-template-columns: minmax(0, 1fr); grid-template-areas: "noarea" "spot"; } }
.sm-noarea { grid-area: noarea; }
/* The pipeline's graphics, at the panel's width, the browser choosing the size. */
.sm-figure--graphic { margin: 0; background: var(--graphic-wash); }
.sm-figure--graphic img { display: block; width: 100%; height: auto; }
/* NHC's watches and warnings, in its words: each kind's chip, then the areas it names. */
.sm-ww { margin: 0 0 var(--sp-3); }
.sm-ww-h { margin: 0 0 var(--sp-1); }
.sm-ww-areas { margin: 0; padding-left: var(--sp-4); max-width: 72ch; }
.sm-ww-areas li { margin: 0 0 2px; }
/* The wind speed probabilities: NHC's figures in columns, the places as row headers. */
.sm-table { border-collapse: collapse; font-size: var(--fs-small); }
.sm-table th, .sm-table td { padding: 4px var(--sp-3) 4px 0; text-align: left; border-bottom: 1px solid var(--line); }
.sm-table thead th { color: var(--ink-2); font-weight: 700; }
.sm-table td { text-align: right; font-variant-numeric: tabular-nums; }
.smw-grid .sm-figure--graphic { display: flex; align-items: center; justify-content: center; }
.smw-grid .sm-figure--graphic img { width: 100%; height: 100%; object-fit: contain; }
.smw-grid .sm-panels > .sm-panel:not(.sm-panel--pinned).is-current > .sm-table { grid-column: 1 / span 2; }

/* ---- Wall mode (?wall=1, SM-4) ----------------------------------------------------------

   One screen that never scrolls. Type is sized for distance: one rem is 1.042% of the screen's
   width, 20px at 1920 and 40px at 3840, so a 4K wall is a 1080p wall at twice the size, never a
   denser one. Every size below is a step of the scale (tokens.css) in that rem. */

html:has(body.sm-wall) { font-size: clamp(16px, 1.042vw, 48px); }
body.sm-wall { margin: 0; height: 100vh; overflow: hidden; background: var(--paper); color: var(--ink); }
body.sm-wall > .sv-defs { position: absolute; }
.smw { box-sizing: border-box; height: 100vh; display: flex; flex-direction: column; gap: .5rem; padding: .6rem .8rem; }
.smw > .smw-grid { flex: 1 1 auto; }
.smw-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1.2rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
/* The owner's artwork, chosen by the wall's theme, never retyped (DESIGN.md § Logo). */
.sm-brand { display: inline-flex; }
.sm-brand .logo[data-logo="dark"] { display: none; }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) .sm-brand .logo[data-logo="light"] { display: none; }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) .sm-brand .logo[data-logo="dark"] { display: block; }
.sm-brand img { display: block; height: 2.4rem; width: auto; }
.smw-kicker { margin: 0; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.smw-title h1 { margin: 0; font-size: var(--fs-section); line-height: 1.15; }
.smw-area { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.smw-clocks { text-align: right; }
.smw-clocks p { margin: 0; font-size: var(--fs-subhead); line-height: 1.25; }
.smw-clocks .mono { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.smw-clocks span:not(.mono) { font-size: var(--fs-micro); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.sm-chime { margin: 0; font-size: var(--fs-small); max-width: 18rem; }
.sm-chime .btn { font-size: var(--fs-small); min-height: 2.2rem; }
.sm-chime.is-armed { padding: .3rem .5rem; border: 2px solid var(--ink); border-radius: var(--radius-control); }
.smw-banners { display: grid; gap: .5rem; }
.smw-banners:empty { display: none; }
.smw-banner { margin: 0; padding: .6rem 1rem; font-size: var(--fs-lead); background: var(--ink); color: var(--paper); border-radius: var(--radius-control); }
.smw-banner[hidden] { display: none; }
.smw-banner .sv-clock { color: inherit; }
.smw-banner--sources, .smw-banner--note { background: var(--wash-strong, var(--wash)); color: var(--ink); border-left: .5rem solid var(--ink); }
.smw-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr); gap: .5rem; margin: 0; padding: 0; max-width: none; }
.smw-grid--single { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
/* The display lost its connection: the last screen is kept for reference, but no hazard colour can
   be read as current. The words are unchanged. */
.smw-grid.is-dimmed { filter: grayscale(1); }
.smw-grid .sm-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: .5rem .7rem; font-size: var(--fs-bulletin); }
.smw-grid .sm-h { font-size: var(--fs-remarks); margin-bottom: .3rem; }
.smw-grid :is(.sm-sub, .sm-caption, .sm-changes li, .sv-legend, .sm-caveat) { font-size: var(--fs-micro); }
.smw-grid .sm-mapcard { grid-column: 1; grid-row: 1; }
.smw-grid .sm-board { grid-column: 2; grid-row: 1; }
.smw-grid .sm-spot { grid-column: 1; grid-row: 2; }
.smw-grid .sm-changed { grid-column: 2; grid-row: 2; }
.smw-grid--single .sm-spot { grid-column: 1; grid-row: 1; }
.smw-grid .sm-mapframe { flex: 1 1 auto; min-height: 0; display: flex; }
.smw-grid .sm-mapframe .sm-map { height: 100%; max-height: none; }
.smw-grid .sm-board-rows li { padding: .18rem 0; }
.smw-grid .sm-board:has(.sm-board-rows) > .sm-sub, .smw-grid .sm-all { display: none; }
/* A wall's pin is one line: the emergency, where, and until when. Its link is the page's, not a room's. */
.smw-grid .sm-pin { margin-bottom: .3rem; padding: .25rem .5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.smw-grid .sm-pin > p { margin: 0; }
.smw-grid .sm-pin-where { font-size: var(--fs-bulletin); }
.smw-grid .sm-pin .sm-sub a, .smw-grid .sm-pin .sm-pin-link { display: none; }
.smw-grid .sm-chip { font-size: var(--fs-small); }
.smw-grid .sm-board-rows .sm-count { font-size: var(--fs-lead); }
.smw-grid .sm-panels { flex: 1 1 auto; min-height: 0; display: flex; }
.smw-grid .sm-panel:not(.is-current):not(.sm-panel--pinned) { display: none; }
.smw-grid .sm-panel:not(.sm-panel--pinned).is-current { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto) minmax(0, 1fr) auto; align-content: start; column-gap: .7rem; row-gap: .3rem; margin: 0; padding-top: .3rem; border-top: 0; }
.smw-grid .sm-panel:not(.sm-panel--pinned).is-current > .sm-panel-h { display: none; }
.smw-grid .sm-panel:not(.sm-panel--pinned).is-current > .sm-figure { grid-column: 1; grid-row: 1 / -2; display: flex; min-height: 0; }
.smw-grid .sm-panel:not(.sm-panel--pinned).is-current > .sm-figure .sm-map { height: 100%; max-height: none; }
.smw-grid .sm-panel:not(.sm-panel--pinned).is-current > :not(.sm-figure):not(.sm-panel-h) { grid-column: 2; }
.smw-grid .sm-panel:not(.sm-panel--pinned).is-current .sm-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .6rem; padding: 0; }
/* WSSI-P's eleven short bands, four to a row, so its key leaves its clock room (SM-8). */
.smw-grid .sm-panel:not(.sm-panel--pinned).is-current .sm-key--bands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A panel of words on a wall: across the whole panel, held to the room left above its clock. */
.smw-grid .sm-panels > .sm-panel:not(.sm-panel--pinned).is-current > .sm-region-quote { grid-column: 1 / span 2; min-height: 0; overflow: hidden; max-height: 10rem; }
/* A panel's list on a wall, in two columns: seven events and their clock in the room one panel has. */
.smw-grid .sm-panel:not(.sm-panel--pinned).is-current > .sm-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .8rem; }
/* A panel with no map has no map column to keep: its words take the whole width (SM-8: NHC's watches and
   warnings, a discussion, the gauges). */
.smw-grid .sm-panels > .sm-panel:not(.sm-panel--pinned).is-current:not(:has(> .sm-figure)) > :not(.sm-panel-h) { grid-column: 1 / span 2; }
/* NHC's watches and warnings, one per cell: two to a row. */
.smw-grid .sm-panels > .sm-panel:not(.sm-panel--pinned).is-current:not(:has(> .sm-figure)) > .sm-ww { grid-column: auto; }
/* `.sm-panels >` outranks the column-2 rule above, which these spans must beat (SM-8: they never had). */
.smw-grid .sm-panels > .sm-panel:not(.sm-panel--pinned).is-current > :is(.sm-empty, .sm-linkout, .sm-rows) { grid-column: 1 / span 2; }
/* The panel's own clock has the last row, the whole width under the map: never pushed off by what is beside it (SM-8). */
.smw-grid .sm-panels > .sm-panel:not(.sm-panel--pinned).is-current > .sm-caption { grid-column: 1 / span 2; grid-row: -2 / -1; margin: .2rem 0 0; }
/* Set by `fitPanel` only when the panel's clock would otherwise be cut off: the whole panel a little
   smaller, its type set in rem included, and nothing hidden. */
.smw-grid .sm-panel:is(.is-current, .sm-panel--pinned).is-snug { zoom: .88; }
.smw-grid .sm-panel:is(.is-current, .sm-panel--pinned).is-snugger { zoom: .76; }
.smw-grid .sm-panel:not(.sm-panel--pinned).is-current .sm-quote p { margin-bottom: .2rem; }
/* A reader's detail a wall has no room or use for: links to other pages, and the lists beside a map.
   What stays is the design's: the map, its key, WPC's caveat and the panel's own clock (SM-8). */
.smw-grid .sm-wall-optional { display: none; }
.smw-grid .sm-spot--pinned .sm-panels { display: none; }
.smw-grid .sm-panel--pinned { flex: 1; min-height: 0; margin: .2rem 0 0; padding: .4rem .6rem; overflow: hidden; display: flex; flex-direction: column; }
.smw-grid .sm-pinned-note { font-size: var(--fs-micro); margin-bottom: .2rem; }
.smw-grid .sm-panel--pinned .sm-panel-h { font-size: var(--fs-lead); margin-bottom: .3rem; }
.smw-grid .sm-pinned-cols { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; }
.smw-grid .sm-pinned-cols > .sm-figure { display: flex; min-height: 0; }
.smw-grid .sm-pinned-cols .sm-map { height: 100%; max-height: none; }
.smw-grid :is(.sm-pinned-cols .sm-quote, .sm-quote-by) { font-size: var(--fs-small); }
.smw-grid .sm-panel--pinned > .sm-caption { display: none; }
/* The time to the next panel. Its 20 s is event.mjs's ROTATE_MS; script restarts it at each step. */
.sm-progress { height: .25rem; background: var(--line); border-radius: 1rem; margin: .1rem 0 .2rem; overflow: hidden; }
.sm-progress[hidden] { display: none; }
.sm-progress span { display: block; height: 100%; background: var(--ink-2); transform-origin: left center; animation: sm-progress 20s linear forwards; }
.sm-progress.is-paused span { animation-play-state: paused; }
@keyframes sm-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sm-progress { display: none; } }
.smw-foot { display: grid; gap: .25rem; margin: 0; padding: 0; }
.smw-foot .sm-sources { display: flex; align-items: baseline; gap: .8rem; }
.smw-foot .sm-h--small { margin: 0; font-size: var(--fs-micro); }
.smw-foot .sm-sources ul { gap: .1rem 1.4rem; }
.smw-foot .freshness { font-size: var(--fs-micro); }
.smw-foot .sv-safety { margin: 0; max-width: none; font-size: var(--fs-micro); padding: .2rem .6rem; }
.smw .sm-spot-controls .btn { min-height: 2.2rem; min-width: 2.6rem; font-size: var(--fs-small); }
.smw .sm-pause { min-width: 5.5rem; font-weight: 800; }
/* What does not fit a wall's card is folded into one line that names it, never cut off unsaid (event.mjs). */
.smw-grid :is(.sm-board-rows, .sm-changes) li[hidden] { display: none; }
.smw-grid .sm-more { margin: .2rem 0 0; font-size: var(--fs-small); font-weight: 700; }

/* The agencies' colours, by chip. */
.sm-chip[data-sm-chip="ashfall-warning"] { --chip: var(--hz-ashfall-warning); --chip-ink: var(--hz-ashfall-warning-ink); }
.sm-chip[data-sm-chip="blizzard-warning"] { --chip: var(--hz-blizzard-warning); --chip-ink: var(--hz-blizzard-warning-ink); }
.sm-chip[data-sm-chip="blowing-dust-warning"] { --chip: var(--hz-blowing-dust-warning); --chip-ink: var(--hz-blowing-dust-warning-ink); }
.sm-chip[data-sm-chip="coastal-flood-warning"] { --chip: var(--hz-coastal-flood-warning); --chip-ink: var(--hz-coastal-flood-warning-ink); }
.sm-chip[data-sm-chip="dust-storm-warning"] { --chip: var(--hz-dust-storm-warning); --chip-ink: var(--hz-dust-storm-warning-ink); }
.sm-chip[data-sm-chip="extreme-cold-warning"] { --chip: var(--hz-extreme-cold-warning); --chip-ink: var(--hz-extreme-cold-warning-ink); }
.sm-chip[data-sm-chip="extreme-heat-warning"] { --chip: var(--hz-extreme-heat-warning); --chip-ink: var(--hz-extreme-heat-warning-ink); }
.sm-chip[data-sm-chip="extreme-wind-warning"] { --chip: var(--hz-extreme-wind-warning); --chip-ink: var(--hz-extreme-wind-warning-ink); }
.sm-chip[data-sm-chip="flash-flood-warning"] { --chip: var(--hz-flash-flood-warning); --chip-ink: var(--hz-flash-flood-warning-ink); }
.sm-chip[data-sm-chip="flood-warning"] { --chip: var(--hz-flood-warning); --chip-ink: var(--hz-flood-warning-ink); }
.sm-chip[data-sm-chip="freeze-warning"] { --chip: var(--hz-freeze-warning); --chip-ink: var(--hz-freeze-warning-ink); }
.sm-chip[data-sm-chip="high-surf-warning"] { --chip: var(--hz-high-surf-warning); --chip-ink: var(--hz-high-surf-warning-ink); }
.sm-chip[data-sm-chip="high-wind-warning"] { --chip: var(--hz-high-wind-warning); --chip-ink: var(--hz-high-wind-warning-ink); }
.sm-chip[data-sm-chip="hurricane-warning"] { --chip: var(--hz-hurricane-warning); --chip-ink: var(--hz-hurricane-warning-ink); }
.sm-chip[data-sm-chip="ice-storm-warning"] { --chip: var(--hz-ice-storm-warning); --chip-ink: var(--hz-ice-storm-warning-ink); }
.sm-chip[data-sm-chip="lake-effect-snow-warning"] { --chip: var(--hz-lake-effect-snow-warning); --chip-ink: var(--hz-lake-effect-snow-warning-ink); }
.sm-chip[data-sm-chip="lakeshore-flood-warning"] { --chip: var(--hz-lakeshore-flood-warning); --chip-ink: var(--hz-lakeshore-flood-warning-ink); }
.sm-chip[data-sm-chip="red-flag-warning"] { --chip: var(--hz-red-flag-warning); --chip-ink: var(--hz-red-flag-warning-ink); }
.sm-chip[data-sm-chip="severe-thunderstorm-warning"] { --chip: var(--hz-severe-thunderstorm-warning); --chip-ink: var(--hz-severe-thunderstorm-warning-ink); }
.sm-chip[data-sm-chip="severe-thunderstorm-watch"] { --chip: var(--hz-severe-thunderstorm-watch); --chip-ink: var(--hz-severe-thunderstorm-watch-ink); }
.sm-chip[data-sm-chip="snow-squall-warning"] { --chip: var(--hz-snow-squall-warning); --chip-ink: var(--hz-snow-squall-warning-ink); }
.sm-chip[data-sm-chip="storm-surge-warning"] { --chip: var(--hz-storm-surge-warning); --chip-ink: var(--hz-storm-surge-warning-ink); }
.sm-chip[data-sm-chip="tornado-warning"] { --chip: var(--hz-tornado-warning); --chip-ink: var(--hz-tornado-warning-ink); }
.sm-chip[data-sm-chip="tornado-watch"] { --chip: var(--hz-tornado-watch); --chip-ink: var(--hz-tornado-watch-ink); }
.sm-chip[data-sm-chip="tropical-storm-warning"] { --chip: var(--hz-tropical-storm-warning); --chip-ink: var(--hz-tropical-storm-warning-ink); }
.sm-chip[data-sm-chip="tsunami-warning"] { --chip: var(--hz-tsunami-warning); --chip-ink: var(--hz-tsunami-warning-ink); }
.sm-chip[data-sm-chip="typhoon-warning"] { --chip: var(--hz-typhoon-warning); --chip-ink: var(--hz-typhoon-warning-ink); }
.sm-chip[data-sm-chip="winter-storm-warning"] { --chip: var(--hz-winter-storm-warning); --chip-ink: var(--hz-winter-storm-warning-ink); }
.sm-chip[data-sm-chip="winter-storm-watch"] { --chip: #4682B4; --chip-ink: #000000; }
.sm-chip[data-sm-chip="winter-weather-advisory"] { --chip: #7B68EE; --chip-ink: #000000; }
.sm-chip[data-sm-chip="freezing-fog-advisory"] { --chip: #008080; --chip-ink: #FFFFFF; }
.sm-chip[data-sm-chip="extreme-cold-watch"] { --chip: #5F9EA0; --chip-ink: #000000; }
.sm-chip[data-sm-chip="freeze-watch"] { --chip: #00FFFF; --chip-ink: #000000; }
.sm-chip[data-sm-chip="cold-weather-advisory"] { --chip: #AFEEEE; --chip-ink: #000000; }
.sm-chip[data-sm-chip="frost-advisory"] { --chip: #6495ED; --chip-ink: #000000; }
.sm-chip[data-sm-chip="hurricane-watch"] { --chip: #FF00FF; --chip-ink: #000000; }
.sm-chip[data-sm-chip="typhoon-watch"] { --chip: #FF00FF; --chip-ink: #000000; }
.sm-chip[data-sm-chip="storm-surge-watch"] { --chip: #DB7FF7; --chip-ink: #000000; }
.sm-chip[data-sm-chip="tropical-storm-watch"] { --chip: #F08080; --chip-ink: #000000; }
.sm-chip[data-sm-chip="flood-watch"] { --chip: #2E8B57; --chip-ink: #000000; }
.sm-chip[data-sm-chip="flash-flood-watch"] { --chip: #2E8B57; --chip-ink: #000000; }
.sm-chip[data-sm-chip="coastal-flood-watch"] { --chip: #66CDAA; --chip-ink: #000000; }
/* A mesoscale discussion has no fill of its own (SPC draws its outline): it is a plain chip. An event
   no legend lists takes the radar's own fallback. */
.sm-chip[data-sm-chip="discussion"] { --chip: var(--surface); --chip-ink: var(--ink); }
.sm-chip[data-sm-chip="unlisted"] { --chip: #8FB0CF; --chip-ink: #000000; }