/* Winter, /severe/winter (WN-3): WPC's winter severity index and chances of snow and ice for a
   town, a state or the lower 48, NWS's winter and cold alerts, and WPC's discussion. Loaded after
   severe.css, whose map, key, clocks and notes this page shares. Tokens only: no colour is declared
   here, and WPC's colours are drawn by the server from winter.ts, never retuned here. */

.svw .sv-wrap { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); }
.svw h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-subhead); }
.svw-sub { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-remarks); font-weight: 800; }
.svw-sub:first-of-type { margin-top: 0; }
.svw-note { margin: var(--sp-2) 0 0; max-width: 72ch; font-size: var(--fs-small); color: var(--ink-2); }
.svw-notes { margin: 0; }

/* WPC has drawn nothing, or nothing has been read: said once, above everything, in words. */
.svw-banner { margin: 0; padding: var(--sp-3) var(--sp-4); max-width: 80ch; font-size: var(--fs-small); background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-surface); }

/* The location: a state, or the place another tab chose, with the way back to its state. */
.svw-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.svw-where label { font-size: var(--fs-small); font-weight: 700; }
.svw-where select { min-height: 44px; min-width: 12rem; 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); }
.svw-where .btn { min-height: 44px; }
.svw-placename { font-weight: 700; }
.svw-where .sv-go { display: inline-flex; align-items: center; min-height: 24px; }

/* The map beside the glance on a wide screen; one after the other on a narrow one. */
.svw-cols { display: grid; gap: var(--sp-4); }
@media (min-width: 1080px) {
  .svw-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
.svw-mapcard, .svw-glance, .svw-list, .svw-discussion { min-width: 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
/* Every control on the map card leads back to it (`#svw-map`): it lands clear of the sticky
   masthead, its title and choices in view, not under the bar. */
.svw-mapcard, .svw-list, .svw-discussion { scroll-margin-top: calc(var(--masthead-h, 66px) + var(--sp-4)); }
.svw-maptitle { overflow-wrap: anywhere; }
.svw-choices { margin: 0 0 var(--sp-2); }
.svw-choices .choice { min-height: 44px; display: inline-flex; align-items: center; }

/* WPC's sentence, quoted beside its index wherever it is drawn. */
.svw-caveat { margin: var(--sp-2) 0; padding-left: var(--sp-3); max-width: 72ch; font-size: var(--fs-small); border-left: 3px solid var(--edge); }
.svw-caveat-by { font-weight: 700; }
.svw-offmap, .svw-ended { color: var(--ink); }

/* PWPF's chances are WPC's outlines with no fill: drawn heavier, so a line reads at the national scale. */
.svw-mapframe .sv-outlook[fill="none"] { stroke-width: 2.5; }

/* Winter at the place: two small tables, every value a link to its map. */
.svw-tablewrap { overflow-x: auto; max-width: 100%; }
.svw-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.svw-table th, .svw-table td { padding: var(--sp-1) var(--sp-2); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.svw-table thead th { border-top: 0; font-size: var(--fs-micro); color: var(--ink-2); }
.svw-table tbody th { font-weight: 700; }
.svw-table a { display: inline-flex; align-items: center; min-height: 24px; color: var(--link); }
.svw-table [data-svw-level="0"] a, .svw-table [data-svw-level="-1"] { color: var(--ink-2); }
.svw-alertline { margin: var(--sp-3) 0 0; font-size: var(--fs-small); }

/* The alerts: by group, then by event, each a disclosure with its count. */
.svw-lead, .svw-held { margin: 0 0 var(--sp-2); max-width: 75ch; font-size: var(--fs-small); }
.svw-held { font-weight: 700; }
.svw-group { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-small); font-weight: 800; }
.svw-n { font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); }
.svw-event, .svw-around { font-size: var(--fs-small); }
.svw-event > summary, .svw-around > summary { cursor: pointer; min-height: 24px; padding: var(--sp-1) 0; font-weight: 700; }
.svw-around > summary { margin-top: var(--sp-3); color: var(--link); text-decoration: underline; }
.svw-alerts { display: grid; gap: 0; margin: 0 0 var(--sp-2); padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.svw-alert { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-1); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.svw-alert-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.svw-alert-when, .svw-alert-where, .svw-alert-by { color: var(--ink-2); }
.svw-tag { padding: 0 var(--sp-1); font-size: var(--fs-micro); font-weight: 700; border: 1px solid var(--edge); border-radius: var(--radius-control); }

/* WPC's discussion: its regions as WPC heads them, its words quoted. */
.svw-dated { margin: 0 0 var(--sp-2); max-width: 72ch; font-size: var(--fs-small); color: var(--ink-2); }
.svw-region { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-remarks); font-weight: 800; }
.svw-days { font-weight: 600; color: var(--ink-2); }
.svw-quote { margin: 0; padding-left: var(--sp-3); max-width: 72ch; border-left: 3px solid var(--line); }
.svw-quote p { margin: 0 0 var(--sp-2); }
.svw-pre { overflow-x: auto; max-width: 100%; font-family: var(--font-mono); font-size: var(--fs-small); white-space: pre-wrap; }

@media (pointer: coarse) {
  .svw-table a, .svw-where .sv-go, .svw-event > summary, .svw-around > summary { min-height: 44px; }
}