/* Reports, /severe/reports (SEV-04): SPC's preliminary storm reports on a page of their own.
   Loaded after severe.css, whose head, chips, counts, map and table this page shares; this sheet
   lays out the filters, the summary, the map beside the notes, and the table. Tokens only: the
   report marks' colours are severe.css's, and no colour is declared here. */

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

/* The filters: one row of labelled selects on a wide screen, wrapping on a narrow one. */
.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); }
.svr-field { display: grid; gap: var(--sp-1); min-width: 0; flex: 1 1 11rem; max-width: 18rem; }
.svr-field label, .svr-label { font-size: var(--fs-micro); font-weight: 700; color: var(--ink-2); }
.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); }
.svr-field--place { align-content: end; }
.svr-placename { font-weight: 700; min-height: 24px; }
.svr-clear { font-size: var(--fs-small); color: var(--link); }
.svr-apply { min-height: 44px; }
/* On a phone the selects pair up, Apply in the last cell (2026-10-06): one per row had taken 470px
   before the first report. */
@media (max-width: 640px) {
  .svr-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); }
  .svr-field { max-width: none; }
  .svr-apply { align-self: end; width: 100%; }
}
.svr-notes, .svr-placenote { margin: 0; }
.svr-placenote { font-size: var(--fs-small); color: var(--ink-2); }

/* The summary: the source, the period, the counts and the download. */
.svr-summary { 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); }
.svr-summary .sv-counts { margin: 0; }
.svr-period, .svr-total, .svr-extremes, .svr-caveat { margin: 0; }
.svr-period-why, .svr-caveat { color: var(--ink-2); font-size: var(--fs-small); }
.svr-total { font-size: var(--fs-lead); }
.svr-searchnote { margin-inline-start: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.svr-csv { justify-self: start; min-height: 44px; }

/* The map beside what a report is: the map leads on a wide screen; the notes follow it on a narrow one. */
.svr-stage { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) {
  .svr-stage { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
}
.svr-mapfig { margin: 0; min-width: 0; }
.svr-mapkey { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.svr-about { 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); }
.svr-about h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-subhead); }
.svr-about ul { margin: 0; padding-inline-start: var(--sp-4); display: grid; gap: var(--sp-2); }
.svr-about-src { margin: var(--sp-3) 0 0; color: var(--ink-2); }

/* The list: the search, the table, and what a filter or a search left out. */
.svr-list { display: grid; gap: var(--sp-3); min-width: 0; }
.svr-list h2 { margin: 0; font-size: var(--fs-subhead); }
.svr-search { display: grid; gap: var(--sp-1); max-width: 32rem; }
.svr-search label { font-size: var(--fs-small); font-weight: 700; }
.svr-search input { min-height: 44px; padding: 0 var(--sp-3); font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-control); }
.svr-search-help, .svr-table-note { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.svr-state { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.svr-state h2 { margin: var(--sp-2) 0; font-size: var(--fs-subhead); }
.svr-empty-search { margin: 0; font-weight: 700; }
.svr-table tbody tr[hidden] { display: none; }
.svr-table tbody tr.is-picked { background: var(--intro); }
.svr-zone { font-weight: 400; text-transform: none; letter-spacing: 0; }
.svr-mark { display: inline-block; width: 1.2em; -webkit-text-stroke: 0.5px var(--graphic-ink); }
.svr-mark--tornado { color: var(--sv-report-tornado); }
.svr-mark--wind { color: var(--sv-report-wind); }
.svr-mark--hail { color: var(--sv-report-hail); }
.svr-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.svr-tag { padding: 0 var(--sp-2); font-size: var(--fs-micro); font-weight: 700; color: var(--ink); border: 1px solid var(--edge); border-radius: var(--radius-control); }
.svr-tag--dup { border-style: dashed; }
.svr-table td[data-label="Comments"] { min-width: 18ch; max-width: 60ch; overflow-wrap: anywhere; }
.svr-back { margin: 0; }
.svr-map .svl-rep.is-hidden, .svb-map .svl-rep.is-hidden { display: none; }

/* The list's seven columns need about 710px however their cells wrap, so it turns into labelled
   records below 768px rather than the section's 720px (severe.css): at 720 it ran 7px past the
   screen (SEV-09, found by the release sweep). The section's record rules are restated for it. */
@media (max-width: 767px) {
  .svr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .svr-table, .svr-table tbody, .svr-table th { display: block; width: 100%; }
  .svr-table tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
  .svr-table th, .svr-table td { padding: 2px 0; border: 0; text-align: left; }
  .svr-table .sv-num { text-align: left; }
  .svr-table td::before { content: attr(data-label); 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); }
  /* A record, compact: its short fields share lines, each still labelled; the comment takes the row. */
  .svr-table tr { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); }
  .svr-table td { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1); width: auto; }
  .svr-table td::before { display: inline; }
  .svr-table td[data-label="Location"] { flex-basis: 100%; font-weight: 700; }
  .svr-table td[data-label="Comments"] { display: block; flex-basis: 100%; min-width: 0; max-width: none; }
  .svr-table td[data-label="Comments"]::before { display: block; }
}
@media (max-width: 719px) {
  .svr-field { max-width: none; flex-basis: 100%; }
}

/* Notes at a reading measure (2026-10-06): at 1440px they had run to two hundred characters a line. */
.svr-caveat, .svr-table-note, .svr-mapkey, .svr-period { max-width: 75ch; }