/* Rain & rivers, /severe/rivers (Release E of the Briefing refinement): rain at a place or a state,
   its river gauges, and a chosen gauge's forecast hydrograph. Loaded after severe.css, whose head,
   flood chips, clocks and table this page shares. Tokens only: no colour is declared here. */

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

/* The location: a state, or the place another tab chose, with the way back to its state. */
.svv-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); }
.svv-where label { font-size: var(--fs-small); font-weight: 700; }
.svv-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); }
.svv-where .btn { min-height: 44px; }
.svv-placename { font-weight: 700; }
.svv-where .sv-go { display: inline-flex; align-items: center; min-height: 24px; }

/* The glance beside the gauges on a wide screen; one after the other on a narrow one. */
.svv-cols { display: grid; gap: var(--sp-4); }
@media (min-width: 960px) {
  .svv-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
  /* The glance stays beside a long list of gauges as it scrolls (2026-10-06): a national list runs
     to many screens, and the column beside it had ended after the first. */
  .svv-glance { position: sticky; top: calc(var(--masthead-h, 66px) + var(--sp-3)); }
}
.svv-glance, .svv-list, .svv-chosen { min-width: 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.svv-glance .svb-flood { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-small); }
.svv-glance .svb-flood li + li { margin-top: var(--sp-2); }
.svv-glance .svb-flood-note { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.svv-maps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.svv-maps .sv-go { display: inline-flex; align-items: center; min-height: 24px; font-weight: 700; }
.svv-maps .svv-note { display: block; margin: 0; }

/* The gauges: by category, worst first; each its chip, its name chosen by a link, and its lines. */
.svv-lead, .svv-held { margin: 0 0 var(--sp-2); max-width: 75ch; font-size: var(--fs-small); }
.svv-held { font-weight: 700; }
.svv-group { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-small); font-weight: 800; }
.svv-n { font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); }
/* A gauge board, not a stack of cards (2026-10-06): ruled rows, the readings in aligned figures. */
.svv-gauges { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.svv-gauge { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-1); border-top: 1px solid var(--line); font-size: var(--fs-small); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.svv-gauge.is-chosen { background: var(--intro); outline: 2px solid var(--link); outline-offset: -2px; border-radius: var(--radius-control); }
.svv-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.svv-pick { font-weight: 700; color: var(--link); min-height: 24px; display: inline-flex; align-items: center; }
.svv-away, .svv-obs, .svv-fcst { color: var(--ink-2); }
.svv-action { margin-top: var(--sp-3); font-size: var(--fs-small); }
.svv-action > summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; font-weight: 600; }

/* The chosen gauge. */
.svv-chosen h2 { margin-top: var(--sp-2); }
.svv-chip { margin: 0; }
.svv-facts { display: grid; gap: var(--sp-1); margin: 0; font-size: var(--fs-small); }
.svv-facts > div { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: var(--sp-2); }
.svv-facts dt { font-weight: 700; color: var(--ink-2); }
.svv-facts dd { margin: 0; overflow-wrap: anywhere; }
.svv-impacts { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-small); display: grid; gap: var(--sp-1); max-width: 72ch; }
.svv-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.svv-actions .btn { min-height: 44px; }
.svv-back { margin: 0; }

/* The hydrograph: the forecast line, NWS's points, the stages named, the observation ringed. */
.svh { margin: 0; max-width: 46rem; }
.svh-frame { overflow-x: auto; max-width: 100%; }
.svh-frame:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.svh-svg { display: block; width: 100%; min-width: 640px; height: auto; color: var(--ink); background: var(--surface); }
.svh-grid { stroke: var(--line); stroke-width: 1; }
/* The picture's text is in the SVG's own units, which scale with it: the micro step at full width. */
.svh-tick, .svh-axis, .svh-stage-label, .svh-now-label, .svh-observed-label { fill: currentColor; font-family: var(--font-mono); font-size: var(--fs-micro); }
.svh-stage-label { font-family: var(--font-body); font-weight: 700; }
.svh-stage { stroke: currentColor; stroke-width: 1.5; }
.svh-stage--action { stroke-dasharray: 2 4; }
.svh-stage--minor { stroke-dasharray: 8 4; }
.svh-stage--moderate { stroke-dasharray: 12 3 2 3; }
.svh-stage--major { stroke-width: 2.5; }
.svh-now { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.svh-forecast { fill: none; stroke: var(--link); stroke-width: 2.5; }
.svh-point { fill: var(--link); }
.svh-observed { fill: var(--surface); stroke: currentColor; stroke-width: 2.5; }
.svh-caption { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); max-width: 72ch; }
.svh-table { margin-top: var(--sp-2); font-size: var(--fs-small); }
.svh-table > summary { cursor: pointer; min-height: 24px; color: var(--link); text-decoration: underline; font-weight: 600; }
.svh-table table { margin-top: var(--sp-2); }
.svh-none { margin: 0; font-size: var(--fs-small); }

@media (pointer: coarse) {
  .svv-pick, .svv-maps .sv-go, .svv-where .sv-go, .svv-action > summary, .svh-table > summary { min-height: 44px; }
}
@media (forced-colors: active) {
  /* The picture is not repainted by the system: its ground and every mark take the system's own
     colours, or a dark high-contrast theme left white stage lines on a white ground (2026-10-06). */
  .svh-svg { background: Canvas; color: CanvasText; }
  .svh-tick, .svh-axis, .svh-stage-label, .svh-now-label, .svh-observed-label { fill: CanvasText; }
  .svh-forecast { stroke: LinkText; }
  .svh-point { fill: LinkText; }
  .svh-stage, .svh-now { stroke: CanvasText; }
  .svh-grid { stroke: GrayText; }
  .svh-observed { fill: Canvas; stroke: CanvasText; }
  .svv-gauge.is-chosen { border-color: Highlight; box-shadow: none; outline: 2px solid Highlight; }
}