/* MaverickWX — Severe weather, the Live tracker (/severe/live, SV-6; the monitoring workspace
   of 2026-09-29).

   The dark map room as an application: a compact toolbar, the ranked list in a column of its
   own, the map filling the rest, a warning's details on a panel beside or over the map, and
   SPC's context folded under it. Loaded after severe.css, whose hazard chips, tags, notices and
   freshness lines it shares, and after MapLibre's sheet, whose controls it restyles.

   ## Two grounds

   The page follows the saved theme and is dark unless the reader chose light, as /radar.html is
   (`<html data-dark>`). The map is dark in both themes, because radar needs a dark ground, so
   the map room has colours of its own, declared below as `--sv-room-*`. They are the radar
   workspace's own (radar.css) and never a page surface. Every panel over the map uses them, so
   its contrast is the same in either theme.

   ## Casing

   A warning is drawn over whatever the radar shows there, which can be any colour of the
   reflectivity ramp, and the tornado red is the ramp's 55 dBZ red. So every warning outline is
   cased twice, dark outside and light inside: whichever ground it lands on, one of the two keeps
   3:1 against it (WCAG 2.2, 1.4.11). `worker/test/severe/live-contrast.test.ts` measures that
   against the room's ground, every step of the ramp in radar-feeds.json and every SPC category
   colour, reading the values from this file. Hazard colours stay `--hz-*` in severe.css, the one
   table held to hazards.ts, and are never redeclared here. A row's accent stripe is the same
   colour, and never the only signal: the chip names the hazard in words beside it.

   ## Layout

   Above 900px, on a screen tall enough, the room fills the viewport under the bars, as a grid:
   the list (its head fixed, its results scrolling), the map, and, from 1360px, the details
   panel docked as a third column; narrower than that the panel is a drawer over the map's
   right, and the map's own controls move out from under it. SPC's row and the foot span the
   bottom. The height comes from a flex column on the page itself rather than from shell.js's
   measured offsets, so it holds without script and when a notice changes the bars' height.
   Narrower or shorter, the page scrolls as one: the map first, as the design shows it on a
   phone, then the list, then SPC; the details panel is a sheet over the foot of the screen,
   with its Close at the top. The list stays first in the document, so a keyboard reaches it
   first; "Skip to the map" is the second skip link.

   ## A map short enough to lose the country

   The layer panel over the map's top and the key over its foot are fitted around, so the
   warnings are never under either. On a map under 560px tall the two together left too little
   to fit the country, and the map zoomed out to the whole world. There the panel folds behind
   "Layers" and the key behind "Key", and severe-live.mjs never lets the panels take more than
   half the map's height. */

:root {
  /* The room: radar.css's dark canvas and the design's panels over it. */
  --sv-room-ground: #0b1520;
  --sv-room-land: #18222d;
  --sv-room-coast: #3f5163;
  --sv-room-border: #5b6b7c;
  --sv-room-panel: #101e2d;
  --sv-room-edge: #385368;
  --sv-room-ink: #f1f7fc;
  --sv-room-ink-2: #b5c9db;
  --sv-room-link: #8abcff;
  --sv-room-dim: #050b12;
  /* A discussion's outline: SPC gives it no colour, so it is neutral, light on the dark room. */
  --sv-room-md: #dce8f3;
  /* The two casings every warning outline carries, inner and outer by the hazard's colour
     (casingsFor() in severe-common.mjs); the state and county lines are drawn in them too. */
  --sv-casing-dark: #0b1520;
  --sv-casing-light: #f1f7fc;
  /* Storm reports in SPC's own colours: tornado red, wind blue, hail green. */
  --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;
  /* The workspace's own measures: the list column and the details panel. Supporting text is
     set at the bulletin step rather than small, so a row's second line is read, not squinted at. */
  --svl-list-w: minmax(340px, 384px);
  --svl-drawer-w: 372px;
}

/* ---------------------------------------------------------------------------------------
   The page frame and the toolbar
   ------------------------------------------------------------------------------------- */

.sv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

body[data-page="severe-live"] .sectionnav .shell-inner { max-width: none; width: 100%; padding-inline: var(--gutter); }
body[data-page="severe-live"] .pagehead { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
body[data-page="severe-live"] .pagehead .shell-inner {
  max-width: none; width: 100%; padding: var(--sp-2) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
.svl-h1 { margin: 0 var(--sp-1) 0 0; font-size: var(--fs-subhead); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.svl-choose { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.svl-choose select {
  min-height: 40px; max-width: 100%; min-width: 9.5rem; padding: 0 var(--sp-2);
  background: var(--surface); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--radius-control); font: inherit;
}
.svl-show, .svl-near { min-height: 40px; }
/* The hazard chips: links, so the current one is `aria-current`, painted as a pressed chip. A
   count is always printed, zero included, so an empty hazard is known to be empty. */
.svl-filter, .svl-views { gap: var(--sp-1); }
/* The hazards with nothing in force, one control until asked for (2026-10-06). */
.svl-filter-more { display: contents; }
.svl-filter-more > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 10px; border: 1px dashed var(--edge); border-radius: var(--radius-control); color: var(--ink-2); font-size: var(--fs-small); font-weight: 650; cursor: pointer; list-style: none; }
.svl-filter-more > summary::-webkit-details-marker { display: none; }
.svl-filter-more[open] > summary { border-style: solid; color: var(--ink); }
.svl-filter-none { font-weight: 500; }
.svl-filter-folded { display: flex; flex-wrap: wrap; gap: var(--sp-1); flex-basis: 100%; }
.svl-filter .choice, .svl-views .choice { min-height: 40px; display: inline-flex; align-items: center; gap: var(--sp-1); padding: 6px 10px; border-radius: var(--radius-control); }
.svl-filter .choice .choice-n, .svl-views .choice .choice-n { margin-left: var(--sp-1); }
.svl-filter .choice[aria-current="page"], .svl-views .choice[aria-current="page"] { background: var(--enamel); border-color: var(--enamel); color: var(--on-enamel); }
.svl-filter .choice[aria-current="page"] .choice-n, .svl-views .choice[aria-current="page"] .choice-n { color: var(--on-enamel); }
/* The tracker's three lists (SEV-04): a quieter row than the hazard chips, which filter one of them. */
.svl-views .choice { font-weight: 700; }
/* The status control: the alerts clock as a line, its details in a card that opens under it. */
.svl-status { margin-left: auto; position: relative; }
.svl-status-summary {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px; padding: 0 var(--sp-1);
  cursor: pointer; list-style: none; border-radius: var(--radius-control); font-size: var(--fs-bulletin);
}
.svl-status-summary::-webkit-details-marker { display: none; }
.svl-status-summary:hover { background: var(--wash); }
.svl-status-line { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-bulletin); }
.svl-status-line .freshness-dot { display: inline-block; }
.svl-status-more {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 1px solid var(--edge); border-radius: 50%; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700; color: var(--ink-2);
}
.svl-status-body {
  position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: 30; width: min(30rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--sv-room-dim) 30%, transparent); display: grid; gap: var(--sp-2);
}
.svl-status-scope { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.svl-clocks { display: grid; gap: var(--sp-1); }
.svl-clocks .freshness { margin: 0; display: block; font-size: var(--fs-small); }
.svl-clocks .freshness-dot { display: inline-block; }
.sv-refresh-failed { font-weight: 700; }

/* ---------------------------------------------------------------------------------------
   The room
   ------------------------------------------------------------------------------------- */

.svl-room { display: flex; flex-direction: column; }
.svl-list { min-width: 0; background: var(--paper); display: flex; flex-direction: column; }
.svl-list:focus { outline: none; }
.svl-stage { display: flex; flex-direction: column; min-width: 0; background: var(--sv-room-ground); color: var(--sv-room-ink); }
/* The room is dark in both themes, so the page's token roles are the dark theme's inside it: a
   freshness line or a link in SPC's row reads the same on a light page as on a dark one. */
.svl-stage, .svl-side {
  color-scheme: dark;
  --paper: var(--sv-room-panel); --surface: var(--sv-room-panel); --ink: var(--sv-room-ink); --ink-2: var(--sv-room-ink-2);
  --muted: var(--sv-room-ink-2); --line: var(--sv-room-edge); --edge: var(--sv-room-ink-2); --link: var(--sv-room-link);
  --enamel: var(--sv-room-link); --teal: var(--sv-room-link); --wash: color-mix(in srgb, var(--sv-room-ink) 8%, transparent);
}
.svl-stage:focus { outline: none; }
.svl-side { display: flex; flex-direction: column; min-width: 0; background: var(--sv-room-panel); }

@media (min-width: 901px) and (min-height: 600px) {
  body[data-page="severe-live"] { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  body[data-page="severe-live"] > .masthead,
  body[data-page="severe-live"] > .sectionnav,
  body[data-page="severe-live"] > .pagehead { flex: none; }
  body[data-page="severe-live"] > footer { display: none; }
  .svl-room {
    flex: 1 1 auto; min-height: 0; display: grid;
    grid-template-columns: var(--svl-list-w) minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
  }
  .svl-list { grid-column: 1; grid-row: 1; min-height: 0; border-right: 1px solid var(--line); }
  .svl-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .svl-stage { grid-column: 2; grid-row: 1; min-height: 0; overflow: hidden; }
  .svl-drawer { grid-column: 3; grid-row: 1; width: var(--svl-drawer-w); min-height: 0; border-left: 1px solid var(--line); }
  .svl-side { grid-column: 1 / -1; grid-row: 2; min-height: 0; }
  .svl-mapbox { flex: 1 1 auto; min-height: 240px; }
  .svl-spc-body { max-height: 34vh; overflow-y: auto; }
}
/* Between a wide desktop and a tablet there is no room for three useful columns: the panel is a
   drawer over the map's right, and the map's own controls move out from under it. */
@media (min-width: 901px) and (max-width: 1359px) and (min-height: 600px) {
  .svl-room { grid-template-columns: var(--svl-list-w) minmax(0, 1fr); --svl-drawer-w: min(384px, 55%); }
  .svl-drawer { grid-column: 2; grid-row: 1; justify-self: end; z-index: 4; box-shadow: -8px 0 24px color-mix(in srgb, var(--sv-room-dim) 35%, transparent); }
  [data-sv-open] .svl-canvas .maplibregl-ctrl-top-right,
  [data-sv-open] .svl-canvas .maplibregl-ctrl-bottom-right { right: var(--svl-drawer-w); }
}

@media (max-width: 900px), (max-height: 599px) {
  /* The map, then the details panel when one is open, then the list, then SPC: only the map
     and the chosen warning move ahead of the list. The map's key folds behind a button, so the
     design's 430px is the map the reader gets, and the first warning starts on the first screen
     of a phone. The panel is its own view in the page's flow, Close at its top: nothing lies
     over the map or the list, and the script brings it into view when a row is chosen. It is
     not modal: Escape closes it. */
  .svl-stage { order: -2; }
  .svl-drawer { order: -1; border-top: 2px solid var(--edge); border-bottom: 1px solid var(--line); }
  .svl-drawer-body { overflow: visible; }
  .svl-side { order: 1; }
  .svl-mapbox { height: min(52vh, 440px); min-height: 300px; }
  .svl-h1 { font-size: var(--fs-lead); }
  body[data-page="severe-live"] .pagehead .shell-inner { padding-inline: var(--sp-3); }
  .svl-status { margin-left: 0; flex: 1 1 100%; }
  .svl-status-body { left: 0; right: auto; width: min(30rem, calc(100vw - 2 * var(--sp-3))); }
}

/* ---------------------------------------------------------------------------------------
   The list
   ------------------------------------------------------------------------------------- */

.svl-head {
  flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--gutter) var(--sp-2); border-bottom: 1px solid var(--line); position: relative;
}
.svl-scopehead { min-width: 0; }
.svl-title { margin: 0; font-size: var(--fs-subhead); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.svl-count { margin: 0; font-size: var(--fs-bulletin); color: var(--ink-2); }
.svl-sort, .svl-sort-note { font-size: var(--fs-small); color: var(--ink-2); flex: none; }
.svl-sort-note { margin: 0; align-self: center; }
.svl-sort summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 28px; }
.svl-sort summary::-webkit-details-marker { display: none; }
.svl-sort summary:hover { color: var(--ink); }
.svl-info {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1px solid var(--edge); border-radius: 50%; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
}
.svl-sort p { margin: var(--sp-1) 0 0; flex: 1 1 100%; max-width: 44ch; }
.svl-sort[open] { flex: 1 1 100%; }
.svl-nearby { flex: 1 1 100%; padding: var(--sp-3); border-radius: var(--radius-surface); background: var(--briefing); font-size: var(--fs-bulletin); }
.svl-nearby h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-bulletin); }
.svl-nearby ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); }

.svl-results { padding: var(--sp-2) var(--gutter) var(--sp-5); }
.svl-gone {
  margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--edge); border-radius: var(--radius-surface);
  background: var(--surface); font-size: var(--fs-bulletin);
}
.svl-gone p { margin: 0; }
.svl-gone p + p { margin-top: var(--sp-2); }
.svl-state { margin: var(--sp-2) 0 var(--sp-4); padding: var(--sp-4); border-radius: var(--radius-surface); background: var(--briefing); }
.svl-state h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-subhead); }
.svl-state p { margin: 0; }
.svl-list .sv-notice { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-bulletin); }
.svl-list .sv-actions { margin: 0 0 var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.svl-heldhead { margin: var(--sp-2) 0 var(--sp-3); }
.svl-heldhead h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-bulletin); }
.svl-heldhead p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.svl-list .sv-empty { margin: var(--sp-2) 0 var(--sp-3); }

.svl-step { margin: 0 0 var(--sp-3); }
.svl-group {
  display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-1);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-2);
}
.svl-group-n { margin-left: auto; font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.svl-step--aside { padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--edge); border-radius: var(--radius-surface); }
.svl-aside-note { margin: 0 0 var(--sp-1); font-size: var(--fs-small); color: var(--ink-2); }
.svl-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

/* A row: one link, a thin accent in the hazard's colour at its edge, and tonal separation. The
   accent repeats the chip, which names the hazard in words, so nothing rests on colour. */
.svl-item { position: relative; border-left: 3px solid var(--svl-accent, var(--edge)); border-radius: 0 var(--radius-control) var(--radius-control) 0; background: transparent; }
.svl-item[data-sv-hazard="tornado-warning"] { --svl-accent: var(--hz-tornado-warning); }
.svl-item[data-sv-hazard="severe-thunderstorm-warning"] { --svl-accent: var(--hz-severe-thunderstorm-warning); }
.svl-item[data-sv-hazard="flash-flood-warning"] { --svl-accent: var(--hz-flash-flood-warning); }
.svl-item[data-sv-hazard="tsunami-warning"] { --svl-accent: var(--hz-tsunami-warning); }
.svl-item[data-sv-hazard="extreme-wind-warning"] { --svl-accent: var(--hz-extreme-wind-warning); }
.svl-item[data-sv-hazard="storm-surge-warning"] { --svl-accent: var(--hz-storm-surge-warning); }
.svl-item[data-sv-hazard="hurricane-warning"] { --svl-accent: var(--hz-hurricane-warning); }
.svl-item[data-sv-hazard="typhoon-warning"] { --svl-accent: var(--hz-typhoon-warning); }
.svl-item[data-sv-hazard="blizzard-warning"] { --svl-accent: var(--hz-blizzard-warning); }
.svl-item[data-sv-hazard="snow-squall-warning"] { --svl-accent: var(--hz-snow-squall-warning); }
.svl-item[data-sv-hazard="ice-storm-warning"] { --svl-accent: var(--hz-ice-storm-warning); }
.svl-item[data-sv-hazard="winter-storm-warning"] { --svl-accent: var(--hz-winter-storm-warning); }
.svl-item[data-sv-hazard="lake-effect-snow-warning"] { --svl-accent: var(--hz-lake-effect-snow-warning); }
.svl-item[data-sv-hazard="dust-storm-warning"] { --svl-accent: var(--hz-dust-storm-warning); }
.svl-item[data-sv-hazard="blowing-dust-warning"] { --svl-accent: var(--hz-blowing-dust-warning); }
.svl-item[data-sv-hazard="high-wind-warning"] { --svl-accent: var(--hz-high-wind-warning); }
.svl-item[data-sv-hazard="tropical-storm-warning"] { --svl-accent: var(--hz-tropical-storm-warning); }
.svl-item[data-sv-hazard="ashfall-warning"] { --svl-accent: var(--hz-ashfall-warning); }
.svl-item[data-sv-hazard="flood-warning"] { --svl-accent: var(--hz-flood-warning); }
.svl-item[data-sv-hazard="coastal-flood-warning"] { --svl-accent: var(--hz-coastal-flood-warning); }
.svl-item[data-sv-hazard="lakeshore-flood-warning"] { --svl-accent: var(--hz-lakeshore-flood-warning); }
.svl-item[data-sv-hazard="high-surf-warning"] { --svl-accent: var(--hz-high-surf-warning); }
.svl-item[data-sv-hazard="extreme-heat-warning"] { --svl-accent: var(--hz-extreme-heat-warning); }
.svl-item[data-sv-hazard="extreme-cold-warning"] { --svl-accent: var(--hz-extreme-cold-warning); }
.svl-item[data-sv-hazard="freeze-warning"] { --svl-accent: var(--hz-freeze-warning); }
.svl-item[data-sv-hazard="red-flag-warning"] { --svl-accent: var(--hz-red-flag-warning); }
.svl-item + .svl-item { border-top: 1px solid var(--divider); }
/* A row is a list item holding one link, and the site underlines a link in a list item because
   it is usually one word in a sentence. Here the link is the whole row, its edge and ground are
   its affordance, and eight underlined lines would be noise: the place name underlines on hover. */
.svl-items .svl-item a.svl-pick, .svl-items .svl-item a.svl-pick:hover { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3); color: var(--ink); text-decoration: none; border-radius: 0 var(--radius-control) var(--radius-control) 0; position: relative; }
/* The chevron at the row's edge says the row opens something; it is drawn, so it is nothing to
   a screen reader, which has the link and its `aria-current`. */
.svl-pick::after {
  content: ""; position: absolute; right: var(--sp-3); top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg);
}
.svl-item.is-selected .svl-pick::after { border-color: var(--link); }
.svl-pick:hover { background: var(--wash); }
.svl-pick:hover .svl-where { text-decoration: underline; }
.svl-pick:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
/* Selected: the surface lifts and a doubled edge in the link colour marks it. The word is also in
   the link's name and the row's `aria-current`, so the selection is never told by colour alone. */
.svl-item.is-selected { background: var(--surface); box-shadow: inset 0 0 0 2px var(--link); }
.svl-item.is-selected .svl-where { color: var(--link); }
.svl-item.is-held { border-left-style: dashed; }
.svl-item.is-held .sv-card-asof { margin: 0 var(--sp-3) var(--sp-2); }
.svl-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.svl-top-left { margin-left: auto; font-size: var(--fs-small); color: var(--ink-2); }
.svl-top .sv-left { font-variant-numeric: tabular-nums; }
/* A strong threat word beside the chip: outlined, so the row is not a run of pills; an emergency
   reverses, the one word that outranks the hazard's own name. */
.svl-flag { padding: 0 var(--sp-2); border: 1px solid var(--ink); border-radius: var(--radius-preview); font-size: var(--fs-micro); font-weight: 700; line-height: 1.5; }
.svl-flag--emergency { background: var(--ink); color: var(--paper); }
/* What a refresh brought: a word, never a flash, and gone with the next render. */
.svl-change { padding: 0 var(--sp-2); border-radius: var(--radius-preview); background: var(--teal); color: var(--paper); font-size: var(--fs-micro); font-weight: 700; line-height: 1.5; }
:root[data-theme="dark"] .svl-change, :root[data-dark]:not([data-theme="light"]) .svl-change { color: var(--paper); }
.svl-where { font-size: var(--fs-remarks); font-weight: 700; line-height: 1.3; }
.svl-until, .svl-sub { font-size: var(--fs-bulletin); color: var(--ink-2); }
.svl-nopoly { font-size: var(--fs-small); color: var(--ink-2); font-style: italic; }
/* An emergency or a tornado on the ground: a heavier edge, and NWS's instruction on the entry. */
.svl-item[data-sv-hazard="tornado-watch"] { --svl-accent: var(--hz-tornado-watch); }
.svl-item[data-sv-hazard="severe-thunderstorm-watch"] { --svl-accent: var(--hz-severe-thunderstorm-watch); }
.svl-item[data-sv-hazard="md"] { --svl-accent: var(--sv-room-md); }
.svl-item--lead { border-left-width: 5px; box-shadow: inset 0 0 0 1px var(--edge); }
.svl-item--lead.is-selected { box-shadow: inset 0 0 0 2px var(--link); }

.svl-context { margin: var(--sp-3) 0 0; font-size: var(--fs-bulletin); color: var(--ink-2); }
.svl-context .sv-go { margin-left: var(--sp-1); }

/* ---------------------------------------------------------------------------------------
   The details panel
   ------------------------------------------------------------------------------------- */

.svl-drawer { display: flex; flex-direction: column; min-width: 0; background: var(--paper); color: var(--ink); }
.svl-drawer[hidden] { display: none; }
.svl-drawer-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line);
}
.svl-drawer-title { margin: 0; font-size: var(--fs-remarks); font-weight: 700; }
.svl-close { min-height: 40px; min-width: 40px; padding: 0; font-size: var(--fs-subhead); line-height: 1; }
.svl-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4); display: grid; align-content: start; gap: var(--sp-3); }
.svl-drawer-body > * { margin: 0; }
.svl-d-type .sv-hz { font-size: var(--fs-small); }
.svl-d-where { font-size: var(--fs-subhead); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
/* What a number is not, beside it (SEV-06): the chance SPC issues a watch is not a storm's chance. */
.svl-d-note { font-size: var(--fs-small); color: var(--ink-2); }
.svl-d-tags { margin: 0; }
.svl-d-until { font-size: var(--fs-remarks); }
.svl-d-left { font-size: var(--fs-bulletin); color: var(--ink-2); }
.svl-d-noinstruction { font-size: var(--fs-bulletin); color: var(--ink-2); }
.svl-d-ended { font-size: var(--fs-bulletin); }
.svl-drawer[data-sv-ended] .svl-d-where { color: var(--ink-2); }
.svl-drawer .sv-says { margin: 0; }
.svl-drawer .sv-says-text { font-size: var(--fs-remarks); }
.svl-d-facts { display: grid; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.svl-d-facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-2); font-size: var(--fs-bulletin); }
.svl-d-facts dt { color: var(--ink-2); }
.svl-d-facts dd { margin: 0; overflow-wrap: anywhere; }
.svl-d-full summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.svl-d-full .sv-product { margin: var(--sp-2) 0 0; max-width: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-small); }
.svl-d-full .sv-fulltext-head { margin: var(--sp-2) 0 0; font-weight: 700; font-size: var(--fs-bulletin); }
.svl-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.svl-actions .btn { min-height: 40px; }

/* One clock or the other, by the reader's preference: the tracker's Local / UTC control sets
   `data-sv-time` on the root; the Briefing, which sets nothing, keeps both. */
html[data-sv-time="local"] .sv-local-sep, html[data-sv-time="local"] .sv-clock--second { display: none; }
html[data-sv-time="utc"] .sv-local { display: none; }

/* ---------------------------------------------------------------------------------------
   The map room
   ------------------------------------------------------------------------------------- */

.svl-mapbox {
  position: relative; overflow: hidden; background: var(--sv-room-ground); container: svl-map / size;
  --svl-legend-at: var(--sp-3); --svl-inset: var(--sp-3);
}
/* Over the live map, clear of MapLibre's attribution, which wraps and folds as the map changes
   size: severe-live.mjs measures it into --svl-foot. */
[data-sv-map="live"] .svl-mapbox { --svl-legend-at: var(--svl-foot, 2.4rem); }
.svl-canvas, .svl-fallback { position: absolute; inset: 0; }
.svl-canvas .maplibregl-canvas:focus-visible { outline: 3px solid var(--sv-room-ink); outline-offset: -3px; }
/* "waiting": WebGL is ready and the warnings are not, so the server's SVG stays in front. */
:is([data-sv-map="fallback"], [data-sv-map="waiting"]) .svl-canvas { visibility: hidden; }
/* Only the container is hidden once WebGL draws: the thumbnails `<use>` the base in .sv-defs, not
   in here, so nothing else on the page loses its land. */
[data-sv-map="live"] .svl-fallback { display: none; }

.svl-fallback { display: flex; flex-direction: column; }
.svl-fallback svg.svl-map { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; display: block; background: var(--sv-room-ground); }
.svl-map {
  --sv-land: var(--sv-room-land); --sv-coast: var(--sv-room-coast); --sv-border: var(--sv-room-border);
}
.svl-map .sv-map-sea { fill: var(--sv-room-ground); }
.svl-map .sv-md-line { stroke: var(--sv-room-md); }
/* A watch or a discussion chosen in its own list (SEV-04): heavier, as a selected warning is. */
.svl-map .sv-wt.is-selected .sv-watch-edge { stroke-width: 9; }
.svl-map .sv-wt.is-selected .sv-watch-line { stroke-width: 5; }
.svl-map .sv-md-line.is-selected { stroke-width: 4; }
.svl-map .svl-dim { fill: var(--sv-room-dim); fill-opacity: 0.55; }
.svl-map .svl-scope { stroke: var(--sv-casing-light); stroke-width: 1.8; stroke-opacity: 0.8; vector-effect: non-scaling-stroke; }
.svl-cas-out { stroke: var(--sv-casing-dark); stroke-width: 5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.svl-cas-in { stroke: var(--sv-casing-light); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.svl-w-area { fill-opacity: 0.3; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.svl-w.is-selected .svl-cas-out { stroke-width: 8; }
.svl-w.is-selected .svl-cas-in { stroke-width: 5.5; }
.svl-w.is-selected .svl-w-area { fill-opacity: 0.55; stroke-width: 3; }
.svl-rep { stroke: var(--sv-casing-light); 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); }
/* River and coastal gauges in the rivers view (SEV-07): NWPS's category colour over the dark
   casing, a tide or lake gauge a square; the one chosen ringed in light. */
.svl-gauge { stroke: var(--sv-casing-dark); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.svl-gauge.is-selected { stroke: var(--sv-casing-light); stroke-width: 4; }
/* The rivers list (SEV-07): each kind of water titled, action stage folded away. */
.svl-water-title { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-bulletin); }
.svl-water:first-of-type .svl-water-title { margin-top: 0; }
.svl-action { margin: var(--sp-3) 0; }
.svl-action > summary { cursor: pointer; font-weight: 600; }
.svl-river-clocks { margin-top: var(--sp-4); }
.svl-impacts { margin: var(--sp-2) 0; padding-left: var(--sp-5); }
.svl-impacts li { margin: 0 0 var(--sp-2); }
.svl-d-impacts h4 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-bulletin); }
.svl-why {
  flex: none; margin: 0; padding: var(--sp-2) var(--gutter); font-size: var(--fs-small);
  padding-inline-end: max(var(--gutter), calc(100% - 76ch));
  background: var(--sv-room-panel); color: var(--sv-room-ink); border-top: 1px solid var(--sv-room-edge);
}
[data-sv-map="live"] .svl-why { display: none; }
/* A reader with script and no WebGL still has the controls: each hides its layer here too. */
[data-sv-hide-outlook] .svl-map [data-layer="outlook"],
[data-sv-hide-watches] .svl-map [data-layer="watches"],
[data-sv-hide-discussions] .svl-map [data-layer="discussions"],
[data-sv-hide-warnings] .svl-map [data-layer="warnings"],
[data-sv-hide-reports] .svl-map [data-layer="reports"] { display: none; }

/* The panels over the map: the room's own ground and ink in either theme. */
.svl-controls, .svl-legend, .svl-outage {
  position: absolute; z-index: 2; margin: 0;
  background: color-mix(in srgb, var(--sv-room-panel) 92%, transparent); color: var(--sv-room-ink);
  border: 1px solid var(--sv-room-edge); border-radius: var(--radius-surface);
  font-size: var(--fs-small);
}
/* The map's own word on the page's state, above the map where nothing covers it. */
.svl-banner {
  flex: none; margin: 0; padding: var(--sp-2) var(--gutter); font-size: var(--fs-small); font-weight: 700;
  padding-inline-end: max(var(--gutter), calc(100% - 76ch));
  background: var(--sv-room-ink); color: var(--sv-room-panel);
}
.svl-banner[hidden] { display: none; }
.svl-banner .sv-notice-mark { font-family: var(--font-mono); }
.svl-controls { top: var(--sp-3); left: var(--sp-3); max-width: calc(100% - 2 * var(--sp-3) - 60px); padding: var(--sp-2); display: grid; gap: var(--sp-2); }
.svl-controls[hidden] { display: none; }
.svl-layers { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: 0; padding: 0; border: 0; }
.svl-layer { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-2); border-radius: var(--radius-control); cursor: pointer; }
.svl-layer:has(input:checked) { background: var(--sv-room-ink); color: var(--sv-room-panel); }
.svl-layer input { width: 18px; height: 18px; margin: 0; accent-color: var(--sv-room-panel); }
.svl-layer input:focus-visible { outline: 3px solid var(--sv-room-ink); outline-offset: 3px; }
.svl-layer.is-unavailable { text-decoration: line-through; }
.svl-layers-toggle { display: none; }
.svl-fit { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.svl-radar-brief { margin: 0; font-size: var(--fs-micro); color: var(--sv-room-ink-2); font-variant-numeric: tabular-nums; }
.svl-radar-brief.is-unavailable { color: var(--sv-room-ink); font-weight: 700; }
.svl-radar-brief[hidden] { display: none; }
.svl-controls .btn { min-height: 36px; background: var(--sv-room-panel); color: var(--sv-room-ink); border-color: var(--sv-room-edge); }
.svl-controls .btn:hover { background: var(--sv-room-edge); }
.svl-controls .btn:focus-visible, .svl-legend a:focus-visible, .svl-outage a:focus-visible { outline: 3px solid var(--sv-room-ink); outline-offset: 2px; }

/* The key never outgrows the map: with large text it scrolls, inside the map's height, rather than
   being cut off by the map's edge. */
.svl-legend {
  left: var(--svl-inset); bottom: var(--svl-legend-at); max-width: calc(100% - 2 * var(--svl-inset));
  max-height: calc(100% - var(--svl-legend-at) - var(--sp-3)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-2);
}
.svl-legend:focus-visible { outline: 3px solid var(--sv-room-ink); outline-offset: 2px; }
/* The key's button, where the key folds: at the key's own corner, in the room's colours. */
.svl-key-toggle {
  display: none; position: absolute; z-index: 2; left: var(--svl-inset); bottom: var(--svl-legend-at);
  min-height: 44px; background: color-mix(in srgb, var(--sv-room-panel) 92%, transparent); color: var(--sv-room-ink);
  border-color: var(--sv-room-edge);
}
.svl-key-toggle:hover { background: var(--sv-room-edge); }
.svl-key-toggle[aria-expanded="true"] { background: var(--sv-room-ink); color: var(--sv-room-panel); border-color: var(--sv-room-ink); }
.svl-key-toggle:focus-visible { outline: 3px solid var(--sv-room-ink); outline-offset: 2px; }
.svl-key { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 2px var(--sp-4); }
.svl-key[hidden] { display: none; }
.svl-key li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.svl-repkey { width: 12px; height: 12px; stroke: var(--sv-casing-light); stroke-width: 1; }
.svl-ramp { display: grid; gap: 2px; font-size: var(--fs-micro); }
.svl-ramp[hidden] { display: none; }
.svl-ramp svg { width: 100%; max-width: 16rem; height: 10px; display: block; }
.svl-ramp.is-unavailable svg { opacity: 0.35; }

/* Radar's outage is about the live map; over the server's SVG, which draws no radar, it is not. */
.svl-stage:not([data-sv-map="live"]) .svl-outage { display: none; }
.svl-outage { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: min(90%, 26rem); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-1); }
.svl-outage p { margin: 0; }
.svl-outage strong { font-size: var(--fs-bulletin); }
.svl-outage a { color: var(--sv-room-ink); }

/* The callout on the selected warning: MapLibre's popup, in the room's colours. */
.svl-callout .maplibregl-popup-content { background: var(--sv-room-ink); color: var(--sv-room-panel); border-radius: var(--radius-control); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); box-shadow: none; }
.svl-callout .maplibregl-popup-tip { border-top-color: var(--sv-room-ink); border-bottom-color: var(--sv-room-ink); }
.svl-callout strong { display: block; font-size: var(--fs-small); }
.svl-label { padding: 1px var(--sp-1); border-radius: var(--radius-preview); font-size: var(--fs-micro); font-weight: 700; background: var(--sv-room-panel); color: var(--sv-room-ink); border: 1px solid var(--sv-room-md); pointer-events: none; }
.svl-label--tornado-watch { background: var(--hz-tornado-watch); color: var(--hz-tornado-watch-ink); border-color: var(--hz-tornado-watch-edge); }
.svl-label--severe-thunderstorm-watch { background: var(--hz-severe-thunderstorm-watch); color: var(--hz-severe-thunderstorm-watch-ink); border-color: var(--hz-severe-thunderstorm-watch-edge); }
/* A selected warning's county, named where it is: the room's quiet chip, edged in the panels'
   own line rather than the discussion's, so it reads as a place and not as an SPC product. */
.svl-label--county { font-weight: 600; white-space: nowrap; border-color: var(--sv-room-edge); }

/* MapLibre's controls, on the site's focus ring and at the site's target size. */
.svl-canvas .maplibregl-ctrl-group { background: var(--sv-room-panel); border: 1px solid var(--sv-room-edge); }
.svl-canvas .maplibregl-ctrl-group button { width: 40px; height: 40px; }
.svl-canvas .maplibregl-ctrl-group button + button { border-top-color: var(--sv-room-edge); }
.svl-canvas .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.svl-canvas .maplibregl-ctrl button:focus-visible, .svl-canvas .maplibregl-ctrl summary:focus-visible { outline: 3px solid var(--sv-room-ink); outline-offset: 2px; box-shadow: none; }
.svl-canvas .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--sv-room-panel) 85%, transparent); color: var(--sv-room-ink-2); }
.svl-canvas .maplibregl-ctrl-attrib a { color: var(--sv-room-ink); text-decoration: underline; }

/* ---------------------------------------------------------------------------------------
   SPC's context and the foot
   ------------------------------------------------------------------------------------- */

.svl-spc { background: var(--sv-room-panel); border-top: 1px solid var(--sv-room-edge); color: var(--sv-room-ink); }
.svl-spc-fold { margin: 0; }
.svl-spc-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-5);
  min-height: 44px; padding: var(--sp-1) var(--gutter); cursor: pointer; list-style: none; font-size: var(--fs-bulletin);
}
.svl-spc-bar::-webkit-details-marker { display: none; }
.svl-spc-bar:hover { background: color-mix(in srgb, var(--sv-room-ink) 6%, transparent); }
.svl-spc-bar:focus-visible { outline: 3px solid var(--sv-room-ink); outline-offset: -3px; }
.svl-spc-name { font-weight: 800; }
.svl-spc-stat { display: inline-flex; align-items: center; gap: var(--sp-1); }
.svl-spc-label { color: var(--sv-room-ink-2); }
.svl-spc-n {
  display: inline-block; min-width: 1.6em; padding: 0 var(--sp-1); border-radius: var(--radius-preview); text-align: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; border: 1px solid var(--sv-room-edge);
}
.svl-spc-n--live { background: var(--sv-room-ink); color: var(--sv-room-panel); border-color: var(--sv-room-ink); font-weight: 700; }
.svl-spc-n--none { font-family: var(--font-body); border-style: dashed; color: var(--sv-room-ink-2); }
.svl-spc-scope { font-size: var(--fs-micro); color: var(--sv-room-ink-2); }
.svl-spc-risk { font-weight: 700; display: inline-flex; align-items: center; }
.svl-spc-risk .sv-sw { margin-right: var(--sp-1); }
.svl-spc-chevron { margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--sv-room-ink-2); border-bottom: 2px solid var(--sv-room-ink-2); transform: rotate(-135deg); transition: transform var(--dur) var(--ease); }
.svl-spc-fold[open] .svl-spc-chevron { transform: rotate(45deg); }
.svl-spc-body {
  padding: var(--sp-1) var(--gutter) var(--sp-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--sv-room-edge);
}
.svl-spc-sec h3 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--sv-room-ink); }
.svl-spc-sec h3 .svl-spc-scope { letter-spacing: 0; text-transform: none; font-weight: 400; }
.svl-spc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.svl-spc-item { margin: 0; font-size: var(--fs-small); color: var(--sv-room-ink-2); }
.svl-spc-item p { margin: 0; }
.svl-spc-title { color: var(--sv-room-ink); font-weight: 700; }
.svl-spc-title .sv-hz, .svl-spc-title .sv-sw { margin-right: var(--sp-1); }
.svl-spc a { color: var(--sv-room-ink); }
.svl-spc .sv-hz--md { color: var(--sv-room-ink); border-color: var(--sv-room-md); }

.svl-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-1) var(--gutter); border-top: 1px solid var(--sv-room-edge); background: var(--sv-room-panel);
  font-size: var(--fs-micro); color: var(--sv-room-ink-2);
}
.svl-foot-line { margin: 0; }
.svl-foot-line strong { color: var(--sv-room-ink); }
.svl-about { position: relative; }
.svl-about summary { cursor: pointer; list-style: none; min-height: 28px; display: inline-flex; align-items: center; color: var(--sv-room-ink); text-decoration: underline; text-underline-offset: 2px; }
.svl-about summary::-webkit-details-marker { display: none; }
.svl-about[open] > :not(summary) {
  position: absolute; left: 0; bottom: calc(100% + var(--sp-1)); z-index: 30; width: min(44rem, calc(100vw - 2 * var(--gutter)));
  margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--sv-room-panel); border: 1px solid var(--sv-room-edge); border-radius: var(--radius-surface);
  font-size: var(--fs-small); color: var(--sv-room-ink);
}
.svl-about[open] > .svl-note { bottom: auto; top: calc(100% + var(--sp-1)); }
.svl-about[open] > .sv-safety { bottom: calc(100% + var(--sp-1)); }
.svl-safety a { color: var(--sv-room-ink); }
.svl-timepref { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1); }
.svl-timepref-label { margin-right: var(--sp-1); }
.svl-timepref .btn { min-height: 28px; padding: 0 var(--sp-2); font-size: var(--fs-micro); }
.svl-timepref .btn[aria-pressed="true"] { background: var(--sv-room-ink); color: var(--sv-room-panel); border-color: var(--sv-room-ink); }

/* ---------------------------------------------------------------------------------------
   Narrow and short
   ------------------------------------------------------------------------------------- */

@media (max-width: 900px), (max-height: 599px) {
  .svl-layers-toggle { display: inline-flex; min-height: 36px; }
  .svl-controls:not(.is-open) .svl-layers,
  .svl-controls:not(.is-open) .svl-fit { display: none; }
  .svl-controls { max-width: calc(100% - 2 * var(--sp-2) - 52px); top: var(--sp-2); left: var(--sp-2); }
  .svl-mapbox { --svl-legend-at: var(--sp-2); --svl-inset: var(--sp-2); }
  .svl-legend { right: var(--sp-2); top: auto; max-width: none; }
  .svl-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--sp-2); }
  .svl-canvas .maplibregl-ctrl-top-right { top: 0; right: 0; }
  .svl-canvas .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .svl-spc-bar { gap: var(--sp-1) var(--sp-3); }
  .svl-about[open] > :not(summary) { position: static; width: auto; }
}

/* The key folds behind its "Key" button wherever the script is there to open it
   (`data-sv-foldable`): open, it is a panel the size of a phone's screen over the map's foot,
   and on a national view it sat over the southwest with warnings under it. Without script the
   key stays open over the server's map, which has no layer panel to share the room with.
   Opened, the key sits above its button and stops short of the "Layers" panel at the top,
   scrolling if it must: severe-live.mjs measures where that panel ends into --svl-panel-end, and
   until it has, the panel is taken to be its one button. */
[data-sv-foldable] > .svl-key-toggle { display: inline-flex; align-items: center; }
[data-sv-foldable]:not(.is-key-open) > .svl-legend { display: none; }
[data-sv-foldable] > .svl-legend {
  bottom: calc(var(--svl-legend-at) + 44px + var(--sp-2));
  max-height: calc(100% - var(--svl-legend-at) - 44px - var(--sp-2) - (var(--svl-panel-end, var(--svl-inset) + 44px + 2 * var(--sp-2) + 2px)) - var(--sp-2));
}

/* A short map (a tablet on its side, a phone, a laptop with a tall SPC row open) has no room for
   the whole layer panel and the country under it: the panel folds behind its "Layers" button,
   opening over the map when asked. */
@container svl-map (max-height: 560px) {
  .svl-layers-toggle { display: inline-flex; min-height: 36px; }
  .svl-controls:not(.is-open) .svl-layers,
  .svl-controls:not(.is-open) .svl-fit { display: none; }
}

@media (max-width: 480px) {
  .svl-legend { font-size: var(--fs-micro); }
  .svl-d-facts > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

@media (pointer: coarse) {
  .svl-layer { min-height: 44px; }
  .svl-controls .btn { min-height: 44px; }
  .svl-filter .choice, .svl-views .choice, .svl-filter-more > summary, .svl-choose select, .svl-show, .svl-near, .svl-close { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .svl-canvas .maplibregl-canvas { scroll-behavior: auto; }
  .svl-spc-chevron { transition: none; }
}

@media (forced-colors: active) {
  .svl-item.is-selected { outline: 3px solid Highlight; }
  .svl-item { border-left-color: CanvasText; }
  .svl-controls, .svl-legend, .svl-outage, .svl-key-toggle, .svl-drawer { border-color: CanvasText; }
}

@media print {
  body[data-page="severe-live"] { height: auto; overflow: visible; display: block; }
  /* Printed, the map box grows to the SVG it holds, which a size container cannot. */
  .svl-mapbox { container-type: normal; }
  .svl-controls, .svl-canvas, .svl-key-toggle { display: none; }
  [data-sv-map="live"] .svl-fallback { display: flex; position: relative; height: 60vh; }
  .svl-drawer { position: static; max-height: none; }
  .svl-results { overflow: visible; }
}