/* MaverickWX — Radar. Loads after tokens.css, shell.css, styles.css and MapLibre's sheet.

   A map-first workspace: a compact toolbar in the shared title strip, the map filling what is
   left of the viewport, a Layers drawer that is closed until asked for, a context inspector
   over the map's top right, and a playback bar under the map rather than over it.

   Two grounds, one rule. The controls — toolbar, drawer, inspector, legend, bar, notices,
   dialogs — are page surfaces in the Weather Hub roles and follow the reader's theme. The map
   canvas is not a page surface: reflectivity and satellite imagery are bright, saturated
   overlays that read against a dark ground, so the canvas is dark in both themes, and anything
   drawn *on* it takes the on-map pair below rather than a theme token that would flip under it.
   Scientific colours (the dBZ scale, NWS hazard colours, the Saffir-Simpson and formation-risk
   ramps) are the publishers' and are never restyled here. */

:root {
  --radar-canvas: #0d1b2a;
  --radar-on-map: #f1f7fc;
  --radar-on-map-halo: #0b1520;
  --radar-drawer-w: 320px;
  --radar-control-h: 40px;
}

/* --- The page frame ---------------------------------------------------------------- */

body[data-page="radar"] {
  background: var(--paper);
  /* The workspace fills the viewport; a phone's home indicator must not cover the bar. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
body[data-page="radar"] .shell {
  grid-template-columns: var(--radar-drawer-w) minmax(0, 1fr);
  height: calc(100vh - var(--masthead-h) - var(--pagehead-h) - var(--banner-h));
  height: calc(100dvh - var(--masthead-h) - var(--pagehead-h) - var(--banner-h) - env(safe-area-inset-bottom, 0px));
  min-height: 420px;
}

/* --- The toolbar --------------------------------------------------------------------------
   It sits in the shared title strip (`.pagehead`, measured by shell.js) so the workspace
   height composes the same way it always has; everything else about the strip is radar's. */

body[data-page="radar"] .pagehead {
  position: relative; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.radar-toolbar-inner {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--gutter);
  min-height: 60px;
}
body[data-page="radar"] .pagehead-title {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  font-size: var(--fs-subhead); line-height: 1.2; margin: 0 var(--sp-2) 0 0;
  color: var(--ink);
}
.radar-title-mark { width: 24px; height: 24px; fill: none; stroke: var(--enamel); stroke-width: 2; stroke-linecap: round; }

/* Every icon: one line family, drawn in the current colour. */
[data-radar-toolbar] svg, .radar-bar svg, .radar-drawer svg, .radar-icon, .radar-maps svg:not(.maplibregl-ctrl-icon),
.radar-dialog svg, .radar-popover svg {
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.radar-icon { width: 18px; height: 18px; flex: none; }

/* Find a place */
.radar-find { position: relative; flex: 1 1 300px; max-width: 460px; margin: 0; display: flex; align-items: stretch; }
.radar-find-field { position: relative; flex: 1 1 auto; min-width: 170px; display: flex; align-items: center; }
.radar-find[hidden] { display: none; }
.radar-find-glyph { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.radar-find-input.input {
  min-height: var(--radar-control-h); padding-left: 38px; padding-right: 38px;
  border-radius: var(--radius-control) 0 0 var(--radius-control); background: var(--paper);
}
.radar-find-input::-webkit-search-cancel-button { display: none; }
.radar-find-clear {
  position: absolute; right: 4px; width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 0; color: var(--muted); cursor: pointer; border-radius: var(--radius-control);
}
.radar-find-clear svg { width: 16px; height: 16px; }
.radar-find-clear:hover { color: var(--ink); background: var(--wash-strong); }
.radar-find-clear[hidden] { display: none; }
.radar-find-locate {
  flex: none; min-height: var(--radar-control-h); padding: 0 var(--sp-3);
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--fs-small); font-weight: 650; color: var(--ink);
  background: var(--paper); border: 1px solid var(--edge); border-left: 0; cursor: pointer;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.radar-find-locate svg { width: 18px; height: 18px; }
.radar-find-locate:hover:not(:disabled) { color: var(--ink); background: var(--wash-strong); }
.radar-find-locate:disabled { opacity: 0.5; cursor: default; }
.radar-find-results {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: min(24rem, 60vh); overflow-y: auto; padding: var(--sp-1);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--radius-surface);
}
.radar-find-results[hidden] { display: none; }
.radar-find-heading {
  padding: var(--sp-2) var(--sp-2) var(--sp-1); font-size: var(--fs-small); font-weight: 700; color: var(--ink-2);
}
.radar-find-option {
  display: flex; flex-direction: column; gap: 1px; min-height: 44px; justify-content: center;
  padding: var(--sp-1) var(--sp-2); cursor: pointer; border-radius: var(--radius-control);
}
.radar-find-option:hover, .radar-find-option[aria-selected="true"] { background: var(--wash-strong); }
.radar-find-option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--enamel); }
.radar-find-name { font-weight: 650; font-size: var(--fs-bulletin); }
.radar-find-detail { font-size: var(--fs-small); color: var(--ink-2); }
.radar-find-empty { padding: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.radar-find-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* The imagery selector */
.radar-imagery { flex: 0 1 250px; min-width: 190px; }
.radar-imagery[hidden] { display: none; }
.radar-product {
  width: 100%; min-height: var(--radar-control-h); padding: 0 var(--sp-3);
  font: inherit; font-size: var(--fs-bulletin); font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control);
}

/* The active product's status */
.radar-status-summary {
  flex: 0 1 auto; min-width: 0; max-width: 17rem; display: flex; align-items: center;
  min-height: var(--radar-control-h); padding: 2px var(--sp-2);
  font: inherit; text-align: left; color: var(--ink-2); cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-control);
}
.radar-status-summary[hidden] { display: none; }
.radar-status-summary:hover, .radar-status-summary[aria-expanded="true"] { border-color: var(--edge); background: var(--wash); }
.radar-status-line { display: flex; flex-direction: column; min-width: 0; }
.radar-status-line .freshness { font-size: var(--fs-small); line-height: 1.35; }
.radar-status-source { font-size: var(--fs-micro); color: var(--muted); padding-left: calc(1.1em + var(--sp-2)); }
.radar-status-summary[data-state="unavailable"], .radar-status-summary[data-state="delayed"] { border-color: var(--ink); }

/* Actions */
.radar-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex: none; }
.radar-action, body[data-page="radar"] .panel-toggle.radar-action {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--radar-control-h); min-width: 0; padding: 0 var(--sp-3);
  font: inherit; font-size: var(--fs-small); font-weight: 650; color: var(--ink); cursor: pointer;
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control);
}
.radar-action svg { width: 18px; height: 18px; }
.radar-action:hover { border-color: var(--ink); background: var(--wash-strong); }
.radar-action[aria-pressed="true"], .radar-action[aria-expanded="true"] {
  border-color: var(--enamel); box-shadow: inset 0 0 0 1px var(--enamel); background: var(--enamel-wash);
}
.radar-action[hidden] { display: none; }
body[data-page="radar"] .panel-toggle { display: inline-flex; }
.panel-toggle-count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-small);
  min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--wash-strong); border: 0;
}
.panel-toggle-alert {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-small); line-height: 1.5;
  padding: 0 6px; color: var(--paper); background: var(--ink); border-radius: var(--radius-control);
}
.panel-toggle-alert[hidden] { display: none; }
.panel-toggle[data-troubled] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Secondary actions live in More below 1500px, then the rest below 1180px, so what stays
   in the toolbar keeps its words rather than shrinking to icons. The More menu carries
   every action; the ones still in the toolbar are hidden in it. */
.radar-action--more { display: none; }
.radar-menu-item--status { display: none; }
.radar-menu-item--help, .radar-menu-item--focus, .radar-menu-item--views, .radar-menu-item--compare, .radar-menu-item--share { display: none; }
@media (max-width: 1499px) {
  .radar-action--secondary { display: none; }
  .radar-action--more:not([hidden]) { display: inline-flex; }
  .radar-menu-item--help, .radar-menu-item--focus { display: flex; }
}
@media (max-width: 1439px) {
  .radar-actions [data-action="views"] { display: none; }
  .radar-menu-item--views { display: flex; }
}
@media (max-width: 1279px) {
  .radar-find-locate-word { display: none; }
}
@media (max-width: 1179px) {
  .radar-actions [data-action="compare"], .radar-actions [data-action="share"] { display: none; }
  .radar-menu-item--views, .radar-menu-item--compare, .radar-menu-item--share { display: flex; }
  .radar-status-source { display: none; }
}

/* Popovers */
.radar-popover {
  position: absolute; z-index: 60; top: calc(100% - 4px); right: var(--gutter);
  width: min(26rem, calc(100vw - 2 * var(--sp-4))); max-height: min(34rem, calc(100dvh - 140px)); overflow-y: auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--radius-surface);
  box-shadow: 0 10px 30px color-mix(in srgb, #000 22%, transparent);
}
.radar-popover[hidden] { display: none; }
.radar-diagnostics { right: auto; left: 40%; }
.radar-popover-head, .radar-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.radar-popover-head h2, .radar-dialog-head h2 { margin: 0; font-size: var(--fs-lead); }
.radar-popover-h { font-size: var(--fs-bulletin); margin: var(--sp-4) 0 var(--sp-2); color: var(--ink); }
.radar-popover-note { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.radar-popover-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 0; font-size: var(--fs-small); font-weight: 600; }
.radar-more { width: 16rem; padding: var(--sp-1); }
.radar-menu-item {
  width: 100%; min-height: 44px; align-items: center; padding: 0 var(--sp-3);
  font: inherit; font-size: var(--fs-bulletin); text-align: left; color: var(--ink);
  background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer;
}
.radar-menu-item--reset { display: flex; }
.radar-menu-item:hover, .radar-menu-item:focus-visible { background: var(--wash-strong); }

.radar-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--sp-3); margin: 0; font-size: var(--fs-small); }
.radar-facts dt { color: var(--ink-2); font-weight: 600; }
.radar-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.radar-facts--compact { grid-template-columns: 6.5rem 1fr; }

/* --- Buttons shared by every surface ---------------------------------------------- */

.radar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-3);
  font: inherit; font-size: var(--fs-small); font-weight: 650; color: var(--ink); cursor: pointer;
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control);
  text-decoration: none;
}
.radar-btn:hover { border-color: var(--ink); background: var(--wash-strong); text-decoration: none; }
.radar-btn svg { width: 18px; height: 18px; }
.radar-btn--primary { background: var(--enamel); border-color: var(--enamel); color: var(--on-enamel); }
.radar-btn--primary:hover { background: var(--enamel-strong); border-color: var(--enamel-strong); color: var(--on-enamel); }
.radar-link-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--sp-1);
  font: inherit; font-size: var(--fs-small); font-weight: 650; color: var(--link); cursor: pointer;
  background: transparent; border: 0; border-radius: var(--radius-control); text-decoration: underline; text-underline-offset: 0.2em;
}
.radar-link-btn:hover { background: var(--wash-strong); }
.radar-link-btn svg { width: 16px; height: 16px; }
.radar-icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0;
  color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-control); cursor: pointer;
}
.radar-icon-btn:hover { color: var(--ink); border-color: var(--edge); background: var(--wash-strong); }
.radar-icon-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--edge); }
.radar-retry {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-3);
  font: inherit; font-size: var(--fs-small); font-weight: 650; color: var(--ink); cursor: pointer;
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control);
}
.radar-retry:hover { border-color: var(--ink); background: var(--wash-strong); }
.radar-check, .radar-radio { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--enamel); }
input[type="checkbox"].radar-check { width: 22px; height: 22px; }
.radar-note { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.radar-error { margin: var(--sp-1) 0 0; font-size: var(--fs-small); font-weight: 650; color: var(--ink); }
.radar-error:empty { display: none; }
.radar-forecast-tag {
  display: inline-block; margin-left: 6px; padding: 0 6px; font-size: var(--fs-micro); font-weight: 700;
  font-style: italic; color: var(--ink); border: 1px dashed var(--ink); border-radius: var(--radius-control);
  vertical-align: 1px;
}
.radar-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 1px solid var(--radar-on-map-halo); outline: 1px solid var(--radar-on-map); vertical-align: -1px; }

/* A switch: a checkbox that looks like one, and still is one. */
input[type="checkbox"].radar-switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 40px; height: 24px; border-radius: 999px;
  background: var(--wash-strong); border: 1px solid var(--edge);
  transition: background var(--dur) var(--ease);
}
input[type="checkbox"].radar-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-2); transition: transform var(--dur) var(--ease);
}
input[type="checkbox"].radar-switch:checked { background: var(--enamel); border-color: var(--enamel); }
input[type="checkbox"].radar-switch:checked::after { transform: translateX(16px); background: var(--on-enamel); }
input[type="checkbox"].radar-switch:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* --- The drawer ---------------------------------------------------------------------- */

body[data-page="radar"] .panel--controls.radar-drawer {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; background: var(--surface);
  border-right: 1px solid var(--line); overflow: hidden;
}
/* The drawer names itself and closes itself at every width. */
body[data-page="radar"] .radar-drawer .drawer-head {
  display: flex; align-items: center; gap: var(--sp-2);
  position: static; flex: none; margin: 0;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
body[data-page="radar"] .drawer-title { font-size: var(--fs-lead); }
body[data-page="radar"] .drawer-close {
  margin-left: auto; width: 40px; height: 40px; border-radius: var(--radius-control); color: var(--ink-2);
}
body[data-page="radar"] .drawer-close svg { width: 20px; height: 20px; }
.radar-controls { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3) var(--sp-4) var(--sp-5); }
.radar-drawer-foot {
  flex: none; display: flex; gap: var(--sp-4); align-items: center;
  padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line); background: var(--surface);
}
.radar-drawer-foot[hidden] { display: none; }
.radar-section-title { margin: 0 0 var(--sp-2); font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); text-transform: none; letter-spacing: 0; }

.radar-active { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.radar-active-row { padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.radar-active-row:first-of-type { border-top: 0; }
.radar-active-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.radar-active-name { display: flex; flex-direction: column; min-width: 0; }
.radar-row-name { display: block; font-weight: 650; font-size: var(--fs-bulletin); line-height: 1.3; color: var(--ink); }
.radar-row-kind, .radar-row-provider { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.35; }
.radar-row-status { margin-top: 2px; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; }
.radar-row-status .freshness { font-size: var(--fs-small); }
.radar-opacity-wrap { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.radar-opacity { flex: 1; min-width: 0; min-height: 24px; accent-color: var(--enamel); }
.radar-opacity-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; width: 3.2em; text-align: right; color: var(--ink); }
.radar-row-controls { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.radar-field { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.radar-field > span { width: 4.2em; flex: none; font-weight: 600; }
.radar-field--stacked { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-3); }
.radar-field--stacked > span { width: auto; }
.radar-select {
  flex: 1; min-width: 0; min-height: 36px; padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-small);
  color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control);
}
.radar-layer-find { margin: 0 0 var(--sp-2); }
.radar-layer-search.input { min-height: 36px; border-radius: var(--radius-control); font-size: var(--fs-small); }

.radar-cat { border-bottom: 1px solid var(--line); }
.radar-cat-summary {
  display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--fs-bulletin); color: var(--ink);
}
.radar-cat-summary::-webkit-details-marker { display: none; }
.radar-cat-summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease);
}
.radar-cat[open] > .radar-cat-summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.radar-cat-meta { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-2); }
.radar-cat > .radar-note { margin-top: 0; }
.radar-choices { border: 0; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: 2px; }
.radar-choices legend { font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); padding: 0; margin-bottom: var(--sp-1); }
.radar-choice { border-radius: var(--radius-control); }
.radar-choice.is-current { background: var(--wash); box-shadow: inset 3px 0 0 var(--enamel); }
.radar-choice-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-1); }
.radar-choice-head > label { flex: 1; min-width: 0; cursor: pointer; font-size: var(--fs-small); }
.radar-choice-label { display: flex; flex-direction: column; }
.radar-about { padding: 0 var(--sp-2) var(--sp-3) calc(20px + var(--sp-3)); font-size: var(--fs-small); color: var(--ink-2); }
.radar-about[hidden] { display: none; }
.radar-about p { margin: 0 0 var(--sp-2); }
.radar-settings { padding-bottom: var(--sp-3); }
.radar-field-label { margin: 0 0 var(--sp-1); font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); }
.radar-basemaps { flex-wrap: wrap; margin-bottom: var(--sp-2); }
.radar-basemaps .choice { padding: 6px 11px; }

.radar-warnings { margin-top: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-control); }
.radar-warnings-summary {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--sp-2); cursor: pointer; list-style: none;
  font-size: var(--fs-small); font-weight: 650; color: var(--ink);
}
.radar-warnings-summary::-webkit-details-marker { display: none; }
.radar-warnings-list { list-style: none; margin: 0; padding: 0 var(--sp-1) var(--sp-1); display: grid; gap: 2px; max-height: 18rem; overflow-y: auto; }
.radar-warning {
  display: grid; gap: 2px; width: 100%; padding: var(--sp-2); text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: var(--radius-control);
}
.radar-warning:hover { background: var(--wash-strong); border-color: var(--edge); }
.radar-warning-event { font-weight: 700; font-size: var(--fs-small); }
.radar-warning-until { font-size: var(--fs-micro); color: var(--ink-2); }
.radar-warning-area { font-size: var(--fs-micro); color: var(--ink-2); }

/* --- The stage ------------------------------------------------------------------------- */

.radar-stage { display: flex; flex-direction: column; background: var(--radar-canvas); }
.radar-maps { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--radar-canvas); }
.radar-maps[data-compare="on"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }
.radar-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.radar-pane[hidden] { display: none; }
.radar-pane-body { position: relative; flex: 1 1 auto; min-height: 0; }
.radar-map { position: absolute; inset: 0; background: var(--radar-canvas); }
.radar-pane-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) var(--sp-3); background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--ink-2);
}
.radar-pane-head[hidden] { display: none; }
/* Both heads the same height, so the two maps start on one line and compare like for like. */
.radar-maps[data-compare="on"] .radar-pane-head { min-height: 92px; align-content: flex-start; }
.radar-pane-name { font-weight: 700; color: var(--ink); }
.radar-pane-time { color: var(--ink); font-variant-numeric: tabular-nums; }
.radar-pane-head .freshness { font-size: var(--fs-small); }
.radar-pane-camera { display: inline-flex; align-items: center; gap: var(--sp-1); }
.radar-product--pane { width: auto; min-height: 34px; font-size: var(--fs-small); }

/* --- Notices over the map ------------------------------------------------------------------- */

.radar-notices {
  position: absolute; z-index: 5; top: var(--sp-3); left: var(--sp-3);
  width: min(26rem, calc(100% - 2 * var(--sp-3))); max-height: calc(100% - 180px); overflow-y: auto;
  display: grid; gap: var(--sp-2); pointer-events: none;
}
.radar-notices > * { pointer-events: auto; }
.radar-notices:empty { display: none; }
/* In comparison each map has a head strip; the notices start under the taller one. */
.radar-maps[data-compare="on"] .radar-notices { top: 104px; }
.radar-notice {
  display: grid; gap: 4px; padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--edge); border-radius: var(--radius-surface); color: var(--ink);
}
.radar-notice .freshness { font-size: var(--fs-small); margin: 0; }
.radar-notice[data-state="unavailable"], .radar-notice[data-state="stale"] { border-color: var(--ink); }
/* Every imagery feed down: the heaviest thing the page can say. */
.radar-notice--outage { border: 2px solid var(--ink); padding: var(--sp-3) var(--sp-4); }
.radar-notice--outage .freshness { font-size: var(--fs-bulletin); }
.radar-notice-body { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.radar-notice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 2px 0 0; }
.radar-notice-link { font-size: var(--fs-small); font-weight: 650; }
.radar-notice .radar-btn { min-height: 32px; }

/* --- The inspector ----------------------------------------------------------------------- */

.radar-inspector {
  position: absolute; z-index: 6; top: var(--sp-3); right: var(--sp-3);
  width: min(22rem, calc(100% - 2 * var(--sp-3))); max-height: calc(100% - 2 * var(--sp-3) - 40px); overflow-y: auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--radius-surface);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 20%, transparent);
}
.radar-inspector[hidden] { display: none; }
.radar-inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.radar-inspector-title { margin: 0; font-size: var(--fs-lead); line-height: 1.25; }
.radar-inspector-sub { margin: 2px 0 var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
.radar-inspector-h { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); }
.radar-inspector p { margin: var(--sp-1) 0; font-size: var(--fs-small); }
.radar-inspector-note { color: var(--ink-2); }
.radar-inspector p.radar-inspector-foot { color: var(--ink-2); font-size: var(--fs-micro); }
.radar-inspector-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.radar-inspector-links { list-style: none; margin: var(--sp-3) 0 var(--sp-2); padding: 0; display: grid; gap: 2px; }
.radar-inspector-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-small); font-weight: 650;
}
.radar-inspector-links svg { width: 16px; height: 16px; }
.radar-saved-mark { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 650; }
.radar-saved-mark svg { width: 16px; height: 16px; fill: currentColor; }
.radar-save-place svg { width: 16px; height: 16px; }
.radar-inline-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-2) 0; }
.radar-inline-form .input { flex: 1 1 10rem; min-height: 36px; border-radius: var(--radius-control); }
.radar-inline-form .radar-note { flex-basis: 100%; margin: 0; }
.radar-chooser { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

/* --- Legend ---------------------------------------------------------------------------------- */

.radar-legend {
  position: absolute; z-index: 3; right: var(--sp-3); bottom: 34px; width: min(17rem, calc(100% - 2 * var(--sp-3)));
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--edge); border-radius: var(--radius-surface); color: var(--ink);
}
.radar-legend[hidden] { display: none; }
.radar-legend-head { display: flex; align-items: center; gap: var(--sp-1); }
.radar-legend-title { margin: 0; font-size: var(--fs-small); font-weight: 700; flex: 1; }
.radar-legend-more { width: 28px; height: 28px; }
.radar-legend-scale { display: flex; margin-top: var(--sp-1); }
.radar-legend-stop { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.radar-legend-stop i { display: block; width: 100%; height: 10px; }
.radar-legend-stop span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-micro); color: var(--ink-2); }
.radar-legend-note, .radar-legend-under { margin: var(--sp-2) 0 0; font-size: var(--fs-micro); color: var(--ink-2); line-height: 1.45; }
.radar-legend-hatch {
  display: inline-block; width: 18px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 1px dashed var(--ink-2);
  background: repeating-linear-gradient(45deg, var(--ink-2) 0 2px, transparent 2px 6px);
}
.radar-legend-status { margin-top: var(--sp-2); }
/* A dead feed's scale keeps its numbers and loses its colours: the colours are the claim. */
.radar-legend.is-unavailable .radar-legend-stop i { filter: grayscale(1); opacity: 0.45; }

/* --- The playback bar ------------------------------------------------------------------------ */

.radar-bar {
  flex: none; display: grid; align-items: center;
  grid-template-columns: auto minmax(12rem, 1fr) minmax(11rem, auto) auto auto;
  grid-template-areas: "controls track readout latest settings" "foot foot foot foot foot";
  gap: 2px var(--sp-4); padding: var(--sp-2) var(--sp-4) 6px;
  background: var(--surface); color: var(--ink); border-top: 1px solid var(--line);
}
.radar-bar[hidden] { display: none; }
.radar-bar-controls { grid-area: controls; display: flex; align-items: center; gap: var(--sp-2); }
.radar-bar-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; flex: none;
  color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control);
}
.radar-bar-btn svg { width: 20px; height: 20px; }
.radar-bar-btn:hover:not(:disabled) { border-color: var(--ink); background: var(--wash-strong); }
.radar-bar-btn:disabled, .radar-latest:disabled, .radar-duration:disabled { opacity: 0.45; cursor: default; }
/* Play is the one filled control: the thing most people open a radar page to do. */
.radar-play { width: 48px; height: 48px; border-radius: 50%; background: var(--enamel); border-color: var(--enamel); color: var(--on-enamel); }
.radar-play:hover:not(:disabled) { background: var(--enamel-strong); border-color: var(--enamel-strong); }
.radar-play svg { width: 22px; height: 22px; }
.radar-play .radar-play-glyph { fill: currentColor; }
.radar-play .radar-pause-glyph { display: none; stroke-width: 2.5; }
.radar-play[data-playing="true"] .radar-play-glyph { display: none; }
.radar-play[data-playing="true"] .radar-pause-glyph { display: block; }
.radar-duration {
  min-height: 40px; padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-small); color: var(--ink);
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-control);
}
.radar-track-wrap { grid-area: track; min-width: 0; }
.radar-track-labels { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-micro); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.radar-track { position: relative; height: 32px; cursor: pointer; touch-action: none; border-radius: var(--radius-control); }
.radar-track[aria-disabled="true"] { cursor: default; }
.radar-track-rail { position: absolute; left: 8px; right: 8px; top: 50%; height: 4px; margin-top: -2px; background: color-mix(in srgb, var(--enamel) 45%, var(--line)); border-radius: 2px; }
.radar-track[aria-disabled="true"] .radar-track-rail { background: var(--line); }
.radar-tick { position: absolute; top: -4px; width: 2px; height: 12px; margin-left: -1px; background: var(--ink-2); border-radius: 1px; }
.radar-tick.is-forecast { background: transparent; border-left: 2px dotted var(--ink-2); }
.radar-gap {
  position: absolute; top: -5px; height: 14px;
  background: repeating-linear-gradient(45deg, var(--paper) 0 3px, var(--ink-2) 3px 5px);
  border: 1px solid var(--ink-2);
}
.radar-divider {
  position: absolute; top: -18px; transform: translateX(-50%); padding: 0 4px;
  font-size: var(--fs-micro); font-weight: 700; font-style: italic; border-left: 2px solid var(--ink);
}
.radar-track-thumb {
  position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: var(--ink); border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 2px var(--ink);
  pointer-events: none;
}
.radar-track:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.radar-track[aria-disabled="true"] .radar-track-thumb { display: none; }

.radar-readout { grid-area: readout; min-width: 0; }
.radar-readout p { margin: 0; }
.radar-readout-badge { font-size: var(--fs-micro); color: var(--ink-2); }
.radar-badge { display: inline-block; font-weight: 700; color: var(--ink); }
.radar-badge--past { padding: 0 6px; color: var(--paper); background: var(--ink); border-radius: var(--radius-control); }
.radar-badge--forecast { padding: 0 6px; font-style: italic; border: 1px dashed var(--ink); border-radius: var(--radius-control); }
.radar-readout-time { font-size: var(--fs-lead); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.radar-readout-second { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.radar-readout-source { font-size: var(--fs-micro); color: var(--ink-2); overflow-wrap: anywhere; }
.radar-readout[data-kind="forecast"] .radar-readout-time { font-style: italic; }
.radar-readout[data-pending] .radar-readout-time { text-decoration: underline dotted; text-underline-offset: 0.25em; }
.radar-latest {
  grid-area: latest; min-height: 40px; padding: 0 var(--sp-4); cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 700; color: var(--enamel);
  background: transparent; border: 1.5px solid var(--enamel); border-radius: var(--radius-control);
}
.radar-latest[aria-pressed="true"] { color: var(--on-enamel); background: var(--enamel); }
.radar-bar-settings { grid-area: settings; position: relative; }
.radar-bar-more { width: auto; padding: 0 var(--sp-2); gap: 2px; display: inline-flex; align-items: center; font: inherit; font-size: var(--fs-small); font-weight: 650; }
.radar-bar-more svg { width: 16px; height: 16px; }
.radar-popover--up { top: auto; bottom: calc(100% + 8px); right: 0; width: min(20rem, calc(100vw - 2 * var(--sp-4))); }
.radar-bar-foot { grid-area: foot; margin: 0; font-size: var(--fs-micro); color: var(--ink-2); }
.radar-bar-foot strong { color: var(--ink); }

/* --- The map, as text --------------------------------------------------------------------------
   Out of sight until a keyboard reaches it; then a readable panel over the map. */
.radar-summary {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.radar-summary:focus, .radar-summary:focus-within {
  position: fixed; z-index: 70; left: var(--sp-3); bottom: var(--sp-3); width: min(30rem, calc(100vw - 2 * var(--sp-3)));
  height: auto; max-height: 60vh; overflow-y: auto; clip-path: none; white-space: normal;
  padding: var(--sp-3) var(--sp-4); background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius-surface);
}
.radar-summary-title { margin: 0 0 var(--sp-2); font-size: var(--fs-bulletin); }
.radar-summary h3 { font-size: var(--fs-small); margin: var(--sp-3) 0 var(--sp-1); }
.radar-summary p { font-size: var(--fs-small); margin: 0 0 var(--sp-1); }
.radar-summary ul { list-style: none; margin: 0; padding: 0; }

/* --- Dialogs ----------------------------------------------------------------------------------- */

.radar-dialog {
  width: min(40rem, calc(100vw - 2 * var(--sp-4))); max-height: min(44rem, calc(100dvh - 2 * var(--sp-4)));
  padding: var(--sp-4) var(--sp-5) var(--sp-5); overflow-y: auto;
  color: var(--ink); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-surface);
}
.radar-dialog::backdrop { background: color-mix(in srgb, #000 55%, transparent); }
.radar-help-body h3 { font-size: var(--fs-bulletin); margin: var(--sp-4) 0 var(--sp-1); }
.radar-help-body p, .radar-help-body li { font-size: var(--fs-small); line-height: 1.55; color: var(--ink); }
.radar-help-body fieldset { margin-top: var(--sp-3); }
.radar-keys { border-collapse: collapse; font-size: var(--fs-small); margin: var(--sp-1) 0 var(--sp-2); }
.radar-keys th, .radar-keys td { text-align: left; padding: 4px var(--sp-3) 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.radar-keys th { font-weight: 500; white-space: nowrap; }
kbd { font-family: var(--font-mono); font-size: var(--fs-micro); padding: 1px 6px; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-preview); }
.radar-share-url.input { margin: var(--sp-3) 0; font-family: var(--font-mono); font-size: var(--fs-micro); border-radius: var(--radius-control); }
.radar-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.radar-share-feedback { min-height: 1.4em; font-size: var(--fs-small); font-weight: 650; margin: var(--sp-2) 0 0; }
.radar-dialog .radar-choices { margin-top: var(--sp-3); }
.radar-dialog .radar-choice-head { min-height: 36px; }
.radar-dialog .radar-choice-head label { font-size: var(--fs-small); }

.radar-saved-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: 2px; }
.radar-saved-row { display: flex; align-items: center; gap: var(--sp-1); }
.radar-saved-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 44px; padding: var(--sp-1) var(--sp-2); text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: var(--radius-control);
}
.radar-saved-open:hover:not(:disabled) { background: var(--wash-strong); border-color: var(--edge); }
.radar-saved-open:disabled { cursor: default; opacity: 0.7; }
.radar-saved-row .radar-link-btn { flex: none; }

/* --- Focus mode ------------------------------------------------------------------------------------ */

.radar-focusbar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--line);
}
.radar-focusbar[hidden] { display: none; }
.radar-focusbar-text { margin: 0; font-size: var(--fs-small); font-weight: 650; }
body.radar-focus .masthead, body.radar-focus .pagehead, body.radar-focus .radar-drawer, body.radar-focus .drawer-scrim { display: none !important; }
body.radar-focus .shell { grid-template-columns: minmax(0, 1fr) !important; height: 100vh; height: 100dvh; }

/* --- Map markers --------------------------------------------------------------------------------- */

.radar-storm-marker { display: flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.radar-storm-dot {
  width: 13px; height: 13px; flex: none;
  border: 2px solid var(--radar-on-map); outline: 1px solid var(--radar-on-map-halo);
  background: var(--muted);
}
/* The Saffir-Simpson ramp from styles.css's shared properties: one scale site-wide. */
.radar-storm-dot.tier-unknown { background: var(--wx-tier-unknown); }
.radar-storm-dot.tier-td { background: var(--wx-tier-td); }
.radar-storm-dot.tier-ts { background: var(--wx-tier-ts); }
.radar-storm-dot.tier-c1 { background: var(--wx-tier-c1); }
.radar-storm-dot.tier-c2 { background: var(--wx-tier-c2); }
.radar-storm-dot.tier-c3 { background: var(--wx-tier-c3); }
.radar-storm-dot.tier-c4 { background: var(--wx-tier-c4); }
.radar-storm-dot.tier-c5 { background: var(--wx-tier-c5); }
.radar-storm-name {
  font-family: var(--font-body); font-weight: 650; font-size: var(--fs-small); color: var(--radar-on-map);
  text-shadow: 0 0 3px var(--radar-on-map-halo), 0 0 6px var(--radar-on-map-halo); white-space: nowrap;
}
.radar-invest-button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; }
.radar-invest-marker { display: block; width: 10px; height: 10px; border: 2px dashed var(--radar-on-map); background: transparent; outline: 1px solid var(--radar-on-map-halo); }
.radar-invest-marker.risk-high { background: color-mix(in srgb, #e0483a 50%, transparent); }
.radar-invest-marker.risk-medium { background: color-mix(in srgb, #f2a53b 50%, transparent); }
.radar-invest-marker.risk-low { background: color-mix(in srgb, #e6cf45 50%, transparent); }
.radar-invest-marker.risk-unknown { background: color-mix(in srgb, #93a4b5 50%, transparent); }
.radar-place-marker { display: flex; align-items: center; gap: 6px; pointer-events: none; }
.radar-place-dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--radar-on-map); border: 4px solid #1d6fe0; box-shadow: 0 0 0 2px var(--radar-on-map-halo);
}
.radar-place-name {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-small); color: var(--radar-on-map);
  text-shadow: 0 0 3px var(--radar-on-map-halo), 0 0 6px var(--radar-on-map-halo), 0 0 1px var(--radar-on-map-halo);
  white-space: nowrap;
}

/* --- MapLibre's own chrome, toned to the site -------------------------------------------------- */

.maplibregl-ctrl-attrib { font-size: var(--fs-micro); }
.maplibregl-ctrl-attrib-inner a, .maplibregl-ctrl-attrib a { text-decoration: underline; text-underline-offset: 0.15em; }
.maplibregl-ctrl.maplibregl-ctrl-group { border-radius: var(--radius-surface); box-shadow: none; border: 1px solid var(--edge); overflow: hidden; }
.maplibregl-ctrl-attrib.maplibregl-compact, .maplibregl-ctrl-attrib-button { border-radius: var(--radius-surface); }
.maplibregl-ctrl-scale {
  background: none; color: var(--radar-on-map); border-color: var(--radar-on-map); border-top: 0;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-micro); line-height: 1.4;
  padding: 0 var(--sp-1) 1px;
  filter: drop-shadow(0 0 1px var(--radar-on-map-halo)) drop-shadow(0 0 1px var(--radar-on-map-halo));
}
.radar-maps .maplibregl-ctrl-bottom-left { margin-bottom: 0; }
/* The credits wrap rather than run under the zoom buttons on a narrow map. */
.radar-maps .maplibregl-ctrl-bottom-right { max-width: calc(100% - 84px); }
.radar-maps[data-compare="on"] .radar-legend { bottom: 56px; }

/* --- When the map cannot run --------------------------------------------------------------------
   One surface across the whole workspace, never a column beside a dead map. */

.radar-fallback { position: absolute; inset: 0; z-index: 8; overflow-y: auto; background: var(--paper); }
.radar-fallback[hidden] { display: none; }
.radar-fallback-surface {
  max-width: 62rem; margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-8);
  display: grid; gap: var(--sp-3); color: var(--ink);
}
.radar-failure-title { margin: 0; font-size: var(--fs-lede); line-height: 1.25; }
.radar-failure-body { margin: 0; max-width: 68ch; font-size: var(--fs-remarks); color: var(--ink); }
.radar-fallback-primary { margin: var(--sp-2) 0; }
.radar-fallback-primary .radar-btn { min-height: 48px; font-size: var(--fs-bulletin); padding: 0 var(--sp-5); }
.radar-still { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.radar-still-title { margin: 0; font-size: var(--fs-lead); }
.radar-still .radar-field { max-width: 28rem; }
.radar-still .radar-field > span { width: auto; }
.radar-still-figure { margin: 0; }
.radar-still-frame { position: relative; width: 100%; max-width: 960px; background: var(--radar-canvas); border-radius: var(--radius-control); overflow: hidden; }
.radar-still-frame:empty { display: none; }
.radar-still-frame img { display: block; width: 100%; height: auto; }
.radar-still-frame .radar-still-radar { position: absolute; inset: 0; }
.radar-still-caption { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--ink-2); }
.radar-still-legend { max-width: 24rem; }
.radar-still-legend-title { margin: 0; font-size: var(--fs-small); font-weight: 700; }
.radar-fallback-links { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: var(--fs-bulletin); }
.radar-fallback-help { font-size: var(--fs-small); color: var(--ink-2); }
.radar-fallback-help summary { cursor: pointer; font-weight: 650; color: var(--ink); min-height: 32px; }
.radar-failure-detail { margin: 0; font-size: var(--fs-micro); color: var(--ink-2); overflow-wrap: anywhere; }
.radar-map--failed { display: none; }
body.radar-has-failed .shell { grid-template-columns: minmax(0, 1fr) !important; }
body.radar-has-failed .radar-drawer, body.radar-has-failed .radar-layers-btn, body.radar-has-failed .drawer-scrim { display: none !important; }
body.radar-has-failed .radar-maps { overflow: hidden; }

/* No script: the map region becomes the official still image and the ways out. */
.radar-noscript { position: absolute; inset: 0; z-index: 9; overflow-y: auto; padding: var(--sp-6) var(--gutter); background: var(--paper); color: var(--ink); }
.radar-noscript h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lede); }
.radar-noscript p { max-width: 68ch; }
.radar-noscript-figure { margin: var(--sp-3) 0; max-width: 600px; }
.radar-noscript-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.radar-noscript-figure figcaption { font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--sp-1); }

/* --- Narrower screens ------------------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .radar-bar { grid-template-columns: auto minmax(10rem, 1fr) auto auto; grid-template-areas: "controls readout latest settings" "track track track track" "foot foot foot foot"; }
  .radar-readout { justify-self: start; }
}

@media (max-width: 900px) {
  /* The drawer is the shared sheet here: it rises from the bottom, stops short of half the
     screen so the map stays in view, and grows on request. */
  body[data-page="radar"] .shell { grid-template-columns: minmax(0, 1fr); }
  body[data-page="radar"] .panel[data-drawer] {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 48vh; max-height: 48dvh;
    border-right: 0; border-top: 1px solid var(--edge);
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
    transform: translateY(100%); transition: transform 0.2s var(--ease);
    padding: 0 0 env(safe-area-inset-bottom, 0);
  }
  body[data-page="radar"] .panel[data-drawer][data-tall] {
    max-height: calc(100vh - var(--masthead-h) - var(--banner-h) - var(--sp-5));
    max-height: calc(100dvh - var(--masthead-h) - var(--banner-h) - var(--sp-5));
  }
  body[data-page="radar"] .panel[data-drawer][data-open] { transform: translateY(0); }
  body[data-page="radar"] .drawer-scrim { background: color-mix(in srgb, var(--radar-on-map-halo) 30%, transparent); }
  .sheet-grow {
    display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; margin-left: auto;
    min-height: 40px; padding: 0 var(--sp-3);
    font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer;
    color: var(--ink-2); background: transparent; border: 1px solid var(--edge); border-radius: var(--radius-control);
  }
  .sheet-grow-glyph { display: inline-block; transition: transform var(--dur) var(--ease); }
  .sheet-grow[aria-expanded="true"] .sheet-grow-glyph { transform: rotate(180deg); }
  body[data-page="radar"] .drawer-close { margin-left: 0; }

  .radar-toolbar-inner { flex-wrap: wrap; padding-block: var(--sp-2); }
  body[data-page="radar"] .pagehead-title { font-size: var(--fs-lead); }
  .radar-find { flex: 1 1 60%; max-width: none; order: 0; }
  .radar-imagery { flex: 1 1 12rem; }
  .radar-status-summary { flex: 1 1 100%; order: 5; min-height: 32px; padding: 0; max-width: none; }
  .radar-actions { margin-left: 0; }
  .radar-diagnostics { left: var(--sp-3); right: var(--sp-3); width: auto; }

  .radar-maps[data-compare="on"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }

  /* The inspector becomes a sheet over the lower map, above the bar. */
  .radar-inspector { top: auto; bottom: var(--sp-2); left: var(--sp-2); right: var(--sp-2); width: auto; max-height: 55%; }
  .radar-notices { max-height: 45%; }
  .radar-legend { bottom: 30px; width: min(15rem, calc(100% - 2 * var(--sp-3))); }
}
.sheet-grow { display: none; }
@media (max-width: 900px) { .sheet-grow { display: inline-flex; } }

@media (max-width: 640px) {
  .radar-toolbar-inner { gap: var(--sp-2); padding-inline: var(--sp-3); }
  body[data-page="radar"] .pagehead-title { font-size: var(--fs-bulletin); margin-right: 0; }
  .radar-title-mark { width: 20px; height: 20px; }
  /* Row one: the title and the search. Row two: the imagery, Layers and More. The product's
     status is in the bar's readout and the map's notices here, and in More. */
  .radar-find { flex: 1 1 calc(100% - 100px); min-width: 0; }
  .radar-find-field { min-width: 0; }
  .radar-find-locate-word { display: none; }
  .radar-imagery { order: 2; flex: 1 1 8rem; min-width: 0; }
  .radar-actions { order: 3; }
  .radar-status-summary { display: none; }
  .radar-menu-item--status { display: flex; }
  .radar-action .radar-action-word { display: none; }
  .radar-action { padding: 0 var(--sp-2); min-width: 44px; }
  body[data-page="radar"] .panel-toggle.radar-action .radar-action-word { display: inline; }
  /* The bar in three short rows: transport and settings; the frame's time and Latest; the
     track. The loop length moves into the settings, next to the speed. */
  .radar-bar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "controls controls latest settings" "readout readout readout readout" "track track track track" "foot foot foot foot";
    padding: var(--sp-2) var(--sp-3) 4px; gap: 2px var(--sp-2);
  }
  .radar-bar-controls { gap: 6px; }
  .radar-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
  .radar-duration { display: none; }
  .radar-readout-time { font-size: var(--fs-bulletin); }
  .radar-readout-second, .radar-readout-source { display: none; }
  .radar-latest { padding: 0 var(--sp-3); }
  .radar-legend-note { display: none; }
  .radar-legend-stop:nth-child(even) span { visibility: hidden; }
  .radar-notices { left: var(--sp-2); width: calc(100% - 2 * var(--sp-2)); }
  .radar-bar-foot .radar-bar-foot-more { display: none; }
}
/* Touch: every control a finger is meant to hit clears 44px. The attribution's inline links
   are left alone: they are words in a sentence, which WCAG's target-size rule exempts, and
   growing them would lay opaque hit areas over the map they credit. */
@media (pointer: coarse) {
  .maplibregl-ctrl button.maplibregl-ctrl-zoom-in,
  .maplibregl-ctrl button.maplibregl-ctrl-zoom-out { width: 44px; height: 44px; }
  .radar-find-locate, .radar-find-clear { min-width: 44px; height: 44px; }
  .radar-icon-btn { width: 44px; height: 44px; }
  .radar-bar-btn, .radar-duration, .radar-latest, .radar-action, .radar-btn, .radar-retry, .radar-link-btn,
  .radar-select, .radar-product, .sheet-grow, .radar-warnings-summary, .radar-cat-summary { min-height: 44px; }
  .radar-bar-btn { width: 44px; height: 44px; }
  .radar-play { width: 52px; height: 52px; }
  .radar-track { height: 44px; }
  .radar-invest-button { width: 44px; height: 44px; }
  .radar-opacity { min-height: 44px; }
  /* Padding, not a pseudo-element: a MapLibre marker is positioned over the canvas by the
     library, and an expanded ::after does not reliably win that stacking contest. */
  .radar-storm-marker { padding-block: 12px; }
}

/* Motion the reader has asked to be spared. The map's own movement is handled in radar.js. */
@media (prefers-reduced-motion: reduce) {
  .radar-cat-summary::after, .sheet-grow-glyph, input[type="checkbox"].radar-switch, input[type="checkbox"].radar-switch::after { transition: none; }
  body[data-page="radar"] .panel[data-drawer] { transition: none; }
  .maplibregl-user-location-dot::before { animation: none; }
}

/* Forced colours: boundaries the system paints, so every control keeps an edge. */
@media (forced-colors: active) {
  input[type="checkbox"].radar-switch { border: 1px solid CanvasText; }
  input[type="checkbox"].radar-switch::after { background: CanvasText; }
  .radar-track-rail, .radar-tick, .radar-track-thumb { background: CanvasText; }
  .radar-badge--past { border: 1px solid CanvasText; }
}

/* Radar's controls are controls; the global link underline does not apply to them. The
   doubled class outranks the prose rule (`p a:not(.btn)`) for a button-styled link. */
.radar-btn.radar-btn, .radar-warning, .radar-saved-open, .radar-menu-item { text-decoration: none; }