/* MaverickWX — Severe weather, the Briefing (/severe, SB-2).

   Built on the shared token roles: the sky intro, surface cards, ocean-blue actions, teal "go"
   links, the shared choice chips and segmented control, the shared freshness component and the
   site's 8/10px corners. Nothing here restates a token; the only new properties are the hazard
   colours and SPC's report colours below.

   ## The page

   A stable title with a changing summary and the scope controls under it; an "Active now" strip;
   the forecast workspace, where the map takes about two thirds of the width and the reading
   panel the rest; then watches and discussions, the reports and the warnings. The homepage's
   Severe section and the Live tracker reuse the `.sv-*` pieces here (chips, tags, the map plate,
   the lists and tables); the Briefing's own layout is `.svb-*`.

   ## Hazard colours

   Decision 11: NWS's own hazard-map colours, each with the ink measured against it. They are
   hazard vocabulary, like the Saffir-Simpson ramp, and are never retuned for the interface or
   the theme, which is why they are not redefined for dark. `worker/severe/hazards.ts` is the
   table; `worker/test/severe/briefing-colours.test.ts` reads this file and that one and fails
   if they part. Colour is never the only signal: every chip and swatch sits beside the hazard's
   name in words, and every outlook category carries its level in words.

   ## Maps

   The maps are scientific plates, so they take the `--graphic-*` roles, which do not change
   with the theme, rather than page surfaces. The SVG ships with no fill of its own for the base
   map, so without this sheet it degrades to outlines rather than to a black continent. SPC's and
   WPC's outlook colours travel in the SVG itself, from the agencies' files. */

:root {
  --hz-tornado-warning: #FF0000;
  --hz-tornado-warning-ink: #000000;
  --hz-severe-thunderstorm-warning: #FFA500;
  --hz-severe-thunderstorm-warning-ink: #1A2733;
  --hz-flash-flood-warning: #8B0000;
  --hz-flash-flood-warning-ink: #FFFFFF;
  --hz-tsunami-warning: #FD6347;
  --hz-tsunami-warning-ink: #1A2733;
  --hz-extreme-wind-warning: #FF8C00;
  --hz-extreme-wind-warning-ink: #1A2733;
  --hz-storm-surge-warning: #B524F7;
  --hz-storm-surge-warning-ink: #000000;
  --hz-hurricane-warning: #DC143C;
  --hz-hurricane-warning-ink: #FFFFFF;
  --hz-typhoon-warning: #DC143C;
  --hz-typhoon-warning-ink: #FFFFFF;
  --hz-blizzard-warning: #FF4500;
  --hz-blizzard-warning-ink: #000000;
  --hz-snow-squall-warning: #C71585;
  --hz-snow-squall-warning-ink: #FFFFFF;
  --hz-ice-storm-warning: #8B008B;
  --hz-ice-storm-warning-ink: #FFFFFF;
  --hz-winter-storm-warning: #FF69B4;
  --hz-winter-storm-warning-ink: #1A2733;
  --hz-lake-effect-snow-warning: #008B8B;
  --hz-lake-effect-snow-warning-ink: #000000;
  --hz-dust-storm-warning: #FFE4C4;
  --hz-dust-storm-warning-ink: #1A2733;
  --hz-blowing-dust-warning: #FFE4C4;
  --hz-blowing-dust-warning-ink: #1A2733;
  --hz-high-wind-warning: #DAA520;
  --hz-high-wind-warning-ink: #1A2733;
  --hz-tropical-storm-warning: #B22222;
  --hz-tropical-storm-warning-ink: #FFFFFF;
  --hz-ashfall-warning: #A9A9A9;
  --hz-ashfall-warning-ink: #1A2733;
  --hz-flood-warning: #00FF00;
  --hz-flood-warning-ink: #1A2733;
  --hz-coastal-flood-warning: #228B22;
  --hz-coastal-flood-warning-ink: #000000;
  --hz-lakeshore-flood-warning: #228B22;
  --hz-lakeshore-flood-warning-ink: #000000;
  --hz-high-surf-warning: #228B22;
  --hz-high-surf-warning-ink: #000000;
  --hz-extreme-heat-warning: #C71585;
  --hz-extreme-heat-warning-ink: #FFFFFF;
  --hz-extreme-cold-warning: #0000FF;
  --hz-extreme-cold-warning-ink: #FFFFFF;
  --hz-freeze-warning: #483D8B;
  --hz-freeze-warning-ink: #FFFFFF;
  --hz-red-flag-warning: #FF1493;
  --hz-red-flag-warning-ink: #000000;
  --hz-tornado-watch: #FFFF00;
  --hz-tornado-watch-ink: #1A2733;
  --hz-tornado-watch-edge: #1A2733;
  --hz-severe-thunderstorm-watch: #DB7093;
  --hz-severe-thunderstorm-watch-ink: #1A2733;
  --hz-severe-thunderstorm-watch-edge: #1A2733;
  /* The dark outline every warning polygon carries on a light map (WCAG 1.4.11): the watches'
     edge, which is decision 11's dark ink. */
  --hz-outline: var(--hz-tornado-watch-edge);
  /* Storm reports in SPC's own colours: tornado red, wind blue, hail green. The shape says the
     hazard too (a triangle, a square, a circle), and the key names all three. The tracker's
     sheet declares the same three for its dark room. */
  --sv-report-tornado: #FF0000;
  --sv-report-wind: #0000FF;
  --sv-report-hail: #00FF00;
  /* NWPS's colours for a gauge's flood category (SEV-07), from CATEGORY_FILLS in
     worker/severe/rivers.ts: yellow action stage, orange minor, red moderate, purple major. Black
     ink reads on each at 5:1 or more, and the chip always says the category in words. */
  --sv-flood-action: #FFFF00;
  --sv-flood-minor: #FF9900;
  --sv-flood-moderate: #FF0000;
  --sv-flood-major: #CC33FF;
  --sv-flood-ink: #000000;
}

/* The masthead sticks to the top of the page, so whatever focus or a jump brings into view is
   scrolled to just under it, never behind it (WCAG 2.4.11). shell.js measures both heights. */
html { scroll-padding-top: calc(var(--masthead-h, 66px) + var(--banner-h, 0px) + var(--sp-3)); }

/* ---------------------------------------------------------------------------------------
   Page frame
   ------------------------------------------------------------------------------------- */

.sv-wrap { max-width: var(--hub-width); width: calc(100% - 2 * var(--hub-gutter)); margin: 0 auto; padding: 0 0 var(--sp-8); }
.sv-wrap > * { min-width: 0; }
.sv h2, .sv h3, .sv h4, .sv p, .sv li, .sv dd { overflow-wrap: break-word; }

.sv-navnote { margin-left: var(--sp-2); font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* The intro: a stable, compact title; the summary sentence that changes; the scope controls,
   the time preference and the sources' clocks under it, in the sky field. */
body[data-page="severe"] .pagehead { background: var(--intro); }
body[data-page="severe"] .pagehead .shell-inner { flex-direction: column; align-items: stretch; gap: var(--sp-3); padding-block: var(--sp-5) var(--sp-4); }
body[data-page="severe"] .pagehead-titles { flex: none; }
body[data-page="severe"] .pagehead-title { font-size: var(--fs-section); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--link); }
/* The page's register follows what leads the list (present.ts, severity()). A tornado warning or an
   emergency at the top takes the title out of the calm ocean blue into ink, under a band of NWS's
   own colour for that hazard: the one place on the page the hazard colour runs the width of it,
   so the change is seen before a word is read. The words still carry it: the summary names the
   hazard, and colour is never the only signal. */
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="tornado-warning"] { --sv-edge: var(--hz-tornado-warning); --sv-edge-ink: var(--hz-tornado-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="flash-flood-warning"] { --sv-edge: var(--hz-flash-flood-warning); --sv-edge-ink: var(--hz-flash-flood-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="severe-thunderstorm-warning"] { --sv-edge: var(--hz-severe-thunderstorm-warning); --sv-edge-ink: var(--hz-severe-thunderstorm-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="tsunami-warning"] { --sv-edge: var(--hz-tsunami-warning); --sv-edge-ink: var(--hz-tsunami-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="extreme-wind-warning"] { --sv-edge: var(--hz-extreme-wind-warning); --sv-edge-ink: var(--hz-extreme-wind-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="storm-surge-warning"] { --sv-edge: var(--hz-storm-surge-warning); --sv-edge-ink: var(--hz-storm-surge-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="hurricane-warning"] { --sv-edge: var(--hz-hurricane-warning); --sv-edge-ink: var(--hz-hurricane-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="typhoon-warning"] { --sv-edge: var(--hz-typhoon-warning); --sv-edge-ink: var(--hz-typhoon-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="blizzard-warning"] { --sv-edge: var(--hz-blizzard-warning); --sv-edge-ink: var(--hz-blizzard-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="snow-squall-warning"] { --sv-edge: var(--hz-snow-squall-warning); --sv-edge-ink: var(--hz-snow-squall-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="ice-storm-warning"] { --sv-edge: var(--hz-ice-storm-warning); --sv-edge-ink: var(--hz-ice-storm-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="winter-storm-warning"] { --sv-edge: var(--hz-winter-storm-warning); --sv-edge-ink: var(--hz-winter-storm-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="lake-effect-snow-warning"] { --sv-edge: var(--hz-lake-effect-snow-warning); --sv-edge-ink: var(--hz-lake-effect-snow-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="dust-storm-warning"] { --sv-edge: var(--hz-dust-storm-warning); --sv-edge-ink: var(--hz-dust-storm-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="blowing-dust-warning"] { --sv-edge: var(--hz-blowing-dust-warning); --sv-edge-ink: var(--hz-blowing-dust-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="high-wind-warning"] { --sv-edge: var(--hz-high-wind-warning); --sv-edge-ink: var(--hz-high-wind-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="tropical-storm-warning"] { --sv-edge: var(--hz-tropical-storm-warning); --sv-edge-ink: var(--hz-tropical-storm-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="ashfall-warning"] { --sv-edge: var(--hz-ashfall-warning); --sv-edge-ink: var(--hz-ashfall-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="flood-warning"] { --sv-edge: var(--hz-flood-warning); --sv-edge-ink: var(--hz-flood-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="coastal-flood-warning"] { --sv-edge: var(--hz-coastal-flood-warning); --sv-edge-ink: var(--hz-coastal-flood-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="lakeshore-flood-warning"] { --sv-edge: var(--hz-lakeshore-flood-warning); --sv-edge-ink: var(--hz-lakeshore-flood-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="high-surf-warning"] { --sv-edge: var(--hz-high-surf-warning); --sv-edge-ink: var(--hz-high-surf-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="extreme-heat-warning"] { --sv-edge: var(--hz-extreme-heat-warning); --sv-edge-ink: var(--hz-extreme-heat-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="extreme-cold-warning"] { --sv-edge: var(--hz-extreme-cold-warning); --sv-edge-ink: var(--hz-extreme-cold-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="freeze-warning"] { --sv-edge: var(--hz-freeze-warning); --sv-edge-ink: var(--hz-freeze-warning-ink); }
:is(.pagehead, .sv-alarm, .sv-navnote)[data-sv-edge="red-flag-warning"] { --sv-edge: var(--hz-red-flag-warning); --sv-edge-ink: var(--hz-red-flag-warning-ink); }
body[data-page="severe"] .pagehead[data-sv-severity] { border-top: var(--sp-3) solid var(--sv-edge); }
body[data-page="severe"] .pagehead[data-sv-severity] .pagehead-title { color: var(--ink); }
body[data-page="severe"] .pagehead-sub { font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; color: var(--ink); max-width: 60ch; margin-top: var(--sp-2); }
/* The takeaway's two lines (SB-R04), severe storms and flash flooding, each on its own line with its
   label first: body size, so two lines take no more room than the one sentence they replace. */
.svb-takeaway-line { display: block; font-size: var(--fs-remarks); font-weight: 500; line-height: 1.45; }
.svb-takeaway-line + .svb-takeaway-line { margin-top: var(--sp-1); }
.svb-takeaway-label { font-weight: 700; }
/* On a loud page the headline is the page's heading, at the title's size, and "Severe weather
   briefing" is the label over it (shell.css hides that label on a phone, where the section row
   already says it). The emergency had been 21px under a 28px page name. */
body[data-page="severe"] .pagehead[data-sv-severity] .pagehead-title { font-size: var(--fs-title); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; max-width: 32ch; }
body[data-page="severe"] .pagehead[data-sv-severity] .pagehead-kicker { margin-bottom: var(--sp-2); color: var(--ink-2); }
/* The head's scope and the alerts clock share a line on a loud page: they were four lines of a
   phone between the headline and the first card. */
body[data-page="severe"] .pagehead[data-sv-severity] .pagehead-aux { gap: var(--sp-1) var(--sp-4); }
body[data-page="severe"] .pagehead[data-sv-severity] :is(.svb-scopeline, .svb-feeds) { flex: 0 1 auto; }
body[data-page="severe"] .pagehead[data-sv-severity] .svb-feeds-more[open] { flex-basis: 100%; }
/* "· Data: NOAA/NWS" is one phrase: it had wrapped to start a line of its own. */
.sv-publisher { white-space: nowrap; }
body[data-page="severe"] .pagehead-aux {
  margin-left: 0; flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  width: 100%;
}
body[data-page="severe"] .pagehead-aux > * { flex: none; max-width: 100%; }
/* The clock lines in the head wrap as the page's do: the shared component holds a line by
   default, which at 320px or 200% text ran past the viewport. */
body[data-page="severe"] .pagehead .freshness { flex-wrap: wrap; white-space: normal; min-width: 0; }
body[data-page="severe"] .pagehead .freshness-text { white-space: normal; }

/* The scope form: a state, a place, or the reader's own position. One row that wraps. */
.svb-scope { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); flex: 1 1 560px; max-width: 100%; }
.svb-scope-label { font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); }
.svb-select { min-height: 44px; max-width: 100%; padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-bulletin); color: var(--ink); background: var(--paper); border: 1px solid var(--edge); }
.svb-search { position: relative; flex: 1 1 200px; min-width: 160px; max-width: 360px; }
.svb-q { width: 100%; min-height: 44px; }
.svb-q:disabled { color: var(--muted); }
.svb-scope .btn { min-height: 44px; }
.svb-locate[hidden] { display: none; }
/* The suggestions: a list over the page, one target a row, the chosen one reversed. */
.svb-suggest {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30;
  max-height: 320px; overflow-y: auto; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent);
}
.svb-suggest[hidden] { display: none; }
.svb-suggest ul { list-style: none; margin: 0; padding: var(--sp-1) 0; }
.svb-suggest a, .svb-suggest p { display: flex; justify-content: space-between; gap: var(--sp-3); min-height: 44px; align-items: center; margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); color: var(--ink); text-decoration: none; }
.svb-suggest a:hover, .svb-suggest a[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.svb-suggest a:hover .svb-suggest-where, .svb-suggest a[aria-selected="true"] .svb-suggest-where { color: var(--paper); }
/* What tells a match apart (its county; for a ZIP, that it is a ZIP code area): never wider than the name. */
.svb-suggest a > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.svb-suggest-where { flex: 0 1 auto; max-width: 50%; min-width: 0; font-size: var(--fs-micro); color: var(--muted); text-align: end; overflow-wrap: anywhere; }
.svb-scopeline { flex: 1 1 100%; margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.svb-scopeline strong { color: var(--ink); }
.svb-scopeline .sv-go { margin-left: var(--sp-2); font-size: var(--fs-small); }
.svb-scopenotes { flex: 1 1 100%; display: grid; gap: var(--sp-2); }
.svb-scopenotes:focus { outline: none; }
.svb-scopenote { flex: 1 1 100%; margin: 0; font-size: var(--fs-small); }
/* Which of several places: a list of rows, each a full-width target (2026-10-06). */
.svb-matches-q { margin: 0 0 var(--sp-1); font-weight: 700; }
.svb-matches { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.svb-matches li { border-bottom: 1px solid var(--line); }
.svb-matches a { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); min-height: 44px; padding: var(--sp-1) var(--sp-2); font-weight: 650; }
.svb-matches a:hover { background: var(--wash); }
.svb-matchwhere { font-weight: 400; color: var(--ink-2); }
.svb-near { flex: 1 1 100%; }
.svb-near[hidden] { display: none; }
/* The time preference: shown once a script can honour it. */
.svb-tz[hidden] { display: none; }
/* Its options are buttons, where the shared segment is a label round an input: without this they
   took the browser's own raised grey face, and pressed looked like not pressed. */
.svb-tz .seg-opt { appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.svb-tz .seg-opt > span { min-height: 44px; display: flex; align-items: center; }
.svb-tz .seg-opt[aria-pressed="true"] > span { background: var(--ink); color: var(--paper); }
.svb-tz .seg-opt:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
/* The sources' clocks: the alerts feed's in view, every other feed's under one line. Each feed
   keeps its own clock; none is judged by another's. */
.svb-feeds { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-5); font-size: var(--fs-small); }
.svb-feeds > .freshness { margin: 0; }
.svb-feeds-more { flex: 1 1 auto; min-width: 0; }
.svb-feeds-more > summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; font-weight: 600; }
.svb-feeds-more[open] { flex-basis: 100%; }
.svb-feeds-list { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
.svb-feeds-note { margin: var(--sp-2) 0 0; max-width: 72ch; color: var(--ink-2); }

.sv-clocks { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-6); }
.sv-clocks .freshness { flex-wrap: wrap; }
.sv .freshness { flex-wrap: wrap; }
.sv-publisher { color: var(--muted); font-weight: 400; }

/* The notice that says the page cannot vouch for its warnings. Reversed ink with a printed
   marker, at body size: it outranks everything under it, because it is the sentence saying the
   rest may be wrong. */
.sv-notice {
  display: flex; gap: var(--sp-2); margin: 0; max-width: 72ch;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-control);
  background: var(--ink); color: var(--paper); font-size: var(--fs-remarks); font-weight: 600; line-height: 1.5;
}
.sv-notice a { color: var(--paper); text-decoration: underline; }
.sv-notice .sv-clock, .sv-notice .sv-ago { color: var(--paper); }
.sv-notice-mark { flex: none; font-family: var(--font-mono); font-weight: 700; }
.sv-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.sv-action { min-height: 44px; font-size: var(--fs-small); }

/* ---------------------------------------------------------------------------------------
   Shared pieces
   ------------------------------------------------------------------------------------- */

.sv-section { margin-top: var(--sp-8); scroll-margin-top: var(--sp-4); }
.sv-sectionhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2) var(--sp-6); margin: 0 0 var(--sp-4); }
.sv-sectionhead > p { margin: 0; max-width: 64ch; color: var(--ink-2); font-size: var(--fs-small); }
.sv-sectionhead > .freshness { flex: 1 1 100%; margin: 0; }
.sv-sectionhead h2 { flex: 1 1 100%; margin: 0; font-size: var(--fs-lede); font-weight: 800; letter-spacing: -0.02em; }
.sv-empty { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); background: var(--wash); border-radius: var(--radius-control); max-width: 62ch; }
/* Nothing in force, said once and plainly: a sentence, not an empty box. */
.sv-calm { margin: 0 0 var(--sp-2); max-width: 62ch; font-size: var(--fs-lead); font-weight: 600; line-height: 1.45; }
.sv-reports-note { margin: 0; max-width: 66ch; font-size: var(--fs-small); color: var(--ink-2); }
.sv-meta { margin: var(--sp-1) 0 0; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); font-variant-numeric: tabular-nums; }
.sv-clock, .sv-left, .sv-ago { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* The reader's local time leads (severe-common.mjs, localTimes()); the UTC clock after it steps back.
   With UTC chosen, the page drops the local time and the UTC clock stands alone. */
.sv-local { font-family: var(--font-body); }
.sv-clock--second { color: var(--muted); }
/* One clock at a time (SB-R08): the reader's Local or UTC, as the Live tracker shows it. Under
   "Sources & update times" both stay, for a reader who wants either. With no script the root says
   nothing, and the server's UTC stands alone. */
html[data-sv-time="local"] body[data-page="severe"] :is(.sv-local-sep, .sv-clock--second) { display: none; }
html[data-sv-time="utc"] body[data-page="severe"] .sv-local { display: none; }
html[data-sv-time] body[data-page="severe"] :is(.svb-feeds-more, .svb-sources) .sv-local { display: inline; }
html[data-sv-time] body[data-page="severe"] :is(.svb-feeds-more, .svb-sources) :is(.sv-local-sep, .sv-clock--second) { display: inline; }
.svb-health-note { margin: var(--sp-1) 0 0; max-width: 80ch; font-size: var(--fs-small); color: var(--ink-2); }
.svb-lead .sv-clock--second { font-size: var(--fs-small); font-weight: 600; }
.sv-caption-note { display: block; margin: var(--sp-1) 0 0; color: var(--ink); font-size: var(--fs-small); }

/* A "go" link: teal, bold, with an arrow, as the homepage's discovery links are. */
.sv-go { display: inline-flex; align-items: center; min-height: 24px; color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* The arrow is drawn, not said (HB-23): its alternative text is empty, so a link is named by its words. */
.sv-go::after { content: "\00a0→"; content: "\00a0→" / ""; }
/* A go-link that goes back up (to the national view) draws its arrow back: "National →" read as onward. */
.sv-go--back::after { content: none; }
.sv-go--back::before { content: "←\00a0"; content: "←\00a0" / ""; }
.sv-textlink { display: inline-flex; align-items: center; min-height: 24px; }

/* Hazard chips: NWS's colour, the measured ink, and the word. */
.sv-hz {
  display: inline-block; padding: 1px var(--sp-2); border: 1px solid transparent; border-radius: var(--radius-node);
  font-size: var(--fs-micro); font-weight: 700; line-height: 1.5; vertical-align: baseline;
}
.sv-hz--tornado-warning { background: var(--hz-tornado-warning); color: var(--hz-tornado-warning-ink); }
.sv-hz--severe-thunderstorm-warning { background: var(--hz-severe-thunderstorm-warning); color: var(--hz-severe-thunderstorm-warning-ink); }
.sv-hz--flash-flood-warning { background: var(--hz-flash-flood-warning); color: var(--hz-flash-flood-warning-ink); }
.sv-hz--tsunami-warning { background: var(--hz-tsunami-warning); color: var(--hz-tsunami-warning-ink); }
.sv-hz--extreme-wind-warning { background: var(--hz-extreme-wind-warning); color: var(--hz-extreme-wind-warning-ink); }
.sv-hz--storm-surge-warning { background: var(--hz-storm-surge-warning); color: var(--hz-storm-surge-warning-ink); }
.sv-hz--hurricane-warning { background: var(--hz-hurricane-warning); color: var(--hz-hurricane-warning-ink); }
.sv-hz--typhoon-warning { background: var(--hz-typhoon-warning); color: var(--hz-typhoon-warning-ink); }
.sv-hz--blizzard-warning { background: var(--hz-blizzard-warning); color: var(--hz-blizzard-warning-ink); }
.sv-hz--snow-squall-warning { background: var(--hz-snow-squall-warning); color: var(--hz-snow-squall-warning-ink); }
.sv-hz--ice-storm-warning { background: var(--hz-ice-storm-warning); color: var(--hz-ice-storm-warning-ink); }
.sv-hz--winter-storm-warning { background: var(--hz-winter-storm-warning); color: var(--hz-winter-storm-warning-ink); }
.sv-hz--lake-effect-snow-warning { background: var(--hz-lake-effect-snow-warning); color: var(--hz-lake-effect-snow-warning-ink); }
.sv-hz--dust-storm-warning { background: var(--hz-dust-storm-warning); color: var(--hz-dust-storm-warning-ink); }
.sv-hz--blowing-dust-warning { background: var(--hz-blowing-dust-warning); color: var(--hz-blowing-dust-warning-ink); }
.sv-hz--high-wind-warning { background: var(--hz-high-wind-warning); color: var(--hz-high-wind-warning-ink); }
.sv-hz--tropical-storm-warning { background: var(--hz-tropical-storm-warning); color: var(--hz-tropical-storm-warning-ink); }
.sv-hz--ashfall-warning { background: var(--hz-ashfall-warning); color: var(--hz-ashfall-warning-ink); }
.sv-hz--flood-warning { background: var(--hz-flood-warning); color: var(--hz-flood-warning-ink); }
.sv-hz--coastal-flood-warning { background: var(--hz-coastal-flood-warning); color: var(--hz-coastal-flood-warning-ink); }
.sv-hz--lakeshore-flood-warning { background: var(--hz-lakeshore-flood-warning); color: var(--hz-lakeshore-flood-warning-ink); }
.sv-hz--high-surf-warning { background: var(--hz-high-surf-warning); color: var(--hz-high-surf-warning-ink); }
.sv-hz--extreme-heat-warning { background: var(--hz-extreme-heat-warning); color: var(--hz-extreme-heat-warning-ink); }
.sv-hz--extreme-cold-warning { background: var(--hz-extreme-cold-warning); color: var(--hz-extreme-cold-warning-ink); }
.sv-hz--freeze-warning { background: var(--hz-freeze-warning); color: var(--hz-freeze-warning-ink); }
.sv-hz--red-flag-warning { background: var(--hz-red-flag-warning); color: var(--hz-red-flag-warning-ink); }
/* NWS's flash-flood maroon is 1.3:1 on the dark theme's surfaces, the dimmest chip for the deadliest
   flood hazard: on dark it takes a 1px edge of the theme's ink, as the homepage's edges do (HB-10). The
   colour itself is not retuned. */
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) .sv-hz--flash-flood-warning { border-color: var(--ink); }
.sv-hz--tornado-watch { background: var(--hz-tornado-watch); color: var(--hz-tornado-watch-ink); border-color: var(--hz-tornado-watch-edge); }
.sv-hz--severe-thunderstorm-watch { background: var(--hz-severe-thunderstorm-watch); color: var(--hz-severe-thunderstorm-watch-ink); border-color: var(--hz-severe-thunderstorm-watch-edge); }
/* Discussions have no NWS colour: a neutral dotted outline, as on the map. */
/* A gauge's flood category (SEV-07): NWPS's colour, black ink, and always the words. */
.sv-flood { display: inline-block; font-weight: 700; font-size: var(--fs-small); line-height: 1.3; padding: 1px var(--sp-2); border-radius: var(--radius-sm, 4px); color: var(--sv-flood-ink); border: 1px solid var(--sv-flood-ink); }
.sv-flood--action { background: var(--sv-flood-action); }
.sv-flood--minor { background: var(--sv-flood-minor); }
.sv-flood--moderate { background: var(--sv-flood-moderate); }
.sv-flood--major { background: var(--sv-flood-major); }
/* SEV-07: the river card's gauges, and expected rain's word on the day's flash-flood risk. */
.svb-river-list { list-style: none; margin: var(--sp-2) 0; padding: 0; }
.svb-river-list li { margin: 0 0 var(--sp-2); }
.svb-river-basis { color: var(--ink-2); font-size: var(--fs-small); }
.svb-rain-cross { font-size: var(--fs-small); margin: var(--sp-2) 0 var(--sp-3); }
.svb-rain-raster { image-rendering: pixelated; }
.sv-hz--md { background: transparent; color: var(--ink); border: 2px dotted var(--ink-2); padding: 0 var(--sp-2); }

/* Impact tags. Reversal marks the ones the design singles out (emergencies, an observed
   tornado, a damage threat): the system's strongest emphasis, and no new red. */
.sv-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.sv-tag { padding: 0 var(--sp-2); border: 1px solid var(--edge); border-radius: var(--radius-preview); font-size: var(--fs-micro); font-weight: 600; line-height: 1.6; }
.sv-tag--strong { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Swatches for the legends. Hazard ones read the hazard properties; SPC's and WPC's are drawn as
   SVG with the agencies' own colours from the file. */
.sv-sw { display: inline-block; flex: none; width: 18px; height: 12px; margin-right: var(--sp-2); border-radius: 0; vertical-align: -1px; }
.sv-sw--tornado-warning { background: var(--hz-tornado-warning); border: 1px solid var(--hz-outline); }
.sv-sw--severe-thunderstorm-warning { background: var(--hz-severe-thunderstorm-warning); border: 1px solid var(--hz-outline); }
.sv-sw--flash-flood-warning { background: var(--hz-flash-flood-warning); border: 1px solid var(--hz-outline); }
.sv-sw--tsunami-warning { background: var(--hz-tsunami-warning); border: 1px solid var(--hz-outline); }
.sv-sw--extreme-wind-warning { background: var(--hz-extreme-wind-warning); border: 1px solid var(--hz-outline); }
.sv-sw--storm-surge-warning { background: var(--hz-storm-surge-warning); border: 1px solid var(--hz-outline); }
.sv-sw--hurricane-warning { background: var(--hz-hurricane-warning); border: 1px solid var(--hz-outline); }
.sv-sw--typhoon-warning { background: var(--hz-typhoon-warning); border: 1px solid var(--hz-outline); }
.sv-sw--blizzard-warning { background: var(--hz-blizzard-warning); border: 1px solid var(--hz-outline); }
.sv-sw--snow-squall-warning { background: var(--hz-snow-squall-warning); border: 1px solid var(--hz-outline); }
.sv-sw--ice-storm-warning { background: var(--hz-ice-storm-warning); border: 1px solid var(--hz-outline); }
.sv-sw--winter-storm-warning { background: var(--hz-winter-storm-warning); border: 1px solid var(--hz-outline); }
.sv-sw--lake-effect-snow-warning { background: var(--hz-lake-effect-snow-warning); border: 1px solid var(--hz-outline); }
.sv-sw--dust-storm-warning { background: var(--hz-dust-storm-warning); border: 1px solid var(--hz-outline); }
.sv-sw--blowing-dust-warning { background: var(--hz-blowing-dust-warning); border: 1px solid var(--hz-outline); }
.sv-sw--high-wind-warning { background: var(--hz-high-wind-warning); border: 1px solid var(--hz-outline); }
.sv-sw--tropical-storm-warning { background: var(--hz-tropical-storm-warning); border: 1px solid var(--hz-outline); }
.sv-sw--ashfall-warning { background: var(--hz-ashfall-warning); border: 1px solid var(--hz-outline); }
.sv-sw--flood-warning { background: var(--hz-flood-warning); border: 1px solid var(--hz-outline); }
.sv-sw--coastal-flood-warning { background: var(--hz-coastal-flood-warning); border: 1px solid var(--hz-outline); }
.sv-sw--lakeshore-flood-warning { background: var(--hz-lakeshore-flood-warning); border: 1px solid var(--hz-outline); }
.sv-sw--high-surf-warning { background: var(--hz-high-surf-warning); border: 1px solid var(--hz-outline); }
.sv-sw--extreme-heat-warning { background: var(--hz-extreme-heat-warning); border: 1px solid var(--hz-outline); }
.sv-sw--extreme-cold-warning { background: var(--hz-extreme-cold-warning); border: 1px solid var(--hz-outline); }
.sv-sw--freeze-warning { background: var(--hz-freeze-warning); border: 1px solid var(--hz-outline); }
.sv-sw--red-flag-warning { background: var(--hz-red-flag-warning); border: 1px solid var(--hz-outline); }
.sv-sw--tornado-watch { background: var(--hz-tornado-watch); border: 2px dashed var(--hz-tornado-watch-edge); }
.sv-sw--severe-thunderstorm-watch { background: var(--hz-severe-thunderstorm-watch); border: 2px dashed var(--hz-severe-thunderstorm-watch-edge); }
.sv-sw--md { border: 2px dotted var(--ink); }
.sv-sw--watch-only { border: 2px dashed var(--ink-2); background: var(--surface); }
.sv-sw--spc { width: 18px; height: 14px; border-radius: 0; }
/* The place marker: a ring in ink over a paper casing, as on the map. */
.svb-sw--point { width: 12px; height: 12px; border: 2px solid var(--graphic-ink); border-radius: 50%; box-shadow: 0 0 0 2px var(--graphic-paper); background: transparent; }

/* ---------------------------------------------------------------------------------------
   Active now
   ------------------------------------------------------------------------------------- */

.svb-now { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--briefing); border-radius: var(--radius-surface); scroll-margin-top: var(--sp-4); }
.svb-now-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }
.svb-now-title { flex: none; margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-2); }
.svb-now-line { flex: 1 1 24ch; max-width: 100ch; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0; font-size: var(--fs-remarks); font-weight: 700; line-height: 1.5; }
.svb-now-count .sv-hz { font-size: var(--fs-small); padding: 2px var(--sp-3); }
.svb-dot { color: var(--muted); font-weight: 400; }
/* A separator travels with the item it introduces, so no line starts or ends with a lone dot. */
.svb-now-part { display: inline-block; }
.svb-now-scope { font-weight: 400; color: var(--ink-2); font-size: var(--fs-small); }
.svb-now-open { flex: none; min-height: 44px; }
.svb-now-note { margin: var(--sp-3) 0 0; max-width: 72ch; font-size: var(--fs-small); }
/* Watch development (SB-R13): a matching discussion, under the warnings, in SPC's words. */
.svb-mdwatch { margin: var(--sp-3) 0 0; max-width: 72ch; font-size: var(--fs-small); line-height: 1.5; }
.svb-now--bar .svb-mdwatch { margin-top: var(--sp-1); }
.svb-now--held { display: grid; gap: var(--sp-3); }
.svb-now--held .svb-now-line { margin: 0; }
.svb-now-actions { margin: 0; }
.svb-now-after { margin-top: var(--sp-4); }

/* The lead cards: each emergency and tornado on the ground at the scope, three at most. NWS's colour
   across the head with the measured ink, the lead word before the event, the place and the end at
   the size a reader acts on, NWS's instruction beside them and the warning closer. The peak of the
   page, and on a loud page the first thing in it. */
.svb-leads { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.svb-lead {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 var(--sp-5);
  grid-template-areas: "strip strip" "head says" "more says";
  grid-template-rows: auto auto 1fr;
  border: 2px solid var(--ink); border-radius: var(--radius-surface); background: var(--surface);
  scroll-margin-top: var(--sp-4);
}
.svb-lead--map { grid-template-columns: minmax(0, 1.1fr) 240px minmax(0, 1fr); grid-template-areas: "strip strip strip" "head fig says" "more fig says"; }
.sv-card-strip {
  grid-area: strip; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-1) var(--sp-4);
  margin: 0; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-remarks); font-weight: 600;
  /* The strip rounds its own top corners inside the card's 2px edge: the card does not clip, so the
     full text opened inside it is never cut off (WCAG 1.4.4, 1.4.10). */
  border-radius: calc(var(--radius-surface) - 2px) calc(var(--radius-surface) - 2px) 0 0;
}
/* The lead word is the heavier and the larger: "Tornado emergency" is the claim, "Tornado Warning"
   the product. At 19px bold it is large text, so its measured ink holds where colour does not (a
   red-blind reader sees the strip's red as olive). */
.sv-card-strip strong { font-size: var(--fs-lead); font-weight: 800; }
.sv-card--tornado-warning .sv-card-strip { background: var(--hz-tornado-warning); color: var(--hz-tornado-warning-ink); }
.sv-card--flash-flood-warning .sv-card-strip { background: var(--hz-flash-flood-warning); color: var(--hz-flash-flood-warning-ink); }
.sv-card--severe-thunderstorm-warning .sv-card-strip { background: var(--hz-severe-thunderstorm-warning); color: var(--hz-severe-thunderstorm-warning-ink); }
.sv-card--tsunami-warning .sv-card-strip { background: var(--hz-tsunami-warning); color: var(--hz-tsunami-warning-ink); }
.sv-card--extreme-wind-warning .sv-card-strip { background: var(--hz-extreme-wind-warning); color: var(--hz-extreme-wind-warning-ink); }
.sv-card--storm-surge-warning .sv-card-strip { background: var(--hz-storm-surge-warning); color: var(--hz-storm-surge-warning-ink); }
.sv-card--hurricane-warning .sv-card-strip { background: var(--hz-hurricane-warning); color: var(--hz-hurricane-warning-ink); }
.sv-card--typhoon-warning .sv-card-strip { background: var(--hz-typhoon-warning); color: var(--hz-typhoon-warning-ink); }
.sv-card--blizzard-warning .sv-card-strip { background: var(--hz-blizzard-warning); color: var(--hz-blizzard-warning-ink); }
.sv-card--snow-squall-warning .sv-card-strip { background: var(--hz-snow-squall-warning); color: var(--hz-snow-squall-warning-ink); }
.sv-card--ice-storm-warning .sv-card-strip { background: var(--hz-ice-storm-warning); color: var(--hz-ice-storm-warning-ink); }
.sv-card--winter-storm-warning .sv-card-strip { background: var(--hz-winter-storm-warning); color: var(--hz-winter-storm-warning-ink); }
.sv-card--lake-effect-snow-warning .sv-card-strip { background: var(--hz-lake-effect-snow-warning); color: var(--hz-lake-effect-snow-warning-ink); }
.sv-card--dust-storm-warning .sv-card-strip { background: var(--hz-dust-storm-warning); color: var(--hz-dust-storm-warning-ink); }
.sv-card--blowing-dust-warning .sv-card-strip { background: var(--hz-blowing-dust-warning); color: var(--hz-blowing-dust-warning-ink); }
.sv-card--high-wind-warning .sv-card-strip { background: var(--hz-high-wind-warning); color: var(--hz-high-wind-warning-ink); }
.sv-card--tropical-storm-warning .sv-card-strip { background: var(--hz-tropical-storm-warning); color: var(--hz-tropical-storm-warning-ink); }
.sv-card--ashfall-warning .sv-card-strip { background: var(--hz-ashfall-warning); color: var(--hz-ashfall-warning-ink); }
.sv-card--flood-warning .sv-card-strip { background: var(--hz-flood-warning); color: var(--hz-flood-warning-ink); }
.sv-card--coastal-flood-warning .sv-card-strip { background: var(--hz-coastal-flood-warning); color: var(--hz-coastal-flood-warning-ink); }
.sv-card--lakeshore-flood-warning .sv-card-strip { background: var(--hz-lakeshore-flood-warning); color: var(--hz-lakeshore-flood-warning-ink); }
.sv-card--high-surf-warning .sv-card-strip { background: var(--hz-high-surf-warning); color: var(--hz-high-surf-warning-ink); }
.sv-card--extreme-heat-warning .sv-card-strip { background: var(--hz-extreme-heat-warning); color: var(--hz-extreme-heat-warning-ink); }
.sv-card--extreme-cold-warning .sv-card-strip { background: var(--hz-extreme-cold-warning); color: var(--hz-extreme-cold-warning-ink); }
.sv-card--freeze-warning .sv-card-strip { background: var(--hz-freeze-warning); color: var(--hz-freeze-warning-ink); }
.sv-card--red-flag-warning .sv-card-strip { background: var(--hz-red-flag-warning); color: var(--hz-red-flag-warning-ink); }
.svb-lead-head { grid-area: head; min-width: 0; padding: var(--sp-4) 0 0 var(--sp-4); }
.svb-lead-more { grid-area: more; min-width: 0; padding: 0 0 var(--sp-4) var(--sp-4); }
.sv-card-where { margin: 0; font-size: var(--fs-subhead); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.sv-card-until { margin: var(--sp-2) 0 0; font-size: var(--fs-lead); font-weight: 800; color: var(--ink); }
.sv-card-until .sv-local { color: var(--ink); }
.sv-card-until .sv-left { font-family: var(--font-body); font-weight: 700; }
.sv-when-left { white-space: nowrap; }
.sv-card-from { margin: var(--sp-1) 0 0; font-size: var(--fs-remarks); font-weight: 600; color: var(--ink-2); }
.sv-card-issued { margin: var(--sp-1) 0 0; font-size: var(--fs-small); color: var(--ink-2); max-width: 60ch; }
.sv-card-asof { margin: var(--sp-1) 0 0; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700; }
.svb-lead-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0 0; }
.svb-lead .sv-says { grid-area: says; margin: var(--sp-4) var(--sp-4) var(--sp-4) 0; align-self: start; }
/* A twin's instruction, the same words as the card above, folded to one line. */
.sv-says--same > summary { cursor: pointer; min-height: 24px; font-size: var(--fs-small); font-weight: 700; color: var(--link); text-decoration: underline; }
.sv-says--same[open] > summary { margin-bottom: var(--sp-2); }
.sv-says--same > .sv-says { margin: 0; padding: 0; border: 0; background: none; }

/* The warning closer, as the homepage draws it (HB-19): its polygon at the middle of a square, the
   counties it covers outlined and named, on the plate's own roles. */
.svb-lead-fig { grid-area: fig; margin: var(--sp-4) 0; display: grid; gap: var(--sp-1); align-content: start; }
.svb-lead-map { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--edge); border-radius: var(--radius-control); background: var(--graphic-wash); }
.svb-lead-map .sv-map { display: block; width: 100%; height: 100%; }
.svb-lead-fig figcaption { font-size: var(--fs-small); color: var(--ink-2); }
.svb-now-more { margin: var(--sp-4) 0 0; font-size: var(--fs-remarks); }
/* With cards up the counts follow them, as the tally of everything else in force. */
.svb-now-line--after { margin-top: var(--sp-4); max-width: 72ch; }
.svb-now--lead > .svb-now-title { margin-bottom: 0; }
.svb-leads > .svb-help { margin: 0; }
.svb-now-more .sv-go { margin-left: var(--sp-2); }
.svb-elsewhere-now { margin: var(--sp-3) 0 0; font-size: var(--fs-remarks); max-width: 72ch; }

/* NWS's own instruction, as sent. Set as reading text, not as a bulletin: it is the sentence a
   reader acts on, and it is theirs, which the label and its source say. */
.sv-says { padding: var(--sp-3) var(--sp-4); background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-control); }
.sv-says-label { margin: 0 0 var(--sp-1); font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-2); }
.sv-says-label .sv-publisher { text-transform: none; letter-spacing: 0; }
.sv-says-text { margin: 0; max-width: 62ch; overflow-wrap: break-word; font-size: var(--fs-remarks); font-weight: 600; line-height: 1.5; }
.sv-says-text + .sv-says-text { margin-top: var(--sp-2); }

/* The section links: one row under the strip. */

/* The place controls on a loud page, after the lead cards: the same form the head carries on a
   calm day, under a heading that says what it is for. */
.svb-scopebar { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--intro); border-radius: var(--radius-surface); scroll-margin-top: var(--sp-4); }
.svb-scopebar-title { margin: 0 0 var(--sp-3); font-size: var(--fs-remarks); font-weight: 800; }
.svb-scopebar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.svb-scopebar-row > * { max-width: 100%; }
.svb-scopewhat { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--ink-2); max-width: 72ch; }
.svb-scopewhat strong { color: var(--ink); }

/* ---------------------------------------------------------------------------------------
   The workspace
   ------------------------------------------------------------------------------------- */

.svb-work { margin-top: var(--sp-5); scroll-margin-top: var(--sp-4); }
.svb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.svb-sourcenote { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.svb-periods, .svb-views { flex: none; }
/* A period's chip carries its date and what it is; the chosen one reverses, as a pressed chip does.
   The Briefing's chips may shrink and wrap their words: the shared chip holds its content width
   (`flex: none`, `nowrap`), and "Wed 23 Sep · current period" ran past a phone's width at 200%
   text. */
.svb .choicebar .choice { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal; text-align: left; }
.choicebar .choice[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice[aria-current="page"] .svb-chip-note { color: var(--paper); }
.svb-chip-note { font-weight: 500; color: var(--muted); }
/* A period chip names its day over its date (SEV-03): "Today" / "Wed 23 Sep". */
.svb-periods .choice { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; line-height: 1.2; }
.svb-day { font-weight: 700; }
.svb-date { font-size: var(--fs-micro); font-weight: 500; }
.svb-pending { cursor: default; color: var(--muted); border-style: dashed; }
/* SPC's Days 4–8 (SEV-06, SB-R03): one entry in the day row, on the wash so a planning outlook
   never reads as one of the forecast's three days; its five days open on a row of their own, under
   a rule, only once the entry is chosen, with SPC's two reasons for drawing nothing told apart. */
.svb .choicebar .svb-plan-entry:not([aria-current="page"]), .svb .choicebar .svb-plan-days .choice:not([aria-current="page"]) { background: var(--wash); }
.svb-plan { display: grid; gap: var(--sp-2); min-width: 0; padding-left: var(--sp-3); border-left: 2px solid var(--line); }
.svb-plan-days .choice { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; line-height: 1.2; }
/* The five days as an even grid, not a mosaic of joined chips of whatever width their words take:
   one row where there is room, then rows of equal cells. */
.svb-mapcard .choicebar.svb-plan-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--sp-1); }
.svb-mapcard .svb-plan-days .choice, .svb-mapcard .svb-plan-days .choice:first-child, .svb-mapcard .svb-plan-days .choice:last-child { margin-inline-start: 0; border-radius: var(--radius-control); max-width: none; }
.svb-plan-note { margin: 0; max-width: 72ch; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.svb-watchprob-note { font-weight: 400; color: var(--ink-2); }
.svb-plan-tag { margin: 0 0 var(--sp-2); font-size: var(--fs-micro); font-weight: 700; color: var(--ink-2); }
.svb-viewnote { flex: 1 1 100%; margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.svb-notes { margin-top: var(--sp-2); }
.svb-notes .sv-caption-note { margin: 0; }

/* The layers: a disclosure in the control row, the checkboxes and Apply under it. */
.svb-layers { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; }
.svb-layers-box > summary { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4); cursor: pointer; list-style: none; font-size: var(--fs-bulletin); font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control); }
.svb-layers-box > summary::-webkit-details-marker { display: none; }
.svb-layers-box > summary::marker { content: ""; }
.svb-layers-box > summary::before { content: "☰"; font-size: var(--fs-small); color: var(--ink-2); }
.svb-layers-box[open] > summary { border-color: var(--ink); }
.svb-layers-n { font-family: var(--font-mono); font-weight: 700; }
/* `min-width: 0`: a fieldset keeps its content's width by default, and its four labels in one row
   pushed a 320px page to 604px once the panel opened (WCAG 1.4.10). */
.svb-layers-box fieldset { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.svb-layer { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-small); font-weight: 600; }
.svb-layer input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
/* With a script, the checkboxes act at once and Apply is not needed. */
.svb-layers[data-sv-live] [data-sv-apply] { display: none; }

/* The stage: the map about two thirds, the reading panel the rest; the panel keeps up. */
.svb-stage { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); gap: var(--sp-4); align-items: start; margin-top: var(--sp-3); }
.svb-mapfig { margin: 0; min-width: 0; }
.svb-mapframe { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.sv-map { display: block; width: 100%; height: auto; background: var(--graphic-wash); }
/* The map and the controls above it fit one screen (2026-10-09). A state's frame is the state's
   shape, and a tall one set a tall map: Alabama's was 1,915px high at 1920×1080. Capped, the map keeps
   its width and fits the state to its height, and the room either side shows the states around it
   under the veil, with their warnings (map.ts, nearState). The cap leaves room for the sticky
   masthead (64px, 101px on a phone) and the card's periods, choices and title over the map (180px,
   194px on a phone), so scrolled to the card a reader sees all of them and the whole map at once. The
   national map is wide and seldom reaches it; nor does a phone held upright. From 720px wide the
   key under the map fits too (about 150px there; a phone's is 275px and cannot): the owner chose,
   on 2026-10-09, the whole card on one screen over a taller map. */
.svb-map { max-height: max(18rem, calc(100svh - 17rem)); }
@media (min-width: 720px) {
  .svb-map { max-height: max(18rem, calc(100svh - 26rem)); }
}
.svb-map.is-zoomed { touch-action: none; }
.svb-map.is-zoomed { cursor: grab; }
.svb-map.is-dragging { cursor: grabbing; }
.sv-map-sea { fill: var(--graphic-wash); }
.sv-map-land { fill: var(--sv-land, var(--graphic-paper)); stroke: var(--sv-coast, var(--graphic-muted)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sv-map-borders { fill: none; stroke: var(--sv-border, var(--graphic-line-strong)); stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.sv-outlook { stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.svb-intensity { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.svb-hatch-line { stroke: var(--graphic-ink); stroke-width: 1.5; }
/* SPC's Intensity Level 1 is its dashed hatch (intensity.ts); Levels 2 and 3 are solid. The dash
   repeats every 8 units, the pattern tile's height, so it runs evenly across tiles. */
.svb-hatch-line--dashed { stroke-dasharray: 5 3; }
.svb-sw--intensity { fill: none; }
.sv-watch-edge { stroke-width: 4.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sv-watch-line { stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sv-md-line { stroke: var(--graphic-ink); stroke-width: 2; stroke-dasharray: 1 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sv-warning { stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* The national map with a warning in force (`sv-map--warned`): the warnings are the subject and
   SPC's outlook the context. Its fills fade, SPC's colours unchanged and its outlines kept, so a
   half-continent of general-thunderstorm green no longer outweighs a county under a tornado
   emergency. Each warning also carries a halo in its own colour, a fixed width on screen, so one a
   few kilometres across is still found at the national scale. */
.sv-map--warned .sv-outlook { fill-opacity: 0.4; }
:is(.sv-mapframe, .home-mapview):has(.sv-map--warned) .sv-legend .sv-sw--spc rect { fill-opacity: 0.4; }
/* On the dark page SPC's pale fills (General Thunderstorms' green above all) glared against the navy
   land (2026-10-06): they are drawn at 70%, their colours and outlines unchanged, the key with them. */
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page^="severe"] .sv-map:not(.sv-map--warned) .sv-outlook { fill-opacity: 0.7; }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page^="severe"] :is(.sv-mapframe, .svb-mapframe):not(:has(.sv-map--warned)) .sv-legend .sv-sw--spc rect { fill-opacity: 0.7; }
/* In an outbreak the watches' outlines had covered the warnings and the labels under them
   (2026-10-06): with a warning in force they are drawn thinner, their colours unchanged. */
.sv-map--warned .sv-watch-edge { stroke-width: 3; stroke-opacity: 0.55; }
.sv-map--warned .sv-watch-line { stroke-width: 1.75; }
.sv-warning-halo { stroke-width: 8; stroke-opacity: 0.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* The homepage's ring round the warning it leads with (map.ts, leadRing()): paper under ink, a
   fixed width on screen, so it reads over any fill at the national scale. */
.sv-lead-ring circle { vector-effect: non-scaling-stroke; }
.sv-lead-ring-case { stroke: var(--graphic-paper); stroke-width: 6; }
.sv-lead-ring-line { stroke: var(--graphic-ink); stroke-width: 2.5; }
/* An emergency on the Briefing's map: ringed as the homepage rings its lead, and outlined heavier,
   so it is found by shape as well as colour (the key names the ring). */
.svb-w--emergency .sv-warning { stroke-width: 2.5; }
.svb-sw--ring { width: 14px; height: 14px; border: 2.5px solid var(--graphic-ink); border-radius: 50%; box-shadow: 0 0 0 2px var(--graphic-paper); background: transparent; }
/* The closer view's counties (HB-19): each county the warning covers, outlined over NWS's polygon
   and named in ink with a paper halo, so the name reads over the fill and over land alike. */
.sv-lead-county { stroke: var(--graphic-ink); stroke-width: 1; stroke-opacity: .6; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.sv-lead-label { fill: var(--graphic-ink); stroke: var(--graphic-paper); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke;
  font-family: var(--font-body); font-weight: 700; vector-effect: non-scaling-stroke; }
/* A state in scope: the rest of the country under a paper veil, the state outlined in ink. */
.svb-map .svl-dim { fill: var(--graphic-paper); fill-opacity: 0.55; }
.svb-map .svl-scope { stroke: var(--graphic-ink); stroke-width: 1.5; stroke-opacity: 0.9; vector-effect: non-scaling-stroke; }
/* An overlay turned off is not drawn, not merely dimmed: the list below the map says the same. */
.svb-map .is-off { display: none; }
/* Storm reports: SPC's colours, an ink casing, and heavier for a significant one. */
.svl-rep { stroke: var(--graphic-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svl-rep--sig { stroke-width: 2.5; }
.svl-rep--tornado { fill: var(--sv-report-tornado); }
.svl-rep--wind { fill: var(--sv-report-wind); }
.svl-rep--hail { fill: var(--sv-report-hail); }
/* The report a reader has picked, from a row or a mark: heavier, and the row is tinted. */
.svl-rep.is-picked { stroke-width: 3.5; stroke: var(--graphic-paper); paint-order: stroke; filter: drop-shadow(0 0 2px var(--graphic-ink)); }
.svb-reporttable tr.is-picked { background: var(--wash-strong); }
.svb-reporttable tr[data-sv-report] { cursor: pointer; }
.svl-rep[tabindex] { cursor: pointer; }
.svl-rep:focus-visible { outline: none; stroke: var(--graphic-ink); stroke-width: 4; }
/* The place marker: ink over paper, a fixed width on screen. */
.svb-point circle { vector-effect: non-scaling-stroke; }
.svb-point-case { stroke: var(--graphic-paper); stroke-width: 5; }
.svb-point-ring { stroke: var(--graphic-ink); stroke-width: 2; }
.svb-point-dot { fill: var(--graphic-ink); }
/* The map's own controls: over its top-right corner, only once a script can move the view. */
.svb-mapctl { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-1); max-width: calc(100% - 2 * var(--sp-2)); }
.svb-mapctl[hidden] { display: none; }
.svb-mapctl .btn { min-width: 44px; min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-bulletin); text-transform: none; letter-spacing: 0; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 20%, transparent); }
.svb-mapctl .btn[hidden] { display: none; }
/* The report keys in the legend: the mark's shape in its colour. */
.svb-repkey { display: inline-block; width: 1em; text-align: center; -webkit-text-stroke: 0.5px var(--graphic-ink); }
.svb-repkey--tornado { color: var(--sv-report-tornado); }
.svb-repkey--wind { color: var(--sv-report-wind); }
.svb-repkey--hail { color: var(--sv-report-hail); }

.sv-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-small); }
.sv-legend li { display: inline-flex; align-items: center; }
.sv-legend-n { margin-left: var(--sp-2); font-family: var(--font-mono); font-weight: 700; }
/* Where a colour drawn only for context is (2026-10-09): words, not a count, so the body face. */
.svb-key-where { margin-left: var(--sp-2); color: var(--ink-2); }
.sv-legend--spc { border-top: 0; padding-inline: 0; }
/* The Briefing's key in groups (SEV-03): the forecast's scale, what is in force now, what was
   reported, and the chosen place, each named, so a warning never reads as a step on SPC's scale. */
.svb-legend { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); }
.svb-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.svb-key-title { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.svb-key .svb-key-list { padding: 0; border-top: 0; gap: var(--sp-1) var(--sp-4); }
/* Thunderstorms are not a severe category: set apart from SPC's 1–5 by a rule. */
.svb-scale-tstm { padding-inline-end: var(--sp-3); border-inline-end: 1px solid var(--line); }
.svb-scale-level.is-absent, .svb-scale-tstm.is-absent { color: var(--ink-2); }
/* The key lists what is on the map (SB-R07); the whole scale is one click away, and a view with
   nothing outlined says so in words. A percentage's meaning sits under it. */
.svb-key-none { font-weight: 600; }
.svb-key-note { flex-basis: 100%; margin: var(--sp-1) 0 0; max-width: 72ch; font-size: var(--fs-micro); line-height: 1.45; color: var(--ink-2); }
.svb-scale { flex-basis: 100%; margin-top: var(--sp-1); font-size: var(--fs-small); }
.svb-scale > summary { cursor: pointer; min-height: 24px; width: max-content; color: var(--link); text-decoration: underline; font-weight: 600; }
.svb-scale > .svb-key-list { margin-top: var(--sp-1); }
.svb-sw--blank { width: 18px; height: 14px; border: 1px solid var(--edge); border-radius: 0; background: transparent; }
/* The scope's value, boxed, as the mock-up marks it; said in words too. */
.svb-key li.is-here { padding: 2px var(--sp-2); border: 2px solid var(--ink); border-radius: var(--radius-control); font-weight: 700; }
@media (max-width: 479px) {
  /* The map card's joined controls, a little tighter, so Tornado, Wind and Hail keep one row at 390px. */
  .svb-mapcard .choicebar .choice { padding-inline: var(--sp-2); }
}
.svb-key li { flex-wrap: wrap; column-gap: 0; }
.svb-scale-note, .svb-scale-here { margin-inline-start: var(--sp-1); font-size: var(--fs-micro); color: var(--ink-2); }
.svb-scale-here { font-weight: 700; color: var(--ink); }
.svb-caption { padding-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); max-width: 66ch; }
.svb-caption strong { color: var(--ink); }
.sv-maplist, .sv-reports { margin-top: var(--sp-2); font-size: var(--fs-small); }
.sv-maplist summary, .sv-reports summary, .sv-fulltext summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; }
.sv-maplist ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
/* The Briefing's maps at night, as the homepage's window is drawn (HB-14): sea and frame in the ocean
   base, land, coast and state lines in the mixes of it and paper, through the base map's recolour
   hooks. The `--graphic-*` roles and NWS's, SPC's and WPC's fills are unchanged; what was ink to sit
   on paper (a warning's outline, a discussion's line, a ring, a county label) is paper to sit on the
   ocean. It had been an 840 by 540 slab of near-white on the dark page. */
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] :is(.svb-mapframe, .svb-lead-map) {
  --sv-land: color-mix(in srgb, var(--graphic-ocean-base) 82%, var(--graphic-paper));
  --sv-coast: color-mix(in srgb, var(--graphic-ocean-base) 50%, var(--graphic-paper));
  --sv-border: color-mix(in srgb, var(--graphic-ocean-base) 62%, var(--graphic-paper));
  background: var(--graphic-ocean-base);
}
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] :is(.svb-mapframe, .svb-lead-map) .sv-map { background: var(--graphic-ocean-base); }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] :is(.svb-mapframe, .svb-lead-map) .sv-map-sea { fill: var(--graphic-ocean-base); }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] :is(.svb-mapframe, .svb-lead-map) :is(.sv-warning, .sv-md-line, .sv-lead-county) { stroke: var(--graphic-paper); }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] :is(.svb-mapframe, .svb-lead-map) .sv-lead-label { fill: var(--graphic-paper); stroke: var(--graphic-ocean-base); }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] .svb-mapframe .sv-lead-ring-case { stroke: var(--graphic-ocean-base); }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] .svb-mapframe .sv-lead-ring-line { stroke: var(--graphic-paper); }

/* The reading panel: what a reader would ask a forecaster, in four facts. */
.svb-panel { min-width: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.svb-panel h3 { margin: 0; font-size: var(--fs-subhead); font-weight: 800; letter-spacing: -0.02em; }
.svb-panel-scope { font-weight: 600; color: var(--ink-2); }
.svb-max { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: var(--sp-3) 0 0; }
.svb-max-label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-2); }
.svb-cat { display: inline-flex; align-items: center; font-size: var(--fs-lead); font-weight: 800; }
.svb-max-note { margin: var(--sp-1) 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.svb-facts { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 2px solid var(--ink); }
.svb-fact dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-2); }
.svb-fact dd { margin: var(--sp-1) 0 0; max-width: 68ch; font-size: var(--fs-small); line-height: 1.5; }
.svb-fact dd .sv-meta { margin-top: var(--sp-2); }
.svb-quote { display: block; margin: var(--sp-1) 0; padding-left: var(--sp-3); border-left: 3px solid var(--line-strong); font-style: italic; }
.svb-threats, .svb-changes, .svb-flood { margin: 0; padding-left: var(--sp-4); }
.svb-flood li + li { margin-top: var(--sp-2); }
.svb-flood-note { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.svb-threats li + li, .svb-changes li + li { margin-top: var(--sp-1); }
.svb-pending-list { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); font-size: var(--fs-small); color: var(--ink-2); }
.svb-discussion, .svb-help { margin-top: var(--sp-3); font-size: var(--fs-small); }
.svb-discussion > summary, .svb-help > summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; font-weight: 600; }
.svb-discussion .sv-product { max-width: 100%; }
.svb-broader { margin: var(--sp-2) 0 0; color: var(--ink-2); }
.svb-help p { margin: var(--sp-2) 0 0; max-width: 62ch; }
/* The states an area reaches, one click away beside the map (SB-R05). */
.svb-states, .svb-change-basis { margin-top: var(--sp-1); font-size: var(--fs-small); }
.svb-states > summary, .svb-change-basis > summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; font-weight: 600; }
.svb-change-basis p { margin: var(--sp-1) 0 0; max-width: 62ch; }
.svb-states-n { font-family: var(--font-mono); }
.svb-states p, .svb-states ul { margin: var(--sp-1) 0 0; max-width: 62ch; }
.svb-status { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); display: grid; gap: var(--sp-1); font-size: var(--fs-small); }
/* SEV-03: what the category means in the agency's words; When's timing apart from its valid
   period; Prepare in NWS's words; and the panel's foot, where its clocks and comparison sit. */
.svb-max-meaning { margin: var(--sp-2) 0 0; max-width: 60ch; font-size: var(--fs-small); line-height: 1.5; }
/* Nearby risk (SB-R12): under the answer at the town, smaller, and never in its place. */
.svb-nearby { margin: var(--sp-2) 0 0; max-width: 60ch; font-size: var(--fs-small); line-height: 1.5; }
.svb-nearby-note { color: var(--ink-2); }
.svb-when-timing, .svb-when-valid { margin: 0; }
.svb-when-valid { margin-top: var(--sp-1); color: var(--ink-2); }
.svb-more { font-weight: 700; }
.svb-prepare { display: grid; gap: var(--sp-2); margin: 0; padding-left: var(--sp-4); }
.svb-prepare-lead { margin: 0 0 var(--sp-2); }
.svb-prepare-src { display: inline-flex; align-items: center; min-width: 24px; min-height: 24px; font-size: var(--fs-micro); font-weight: 700; }
.svb-panel-foot { margin-top: var(--sp-4); }
.svb-foot-note { margin: var(--sp-2) 0 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-2); }
/* Current alerts' lead: the page's headline sentence, when the head carries the takeaway. */
.svb-now-rest { font-weight: 600; }
.svb-status-label { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-2); }

/* ---------------------------------------------------------------------------------------
   The sections under the workspace
   ------------------------------------------------------------------------------------- */

.svb-grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); gap: var(--sp-4); align-items: start; }
.svb-grid > .sv-section { min-width: 0; }
.svb-card { margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5); background: var(--briefing); border-radius: var(--radius-surface); }
.svb-card h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lede); font-weight: 800; letter-spacing: -0.02em; }
.svb-card p { margin: 0 0 var(--sp-3); max-width: 48ch; }
.svb-help { font-size: var(--fs-small); }
.svb-watches .svb-help { margin-top: var(--sp-4); }

.svb-reportperiod { margin: 0 0 var(--sp-3); max-width: 66ch; font-size: var(--fs-small); }
.svb-reportdays, .svb-reporthazards { margin: 0 var(--sp-4) var(--sp-2) 0; }
.svb-extremes { margin: 0 0 var(--sp-2); font-size: var(--fs-small); font-weight: 600; }
.svb-unknown { color: var(--ink-2); font-style: italic; }
.svb-unplaced { color: var(--ink-2); font-size: var(--fs-micro); }
.svb-reporttable { margin-top: var(--sp-3); }
.svb-reporttable > summary { font-weight: 600; }

.svb-recent { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-4); max-width: 66ch; background: var(--wash); border-radius: var(--radius-control); font-size: var(--fs-small); }
.svb-recent.sv-meta { padding: 0; background: transparent; }
.svb-statetable, .svb-alllist { margin-top: var(--sp-3); }
.svb-statetable > summary, .svb-alllist > summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; font-weight: 600; font-size: var(--fs-small); }
.svb-statetable[open] > summary, .svb-alllist[open] > summary { margin-bottom: var(--sp-2); }
.svb-alerts { list-style: none; margin: 0; padding: 0; max-width: 960px; }
.svb-subhead { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-subhead); font-weight: 800; }
.svb-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-4); }
.svb-pgroup-h { margin: 0 0 var(--sp-2); font-size: var(--fs-remarks); font-weight: 800; }
.svb-pchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.svb-pchips .choice { min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-3); border-radius: var(--radius-control); }
.svb-pgroup .svb-card-note { margin: 0; }
.svb-pstates { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.svb-pstates a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 700; }
.svb-card-note { font-size: var(--fs-small); color: var(--ink-2); }
.svb-elsewhere { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: var(--sp-4) 0 0; font-size: var(--fs-small); }
/* Its links sit beside a button, laid out as blocks: each a 24px target (WCAG 2.5.8). */
.svb-elsewhere a { display: inline-flex; align-items: center; min-height: 24px; }
.svb-safety { margin-top: var(--sp-8); }

/* The place's forecast office (SEV-05): its outlook and its discussion side by side where there
   is room, each in the office's own words. Supplementary, so it wears the cards' surface and no
   register of its own. */
/* The local weather timeline (SB-R10): NWS's ordinary forecast for a town, three periods in a row. */
.svb-timeline { margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--briefing); border-radius: var(--radius-surface); }
.svb-timeline h2 { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-1); font-size: var(--fs-lead); font-weight: 800; letter-spacing: -0.02em; }
.svb-timeline h2 .svb-ic { color: var(--link); }
.svb-tl-kind { margin: 0 0 var(--sp-3); max-width: 72ch; font-size: var(--fs-small); color: var(--ink-2); }
.svb-tl-alert { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); max-width: 72ch; border-inline-start: 4px solid var(--ink); background: var(--surface); font-weight: 700; }
.svb-tl-stale, .svb-tl-missing { margin: 0 0 var(--sp-3); max-width: 72ch; font-size: var(--fs-small); font-weight: 600; }
.svb-tl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; }
.svb-tl-period { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--sp-2) var(--sp-3); background: var(--surface); border-radius: var(--radius-control); font-size: var(--fs-small); }
.svb-tl-name { font-weight: 800; }
.svb-tl-sky { font-weight: 600; overflow-wrap: anywhere; }
.svb-tl-temp, .svb-tl-pop, .svb-tl-wind { color: var(--ink-2); }
.svb-tl-source { margin-top: var(--sp-3); font-size: var(--fs-small); }
.svb-tl-source > summary { cursor: pointer; min-height: 24px; width: max-content; color: var(--link); text-decoration: underline; font-weight: 600; }
.svb-tl-source p, .svb-tl-spans { margin: var(--sp-1) 0 0; max-width: 72ch; }
.svb-tl-spans { padding-left: var(--sp-4); }
.svb-tl-spans li + li { margin-top: var(--sp-1); }
.svb-tl-src { margin: var(--sp-3) 0 0; font-size: var(--fs-micro); color: var(--ink-2); }
/* On a phone the periods stack: each in three lines, not five, so the strip stays short. */
@media (max-width: 40rem) {
  .svb-tl-period { flex-direction: row; flex-wrap: wrap; column-gap: var(--sp-3); row-gap: 2px; }
  .svb-tl-sky { overflow-wrap: break-word; }
}
.svb-office { margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5); background: var(--briefing); border-radius: var(--radius-surface); }
.svb-office h2 { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-2); font-size: var(--fs-lead); font-weight: 800; letter-spacing: -0.02em; }
.svb-office h2 .svb-ic { color: var(--link); }
.svb-office-who { margin: 0 0 var(--sp-4); max-width: 72ch; font-size: var(--fs-small); }
.svb-office-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-4) var(--sp-6); }
.svb-office-part { min-width: 0; }
.svb-office-part h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-remarks); font-weight: 800; }
.svb-office-part h4 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-small); font-weight: 700; }
.svb-office-lead { font-weight: 400; }
.svb-office-part p { margin: 0 0 var(--sp-2); max-width: 66ch; overflow-wrap: anywhere; }
.svb-office-when { font-size: var(--fs-small); color: var(--ink-2); }
.svb-office-for { font-size: var(--fs-small); color: var(--ink-2); }
/* The discussion is the office's for its whole area (SB-R04): said in the same small ink as the outlook's zone line. */
.svb-office-scope { margin: 0 0 var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.svb-office-period p { font-size: var(--fs-small); }
.svb-office-whole { margin-top: var(--sp-2); }
.svb-office-whole > summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; font-weight: 600; font-size: var(--fs-small); }
.svb-office-whole .sv-product { max-width: 100%; }
.svb-office-src { margin: var(--sp-4) 0 0; font-size: var(--fs-micro); color: var(--ink-2); }
.svb-office .sv-go { display: inline-flex; align-items: center; min-height: 24px; }

.sv-group-n { margin-left: var(--sp-2); font-family: var(--font-mono); font-weight: 400; color: var(--muted); }
.sv-group { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding-bottom: var(--sp-1); border-bottom: 2px solid var(--ink); font-size: var(--fs-remarks); max-width: 960px; }
.sv-step {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.6em; height: 1.6em;
  border: 1.5px solid var(--ink); border-radius: 50%; font-size: var(--fs-small); font-weight: 700;
}
.sv-step--emergency { background: var(--ink); color: var(--paper); }
.sv-track { min-height: 44px; background: var(--ink); color: var(--paper); border-color: var(--ink); font-size: var(--fs-small); }
.sv-track:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
.sv-alerts { list-style: none; margin: 0; padding: 0; max-width: 960px; }
.sv-alert { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); scroll-margin-top: var(--sp-4); }
.sv-alert-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: 0; }
.sv-alert-where { font-weight: 700; }
/* An emergency's or a tornado on the ground's entry: NWS's colour across its head as on its card,
   the lead word first, and the places a step larger. In a list of seventeen a 12px tag had been the
   only thing that told it apart. */
.sv-alert--lead { margin: var(--sp-3) 0; padding: 0 0 var(--sp-3); border: 2px solid var(--ink); border-radius: var(--radius-surface); background: var(--surface); }
.sv-alert--lead > :not(.sv-card-strip) { margin-inline: var(--sp-4); }
.sv-alert--lead .sv-card-strip { margin-bottom: var(--sp-2); }
.sv-alert-place { margin: 0; font-size: var(--fs-lead); line-height: 1.3; }
/* An outbreak's urgent list, by state and kind: a heading that counts each group in its hazard's
   colour, three entries, the rest folded. The group, not each of its entries, carries the colour. */
.svb-group { margin: var(--sp-4) 0 0; max-width: 960px; }
.svb-group-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-lead); font-weight: 800; border-radius: var(--radius-control); }
.svb-group-where { font-weight: 800; }
.svb-group.sv-card--tornado-warning .svb-group-h { background: var(--hz-tornado-warning); color: var(--hz-tornado-warning-ink); }
.svb-group.sv-card--flash-flood-warning .svb-group-h { background: var(--hz-flash-flood-warning); color: var(--hz-flash-flood-warning-ink); }
.svb-group.sv-card--tsunami-warning .svb-group-h { background: var(--hz-tsunami-warning); color: var(--hz-tsunami-warning-ink); }
.svb-group.sv-card--extreme-wind-warning .svb-group-h { background: var(--hz-extreme-wind-warning); color: var(--hz-extreme-wind-warning-ink); }
.svb-group.sv-card--storm-surge-warning .svb-group-h { background: var(--hz-storm-surge-warning); color: var(--hz-storm-surge-warning-ink); }
.svb-group.sv-card--hurricane-warning .svb-group-h { background: var(--hz-hurricane-warning); color: var(--hz-hurricane-warning-ink); }
.svb-group.sv-card--typhoon-warning .svb-group-h { background: var(--hz-typhoon-warning); color: var(--hz-typhoon-warning-ink); }
.svb-group.sv-card--blizzard-warning .svb-group-h { background: var(--hz-blizzard-warning); color: var(--hz-blizzard-warning-ink); }
.svb-group.sv-card--snow-squall-warning .svb-group-h { background: var(--hz-snow-squall-warning); color: var(--hz-snow-squall-warning-ink); }
.svb-group.sv-card--ice-storm-warning .svb-group-h { background: var(--hz-ice-storm-warning); color: var(--hz-ice-storm-warning-ink); }
.svb-group.sv-card--winter-storm-warning .svb-group-h { background: var(--hz-winter-storm-warning); color: var(--hz-winter-storm-warning-ink); }
.svb-group.sv-card--lake-effect-snow-warning .svb-group-h { background: var(--hz-lake-effect-snow-warning); color: var(--hz-lake-effect-snow-warning-ink); }
.svb-group.sv-card--dust-storm-warning .svb-group-h { background: var(--hz-dust-storm-warning); color: var(--hz-dust-storm-warning-ink); }
.svb-group.sv-card--blowing-dust-warning .svb-group-h { background: var(--hz-blowing-dust-warning); color: var(--hz-blowing-dust-warning-ink); }
.svb-group.sv-card--high-wind-warning .svb-group-h { background: var(--hz-high-wind-warning); color: var(--hz-high-wind-warning-ink); }
.svb-group.sv-card--tropical-storm-warning .svb-group-h { background: var(--hz-tropical-storm-warning); color: var(--hz-tropical-storm-warning-ink); }
.svb-group.sv-card--ashfall-warning .svb-group-h { background: var(--hz-ashfall-warning); color: var(--hz-ashfall-warning-ink); }
.svb-group.sv-card--flood-warning .svb-group-h { background: var(--hz-flood-warning); color: var(--hz-flood-warning-ink); }
.svb-group.sv-card--coastal-flood-warning .svb-group-h { background: var(--hz-coastal-flood-warning); color: var(--hz-coastal-flood-warning-ink); }
.svb-group.sv-card--lakeshore-flood-warning .svb-group-h { background: var(--hz-lakeshore-flood-warning); color: var(--hz-lakeshore-flood-warning-ink); }
.svb-group.sv-card--high-surf-warning .svb-group-h { background: var(--hz-high-surf-warning); color: var(--hz-high-surf-warning-ink); }
.svb-group.sv-card--extreme-heat-warning .svb-group-h { background: var(--hz-extreme-heat-warning); color: var(--hz-extreme-heat-warning-ink); }
.svb-group.sv-card--extreme-cold-warning .svb-group-h { background: var(--hz-extreme-cold-warning); color: var(--hz-extreme-cold-warning-ink); }
.svb-group.sv-card--freeze-warning .svb-group-h { background: var(--hz-freeze-warning); color: var(--hz-freeze-warning-ink); }
.svb-group.sv-card--red-flag-warning .svb-group-h { background: var(--hz-red-flag-warning); color: var(--hz-red-flag-warning-ink); }
.svb-group > .sv-alerts, .svb-group-more { margin-inline: var(--sp-4); }
.svb-group-more { margin-block: var(--sp-2) 0; font-size: var(--fs-small); }
.svb-group-more > summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; font-weight: 600; }
.sv-alert-until { margin: var(--sp-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline; }
.sv-alert-until .sv-left { font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink-2); }
.sv-alert-meta { margin: var(--sp-1) 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.sv-alert-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-5); margin-top: var(--sp-1); font-size: var(--fs-small); }
.sv-fulltext { flex: 0 1 auto; }
.sv-fulltext[open] { flex-basis: 100%; order: 2; padding-bottom: var(--sp-2); }
.sv-fulltext-head { margin: var(--sp-2) 0; font-weight: 600; }
.sv-product {
  margin: var(--sp-2) 0 0; max-width: 80ch; padding: var(--sp-3); white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--fs-small); line-height: var(--lh-bulletin); background: var(--wash); border: 1px solid var(--line);
}
.sv-near { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); font-size: var(--fs-small); }
.sv-near h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-remarks); }
.sv-near ul { margin: 0; padding-left: var(--sp-5); }
.sv-near p { margin: var(--sp-1) 0 0; }
.sv-thumb { display: block; width: 96px; height: 64px; border: 1px solid var(--line); border-radius: var(--radius-preview); background: var(--graphic-wash); }

.sv-twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.sv-twocol h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-subhead); }

/* A table wraps its cells rather than scrolling sideways: a scrolling region would need a
   keyboard stop of its own (axe, scrollable-region-focusable, found at 200% zoom), and under
   720px the table becomes labelled records anyway. */
.sv-tablewrap { max-width: 100%; }
.sv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.sv-table th, .sv-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sv-table thead th { font-size: var(--fs-micro); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.sv-table tbody th a { font-weight: 700; }
.sv-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sv-table .sv-num { text-align: right; }
.sv-zero { color: var(--muted); }
.sv-table--reports td[data-label="Source and comments"] { min-width: 14ch; max-width: 64ch; overflow-wrap: anywhere; }

.sv-counts { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: var(--sp-3) 0; padding: 0; }
.sv-count { display: inline-flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); }
.sv-count strong { font-family: var(--font-mono); font-size: var(--fs-subhead); }
.sv-count-mark { font-size: var(--fs-small); -webkit-text-stroke: 0.5px var(--graphic-ink); }
.sv-count--tornado .sv-count-mark { color: var(--sv-report-tornado); }
.sv-count--wind .sv-count-mark { color: var(--sv-report-wind); }
.sv-count--hail .sv-count-mark { color: var(--sv-report-hail); }

/* The page's last word: what this is not, and where to go instead. At reading size, because it is
   the sentence telling a reader to act on a warning, not small print. */
.sv-safety {
  margin: var(--sp-8) 0 0; padding: var(--sp-4) var(--sp-5); max-width: 66ch;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-surface); font-size: var(--fs-remarks);
}

/* ---------------------------------------------------------------------------------------
   The Weather Hub mock-up's layout (2026-10-01)

   Every section the page carried is still here, word for word: what changed is how much of it is
   open at once. A calm page is one row of tools in the head, a slim Active now bar, the section
   links with the sources' clocks at their right, the map card beside its reading panel, a row of
   cards that open in place, and the warnings as a bar. A loud page keeps its own order (the
   cards, the place tools, the warnings first) and only borrows the cards. The page is not held to
   1400px: on a wide screen the map grows until it would no longer fit the screen's height, and
   the panel takes the rest, setting its facts in two columns.
   ------------------------------------------------------------------------------------- */

body[data-page="severe"] { --hub-width: none; }

/* The calm head: the title and its sentence at the left, the tools at the right, one row where
   there is room for one. */
body[data-page="severe"] .pagehead:not([data-sv-severity]) .shell-inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); }
body[data-page="severe"] .pagehead:not([data-sv-severity]) .pagehead-titles { flex: 1 1 380px; min-width: 0; }
body[data-page="severe"] .pagehead:not([data-sv-severity]) .pagehead-aux { width: auto; flex: 0 1 auto; justify-content: flex-end; }
.svb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-width: 0; max-width: 100%; }
.svb-tools > .svb-scopenotes, .svb-tools > .svb-scopenote, .svb-tools > .svb-near { flex: 1 1 100%; }
.svb-tools .svb-scope { flex: 0 1 auto; flex-wrap: nowrap; }
.svb-tools .svb-search { flex: 1 1 240px; min-width: 0; max-width: 380px; }

/* The location menu: a button named for the scope, opening over the page. */
.svb-where { position: relative; flex: none; }
.svb-where-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-3) 0 var(--sp-3);
  cursor: pointer; list-style: none; font-size: var(--fs-bulletin); font-weight: 700; color: var(--ink);
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control);
}
.svb-where-btn::-webkit-details-marker { display: none; }
.svb-where-btn::marker { content: ""; }
.svb-where-btn::after { content: "▾"; content: "▾" / ""; color: var(--ink-2); font-size: var(--fs-small); }
.svb-where-btn .svb-ic { color: var(--link); }
.svb-where[open] > .svb-where-btn { border-color: var(--ink); }
.svb-where-pop {
  position: absolute; top: calc(100% + var(--sp-1)); left: 0; z-index: 40; width: min(380px, calc(100vw - 2 * var(--hub-gutter)));
  display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-control);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 14%, transparent);
}
.svb-where-row { display: flex; gap: var(--sp-2); }
.svb-where-row .svb-select { flex: 1 1 auto; min-width: 0; }
.svb-where-pop .svb-locate { justify-self: start; }
.svb-where-pop .svb-scopeline { margin: 0; }
/* Saved places (SEV-05): this browser's list, each a link and a way to drop it. */
.svb-saved[hidden] { display: none; }
.svb-saved { display: grid; gap: var(--sp-2); }
.svb-saved .svb-scope-label { margin: 0; }
.svb-saved-list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.svb-saved-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 44px; }
.svb-saved-list a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.svb-saved-list a[aria-current="true"] { color: var(--ink); text-decoration: none; }
.svb-saved-remove { flex: none; min-height: 32px; padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.svb-saved-remove:hover { color: var(--ink); border-color: var(--ink-2); }
.svb-save { justify-self: start; }

/* Local | UTC as two words, the chosen one in ink and underlined; the zone named once the script
   knows it. Still buttons with aria-pressed. */
.svb-tz { border: 0; gap: 0; }
.svb-tz .seg-opt > span { background: transparent; color: var(--ink-2); border-right: 1px solid var(--line); padding-inline: var(--sp-2); font-size: var(--fs-bulletin); }
.svb-tz .seg-opt:last-child > span { border-right: 0; }
.svb-tz .seg-opt[aria-pressed="true"] > span { background: transparent; color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Active now as one slim bar on a page with no card: the accent's edge, or the most serious hazard
   in force's own colour, which the words beside it name. */
.svb-now--bar {
  padding: var(--sp-2) var(--sp-4); background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--sv-now-edge, var(--teal));
}
.svb-now--bar[data-sv-top="tornado-warning"] { --sv-now-edge: var(--hz-tornado-warning); }
.svb-now--bar[data-sv-top="severe-thunderstorm-warning"] { --sv-now-edge: var(--hz-severe-thunderstorm-warning); }
.svb-now--bar[data-sv-top="flash-flood-warning"] { --sv-now-edge: var(--hz-flash-flood-warning); }
.svb-now--bar[data-sv-top="tsunami-warning"] { --sv-now-edge: var(--hz-tsunami-warning); }
.svb-now--bar[data-sv-top="extreme-wind-warning"] { --sv-now-edge: var(--hz-extreme-wind-warning); }
.svb-now--bar[data-sv-top="storm-surge-warning"] { --sv-now-edge: var(--hz-storm-surge-warning); }
.svb-now--bar[data-sv-top="hurricane-warning"] { --sv-now-edge: var(--hz-hurricane-warning); }
.svb-now--bar[data-sv-top="typhoon-warning"] { --sv-now-edge: var(--hz-typhoon-warning); }
.svb-now--bar[data-sv-top="blizzard-warning"] { --sv-now-edge: var(--hz-blizzard-warning); }
.svb-now--bar[data-sv-top="snow-squall-warning"] { --sv-now-edge: var(--hz-snow-squall-warning); }
.svb-now--bar[data-sv-top="ice-storm-warning"] { --sv-now-edge: var(--hz-ice-storm-warning); }
.svb-now--bar[data-sv-top="winter-storm-warning"] { --sv-now-edge: var(--hz-winter-storm-warning); }
.svb-now--bar[data-sv-top="lake-effect-snow-warning"] { --sv-now-edge: var(--hz-lake-effect-snow-warning); }
.svb-now--bar[data-sv-top="dust-storm-warning"] { --sv-now-edge: var(--hz-dust-storm-warning); }
.svb-now--bar[data-sv-top="blowing-dust-warning"] { --sv-now-edge: var(--hz-blowing-dust-warning); }
.svb-now--bar[data-sv-top="high-wind-warning"] { --sv-now-edge: var(--hz-high-wind-warning); }
.svb-now--bar[data-sv-top="tropical-storm-warning"] { --sv-now-edge: var(--hz-tropical-storm-warning); }
.svb-now--bar[data-sv-top="ashfall-warning"] { --sv-now-edge: var(--hz-ashfall-warning); }
.svb-now--bar[data-sv-top="flood-warning"] { --sv-now-edge: var(--hz-flood-warning); }
.svb-now--bar[data-sv-top="coastal-flood-warning"] { --sv-now-edge: var(--hz-coastal-flood-warning); }
.svb-now--bar[data-sv-top="lakeshore-flood-warning"] { --sv-now-edge: var(--hz-lakeshore-flood-warning); }
.svb-now--bar[data-sv-top="high-surf-warning"] { --sv-now-edge: var(--hz-high-surf-warning); }
.svb-now--bar[data-sv-top="extreme-heat-warning"] { --sv-now-edge: var(--hz-extreme-heat-warning); }
.svb-now--bar[data-sv-top="extreme-cold-warning"] { --sv-now-edge: var(--hz-extreme-cold-warning); }
.svb-now--bar[data-sv-top="freeze-warning"] { --sv-now-edge: var(--hz-freeze-warning); }
.svb-now--bar[data-sv-top="red-flag-warning"] { --sv-now-edge: var(--hz-red-flag-warning); }
.svb-now--bar .svb-now-title { color: var(--teal); font-size: var(--fs-small); font-weight: 800; }
.svb-now--bar .svb-now-line { font-size: var(--fs-remarks); }
.svb-now--bar .svb-now-open { margin-left: auto; min-height: 40px; }
.svb-now--bar .svb-now-open::after { content: "\00a0→"; content: "\00a0→" / ""; }
.svb-now--bar .svb-now-note { margin-top: var(--sp-1); }
/* Nothing in force at the scope (SB-R06): one quiet line, no edge of colour and no button. */
.svb-now--quiet { padding: var(--sp-2) 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.svb-now--quiet .svb-now-row { row-gap: 0; }
.svb .svb-now--quiet { margin-top: var(--sp-3); }
.svb-now--quiet + .svb-work { margin-top: var(--sp-4); }
.svb-now--quiet .svb-now-line { font-weight: 600; }
.svb-now--quiet .svb-now-open { min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
a.svb-now-count { text-decoration: none; }
a.svb-now-count:hover .sv-hz { text-decoration: underline; }

/* The sources' clocks, at the right of a calm page under Current alerts. */
/* The sources' clocks in Current alerts' row (SB-R09): a line of their own inside it, small. */
.svb-now-sources { flex: 1 1 100%; min-width: 0; }
.svb-now-sources .svb-feeds { color: var(--ink-2); }
.svb-sourcesrow > .svb-feeds { flex: 0 1 auto; justify-content: flex-end; padding-block: var(--sp-1); }
.svb-sourcesrow > .svb-feeds:has(.svb-feeds-more[open]) { flex-basis: 100%; justify-content: flex-start; }

/* The tracker's tab when the location's list is loud (2026-10-06): NWS's colour with the lead
   warning named in words beside the count, so it never reads like a calm count. A held list keeps
   the colour behind a hatch, as a held strip does. */
.sectionnav .sv-navnote.sv-navnote--loud { background: var(--sv-edge); color: var(--sv-edge-ink); }
.sectionnav .sv-navnote.sv-navnote--loud[data-sv-held] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--sv-edge); }

/* The alarm under the tabs on Reports, Rain & rivers and Analysis (2026-10-06): one line in the
   hazard's colour, the hazard named first, and the way to the warning's card. */
.sv-alarm { background: var(--sv-edge); color: var(--sv-edge-ink); }
.sv-alarm[data-sv-held] { background: var(--surface); color: var(--ink); border-block: var(--sp-1) solid var(--sv-edge); }
.sv-alarm-inner { max-width: var(--hub-width); width: calc(100% - 2 * var(--hub-gutter)); margin: 0 auto; padding-block: var(--sp-2); font-size: var(--fs-bulletin); line-height: 1.4; }
.sv-alarm-inner strong { font-weight: 800; }
.sv-alarm-go { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sv-alarm-go::after { content: "\00a0→"; content: "\00a0→" / ""; }

/* A warning beside a place, not at it (2026-10-06): where it is, before NWS's instruction. */
.svb-lead-away, .sv-alert-beside { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-control); background: var(--wash); color: var(--ink); font-weight: 600; }

/* The section's tabs on a phone (2026-10-06): one row that scrolls sideways, not three rows that
   pushed NWS's instruction under the fold. The loud pill keeps the hazard's name and drops the
   count to the tracker, where it is shown; a screen reader still hears it. */
@media (max-width: 640px) {
  nav[data-sv-sectionnav] { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  nav[data-sv-sectionnav] .shell-inner { flex-wrap: nowrap; gap: 0; width: max-content; min-width: calc(100% - 36px); margin-inline: 18px; }
  nav[data-sv-sectionnav] a { flex: none; white-space: nowrap; }
  nav[data-sv-sectionnav] .sv-navnote--loud .sv-navnote-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* What the last list held, while the feed is down (2026-10-06): NWS's colours are kept (decision
   11), and the held state is drawn over them, never by changing them. A strip or a chip carries a
   dashed rule inside its edge; a polygon is dashed and lighter, so a held map does not read as now. */
:is(.sv-alert--held, .svl-item.is-held) :is(.sv-card-strip, .sv-hz) { outline: 2px dashed currentColor; outline-offset: -4px; }
html[data-status-withheld] body[data-page^="severe"] .sv-warning { fill-opacity: 0.4; stroke-dasharray: 4 3; }
html[data-status-withheld] body[data-page^="severe"] .sv-warning-halo { stroke-opacity: 0.25; }

/* The Live tracker's count as a badge in the section row. */
.sectionnav .sv-navnote { display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--sp-2); border-radius: 999px; background: var(--wash); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700; }

/* The map card: its controls, its title, the map, its key, caption and list in words. */
.svb-mapcard { min-width: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.svb-mapcard .svb-controls { display: grid; gap: var(--sp-2); }
.svb-controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.svb-controls-row .svb-sourcenote { margin-left: auto; }
/* Each group one joined control: the chips share their edges, rounded at the group's ends. */
.svb-mapcard .choicebar { gap: 0; }
.svb-mapcard .choicebar .choice { border-radius: 0; margin-inline-start: -1px; }
.svb-mapcard .choicebar .choice:first-child { margin-inline-start: 0; border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); }
.svb-mapcard .choicebar .choice:last-child { border-start-end-radius: var(--radius-control); border-end-end-radius: var(--radius-control); }
.svb-mapcard .choicebar .choice[aria-current="page"] { position: relative; z-index: 1; }
.svb-maptitle { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-remarks); font-weight: 800; letter-spacing: -0.01em; }
/* The map's title, with the layers and the source beside it (SB-R03): one row while it fits, the
   tools under the title when it does not. */
.svb-maphead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0 var(--sp-2); }
.svb-maphead .svb-maptitle { flex: 1 1 18rem; min-width: 0; margin: 0; }
.svb-maptools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; max-width: 100%; }
.svb-maptools .svb-layers { margin-left: 0; }
/* Current layers drawn over a period that is not now (SEV-02): said above the map, by a 2px ink
   frame and its bold lead rather than by colour, so it reads the same in both themes and forced colours. */
.svb-nowlabel { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 2px solid var(--ink); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: var(--fs-remarks); line-height: 1.45; }
.svb-mapcard .svb-mapfig { margin: 0; }
.svb-mapcard .svb-mapframe { container-type: inline-size; }
.svb-mapcard .sv-maplist { margin-top: var(--sp-2); }

/* The map's places: cities with a dot, state codes and the water, under every hazard. */
.svb-label { font-family: var(--font-body); fill: var(--graphic-ink); stroke: var(--graphic-paper); stroke-width: 3; stroke-linejoin: round; paint-order: stroke; vector-effect: non-scaling-stroke; pointer-events: none; }
.svb-label--city { font-weight: 600; }
.svb-label--state { fill: var(--graphic-muted); font-weight: 700; letter-spacing: 0.06em; }
.svb-label--water { fill: var(--graphic-muted); font-style: italic; letter-spacing: 0.08em; stroke: none; }
.svb-city-dot { fill: var(--graphic-ink); stroke: var(--graphic-paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* A map under 640px across has no room for them: the key and the list name what is drawn. */
@container (max-width: 640px) { .svb-labels { display: none; } }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] .svb-label { fill: var(--graphic-paper); stroke: var(--graphic-ocean-base); }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] :is(.svb-label--state, .svb-label--water) { fill: color-mix(in srgb, var(--graphic-paper) 72%, var(--graphic-ocean-base)); }
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) body[data-page="severe"] .svb-city-dot { fill: var(--graphic-paper); stroke: var(--graphic-ocean-base); }

/* The reading panel beside the map: icons by its four facts, a rule between them, the threats as
   tiles, the maximum as a badge in the agency's own colour. */
.svb-panel { container-type: inline-size; }
.svb-ic { flex: none; width: 20px; height: 20px; }
.svb-fact dt { display: flex; align-items: center; gap: var(--sp-2); }
.svb-fact dt .svb-ic { color: var(--link); }
.svb-facts { border-top-width: 1px; }
.svb-facts .svb-fact + .svb-fact { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.svb-threats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--sp-2) var(--sp-3); }
.svb-threats li + li { margin-top: 0; }
.svb-threat { display: flex; align-items: flex-start; gap: var(--sp-2); }
.svb-threat .svb-ic { color: var(--ink-2); margin-top: 1px; }
.svb-status-label { display: flex; align-items: center; gap: var(--sp-2); }
.svb-status .freshness { display: block; margin: 0; line-height: 1.5; }
/* The panel's sources (SB-R08): what is not current in view, the rest one click away. */
details.svb-sources { display: block; }
details.svb-sources > summary { cursor: pointer; min-height: 24px; list-style: none; }
details.svb-sources > summary::-webkit-details-marker { display: none; }
details.svb-sources > summary::after { content: "▸"; margin-inline-start: var(--sp-1); }
details.svb-sources[open] > summary::after { content: "▾"; }
details.svb-sources[open] > summary { margin-bottom: var(--sp-1); }
.svb-status--flagged + details.svb-sources { margin-top: var(--sp-2); padding-top: 0; border-top: 0; }
.svb-cat--badge { position: relative; isolation: isolate; display: inline-flex; align-items: center; padding: 2px var(--sp-3); border: 1px solid var(--graphic-ink); border-radius: var(--radius-control); }
.svb-cat-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: calc(var(--radius-control) - 1px); }
.svb-cat--on-dark .svb-cat-text { color: var(--graphic-ink); }
.svb-cat--on-light .svb-cat-text { color: var(--graphic-paper); }
/* A wide panel sets its facts in two columns rather than lines 120 characters long. */
@container (min-width: 700px) {
  .svb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
  .svb-facts .svb-fact:nth-child(2) { padding-top: 0; border-top: 0; }
}

/* The cards under the map, each opening in place across the whole row; and the warnings bar. */
.svb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-auto-flow: row dense; gap: var(--sp-4); align-items: start; margin-top: var(--sp-5); }
.svb-cards > .svb-xcard[open] { grid-column: 1 / -1; }
.svb-xcard, .svb-xbar, .svb-cards > .svb-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); scroll-margin-top: var(--sp-4); }
.svb-xbar { margin-top: var(--sp-4); }
.svb-xsum {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3); row-gap: var(--sp-1);
  padding: var(--sp-4); cursor: pointer; list-style: none; border-radius: var(--radius-surface);
}
.svb-xsum::-webkit-details-marker { display: none; }
.svb-xsum::marker { content: ""; }
.svb-xsum > .svb-ic:first-child { color: var(--link); }
.svb-xsum > .svb-ic:last-child { grid-column: 3; grid-row: 1; color: var(--ink-2); transition: transform var(--dur) var(--ease); }
details[open] > .svb-xsum > .svb-ic:last-child { transform: rotate(90deg); }
.svb-xtitle { margin: 0; font-size: var(--fs-lead); font-weight: 800; letter-spacing: -0.01em; }
.svb-xline { grid-column: 2 / -1; font-size: var(--fs-remarks); color: var(--ink); }
.svb-xmore { grid-column: 2 / -1; margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: 700; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.svb-xmore::after { content: "\00a0→"; content: "\00a0→" / ""; }
details[open] > .svb-xsum > .svb-xmore { display: none; }
.svb-xsum:hover .svb-xtitle { text-decoration: underline; }
.svb-xbody { padding: var(--sp-4); border-top: 1px solid var(--line); min-width: 0; }
.svb-xbody > .sv-sectionhead { margin-bottom: var(--sp-3); }
/* The warnings bar: one line, the count beside the title. */
.svb-xbar > .svb-xsum { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.svb-xbar > .svb-xsum > .svb-xline { grid-column: 3; grid-row: 1; color: var(--ink-2); }
.svb-xbar > .svb-xsum > .svb-ic:last-child { grid-column: 4; }
/* The other agency's card, sized as its neighbours. */
.svb-cards > .svb-card { padding: var(--sp-4); }
.svb-cards > .svb-card h2 { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-2); font-size: var(--fs-lead); }
.svb-cards > .svb-card h2 .svb-ic { color: var(--link); }
.svb-cards > .svb-card p { max-width: none; }
/* Watches and discussions as a preview (SB-R06): its lines, the first few by name, the tracker's lists. */
.svb-watches .svb-xline { margin: 0 0 var(--sp-1); }
.svb-plist { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); font-size: var(--fs-small); line-height: 1.45; }
.svb-plist li + li { margin-top: var(--sp-1); }
.svb-cards > .svb-card .svb-elsewhere { margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }

/* A scope's other warnings, one line each (SB-R06): kind, where, until when, and the tracker's entry. */
.svb-wrows { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: var(--sp-2); }
.svb-wrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-small); line-height: 1.45; }
.svb-wrow .sv-hz { font-size: var(--fs-micro); }
.svb-wrow-where { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.svb-wrow-until { color: var(--ink-2); }
.svb-instate { font-size: var(--fs-small); }
.svb-wrows-all { margin: 0 0 var(--sp-3); }

/* A quiet day's one context row (SB-R09): what was checked and found empty, and the tracker. */
.svb-context { margin-top: var(--sp-4); padding: var(--sp-2) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); }
.svb-context p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.svb-context #sv-watches, .svb-context #sv-warnings { scroll-margin-top: var(--sp-4); }

/* The last word as the page's foot: the full sentence, at the width of the page. */
.svb-safety { max-width: none; margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); }

/* A narrow phone: the place menu its own row, the search and its button the next. */
@media (max-width: 480px) {
  .svb-tools .svb-scope { flex-wrap: wrap; }
  .svb-tools .svb-where { flex: 1 1 100%; }
  .svb-tools .svb-where-btn { width: 100%; }
  .svb-tools .svb-where-btn::after { margin-inline-start: auto; }
  .svb-tools .svb-search { flex: 1 1 0; min-width: 0; }
}
/* A wide screen: the map as wide as the screen's height lets it be whole, between 62% and 68% of the row, the panel the rest. */
@media (min-width: 1500px) {
  .svb-stage { grid-template-columns: minmax(0, clamp(62%, calc((100svh - 330px) * 1.567 + 34px), 68%)) minmax(360px, 1fr); }
}
@media (max-width: 1100px) {
  body[data-page="severe"] .pagehead:not([data-sv-severity]) .pagehead-aux { justify-content: flex-start; }
}
@media (max-width: 719px) {
  .svb-tools .svb-scope { flex: 1 1 100%; }
  .svb-mapcard { padding: var(--sp-3); }
  .svb-xsum, .svb-xbody { padding: var(--sp-3); }
  .svb-xbar > .svb-xsum { grid-template-columns: auto minmax(0, 1fr) auto; }
  .svb-xbar > .svb-xsum > .svb-xline { grid-column: 2 / -1; grid-row: 2; }
  .svb-xbar > .svb-xsum > .svb-ic:last-child { grid-column: 3; }
}
@media (forced-colors: active) {
  .svb-now--bar { border-inline-start-color: CanvasText; }
  .svb-cat--badge { forced-color-adjust: none; }
}

/* ---------------------------------------------------------------------------------------
   Widths
   ------------------------------------------------------------------------------------- */

/* Headings keep their order at every width. --fs-lede shrinks with the viewport and the headings
   under it do not, so between a phone and 1100px a section's h3 was set larger than its h2. Below
   1100px each level steps down together, and the stage and the grid go to one column. */
@media (max-width: 1100px) {
  .sv-sectionhead h2, .svb-card h2 { font-size: var(--fs-section); }
  /* The card's text and its closer view side by side, NWS's instruction under both. */
  .svb-lead--map { grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: "strip strip" "head fig" "more fig" "says says"; grid-template-rows: auto auto 1fr auto; }
  .svb-lead--map .sv-says { margin: 0 var(--sp-4) var(--sp-4); }
  .svb-lead--map .svb-lead-fig { margin-right: var(--sp-4); }
  .sv-twocol h3 { font-size: var(--fs-lead); }
  .svb-stage, .svb-grid { grid-template-columns: minmax(0, 1fr); }
  .svb-card { margin-top: var(--sp-6); }
  .svb-layers { margin-left: 0; }
}
@media (max-width: 900px) {
  .sv-twocol { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .svb-lead:not(.svb-lead--map) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "strip" "head" "says" "more"; grid-template-rows: auto; }
  .svb-lead:not(.svb-lead--map) .sv-says { margin: var(--sp-3) var(--sp-4) 0; }
}
@media (max-width: 640px) {
  .sv-wrap { width: calc(100% - 36px); }
}
@media (max-width: 719px) {
  body[data-page="severe"] .pagehead-sub { font-size: var(--fs-remarks); }
  .svb-scope { flex: 1 1 100%; }
  .svb-search { max-width: none; }
  .svb-now { padding: var(--sp-3) var(--sp-4); }
  .svb-now-open { flex: 1 1 100%; }
  /* The calm bar's tracker link sits at the start of its line, as text does, not centred alone (2026-10-06). */
  .svb-now--quiet .svb-now-open { flex: 0 1 auto; justify-content: flex-start; }
  /* A loud page on a phone (2026-10-06): the cards name themselves, so "Current alerts" is said to a
     screen reader only, and the end and its countdown share a line, so NWS's instruction rises. */
  .svb-now--lead .svb-now-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .svb-now--lead { padding-top: var(--sp-2); }
  .svb-lead .sv-card-until { font-size: var(--fs-remarks); }
  /* The sources' clock keeps its attribution on its own line, without a separator left at its start. */
  .svb-now-sources .svb-feeds > .freshness { flex-wrap: wrap; column-gap: var(--sp-1); }
  .svb-now-sources .svb-feeds > .freshness .sv-publisher { flex-basis: 100%; padding-inline-start: calc(1.1em + var(--sp-2)); }
  .svb-now-sources .svb-feeds > .freshness .sv-publisher .sv-sep { display: none; }
  /* On a phone the card is one column, in the order a reader in the warning acts on: the place,
     the end, NWS's instruction, then the tags and links, then the closer view. */
  .svb-lead, .svb-lead--map { grid-template-columns: minmax(0, 1fr); grid-template-areas: "strip" "head" "says" "more" "fig"; grid-template-rows: auto; }
  .svb-lead-head { padding: var(--sp-3) var(--sp-3) 0; }
  .svb-lead-more { padding: 0 var(--sp-3) var(--sp-3); }
  .svb-lead .sv-says, .svb-lead--map .sv-says { margin: var(--sp-3) var(--sp-3) 0; }
  .svb-lead--map .svb-lead-fig { width: min(100% - 2 * var(--sp-3), 240px); margin: 0 var(--sp-3) var(--sp-3); }
  .sv-card-strip { padding-inline: var(--sp-3); }
  body[data-page="severe"] .pagehead[data-sv-severity] .pagehead-title { font-size: var(--fs-section); }
  /* A loud head on a phone: less air, and the alerts clock without its attribution, which every
     card and the warnings' own clock carry ("What NWS says to do · Data: NOAA/NWS"). */
  body[data-page="severe"] .pagehead[data-sv-severity] .shell-inner { padding-block: var(--sp-4) var(--sp-3); gap: var(--sp-2); }
  body[data-page="severe"] .pagehead[data-sv-severity] .svb-feeds > .freshness .sv-publisher { display: none; }
  .svb-group-h { padding-inline: var(--sp-3); }
  .svb-group > .sv-alerts, .svb-group-more { margin-inline: 0; }
  .svb-scopebar { padding: var(--sp-3) var(--sp-4); }
  .sv-alert--lead > :not(.sv-card-strip) { margin-inline: var(--sp-3); }
  .sv-card-strip { padding-inline: var(--sp-3); }
  .svb-panel { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .sv-sectionhead h2, .svb-card h2 { font-size: var(--fs-subhead); }
  .sv-twocol h3 { font-size: var(--fs-remarks); font-weight: 800; }
  .svb-mapctl .btn { min-width: 44px; padding: 0 var(--sp-2); }
  /* Tables become labelled records: every cell restates its column. */
  .sv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sv-table, .sv-table tbody, .sv-table tr, .sv-table th, .sv-table td { display: block; width: 100%; }
  .sv-table tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
  .sv-table th, .sv-table td { padding: 2px 0; border: 0; text-align: left; }
  .sv-table .sv-num { text-align: left; }
  /* A record's comment takes the row's width; a minimum of 24ch is for a column, and at 200% text it ran past a phone. */
  .sv-table--reports td[data-label="Source and comments"] { min-width: 0; }
  .sv-table td::before { content: attr(data-label); display: block; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-2); }
}
/* On a narrow phone the strip is the lead word alone, on one line: "Tornado emergency · Tornado /
   Warning / 1 h 24 min left" had been three lines and 99px, cut by the fold. */
@media (max-width: 479px) {
  .sv-card-strip .sv-card-event { display: none; }
}
/* A screen 480px tall or shorter (a phone at 200% zoom, a landscape phone) keeps the masthead at
   the top of the page, as the homepage does (HB-25): sticky, it covered 46% of the view. */
@media (max-height: 480px) {
  body[data-page="severe"] .masthead { position: static; }
  html:has(body[data-page="severe"]) { scroll-padding-top: var(--sp-3); }
}
@media (pointer: coarse) {
  .svb-states > summary, .svb-change-basis > summary, .svb-tl-source > summary, .svb-scale > summary, details.svb-sources > summary, .svb-now--quiet .svb-now-open, .svb-plist a, .svb-wrow .sv-go,
  .sv-go, .sv-textlink, .sv-maplist summary, .sv-reports summary, .sv-fulltext summary, .svb-feeds-more > summary, .svb-discussion > summary, .svb-help > summary, .svb-statetable > summary, .svb-alllist > summary,
  a.svb-now-count, .svb-prepare-src, .svb-pstates a, .svb-group-more > summary { min-height: 44px; }
  a.svb-now-count, .svb-pstates a { display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sv *, .sv *::before, .sv *::after { transition: none; animation: none; scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .sv-hz, .sv-tag, .sv-sw, .svb-sw--point { border: 1px solid CanvasText; forced-color-adjust: none; }
  .svb-hatch-line { stroke: CanvasText; }
  .sv-notice { border: 2px solid CanvasText; }
  .svb-nowlabel { border-color: CanvasText; }
  .sv-card-strip { forced-color-adjust: none; border-bottom: 2px solid CanvasText; }
  .svb-tz .seg-opt[aria-pressed="true"] > span { outline: 2px solid Highlight; }
  body[data-page="severe"] .pagehead[data-sv-severity] { border-top-color: CanvasText; }
  .choicebar .choice[aria-current="page"], .svb-suggest a[aria-selected="true"] { outline: 2px solid Highlight; }
}