.storm-detail-map-panel {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--paper);
}

.storm-detail-map-head,
.storm-detail-map-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.storm-detail-map-head {
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  background: var(--intro);
}

/* `.product h2` pads and rules a product heading; this one sits in the map's own header. */
.storm-detail-map-head h2 {
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.storm-detail-map-head h2 {
  margin: 0;
  font-size: var(--fs-lead);
}

.storm-detail-map-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--fs-bulletin);
}

.storm-detail-map-controls {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.storm-map-basemaps,
.storm-guidance-policies {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  background: var(--paper);
}

.storm-detail-map-controls button {
  min-height: 34px;
  padding: 5px 10px;
  border: 0;
  border-radius: calc(var(--radius-control) - 2px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-bulletin);
  font-weight: 650;
  cursor: pointer;
}

.storm-detail-map-controls button:hover {
  color: var(--ink);
  background: var(--wash);
}

.storm-detail-map-controls button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.storm-detail-map-controls button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--wash-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.storm-detail-map-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #07131f;
}

.storm-detail-map-canvas,
.storm-detail-map-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.storm-detail-map-canvas {
  z-index: 2;
  border: 0;
  border-radius: 0;
}

/* MapLibre's compact details control overlaps its attribution links when it
   opens in a narrow frame. Keep the source attribution visible and remove the
   redundant toggle so every remaining link has an unobscured touch target. */
.storm-map-frame .maplibregl-ctrl-attrib.maplibregl-compact {
  min-height: 0;
  max-width: calc(100% - 20px);
  margin: 10px;
  padding: 2px 5px;
  border-radius: 2px;
}

.storm-map-frame
  .maplibregl-ctrl-attrib.maplibregl-compact
  .maplibregl-ctrl-attrib-inner {
  display: block;
  white-space: normal;
}

.storm-map-frame
  .maplibregl-ctrl-attrib.maplibregl-compact
  .maplibregl-ctrl-attrib-button {
  display: none;
}

/* maplibre-gl.css loads after the site's stylesheet and takes the underline off attribution
   links, which leaves them told apart from the credit text by colour alone (axe
   link-in-text-block). Scoped to the storm map, where it is ours to put back. */
.storm-map-frame .maplibregl-ctrl-attrib a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.storm-detail-map-fallback {
  z-index: 3;
  overflow: hidden;
  background: var(--surface);
  pointer-events: none;
}

.storm-detail-map-fallback .product-figure,
.storm-detail-map-fallback picture,
.storm-detail-map-fallback img {
  width: 100%;
  height: 100%;
}

.storm-detail-map-fallback img {
  display: block;
  object-fit: contain;
}

.storm-detail-map-panel.is-live .storm-detail-map-fallback {
  visibility: hidden;
}

.storm-detail-map-panel.is-live .storm-detail-map-controls {
  visibility: visible;
}

.storm-detail-map-panel.is-fallback .storm-detail-map-controls {
  visibility: hidden;
}

.storm-detail-map-panel .cone-note {
  max-width: none;
}

.storm-detail-map-failure {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--wash);
  color: var(--ink-2);
  font-size: var(--fs-bulletin);
}

.storm-detail-map-meta {
  /* A <footer>, so the page-footer margin in shell.css reaches it; it belongs to the map. */
  margin: 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-bulletin);
}

.storm-detail-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.storm-detail-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.storm-detail-key {
  display: inline-block;
  width: 22px;
  height: 0;
  border-top: 3px solid #60c7ff;
}

/* The map draws the past track near-white on a dark ground; the key sits on the page's own
   ground, so it takes the page's ink to stay visible in the light theme. */
.storm-detail-key--past {
  border-top: 2px dashed var(--ink-2);
}

.storm-detail-key--cone {
  width: 18px;
  height: 11px;
  border: 1px solid #8bd2ff;
  background: rgb(101 191 255 / 20%);
}

.storm-detail-map-panel.is-fallback .storm-detail-map-stage:has(.storm-detail-map-fallback .statebox) {
  min-height: 0;
  aspect-ratio: auto;
}

.storm-detail-map-panel.is-fallback .storm-detail-map-stage:has(.storm-detail-map-fallback .statebox) .storm-detail-map-fallback {
  position: relative;
  height: auto;
}

.storm-detail-map-panel.is-fallback .storm-detail-map-stage:has(.storm-detail-map-fallback .statebox) .storm-detail-map-canvas {
  display: none;
}

.storm-detail-map-panel .cone-facts {
  border-top: 1px solid var(--line);
}

.storm-detail-map-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- The briefing: map and side rail, then tabs ------------------------------------- */

.storm-briefing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--sp-5);
  align-items: start;
  margin: 0 0 var(--sp-6);
}

/* Beside the rail the map can afford more height than the full-width 16:10 frame had. */
@media (min-width: 1101px) {
  .storm-briefing-grid .storm-detail-map-stage {
    aspect-ratio: 3 / 2;
  }
}

.storm-briefing-rail {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.storm-side-card,
.storm-briefing-rail .official-source {
  min-width: 0;
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
}

.storm-side-card h2,
.storm-briefing-rail .official-source h2 {
  margin: 0 0 var(--sp-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--fs-remarks);
  font-weight: 800;
  line-height: 1.25;
}

.storm-briefing-rail .official-source {
  background: var(--briefing);
  font-size: var(--fs-bulletin);
}

.storm-briefing-rail .official-source p {
  margin: 0;
}

.storm-briefing-rail .official-source p + p,
.storm-briefing-rail .official-source .btn {
  margin-top: var(--sp-2);
}

.storm-side-lede {
  margin: 0 0 var(--sp-2);
  color: var(--ink-2);
  font-size: var(--fs-bulletin);
}

/* --- Layer switches -------------------------------------------------------------------- */

.storm-map-layers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.storm-detail-map-controls .storm-layer-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}

/* A drawn check box, so on and off differ in shape as well as colour. */
.storm-layer-switch::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
}

.storm-detail-map-controls .storm-layer-switch[aria-pressed="true"] {
  border-color: var(--link);
  background: var(--intro);
  box-shadow: none;
}

.storm-layer-switch[aria-pressed="true"]::before {
  border-color: var(--link);
  background:
    no-repeat center / 10px 10px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.2 2.2L8.6 2.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--link);
}

.storm-layer-switch[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

.storm-layer-switch[hidden] {
  display: none;
}

/* --- Model tracks: said while they are on, gone when they are off ---------------------- */

.storm-guidance-notes {
  border-bottom: 1px solid var(--edge);
  background: var(--wash);
}

.storm-guidance-notes[hidden],
.storm-guidance-legend[hidden],
.storm-guidance-status[hidden] {
  display: none;
}

.storm-guidance-caution {
  margin: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-bulletin);
  font-weight: 650;
}

.storm-guidance-policy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-3);
}

.storm-guidance-policies button {
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: calc(var(--radius-control) - 2px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 650;
  cursor: pointer;
}

.storm-guidance-policies button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--wash-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.storm-guidance-policies button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.storm-guidance-policies button[hidden] {
  display: none;
}

.storm-guidance-policy-copy {
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 650;
}

.storm-guidance-status {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--wash);
  color: var(--ink-2);
  font-size: var(--fs-bulletin);
}

.storm-guidance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  width: 100%;
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
}

.storm-guidance-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.storm-guidance-key {
  display: inline-block;
  width: 24px;
  height: 6px;
  flex: 0 0 auto;
}

.storm-guidance-end-label {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 3px;
  background: rgb(7 19 31 / 88%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.2;
  pointer-events: none;
}

.storm-guidance-end-label[hidden] {
  display: none;
}

/* --- Wind radii: one colour per reported threshold, named in words beside it ---------- */

:root {
  --storm-radii-34: #f2c230;
  --storm-radii-50: #ef8a2b;
  --storm-radii-64: #d8344a;
}

.storm-detail-key--radii {
  width: 14px;
  height: 11px;
  border: 0;
  border-radius: 2px;
}

.storm-detail-key--radii.radii-34 { background: var(--storm-radii-34); }
.storm-detail-key--radii.radii-50 { background: var(--storm-radii-50); }
.storm-detail-key--radii.radii-64 { background: var(--storm-radii-64); }

.storm-radii-chart {
  display: block;
  width: 168px;
  max-width: 100%;
  height: auto;
  margin: var(--sp-2) auto var(--sp-3);
  overflow: visible;
}

.storm-radii-ring {
  fill: none;
  stroke: var(--line);
  stroke-dasharray: 2 3;
}

.storm-radii-axis {
  stroke: var(--line);
}

.storm-radii-sector {
  stroke: var(--ink);
  stroke-opacity: 0.35;
  stroke-width: 0.8;
}

.storm-radii-sector.radii-34 { fill: var(--storm-radii-34); fill-opacity: 0.55; }
.storm-radii-sector.radii-50 { fill: var(--storm-radii-50); fill-opacity: 0.7; }
.storm-radii-sector.radii-64 { fill: var(--storm-radii-64); fill-opacity: 0.85; }

.storm-radii-centre {
  fill: var(--ink);
}

.storm-radii-compass,
.storm-radii-scale {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-anchor: middle;
}

.storm-radii-scale {
  text-anchor: start;
}

.storm-radii-card .cone-radii {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.storm-radii-card .radii-list {
  margin: var(--sp-2) 0 0;
}

/* --- The forecast strip, along the foot of the map ------------------------------------ */

.storm-forecast-strip {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  background: #0b1d2e;
  color: #eaf4ff;
  scrollbar-width: thin;
}

.storm-strip-point {
  display: grid;
  flex: 1 0 auto;
  gap: 1px;
  min-width: 84px;
  padding: var(--sp-2) var(--sp-3);
  border-left: 1px solid rgb(255 255 255 / 14%);
}

.storm-strip-point:first-child {
  border-left: 0;
}

.storm-strip-lead,
.storm-strip-when {
  color: #b8cde0;
  font-size: var(--fs-micro);
}

.storm-strip-wind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
}

.storm-strip-stage {
  color: #d6e6f3;
  font-weight: 500;
}

/* The centre's knots beside the mph the strip leads with: quieter, never dropped. */
.storm-strip-kt {
  color: #b8cde0;
  font-size: var(--fs-micro);
  font-weight: 500;
}

.storm-strip-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 70%);
  background: var(--wx-tier-unknown);
}

.storm-strip-dot.tier-td { background: var(--wx-tier-td); }
.storm-strip-dot.tier-ts { background: var(--wx-tier-ts); }
.storm-strip-dot.tier-c1 { background: var(--wx-tier-c1); }
.storm-strip-dot.tier-c2 { background: var(--wx-tier-c2); }
.storm-strip-dot.tier-c3 { background: var(--wx-tier-c3); }
.storm-strip-dot.tier-c4 { background: var(--wx-tier-c4); }
.storm-strip-dot.tier-c5 { background: var(--wx-tier-c5); }

.storm-forecast-strip:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -3px;
}

/* --- Graphics & data ------------------------------------------------------------------- */

.storm-graphics-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* As specific as the site's `li a:not(.btn)` underline rule, and later, so it wins: the
   whole row is the link, and an underline under three lines of it is noise. */
.storm-graphics-list li a.storm-graphic-link {
  text-decoration: none;
}

.storm-graphic-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.storm-graphics-list li:last-child .storm-graphic-link {
  border-bottom: 0;
}

.storm-graphic-name {
  font-size: var(--fs-bulletin);
  font-weight: 700;
}

.storm-graphic-meta {
  grid-column: 1;
  color: var(--muted);
  font-size: var(--fs-micro);
  line-height: 1.35;
}

.storm-graphic-open {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--link);
  font-size: var(--fs-small);
  font-weight: 700;
}

.storm-graphic-link:hover .storm-graphic-name {
  text-decoration: underline;
}

.storm-graphic-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.storm-tabs .storm-uncertainty-data {
  max-width: 560px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.storm-uncertainty-title {
  margin: 0 0 var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-bulletin);
  font-weight: 700;
}

.storm-uncertainty-data p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.storm-data-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.storm-data-actions a,
.storm-data-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.storm-data-actions a:hover,
.storm-data-actions button:hover {
  border-color: var(--ink);
  background: var(--wash);
}

.storm-data-actions a:focus-visible,
.storm-data-actions button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.storm-data-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.storm-data-status {
  min-height: 1.25em;
  margin-top: var(--sp-2) !important;
}

/* --- Tabs: the timeline, the models and the record, one at a time -------------------- */

.storm-tabs {
  margin: 0 0 var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
}

.storm-tablist {
  display: flex;
  gap: var(--sp-1);
  padding: 0 var(--sp-3);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.storm-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-bulletin);
  font-weight: 650;
  cursor: pointer;
}

.storm-tab:hover {
  color: var(--ink);
}

.storm-tab[aria-selected="true"] {
  border-bottom-color: var(--link);
  color: var(--link);
  font-weight: 800;
}

.storm-tab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -3px;
}

.storm-tabs .storm-tabpanel {
  margin: 0;
  padding: var(--sp-4);
  border: 0;
  background: none;
}

.storm-tabs .storm-tabpanel[hidden] {
  display: none;
}

.storm-tabs .storm-tabpanel:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -3px;
}

/* The tab names the panel; its heading stays in the outline for a screen reader, not twice
   on screen. */
.storm-tabs .storm-tabpanel > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.storm-tabs .storm-tabpanel > .lede {
  margin-top: 0;
}

.storm-tabs .forecast-table table {
  min-width: 0;
}

.storm-tabs .forecast-table th,
.storm-tabs .forecast-table td {
  padding: var(--sp-2) var(--sp-3);
}

.storm-tabs .forecast-hour {
  display: inline;
  margin: 0 0 0 var(--sp-2);
}

.storm-tabs .storm-models-panel .product-note {
  margin: 0 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-control);
}

.storm-tabs .storm-models-panel .aid-ledger {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.storm-tabs .storm-models-panel .aid-ledger + div,
.storm-tabs .storm-models-panel div + .product-note {
  margin-top: var(--sp-3);
}

.storm-tabs .storm-models-panel [data-guidance-ledger][hidden] {
  display: none;
}

.storm-tabs .provenance {
  margin-top: 0;
}

.storm-tabs .provenance .lede {
  max-width: var(--wrap-prose);
  font-size: var(--fs-bulletin);
}

.storm-tabs .product--unavailable {
  border-radius: var(--radius-control);
}

/* The wind bar in the timeline: the category drawn, beside the number that states it. */
.forecast-wind-bar {
  display: inline-block;
  /* --bar is the wind as a share of 160 kt, unitless, so the bars stay proportional. */
  width: calc(var(--bar, 0) * 1.1px);
  height: 8px;
  margin-left: var(--sp-2);
  border-radius: 3px;
  vertical-align: middle;
  background: var(--wx-tier-unknown);
}

.forecast-wind-bar.tier-td { background: var(--wx-tier-td); }
.forecast-wind-bar.tier-ts { background: var(--wx-tier-ts); }
.forecast-wind-bar.tier-c1 { background: var(--wx-tier-c1); }
.forecast-wind-bar.tier-c2 { background: var(--wx-tier-c2); }
.forecast-wind-bar.tier-c3 { background: var(--wx-tier-c3); }
.forecast-wind-bar.tier-c4 { background: var(--wx-tier-c4); }
.forecast-wind-bar.tier-c5 { background: var(--wx-tier-c5); }

/* --- The measured state, above the map ------------------------------------------------ */

.storm-overview {
  margin: var(--sp-4) 0;
}

.storm-overview .storm-lede {
  margin: var(--sp-3) 0 0;
}

.storm-overview .stats-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  overflow: hidden;
}

.storm-overview .stats-panel .stat {
  min-height: 80px;
  padding: var(--sp-3);
  justify-content: center;
  border-right: 1px solid var(--line);
}

.storm-overview .stats-panel .stat:last-child {
  border-right: 0;
}

.storm-overview .stats-panel .stat-value a {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .storm-briefing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .storm-briefing-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .storm-graphics-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .storm-detail-map-head {
    align-items: flex-start;
    flex-direction: column;
  }

  /* The header stacks here, and a flex-basis in a column is a height, not a width. */
  .storm-detail-map-controls {
    flex: none;
    justify-content: flex-start;
  }

  .storm-overview .stats-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .storm-overview .stats-panel .stat:nth-child(4n) {
    border-right: 0;
  }

  .storm-overview .stats-panel .stat:nth-child(n + 5) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 700px) {
  .storm-detail-map-panel,
  .storm-tabs {
    margin-inline: calc(-1 * var(--sp-3));
    border-inline: 0;
    border-radius: 0;
  }

  .storm-detail-map-head,
  .storm-detail-map-meta {
    padding-inline: var(--sp-3);
  }

  .storm-detail-map-controls {
    width: 100%;
  }

  .storm-map-basemaps {
    flex: 1 1 auto;
  }

  .storm-map-basemaps button {
    min-height: 44px;
    flex: 1 1 auto;
  }

  .storm-detail-map-controls .storm-layer-switch {
    min-height: 40px;
  }

  .storm-detail-map-stage {
    aspect-ratio: 4 / 3;
  }

  .storm-detail-map-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .storm-guidance-caution,
  .storm-guidance-policy-row {
    padding-inline: var(--sp-3);
  }

  .storm-guidance-policies button {
    min-height: 44px;
  }

  .storm-briefing-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .storm-data-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .storm-data-actions a,
  .storm-data-actions button,
  .storm-graphic-link {
    min-height: 44px;
  }

  .storm-strip-point {
    min-width: 76px;
    padding-inline: var(--sp-2);
  }

  .storm-tablist {
    padding-inline: var(--sp-1);
  }

  .storm-tab {
    padding-inline: var(--sp-3);
  }

  .storm-tabs .storm-tabpanel {
    padding: var(--sp-3);
  }

  /* The phone timeline, tighter: one line of position, wind and stage under each time,
     rather than a two-by-two block per point. */
  /* Auto-fit rather than three fixed tracks: three across at the default text size, fewer
     as a reader enlarges the text, never a column narrower than its longest word. */
  .storm-tabs .forecast-table tbody tr {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 2px var(--sp-3);
    padding: var(--sp-2) 0 var(--sp-3) var(--sp-5);
  }

  .storm-tabs .forecast-table td {
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
  }

  .storm-tabs .forecast-table td::before {
    font-size: var(--fs-micro);
  }

  .forecast-wind-bar {
    display: block;
    width: calc(var(--bar, 0) * 0.6px);
    margin: 4px 0 0;
  }

  .storm-overview .stats-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storm-overview .stats-panel .stat,
  .storm-overview .stats-panel .stat:nth-child(4n) {
    border-right: 1px solid var(--line);
  }

  .storm-overview .stats-panel .stat:nth-child(2n) {
    border-right: 0;
  }

  .storm-overview .stats-panel .stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 430px) {
  .storm-detail-map-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .storm-map-basemaps {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storm-detail-map-panel *,
  .storm-briefing-rail *,
  .storm-tabs * {
    scroll-behavior: auto;
    transition: none !important;
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------------------
   The 2026-10-09 critique
   ------------------------------------------------------------------------------------- */

/* In effect now: the centre's watches and warnings at the head of the storm's page, each type
   marked with a short bar in the colour the map draws its coastline in and named in words, so
   the colour is never the only cue; then its first key message and the way to the rest. */
.storm-ineffect-slot:empty { display: none; }
.storm-ineffect { margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-surface); }
.storm-ineffect h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-subhead); }
.storm-ineffect-list { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.storm-ineffect-line { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: baseline; gap: var(--sp-2); max-width: 75ch; line-height: 1.4; }
.storm-ineffect-mark { align-self: center; width: 1.5rem; height: 0.375rem; border-radius: 999px; background: var(--ww-color, var(--line-strong)); box-shadow: 0 0 0 1px #0b1520, 0 0 0 2px #f1f7fc; }
.storm-ineffect--watch .storm-ineffect-mark { height: 0.25rem; }
.storm-ineffect-key { max-width: 75ch; margin: 0 0 var(--sp-2); line-height: 1.5; }
.storm-ineffect-none { max-width: 75ch; margin: 0 0 var(--sp-2); font-weight: 600; }
.storm-ineffect-links { margin: 0; font-size: var(--fs-small); }
.storm-ineffect-links a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 700; }
@media (pointer: coarse) { .storm-ineffect-links a { min-height: 44px; } }

/* The centre's hazard text in the body face at a reading measure: it is prose, not a reading. */
.tropics-fact-value.storm-centre-prose { font-family: var(--font-body); font-variant-numeric: normal; max-width: 75ch; line-height: 1.5; }

/* The wind speed probabilities stay a table on a phone (2026-10-09). Every other table there
   becomes field lines, which need a label per cell; these cells are numbers under a period, and
   stacked they read as "<1(5)" with no heading. So the table scrolls inside its own box, the
   location held at the left edge. */
.tropics-pws-more { margin: var(--sp-2) 0 var(--sp-4); }
.tropics-pws-more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--link); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  .systems-scroll.tropics-pws-scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
  .systems-table.tropics-pws thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .systems-table.tropics-pws tbody tr { display: table-row; margin: 0; }
  .systems-table.tropics-pws tbody th, .systems-table.tropics-pws tbody td, .systems-table.tropics-pws thead th { display: table-cell; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .systems-table.tropics-pws tbody td::before, .systems-table.tropics-pws tbody td::after { content: none; }
  .systems-table.tropics-pws tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); }
}

/* The readings on a phone (2026-10-09): the four a reader acts on, then "More readings". The
   button is the grid's last child and shows only where the fold does. A short last row is closed
   by its last tile taking the rest of it, so seven tiles leave no hole. */
.storm-overview .stats-panel .stats-more-toggle { display: none; }
.storm-overview .stats-panel .stat:nth-last-child(1 of .stat) { border-right: 0; }
@media (max-width: 1024px) and (min-width: 701px) {
  .storm-overview .stats-panel .stat:nth-last-child(1 of .stat):nth-child(4n + 3) { grid-column: span 2; }
  .storm-overview .stats-panel .stat:nth-last-child(1 of .stat):nth-child(4n + 2) { grid-column: span 3; }
}
@media (max-width: 700px) {
  .storm-overview .stats-panel:not(.stats-panel--open) .stat--more { display: none; }
  .storm-overview .stats-panel.stats-panel--open .stat:nth-last-child(1 of .stat):nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .storm-overview .stats-panel .stats-more-toggle {
    display: flex; grid-column: 1 / -1; align-items: center; justify-content: center; min-height: 44px;
    border: 0; border-top: 1px solid var(--line); background: var(--surface); color: var(--link);
    font: inherit; font-size: var(--fs-small); font-weight: 700; cursor: pointer;
  }
}

/* A taller map on a phone (2026-10-09): at 4:3 it was 284px across a 390px screen, too small to
   read the cone against the coast. Half the screen or so, never taller than it can be scrolled
   past; a fallback (a statebox) keeps its own height. */
@media (max-width: 700px) {
  .storm-detail-map-panel:not(.is-fallback) .storm-detail-map-stage { aspect-ratio: auto; height: clamp(300px, 55svh, 520px); }
}

/* The section links on a phone (2026-10-09): one row that scrolls sideways, not two rows over
   the readings, and the tools (Local time, Copy link) on the line under it. "← Storms" stays: on
   a phone it is the only way back to the list that is not the browser's. */
@media (max-width: 700px) {
  body[data-page="storm"] .productnav-list { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; width: 100%; }
  body[data-page="storm"] .productnav-link { min-height: 44px; display: inline-flex; align-items: center; }
  body[data-page="storm"] .pagehead-kicker { display: block; margin: 0 0 var(--sp-1); }
  body[data-page="storm"] .pagehead-kicker a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The page without scripts (2026-10-09): the issuance's forecast-track graphic, at the column's width. */
.storm-nojs-figure { margin: var(--sp-3) 0; }
.storm-nojs-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-surface); }
.storm-nojs-figure figcaption { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--ink-2); }

/* The wind radii, one band a line (2026-10-09): the band in its own column, so "34 kt" never sits
   alone above its quadrants while 50 and 64 kt read inline. */
.storm-radii-card .radii-list li { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; }
.storm-radii-card .radii-list .radii-quadrants { min-width: 0; overflow-wrap: anywhere; }

/* The map's credits in the dark theme: a dark slab with light ink, not a white box on the night
   map (2026-10-09). Underlined links, as in the light theme. */
:root:is([data-theme="dark"], [data-dark]:not([data-theme="light"])) .storm-map-frame .maplibregl-ctrl-attrib {
  background: rgb(16 30 45 / 82%);
  color: #e6eef5;
}

/* Reading measure for the page's sentences (2026-10-09): the lede, the cone note and the fine
   print had run to 87, 127 and 164 characters a line at 1440px. */
body[data-page="storm"] :is(.storm-lede, .cone-note, .cone-radii, .tropics-fine, .storm-ineffect-key) { max-width: 75ch; }

/* The source link in the readings ("Open advisory") was 17px tall: a target of its own size. */
.storm-overview .stats-panel .stat a { display: inline-flex; align-items: center; min-height: 24px; }
@media (pointer: coarse) { .storm-overview .stats-panel .stat a { min-height: 44px; } }
.storm-ineffect-areas > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); min-height: 44px; cursor: pointer; }
.storm-ineffect-areas > p { margin: 0 0 var(--sp-2); }
.storm-ineffect-line:has(.storm-ineffect-areas) .storm-ineffect-mark { align-self: start; margin-top: 19px; }