/*
 * The storm page (/storms/<season>/<name>): a storm film. A navy rail on the left (the storm, what is happening at
 * the time shown, the key moments), two paper maps (wind and pressure, rain) side by side or one larger, and the
 * storm strip under them (the storm's strength through time, scrubbed like a timeline). The site's navy (#293548,
 * the top bar's) frames the paper maps; Outfit throughout; the design system's tokens below the stage.
 *
 *   1100px and up   rail 320 to 360px | the two maps side by side (or 2:1) | the strip under the maps
 *   768 to 1099px   rail 290px | the maps stacked | the strip
 *   767px and down  the maps (one at a time), the strip, then the rail in the page
 *
 * Dark mode by [data-theme="dark"] only.
 */
.sr-stage {
  --sr-sea: #edf5f8;
  --sr-ink: #0f172a;
  --sr-body: #334155;
  --sr-muted: #64748b;
  --sr-line: #e2e8f0;
  --sr-navy: #ffffff;
  --sr-navy-2: #f4f7fa;
  --sr-navy-line: #e2e8f0;
  --sr-n-ink: #0f172a;
  --sr-n-body: #334155;
  --sr-n-muted: #64748b;
  --sr-accent: var(--brand-700);
  --sr-rail-w: clamp(300px, 24vw, 360px);
  --sr-glass-bg: linear-gradient(140deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.78) 100%);
  --sr-glass-border: rgba(255,255,255,.8);
  --sr-glass-blur: blur(18px) saturate(170%);
  --sr-glass-shadow: 0 1px 2px rgba(15,23,42,.08), 0 10px 26px -14px rgba(15,23,42,.45);
  --sr-wind: #475569;
  --sr-rain: #0b7886;
  position: relative;
  display: grid;
  grid-template-columns: var(--sr-rail-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "rail maps" "rail strip";
  height: max(600px, calc(100svh - 64px));
  background: #e6edf2;
  font-family: 'Outfit', sans-serif;
  color: var(--sr-ink);
}
[data-theme="dark"] .sr-stage {
  --sr-sea: #2c353c;
  --sr-ink: #f1f5f9;
  --sr-body: #cbd5e1;
  --sr-muted: #94a3b8;
  --sr-line: #1e293b;
  --sr-navy: #0f172a;
  --sr-navy-2: #1e293b;
  --sr-navy-line: #334155;
  --sr-n-ink: #f1f5f9;
  --sr-n-body: #cbd5e1;
  --sr-n-muted: #94a3b8;
  --sr-wind: #cbd5e1;
  --sr-rain: #5fc4d0;
  --sr-glass-bg: linear-gradient(140deg, rgba(30,41,59,.9) 0%, rgba(15,23,42,.8) 100%);
  --sr-glass-border: rgba(148,163,184,.2);
  --sr-glass-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.75);
}
.sr-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-glass { background: var(--sr-glass-bg); -webkit-backdrop-filter: var(--sr-glass-blur); backdrop-filter: var(--sr-glass-blur);
  border: 1px solid var(--sr-glass-border); box-shadow: var(--sr-glass-shadow); }
.material-icons { line-height: 1; }

/* ── The rail ────────────────────────────────────────────────────────── */
.sr-rail { grid-area: rail; min-height: 0; display: flex; flex-direction: column; background: var(--sr-navy); color: var(--sr-n-body);
  border-right: 1px solid var(--sr-navy-line); }
.sr-rail-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.4) transparent; }
.sr-rail-body::-webkit-scrollbar { width: 7px; }
.sr-rail-body::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 4px; }
.sr-head { padding: 12px 18px 14px; }
.sr-sibs { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 -6px 6px; }
.sr-sib { display: inline-flex; align-items: center; min-width: 0; max-width: 38%; border-radius: 9999px; padding: 2px 8px 2px 2px;
  font: 500 12.5px 'Outfit', sans-serif; color: var(--sr-accent); text-decoration: none; }
.sr-sib-next { padding: 2px 2px 2px 8px; }
.sr-sib .material-icons { font-size: 18px; flex-shrink: 0; }
.sr-sib-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sr-sib:hover, .sr-sib-all:hover { background: var(--brand-50); }
.sr-sib.is-none { color: var(--sr-n-muted); opacity: .7; }
.sr-sib-all { font-size: 12px; color: var(--sr-n-muted); text-decoration: none; padding: 2px 8px; border-radius: 9999px; }
.sr-sib:focus-visible, .sr-sib-all:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.sr-name { font-size: 30px; font-weight: 600; line-height: 1.05; margin: 0 0 6px; color: var(--sr-n-ink); letter-spacing: -.02em; }
.sr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--sr-n-body); font-size: 13.5px; margin: 0; }
.sr-tag { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 1px 9px; border-radius: 9999px; }
.hz-wind { background: #4a6d96; color: #ffffff; }
.hz-both { background: #4f46e5; color: #ffffff; }
.hz-rain { background: #0b7886; color: #ffffff; }
.hz-snow { background: #94a3b8; color: #0f172a; }
.hz-none { background: #64748b; color: #ffffff; }
.sr-figs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--sr-navy-line); border-radius: 12px; overflow: hidden; }
.sr-fig { background: var(--sr-navy-2); padding: 9px 10px 8px; min-width: 0; cursor: default; }
.sr-fig b { display: block; font-size: 22px; font-weight: 600; color: var(--sr-n-ink); line-height: 1.05; white-space: nowrap; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sr-fig b small { font-size: 12px; font-weight: 500; color: var(--sr-n-muted); margin-left: 2px; }
.sr-fig b.is-missing { font-size: 13px; font-weight: 500; color: var(--sr-n-muted); padding: 5px 0 3px; }
.sr-fig span { display: block; font-size: 11.5px; color: var(--sr-n-body); margin-top: 3px; line-height: 1.2; }
.sr-fig em { display: block; font-style: normal; font-size: 11px; color: var(--sr-n-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* At the time shown */
.sr-now { margin: 0 12px; padding: 12px 14px 12px; border-radius: 14px; background: var(--sr-navy-2); }
.sr-now-when { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--sr-n-ink); font-variant-numeric: tabular-nums; }
.sr-now-dot { display: none; }
.sr-now-warn { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.sr-now-warn:empty { display: none; }
.sr-nw { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--sr-n-body); line-height: 1.3; }
.sr-nw i { width: 10px; height: 10px; border-radius: 3px; transform: translateY(1px); }
.sr-nw b { font-weight: 600; color: var(--sr-n-ink); }
.sr-nw span { grid-column: 2; font-size: 11.5px; color: var(--sr-n-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-nw.lv-yellow i, .lv-yellow > i, i.lv-yellow { background: #ffd400; }
.sr-nw.lv-amber i, .lv-amber > i, i.lv-amber { background: #ff9f00; }
.sr-nw.lv-red i, .lv-red > i, i.lv-red { background: #e5483b; }
.sr-nw-none, .sr-nw-more { font-size: 12px; color: var(--sr-n-muted); }
.sr-now-h { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 500; color: var(--sr-n-muted); }
.sr-now-obs { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--sr-navy-line); display: flex; flex-direction: column; gap: 4px; }
.sr-now-obs[hidden] { display: none; }
.sr-no { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sr-n-body); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-no .material-icons { font-size: 16px; color: var(--sr-n-muted); }
.sr-no b { color: var(--sr-n-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-now-line { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--sr-navy-line); }
.sr-now-line:empty { display: none; }
.sr-now-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.sr-now-row b { display: block; font-size: 13.5px; font-weight: 600; color: var(--sr-n-ink); line-height: 1.3; }
.sr-now-row p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--sr-n-body); }

/* Key moments */
.sr-moments { padding: 14px 0 18px; }
.sr-log-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 18px 4px; position: sticky; top: 0; z-index: 2; background: var(--sr-navy); }
.sr-log-title { font-size: 15px; font-weight: 600; color: var(--sr-n-ink); margin: 0; padding: 6px 0; }
.sr-all { border: 1px solid var(--sr-navy-line); background: transparent; color: var(--sr-accent); font: 500 12px 'Outfit', sans-serif; padding: 3px 10px; border-radius: 9999px; cursor: pointer; white-space: nowrap; }
.sr-all:hover { background: var(--brand-50); }
.sr-all:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.sr-log { list-style: none; margin: 0; padding: 0; }
.sr-log-day { padding: 10px 18px 3px; font-size: 11.5px; font-weight: 600; color: var(--sr-n-muted); }
.sr-line { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; align-items: start; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 7px 18px 7px 15px; border-left: 3px solid transparent; cursor: pointer;
  font: 400 13px/1.35 'Outfit', sans-serif; color: var(--sr-n-body); transition: background .15s; }
.sr-line:hover { background: #f1f5f9; }
.sr-line:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.sr-line:disabled { cursor: default; background: transparent; }
.sr-tile { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sr-tile .material-icons { font-size: 16px; }
.sr-tile-svg { width: 76%; height: 76%; display: block; }
.sr-line .sr-lx { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.sr-line .sr-lx > b { font-weight: 600; color: var(--sr-n-ink); }
.sr-line .sr-lt { font-size: 11.5px; color: var(--sr-n-muted); font-variant-numeric: tabular-nums; }
.sr-line .sr-wreg { font-size: 12px; color: var(--sr-n-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-line .sr-lbody { font-size: 12.5px; line-height: 1.45; color: var(--sr-n-body); }
.sr-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 0 7px; border-radius: 9999px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.sr-line.is-future { opacity: .62; }
.sr-line.is-now { background: var(--brand-50); border-left-color: var(--brand-600); opacity: 1; }
.sr-line.is-live { opacity: 1; }
.sr-line.is-live .sr-lt::after { content: ', in force now'; font-weight: 600; color: var(--sr-n-ink); }
.sr-log-empty { padding: 8px 18px; font-size: 12.5px; color: var(--sr-n-muted); }
.sr-line-more { padding: 0 18px 4px 55px; }
.sr-fgs-toggle, .sr-wtoggle { display: inline-flex; align-items: center; gap: 2px; margin: 4px 0 0 -4px; padding: 2px 9px 2px 3px; border: 0;
  border-radius: 9999px; background: transparent; color: var(--brand-700); font: 500 12.5px/1.3 'Outfit', sans-serif; cursor: pointer; }
.sr-fgs-toggle:hover, .sr-wtoggle:hover { background: var(--brand-50); }
.sr-fgs-toggle:focus-visible, .sr-wtoggle:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.sr-fgs-toggle .material-icons, .sr-wtoggle .material-icons { font-size: 18px; transition: transform .15s; }
.sr-fgs-toggle[aria-expanded="true"] .material-icons, .sr-wtoggle[aria-expanded="true"] .material-icons { transform: rotate(180deg); }
[data-theme="dark"] .sr-fgs-toggle, [data-theme="dark"] .sr-wtoggle { color: var(--brand-300); }
.sr-rail .sr-fgs-toggle, .sr-rail .sr-wtoggle { margin-top: 0; }
.sr-wmore { margin: 2px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--sr-navy-2); font-size: 12.5px; line-height: 1.45; color: var(--sr-n-body); }
.sr-wmore[hidden] { display: none; }
.sr-wmore p { margin: 0 0 5px; }
.sr-wmore p:last-child { margin: 0; }
.sr-wmore b, .sr-wmore .sr-wh { font-weight: 600; color: var(--sr-n-ink); }
.sr-wmore .sr-wn { font-size: 11.5px; color: var(--sr-n-muted); }
.sr-fgs-pv { margin: 6px 0 4px; max-width: 420px; }
.sr-fgs-pv[hidden] { display: none; }
.sr-fgs-img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 210 / 297; background: #fff;
  border: 1px solid var(--p-line, #e2e8f0); border-radius: 8px; box-shadow: 0 1px 3px rgba(15,23,42,.08); margin-bottom: 8px; }
.sr-fgs-pv.has-pic .sr-fgs-img { aspect-ratio: auto; }
.sr-fgs-link { font-size: 13.5px; }

/* ── The maps ────────────────────────────────────────────────────────── */
.sr-maps { grid-area: maps; position: relative; min-width: 0; min-height: 0; display: grid; gap: 3px; padding: 3px 3px 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); background: transparent; }
.sr-stage[data-layout="wind"] .sr-maps { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sr-stage[data-layout="rain"] .sr-maps { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sr-stage[data-layout="rain"] .sr-panel-rain { order: -1; }
.sr-panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 10px; background: var(--sr-sea); }
.sr-map { position: absolute; inset: 0; background: var(--sr-sea); }
.sr-map.leaflet-container { font-family: 'Outfit', sans-serif; background: var(--sr-sea); }
.sr-credits { font-size: 11px; color: var(--sr-muted); background: rgba(255,255,255,.75); padding: 1px 8px; border-radius: 9999px; margin: 0 8px 6px 0 !important; }
.sr-credits:empty { display: none; }
.sr-credits a { color: var(--sr-body); text-decoration: underline; text-underline-offset: 2px; }
.sr-credits span + a { margin-left: 8px; }
[data-theme="dark"] .sr-credits { background: rgba(15,23,42,.7); }
/* Each panel's head: its name and its own choices, top left. */
.sr-phead { position: absolute; left: 10px; top: 10px; right: 10px; z-index: 640; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  width: max-content; max-width: calc(100% - 20px); padding: 5px 6px 5px 11px; border-radius: 14px; }
.sr-ptitle { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--sr-ink); margin-right: 2px; }
.sr-ptitle .material-icons { font-size: 17px; color: var(--brand-700); }
[data-theme="dark"] .sr-ptitle .material-icons { color: var(--brand-300); }
.sr-seg { display: inline-flex; gap: 2px; padding: 2px; background: rgba(15,23,42,.07); border-radius: 9999px; }
[data-theme="dark"] .sr-seg { background: rgba(148,163,184,.14); }
.sr-seg button { border: 0; background: transparent; color: var(--sr-body); font: 500 12px 'Outfit', sans-serif; padding: 3px 10px; border-radius: 9999px; cursor: pointer; white-space: nowrap; }
.sr-seg button.is-on { background: #fff; color: var(--brand-800); box-shadow: 0 1px 2px rgba(15,23,42,.16); font-weight: 600; }
[data-theme="dark"] .sr-seg button.is-on { background: #334155; color: #fff; }
.sr-seg button:disabled { cursor: default; opacity: .45; }
.sr-seg button:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.sr-pbtn, .sr-iconbtn { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--sr-body); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; }
.sr-pbtn:hover, .sr-iconbtn:hover { background: rgba(15,23,42,.08); color: var(--sr-ink); }
.sr-pbtn:focus-visible, .sr-iconbtn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.sr-pbtn .material-icons, .sr-iconbtn .material-icons { font-size: 18px; }
/* Keys, bottom left of each panel. */
.sr-pkey { position: absolute; left: 10px; bottom: 10px; z-index: 640; width: min(250px, calc(100% - 20px)); padding: 8px 10px 7px; border-radius: 12px; }
.sr-pkey[hidden], .sr-pkey:not(:has(> :not([hidden]))) { display: none; }
#srRadarKeys[hidden], #srKeysRain[hidden] { display: none; }
#srRadarKeys:not([hidden]) + #srKeysRain:not([hidden]) { margin-top: 6px; }
.sr-key p { margin: 0 0 3px; font-size: 11.5px; font-weight: 600; color: var(--sr-ink); }
.sr-key + .sr-key, .sr-key + .sr-seg { margin-top: 6px; }
.sr-key-row { display: flex; }
.sr-key-sw { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sr-key-sw i { display: block; width: 100%; height: 8px; }
.sr-key-sw:first-child i { border-radius: 3px 0 0 3px; }
.sr-key-sw:last-child i { border-radius: 0 3px 3px 0; }
.sr-key-sw b { font-size: 11px; font-weight: 400; color: var(--sr-muted); line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.sr-key-row .sr-key-sw:nth-child(even) b { visibility: hidden; }
.sr-key-wind .sr-key-sw:nth-child(even) b, .sr-key[data-key="gust"] .sr-key-sw b { visibility: visible; letter-spacing: -.04em; }
.sr-key .sr-key-note { margin: 4px 0 0; font-size: 11px; font-weight: 400; color: var(--sr-muted); line-height: 1.35; }
.sr-seg-unit button { padding: 2px 8px; font-size: 11.5px; }
/* Readouts on the map: the radar spot value and a station's name. */
.sr-rtip { position: absolute; left: 0; top: 0; z-index: 655; pointer-events: none; display: flex; flex-direction: column; gap: 1px;
  padding: 5px 9px 6px; border-radius: 10px; background: rgba(255,255,255,.97); box-shadow: 0 6px 18px -6px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06);
  font-family: 'Outfit', sans-serif; white-space: nowrap; }
.sr-rtip[hidden] { display: none; }
.sr-rtip b { font-size: 13px; font-weight: 600; color: var(--sr-ink); }
.sr-rtip span { font-size: 11.5px; color: var(--sr-muted); }
[data-theme="dark"] .sr-rtip { background: rgba(15,23,42,.95); box-shadow: 0 6px 18px -6px rgba(0,0,0,.6), 0 0 0 1px rgba(148,163,184,.2); }
/* The maps' shared tools: what to show over both, and the map buttons. */
.sr-tools { position: absolute; right: 13px; bottom: 34px; z-index: 650; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.sr-tools > * { pointer-events: auto; }
.sr-shows { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; }
.sr-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--sr-ink); cursor: pointer; user-select: none; white-space: nowrap; }
.sr-chk[hidden] { display: none; }
.sr-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sr-sw { position: relative; flex-shrink: 0; width: 26px; height: 15px; border-radius: 9999px; background: rgba(15,23,42,.2); transition: background .15s; }
.sr-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.3); transition: transform .15s; }
.sr-chk input:checked + .sr-sw { background: var(--brand-600); }
.sr-chk input:checked + .sr-sw::after { transform: translateX(11px); }
.sr-chk input:focus-visible + .sr-sw { box-shadow: 0 0 0 3px rgba(47,134,150,.4); }
.sr-areas select { font: 500 12px Outfit, sans-serif; width: 100%; padding: 3px 22px 3px 9px; border-radius: 20px; border: 1px solid #cbd5e1; background-color: #fff; color: #1f2937; }
[data-theme="dark"] .sr-chk { color: #e2e8f0; }
[data-theme="dark"] .sr-areas select { background-color: #1e293b; border-color: #475569; color: #e2e8f0; }
.sr-mapctl { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.28); box-shadow: 0 2px 8px rgba(15,23,42,.28); }
.sr-mapctl button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--brand-800); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sr-mapctl button + button { border-top: 1px solid rgba(15,23,42,.18); }
.sr-mapctl button:hover { background: var(--brand-50); color: var(--sr-ink); }
.sr-mapctl button:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.sr-mapctl .material-icons { font-size: 19px; }
.sr-stage[data-layout="split"] #srSplit { display: none; }
[data-theme="dark"] .sr-mapctl { background: var(--dk-surface, #0f172a); border-color: rgba(203,213,225,.4); }
[data-theme="dark"] .sr-mapctl button { color: #e2e8f0; }
.sr-phone-switch { display: none; }
.sr-nodata, .sr-status { position: absolute; left: 50%; transform: translateX(-50%); z-index: 645; margin: 0; white-space: nowrap;
  font-size: 12.5px; font-weight: 500; color: var(--sr-ink); padding: 5px 12px; border-radius: 9999px; }
.sr-nodata { bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
.sr-status { top: 50%; }
.sr-nodata[hidden], .sr-status[hidden] { display: none; }
.sr-nodata.is-loading::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(47,134,150,.25); border-top-color: var(--brand-600); animation: sr-spin .8s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sr-nodata.is-loading::before { animation: none; } }

/* The story's card, over the maps' bottom left. */
.sr-moment { position: absolute; left: 13px; bottom: 13px; z-index: 660; width: min(380px, calc(100% - 26px)); border-radius: 16px; padding: 12px 14px 10px;
  max-height: calc(100% - 80px); overflow-y: auto; overscroll-behavior: contain; }
.sr-moment[hidden] { display: none; }
.sr-moment-head { display: grid; grid-template-columns: 26px minmax(0, 1fr) 28px; gap: 10px; align-items: start; }
.sr-moment-when { margin: 0 0 2px; font-size: 12px; color: var(--sr-muted); font-variant-numeric: tabular-nums; }
.sr-moment-text { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--sr-ink); }
.sr-moment-reg { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--sr-body); }
.sr-moment-body { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sr-body); }
.sr-moment-body[hidden], .sr-moment-pic[hidden] { display: none; }
.sr-moment-pic { margin: 10px 0 0; }
.sr-moment-pic img { display: block; width: 100%; max-height: min(36vh, 340px); object-fit: contain; object-position: top; background: #fff; border: 1px solid var(--sr-line); border-radius: 8px; }
.sr-moment-link { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.sr-moment-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.sr-moment-btn { display: inline-flex; align-items: center; gap: 2px; border: 0; cursor: pointer; border-radius: 9999px; padding: 4px 10px; font: 500 12.5px 'Outfit', sans-serif; background: rgba(15,23,42,.07); color: var(--sr-ink); }
.sr-moment-btn:hover:not(:disabled) { background: var(--brand-50); color: var(--brand-800); }
.sr-moment-btn:disabled { opacity: .45; cursor: default; }
.sr-moment-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.sr-moment-btn .material-icons { font-size: 18px; }
.sr-moment-play { padding: 4px; background: var(--brand-700); color: #fff; }
.sr-moment-play:hover:not(:disabled) { background: var(--brand-800); color: #fff; }
.sr-moment-count { margin-left: auto; font-size: 11.5px; color: var(--sr-muted); }
[data-theme="dark"] .sr-moment-btn { background: rgba(148,163,184,.16); }
.sr-stage[data-mode="story"] .sr-tools .sr-shows { display: none; }

/* ── The storm strip ─────────────────────────────────────────────────── */
.sr-strip { grid-area: strip; min-width: 0; margin: 3px; padding: 8px 14px 6px; border-radius: 10px; background: var(--sr-navy); color: var(--sr-n-body); }
.sr-sbar { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; min-width: 0; }
.sr-play { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-700); color: #fff; padding: 0; }
.sr-play:hover { background: var(--brand-800); }
.sr-play:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }
.sr-play:disabled { opacity: .5; cursor: default; }
.sr-play .material-icons { font-size: 26px; }
.sr-readout { display: flex; flex-direction: column; line-height: 1.1; min-width: 104px; font-variant-numeric: tabular-nums; }
.sr-rd-date { font-size: 12px; color: var(--sr-n-muted); white-space: nowrap; }
.sr-rd-time { font-size: 20px; font-weight: 600; color: var(--sr-n-ink); white-space: nowrap; letter-spacing: -.01em; }
.sr-rd-time small { font-size: 11.5px; font-weight: 500; color: var(--sr-n-muted); margin-left: 4px; }
.sr-story-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--brand-200); background: var(--brand-50); color: var(--brand-800);
  font: 600 13px 'Outfit', sans-serif; padding: 6px 13px 6px 10px; border-radius: 9999px; cursor: pointer; white-space: nowrap; }
.sr-story-btn .material-icons { font-size: 18px; }
.sr-story-btn:hover { background: var(--brand-100); }
.sr-story-btn[aria-pressed="true"] { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
.sr-story-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.sr-slegend { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; font-size: 11.5px; color: var(--sr-n-muted); min-width: 0; }
.sr-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sr-lg i { display: inline-block; flex-shrink: 0; }
.sr-lg-wind i { width: 16px; height: 2.5px; border-radius: 2px; background: var(--sr-wind); }
.sr-lg-rain i { width: 12px; height: 10px; border-radius: 2px; background: rgba(11,120,134,.2); box-shadow: inset 0 2px 0 var(--sr-rain); }
.sr-lg-warn i { width: 16px; height: 6px; border-radius: 2px; background: linear-gradient(90deg, #ffd400 0 33%, #ff9f00 33% 66%, #e5483b 66%); }
/* The chart itself: scrub anywhere on it. */
.sr-chart { position: relative; height: 104px; cursor: ew-resize; touch-action: none; user-select: none; border-radius: 10px; outline: none; }
.sr-chart:focus-visible { box-shadow: 0 0 0 2px var(--brand-500); }
.sr-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.sr-s-ribbase { fill: #eef2f6; }
.sr-s-rib.lv-yellow { fill: #ffd400; }
.sr-s-rib.lv-amber { fill: #ff9f00; }
.sr-s-rib.lv-red { fill: #e5483b; }
.sr-s-mid { stroke: #e2e8f0; stroke-width: 1; }
.sr-s-daylab { fill: var(--sr-n-muted); font: 500 11.5px 'Outfit', sans-serif; }
.sr-s-guide { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 2 4; }
.sr-s-guidelab { fill: #94a3b8; font: 500 11px 'Outfit', sans-serif; }
.sr-s-wind { fill: none; stroke: var(--sr-wind); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sr-s-rain { fill: rgba(95,196,208,.32); stroke: var(--sr-rain); stroke-width: 1.2; stroke-linejoin: round; }
.sr-s-impact { pointer-events: none; }
.sr-s-veil { fill: var(--sr-navy); opacity: .5; }
/* The playhead, and its dot riding the wind line. */
.sr-headline { position: absolute; left: 0; top: 0; bottom: 18px; width: 0; pointer-events: none; z-index: 3; }
.sr-headline::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--sr-n-ink); border-radius: 1px; }
.sr-headline::after { content: ''; position: absolute; left: -6px; top: calc(var(--dot-y, -99px) - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--sr-wind);
  border: 2px solid var(--sr-navy); }
.sr-chart.is-drag .sr-headline::before { width: 3px; left: -1.5px; }
/* Pins: the storm's moments, on the plot's top edge. */
.sr-pins { position: absolute; left: 0; right: 0; top: 13px; height: 0; z-index: 4; }
.sr-pin { position: absolute; top: 0; transform: translateX(-50%); width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--sr-navy);
  background: var(--c); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 1px rgba(15,23,42,.2); }
.sr-pin .material-icons { font-size: 12px; }
.sr-pin .sr-tile-svg { width: 80%; height: 80%; }
.sr-pin.is-insight { width: 14px; height: 14px; top: 3px; background: #cfe8ec; }
.sr-pin.is-insight .material-icons { font-size: 9px; }
.sr-pin:hover, .sr-pin:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-500); z-index: 2; }
.sr-pin-lab { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; font: 600 11px 'Outfit', sans-serif; color: var(--sr-n-ink);
  white-space: nowrap; text-shadow: 0 0 3px var(--sr-navy), 0 0 3px var(--sr-navy), 0 0 3px var(--sr-navy); pointer-events: none; }
/* Hovering the chart: the time and what the strip shows there. */
.sr-hover { position: absolute; bottom: calc(100% + 6px); z-index: 20; padding: 7px 10px 8px; border-radius: 10px; background: #fff; color: var(--sr-ink);
  border: 1px solid #e2e8f0; box-shadow: 0 8px 20px -10px rgba(15,23,42,.35); display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.35; pointer-events: none; white-space: nowrap; }
.sr-hover[hidden] { display: none; }
.sr-hover b { font-size: 12.5px; font-weight: 600; }
.sr-hover span { color: var(--sr-body); }
.sr-hover .sr-hv-w { display: inline-flex; align-items: center; gap: 6px; }
.sr-hover .sr-hv-w i { width: 10px; height: 10px; border-radius: 3px; }
.sr-hover::after { content: ''; position: absolute; top: 100%; left: calc(var(--hx, 50%) - 5px); border: 5px solid transparent; border-top-color: #fff; }
[data-theme="dark"] .sr-hover { background: #1e293b; color: #f1f5f9; }
[data-theme="dark"] .sr-hover span { color: #cbd5e1; }
[data-theme="dark"] .sr-hover::after { border-top-color: #1e293b; }
.sr-wtip { display: none; }

/* ── Tablet: the maps stacked ────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1099px) {
  .sr-stage { --sr-rail-w: 290px; }
  .sr-maps, .sr-stage[data-layout="wind"] .sr-maps, .sr-stage[data-layout="rain"] .sr-maps { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .sr-stage[data-layout="wind"] .sr-maps, .sr-stage[data-layout="rain"] .sr-maps { grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); }
  .sr-slegend { display: none; }
  .sr-name { font-size: 26px; }
  .sr-fig b { font-size: 19px; }
}

/* ── Phone: the maps (one at a time), the strip, then the rail in the page ── */
@media (max-width: 767px) {
  .sr-stage { display: flex; flex-direction: column; height: auto; }
  .sr-maps { order: 1; height: max(420px, calc(100svh - 64px - 150px)); grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; padding: 0; }
  .sr-panel { border-radius: 0; }
  .sr-stage[data-phone="rain"] .sr-panel-wind, .sr-stage[data-phone="wind"] .sr-panel-rain { display: none; }
  .sr-strip { order: 2; padding: 8px 10px 6px; }
  .sr-rail { order: 3; border-right: 0; }
  .sr-rail-body { overflow: visible; }
  .sr-pbtn[data-focus], #srSplit { display: none; }
  .sr-phead { left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 4px 5px 4px 9px; }
  .sr-phone-switch { display: flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 650; padding: 3px; border-radius: 9999px; gap: 2px; }
  .sr-phone-switch button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--sr-body); font: 600 13px 'Outfit', sans-serif; padding: 6px 13px; border-radius: 9999px; cursor: pointer; }
  .sr-phone-switch button .material-icons { font-size: 16px; }
  .sr-phone-switch button[aria-pressed="true"] { background: var(--brand-700); color: #fff; }
  .sr-pkey { bottom: 56px; left: 8px; width: min(230px, calc(100% - 70px)); }
  .sr-tools { right: 8px; bottom: 56px; flex-direction: column; align-items: flex-end; }
  .sr-shows { padding: 6px 8px; }
  .sr-moment { left: 8px; right: 8px; width: auto; bottom: 56px; max-height: calc(100% - 70px); }
  .sr-moment-pic img { display: none; }
  .sr-sbar { gap: 9px; }
  .sr-readout { min-width: 0; }
  .sr-rd-time { font-size: 17px; }
  .sr-slegend { display: none; }
  .sr-story-btn { margin-left: auto; padding: 6px 11px 6px 9px; font-size: 12.5px; }
  .sr-chart { height: 92px; }
  .sr-head { padding: 14px 16px 14px; }
  .sr-name { font-size: 26px; }
  .sr-now { margin: 0 10px; }
  .sr-log-head { position: static; }
}
@media (max-width: 480px) {
  .sr-seg button { padding: 3px 8px; font-size: 11.5px; }
  .sr-ptitle { font-size: 13px; }
  .sr-shows .sr-areas { display: none; }
  .sr-sources, .sr-fgs { grid-template-columns: minmax(0, 1fr); }
}
/* Short laptop screens: a tighter rail head and strip. */
@media (min-width: 768px) and (max-height: 800px) {
  .sr-head { padding: 9px 16px 11px; }
  .sr-name { font-size: 25px; }
  .sr-figs { margin-top: 10px; }
  .sr-fig b { font-size: 19px; }
  .sr-chart { height: 92px; }
  .sr-play { width: 36px; height: 36px; }
  .sr-rd-time { font-size: 18px; }
}
@media (min-width: 1700px) and (min-height: 960px) {
  .sr-stage { --sr-rail-w: 400px; }
  .sr-name { font-size: 36px; }
  .sr-fig b { font-size: 26px; }
  .sr-line { font-size: 14px; }
  .sr-chart { height: 124px; }
  .sr-ptitle { font-size: 15px; }
  .sr-seg button { font-size: 13px; }
}

/* ── Below the replay ── */
.sr-wrap { max-width: 1180px; margin: 0 auto; }
.sr-below { margin: 12px 0 8px; }
.sr-card { background: var(--p-surface); border-radius: 20px; padding: 22px 24px; box-shadow: var(--p-shadow-card); border: 1px solid var(--p-line); }
.sr-h2 { font-size: 18px; font-weight: 600; color: var(--p-ink); margin: 0 0 12px; }
.sr-sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 28px; }
.sr-src { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--p-body); padding: 7px 0; border-bottom: 1px solid var(--p-line); }
.sr-src::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #cbd5e1; transform: translateY(-1px); }
.sr-src.is-full::before { background: var(--brand-600); }
.sr-src.is-partial::before { background: linear-gradient(90deg, var(--brand-600) 50%, #cbd5e1 50%); }
.sr-src.is-none { color: var(--p-muted); }
.sr-src.is-loading::before { display: none; }
.sr-src b { font-weight: 600; color: var(--p-ink); }
.sr-src.is-none b { color: var(--p-body); font-weight: 500; }
/* The summary, Flood guidance through the storm, the data list and the credits, stacked */
.sr-below { display: flex; flex-direction: column; gap: 14px; }
/* The storm in brief: the header of the sections below the map. */
.sr-brief-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sr-brief-name { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--p-ink); margin: 0; }
.sr-brief-dates { font-size: 15px; color: var(--p-body); }
.sr-brief-text { font-size: 16px; line-height: 1.55; color: var(--p-body); margin: 10px 0 0; max-width: 860px; }
.sr-brief-text[hidden] { display: none; }
.sr-summary-text p { font-size: 15.5px; line-height: 1.6; color: var(--p-body); margin: 0 0 10px; max-width: 760px; }
.sr-report { margin: 4px 0 0; font-size: 14.5px; }
.sr-report a, .sr-fgs-link, .sr-foot-credits a { color: var(--p-link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sr-fgs-note { font-size: 14px; line-height: 1.5; color: var(--p-body); margin: 0 0 6px; max-width: 760px; }
.sr-fgs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.sr-fgs-row { padding: 11px 0 10px; border-bottom: 1px solid var(--p-line); min-width: 0; }
.sr-fgs-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.sr-fgs-when { font-size: 14px; color: var(--p-body); font-variant-numeric: tabular-nums; }
.sr-fgs-when b { font-weight: 600; color: var(--p-ink); margin-right: 4px; }
.sr-fgs-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 9999px; border: 1px solid rgba(0,0,0,.05); white-space: nowrap; }
.sr-fgs-head { font-size: 13.5px; line-height: 1.45; color: var(--p-body); margin: 6px 0 0; }
.sr-foot-credits { font-size: 12px; color: var(--p-body); line-height: 1.55; max-width: 900px; margin: 18px 0 8px; }
.sr-foot-credits p { margin: 0 0 6px; }
.sr-pending { margin: 24px auto; max-width: 680px; }
.sr-pending .sr-meta { color: var(--p-body); }
.sr-pending-text { font-size: 16px; line-height: 1.55; color: var(--p-body); margin: 16px 0 18px; }
.sr-back { color: var(--p-link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }


@media (min-width: 1100px) {
  /* base.html caps the content at 96rem; the storm page lets its sections run wider. */
  body.sr-page main > div:has(> .sr-wrap) { max-width: 1720px; }
  .sr-wrap { max-width: 1640px; }
  /* Two columns: the summary with the data list under it, beside the Flood Guidance Statements; the credits under
     both. With no summary the data list takes its place. */
  .sr-below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "head head" "sum fgs" "src fgs" "cred cred"; gap: 18px; align-items: start; }
  .sr-below > .sr-brief { grid-area: head; }
  .sr-below > .sr-summary { grid-area: sum; }
  .sr-below > .sr-card-fgs { grid-area: fgs; }
  .sr-below > .sr-card-src { grid-area: src; }
  .sr-below > .sr-foot-credits { grid-area: cred; }
  .sr-below > .sr-summary[hidden] ~ .sr-card-src { grid-row: 2 / 4; }
  .sr-summary-text p { max-width: none; }
  .sr-fgs { grid-template-columns: minmax(0, 1fr); }
  .sr-foot-credits { max-width: none; }
}
@media (min-width: 1280px) {
  /* Below the map */
  .sr-card { padding: 26px 30px; }
  .sr-h2 { font-size: 21px; margin-bottom: 14px; }
  .sr-summary-text p { font-size: 17px; line-height: 1.65; }
  .sr-report { font-size: 16px; }
  .sr-fgs-note { font-size: 16px; }
  .sr-fgs-when { font-size: 16px; }
  .sr-fgs-head { font-size: 15.5px; }
  .sr-fgs-chip { font-size: 13.5px; }
  .sr-fgs-toggle { font-size: 14.5px; }
  .sr-fgs-link { font-size: 15px; }
  .sr-src { font-size: 16px; }
  .sr-foot-credits { font-size: 13.5px; }
}

/* ── Round 2: the rail's head and "now" stay put while the moments scroll; the shows sit in the strip ── */
.sr-rail-top { flex: none; padding-bottom: 4px; }
.sr-rail-body { flex: 1 1 auto; min-height: 120px; border-top: 1px solid var(--sr-navy-line); margin-top: 10px; }
.sr-moments { padding-top: 4px; }
.sr-tools { top: 50%; bottom: auto; transform: translateY(-50%); }
.sr-shows { display: flex; flex-direction: row; align-items: center; gap: 14px; flex-shrink: 0; }
.sr-strip .sr-areas select { width: auto; }
.sr-slegend { gap: 4px 12px; }
.sr-chart { height: 118px; }
.sr-pkey [data-key="radar"] .sr-key-note, .sr-pkey [data-key="radar-total"] { display: none; }
.sr-pkey #srRadarKeys:has([data-key="radar-total"]) { display: none; }
@media (min-width: 768px) and (max-height: 800px) { .sr-chart { height: 104px; } }
@media (max-width: 1279px) { .sr-slegend { display: none; } }
@media (max-width: 767px) {
  .sr-rail-body { border-top: 0; margin-top: 0; }
  .sr-sbar { flex-wrap: wrap; }
  .sr-shows { order: 5; width: 100%; gap: 12px; padding: 2px 2px 4px; }
  .sr-chart { height: 104px; }
}
.sr-s-wind { stroke-width: 2.4; }
.sr-lg-wind i { width: 18px; height: 3px; background: linear-gradient(90deg, #9cc3e6 0 35%, #ffd400 35% 60%, #ff9f00 60% 80%, #ff5a4a 80%); }
.sr-s-wind { stroke: var(--sr-wind); stroke-width: 1.8; fill: none; }
.sr-s-rain { stroke: var(--sr-rain); stroke-width: 1.5; fill: none; }
.sr-lg-wind i { width: 12px; height: 10px; border-radius: 2px; background: rgba(71,85,105,.18); box-shadow: inset 0 2px 0 var(--sr-wind); }
.sr-headline::after { background: var(--sr-wind); }
.sr-headline { --dot-y: -99px; }
@media (min-width: 768px) and (max-width: 1099px) {
  .sr-sbar { flex-wrap: wrap; row-gap: 6px; }
  .sr-shows { margin-left: auto; }
}

/* ── Round 3 (user feedback 2026-11-12) ── */
/* The maps always side by side; the map buttons top right of the maps. */
.sr-maps, .sr-stage[data-layout] .sr-maps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sr-stage[data-layout="rain"] .sr-panel-rain { order: 0; }
.sr-tools { top: 13px; right: 13px; bottom: auto; transform: none; }
@media (min-width: 768px) and (max-width: 1099px) {
  .sr-maps, .sr-stage[data-layout] .sr-maps { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}
/* The strip sits over the maps' stacking, so its hover readout is never cut off. */
.sr-strip { position: relative; z-index: 1100; }
/* Warnings in force: each one a button that draws its area on the maps. */
.sr-nw { width: 100%; border: 0; background: transparent; text-align: left; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.sr-nw:hover:not(:disabled) { background: #eef3f7; }
.sr-nw.is-sel { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200); }
.sr-nw:disabled { cursor: default; }
.sr-nw:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.sr-line.is-sel { box-shadow: inset 3px 0 0 var(--brand-700); }
/* Key moments: the head with Play the story, then the filters. */
.sr-log-head .sr-story-btn { padding: 4px 11px 4px 8px; font-size: 12.5px; }
.sr-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 18px 6px; }
.sr-filters[hidden] { display: none; }
.sr-fchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--sr-navy-line); background: #fff; color: var(--sr-n-muted);
  font: 500 12px 'Outfit', sans-serif; padding: 3px 10px; border-radius: 9999px; cursor: pointer; }
.sr-fchip small { font-size: 11px; color: inherit; opacity: .8; }
.sr-fchip[aria-pressed="true"] { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-800); }
.sr-fchip:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.sr-rail .sr-wtoggle { color: var(--brand-700); }
/* Keys: a short head with a settings gear; units and notes behind it. */
.sr-key-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sr-key-head p { margin: 0 0 3px; }
.sr-key-gear { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sr-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.sr-key-gear:hover, .sr-key-gear[aria-expanded="true"] { background: rgba(15,23,42,.08); color: var(--sr-ink); }
.sr-key-gear:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.sr-key-gear .material-icons { font-size: 15px; }
.sr-key-more { display: none; margin-top: 6px; }
.sr-pkey[data-open="1"] .sr-key-more { display: block; }
.sr-key-more .sr-seg { margin-bottom: 4px; }
.sr-key-ramp { height: 8px; border-radius: 3px; background: linear-gradient(90deg, #2b2b2b, #8a8a8a, #ffffff); box-shadow: inset 0 0 0 1px rgba(15,23,42,.15); }
.sr-key-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--sr-muted); margin-top: 2px; }
/* One readout at a time on a map: a station's hides the radar's. */
.has-otip .sr-rtip:not(.sr-otip) { display: none !important; }
/* Flood guidance through the storm: a line of statements. */
.sr-fgsline { list-style: none; margin: 10px 0 0; padding: 0 0 4px; display: flex; gap: 6px; overflow-x: auto; }
.sr-fgs-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 92px; padding: 12px 10px 8px; border: 1px solid var(--p-line); border-radius: 12px;
  background: var(--p-surface); cursor: pointer; font: inherit; text-align: left; overflow: hidden; }
.sr-fgs-tile:hover { border-color: var(--brand-300); }
.sr-fgs-tile[aria-pressed="true"] { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
.sr-fgs-tile:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.sr-fgs-band { position: absolute; left: 0; right: 0; top: 0; height: 6px; }
.sr-fgs-day { font-size: 13.5px; font-weight: 600; color: var(--p-ink); white-space: nowrap; }
.sr-fgs-time { font-size: 12px; color: var(--p-muted); }
.sr-fgs-risk { font-size: 12.5px; color: var(--p-body); margin-top: 3px; white-space: nowrap; }
.sr-fgs-detail { margin-top: 12px; max-width: 760px; }
.sr-fgs-detail[hidden] { display: none; }
.sr-fgs-dh { margin: 0 0 4px; font-size: 15px; color: var(--p-body); }
.sr-fgs-dh b { color: var(--p-ink); }
.sr-fgs-detail .sr-fgs-img { max-width: 520px; margin-top: 8px; }
@media (min-width: 1100px) {
  .sr-below { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sum" "fgs" "src" "cred"; grid-template-rows: auto; }
  .sr-below > .sr-summary[hidden] ~ .sr-card-src { grid-row: auto; }
}
.sr-log-head { flex-wrap: wrap; padding-bottom: 8px; }
.sr-log-head .sr-filters { width: 100%; padding: 0; }
.sr-nw { font-size: 12.5px; line-height: 1.3; }
.sr-nw b { font-size: 13px; }
.sr-line .sr-lbody { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-line.is-now .sr-lbody { display: block; -webkit-line-clamp: unset; }

/* Pictures from the storm: two photos side by side, each with its credit. */
.sr-photo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.sr-photo { margin: 0; min-width: 0; }
.sr-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: #e2e8f0; }
.sr-photo figcaption { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--p-body); }
.sr-photo figcaption b { font-weight: 600; color: var(--p-ink); }
.sr-photo-credit { font-size: 12px; color: var(--p-muted); }
.sr-photo-credit a { color: var(--p-link); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1100px) { .sr-below { grid-template-areas: "sum" "photos" "fgs" "src" "cred"; } .sr-below > .sr-photos { grid-area: photos; } .sr-photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Round 5 ── */
/* Keys bottom right of each panel (over the map credits). */
.sr-pkey { left: auto; right: 10px; bottom: 28px; }
/* One map filling the space, and back. */
.sr-stage[data-full] .sr-maps { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
.sr-stage[data-full="rain"] .sr-panel-wind, .sr-stage[data-full="wind"] .sr-panel-rain { display: none; }
.sr-full[aria-pressed="true"] { background: var(--brand-700); color: #fff; }
@media (max-width: 767px) { .sr-full { display: none; } }
/* The headline figures are moments: each one goes to its time. */
.sr-fig[data-fig] { cursor: pointer; transition: background .15s; border-top: 3px solid transparent; }
.sr-fig[data-fig]:hover { background: #eaf1f5; }
.sr-fig[data-fig]:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.sr-fig-gust { border-top-color: #4a6d96 !important; }
.sr-fig-rain { border-top-color: #0b7886 !important; }
.sr-fig-low { border-top-color: #c026d3 !important; }
.sr-fig-gust b { color: #2f4f75; }
.sr-fig-rain b { color: #075e69; }
.sr-fig-low b { color: #86198f; }
/* The story card in short paragraphs. */
.sr-moment-body .sr-para { display: block; }
.sr-moment-body .sr-para + .sr-para { margin-top: 6px; }
.sr-key-line { background: #c026d3; }
.sr-photo-space { max-width: 760px; }
.sr-photo-space img { aspect-ratio: 4 / 3; }

/* ── Round 6 ── */
/* Map buttons on each panel, top right. */
.sr-panel .sr-mapctl { position: absolute; top: 10px; right: 10px; z-index: 650; }
.sr-panel .sr-phead { max-width: calc(100% - 66px); }
/* The moments list shows about three at a time and scrolls. */
@media (min-width: 768px) { .sr-rail-body { flex: 0 1 auto; max-height: 430px; } }
/* A moment's focus: a pulsing ring on the place. */
.sr-focus { pointer-events: none; }
.sr-focus span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #c026d3; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.sr-focus span + span { animation: sr-focus 1.6s ease-out infinite; border-width: 2px; }
@keyframes sr-focus { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sr-focus span + span { animation: none; } }

/* ── Round 7 ── */
/* The strip: pressure line, wettest station's running rain total, clearer day lines. */
.sr-s-pres { fill: none; stroke: #c026d3; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sr-s-cum { fill: none; stroke: var(--sr-rain); stroke-width: 1.5; stroke-linejoin: round; }
.sr-s-cumfill { fill: rgba(95,196,208,.26); stroke: none; }
.sr-lg-pres i { width: 18px; height: 3px; border-radius: 2px; background: #c026d3; box-shadow: none; }
.sr-lg-cum i { width: 12px; height: 10px; border-radius: 2px; background: rgba(95,196,208,.35); box-shadow: inset 0 2px 0 var(--sr-rain); }
.sr-headline::after { background: #c026d3; }
.sr-s-mid { stroke: #94a3b8; stroke-width: 1.5; }
[data-theme="dark"] .sr-s-mid { stroke: #64748b; }
.sr-s-daylab { fill: var(--sr-n-body); font: 600 12px 'Outfit', sans-serif; }
/* Pins: smaller, on up to three rows so none overlap. */
.sr-pin { top: calc(var(--row, 0) * 19px); width: 18px; height: 18px; }
.sr-pin.is-insight { top: calc(var(--row, 0) * 19px + 2px); width: 14px; height: 14px; }
.sr-pin .material-icons { font-size: 11px; }
/* Keys sit in the bottom right corner of each map; the map credits moved into the Data sources panel. */
.sr-pkey { right: 10px; bottom: 10px; }
[data-theme="dark"] .sr-pkey { bottom: 28px; }
.sr-credit-link { margin: 0; padding: 14px 4px 22px; font-size: 13.5px; color: var(--p-body, #475569); }
.sr-credit-link button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Laptop screens: the whole stage, strip included, fits the window (no 600px floor, a shorter strip). */
@media (min-width: 768px) {
  .sr-stage { height: max(480px, calc(100svh - 64px)); }
}
@media (min-width: 768px) and (max-height: 800px) {
  .sr-chart { height: 84px; }
  .sr-strip { padding: 6px 14px 4px; }
  .sr-play { width: 34px; height: 34px; }
  .sr-play .material-icons { font-size: 22px; }
  .sr-rd-time { font-size: 17px; }
  .sr-pin { transform: translateX(-50%) scale(.92); }
}

/* ── Round 7: warnings in the now card, and a warning's own card ── */
.sr-nwrow { display: flex; align-items: center; gap: 4px; }
.sr-nwrow .sr-nw { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
.sr-nw-i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--sr-n-muted); cursor: pointer; }
.sr-nw-i .material-icons { font-size: 18px; }
.sr-nw-i:hover { background: #eef3f7; color: var(--brand-700); }
.sr-nw-i:focus-visible, .sr-nw-more:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.sr-nw-more { align-self: flex-start; border: 0; background: none; padding: 3px 0 0; font: 600 12px 'Outfit', sans-serif; color: var(--brand-700); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sr-now-warn.is-all { max-height: 176px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sr-wtoggle .material-icons { font-size: 16px; }

.sr-wmodal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 12px; }
.sr-wmodal[hidden], .sr-wm-pdf[hidden], .sr-wm-inlinepdf[hidden] { display: none; }
.sr-wm-back { position: absolute; inset: 0; background: rgba(30, 41, 59, .4); }
.sr-wm-card { position: relative; width: min(580px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28); font-family: 'Outfit', sans-serif; color: var(--sr-ink, #0f172a); }
.sr-wm-head { flex: none; display: grid; grid-template-columns: 14px minmax(0, 1fr) 32px; gap: 12px; align-items: start; padding: 18px 16px 12px 20px; border-bottom: 1px solid #e2e8f0; }
.sr-wm-dot { width: 14px; height: 14px; border-radius: 4px; margin-top: 5px; background: #ffd400; }
.sr-wm-dot.lv-amber { background: #ff9f00; }
.sr-wm-dot.lv-red { background: #e5483b; }
.sr-wm-titles h2 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 600; }
.sr-wm-sub { margin: 3px 0 0; font-size: 13px; color: #475569; }
.sr-wm-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 18px; font-size: 14.5px; line-height: 1.55; color: #334155; }
.sr-wm-body p { margin: 0 0 10px; }
.sr-wm-body h3 { margin: 14px 0 4px; font-size: 12.5px; font-weight: 600; color: #475569; letter-spacing: .01em; }
.sr-wm-body section p { margin: 0; }
.sr-wm-lead { font-size: 15.5px; font-weight: 600; color: var(--sr-ink, #0f172a); }
.sr-wm-reg b { color: #0f172a; }
.sr-wm-none { color: #64748b; font-style: italic; }
.sr-wm-meta { margin-top: 14px !important; font-size: 12.5px; color: #64748b; }
.sr-wm-pdfrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 6px; }
.sr-wm-pdflink { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 10px; border-radius: 9999px; background: var(--brand-50); color: var(--brand-800); font-weight: 600; font-size: 13.5px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--brand-200); }
.sr-wm-pdflink:hover { background: var(--brand-100); }
.sr-wm-pdflink .material-icons { font-size: 18px; }
.sr-wm-ptoggle { border: 0; background: none; padding: 4px 2px; font: 600 13px 'Outfit', sans-serif; color: var(--brand-700); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sr-wm-inlinepdf iframe { width: 100%; height: 420px; border: 1px solid #e2e8f0; border-radius: 10px; }
.sr-wm-hist { margin: 8px 0 0; font-size: 13px; }
.sr-wm-hist summary { cursor: pointer; color: var(--brand-700); font-weight: 600; }
.sr-wm-hist ul { margin: 6px 0 0; padding-left: 18px; }
.sr-wm-credit { margin: 14px 0 0 !important; font-size: 11.5px; line-height: 1.4; color: #64748b; }
.sr-wm-pdf { position: fixed; z-index: 3100; background: #fff; border-radius: 12px; box-shadow: 0 18px 48px rgba(15, 23, 42, .35); overflow: hidden; pointer-events: none; }
.sr-wm-pdfcap { padding: 7px 12px; font: 600 12px 'Outfit', sans-serif; color: #475569; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.sr-wm-pdf iframe { display: block; width: 100%; height: min(600px, calc(100vh - 80px)); border: 0; }
html.sr-wm-open { overflow: hidden; }
@media (max-width: 767px) { .sr-wmodal { padding: 0; place-items: end center; } .sr-wm-card { width: 100%; max-height: 90vh; border-radius: 18px 18px 0 0; } }

.sr-wm-list { margin: 0; padding-left: 18px; }
.sr-wm-list li { margin: 0 0 5px; padding-left: 2px; }