/* Analysis, /severe/analysis (SEV-08): observations, analyses and soundings. Loaded after
   severe.css, whose map plate, chips, tables and freshness lines this page shares, and beside
   severe-reports.css's filter pieces, which it reuses by class.

   The surface map is a scientific plate like the Briefing's: it takes the `--graphic-*` roles,
   which do not change with the theme. Its own colours are the conventional ones of a surface
   chart (temperature red, dew point green, cold fronts blue, warm red, occluded purple, troughs
   brown), each measured against the plate's land at 4.5:1 or more, and none is the only signal:
   numbers sit at fixed places beside a station, fronts carry their names and each kind has its own
   line, and the key says it in words. SPC's pictures keep SPC's colours: they are SPC's. */

:root {
  --sva-temp: #b3261e;
  --sva-dew: #1d6b33;
  --sva-barb: #1a2733;
  --sva-cold: #1f4fd1;
  --sva-warm: #c62828;
  --sva-occluded: #7b2c9e;
  --sva-trough: #8a5a14;
  --sva-dryline: #a35b00;
  --sva-high: #1f4fd1;
  --sva-low: #c62828;
  /* Model guidance: REFS's share of members, one violet ramp light to dark. It is no agency's scale,
     so it borrows none: not SPC's categories, not radar's colours. Each step is told by its words in
     the key and the facts, and each band is edged, so colour is never the only signal. */
  --sva-p10: #ddd2f2;
  --sva-p30: #b99be2;
  --sva-p50: #9166cf;
  --sva-p70: #6739ab;
  --sva-p90: #3d1a73;
  --sva-p-edge: #2a1150;
}

.sva .sv-wrap { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); }

/* The location and the views: the location form, then the three views as chips. The form is
   Reports' (`.svr-*` in severe-reports.css), restated here for the parts this page uses, since the
   page does not load that sheet. */
.sva-controls { display: grid; gap: var(--sp-3); }
.sva .svr-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.sva .svr-field { display: grid; gap: var(--sp-1); min-width: 0; flex: 1 1 11rem; max-width: 18rem; }
.sva .svr-field label, .sva .svr-label { font-size: var(--fs-micro); font-weight: 700; color: var(--ink-2); }
.sva .svr-field select { min-height: 44px; width: 100%; padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-small); color: var(--ink); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-control); }
.sva .svr-clear { font-size: var(--fs-small); color: var(--link); }
.sva .svr-apply { min-height: 44px; }
.sva .svr-notes { margin: 0; }
.sva-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.sva-views, .sva-params, .sva-sectors { flex-wrap: wrap; }

/* A view: its title, the figure beside its key or explanation, the facts, a table and the sources. */
.sva-view { display: grid; gap: var(--sp-3); min-width: 0; }
.sva-view > h2 { margin: 0; font-size: var(--fs-subhead); }
.sva-stage { display: grid; gap: var(--sp-4); min-width: 0; }
@media (min-width: 900px) {
  .sva-stage { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
}
.sva-figure { margin: 0; min-width: 0; }
.sva-figure .sv-map { border: 1px solid var(--line); border-radius: var(--radius-surface); }
.sva-caption { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.sva-kind { display: inline-block; padding: 0 var(--sp-2); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--edge); border-radius: var(--radius-control); }
.sva-kind--analysed { border-style: dashed; }
.sva-kind--forecast { border-style: dotted; border-width: 2px; }
.sva-facts { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.sva-facts p { margin: 0; }
.sva-fronts { margin: 0; padding-inline-start: var(--sp-4); display: grid; gap: var(--sp-1); }
.sva-state, .sva-hint { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.sva-hint { color: var(--ink-2); font-size: var(--fs-small); }
.sva-note { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.sva-late { color: var(--ink); }
.sva-sources { display: grid; gap: var(--sp-1); }
.sva-none { color: var(--ink-2); }
.sva-dist { font-weight: 400; font-size: var(--fs-small); color: var(--ink-2); }
.sva-table td, .sva-table th { white-space: nowrap; }

/* The key: what each mark on the surface map is, observed or analysed. */
.sva-key { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); font-size: var(--fs-small); display: grid; gap: var(--sp-2); }
.sva-key-title { margin: 0; font-size: var(--fs-bulletin); }
.sva-key-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.sva-key-list li { display: flex; align-items: center; gap: var(--sp-2); }
.sva-key-swatch { flex: none; display: inline-grid; place-items: center; min-width: 2.5rem; height: 1.5rem; font-weight: 700; background: var(--graphic-paper); border: 1px solid var(--line); border-radius: var(--radius-control); }
.sva-key-swatch--temp { color: var(--sva-temp); }
.sva-key-swatch--dew { color: var(--sva-dew); }
.sva-key-swatch--barb { color: var(--sva-barb); }
.sva-key-swatch--hl { color: var(--graphic-ink); letter-spacing: .2em; }
.sva-key-line { flex: none; width: 2.5rem; height: 1.5rem; background: var(--graphic-paper); border: 1px solid var(--line); border-radius: var(--radius-control); }

/* The surface map's marks. Text sits on a halo of the plate's paper so it reads over borders and lines. */
.sva-map .svl-dim { fill: var(--graphic-paper); fill-opacity: 0.55; }
.sva-map .svl-scope { stroke: var(--graphic-ink); stroke-width: 1.5; stroke-opacity: 0.9; vector-effect: non-scaling-stroke; }
.sva-stn-dot { fill: var(--sva-barb); }
.sva-stn-calm { stroke: var(--sva-barb); }
.sva-barb { fill: var(--sva-barb); stroke: var(--sva-barb); stroke-linecap: round; stroke-linejoin: round; }
.sva-num { font-weight: 700; paint-order: stroke; stroke: var(--graphic-paper); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-mono, inherit); }
.sva-num--temp { fill: var(--sva-temp); }
.sva-num--dew { fill: var(--sva-dew); }
.sva-front-case { stroke: var(--graphic-paper); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sva-front-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sva-front--cold .sva-front-line { stroke: var(--sva-cold); }
.sva-front--warm .sva-front-line { stroke: var(--sva-warm); stroke-dasharray: none; }
.sva-front--stationary .sva-front-line { stroke: var(--sva-cold); }
.sva-front--stationary .sva-front-line--alt { stroke: var(--sva-warm); stroke-linecap: butt; }
.sva-front--occluded .sva-front-line { stroke: var(--sva-occluded); }
.sva-front--trough .sva-front-case { display: none; }
.sva-front--trough .sva-front-line { stroke: var(--sva-trough); stroke-dasharray: 10 7; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sva-front--dryline .sva-front-line { stroke: var(--sva-dryline); stroke-dasharray: 1 7; }
.sva-key-line .sva-front--trough .sva-front-line { stroke-dasharray: 6 4; }
.sva-key-line .sva-front--dryline .sva-front-line { stroke-dasharray: 1 5; }
.sva-front-name { font-weight: 700; paint-order: stroke; stroke: var(--graphic-paper); stroke-width: 3px; stroke-linejoin: round; }
.sva-front-name--cold { fill: var(--sva-cold); }
.sva-front-name--warm { fill: var(--sva-warm); }
.sva-front-name--stationary { fill: var(--graphic-ink); }
.sva-front-name--occluded { fill: var(--sva-occluded); }
.sva-front-name--dryline { fill: var(--sva-dryline); }
.sva-centre text { font-weight: 800; paint-order: stroke; stroke: var(--graphic-paper); stroke-width: 3px; stroke-linejoin: round; }
.sva-centre--high .sva-centre-letter { fill: var(--sva-high); }
.sva-centre--low .sva-centre-letter { fill: var(--sva-low); }
.sva-centre-mb { fill: var(--graphic-ink); font-weight: 600; }
/* On a phone the national map is 350 px across: the numbers would be specks, so the map keeps its
   barbs, fronts and centres, and the table and lists carry the values. */
@media (max-width: 599px) {
  .sva-map .sva-num, .sva-map .sva-front-name, .sva-map .sva-centre-mb { display: none; }
  .sva-key-list .sva-key-num { display: none; }
}
@media (min-width: 600px) { .sva-key-list .sva-key-phone { display: none; } }

/* SPC's pictures, at their own aspect, never wider than the column; a place ringed over it. */
.sva-picture-frame { position: relative; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-surface); overflow: hidden; background: var(--graphic-paper); }
.sva-picture-frame img { display: block; width: 100%; height: auto; }
.sva-mark { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sva-mark-case { fill: none; stroke: #ffffff; stroke-width: 7; }
.sva-mark-ring { fill: none; stroke: #000000; stroke-width: 3; }
.sva-param { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); display: grid; gap: var(--sp-2); }
.sva-param-title { margin: 0; font-size: var(--fs-bulletin); }
.sva-units { font-weight: 400; color: var(--ink-2); }
.sva-plain { margin: 0; }
.sva-technical summary, .sva-levels summary, .sva-all summary, .sva-stations summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.sva-technical p { margin: var(--sp-2) 0 0; font-size: var(--fs-small); }

/* Soundings: the graphic, then the levels; the stations to choose from beside it. */
.sva-sounding { display: grid; gap: var(--sp-3); min-width: 0; }
.sva-pick { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); font-size: var(--fs-small); }
.sva-near-title { margin: 0 0 var(--sp-2); font-size: var(--fs-bulletin); }
.sva-near ul, .sva-all-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); }
.sva-all-list { margin-top: var(--sp-2); max-height: 24rem; overflow: auto; }
.sva-near a, .sva-all-list a { display: inline-block; min-height: 24px; padding-block: 2px; }
.sva-near a[aria-current="page"], .sva-all-list a[aria-current="page"] { font-weight: 700; }
.sva .svr-back { margin: 0; }
.sva-stations { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.sva-stations[open] summary { margin-bottom: var(--sp-2); }

/* Model guidance: the model, field and hour as chips; REFS's bands on the plate; the HRRR's picture
   with "Simulated" beside it, above the picture, where it is read before the picture is. */
.sva-models-bar, .sva-hours { flex-wrap: wrap; }
.sva-lead { font-weight: 400; color: var(--ink-2); }
.choice[aria-current="page"] .sva-lead { color: inherit; }
.sva-band { stroke: var(--sva-p-edge); stroke-width: 0.8; stroke-opacity: 0.7; vector-effect: non-scaling-stroke; }
.sva-band--10 { fill: var(--sva-p10); }
.sva-band--30 { fill: var(--sva-p30); }
.sva-band--50 { fill: var(--sva-p50); }
.sva-band--70 { fill: var(--sva-p70); }
.sva-band--90 { fill: var(--sva-p90); }
.sva-bandsmap .svl-dim { fill: var(--graphic-paper); fill-opacity: 0.55; }
.sva-bandsmap .svl-scope { stroke: var(--graphic-ink); stroke-width: 1.5; stroke-opacity: 0.9; vector-effect: non-scaling-stroke; }
.sva-key-band { flex: none; width: 2.5rem; height: 1.5rem; border: 1px solid var(--sva-p-edge); border-radius: var(--radius-control); }
.sva-band-swatch--10 { background: var(--sva-p10); }
.sva-band-swatch--30 { background: var(--sva-p30); }
.sva-band-swatch--50 { background: var(--sva-p50); }
.sva-band-swatch--70 { background: var(--sva-p70); }
.sva-band-swatch--90 { background: var(--sva-p90); }
.sva-key-band--none { background: var(--graphic-paper); border-style: dashed; }
.sva-simulated { margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-3); display: inline-block; font-size: var(--fs-small); color: var(--ink); border: 2px dotted var(--edge); border-radius: var(--radius-control); background: var(--surface); }
.sva-simulated strong { text-transform: uppercase; letter-spacing: .04em; }
@media (forced-colors: active) {
  .sva-key-band, .sva-band { forced-color-adjust: none; }
}

/* Captions at a reading measure (2026-10-06): under a wide picture they had run to 160 characters a line. */
.sva-caption, .sva .sv-wrap > p, .sva section > p { max-width: 75ch; }
.wx-playback { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wx-playback label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.wx-playback input { width:min(240px,70vw); min-height:40px; }
.wx-playback [role="status"] { flex-basis:100%; font-size:var(--fs-small); }
.wx-guidance-panes { min-width:0; }
.wx-guidance-panes section { min-width:0; }
.wx-guidance-panes .sva-stage { display:block; }
.wx-guidance-panes .sva-param { margin-top:12px; }
.wx-guidance-panes .sva-param > :not(.sva-param-title) { font-size:var(--fs-small); }
.wx-guidance-panes--compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wx-model-identity { margin:0; font-size:var(--fs-small); }
.wx-guidance-settings > summary { cursor:pointer; min-height:44px; font-weight:700; padding-block:8px; }
.wx-guidance-settings[open] { padding-bottom:12px; }
.wx-guidance-panes .sva-picture-frame { width:100%; }
.wx-guidance-panes .sva-figure { margin:0; }
@media (max-width:719px) { .wx-guidance-panes--compare { grid-template-columns:minmax(0,1fr); } }