/* Spotify uses Spotify Mix. The font is used only if installed or licensed
   by the site owner; DM Sans is an open-font visual fallback. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap");
:root {
  font-family: Spotify Mix, DM Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1e293b;
  --glass: rgba(255,255,255,.94);
  --border: rgba(148,163,184,.24);
  --shadow: 0 10px 34px rgba(15,23,42,.16);
  --orange: #ff9f1c;
  --blue: #3b82f6;
}
* { box-sizing: border-box; }
html, body, #map { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #e5e7eb; }
button, select, input { font: inherit; }
button { color: inherit; }
#map { position: fixed; inset: 0; z-index: 0; }
.leaflet-control-zoom { display: none; }
.leaflet-image-layer.radar-overlay { image-rendering: auto; }
/* r51 keyless basemap: one OpenStreetMap raster source, locally themed.
   Filtering the tile layer (rather than the whole map) leaves radar imagery,
   warnings, observations, labels and vector boundaries untouched. */
.leaflet-layer.osm-basemap-light {
  filter: none;
}
.leaflet-layer.osm-basemap-intermediate {
  filter: grayscale(.72) brightness(.78) contrast(.88) saturate(.48);
}
.leaflet-layer.osm-basemap-dark {
  filter: invert(.94) hue-rotate(180deg) brightness(.52) contrast(1.28) saturate(.42);
}
.radar-site-label-icon {
  display: flex !important; align-items: center; justify-content: center;
  border: 0 !important; background: transparent !important;
  pointer-events: auto; cursor: pointer;
}
.radar-site-badge {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 19px; padding: 2px 5px;
  border: 2px solid rgba(255,255,255,.98); border-radius: 999px;
  color: #fff; font-size: 10px; font-weight: 900; line-height: 1;
  letter-spacing: -.035em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(15,23,42,.92), 0 2px 7px rgba(15,23,42,.72);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  transform: scale(var(--radar-site-badge-scale, 1));
  transform-origin: center; transition: transform .14s ease, background-color .14s ease;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.radar-site-badge.is-selected { background: #2563eb; }
.radar-site-badge.is-available { background: #16823b; }
.radar-site-badge.is-unavailable { background: #b91c1c; }
.radar-site-badge.is-checking { background: #64748b; }
.radar-site-label-icon:hover .radar-site-badge,
.radar-site-label-icon:focus .radar-site-badge { filter: brightness(1.13); }

.value-marker-icon,
.search-result-marker-icon {
  border: 0 !important; background: transparent !important; pointer-events: none !important;
}
.value-marker-icon { display: grid !important; place-items: center; }
.value-marker-shape {
  position: relative; display: block; flex: 0 0 auto;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.98));
}
.value-marker-crosshair { width: 18px; height: 18px; }
.value-marker-crosshair::before,
.value-marker-crosshair::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #000;
  transform: translate(-50%, -50%);
}
.value-marker-crosshair::before { width: 18px; height: 2px; }
.value-marker-crosshair::after { width: 2px; height: 18px; }
.value-marker-square { width: 8px; height: 8px; background: #000; }
.value-marker-circle { width: 9px; height: 9px; border-radius: 50%; background: #000; }
.value-marker-triangle {
  width: 11px; height: 10px; background: #000;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.search-result-pin {
  position: relative; width: 28px; height: 28px; display: block;
  border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  background: #2563eb; box-shadow: 0 2px 8px rgba(15,23,42,.65);
  transform: rotate(-45deg);
}
.search-result-pin > span {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; transform: translate(-50%, -50%);
}

.topbar {
  position: fixed; z-index: 1000; top: 12px; left: 12px; right: 12px;
  min-height: 80px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 26px;
  background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.brand { min-width: 420px; display: flex; align-items: center; gap: 14px; margin-right: auto; }
.brand-copy {
  min-width: 0; display: flex; align-items: baseline; gap: 9px;
  overflow: visible; white-space: nowrap;
}
.brand h1 { margin: 0; font-size: 22px; line-height: 1.05; letter-spacing: -.02em; }
.brand-author {
  color: #8b1e2d; font-size: clamp(8px, .55vw, 11px); font-weight: 800;
  line-height: 1; letter-spacing: -.025em; white-space: nowrap;
}
.brand-logo {
  position: relative; width: 54px; height: 54px; flex: 0 0 54px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.36); border-radius: 17px;
  background: #075f61; box-shadow: 0 8px 18px rgba(3,92,94,.28);
}
.brand-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%;
  object-fit: contain; object-position: center; user-select: none; pointer-events: none;
}

.control, .theme-control, .map-box {
  height: 58px; border: 1px solid var(--border); border-radius: 17px;
  background: rgba(241,245,249,.88);
}
.select-control { min-width: 175px; padding: 8px 12px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; }
.parameter-control { min-width: 285px; }
.elevation-control { min-width: 150px; }
.select-control > span { color: #7b8798; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
select { min-width: 0; max-width: 100%; border: 0; outline: 0; background: transparent; font-weight: 700; font-size: 16px; cursor: pointer; }
.theme-control { display: flex; padding: 5px; }
.theme-control button { border: 0; background: transparent; border-radius: 12px; padding: 0 15px; font-weight: 700; color: #6b7587; cursor: pointer; }
.theme-control button.active { color: #20293a; background: #dce2e8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.theme-control button:disabled,
.theme-control button.is-locked { cursor: not-allowed; opacity: .38; }
.theme-control button.active:disabled { opacity: 1; cursor: default; }
.boundary-button { min-width: 155px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--border); font-weight: 700; cursor: pointer; }
.switch-dot { width: 43px; height: 25px; padding: 3px; display: inline-flex; border-radius: 999px; background: #cbd5e1; transition: .2s; }
.switch-dot::after { content: ""; width: 19px; height: 19px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: .2s; }
.switch-dot.on { background: var(--blue); }
.switch-dot.on::after { transform: translateX(18px); }
.switch-dot.partial { background: #f59e0b; }
.switch-dot.partial::after { transform: translateX(9px); }

.tools-wrap {
  position: fixed; z-index: 1000; top: 104px; left: 28px; width: 184px;
  display: grid; gap: 7px;
}
.tool-control { position: relative; }
.tools-button {
  width: 184px; min-width: 0; padding: 0 13px;
  display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 9px;
  border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer;
  font-weight: 750; text-align: left; backdrop-filter: blur(14px); transition: border-color .16s, background .16s, transform .16s;
}
.tools-button:hover { border-color: rgba(59,130,246,.38); background: rgba(248,250,252,.97); }
.tools-button:active { transform: translateY(1px); }
.tool-button-icon { display: grid; place-items: center; font-size: 18px; line-height: 1; }
.drawing-brush-icon { font-size: 19px; }
.language-button-icon { font-size: 18px; }
.language-chevron { font-size: 16px; transform: none !important; }
.tool-button-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-chevron { color: #7b8798; font-size: 23px; font-weight: 600; line-height: 1; transition: transform .16s; }
.tools-button[aria-expanded="true"] .tool-chevron { transform: rotate(90deg); }
.tools-lines { font-size: 18px; }
.information-button-icon { width: 22px; height: 22px; display: grid; place-items: center; color: #075f61; }
.information-button-icon svg { width: 22px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.information-button-icon .information-dot { fill: currentColor; stroke: none; }
.information-button[aria-expanded="true"] { border-color: rgba(7,95,97,.46); background: rgba(236,254,255,.96); }
.information-panel {
  position: fixed; z-index: 1030; top: auto;
  bottom: var(--information-panel-bottom, 8px);
  left: var(--information-panel-left, 221px);
  width: min(355px, calc(100vw - 245px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; border: 1px solid var(--border); border-radius: 17px;
  background: rgba(255,255,255,.97); box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.information-panel header {
  min-height: 58px; padding: 10px 10px 10px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.24); background: rgba(248,250,252,.96);
}
.information-panel header div { display: grid; gap: 2px; }
.information-panel header span { color: #768397; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.information-panel header strong { color: #1f2b3d; font-size: 16px; }
.information-panel header button {
  width: 35px; height: 35px; flex: 0 0 35px; border: 0; border-radius: 11px;
  background: #e5eaf0; cursor: pointer; color: #526076; font-size: 23px; line-height: 1;
}
.information-panel header button:hover { background: #dbe3eb; }
.information-panel-body { padding: 13px 15px 15px; color: #405067; }
.information-panel-body p { margin: 0; font-size: 12px; line-height: 1.48; }
.information-panel-body p + p { margin-top: 10px; }
.information-panel-body a { color: #075f61; font-weight: 750; overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.information-usage-notice {
  padding: 11px 12px;
  border: 1px solid rgba(139, 30, 45, .28);
  border-radius: 12px;
  background: rgba(139, 30, 45, .08);
  color: #641824;
  overflow-wrap: anywhere;
}
.information-usage-notice strong {
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .015em;
}

.information-contributors { padding-left: 10px; border-left: 3px solid rgba(7,95,97,.28); }
.tools-menu {
  position: absolute; top: 0; left: calc(100% + 9px); width: 220px; margin: 0; padding: 7px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 15px;
  box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.tools-menu > button { width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; text-align: left; background: transparent; cursor: pointer; font-weight: 650; }
.tools-menu > button:hover { background: #e8edf3; }
.tools-menu.is-desktop-portal {
  position: fixed; z-index: 1400; margin: 0;
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  pointer-events: auto;
}
.general-tools-menu.is-desktop-portal {
  width: 340px; max-height: min(720px, calc(100dvh - 16px));
}
.factual-data-menu.is-desktop-portal {
  width: 420px; max-height: min(780px, calc(100dvh - 16px));
  padding: 11px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
}
.general-tools-control > .tools-menu {
  width: 340px; max-height: min(720px, calc(100vh - 120px)); overflow-y: auto; scrollbar-width: thin;
}
.map-query-tools { display: grid; gap: 9px; padding: 5px; }
.location-search-form { display: grid; gap: 6px; }
.location-search-form > label,
.tool-setting-select > span {
  color: #475569; font-size: 11px; font-weight: 850; letter-spacing: .015em;
}
.location-search-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.location-search-entry input {
  width: 100%; min-width: 0; height: 39px; padding: 0 10px;
  border: 1px solid rgba(148,163,184,.38); border-radius: 10px;
  outline: 0; background: #fff; color: #1e293b; font-size: 13px;
}
.location-search-entry input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.16); }
.location-search-entry button {
  height: 39px; padding: 0 12px; border: 0; border-radius: 10px;
  background: #2563eb; color: #fff; cursor: pointer; font-size: 12px; font-weight: 800;
}
.location-search-entry button:disabled { cursor: wait; opacity: .62; }
.location-search-status { min-height: 14px; margin: 0; color: #64748b; font-size: 10px; line-height: 1.35; }
.location-search-status.is-error { color: #b91c1c; }
.location-search-results {
  max-height: 190px; display: grid; gap: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.location-search-result {
  width: 100%; padding: 8px 9px; display: grid; gap: 3px;
  border: 1px solid rgba(148,163,184,.27); border-radius: 10px;
  background: #f8fafc; cursor: pointer; color: #263247; text-align: left;
}
.location-search-result:hover,
.location-search-result:focus-visible { border-color: rgba(59,130,246,.5); background: #eff6ff; }
.location-search-result strong { overflow: hidden; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.location-search-result span { color: #64748b; font-size: 10px; line-height: 1.25; }
.location-search-result small { color: #1d4ed8; font-size: 9px; font-weight: 800; }
.geocoder-attribution { color: #7b8798; font-size: 9px; }
.geocoder-attribution a { color: #475569; text-underline-offset: 2px; }
.tool-setting-checkbox,
.tool-setting-select {
  min-height: 38px; padding: 7px 8px; display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(148,163,184,.24); border-radius: 10px; background: rgba(248,250,252,.92);
}
.tool-setting-checkbox { cursor: pointer; }
.tool-setting-checkbox input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: #2563eb; }
.tool-setting-checkbox span { color: #3f4d62; font-size: 10px; font-weight: 700; line-height: 1.25; }
.tool-setting-select { justify-content: space-between; }
.tool-setting-select select {
  min-width: 112px; height: 31px; padding: 0 25px 0 8px;
  border: 1px solid rgba(148,163,184,.34); border-radius: 8px; background: #fff; font-size: 11px;
}

.test-data-dataset-panel[hidden] { display: none !important; }
.test-data-dataset-panel {
  display: grid; gap: 7px; padding: 8px; border: 1px solid rgba(37,99,235,.28);
  border-radius: 11px; background: rgba(239,246,255,.72);
}
.test-data-dataset-heading { color: #334155; font-size: 11px; font-weight: 900; letter-spacing: .015em; }
.test-data-dataset-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.test-data-dataset-choice {
  position: relative; min-width: 0; min-height: 64px; padding: 7px 5px 18px; display: grid; align-content: start; gap: 3px;
  border: 1px solid rgba(148,163,184,.38); border-radius: 9px; background: #fff; color: #334155;
  cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.test-data-dataset-choice strong { font-size: 10.5px; line-height: 1.15; overflow-wrap: anywhere; }
.test-data-dataset-choice small { color: #64748b; font-size: 8px; line-height: 1.2; overflow-wrap: anywhere; }
.test-data-dataset-choice:hover:not(:disabled) { border-color: #60a5fa; background: #f8fbff; }
.test-data-dataset-choice.is-selected { border-color: #2563eb; background: #dbeafe; box-shadow: inset 0 0 0 1px rgba(37,99,235,.18); }
.test-data-dataset-choice:disabled { cursor: default; opacity: .68; }
.test-data-dataset-readiness {
  position: absolute; left: 5px; bottom: 4px; padding: 1px 4px; border-radius: 999px;
  background: #e2e8f0; color: #475569; font-size: 7px; font-weight: 900; letter-spacing: .04em;
}
.test-data-dataset-choice.is-selected .test-data-dataset-readiness { background: #2563eb; color: #fff; }
.test-data-dataset-select-fallback { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.test-data-dataset-select-fallback > span { color: #64748b; font-size: 9px; font-weight: 800; }
.test-data-dataset-select-fallback select {
  min-width: 0; max-width: 230px; height: 29px; padding: 0 24px 0 7px;
  border: 1px solid rgba(148,163,184,.34); border-radius: 8px; background: #fff; color: #334155; font-size: 9px;
}
.imagery-mode-control {
  margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px;
  border: 1px solid rgba(37,99,235,.24); border-radius: 11px; background: rgba(239,246,255,.78);
}
.imagery-mode-control legend {
  padding: 0 4px; color: #334155; font-size: 11px; font-weight: 850;
}
.imagery-mode-control label {
  min-width: 0; min-height: 42px; padding: 6px 4px; display: grid; place-items: center; align-content: center; gap: 3px;
  border: 1px solid rgba(148,163,184,.30); border-radius: 9px; background: #fff;
  color: #475569; cursor: pointer; text-align: center; font-size: 9px; font-weight: 800; line-height: 1.15;
}
.imagery-mode-control label:has(input:checked) {
  border-color: #2563eb; background: #dbeafe; color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
}
.imagery-mode-control input { width: 14px; height: 14px; margin: 0; accent-color: #2563eb; }
.imagery-mode-control small {
  grid-column: 1 / -1; color: #64748b; font-size: 9px; line-height: 1.3;
}
.lightning-radar-sync-button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(220,38,38,.58);
  border-radius: 10px;
  background: rgba(254,242,242,.98);
  color: #7f1d1d;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
.lightning-radar-sync-button:hover { background: #fee2e2; }
.lightning-radar-sync-button:focus-visible {
  outline: 3px solid rgba(59,130,246,.34);
  outline-offset: 2px;
}
.lightning-radar-sync-indicator {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #dc2626;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(127,29,29,.22);
}
.lightning-radar-sync-copy { min-width: 0; display: grid; gap: 2px; }
.lightning-radar-sync-copy strong { color: #263247; font-size: 10px; line-height: 1.2; }
.lightning-radar-sync-copy small { color: #64748b; font-size: 8px; font-weight: 650; line-height: 1.25; }
.lightning-radar-sync-status {
  min-width: 39px;
  padding: 3px 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
}
.lightning-radar-sync-button.is-radar-matched {
  border-color: rgba(22,163,74,.68);
  background: rgba(240,253,244,.98);
  color: #14532d;
}
.lightning-radar-sync-button.is-radar-matched:hover { background: #dcfce7; }
.lightning-radar-sync-button.is-radar-matched .lightning-radar-sync-indicator,
.lightning-radar-sync-button.is-radar-matched .lightning-radar-sync-status {
  background: #16a34a;
}
.boundary-opacity-settings {
  padding: 8px; display: grid; gap: 7px;
  border: 1px solid rgba(148,163,184,.25); border-radius: 11px; background: rgba(248,250,252,.92);
}
.boundary-opacity-settings > strong { color: #475569; font-size: 10px; }
.boundary-opacity-settings label { display: grid; gap: 3px; }
.boundary-opacity-settings label > span {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #526076; font-size: 9px; font-weight: 800;
}
.boundary-opacity-settings output { font-variant-numeric: tabular-nums; }
.boundary-opacity-settings input { width: 100%; margin: 0; accent-color: #334155; cursor: pointer; }
.measure-hint { position: fixed; z-index: 1000; top: 104px; left: 222px; padding: 9px 13px; border-radius: 12px; background: rgba(15,23,42,.88); color: #fff; box-shadow: var(--shadow); font-size: 13px; }

.drawing-tools-button-active { border-color: rgba(59,130,246,.45); background: rgba(239,246,255,.96); }
.drawing-tools-menu {
  width: 318px; max-height: min(680px, calc(100vh - 120px)); padding: 11px; overflow-y: auto;
  scrollbar-width: thin;
}
.drawing-tools-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 1px 2px 10px; }
.drawing-tools-heading strong { font-size: 14px; }
.drawing-tools-heading span { color: #728096; font-size: 11px; font-weight: 750; }
.drawing-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.drawing-tool-grid .drawing-tool {
  width: auto; min-height: 58px; padding: 7px 4px;
  display: grid; place-items: center; align-content: center; gap: 3px;
  border: 1px solid rgba(148,163,184,.25); border-radius: 11px;
  background: rgba(248,250,252,.9); cursor: pointer; color: #334155;
}
.drawing-tool-grid .drawing-tool:hover { border-color: rgba(59,130,246,.42); background: #edf4ff; }
.drawing-tool-grid .drawing-tool.active { border-color: #3b82f6; background: #dbeafe; color: #1d4ed8; box-shadow: inset 0 0 0 1px rgba(59,130,246,.15); }
.drawing-tool-grid .drawing-eraser-tool.active { border-color: #f97316; background: #ffedd5; color: #c2410c; box-shadow: inset 0 0 0 1px rgba(249,115,22,.16); }
.drawing-tool-grid .drawing-tool > span { font-size: 23px; line-height: 1; }
.drawing-tool-grid .drawing-tool small { font-size: 9px; font-weight: 800; line-height: 1; }
.drawing-style-details > summary { display: none; }
.drawing-settings { margin-top: 10px; padding-top: 10px; display: grid; gap: 10px; border-top: 1px solid rgba(148,163,184,.25); }
.drawing-color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawing-color-control, .drawing-range-control, .drawing-select-control, .drawing-check-control {
  color: #526076; font-size: 11px; font-weight: 800;
}
.drawing-color-control {
  min-height: 43px; padding: 6px 7px 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid rgba(148,163,184,.25); border-radius: 10px; background: rgba(248,250,252,.85);
}
.drawing-color-control input[type="color"] { width: 32px; height: 29px; padding: 2px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.drawing-range-control { display: grid; gap: 6px; }
.drawing-range-control > span { display: flex; justify-content: space-between; gap: 10px; }
.drawing-range-control output { color: #243047; font-variant-numeric: tabular-nums; }
.drawing-range-control input[type="range"] { width: 100%; margin: 0; accent-color: #3b82f6; cursor: pointer; }
.drawing-select-control { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 9px; }
.drawing-select-control select { height: 35px; padding: 0 9px; border: 1px solid rgba(148,163,184,.30); border-radius: 9px; background: #f8fafc; font-size: 12px; }
.drawing-check-control { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.drawing-check-control input { width: 17px; height: 17px; margin: 0; accent-color: #3b82f6; }
.drawing-actions { margin-top: 11px; padding-top: 10px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; border-top: 1px solid rgba(148,163,184,.25); }
.drawing-actions button { min-height: 38px; padding: 7px 9px; border: 1px solid rgba(148,163,184,.28); border-radius: 10px; background: #eef2f7; cursor: pointer; font-size: 11px; font-weight: 800; }
.drawing-actions button:hover { background: #e2e8f0; }
.drawing-actions .drawing-clear-button { border-color: rgba(220,38,38,.22); background: #fef2f2; color: #b91c1c; }
.drawing-actions .drawing-clear-button:hover { background: #fee2e2; }

.warnings-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.warning-button-icon {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: #94a3b8; color: #fff; font-size: 16px; font-weight: 950; line-height: 1;
}
.warnings-button.is-enabled { border-color: rgba(249,115,22,.35); }
.warnings-button.is-enabled .warning-button-icon { background: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,.11); }
.warnings-button:not(.is-enabled) { color: #68758a; }
.warnings-button.has-no-warnings .warning-button-icon { background: #94a3b8; box-shadow: none; }
.tool-status { color: #6c788b; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.warnings-button.is-enabled:not(.has-no-warnings) .tool-status { color: #c2410c; }
.general-warnings-button.is-enabled { border-color: rgba(220,38,38,.30); }
.general-warnings-button.is-enabled .general-warning-icon { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.10); }
.general-warnings-button.is-enabled:not(.has-no-warnings) .tool-status { color: #b91c1c; }
.radar-visibility-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.radar-button-icon {
  width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%;
  background: #94a3b8; color: #fff;
}
.radar-button-icon svg {
  width: 21px; height: 21px; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
.radar-button-icon .radar-dish-fill,
.radar-button-icon .radar-feed { fill: currentColor; stroke: none; }
.radar-button-icon .radar-dish-rim { stroke-width: 1.55; }
.radar-button-icon .radar-wave { stroke-width: 1.65; }
.radar-visibility-button.is-enabled { border-color: rgba(59,130,246,.34); }
.radar-visibility-button.is-enabled .radar-button-icon { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.11); }
.radar-visibility-button.is-enabled .tool-status { color: #1d4ed8; }
.radar-visibility-button:not(.is-enabled) { color: #68758a; }
.satellite-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.satellite-button-icon {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: #e2e8f0; color: #64748b;
}
.satellite-button-icon svg {
  width: 21px; height: 21px; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.satellite-button-icon svg circle { fill: currentColor; stroke: currentColor; }
.satellite-button.is-enabled { border-color: rgba(14,165,233,.43); }
.satellite-button.is-enabled .satellite-button-icon {
  background: #0284c7; color: #fff; box-shadow: 0 0 0 4px rgba(14,165,233,.12);
}
.satellite-button.is-enabled .tool-status { color: #0369a1; }
.satellite-button.has-satellite-error { border-color: rgba(220,38,38,.42); }
.satellite-button.has-satellite-error .satellite-button-icon { background: #dc2626; box-shadow: none; }
.satellite-button.has-satellite-error .tool-status { color: #b91c1c; }
.satellite-menu {
  position: fixed; top: 104px; left: 221px;
  width: 370px; max-height: min(680px, calc(100vh - 120px)); padding: 12px; overflow-y: auto;
  scrollbar-width: thin;
}
.satellite-menu-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 1px 1px 11px; border-bottom: 1px solid rgba(148,163,184,.25);
}
.satellite-menu-heading > div { min-width: 0; display: grid; gap: 2px; }
.satellite-menu-heading strong { color: #1f2b3d; font-size: 14px; }
.satellite-menu-heading > div span {
  color: #7b8798; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em;
}
.satellite-mode-badge {
  padding: 5px 8px; border-radius: 999px; background: #e2e8f0; color: #64748b;
  font-size: 9px; font-weight: 900; text-transform: uppercase;
}
.satellite-mode-badge.is-enabled { background: #e0f2fe; color: #0369a1; }
.satellite-toggle-controls {
  margin-top: 10px; display: grid; gap: 7px;
}
.satellite-switch-control {
  min-height: 50px; padding: 8px 9px; display: grid;
  grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 10px;
  border: 1px solid rgba(148,163,184,.26); border-radius: 10px;
  background: #f8fafc; cursor: pointer;
}
.satellite-switch-control > span { min-width: 0; display: grid; gap: 2px; }
.satellite-switch-control b { color: #263247; font-size: 11px; line-height: 1.25; }
.satellite-switch-control small { color: #7b8798; font-size: 8.5px; line-height: 1.3; }
.satellite-switch-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.satellite-switch-control i {
  width: 40px; height: 23px; padding: 3px; display: block; justify-self: end;
  border-radius: 999px; background: #cbd5e1; transition: background .18s;
}
.satellite-switch-control i::after {
  content: ""; display: block; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.30); transition: transform .18s;
}
.satellite-switch-control input:checked + i { background: #0284c7; }
.satellite-switch-control input:checked + i::after { transform: translateX(17px); }
.satellite-switch-control input:focus-visible + i { outline: 3px solid rgba(59,130,246,.40); outline-offset: 2px; }
.satellite-layer-control {
  margin-top: 11px; display: grid; gap: 6px; color: #526076; font-size: 10px;
  font-weight: 850; text-transform: uppercase; letter-spacing: .04em;
}
.satellite-layer-control select {
  width: 100%; height: 39px; padding: 0 10px;
  border: 1px solid rgba(148,163,184,.30); border-radius: 10px;
  background: #f8fafc; color: #263247; font-size: 12px; text-transform: none;
}
.satellite-layer-control select:disabled { cursor: default; opacity: .52; }
.satellite-message {
  min-height: 30px; margin: 9px 1px 0; color: #334155; font-size: 10px;
  font-weight: 750; line-height: 1.4;
}
.satellite-shared-timeline-note {
  margin: 6px 1px 0; padding: 7px 8px; border-radius: 9px;
  background: #e0f2fe; color: #075985; font-size: 9px; font-weight: 750; line-height: 1.35;
}
.satellite-note {
  margin: 7px 1px 0; padding-top: 8px; border-top: 1px solid rgba(148,163,184,.22);
  color: #7b8798; font-size: 8px; line-height: 1.38;
}
.satellite-note a { color: #0369a1; font-weight: 800; text-underline-offset: 2px; }
.storm-tracking-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.storm-button-icon {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: #e2e8f0; color: #64748b;
}
.storm-button-icon svg {
  width: 21px; height: 21px; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.storm-button-icon .storm-cloud { fill: currentColor; stroke: none; }
.storm-button-icon .storm-bolt { fill: currentColor; stroke: none; }
.storm-button-icon .storm-rain { stroke-width: 1.9; }
.storm-tracking-button.is-enabled { border-color: rgba(255,138,0,.48); }
.storm-tracking-button.is-enabled .storm-button-icon {
  background: #ff8a00; color: #fff; box-shadow: 0 0 0 4px rgba(255,138,0,.12);
}
.storm-tracking-button.is-enabled .tool-status { color: #c45f00; }
.storm-tracking-button.has-stale-data { border-color: rgba(217,119,6,.50); }
.storm-tracking-button.has-stale-data .storm-button-icon { background: #d97706; box-shadow: none; }
.storm-tracking-button.has-storm-error { border-color: rgba(220,38,38,.40); }
.storm-tracking-button.has-storm-error .storm-button-icon { background: #dc2626; box-shadow: none; }
.storm-tracking-button.has-storm-error .tool-status { color: #b91c1c; }
.storm-tracking-menu {
  width: 360px; max-height: min(640px, calc(100vh - 120px)); padding: 12px; overflow-y: auto;
  scrollbar-width: thin;
}
.storm-menu-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 1px 1px 11px; border-bottom: 1px solid rgba(148,163,184,.25);
}
.storm-menu-heading > div { min-width: 0; display: grid; gap: 2px; }
.storm-menu-heading strong { color: #1f2b3d; font-size: 14px; }
.storm-menu-heading > div span {
  color: #7b8798; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em;
}
.storm-master-switch {
  min-width: 81px; display: grid; grid-template-columns: 40px auto; align-items: center; gap: 7px;
  cursor: pointer;
}
.storm-master-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.storm-master-switch > span {
  width: 40px; height: 23px; padding: 3px; display: block; border-radius: 999px;
  background: #cbd5e1; transition: background .18s;
}
.storm-master-switch > span::after {
  content: ""; display: block; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.30); transition: transform .18s;
}
.storm-master-switch input:checked + span { background: #ff8a00; }
.storm-master-switch input:checked + span::after { transform: translateX(17px); }
.storm-master-switch input:focus-visible + span { outline: 3px solid rgba(59,130,246,.40); outline-offset: 2px; }
.storm-master-switch b { color: #526076; font-size: 10px; text-transform: uppercase; }
.storm-mode-fieldset { min-width: 0; margin: 11px 0 0; padding: 0; border: 0; }
.storm-mode-fieldset legend { margin-bottom: 7px; color: #526076; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.storm-mode-fieldset:disabled { opacity: .48; }
.storm-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.storm-mode-grid button {
  min-width: 0; min-height: 75px; padding: 7px 4px; display: grid; place-items: center; align-content: center; gap: 3px;
  border: 1px solid rgba(148,163,184,.28); border-radius: 11px;
  background: #f8fafc; color: #334155; cursor: pointer;
}
.storm-mode-grid button:hover { border-color: rgba(255,138,0,.50); background: #fff7ed; }
.storm-mode-grid button.active {
  border-color: #ff8a00; background: #fff3df; color: #9a4a00;
  box-shadow: inset 0 0 0 1px rgba(255,138,0,.15);
}
.storm-mode-grid button b { font-size: 10px; }
.storm-mode-grid button small { min-height: 20px; color: #758196; font-size: 8px; line-height: 1.18; }
.storm-mode-swatch { height: 22px; display: grid; place-items: center; color: #ff343e; font-size: 20px; line-height: 1; }
.storm-outline-swatch {
  width: 25px; height: 18px; border: 1.5px solid rgba(15,23,42,.78); border-radius: 50% 42% 55% 44%;
  background: rgba(255,212,0,.15);
}
.storm-direction-swatch { font-weight: 950; }
.storm-tracks-swatch { color: #c026d3; letter-spacing: 2px; transform: translateY(-3px); }
.storm-severity-key {
  margin-top: 10px; padding: 8px 9px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px;
  border: 1px solid rgba(148,163,184,.23); border-radius: 10px; background: rgba(248,250,252,.86);
}
.storm-severity-key span { min-width: 0; display: flex; align-items: center; gap: 5px; }
.storm-severity-key i { width: 10px; height: 10px; flex: 0 0 10px; border: 2px solid currentColor; border-radius: 50%; }
.storm-severity-key i.light { color: #ffd400; }
.storm-severity-key i.moderate { color: #ff8a00; }
.storm-severity-key i.heavy { color: #ff343e; }
.storm-severity-key i.extreme { color: #c026d3; }
.storm-severity-key b { overflow: hidden; color: #526076; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.storm-tracking-message {
  min-height: 30px; margin: 9px 1px 0; color: #334155; font-size: 10px; font-weight: 750; line-height: 1.4;
}
.storm-experimental-note {
  margin: 7px 1px 0; padding-top: 8px; border-top: 1px solid rgba(148,163,184,.22);
  color: #7b8798; font-size: 8px; line-height: 1.38;
}
.location-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.location-button-icon {
  width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%;
  background: #e2e8f0; color: #64748b;
}
.location-button-icon svg {
  width: 20px; height: 20px; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.location-button-icon svg circle:first-child { fill: currentColor; stroke: none; }
.location-button.is-enabled { border-color: rgba(37,99,235,.36); }
.location-button.is-enabled .location-button-icon {
  background: #2563eb; color: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.location-button.is-enabled .tool-status { color: #1d4ed8; }
.location-button.is-locating .location-button-icon svg { animation: location-button-spin 1.25s linear infinite; }
.location-button.has-location-error { border-color: rgba(220,38,38,.32); color: #7f1d1d; }
.location-button.has-location-error .location-button-icon { background: #fee2e2; color: #b91c1c; box-shadow: none; }
.location-button.has-location-error .tool-status { color: #b91c1c; }
.user-location-icon { position: relative; border: 0; background: transparent; }
.user-location-pulse,
.user-location-dot { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.user-location-pulse {
  width: 28px; height: 28px; background: rgba(59,130,246,.20);
  animation: user-location-pulse 1.8s ease-out infinite;
}
.user-location-dot {
  width: 15px; height: 15px; border: 3px solid #fff; background: #1a73e8;
  box-shadow: 0 1px 6px rgba(15,23,42,.65), 0 0 0 1px rgba(29,78,216,.28);
}
@keyframes user-location-pulse {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.55); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes location-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .user-location-pulse,
  .location-button.is-locating .location-button-icon svg { animation: none; }
}
.radar-disabled { display: none !important; }

.general-warning-panel {
  position: fixed; z-index: 1005; top: 104px; right: 20px;
  width: min(410px, calc(100vw - 24px)); max-height: calc(100vh - 202px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(148,163,184,.30); border-radius: 19px;
  background: rgba(255,255,255,.97); box-shadow: 0 18px 58px rgba(15,23,42,.26);
  backdrop-filter: blur(18px);
}
.general-warning-header {
  min-height: 72px; padding: 12px 12px 11px 16px;
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(148,163,184,.23); background: rgba(248,250,252,.96);
}
.general-warning-eyebrow { display: block; margin-bottom: 3px; color: #7b8798; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.general-warning-header h2 { margin: 0; font-size: 16px; line-height: 1.15; }
.general-warning-navigation { display: grid; grid-template-columns: 34px auto 34px; align-items: center; gap: 5px; }
.general-warning-navigation button, .general-warning-close {
  width: 34px; height: 34px; padding: 0; border: 1px solid rgba(148,163,184,.27);
  border-radius: 10px; background: #e9eef5; cursor: pointer; font-size: 22px; font-weight: 800; line-height: 1;
}
.general-warning-navigation button:hover, .general-warning-close:hover { background: #dfe6ef; }
.general-warning-navigation button:disabled { opacity: .42; cursor: default; }
.general-warning-navigation span { min-width: 40px; text-align: center; color: #4b586d; font-size: 11px; font-weight: 850; font-variant-numeric: tabular-nums; }
.general-warning-close { color: #68758a; font-size: 20px; }
.general-warning-scope-bar {
  padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 9px;
  border-bottom: 1px solid rgba(148,163,184,.22); background: #fff7ed;
}
.general-warning-scope-bar button {
  min-height: 34px; padding: 6px 10px; flex: 0 0 auto;
  border: 1px solid rgba(249,115,22,.28); border-radius: 10px;
  background: #ffedd5; color: #9a3412; cursor: pointer; font-size: 10px; font-weight: 850;
}
.general-warning-scope-bar button:hover { background: #fed7aa; }
.general-warning-scope-bar span {
  min-width: 0; overflow: hidden; color: #7c2d12; font-size: 10px; font-weight: 750;
  text-align: right; white-space: nowrap; text-overflow: ellipsis;
}
.general-warning-body { padding: 13px; overflow-y: auto; scrollbar-width: thin; color: #263247; }
.general-warning-code-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.general-warning-code-chip {
  padding: 5px 9px; border-radius: 999px; background: var(--warning-color);
  color: #111827; font-size: 10px; font-weight: 950; letter-spacing: .045em;
}
.general-warning-section {
  margin-top: 9px; padding: 11px 12px; border: 1px solid rgba(148,163,184,.22);
  border-left: 5px solid var(--warning-color); border-radius: 12px; background: #fff;
}
.general-warning-section:first-of-type { margin-top: 0; }
.general-warning-section h3 { margin: 0 0 8px; font-size: 12px; }
.general-warning-section dl { margin: 0; display: grid; gap: 7px; }
.general-warning-section dl div { display: grid; gap: 2px; }
.general-warning-section dt { color: #7b8798; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.general-warning-section dd { margin: 0; font-size: 12px; line-height: 1.4; }
.general-warning-counties { margin-top: 11px; padding: 10px 11px; border-radius: 12px; background: #f1f5f9; }
.general-warning-counties strong { display: block; margin-bottom: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: .055em; }
.general-warning-counties p { margin: 0; color: #536176; font-size: 12px; line-height: 1.45; }
.general-warning-details { margin-top: 10px; border: 1px solid rgba(148,163,184,.24); border-radius: 12px; background: #fff; }
.general-warning-details summary { padding: 10px 11px; cursor: pointer; font-size: 11px; font-weight: 850; }
.general-warning-details div { max-height: 220px; padding: 0 11px 11px; overflow-y: auto; color: #526076; font-size: 11px; line-height: 1.48; }
.general-warning-details p { margin: 7px 0 0; }
.general-warning-empty { margin: 0; padding: 18px 10px; color: #657186; text-align: center; font-size: 13px; font-weight: 700; }
.general-warning-footer {
  padding: 9px 13px 10px; display: grid; gap: 2px;
  border-top: 1px solid rgba(148,163,184,.22); background: #f8fafc;
  color: #8390a3; font-size: 9px; line-height: 1.35;
}
.general-warning-panel.is-collapsed {
  top: 104px; right: auto; bottom: auto; left: 222px;
  width: min(330px, calc(100vw - 242px)); max-height: none;
  border-radius: 15px;
}
.general-warning-panel.is-collapsed .general-warning-header {
  min-height: 54px; padding: 7px 8px 7px 12px;
  border-bottom: 0; gap: 7px;
}
.general-warning-panel.is-collapsed .general-warning-header > div { min-width: 0; }
.general-warning-panel.is-collapsed .general-warning-header h2 {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px;
}
.general-warning-panel.is-collapsed .general-warning-eyebrow,
.general-warning-panel.is-collapsed .general-warning-scope-bar,
.general-warning-panel.is-collapsed .general-warning-body,
.general-warning-panel.is-collapsed .general-warning-footer { display: none; }
.general-warning-panel.is-collapsed .general-warning-navigation {
  grid-template-columns: 30px auto 30px; gap: 3px;
}
.general-warning-panel.is-collapsed .general-warning-navigation button,
.general-warning-panel.is-collapsed .general-warning-close {
  width: 30px; height: 30px; border-radius: 9px; font-size: 19px;
}
.general-warning-panel.is-collapsed .general-warning-navigation span { min-width: 34px; font-size: 10px; }

@media (min-width: 900px) {
  body.general-warning-panel-open .legend-dock { right: 448px; max-width: calc(100vw - 470px); }
}

.leaflet-container.drawing-active { cursor: crosshair !important; touch-action: none !important; }
.leaflet-container.drawing-eraser-active { cursor: cell !important; touch-action: none !important; }
.leaflet-container.mobile-drawing-map-locked { touch-action: none !important; }

.timeline-panel {
  position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 14px;
  min-height: 60px; padding: 9px 12px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.timeline-panel button { height: 40px; min-width: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: #e5eaf0; cursor: pointer; font-weight: 750; }
.timeline-panel button.primary { background: var(--blue); color: #fff; }
.timeline-panel button:disabled { cursor: default; opacity: .42; }
.timeline-panel button.timeline-daily-nav { min-width: 42px; padding-inline: 10px; font-size: 16px; }
.timeline-panel input { min-width: 100px; flex: 1; accent-color: var(--blue); }

/* r82: the shared timeline reflects only a dataset-changing request.
   Yellow begins at the left and advances toward the right during the request;
   background polling/recovery never keeps it busy after the requested render. */
#timelineSlider {
  --timeline-load-progress: 100%;
  --timeline-track-ready: var(--blue);
  --timeline-track-loading: #eab308;
  --timeline-track-rest: rgba(148, 163, 184, .38);
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
#timelineSlider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--timeline-track-ready);
}
#timelineSlider::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--timeline-track-ready);
}
#timelineSlider.is-parameter-loading::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    var(--timeline-track-loading) 0 var(--timeline-load-progress),
    var(--timeline-track-rest) var(--timeline-load-progress) 100%);
}
#timelineSlider.is-parameter-loading::-moz-range-track {
  background: linear-gradient(to right,
    var(--timeline-track-loading) 0 var(--timeline-load-progress),
    var(--timeline-track-rest) var(--timeline-load-progress) 100%);
}
#timelineSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--timeline-track-ready);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .28);
}
#timelineSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--timeline-track-ready);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .28);
}
#timelineSlider.is-parameter-loading::-webkit-slider-thumb { background: #eab308; }
#timelineSlider.is-parameter-loading::-moz-range-thumb { background: #eab308; }
#timelineSlider:disabled { cursor: wait; opacity: 1; }
body.ui-dark #timelineSlider { --timeline-track-rest: rgba(100, 116, 139, .52); }
.timeline-frame-times {
  min-width: 350px; display: grid; gap: 2px;
  text-align: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.timeline-frame-times time {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.error-toast { position: fixed; z-index: 1200; top: 112px; left: 50%; transform: translateX(-50%); width: min(760px,calc(100% - 40px)); padding: 13px 18px; border-radius: 14px; background: #c53b4b; color: #fff; box-shadow: var(--shadow); text-align: center; }
.legend-dock {
  position: fixed; z-index: 900; right: 20px; bottom: 90px;
  display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 9px;
  max-width: calc(100vw - 24px);
}
.legend { width: min(var(--legend-width, 270px), calc(100vw - 40px)); max-width: 100%; min-width: 190px; box-sizing: border-box; padding: 11px; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.transparency-control {
  width: 150px; min-height: 62px; padding: 10px 11px 9px;
  display: grid; align-content: center; gap: 8px;
  background: rgba(255,255,255,.9); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(12px);
  user-select: none;
}
.transparency-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 800; }
.transparency-header output { min-width: 31px; text-align: right; font-variant-numeric: tabular-nums; }
.transparency-control input { width: 100%; margin: 0; accent-color: var(--blue); cursor: pointer; }
.satellite-transparency-control { border-color: rgba(2,132,199,.30); }
.satellite-transparency-control input { accent-color: #0284c7; }
.lightning-transparency-control { border-color: rgba(234,179,8,.42); }
.lightning-transparency-control input { accent-color: #eab308; }
.lightning-transparency-control .transparency-header > span {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.lightning-flashes-transparency-control { background: rgba(255,251,235,.94); }
.lightning-area-transparency-control { background: rgba(254,249,195,.94); }
.legend-title { margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.legend-bar { height: 13px; border: 1px solid rgba(20,30,45,.18); border-radius: 8px; background: transparent; }
.legend-values { position: relative; height: 15px; margin-top: 4px; font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }
.legend-values span { position: absolute; top: 0; padding: 0 1px; white-space: nowrap; transform: translateX(-50%); }
.legend-values .legend-value-collapsed { visibility: hidden; }
.legend-values .legend-value-first { transform: none; }
.legend-values .legend-value-last { transform: translateX(-100%); }
.attribution-note {
  position: fixed; z-index: 905; left: 16px; right: auto; bottom: 88px;
  max-width: min(860px, calc(100vw - 32px)); padding: 6px 9px;
  border: 1px solid rgba(15,23,42,.18); border-radius: 9px;
  background: rgba(255,255,255,.96); color: #000;
  box-shadow: 0 2px 8px rgba(15,23,42,.14);
  font-size: 10px; font-weight: 650; line-height: 1.25; pointer-events: none;
}
.is-hidden { display: none !important; }
.information-panel[hidden],
.information-panel.is-hidden {
  display: none !important; visibility: hidden !important;
  pointer-events: none !important; opacity: 0 !important;
}

.measure-marker { width: 13px; height: 13px; margin-left: -6px; margin-top: -6px; border: 3px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 1px 7px rgba(0,0,0,.55); }
.measure-label { padding: 5px 8px; border: 0; border-radius: 9px; background: #172033; color: #fff; box-shadow: var(--shadow); font-weight: 750; }
.measure-label::before { border-top-color: #172033; }

@media (max-width: 1180px) {
  .topbar { overflow-x: auto; align-items: stretch; }
  .brand { min-width: 400px; }
  .parameter-control { min-width: 245px; }
}
@media (max-width: 720px) {
  .topbar { top: 6px; left: 6px; right: 6px; min-height: 72px; border-radius: 20px; padding: 8px; }
  .brand { min-width: 360px; }
  .brand-logo { width: 48px; height: 48px; flex-basis: 48px; }
  .brand h1 { font-size: 18px; }
  .control, .theme-control { height: 52px; }
  .tools-wrap { top: 88px; left: 12px; }
  .measure-hint { top: 88px; left: 205px; }
  .timeline-panel { left: 7px; right: 7px; bottom: 7px; gap: 6px; padding: 7px; }
  .timeline-panel time { min-width: 110px; font-size: 11px; }
  #latestButton { display: none; }
  .legend-dock { right: 9px; bottom: 76px; gap: 7px; }
  .legend { width: 155px; }
  .transparency-control { width: 126px; min-height: 59px; padding: 9px; }
  .transparency-header { font-size: 10px; }
  .attribution-note { display: none; }
}

/* v6.32.0 · Warnings, observations and Romanian surface stations */
.factual-data-button-icon {
  width: 29px; height: 29px; display: grid; place-items: center; overflow: hidden;
  border-radius: 9px; background: rgba(255,255,255,.72);
}
.factual-data-button-icon img {
  width: 42px; height: 30px; max-width: none; object-fit: contain;
  user-select: none; pointer-events: none;
}
.factual-data-button.is-enabled {
  border-color: rgba(239,68,68,.3);
  background: rgba(255,247,247,.96);
}
.factual-data-control > .factual-data-menu {
  width: 420px; max-height: min(760px, calc(100vh - 120px));
  padding: 11px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
}
.factual-data-heading {
  min-height: 45px; margin: -3px -2px 9px; padding: 4px 6px 9px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.factual-data-heading > div { min-width: 0; display: grid; gap: 2px; }
.factual-data-heading strong { color: #162033; font-size: 15px; }
.factual-data-heading span:not(.factual-live-dot) {
  color: #718096; font-size: 10px; line-height: 1.25;
}
.factual-live-dot {
  width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.12);
}
.factual-action-grid { display: grid; gap: 7px; }
.factual-action {
  width: 100%; min-height: 62px; padding: 8px 10px;
  display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 10px;
  border: 1px solid rgba(148,163,184,.25); border-radius: 13px;
  background: rgba(248,250,252,.88); color: #263247; cursor: pointer; text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.factual-action:hover { border-color: rgba(59,130,246,.36); background: #fff; }
.factual-action:active { transform: translateY(1px); }
.factual-action-copy { min-width: 0; display: grid; gap: 2px; }
.factual-action-copy strong {
  min-width: 0; overflow: hidden; color: #263247; font-size: 12px;
  line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
}
.factual-action-copy small { color: #718096; font-size: 9.5px; line-height: 1.25; }
.factual-action .tool-status {
  max-width: 67px; overflow: hidden; color: #64748b; font-size: 9px;
  font-weight: 850; text-overflow: ellipsis; white-space: nowrap;
}
.factual-action .warning-button-icon { width: 29px; height: 29px; }
.weather-observations-icon {
  width: 35px; height: 35px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(148,163,184,.25); border-radius: 10px; background: #fff;
}
.weather-observations-icon img {
  width: 48px; height: 48px; max-width: none; object-fit: cover; transform: scale(1.5);
  user-select: none; pointer-events: none;
}
.weather-observations-button.is-enabled {
  border-color: rgba(13,148,136,.36); background: rgba(240,253,250,.92);
}
.weather-observations-button.is-enabled .weather-observations-icon {
  border-color: rgba(13,148,136,.35); box-shadow: 0 0 0 4px rgba(20,184,166,.08);
}
.weather-observations-button.is-enabled .tool-status { color: #0f766e; }
.weather-observations-controls {
  max-height: 480px; margin-top: 9px; padding-top: 9px; display: grid; gap: 9px;
  overflow: hidden; border-top: 1px solid rgba(148,163,184,.22);
  opacity: 1; transition: max-height .2s ease, opacity .16s ease, margin .2s ease, padding .2s ease;
}
.weather-observations-controls.is-collapsed {
  max-height: 0; margin-top: 0; padding-top: 0; border-top-color: transparent; opacity: 0;
  pointer-events: none;
}
.observation-switch {
  min-height: 50px; padding: 8px 10px; display: grid;
  grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px;
  border: 1px solid rgba(148,163,184,.26); border-radius: 12px; background: #f8fafc;
  cursor: pointer;
}
.observation-switch > span { min-width: 0; display: grid; gap: 2px; }
.observation-switch b { color: #263247; font-size: 11px; }
.observation-switch small { color: #718096; font-size: 9px; line-height: 1.25; }
.observation-switch input { position: absolute; opacity: 0; pointer-events: none; }
.observation-switch i {
  position: relative; width: 43px; height: 25px; border-radius: 999px;
  background: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(100,116,139,.12);
  transition: background .16s ease;
}
.observation-switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.25);
  transition: transform .16s ease;
}
.observation-switch input:checked + i { background: #0d9488; }
.observation-switch input:checked + i::after { transform: translateX(18px); }
.observation-switch input:focus-visible + i { outline: 3px solid rgba(59,130,246,.28); outline-offset: 2px; }
.observation-source-control {
  min-width: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  border: 0;
}
.observation-source-control legend,
.observation-parameter-control > span {
  grid-column: 1 / -1; margin: 0 0 3px; color: #64748b;
  font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
}
.observation-source-control label { min-width: 0; cursor: pointer; }
.observation-source-control input { position: absolute; opacity: 0; pointer-events: none; }
.observation-source-control label > span {
  min-height: 52px; padding: 8px 9px; display: grid; place-content: center; gap: 2px;
  border: 1px solid rgba(148,163,184,.28); border-radius: 11px;
  background: #f8fafc; color: #475569; text-align: center;
}
.observation-source-control label b { font-size: 11px; }
.observation-source-control label small { font-size: 8.5px; line-height: 1.15; }
.observation-source-control input:checked + span {
  border-color: #0d9488; background: #ecfdf5; color: #0f766e;
  box-shadow: inset 0 0 0 1px rgba(13,148,136,.16);
}
.observation-source-control input:focus-visible + span { outline: 3px solid rgba(59,130,246,.24); }
.observation-parameter-control { min-width: 0; display: grid; gap: 5px; }
.observation-parameter-control select {
  width: 100%; height: 42px; padding: 0 10px;
  border: 1px solid rgba(148,163,184,.3); border-radius: 10px;
  outline: 0; background: #fff; color: #243047; font-size: 12px; font-weight: 750;
}
.observation-parameter-control select:focus {
  border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.13);
}
.observation-parameter-control select:disabled { cursor: not-allowed; opacity: .48; }
.observation-menu-footer { display: grid; gap: 6px; }
.observation-menu-footer p {
  min-height: 15px; margin: 0; color: #64748b; font-size: 9.5px; line-height: 1.35;
}
.observation-menu-footer p.is-live { color: #0f766e; }
.observation-menu-footer p.is-loading { color: #2563eb; }
.observation-menu-footer p.is-stale { color: #b45309; }
.observation-menu-footer p.is-error { color: #b91c1c; }
.observation-missing-legend {
  display: inline-flex; align-items: center; gap: 6px; color: #718096; font-size: 8.5px;
}
.observation-missing-legend i {
  width: 17px; height: 17px; display: grid; place-items: center; border: 1px dashed #94a3b8;
  border-radius: 5px; background: #e2e8f0; color: #475569; font-size: 13px; font-style: normal;
}

.observation-leaflet-icon {
  border: 0 !important; background: transparent !important; cursor: pointer !important;
  overflow: visible !important;
}
.observation-leaflet-icon > * {
  transform: scale(var(--observation-marker-scale, 1));
  transform-origin: center; transition: transform .12s ease, filter .12s ease;
}
.observation-leaflet-icon:hover > *,
.observation-leaflet-icon:focus > * { filter: brightness(1.03) drop-shadow(0 5px 10px rgba(15,23,42,.25)); }
.synop-plot-card {
  position: relative; width: 112px; height: 100px; overflow: hidden;
  border: 1px solid rgba(226,232,240,.98); border-radius: 12px;
  background: rgba(255,255,255,.96); color: #4b5563;
  box-shadow: 0 4px 14px rgba(15,23,42,.28);
}
.plot-value {
  position: absolute; z-index: 2; display: grid; color: #475569;
  font-size: 11px; font-weight: 850; line-height: .95; white-space: nowrap;
}
.plot-value small { margin-top: 3px; color: #64748b; font-size: 6.5px; font-weight: 650; }
.plot-temperature { left: 9px; top: 10px; color: #dc2626; }
.plot-pressure { right: 8px; top: 10px; color: #0faaa4; text-align: right; }
.plot-visibility { left: 9px; top: 42px; }
.plot-tendency { right: 8px; top: 42px; text-align: right; }
.plot-dew-point { left: 9px; bottom: 8px; color: #2683df; }
.plot-precipitation { right: 8px; bottom: 8px; color: #0faaa4; text-align: right; }
.synop-plot-symbol {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 58px; height: 58px;
  overflow: visible; transform: translate(-50%, -50%);
}
.plot-cloud-ring, .plot-calm, .plot-variable-wind, .plot-cloud-missing {
  fill: none; stroke: #0a0a0a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.plot-cloud-fill { fill: #0a0a0a; stroke: none; }
.plot-wind { fill: none; stroke: #1268ad; stroke-width: 3; stroke-linecap: round; }
.plot-calm { stroke-width: 2; }
.plot-variable-wind { stroke: #1268ad; }
.observation-value-marker {
  min-width: 62px; max-width: 112px; min-height: 36px; padding: 5px 8px;
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  border: 2px solid #fff; border-radius: 999px; background: var(--parameter-colour);
  color: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.45), 0 3px 10px rgba(15,23,42,.3);
  font-size: 12px; font-weight: 900; line-height: 1; white-space: nowrap;
}
.observation-value-marker span {
  min-width: 0; max-width: 82px; overflow: hidden; text-overflow: ellipsis;
}
.observation-value-marker small { font-size: 8px; font-weight: 750; }
.observation-missing-marker {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 8px; background: #64748b; color: #fff;
  box-shadow: 0 0 0 1px rgba(15,23,42,.5), 0 3px 9px rgba(15,23,42,.3);
  transform: rotate(45deg) scale(var(--observation-marker-scale, 1)) !important;
}
.observation-missing-marker span { font-size: 19px; font-weight: 600; transform: rotate(-45deg); }

.observation-detail-panel {
  position: fixed; z-index: 1240; top: 104px; right: 18px; bottom: 96px;
  width: min(780px, calc(100vw - 245px)); overflow: hidden;
  border: 1px solid rgba(71,85,105,.36); border-radius: 20px;
  background: #0f1828; color: #e7eefb; box-shadow: 0 24px 70px rgba(2,6,23,.48);
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity .16s ease, transform .18s ease;
}
.observation-detail-panel.is-hidden {
  opacity: 0; transform: translateY(8px) scale(.985); pointer-events: none;
}
.observation-detail-panel[hidden] { display: none !important; }
.observation-detail-header {
  min-height: 62px; padding: 11px 14px 11px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid #2a3850; background: #19243a;
}
.observation-detail-title {
  min-width: 0; display: grid; gap: 3px; flex: 1 1 auto;
}
.observation-detail-header-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto;
}
.observation-detail-type {
  color: #7f9abb; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;
}
.observation-detail-header h2 {
  min-width: 0; margin: 0; overflow: hidden; color: #fff; font-size: 15px;
  line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
}
.observation-detail-header #observationDetailClose {
  width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #2e3e58; border-radius: 11px;
  background: #132035; color: #7f9abb; cursor: pointer; font-size: 23px; line-height: 1;
}
.observation-detail-header #observationDetailClose:hover { background: #22314a; color: #fff; }
.observation-detail-body {
  height: calc(100% - 62px); padding: 14px 20px 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #44536a #111c2e;
}
.observation-detail-meta {
  margin: 0 0 12px; color: #84a0c2; font-size: 10px; line-height: 1.4;
}
.observation-current-layout {
  display: grid; grid-template-columns: 178px minmax(0,1fr); align-items: center; gap: 15px;
}
.observation-detail-plot { min-width: 0; display: grid; place-items: center; }
.synop-plot-card.is-large {
  width: 174px; height: 144px; border-radius: 13px; box-shadow: 0 7px 22px rgba(0,0,0,.25);
}
.synop-plot-card.is-large .plot-value { font-size: 18px; }
.synop-plot-card.is-large .plot-value small { margin-top: 4px; font-size: 9px; }
.synop-plot-card.is-large .plot-temperature,
.synop-plot-card.is-large .plot-pressure { top: 19px; }
.synop-plot-card.is-large .plot-temperature,
.synop-plot-card.is-large .plot-visibility,
.synop-plot-card.is-large .plot-dew-point { left: 14px; }
.synop-plot-card.is-large .plot-pressure,
.synop-plot-card.is-large .plot-tendency,
.synop-plot-card.is-large .plot-precipitation { right: 14px; }
.synop-plot-card.is-large .plot-visibility,
.synop-plot-card.is-large .plot-tendency { top: 61px; }
.synop-plot-card.is-large .plot-dew-point,
.synop-plot-card.is-large .plot-precipitation { bottom: 14px; }
.synop-plot-card.is-large .synop-plot-symbol { width: 86px; height: 86px; }
.observation-metric-grid {
  min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px;
}
.observation-metric {
  min-width: 0; min-height: 56px; padding: 8px 10px; display: grid; align-content: space-between; gap: 5px;
  border: 1px solid #2b3a52; border-radius: 11px; background: #111b2c;
}
.observation-metric > span {
  overflow: hidden; color: #86a0bf; font-size: 8px; line-height: 1.15;
  text-overflow: ellipsis;
}
.observation-metric strong {
  overflow: hidden; color: #eef4ff; font-size: 13px; line-height: 1.05;
  text-overflow: ellipsis; white-space: nowrap;
}
.observation-metric strong small { color: #d9e4f7; font-size: 9px; font-weight: 750; }
.observation-metric.is-missing { opacity: .62; }
.observation-raw-details {
  margin-top: 12px; border: 1px solid #2a3850; border-radius: 10px; background: #19243a;
}
.observation-raw-details.is-hidden { display: none; }
.observation-raw-details summary {
  padding: 9px 11px; color: #8da7c8; cursor: pointer; font-size: 9px; font-weight: 800;
}
.observation-raw-details code {
  padding: 0 11px 10px; display: block; overflow-wrap: anywhere; color: #dbe7f8;
  font-size: 9px; line-height: 1.5; white-space: normal;
}
.observation-history-section { margin-top: 16px; padding-bottom: 12px; }
.observation-history-section > header {
  margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: #8da7c8; font-size: 9px; letter-spacing: .035em; text-transform: uppercase;
}
.observation-history-section > header > div { display: flex; align-items: center; gap: 6px; }
.observation-history-section > header > div > span { color: #38bdf8; font-size: 17px; }
.observation-chart-tabs {
  margin-bottom: 8px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
.observation-chart-tabs::-webkit-scrollbar { display: none; }
.observation-chart-tabs button {
  min-height: 31px; padding: 0 10px; flex: 0 0 auto;
  border: 1px solid #2b3a52; border-radius: 9px; background: #19243a;
  color: #8da7c8; cursor: pointer; font-size: 9px; font-weight: 750;
}
.observation-chart-tabs button.active {
  border-color: #3b92ef; background: #3b92ef; color: #fff;
}
.observation-chart {
  position: relative; min-height: 235px; overflow: hidden;
  border: 1px solid #223149; border-radius: 12px; background: #0f1828;
}
.observation-chart svg { width: 100%; height: 235px; display: block; overflow: visible; }
.chart-grid-line { stroke: #334156; stroke-width: 1; opacity: .8; }
.chart-grid-line.is-vertical { opacity: .55; }
.chart-axis-label, .chart-time-label { fill: #aabbd2; font-size: 8px; }
.chart-series { fill: none; stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { stroke: #0f1828; stroke-width: 1.2; }
.observation-chart-legend {
  min-height: 31px; padding: 3px 10px 8px; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 14px; color: #c6d4e8; font-size: 8px;
}
.observation-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.observation-chart-legend i {
  width: 14px; height: 3px; border-radius: 999px; background: var(--series-colour);
}
.observation-chart-empty {
  min-height: 210px; margin: 0; padding: 25px; display: grid; place-items: center;
  color: #8da7c8; font-size: 11px; text-align: center;
}
.observation-zoom-button {
  width: 100%; min-height: 48px; margin: 0; padding: 0 16px;
  display: flex; align-items: center; gap: 8px; border: 0; border-top: 1px solid #2a3850;
  background: #19243a; color: #75b9ff; cursor: pointer; font-size: 11px; text-align: left;
}
.observation-zoom-button:hover { background: #213049; color: #fff; }

@media (max-width: 980px) {
  .observation-detail-panel {
    top: 92px; right: 10px; bottom: 88px; width: min(690px, calc(100vw - 20px));
  }
  .observation-current-layout { grid-template-columns: 160px minmax(0,1fr); }
  .observation-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .factual-data-button-icon {
    grid-column: 1; grid-row: 1; width: 30px; height: 30px;
  }
  .tools-wrap .factual-data-button-icon img { width: 42px; height: 31px; }
  .factual-data-menu.is-mobile-portal {
    max-height: min(74dvh, 650px) !important; padding: 10px !important;
  }
  .observation-detail-panel {
    z-index: 2250; top: max(7px, env(safe-area-inset-top)); right: max(7px, env(safe-area-inset-right));
    bottom: var(--phone-panel-bottom, calc(max(7px, env(safe-area-inset-bottom)) + 122px));
    left: max(7px, env(safe-area-inset-left)); width: auto;
    max-height: none; border-radius: 18px;
  }
}

@media (max-width: 620px) {
  .observation-detail-header { min-height: 56px; padding: 8px 10px 8px 14px; }
  .observation-detail-body { height: calc(100% - 56px); padding: 10px 11px 0; }
  .observation-detail-meta { margin-bottom: 9px; font-size: 8.5px; }
  .observation-current-layout { grid-template-columns: 132px minmax(0,1fr); gap: 8px; }
  .synop-plot-card.is-large { width: 130px; height: 120px; }
  .synop-plot-card.is-large .plot-value { font-size: 13px; }
  .synop-plot-card.is-large .plot-value small { font-size: 7px; }
  .synop-plot-card.is-large .plot-temperature,
  .synop-plot-card.is-large .plot-pressure { top: 14px; }
  .synop-plot-card.is-large .plot-temperature,
  .synop-plot-card.is-large .plot-visibility,
  .synop-plot-card.is-large .plot-dew-point { left: 9px; }
  .synop-plot-card.is-large .plot-pressure,
  .synop-plot-card.is-large .plot-tendency,
  .synop-plot-card.is-large .plot-precipitation { right: 9px; }
  .synop-plot-card.is-large .plot-visibility,
  .synop-plot-card.is-large .plot-tendency { top: 51px; }
  .synop-plot-card.is-large .plot-dew-point,
  .synop-plot-card.is-large .plot-precipitation { bottom: 11px; }
  .synop-plot-card.is-large .synop-plot-symbol { width: 67px; height: 67px; }
  .observation-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  .observation-metric { min-height: 51px; padding: 7px 8px; }
  .observation-metric strong { font-size: 11px; }
  .observation-history-section { margin-top: 12px; }
  .observation-chart { min-height: 205px; }
  .observation-chart svg { height: 205px; }
  .observation-chart-tabs button { min-height: 35px; }
}

@media (max-width: 390px) {
  .factual-action { min-height: 58px; padding: 7px 8px; gap: 7px; }
  .factual-action-copy small { font-size: 8.5px; }
  .observation-source-control { gap: 5px; }
  .observation-current-layout { grid-template-columns: 118px minmax(0,1fr); }
  .synop-plot-card.is-large { width: 116px; height: 112px; }
  .synop-plot-card.is-large .synop-plot-symbol { width: 60px; height: 60px; }
  .observation-metric { min-height: 48px; padding: 6px; }
  .observation-metric > span { font-size: 7.5px; }
  .observation-metric strong { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-observations-controls,
  .observation-detail-panel,
  .observation-leaflet-icon > * { transition: none !important; }
}

.tools-separator { height: 1px; margin: 6px 5px; background: rgba(148,163,184,.28); }
.cross-section-hint { top: 104px; background: rgba(124,45,18,.92); }
.cross-section-marker {
  width: 15px; height: 15px; margin-left: -7px; margin-top: -7px;
  border: 3px solid #fff; border-radius: 50%; background: #f97316;
  box-shadow: 0 1px 8px rgba(0,0,0,.58);
}
.cross-section-label {
  padding: 5px 8px; border: 0; border-radius: 9px;
  background: #c2410c; color: #fff; box-shadow: var(--shadow); font-weight: 750;
}
.cross-section-label::before { border-top-color: #c2410c; }

.cross-section-panel {
  position: fixed; z-index: 1080; left: 50%; bottom: 88px;
  width: min(920px, calc(100% - 36px)); max-height: calc(100vh - 205px);
  transform: translateX(-50%); overflow: hidden;
  border: 1px solid var(--border); border-radius: 20px;
  background: rgba(255,255,255,.97); box-shadow: 0 18px 60px rgba(15,23,42,.30);
  backdrop-filter: blur(18px);
}
.cross-section-header {
  min-height: 58px; padding: 10px 13px 9px 17px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.cross-section-header h2 { margin: 0; font-size: 17px; line-height: 1.15; letter-spacing: -.01em; }
.cross-section-header p { min-height: 15px; margin: 4px 0 0; color: #748094; font-size: 12px; }
.cross-section-header button {
  width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 11px;
  background: #e8edf3; color: #263247; cursor: pointer; font-size: 25px; line-height: 1;
}
.cross-section-header button:hover { background: #dce3eb; }
.cross-section-body {
  position: relative; min-height: 180px; max-height: calc(100vh - 274px);
  overflow: auto; padding: 10px; background: #f4f6f9;
}
.cross-section-image { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; }
.cross-section-status {
  min-height: 160px; display: grid; place-items: center; padding: 22px;
  color: #657186; text-align: center; font-weight: 700;
}
.cross-section-panel.is-loading .cross-section-status::before {
  content: ""; width: 24px; height: 24px; margin-right: 10px;
  display: inline-block; vertical-align: middle;
  border: 3px solid #cbd5e1; border-top-color: #f97316; border-radius: 50%;
  animation: radar-spin .8s linear infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .cross-section-hint { top: 88px; }
  .cross-section-panel {
    bottom: 74px; width: calc(100% - 14px); max-height: calc(100vh - 160px); border-radius: 16px;
  }
  .cross-section-body { max-height: calc(100vh - 225px); padding: 6px; }
  .cross-section-header { min-height: 52px; padding: 8px 9px 8px 13px; }
  .cross-section-header h2 { font-size: 15px; }
}

.hover-value {
  position: fixed;
  z-index: 1160;
  pointer-events: none;
  user-select: none;
  min-width: 1ch;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  will-change: left, top;
}


@media (max-width: 720px) {
}


.warning-transparency-control { width: 176px; border-color: rgba(249,115,22,.30); }
.warning-transparency-control input { accent-color: #f97316; }

.leaflet-tooltip.nowcast-name-tooltip {
  padding: 5px 8px; border: 1px solid rgba(255,255,255,.62); border-radius: 8px;
  background: rgba(15,23,42,.92); color: #fff; box-shadow: 0 4px 14px rgba(15,23,42,.28);
  font-size: 11px; font-weight: 850; line-height: 1.15; white-space: nowrap;
}
.leaflet-tooltip-top.nowcast-name-tooltip::before { border-top-color: rgba(15,23,42,.92); }

.nowcast-popup .leaflet-popup-content-wrapper {
  padding: 0; overflow: hidden; border-radius: 18px;
  background: rgba(255,255,255,.98); box-shadow: 0 18px 58px rgba(15,23,42,.28);
}
.nowcast-popup .leaflet-popup-content { margin: 0; width: auto !important; max-height: min(68vh, 620px); overflow-y: auto; }
.nowcast-popup .leaflet-popup-tip { background: #fff; }
.nowcast-popup-content { min-width: 300px; color: #243047; }
.nowcast-popup-title {
  position: sticky; top: 0; z-index: 1; padding: 14px 17px 12px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.24); background: rgba(248,250,252,.97);
}
.nowcast-popup-title strong { font-size: 17px; }
.nowcast-popup-title span { color: #748094; font-size: 12px; font-weight: 700; }
.nowcast-warning-card { margin: 12px; padding: 13px 14px; border: 1px solid rgba(148,163,184,.24); border-left: 6px solid var(--warning-color); border-radius: 14px; background: #fff; }
.nowcast-warning-card + .nowcast-warning-card { margin-top: 10px; }
.nowcast-warning-card header { display: grid; gap: 7px; margin-bottom: 10px; }
.nowcast-warning-card header strong { font-size: 14px; }
.nowcast-code-chip { width: fit-content; padding: 4px 8px; border-radius: 999px; background: var(--warning-color); color: #111827; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.nowcast-warning-card dl { margin: 0 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.nowcast-warning-card dl div { padding: 8px 9px; border-radius: 10px; background: #f4f6f9; }
.nowcast-warning-card dt { color: #7a8597; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.nowcast-warning-card dd { margin: 3px 0 0; font-size: 12px; font-weight: 750; }
.nowcast-warning-card section { margin-top: 10px; }
.nowcast-warning-card h4 { margin: 0 0 5px; color: #4a566b; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.nowcast-warning-card p { margin: 0; font-size: 13px; line-height: 1.45; }
.nowcast-warning-card footer { margin-top: 10px; color: #8490a1; font-size: 10px; }
.nowcast-area-list { display: grid; gap: 7px; }
.nowcast-area-list div { display: grid; gap: 2px; }
.nowcast-area-list strong { font-size: 12px; }
.nowcast-area-list span, .nowcast-zone-text { color: #566276; font-size: 12px; line-height: 1.4; }

.general-warning-popup .leaflet-popup-content-wrapper {
  padding: 0; overflow: hidden; border-radius: 16px;
  background: rgba(255,255,255,.98); box-shadow: 0 16px 48px rgba(15,23,42,.25);
}
.general-warning-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.general-warning-popup .leaflet-popup-tip { background: #fff; }
.general-warning-popup-content { min-width: 260px; padding: 14px 15px; color: #263247; }
.general-warning-popup-content header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.general-warning-popup-content h3 { margin: 0; font-size: 16px; }
.general-warning-popup-content .general-warning-code-chip { flex: 0 0 auto; }
.general-warning-popup-content p { margin: 5px 0 0; color: #566276; font-size: 12px; line-height: 1.4; }

.storm-direction-label-icon,
.storm-direction-arrow-icon { border: 0; background: transparent; }
.storm-direction-label-icon span {
  min-width: 28px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center;
  border: 1px solid var(--storm-color); border-radius: 8px; background: rgba(15,23,42,.88);
  box-shadow: 0 2px 7px rgba(15,23,42,.30); color: #fff; font-size: 8px; font-weight: 900;
  line-height: 1; white-space: nowrap;
}
.storm-direction-arrow-icon span {
  width: 28px; height: 28px; display: grid; place-items: center; color: var(--storm-color);
  filter: drop-shadow(0 1px 1px #fff) drop-shadow(0 1px 3px rgba(15,23,42,.65));
  font-size: 28px; font-weight: 950; line-height: 1;
}
.storm-track-tooltip {
  padding: 4px 7px; border-color: rgba(15,23,42,.22); border-radius: 7px;
  background: rgba(15,23,42,.88); color: #fff; box-shadow: 0 4px 14px rgba(15,23,42,.25);
  font-size: 9px; font-weight: 850;
}
.storm-popup .leaflet-popup-content-wrapper {
  overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 16px 45px rgba(15,23,42,.30);
}
.storm-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.storm-popup .leaflet-popup-tip { background: #fff; }
.storm-popup-card { width: 300px; color: #263247; }
.storm-popup-card header {
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(148,163,184,.22); background: #f8fafc;
}
.storm-popup-ring {
  width: 31px; height: 31px; flex: 0 0 31px; border: 4px solid var(--storm-color); border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--storm-color);
}
.storm-popup-card header div { display: grid; gap: 2px; }
.storm-popup-card header strong { font-size: 14px; }
.storm-popup-card header small { color: #718096; font-size: 9px; font-weight: 750; text-transform: capitalize; }
.storm-popup-card dl {
  margin: 0; padding: 11px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
}
.storm-popup-card dl div { min-width: 0; display: grid; gap: 2px; }
.storm-popup-card dt { color: #7b8798; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.storm-popup-card dd { margin: 0; overflow-wrap: anywhere; color: #263247; font-size: 11px; font-weight: 800; }
.storm-popup-card footer {
  padding: 9px 14px 11px; display: grid; gap: 2px; border-top: 1px solid rgba(148,163,184,.20);
}
.storm-popup-card footer b { color: var(--storm-color); font-size: 9px; }
.storm-popup-card footer span { color: #718096; font-size: 8px; }

@media (max-width: 720px) {
  .warning-transparency-control { width: 156px; }
  .nowcast-popup-content { min-width: 250px; }
  .nowcast-warning-card dl { grid-template-columns: 1fr; }
  .general-warning-panel { top: 88px; right: 9px; max-height: calc(100vh - 170px); }
}

@media (max-width: 540px) {
  .tools-wrap { width: 174px; }
  .tools-button { width: 174px; }
  .tool-control > .tools-menu {
    position: fixed; top: 285px; left: 12px; right: 12px; width: auto;
    max-height: calc(100vh - 370px);
  }
  .information-panel {
    position: fixed; top: 285px; bottom: auto; left: 12px; right: 12px; width: auto;
    max-height: calc(100vh - 370px); overflow-y: auto;
  }
  .measure-hint, .cross-section-hint { top: 285px; left: 12px; right: 12px; text-align: center; }
  .drawing-tools-menu { width: auto; }
  .general-warning-panel { top: 82px; left: 7px; right: 7px; width: auto; max-height: calc(100vh - 164px); }
  .general-warning-header { grid-template-columns: minmax(0,1fr) auto auto; padding-left: 13px; }
}

/* Responsive application shell (v6.14.6). The desktop controls keep their
   original layout; phones receive compact drawers and touch-size docks. */
.mobile-controls-button,
.mobile-legend-button { display: none; }
.mobile-controls-panel { display: contents; }
.legend-controls {
  display: flex; align-items: flex-end; justify-content: flex-end;
  flex-wrap: wrap; gap: 9px;
}
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(59,130,246,.42);
  outline-offset: 2px;
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  :root {
    --phone-safe-top: env(safe-area-inset-top, 0px);
    --phone-safe-right: env(safe-area-inset-right, 0px);
    --phone-safe-bottom: env(safe-area-inset-bottom, 0px);
    --phone-safe-left: env(safe-area-inset-left, 0px);
    --phone-timeline-height: 90px;
    --phone-tool-bottom: calc(var(--phone-safe-bottom) + 104px);
    --phone-panel-bottom: calc(var(--phone-safe-bottom) + 162px);
  }

  html, body, #map { height: 100%; height: 100dvh; }
  body { overscroll-behavior: none; }

  .topbar {
    z-index: 1110;
    top: calc(var(--phone-safe-top) + 6px);
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    min-height: 58px; height: 58px; padding: 6px 7px;
    overflow: visible; align-items: center; gap: 7px;
    border-radius: 20px;
  }
  .brand { min-width: 0; flex: 1 1 auto; gap: 7px; margin-right: 0; }
  .brand-logo {
    width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 12px;
  }
  .brand-copy { min-width: 0; gap: 5px; }
  .brand h1 { flex: 0 0 auto; font-size: 15px; }
  .brand-author {
    flex: 0 0 auto; font-size: clamp(5px, 1.4vw, 6.5px);
    letter-spacing: -.055em;
  }
  .mobile-controls-button {
    min-width: 46px; height: 46px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--border); border-radius: 14px;
    background: #e8edf3; cursor: pointer; color: #334155;
    font-size: 12px; font-weight: 800;
  }
  .mobile-controls-button svg {
    width: 22px; height: 22px; flex: 0 0 22px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .topbar.mobile-controls-open .mobile-controls-button {
    border-color: rgba(59,130,246,.42); background: #dbeafe; color: #1d4ed8;
  }
  .mobile-controls-panel {
    position: fixed; z-index: 1115;
    top: calc(var(--phone-safe-top) + 72px);
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    max-height: calc(100vh - var(--phone-safe-top) - var(--phone-panel-bottom) - 80px);
    max-height: calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 80px);
    padding: 9px; overflow-y: auto; overscroll-behavior: contain;
    display: none; grid-template-columns: minmax(0,1fr); gap: 7px;
    border: 1px solid var(--border); border-radius: 18px;
    background: rgba(255,255,255,.97); box-shadow: 0 18px 48px rgba(15,23,42,.24);
    backdrop-filter: blur(18px); scrollbar-width: thin;
  }
  .topbar.mobile-controls-open .mobile-controls-panel { display: grid; }
  .mobile-controls-panel .control,
  .mobile-controls-panel .theme-control {
    width: 100%; min-width: 0; height: 52px;
  }
  .mobile-controls-panel .select-control {
    grid-template-columns: 74px minmax(0,1fr); padding: 7px 11px;
  }
  .mobile-controls-panel .select-control > span { font-size: 10px; }
  .mobile-controls-panel select { width: 100%; font-size: 16px; }
  .mobile-controls-panel .theme-control { justify-content: stretch; }
  .mobile-controls-panel .theme-control button {
    min-width: 0; flex: 1 1 0; padding: 0 7px; font-size: 12px;
  }
  .mobile-controls-panel .boundary-button { justify-content: flex-start; }

  .tools-wrap {
    z-index: 1105; top: auto;
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    bottom: var(--phone-tool-bottom);
    width: auto; height: 50px; padding: 1px;
    display: flex; gap: 5px; overflow-x: auto; overflow-y: visible;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .tools-wrap::-webkit-scrollbar { display: none; }
  .tools-wrap > .tool-control,
  .tools-wrap > .tools-button { flex: 0 0 46px; }
  .tool-control { position: static; }
  .tools-wrap .tools-button {
    position: relative; width: 46px; height: 46px; min-height: 46px; padding: 0;
    display: grid; grid-template-columns: 1fr; place-items: center; gap: 0;
    border-radius: 14px; text-align: center;
  }
  .tools-wrap .tool-button-icon,
  .tools-wrap .warning-button-icon,
  .tools-wrap .radar-button-icon,
  .tools-wrap .satellite-button-icon,
  .tools-wrap .storm-button-icon,
  .tools-wrap .location-button-icon,
  .tools-wrap .information-button-icon { grid-column: 1; grid-row: 1; }
  .tools-wrap .tool-button-label,
  .tools-wrap .tool-chevron,
  .tools-wrap .tool-status { display: none; }
  .tools-wrap .language-button-icon { display: none; }
  .tools-wrap .language-button .tool-button-label {
    display: block; max-width: 42px; overflow: hidden;
    font-size: 9px; line-height: 1.05; text-overflow: ellipsis;
  }
  .tools-wrap .warning-button-icon,
  .tools-wrap .radar-button-icon,
  .tools-wrap .satellite-button-icon,
  .tools-wrap .storm-button-icon,
  .tools-wrap .location-button-icon { width: 25px; height: 25px; }

  .tool-control > .tools-menu,
  .tools-menu,
  .information-panel {
    position: fixed; z-index: 1130;
    top: auto; bottom: var(--phone-panel-bottom);
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    width: auto; max-height: calc(100vh - var(--phone-safe-top) - var(--phone-panel-bottom) - 78px);
    max-height: calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 78px);
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: 17px; scrollbar-width: thin;
  }
  .tools-menu > button { min-height: 46px; }
  .general-tools-control > .tools-menu {
    width: auto; max-height: min(58dvh, 500px); padding: 6px;
  }
  .map-query-tools { gap: 6px; padding: 3px; }
  .location-search-entry input,
  .location-search-entry button { height: 36px; }
  .location-search-results { max-height: 128px; }
  .location-search-result { padding: 6px 8px; }
  .tool-setting-checkbox,
  .tool-setting-select { min-height: 34px; padding: 5px 7px; }
  .tool-setting-select select { height: 29px; }
  .lightning-radar-sync-button { min-height: 44px; padding: 5px 7px; }
  .lightning-radar-sync-copy strong { font-size: 9.5px; }
  .lightning-radar-sync-copy small { font-size: 7.5px; }
  .drawing-tools-menu {
    left: auto; width: min(330px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 14px));
    max-height: min(52dvh, 360px); padding: 7px;
  }
  .satellite-menu {
    left: auto; width: min(370px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 14px));
    max-height: min(62dvh, 470px); padding: 10px;
  }
  .storm-tracking-menu {
    left: auto; width: min(360px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 14px));
    max-height: min(58dvh, 430px); padding: 10px;
  }
  .drawing-tools-heading { margin: 0 2px 6px; gap: 7px; }
  .drawing-tools-heading strong { font-size: 12px; }
  .drawing-tools-heading span {
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px;
  }
  .drawing-tool-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .drawing-tool-grid .drawing-tool { min-height: 44px; padding: 4px 2px; border-radius: 9px; }
  .drawing-tool-grid .drawing-tool > span { font-size: 18px; }
  .drawing-tool-grid .drawing-tool small { font-size: 8px; }
  .drawing-style-details { margin-top: 7px; }
  .drawing-style-details > summary {
    min-height: 36px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between;
    border: 1px solid rgba(148,163,184,.28); border-radius: 10px; background: #f1f5f9;
    cursor: pointer; color: #475569; font-size: 10px; font-weight: 850; list-style: none;
  }
  .drawing-style-details > summary::-webkit-details-marker { display: none; }
  .drawing-style-details > summary::after { content: "⌄"; font-size: 14px; }
  .drawing-style-details[open] > summary::after { transform: rotate(180deg); }
  .drawing-style-details:not([open]) > .drawing-settings { display: none; }
  .drawing-settings { margin-top: 6px; padding: 7px 3px 0; gap: 7px; }
  .drawing-color-control { min-height: 38px; }
  .drawing-select-control select { height: 32px; }
  .drawing-actions { margin-top: 7px; padding-top: 7px; }
  .drawing-actions button { min-height: 36px; }

  .timeline-panel {
    z-index: 1100;
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    bottom: calc(var(--phone-safe-bottom) + 6px);
    min-height: 0; height: var(--phone-timeline-height); padding: 6px 7px;
    display: grid;
    grid-template-columns: 42px 42px 42px minmax(0,1fr) 27px 27px;
    grid-template-rows: 28px 44px; align-items: center; gap: 4px 5px;
    border-radius: 18px;
  }
  .timeline-panel button {
    min-width: 0; width: 100%; height: 40px; padding: 0 5px; border-radius: 11px;
  }
  #timelineSlider { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; margin: 0; }
  #previousButton { grid-column: 1; grid-row: 2; }
  #playButton { grid-column: 2; grid-row: 2; }
  #nextButton { grid-column: 3; grid-row: 2; }
  #frameTime {
    grid-column: 4; grid-row: 2; min-width: 0; overflow: hidden;
    font-size: 10px; line-height: 1.15; text-align: center; text-overflow: ellipsis;
  }
  #latestButton {
    grid-column: 5 / 7; grid-row: 2; display: block;
    padding: 0 4px; font-size: 10px;
  }
  #dailyPreviousButton { grid-column: 5; grid-row: 2; }
  #dailyNextButton { grid-column: 6; grid-row: 2; }

  .legend-dock {
    z-index: 1085; top: auto;
    right: calc(var(--phone-safe-right) + 7px);
    bottom: var(--phone-panel-bottom); max-width: calc(100vw - 14px);
    display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  }
  .mobile-legend-button {
    min-width: 82px; height: 44px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--border); border-radius: 14px;
    background: rgba(255,255,255,.95); box-shadow: var(--shadow);
    cursor: pointer; font-size: 11px; font-weight: 850; backdrop-filter: blur(14px);
  }
  .mobile-legend-button > span:first-child { font-size: 18px; color: #3b82f6; }
  .legend-controls { display: none; }
  .legend-dock.mobile-expanded {
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
  }
  .legend-dock.mobile-expanded .legend-controls {
    width: 100%; max-height: 330px; max-height: min(43dvh, 330px); padding: 7px;
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    border: 1px solid var(--border); border-radius: 16px;
    background: rgba(255,255,255,.96); box-shadow: var(--shadow); backdrop-filter: blur(16px);
  }
  .legend-dock.mobile-expanded .legend,
  .legend-dock.mobile-expanded .transparency-control {
    width: 100%; min-width: 0; box-shadow: none; background: #f8fafc;
  }
  .legend-dock.mobile-expanded .legend { grid-column: 1 / -1; min-width: 0; }
  .legend-dock.mobile-expanded .warning-transparency-control { width: 100%; }

  .general-warning-panel,
  .cross-section-panel {
    z-index: 1120;
    top: calc(var(--phone-safe-top) + 72px);
    bottom: var(--phone-panel-bottom); left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px); width: auto; max-height: none;
    transform: none; border-radius: 17px;
  }
  .general-warning-header {
    min-height: 66px; padding: 10px 9px 9px 13px;
    grid-template-columns: minmax(0,1fr) auto auto; gap: 7px;
  }
  .general-warning-navigation button,
  .general-warning-close { width: 40px; height: 40px; }
  .general-warning-body { min-height: 0; padding: 10px; }
  .general-warning-scope-bar { padding: 7px 8px; align-items: stretch; flex-direction: column; }
  .general-warning-scope-bar button { width: 100%; min-height: 38px; }
  .general-warning-scope-bar span { text-align: left; white-space: normal; }
  .general-warning-footer { padding-bottom: max(9px, var(--phone-safe-bottom)); }
  .general-warning-panel.is-collapsed {
    top: calc(var(--phone-safe-top) + 72px); right: auto; bottom: auto;
    left: calc(var(--phone-safe-left) + 7px);
    width: min(340px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 14px));
    max-height: none;
  }
  .general-warning-panel.is-collapsed .general-warning-header {
    min-height: 52px; padding: 6px 7px 6px 10px;
    grid-template-columns: minmax(0,1fr) auto auto;
  }
  .cross-section-body { min-height: 0; max-height: none; flex: 1 1 auto; padding: 6px; }
  .cross-section-panel { display: flex; flex-direction: column; }
  .cross-section-status { min-height: 140px; }

  .measure-hint,
  .cross-section-hint {
    z-index: 1125; top: calc(var(--phone-safe-top) + 72px);
    left: calc(var(--phone-safe-left) + 7px); right: calc(var(--phone-safe-right) + 7px);
    max-width: none; padding: 9px 11px; text-align: center; font-size: 11px;
  }
  .error-toast {
    top: calc(var(--phone-safe-top) + 72px); width: calc(100% - var(--phone-safe-left) - var(--phone-safe-right) - 14px);
    padding: 10px 12px; font-size: 12px;
  }
  .attribution-note { display: none; }
  .leaflet-control-attribution {
    position: fixed !important;
    z-index: 1092;
    top: calc(var(--phone-safe-top) + 72px) !important;
    left: calc(var(--phone-safe-left) + 10px) !important;
    right: calc(var(--phone-safe-right) + 10px) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none;
    padding: 2px 6px !important;
    border-radius: 7px;
    background: rgba(255,255,255,.78) !important;
    white-space: normal;
    text-align: center;
    font-size: 7.5px;
    line-height: 1.2;
    box-shadow: 0 1px 4px rgba(15,23,42,.12);
  }
  .leaflet-popup { max-width: calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 34px) !important; }
  .nowcast-popup-content,
  .general-warning-popup-content,
  .storm-popup-card {
    width: min(300px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 72px));
    min-width: 0;
  }
  .nowcast-popup .leaflet-popup-content { max-height: min(54dvh, 480px); }
  .nowcast-warning-card { margin: 8px; padding: 11px; }
  .nowcast-warning-card dl { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .mobile-controls-button { width: 46px; padding: 0; }
  .mobile-controls-button > span { display: none; }
  .radar-site-badge {
    min-width: 43px; min-height: 17px; padding: 1px 4px;
    border-width: 1.5px; font-size: 9px;
  }
}

@media (max-width: 420px) {
  .brand { gap: 5px; }
  .brand-logo { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
  .brand-copy { gap: 4px; }
  .brand h1 { font-size: 14px; }
  .brand-author { font-size: 6px; }
  .general-warning-header { grid-template-columns: minmax(0,1fr) auto; }
  .general-warning-navigation {
    grid-column: 1 / -1; grid-row: 2; justify-content: center;
  }
  .general-warning-close { grid-column: 2; grid-row: 1; }
  .general-warning-eyebrow { font-size: 8px; }
  .general-warning-header h2 { font-size: 14px; }
  .tools-wrap { gap: 4px; }
  .drawing-tool-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .drawing-tools-heading { align-items: baseline; flex-direction: row; gap: 6px; }
  .general-warning-panel.is-collapsed .general-warning-navigation {
    grid-column: auto; grid-row: auto; justify-content: initial;
  }
  .general-warning-panel.is-collapsed .general-warning-close { grid-column: auto; grid-row: auto; }
  .information-panel-body { padding: 11px 12px 13px; }
}

@media (max-width: 360px) {
  .brand-logo { display: block; width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; }
  .brand { gap: 4px; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 960px) {
  :root {
    --phone-timeline-height: 54px;
    --phone-tool-bottom: calc(var(--phone-safe-bottom) + 66px);
    --phone-panel-bottom: calc(var(--phone-safe-bottom) + 122px);
  }
  .mobile-controls-panel {
    grid-template-columns: repeat(2, minmax(0,1fr));
    max-height: calc(100vh - var(--phone-safe-top) - 80px);
    max-height: calc(100dvh - var(--phone-safe-top) - 80px);
  }
  .mobile-controls-panel .parameter-control,
  .mobile-controls-panel .theme-control { grid-column: 1 / -1; }
  .timeline-panel {
    height: var(--phone-timeline-height); padding: 5px 6px;
    grid-template-columns: 40px 40px 40px minmax(100px,1fr) minmax(92px,120px) 27px 27px;
    grid-template-rows: 42px; gap: 4px;
  }
  #previousButton { grid-column: 1; grid-row: 1; }
  #playButton { grid-column: 2; grid-row: 1; }
  #nextButton { grid-column: 3; grid-row: 1; }
  #timelineSlider { grid-column: 4; grid-row: 1; }
  #frameTime { grid-column: 5; grid-row: 1; }
  #latestButton { grid-column: 6 / 8; grid-row: 1; }
  #dailyPreviousButton { grid-column: 6; grid-row: 1; }
  #dailyNextButton { grid-column: 7; grid-row: 1; }
  .tool-control > .tools-menu,
  .tools-menu,
  .information-panel {
    max-height: calc(100vh - var(--phone-safe-top) - var(--phone-panel-bottom) - 76px);
    max-height: calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 76px);
  }
  .general-warning-panel,
  .cross-section-panel { top: calc(var(--phone-safe-top) + 70px); }
  .legend-dock.mobile-expanded .legend-controls { max-height: 45dvh; }
}


/* v6.18.0 MTG derived-layer metadata and temperature legend. */
.satellite-layer-note { margin: 7px 0 0; padding: 8px 9px; border-radius: 9px; background: rgba(28,132,211,.09); color: var(--muted); font-size: 10px; line-height: 1.35; }
.satellite-legend { --legend-width: 340px; }
.satellite-legend .legend-bar { height: 15px; }
@media (max-width: 720px) {
  .satellite-legend { width: 100%; }
}

/* v6.19.0: iOS Safari tap, stacking and memory-pressure safeguards. */
button,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
select,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tools-menu[hidden],
.tools-menu[aria-hidden="true"],
.tools-menu.is-hidden,
.information-panel[hidden],
.information-panel[aria-hidden="true"],
.information-panel.is-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-menu.is-mobile-portal {
    position: fixed !important;
    z-index: 2200 !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(68dvh, 620px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    isolation: isolate;
  }

  .general-tools-menu.is-mobile-portal {
    max-height: min(72dvh, 680px) !important;
  }

  html.ios-webkit .tools-menu,
  html.ios-webkit .information-panel,
  html.ios-webkit .topbar,
  html.ios-webkit .legend-dock,
  html.ios-webkit .map-box {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.ios-webkit .tools-menu,
  html.ios-webkit .information-panel {
    background: rgba(249, 251, 255, 0.99) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.32) !important;
  }

  html.ios-webkit .leaflet-container,
  html.ios-webkit .leaflet-control-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* v6.19.0: independent MTG Lightning Imager overlays and iOS drawing recovery. */
.lightning-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.lightning-button-icon {
  width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px;
  color: #713f12; background: #fef3c7; box-shadow: inset 0 0 0 1px rgba(161,98,7,.16);
}
.lightning-button-icon svg { width: 19px; height: 19px; overflow: visible; }
.lightning-button-icon path { fill: #facc15; stroke: #111827; stroke-width: .9; stroke-linejoin: round; }
.lightning-button.is-enabled { border-color: rgba(234,179,8,.55); }
.lightning-button.is-enabled .lightning-button-icon { background: #fde047; color: #422006; }
.lightning-button.is-enabled .tool-status { color: #854d0e; }
.lightning-button.has-lightning-error { border-color: rgba(220,38,38,.42); }
.lightning-menu {
  width: min(360px, calc(100vw - 32px)); padding: 11px; display: grid; gap: 9px;
  max-height: min(620px, calc(100dvh - 120px)); overflow: auto;
}
.lightning-menu-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.lightning-menu-heading > div { min-width: 0; display: grid; gap: 2px; }
.lightning-menu-heading strong { color: #1f2b3d; font-size: 14px; }
.lightning-menu-heading > div span { color: #7b8798; font-size: 9px; }
.lightning-mode-badge {
  flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #eef2f7;
  color: #64748b; font-size: 9px; font-weight: 850; text-transform: uppercase;
}
.lightning-mode-badge.is-enabled { background: #fef3c7; color: #854d0e; }
.lightning-message, .lightning-note {
  margin: 0; color: #64748b; font-size: 10px; line-height: 1.4;
}
.lightning-message { padding: 8px 9px; border-radius: 9px; background: rgba(250,204,21,.10); }
.lightning-layer-card {
  position: relative; display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(148,163,184,.30);
  border-radius: 11px; background: rgba(248,250,252,.84);
}
.lightning-layer-card.is-disabled { opacity: .52; }
.lightning-layer-switch {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer;
}
.lightning-layer-switch > span { min-width: 0; display: grid; gap: 2px; }
.lightning-layer-switch b { color: #263247; font-size: 11px; line-height: 1.25; }
.lightning-layer-switch small { color: #7b8798; font-size: 8.5px; line-height: 1.3; }
.lightning-layer-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lightning-layer-switch i {
  flex: 0 0 auto; width: 37px; height: 20px; padding: 2px; border-radius: 999px;
  background: #cbd5e1; transition: background .16s ease;
}
.lightning-layer-switch i::after {
  content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.28); transition: transform .16s ease;
}
.lightning-layer-switch input:checked + i { background: #eab308; }
.lightning-layer-switch input:checked + i::after { transform: translateX(17px); }
.lightning-layer-switch input:focus-visible + i { outline: 3px solid rgba(234,179,8,.35); outline-offset: 2px; }
.lightning-opacity-control { display: grid; gap: 5px; color: #526076; font-size: 9.5px; font-weight: 750; }
.lightning-opacity-control > span { display: flex; justify-content: space-between; gap: 8px; }
.lightning-opacity-control input { width: 100%; accent-color: #eab308; }
.lightning-opacity-control input:disabled { opacity: .5; }

/* The Leaflet pane already supplies the interaction transform. Permanently
   promoting a second full-screen layer retained unnecessary GPU surfaces on
   desktop browsers. */
.lightning-flash-canvas {
  contain: strict;
  backface-visibility: hidden;
}
.lightning-cross-key { position: absolute; top: 42px; right: 15px; width: 14px; height: 14px; pointer-events: none; }
.lightning-cross-key::before, .lightning-cross-key::after,
.lightning-cross-key span::before, .lightning-cross-key span::after {
  content: ""; position: absolute; left: 6px; top: 1px; width: 2px; height: 12px; border-radius: 2px;
  transform-origin: center; background: #111827;
}
.lightning-cross-key::before { transform: rotate(45deg); }
.lightning-cross-key::after { transform: rotate(-45deg); }
.lightning-cross-key span::before, .lightning-cross-key span::after { left: 6.5px; width: 1px; background: #d9d9d9; }
.lightning-cross-key span::before { transform: rotate(45deg); }
.lightning-cross-key span::after { transform: rotate(-45deg); }
.lightning-flash-canvas { pointer-events: none; image-rendering: auto; }
.lightning-flash-legend, .lightning-area-legend { --legend-width: 320px; }
.lightning-flash-legend .legend-bar, .lightning-area-legend .legend-bar { height: 15px; }
html.ios-webkit [data-reliable-tap="true"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mobile-drawing-map-locked { touch-action: none !important; }

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .lightning-button-icon { width: 25px; height: 25px; }
  .lightning-menu { width: min(390px, calc(100vw - 18px)); max-height: min(640px, calc(100dvh - 86px)); }
  .lightning-flash-legend, .lightning-area-legend { width: 100%; }
}


/* v6.24.0 — attribution, extended imagery bounds, robust Cloud Type legend and lightning symbols. */
.satellite-legend-toggle-control {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(2,132,199,.20);
  border-radius: 12px;
  background: rgba(239,248,255,.72);
}
.satellite-legend-toggle-control:has(input:disabled) { opacity: .58; }
.satellite-legend.is-categorical {
  width: min(390px, calc(100vw - 30px));
  max-height: min(60vh, 520px);
  overflow: hidden;
}
.satellite-legend.is-categorical .legend-title { margin-bottom: 8px; }
.satellite-category-legend {
  max-height: min(48vh, 430px);
  overflow: auto;
  padding-right: 3px;
  display: grid;
  gap: 3px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.satellite-category-item {
  min-height: 25px;
  display: grid;
  grid-template-columns: 19px 23px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(241,245,249,.72);
  color: #263247;
  font-size: 10px;
  line-height: 1.2;
}
.satellite-category-item:nth-child(even) { background: rgba(226,232,240,.62); }
.satellite-category-swatch {
  width: 17px;
  height: 17px;
  display: block;
  border: 1px solid rgba(15,23,42,.45);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.satellite-category-value {
  text-align: right;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.satellite-category-label {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .satellite-legend.is-categorical {
    width: min(360px, calc(100vw - 18px));
    max-height: 53vh;
  }
  .satellite-category-legend { max-height: 39vh; }
  .satellite-category-item {
    min-height: 23px;
    grid-template-columns: 18px 20px minmax(0,1fr);
    gap: 5px;
    font-size: 9px;
  }
}


/* v6.24.0 — flash symbol selector and larger map symbols. */
.lightning-symbol-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 7px;
  padding: 7px;
  border: 1px solid rgba(234,179,8,.24);
  border-radius: 10px;
  background: rgba(255,251,235,.72);
}
.lightning-symbol-settings legend {
  grid-column: 1 / -1;
  padding: 0 3px;
  color: #526076;
  font-size: 9.5px;
  font-weight: 800;
}
.lightning-symbol-settings label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 18px minmax(0,1fr);
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: #39475c;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}
.lightning-symbol-settings input { margin: 0; accent-color: #eab308; }
.lightning-symbol-option-preview { width: 17px; height: 17px; position: relative; display: inline-grid; place-items: center; }
.lightning-symbol-option-cross::before,
.lightning-symbol-option-cross::after,
.lightning-symbol-option-cross i::before,
.lightning-symbol-option-cross i::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: #111827;
}
.lightning-symbol-option-cross::before { transform: rotate(45deg); }
.lightning-symbol-option-cross::after { transform: rotate(-45deg); }
.lightning-symbol-option-cross i::before,
.lightning-symbol-option-cross i::after { left: 2px; top: 8px; width: 13px; height: 1px; background: #d9d9d9; }
.lightning-symbol-option-cross i::before { transform: rotate(45deg); }
.lightning-symbol-option-cross i::after { transform: rotate(-45deg); }
.lightning-symbol-option-bolt svg { width: 16px; height: 16px; overflow: visible; }
.lightning-symbol-option-bolt path { fill: #d9d9d9; stroke: #111827; stroke-width: 1.6; stroke-linejoin: round; }
.lightning-cross-key { width: 17px; height: 17px; }
.lightning-cross-key::before, .lightning-cross-key::after,
.lightning-cross-key span::before, .lightning-cross-key span::after { left: 1px; top: 7px; width: 15px; height: 3px; }
.lightning-cross-key span::before, .lightning-cross-key span::after { left: 2px; top: 8px; width: 13px; height: 1px; }
.lightning-cross-key.is-bolt::before,
.lightning-cross-key.is-bolt::after,
.lightning-cross-key.is-bolt span::before,
.lightning-cross-key.is-bolt span::after { display: none; }
.lightning-cross-key.is-bolt span {
  position: absolute;
  inset: 0;
  display: block;
  background: #d9d9d9;
  border: 1px solid #111827;
  clip-path: polygon(56% 0, 17% 49%, 43% 49%, 27% 100%, 84% 43%, 59% 43%, 78% 18%, 52% 18%);
}
.information-data-attribution {
  padding: 9px 10px;
  border-left: 3px solid rgba(14,116,144,.45);
  border-radius: 0 8px 8px 0;
  background: rgba(236,254,255,.55);
}
.information-data-attribution strong { color: #0f4c5c; }

@media (max-width: 720px) {
  .lightning-symbol-settings { grid-template-columns: 1fr; }
}


/* v6.28.5 — selectable MTG-original / legacy corrected LFL placement. */
.lightning-placement-settings {
  display: grid;
  gap: 6px;
  margin: 8px 0 7px;
  padding: 7px;
  border: 1px solid rgba(14,116,144,.24);
  border-radius: 10px;
  background: rgba(236,254,255,.64);
}
.lightning-placement-settings legend {
  padding: 0 3px;
  color: #35536a;
  font-size: 9.5px;
  font-weight: 800;
}
.lightning-placement-settings label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 8px;
  background: rgba(255,255,255,.76);
  color: #39475c;
  cursor: pointer;
}
.lightning-placement-settings input { margin: 2px 0 0; accent-color: #0e7490; }
.lightning-placement-settings b { display: block; font-size: 9.5px; }
.lightning-placement-settings small { display: block; margin-top: 2px; color: #66758a; font-size: 8.5px; line-height: 1.3; }
.lightning-placement-settings label:has(input:checked) {
  border-color: rgba(14,116,144,.55);
  background: rgba(207,250,254,.72);
}
.lightning-placement-settings label:has(input:disabled) { opacity: .55; cursor: not-allowed; }


/* v6.32.0 — compact, colour-scaled and interactive surface observations. */
.factual-data-button-icon {
  width: 29px; height: 29px; overflow: visible; border: 0; border-radius: 0;
  background: transparent; font-size: 24px; line-height: 1; filter: none;
}
.factual-data-button-icon img { display: none; }

.weather-observations-controls { max-height: 680px; }
.observation-render-control {
  min-width: 0; margin: 0; padding: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 6px; border: 0;
}
.observation-render-control legend {
  grid-column: 1 / -1; margin: 0 0 3px; padding: 0; color: #64748b;
  font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
}
.observation-render-control label { min-width: 0; cursor: pointer; }
.observation-render-control input { position: absolute; opacity: 0; pointer-events: none; }
.observation-render-control label > span {
  min-height: 34px; padding: 5px 7px; display: grid; place-items: center;
  border: 1px solid rgba(148,163,184,.28); border-radius: 9px;
  background: #f8fafc; color: #526076; font-size: 9px; font-weight: 780; text-align: center;
}
.observation-render-control input:checked + span {
  border-color: #0d9488; background: #ecfdf5; color: #0f766e;
  box-shadow: inset 0 0 0 1px rgba(13,148,136,.14);
}
.observation-render-control input:focus-visible + span {
  outline: 3px solid rgba(59,130,246,.24); outline-offset: 1px;
}
.observation-weather-style-control {
  padding: 7px; border: 1px solid rgba(148,163,184,.2); border-radius: 10px;
  background: rgba(248,250,252,.55); transition: border-color .16s ease, background .16s ease;
}
.observation-weather-style-control.is-relevant {
  border-color: rgba(13,148,136,.38); background: rgba(236,253,245,.75);
}

.synop-plot-card:not(.is-large) {
  width: 82px; height: 72px; border-radius: 8px; box-shadow: 0 3px 10px rgba(15,23,42,.24);
}
.synop-plot-card:not(.is-large) .plot-value { font-size: 8px; }
.synop-plot-card:not(.is-large) .plot-value small { margin-top: 1px; font-size: 4.5px; }
.synop-plot-card:not(.is-large) .plot-temperature,
.synop-plot-card:not(.is-large) .plot-pressure { top: 6px; }
.synop-plot-card:not(.is-large) .plot-temperature,
.synop-plot-card:not(.is-large) .plot-visibility,
.synop-plot-card:not(.is-large) .plot-dew-point { left: 6px; }
.synop-plot-card:not(.is-large) .plot-pressure,
.synop-plot-card:not(.is-large) .plot-tendency,
.synop-plot-card:not(.is-large) .plot-precipitation { right: 6px; }
.synop-plot-card:not(.is-large) .plot-visibility,
.synop-plot-card:not(.is-large) .plot-tendency { top: 29px; }
.synop-plot-card:not(.is-large) .plot-dew-point,
.synop-plot-card:not(.is-large) .plot-precipitation { bottom: 5px; }
.synop-plot-card:not(.is-large) .synop-plot-symbol { width: 44px; height: 44px; }
.synop-plot-card:not(.is-large) .plot-cloud-ring,
.synop-plot-card:not(.is-large) .plot-calm,
.synop-plot-card:not(.is-large) .plot-variable-wind,
.synop-plot-card:not(.is-large) .plot-cloud-missing,
.synop-plot-card:not(.is-large) .plot-wind { stroke-width: 2.4; }

.observation-value-marker {
  min-width: 34px; max-width: 58px; min-height: 19px; height: 19px; padding: 1px 5px;
  display: grid; place-items: center; border: 1px solid #fff; border-radius: 6px;
  background: var(--parameter-colour); color: var(--parameter-text, #fff);
  box-shadow: 0 0 0 1px rgba(15,23,42,.58), 0 2px 6px rgba(15,23,42,.26);
  font-size: 9.5px; font-weight: 900; line-height: 1; text-align: center;
}
.observation-value-marker span {
  width: 100%; max-width: 48px; overflow: hidden; text-align: center; text-overflow: ellipsis;
}
.observation-value-marker small { display: none; }
.observation-value-text {
  min-width: 32px; height: 21px; display: grid; place-items: center;
  color: var(--parameter-colour); font-size: 11px; font-weight: 950; line-height: 1;
  text-align: center; white-space: nowrap; paint-order: stroke fill;
  -webkit-text-stroke: .65px #080b10;
  text-shadow: 0 1px 1px rgba(255,255,255,.75), 0 1px 3px rgba(0,0,0,.36);
}
.observation-missing-marker {
  width: 22px; height: 22px; border-width: 1px; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(15,23,42,.55), 0 2px 6px rgba(15,23,42,.24);
}
.observation-missing-marker span { font-size: 14px; }
.weather-sticker-marker,
.weather-wmo-marker {
  width: 35px; height: 35px; position: relative; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.98); border-radius: 11px; background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 1px rgba(15,23,42,.52), 0 3px 8px rgba(15,23,42,.26);
}
.weather-sticker-marker span {
  display: block; font-size: 24px; line-height: 1; transform: translateY(-1px);
  filter: drop-shadow(0 1px 1px rgba(15,23,42,.18));
}
.weather-sticker-marker.is-thunder { background: linear-gradient(145deg,#fef3c7,#fde68a); }
.weather-sticker-marker.is-rain,
.weather-sticker-marker.is-shower,
.weather-sticker-marker.is-drizzle { background: linear-gradient(145deg,#eff6ff,#bfdbfe); }
.weather-sticker-marker.is-snow,
.weather-sticker-marker.is-hail { background: linear-gradient(145deg,#f8fafc,#dbeafe); }
.weather-sticker-marker.is-fog { background: linear-gradient(145deg,#f8fafc,#d1d5db); }
.weather-wmo-marker { border-radius: 50%; }
.weather-wmo-marker svg { width: 27px; height: 27px; overflow: visible; }
.weather-wmo-marker svg path,
.weather-wmo-marker svg circle {
  fill: none; stroke: #0b1220; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round;
}
.weather-wmo-marker svg circle { fill: #0b1220; }
.weather-wmo-marker small {
  position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 13px; padding: 0 2px;
  display: grid; place-items: center; border: 1px solid #0f172a; border-radius: 5px;
  background: #fff; color: #111827; font-size: 7px; font-weight: 900; line-height: 1;
}

.observation-metric-grid { gap: 5px; }
.observation-metric { min-height: 49px; padding: 6px 8px; gap: 3px; border-radius: 9px; }
.observation-metric > span { font-size: 7.5px; }
.observation-metric strong { font-size: 11.5px; text-align: center; }
.observation-metric strong small { font-size: 7.5px; }

.observation-history-section > header { align-items: flex-start; }
.observation-history-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.observation-history-actions > #observationHistoryRange {
  color: #8da7c8; font-size: 8px; font-weight: 700; letter-spacing: .035em;
}
.observation-history-view {
  display: inline-flex; overflow: hidden; border: 1px solid #2b3a52; border-radius: 6px;
  background: #101a2a;
}
.observation-history-view button {
  min-width: 48px; height: 23px; padding: 0 8px; border: 0; border-right: 1px solid #2b3a52;
  background: transparent; color: #8da7c8; cursor: pointer; font-size: 8px; font-weight: 850;
  letter-spacing: .04em; text-transform: uppercase;
}
.observation-history-view button:last-child { border-right: 0; }
.observation-history-view button.active { background: #183b66; color: #67b7ff; }
.observation-chart-tabs.is-hidden,
.observation-chart.is-hidden,
.observation-history-table.is-hidden { display: none !important; }

.chart-series { animation: observationSeriesIn .46s cubic-bezier(.22,.7,.25,1) both; }
.chart-series:nth-of-type(2) { animation-delay: .06s; }
.chart-series:nth-of-type(3) { animation-delay: .12s; }
@keyframes observationSeriesIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.observation-chart svg { touch-action: none; }
.chart-hover-line {
  opacity: 0; stroke: #dbeafe; stroke-width: 1; stroke-dasharray: 3 3;
  pointer-events: none; transition: opacity .1s ease;
}
.chart-hover-line.is-visible { opacity: .7; }
.chart-hover-point {
  opacity: 0; stroke: #e2e8f0; stroke-width: 2.5; pointer-events: none;
  transition: opacity .08s ease, r .08s ease;
}
.chart-hover-point.is-visible { opacity: 1; }
.observation-chart-tooltip {
  position: absolute; z-index: 8; max-width: 220px; padding: 8px 9px; display: grid; gap: 3px;
  border: 1px solid #475569; border-radius: 7px; background: rgba(24,24,22,.96); color: #e5e7eb;
  box-shadow: 0 8px 22px rgba(0,0,0,.34); opacity: 0; transform: translateY(3px);
  pointer-events: none; transition: opacity .1s ease, transform .1s ease;
  font-size: 8.5px; line-height: 1.25;
}
.observation-chart-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.observation-chart-tooltip time { margin-bottom: 2px; color: #cbd5e1; font-size: 8px; }
.observation-chart-tooltip span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.observation-chart-tooltip span i {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--series-colour);
}
.observation-chart-tooltip b { color: #f8fafc; }

.observation-history-table {
  max-height: 310px; overflow: auto; border: 1px solid #223149; border-radius: 10px;
  background: #0f1828; scrollbar-width: thin; scrollbar-color: #64748b #111c2e;
}
.observation-history-table table {
  width: 100%; min-width: 710px; border-collapse: collapse; color: #dce7f7;
  font-size: 9px; line-height: 1.2;
}
.observation-history-table th {
  position: sticky; z-index: 2; top: 0; padding: 8px 9px; border-bottom: 1px solid #334155;
  background: #111c2e; color: #8da7c8; font-size: 8px; font-weight: 850; text-align: left;
  white-space: nowrap;
}
.observation-history-table td {
  height: 31px; padding: 4px 9px; border-bottom: 1px solid #2b3a52; white-space: nowrap;
}
.observation-history-table tbody tr:hover { background: #17243a; }
.observation-history-table time { color: #f1f5f9; font-weight: 800; }
.history-weather-mini { width: 25px; height: 25px; display: grid; place-items: center; }
.history-weather-mini .weather-sticker-marker,
.history-weather-mini .weather-wmo-marker {
  width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(15,23,42,.45);
}
.history-weather-mini .weather-sticker-marker span { font-size: 16px; }
.history-weather-mini .weather-wmo-marker svg { width: 17px; height: 17px; }
.history-weather-mini .weather-wmo-marker small { right: -5px; bottom: -3px; transform: scale(.75); }

@media (max-width: 620px) {
  .observation-history-actions { align-items: flex-end; flex-direction: column; gap: 4px; }
  .observation-history-table { max-height: 270px; }
  .observation-chart-tooltip { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .chart-series { animation: none !important; }
  .observation-chart-tooltip,
  .chart-hover-line,
  .chart-hover-point { transition: none !important; }
}

/* v6.32.0 — scalable markers, exact WMO reference symbols and wrapped tools. */
@media (min-width: 821px) {
  .tools-button {
    height: auto; min-height: 58px; padding-top: 7px; padding-bottom: 7px;
    grid-template-columns: 29px minmax(0,1fr) auto;
  }
  .tools-button:has(> .tool-chevron) { grid-template-columns: 29px minmax(0,1fr) auto 13px; gap: 7px; }
  .tools-button:has(> .tool-chevron) > .tool-button-label { grid-column: 2; }
  .tools-button:has(> .tool-chevron) > .tool-status { grid-column: 3; }
  .tools-button:has(> .tool-chevron) > .tool-chevron { grid-column: 4; }
}
.tool-button-label,
.factual-action-copy strong,
.factual-action-copy small,
.observation-source-control label b,
.observation-source-control label small,
.observation-render-control label > span {
  overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
}
.tool-button-label { line-height: 1.12; }
.factual-action { min-height: 62px; height: auto; }
.factual-action-copy strong { line-height: 1.15; }
.factual-action .tool-status { flex-shrink: 0; }

.factual-data-button-icon {
  width: 29px; height: 29px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(14,116,144,.18); border-radius: 50%;
  background: #e0f2fe; font-size: 17px; line-height: 1; filter: none;
}
.factual-data-button.is-enabled {
  border-color: rgba(34,197,94,.46); background: rgba(220,252,231,.97);
}
.factual-data-button.is-enabled .factual-data-button-icon {
  border-color: rgba(22,163,74,.32); background: #bbf7d0;
}
.factual-data-button.is-enabled .tool-status { color: #15803d; }

.weather-observations-controls { max-height: 940px; }
.observation-size-controls {
  display: grid; gap: 7px; padding: 8px;
  border: 1px solid rgba(148,163,184,.22); border-radius: 10px; background: rgba(248,250,252,.72);
}
.observation-size-controls > label:not(.observation-check-row) { display: grid; gap: 4px; }
.observation-size-controls > label > span {
  min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: #526076; font-size: 9px; line-height: 1.2;
}
.observation-size-controls b { min-width: 0; overflow-wrap: anywhere; }
.observation-size-controls output { flex: 0 0 auto; color: #0f766e; font-size: 9px; font-weight: 900; }
.observation-size-controls input[type="range"] { width: 100%; margin: 0; accent-color: #0d9488; }
.observation-check-row {
  min-height: 38px; padding-top: 6px; display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 8px; border-top: 1px solid rgba(148,163,184,.2); opacity: .55;
}
.observation-check-row.is-relevant { opacity: 1; }
.observation-check-row input { position: absolute; opacity: 0; pointer-events: none; }
.observation-check-row i {
  position: relative; width: 36px; height: 21px; border-radius: 999px; background: #cbd5e1;
}
.observation-check-row i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); transition: transform .16s ease;
}
.observation-check-row input:checked + i { background: #0d9488; }
.observation-check-row input:checked + i::after { transform: translateX(15px); }
.observation-airport-switch { background: #eff6ff; }

.observation-user-scale {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center;
}
.observation-user-scale > :not(.observation-airport-badge) {
  transform: scale(var(--observation-user-scale, 1)); transform-origin: center;
  transition: transform .12s ease;
}
.observation-leaflet-icon.is-text-value .observation-user-scale > :not(.observation-airport-badge) {
  --observation-user-scale: var(--observation-text-scale, 1.2);
}
.observation-leaflet-icon.is-box-value .observation-user-scale > :not(.observation-airport-badge) {
  --observation-user-scale: var(--observation-box-scale, 1);
}
.observation-leaflet-icon.is-weather-marker .observation-user-scale > :not(.observation-airport-badge) {
  --observation-user-scale: var(--observation-weather-scale, 1);
}
.observation-airport-badge {
  position: absolute; z-index: 9; right: -5px; top: -6px; width: 15px; height: 15px;
  display: grid; place-items: center; border: 1px solid #0f172a; border-radius: 50%;
  background: #dbeafe; color: #1d4ed8; box-shadow: 0 1px 3px rgba(15,23,42,.3);
  font-size: 8px; line-height: 1;
}
.observation-leaflet-icon.is-derived-station .synop-plot-card { border-style: dashed; border-color: #0d9488; }
.synop-plot-card:not(.is-large) .plot-value small { font-size: 5.7px; font-weight: 800; }

.observation-value-text {
  font-size: 13px; -webkit-text-stroke: .72px #05070a;
  text-shadow: 0 1px 0 #fff, 0 1px 3px rgba(255,255,255,.9), 0 2px 4px rgba(0,0,0,.35);
}
.weather-sticker-marker.is-boxless,
.is-sticker-boxless .weather-sticker-marker {
  border-color: transparent !important; background: transparent !important; box-shadow: none !important;
}
.weather-sticker-marker.is-boxless span,
.is-sticker-boxless .weather-sticker-marker span { filter: drop-shadow(0 2px 2px rgba(15,23,42,.42)); }

.weather-wmo-marker {
  width: 61px; height: 36px; overflow: visible; border: 0; border-radius: 0;
  background: transparent; box-shadow: 0 2px 6px rgba(15,23,42,.34);
}
.wmo-symbol-sprite {
  width: 60.33px; height: 33px; display: block; overflow: hidden;
  background-image: url("/static/wmo-weather-symbols.png?build=6.32.12-live-cycle-stability");
  background-repeat: no-repeat; background-size: 603.26px 631.78px;
  background-position:
    calc(var(--wmo-column) * -60.326px)
    calc((var(--wmo-row) * -60.14px) - 32.24px);
  outline: 1px solid rgba(15,23,42,.88); outline-offset: -1px;
}
.wmo-symbol-unavailable { font-size: 24px; font-weight: 900; }
.weather-wmo-marker small {
  right: -3px; bottom: -5px; min-width: 17px; height: 14px; font-size: 8px;
}
.history-weather-mini .weather-wmo-marker {
  width: 22px; height: 22px; box-shadow: none; transform: scale(.37); transform-origin: center;
}
.history-weather-mini .weather-wmo-marker small { right: -4px; bottom: -5px; transform: none; }

.observation-chart-empty.is-no-data {
  color: #fca5a5; font-size: clamp(13px,2vw,18px); font-weight: 950; letter-spacing: .08em;
}

/* v6.32.0 interaction fast path: all national observations are painted into
   one padded canvas.  Leaflet moves that bitmap during a gesture and the
   layer reprojects once at the end, so station count no longer affects pan or
   zoom frame time. */
.leaflet-observations-pane {
  backface-visibility: hidden;
  pointer-events: none !important;
}
.observation-canvas-layer {
  display: block;
  pointer-events: none !important;
  contain: strict;
  backface-visibility: hidden;
}
.observation-canvas-layer.is-map-interacting { will-change: transform; }
.observation-leaflet-icon { contain: layout style; }
.leaflet-observations-pane.is-map-interacting { pointer-events: none !important; }
.leaflet-observations-pane.is-map-interacting .observation-user-scale > *,
.leaflet-observations-pane.is-map-interacting .observation-leaflet-icon {
  transition: none !important;
}
.leaflet-observations-pane.is-map-interacting .synop-plot-card,
.leaflet-observations-pane.is-map-interacting .observation-value-marker,
.leaflet-observations-pane.is-map-interacting .observation-missing-marker,
.leaflet-observations-pane.is-map-interacting .weather-sticker-marker,
.leaflet-observations-pane.is-map-interacting .weather-wmo-marker,
.leaflet-observations-pane.is-map-interacting .observation-airport-badge {
  box-shadow: none !important;
}
.leaflet-observations-pane.is-map-interacting .observation-value-text {
  text-shadow: none !important;
}
.leaflet-observations-pane.is-map-interacting .weather-sticker-marker span {
  filter: none !important;
}
.observation-chart-empty.is-loading {
  color: #8da7c8;
}
.observation-chart-empty.is-loading::before {
  content: ""; width: 13px; height: 13px; margin-right: 7px; display: inline-block;
  border: 2px solid rgba(96,165,250,.28); border-top-color: #60a5fa; border-radius: 50%;
  vertical-align: -3px; animation: observationHistorySpin .7s linear infinite;
}
@keyframes observationHistorySpin { to { transform: rotate(360deg); } }
.chart-point.is-direction { stroke: #d1fae5; stroke-width: 1.2; }

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .factual-data-button-icon { width: 26px; height: 26px; font-size: 15px; }
  .factual-data-menu.is-mobile-portal { overflow-y: auto !important; }
}
@media (max-width: 420px) {
  .factual-data-heading strong { font-size: 13px; line-height: 1.15; }
  .factual-action { grid-template-columns: 31px minmax(0,1fr) auto; }
  .observation-source-control label > span { min-height: 60px; }
}

/* v6.32.0 — warnings and surface observations are independent tools. */
.warnings-overview-control > .factual-data-menu,
.weather-observations-control > .factual-data-menu {
  width: 420px;
  max-height: min(780px, calc(100vh - 120px));
  padding: 11px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.warnings-overview-button.is-enabled {
  border-color: rgba(239,68,68,.38);
  background: rgba(255,247,247,.97);
}
.warnings-overview-button.is-enabled .warnings-overview-icon {
  background: #dc2626;
  box-shadow: 0 0 0 4px rgba(220,38,38,.11);
}
.warnings-overview-button.is-enabled .tool-status { color: #b91c1c; }
.weather-observations-overview-button.is-enabled {
  border-color: rgba(34,197,94,.46);
  background: rgba(220,252,231,.97);
}
.weather-observations-overview-button.is-enabled .weather-observations-icon {
  border-color: rgba(22,163,74,.34);
  background: #dcfce7;
  box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}
.weather-observations-overview-button.is-enabled .tool-status { color: #15803d; }
.weather-observations-overview-button > .weather-observations-icon {
  width: 29px;
  height: 29px;
  border-radius: 9px;
}
.weather-observations-overview-button > .weather-observations-icon img {
  width: 41px;
  height: 41px;
}
.weather-observations-menu .weather-observations-controls {
  max-height: none;
  margin-top: 0;
  padding-top: 0;
  overflow: visible;
  border-top: 0;
}
.observation-network-summary {
  min-height: 60px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(13,148,136,.27);
  border-radius: 12px;
  background: rgba(236,253,245,.86);
}
.observation-network-summary > span { min-width: 0; display: grid; gap: 3px; }
.observation-network-summary b {
  color: #115e59;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.observation-network-summary small {
  color: #52716f;
  font-size: 8.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.observation-network-summary > div {
  display: grid;
  grid-template-columns: repeat(3,auto);
  gap: 3px;
}
.observation-network-summary i {
  padding: 4px 5px;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .03em;
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .weather-observations-icon {
    grid-column: 1;
    grid-row: 1;
    width: 27px;
    height: 27px;
    border-radius: 9px;
  }
  .tools-wrap .weather-observations-icon img { width: 39px; height: 39px; }
  .warnings-menu.is-mobile-portal,
  .weather-observations-menu.is-mobile-portal {
    width: auto;
    max-height: min(74dvh, 650px) !important;
    padding: 10px !important;
  }
}

@media (max-width: 420px) {
  .observation-network-summary { grid-template-columns: 1fr; gap: 7px; }
  .observation-network-summary > div { justify-content: start; }
}

/* v6.32.0 station-plot readability and optional transparent plotting card. */
.plot-value,
.plot-value small {
  paint-order: stroke fill;
  -webkit-text-stroke-width: .42px;
  -webkit-text-stroke-color: rgba(255,255,255,.98);
  text-shadow: 0 1px 1px rgba(15,23,42,.14);
}
.synop-plot-card:not(.is-large) .plot-value {
  -webkit-text-stroke-color: var(--plot-outline, #05070a);
}
.synop-plot-card:not(.is-large) .plot-value small {
  -webkit-text-stroke-color: var(--plot-unit-outline, #fff);
}
.plot-value.is-missing { color: #000 !important; }
.synop-plot-card.is-boxless {
  overflow: visible;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.synop-plot-card.is-boxless .plot-value,
.synop-plot-card.is-boxless .plot-value small {
  -webkit-text-stroke-width: .82px;
  text-shadow: 0 1px 2px rgba(15,23,42,.22);
}
.synop-plot-card:not(.is-large) {
  width: 96px;
  height: 80px;
}
.synop-plot-card:not(.is-large) .plot-value { font-size: 10px; font-weight: 900; }
.synop-plot-card:not(.is-large) .plot-value small { font-size: 7px; font-weight: 850; }
.weather-sticker-marker.is-night,
.weather-sticker-marker.is-night-cloud {
  background: linear-gradient(145deg,#e0e7ff,#c7d2fe);
}

/* v6.32.0 — transparent SYNOP symbols and adjustable station-plot sizing. */
.synop-plot-card.is-boxless .plot-value small {
  color: #fff;
  -webkit-text-stroke-width: 0;
  text-shadow: none;
}
.synop-plot-card.is-boxless .plot-cloud-ring,
.synop-plot-card.is-boxless .plot-calm,
.synop-plot-card.is-boxless .plot-cloud-missing {
  stroke: #fff;
}
.synop-plot-card.is-boxless .plot-cloud-fill {
  fill: #fff;
}

/* v6.32.0 — adaptive observation contrast, selectable SYNOP plot theme. */
.observation-station-plot-theme-control {
  padding: 7px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 10px;
  background: rgba(248,250,252,.55);
  transition: border-color .16s ease, background .16s ease;
}
.observation-station-plot-theme-control.is-relevant {
  border-color: rgba(37,99,235,.34);
  background: rgba(239,246,255,.78);
}

/* Every coloured map number gets the opposite-luminance outline. */
.observation-value-text {
  font-size: 14.5px;
  font-weight: 950;
  paint-order: stroke fill;
  -webkit-text-stroke: .82px var(--parameter-outline, #05070a);
  text-shadow: 0 1px 2px rgba(15,23,42,.18);
}
.observation-value-marker {
  font-size: 10.5px;
  font-weight: 950;
}
.observation-value-marker span {
  paint-order: stroke fill;
  -webkit-text-stroke: .55px var(--parameter-text-outline, #05070a);
}

/* Coloured SYNOP values keep their palette and always use adaptive outlines. */
.synop-plot-card .plot-value {
  paint-order: stroke fill;
  -webkit-text-stroke-width: .56px;
  -webkit-text-stroke-color: var(--plot-outline, #05070a);
  text-shadow: 0 1px 1px rgba(15,23,42,.12);
}
.synop-plot-card:not(.is-large) .plot-value {
  font-size: 11px;
  font-weight: 900;
}
.synop-plot-card:not(.is-large) .plot-value small {
  font-size: 7.5px;
  font-weight: 850;
}
.synop-plot-card.is-large .plot-value {
  font-size: 19.5px;
  font-weight: 900;
}
.synop-plot-card.is-large .plot-value small {
  font-size: 10px;
  font-weight: 800;
}

/* Units and neutral station-model linework follow the chosen box theme. */
.synop-plot-card:not(.is-boxless).is-theme-light {
  border-color: rgba(203,213,225,.98);
  background: rgba(255,255,255,.97);
  color: #0f172a;
}
.synop-plot-card:not(.is-boxless).is-theme-dark {
  border-color: rgba(100,116,139,.88);
  background: rgba(15,23,42,.97);
  color: #f8fafc;
  box-shadow: 0 4px 15px rgba(2,6,23,.42);
}
.synop-plot-card:not(.is-boxless).is-theme-light .plot-value small {
  color: #111827;
  -webkit-text-stroke-width: 0;
  text-shadow: none;
}
.synop-plot-card:not(.is-boxless).is-theme-dark .plot-value small {
  color: #fff;
  -webkit-text-stroke-width: 0;
  text-shadow: none;
}
.synop-plot-card:not(.is-boxless).is-theme-light .plot-cloud-ring,
.synop-plot-card:not(.is-boxless).is-theme-light .plot-calm,
.synop-plot-card:not(.is-boxless).is-theme-light .plot-cloud-missing {
  stroke: #111827;
}
.synop-plot-card:not(.is-boxless).is-theme-light .plot-cloud-fill { fill: #111827; }
.synop-plot-card:not(.is-boxless).is-theme-dark .plot-cloud-ring,
.synop-plot-card:not(.is-boxless).is-theme-dark .plot-calm,
.synop-plot-card:not(.is-boxless).is-theme-dark .plot-cloud-missing {
  stroke: #fff;
}
.synop-plot-card:not(.is-boxless).is-theme-dark .plot-cloud-fill { fill: #fff; }
.synop-plot-card:not(.is-boxless).is-theme-dark .plot-wind,
.synop-plot-card:not(.is-boxless).is-theme-dark .plot-variable-wind { stroke: #60a5fa; }

/* Boxless plots retain the requested plain-white neutral linework/units. */
.synop-plot-card.is-boxless .plot-value {
  -webkit-text-stroke-width: .90px;
}
.synop-plot-card.is-boxless .plot-value small {
  color: #fff;
  -webkit-text-stroke-width: 0;
  text-shadow: none;
}
.synop-plot-card.is-boxless .plot-cloud-ring,
.synop-plot-card.is-boxless .plot-calm,
.synop-plot-card.is-boxless .plot-cloud-missing { stroke: #fff; }
.synop-plot-card.is-boxless .plot-cloud-fill { fill: #fff; }

.observation-metric > span { font-size: 8.5px; }
.observation-metric strong { font-size: 14px; }
.observation-metric.is-wind-direction strong {
  color: var(--metric-value-colour, #eef4ff);
  paint-order: stroke fill;
  -webkit-text-stroke: .45px var(--metric-value-outline, #05070a);
}

/* v6.32.0 — complete station-popup theming, uniform charts and map-value contrast. */
.observation-history-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.observation-detail-theme {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #2b3a52;
  border-radius: 6px;
  background: #101a2a;
}
.observation-detail-theme button {
  min-width: 44px;
  height: 23px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid #2b3a52;
  background: transparent;
  color: #8da7c8;
  cursor: pointer;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.observation-detail-theme button:last-child { border-right: 0; }
.observation-detail-theme button.active { background: #183b66; color: #67b7ff; }

.observation-detail-header .observation-detail-theme {
  flex: 0 0 auto;
  border-radius: 8px;
}
.observation-detail-header .observation-detail-theme button {
  width: auto;
  min-width: 48px;
  height: 28px;
  padding: 0 9px;
  flex: 0 0 auto;
  border-radius: 0;
  font-size: 8.5px;
  line-height: 1;
}

/* The popup theme now covers the entire station window, not just the graph. */
.observation-detail-panel.is-theme-dark {
  background: #0f1828;
  color: #e7eefb;
}
.observation-detail-panel.is-theme-dark .observation-detail-type,
.observation-detail-panel.is-theme-dark .observation-detail-meta,
.observation-detail-panel.is-theme-dark .observation-history-section > header,
.observation-detail-panel.is-theme-dark .observation-history-actions > #observationHistoryRange {
  color: #f8fafc;
}
.observation-detail-panel.is-theme-dark .observation-metric > span { color: #e2e8f0; }
.observation-detail-panel.is-theme-dark .observation-metric strong { color: #ffffff; }
.observation-detail-panel.is-theme-dark .observation-metric strong small { color: #e2e8f0; }
.observation-detail-panel.is-theme-dark .observation-raw-details summary,
.observation-detail-panel.is-theme-dark .observation-chart-legend,
.observation-detail-panel.is-theme-dark .observation-history-table { color: #eef4ff; }

.observation-detail-panel.is-theme-light {
  border-color: rgba(148,163,184,.52);
  background: #f8fafc;
  color: #172033;
  box-shadow: 0 24px 70px rgba(15,23,42,.28);
}
.observation-detail-panel.is-theme-light .observation-detail-header {
  border-bottom-color: #d9e1eb;
  background: #ffffff;
}
.observation-detail-panel.is-theme-light .observation-detail-type,
.observation-detail-panel.is-theme-light .observation-detail-meta,
.observation-detail-panel.is-theme-light .observation-history-section > header,
.observation-detail-panel.is-theme-light .observation-history-actions > #observationHistoryRange {
  color: #64748b;
}
.observation-detail-panel.is-theme-light .observation-detail-header h2 { color: #172033; }
.observation-detail-panel.is-theme-light .observation-detail-header #observationDetailClose {
  border-color: #d7e0ea;
  background: #f1f5f9;
  color: #64748b;
}
.observation-detail-panel.is-theme-light .observation-detail-header #observationDetailClose:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.observation-detail-panel.is-theme-light .observation-detail-body {
  scrollbar-color: #a8b6c8 #eef2f7;
}
.observation-detail-panel.is-theme-light .observation-metric {
  border-color: #d7e0ea;
  background: #ffffff;
}
.observation-detail-panel.is-theme-light .observation-metric > span { color: #64748b; }
.observation-detail-panel.is-theme-light .observation-metric strong { color: #172033; }
.observation-detail-panel.is-theme-light .observation-metric strong small { color: #475569; }
.observation-detail-panel.is-theme-light .observation-metric.is-wind-direction strong,
.observation-detail-panel.is-theme-dark .observation-metric.is-wind-direction strong {
  color: var(--metric-value-colour, #eef4ff);
}
.observation-detail-panel.is-theme-light .observation-raw-details {
  border-color: #d7e0ea;
  background: #ffffff;
}
.observation-detail-panel.is-theme-light .observation-raw-details summary { color: #52657d; }
.observation-detail-panel.is-theme-light .observation-raw-details code { color: #27364a; }
.observation-detail-panel.is-theme-light .observation-chart-tabs button {
  border-color: #d7e0ea;
  background: #ffffff;
  color: #52657d;
}
.observation-detail-panel.is-theme-light .observation-chart-tabs button.active {
  border-color: #2f8de4;
  background: #2f8de4;
  color: #ffffff;
}
.observation-detail-panel.is-theme-light .observation-history-view,
.observation-detail-panel.is-theme-light .observation-detail-theme {
  border-color: #cbd5e1;
  background: #ffffff;
}
.observation-detail-panel.is-theme-light .observation-history-view button,
.observation-detail-panel.is-theme-light .observation-detail-theme button {
  border-right-color: #cbd5e1;
  color: #64748b;
}
.observation-detail-panel.is-theme-light .observation-history-view button.active,
.observation-detail-panel.is-theme-light .observation-detail-theme button.active {
  background: #dbeafe;
  color: #1d4f91;
}
.observation-detail-panel.is-theme-light .observation-chart {
  border-color: #d7e0ea;
  background: #ffffff;
}
.observation-detail-panel.is-theme-light .chart-grid-line { stroke: #cbd5e1; }
.observation-detail-panel.is-theme-light .chart-axis-label,
.observation-detail-panel.is-theme-light .chart-time-label { fill: #52657d; }
.observation-detail-panel.is-theme-light .chart-point { stroke: #ffffff; }
.observation-detail-panel.is-theme-light .observation-chart-legend { color: #334155; }
.observation-detail-panel.is-theme-light .observation-chart-empty { color: #64748b; }
.observation-detail-panel.is-theme-light .observation-chart-tooltip {
  border-color: #cbd5e1;
  background: rgba(255,255,255,.98);
  color: #334155;
  box-shadow: 0 8px 22px rgba(15,23,42,.18);
}
.observation-detail-panel.is-theme-light .observation-chart-tooltip time { color: #64748b; }
.observation-detail-panel.is-theme-light .observation-chart-tooltip b { color: #0f172a; }
.observation-detail-panel.is-theme-light .chart-hover-line { stroke: #334155; }
.observation-detail-panel.is-theme-light .chart-hover-point { stroke: #ffffff; }
.observation-detail-panel.is-theme-light .observation-history-table {
  border-color: #d7e0ea;
  background: #ffffff;
  scrollbar-color: #94a3b8 #eef2f7;
}
.observation-detail-panel.is-theme-light .observation-history-table table { color: #334155; }
.observation-detail-panel.is-theme-light .observation-history-table th {
  border-bottom-color: #d7e0ea;
  background: #eef2f7;
  color: #52657d;
}
.observation-detail-panel.is-theme-light .observation-history-table td { border-bottom-color: #e2e8f0; }
.observation-detail-panel.is-theme-light .observation-history-table tbody tr:hover { background: #f1f5f9; }
.observation-detail-panel.is-theme-light .observation-history-table time { color: #0f172a; }
.observation-detail-panel.is-theme-light .observation-zoom-button {
  border-top-color: #d7e0ea;
  background: #eef2f7;
  color: #2563eb;
}
.observation-detail-panel.is-theme-light .observation-zoom-button:hover {
  background: #e2e8f0;
  color: #1d4ed8;
}

/* Every chart series gets exactly the same visual thickness. */
.chart-series {
  stroke-width: 2.2px !important;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

/* Wind direction keeps its hue but intentionally has no black/white text outline. */
.observation-metric.is-wind-direction strong,
.observation-value-text.is-wind-direction,
.observation-value-marker.is-wind-direction span {
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  text-shadow: none !important;
}

/* Colour-box contour: pink for red/orange cassettes; red for all other cassettes. */
.observation-value-marker {
  border: 2px solid var(--parameter-box-outline, #ef4444);
  box-shadow: 0 2px 6px rgba(15,23,42,.30);
}

@media (max-width: 620px) {
  .observation-history-toolbar { flex-wrap: wrap; justify-content: flex-end; }
  .observation-detail-header { gap: 8px; }
  .observation-detail-header-actions { gap: 6px; }
  .observation-detail-header .observation-detail-theme button { min-width: 43px; height: 26px; padding: 0 6px; }
  .observation-history-view button { min-width: 45px; height: 25px; }
}

/* Previous completed 06–06 UTC extrema shown only inside colour-box markers. */
.observation-value-marker.has-extremes {
  min-width: 48px;
  max-width: 96px;
  height: 32px;
  min-height: 32px;
  padding: 2px 6px 3px;
  display: grid;
  grid-template-rows: 14px 10px;
  align-content: center;
  justify-items: stretch;
  gap: 1px;
}
.observation-value-marker.has-extremes .observation-current-value {
  width: 100%;
  max-width: 84px;
  text-align: center;
}
.observation-value-marker .observation-extreme-values {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  overflow: visible;
  color: var(--parameter-text, #fff);
  font-size: 7.4px;
  font-weight: 950;
  line-height: 1;
}
.observation-value-marker .observation-extreme-values b {
  min-width: 0;
  overflow: visible;
  color: var(--parameter-text, #fff);
  font: inherit;
  paint-order: stroke fill;
  text-shadow: none;
  white-space: nowrap;
}
.observation-value-marker .observation-extreme-values .is-minimum {
  -webkit-text-stroke: .7px #2563eb;
}
.observation-value-marker .observation-extreme-values .is-maximum {
  -webkit-text-stroke: .7px var(--maximum-outline, #ef4444);
}

/* Boxless detail plots follow the popup theme; boxless MAP plots stay white. */
.observation-detail-panel.is-theme-light .synop-plot-card.is-large.is-boxless .plot-value small {
  color: #111827;
}
.observation-detail-panel.is-theme-light .synop-plot-card.is-large.is-boxless .plot-cloud-ring,
.observation-detail-panel.is-theme-light .synop-plot-card.is-large.is-boxless .plot-calm,
.observation-detail-panel.is-theme-light .synop-plot-card.is-large.is-boxless .plot-cloud-missing {
  stroke: #111827;
}
.observation-detail-panel.is-theme-light .synop-plot-card.is-large.is-boxless .plot-cloud-fill { fill: #111827; }
.observation-detail-panel.is-theme-dark .synop-plot-card.is-large.is-boxless .plot-value small { color: #ffffff; }
.observation-detail-panel.is-theme-dark .synop-plot-card.is-large.is-boxless .plot-cloud-ring,
.observation-detail-panel.is-theme-dark .synop-plot-card.is-large.is-boxless .plot-calm,
.observation-detail-panel.is-theme-dark .synop-plot-card.is-large.is-boxless .plot-cloud-missing { stroke: #ffffff; }
.observation-detail-panel.is-theme-dark .synop-plot-card.is-large.is-boxless .plot-cloud-fill { fill: #ffffff; }

/* v6.32.0 — restore the compact Daily extremes control and the original
   national min/max map treatment. */
.observation-daily-extremes-button {
  width: 100%; min-height: 38px; margin: 7px 0 0; padding: 0 11px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc;
  color: #0f172a; cursor: pointer; font-size: 11px; font-weight: 850;
}
.observation-daily-extremes-button:hover,
.observation-daily-extremes-button.is-active {
  border-color: #3b82f6; background: #eff6ff; color: #1d4ed8;
}
.observation-daily-extremes-button > span:last-child { font-size: 17px; transition: transform .16s ease; }
.observation-daily-extremes-button.is-active > span:last-child { transform: rotate(90deg); }
.observation-daily-extremes-panel {
  margin-top: 6px; padding: 9px; border: 1px solid #bfdbfe; border-radius: 10px;
  background: rgba(239,246,255,.9);
}
.observation-daily-extremes-panel.is-hidden { display: none; }
.observation-daily-extremes-panel label { display: grid; gap: 5px; }
.observation-daily-extremes-panel label > span {
  color: #334155; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .03em;
}
.observation-daily-extremes-panel select {
  width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid #bfdbfe;
  border-radius: 8px; background: #fff; color: #0f172a; font-size: 10.5px; font-weight: 750;
}
.observation-daily-extremes-panel small {
  display: block; margin-top: 6px; color: #64748b; font-size: 8.5px; line-height: 1.35;
}
.observation-computation-time {
  position: fixed; z-index: 1002; left: 50%; bottom: 86px; max-width: min(860px, calc(100vw - 34px));
  transform: translateX(-50%); padding: 6px 12px; border: 1px solid rgba(148,163,184,.5);
  border-radius: 10px; background: rgba(15,23,42,.92); color: #fff;
  box-shadow: 0 5px 18px rgba(15,23,42,.24); backdrop-filter: blur(10px);
  font-size: 10.5px; font-weight: 800; line-height: 1.25; text-align: center;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #000; pointer-events: none;
}
.observation-computation-time.is-hidden,
.observation-computation-time[hidden] { display: none !important; }
/* DOM fallback markers use the same ordinary border as before; national extrema
   are painted by the canvas layer as blue/red/pink borders or rings. */
.observation-value-marker {
  border: 2px solid rgba(15,23,42,.78) !important;
  box-shadow: inset 0 0 0 .8px rgba(255,255,255,.92), 0 2px 6px rgba(15,23,42,.22) !important;
}
.observation-value-marker.has-extremes { height: auto; min-height: 0; max-width: none; display: flex; }
.observation-value-marker .observation-extreme-values { display: none !important; }
@media (max-width: 820px) {
  .observation-computation-time {
    bottom: calc(var(--phone-safe-bottom, 0px) + var(--phone-timeline-height, 80px) + 16px);
    max-width: calc(100vw - 18px); padding: 5px 9px; font-size: 9px;
  }
}

/* Observation-only historical slider. */
.observation-timeline-row span { min-width: 0; }
.observation-timeline-row small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.3;
}

/* v6.32.0 — map export, known-problem notice and expanded source credits. */
.information-panel-body {
  max-height: min(720px, calc(100dvh - 92px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.information-source-group { margin: 0 0 13px; padding: 10px 11px; border-left: 3px solid rgba(7,95,97,.28); border-radius: 0 11px 11px 0; background: rgba(236,254,255,.48); }
.information-source-group h3 { margin: 0 0 7px; color: #1f2b3d; font-size: 12px; line-height: 1.25; }
.information-source-group p + p { margin-top: 7px; }

.map-export-button[aria-expanded="true"] { border-color: rgba(37,99,235,.45); background: rgba(239,246,255,.97); }
.map-export-icon { font-size: 19px; }
.map-export-menu { width: 290px; padding: 11px; display: grid; gap: 9px; }
.map-export-heading { display: grid; gap: 3px; padding: 2px 2px 5px; }
.map-export-heading strong { color: #1f2b3d; font-size: 13px; }
.map-export-heading span { color: #64748b; font-size: 10px; line-height: 1.35; }
.map-export-field { min-height: 42px; padding: 7px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(148,163,184,.28); border-radius: 10px; background: rgba(248,250,252,.94); }
.map-export-field > span { color: #475569; font-size: 10px; font-weight: 800; }
.map-export-field select { min-width: 112px; height: 31px; padding: 0 27px 0 8px; border: 1px solid rgba(148,163,184,.38); border-radius: 8px; background: #fff; color: #243044; font-size: 11px; font-weight: 750; }
.map-export-download { width: 100%; min-height: 40px; padding: 8px 11px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; background: #2563eb; color: #fff; cursor: pointer; font-size: 11px; font-weight: 850; }
.map-export-download:hover { background: #1d4ed8; }
.map-export-download:disabled { cursor: wait; opacity: .65; }
.map-export-status { min-height: 28px; margin: 0; color: #64748b; font-size: 9px; line-height: 1.35; }
.map-export-status.is-error { color: #b91c1c; }

@keyframes wxradar-known-problems-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.12), 0 5px 18px rgba(80,20,28,.13); }
  50% { box-shadow: 0 0 0 5px rgba(239,68,68,.19), 0 0 20px 4px rgba(239,68,68,.22); }
}
.known-problems-button {
  border-color: rgba(220,38,38,.46) !important;
  background: rgba(254,226,226,.96) !important;
  color: #7f1d1d;
  animation: wxradar-known-problems-pulse 2.1s ease-in-out infinite;
}
.known-problems-button:hover { background: rgba(254,202,202,.98) !important; }
.known-problems-button[aria-expanded="true"] { border-color: rgba(185,28,28,.72) !important; background: #fecaca !important; }
.known-problems-icon { font-size: 19px; }
.known-problems-panel {
  position: fixed; z-index: 1032; top: auto;
  bottom: var(--known-problems-panel-bottom, 8px);
  left: var(--known-problems-panel-left, 221px);
  width: min(430px, calc(100vw - 245px));
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  border: 1px solid rgba(220,38,38,.35); border-radius: 17px;
  background: rgba(255,250,250,.985); box-shadow: 0 16px 44px rgba(95,20,30,.24); backdrop-filter: blur(18px);
}
.known-problems-panel[hidden], .known-problems-panel[aria-hidden="true"], .known-problems-panel.is-hidden { display: none !important; pointer-events: none !important; }
.known-problems-panel header { min-height: 58px; padding: 10px 10px 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(220,38,38,.20); background: rgba(254,226,226,.90); }
.known-problems-panel header > div { display: flex; align-items: center; gap: 9px; color: #7f1d1d; }
.known-problems-panel header strong { font-size: 16px; }
.known-problems-panel header button { width: 35px; height: 35px; border: 0; border-radius: 11px; background: rgba(255,255,255,.78); color: #7f1d1d; cursor: pointer; font-size: 23px; line-height: 1; }
.known-problems-body { max-height: min(580px, calc(100dvh - 92px)); padding: 13px 16px 16px; overflow-y: auto; scrollbar-width: thin; color: #4b2530; }
.known-problems-intro { margin: 0 0 10px; color: #7f1d1d; font-size: 11px; font-weight: 800; }
.known-problems-body ul { margin: 0; padding-left: 20px; display: grid; gap: 11px; }
.known-problems-body li { padding-left: 2px; font-size: 12px; line-height: 1.45; }

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .map-export-menu.is-mobile-portal { position: fixed; z-index: 1400; left: 10px; right: 10px; top: auto; bottom: 86px; width: auto; max-height: calc(100dvh - 108px); overflow-y: auto; }
  .known-problems-panel { left: 10px; right: 10px; top: 72px; bottom: 78px; width: auto; max-height: none; }
  .known-problems-body { max-height: calc(100dvh - 154px); }
}
@media (max-width: 420px) {
  .map-export-menu.is-mobile-portal { left: 7px; right: 7px; bottom: 80px; }
  .known-problems-panel { left: 7px; right: 7px; top: 65px; bottom: 74px; }
}
body.map-export-capture-mode #topbar,
body.map-export-capture-mode .tools-wrap,
body.map-export-capture-mode #legendDock,
body.map-export-capture-mode #timelinePanel,
body.map-export-capture-mode #generalWarningPanel,
body.map-export-capture-mode #observationDetailPanel,
body.map-export-capture-mode #crossSectionPanel,
body.map-export-capture-mode .measure-hint,
body.map-export-capture-mode .error-toast,
body.map-export-capture-mode .hover-value,
body.map-export-capture-mode .leaflet-control-zoom {
  visibility: hidden !important;
}

/* v6.32.0 — map-only export area controls and crop selector. */
.map-export-area-summary {
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(239,246,255,.78);
  color: #53657a;
  font-size: 9px;
  line-height: 1.35;
}
.map-export-draw-area {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(37,99,235,.34);
  border-radius: 9px;
  background: rgba(239,246,255,.98);
  color: #1d4ed8;
  cursor: crosshair;
  font-size: 10px;
  font-weight: 850;
}
.map-export-draw-area:hover,
.map-export-draw-area.has-selection { background: rgba(219,234,254,.98); }
.map-export-draw-area.is-hidden,
.map-export-draw-area[hidden] { display: none !important; }
.map-export-selection-hint {
  position: fixed;
  z-index: 1500;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  max-width: min(90vw, 520px);
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(5,12,22,.84);
  color: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.28);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}
.map-export-selection-hint.is-hidden,
.map-export-selection-hint[hidden] { display: none !important; }
#map.map-export-selecting { cursor: crosshair !important; }
#map.map-export-selecting * { cursor: crosshair !important; }
body.map-export-capture-mode #observationComputationTime,
body.map-export-capture-mode .map-export-selection-hint,
body.map-export-capture-mode .leaflet-control-container,
body.map-export-capture-mode .leaflet-popup-pane,
body.map-export-capture-mode .leaflet-tooltip-pane {
  visibility: hidden !important;
}

/* v6.32.0 — clean map export and footer composition. */
.map-export-download {
  border: 1px solid rgba(100,116,139,.35);
  background: #d7dce2;
  color: #111827;
}
.map-export-download:hover { background: #cbd2da; color: #0f172a; }
.map-export-download:disabled { background: #d7dce2; color: #111827; opacity: .68; }
body.map-export-capture-mode > :not(#map):not(script):not(style) {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.map-export-capture-mode #map,
body.map-export-capture-mode #map .leaflet-map-pane,
body.map-export-capture-mode #map .leaflet-pane {
  visibility: visible !important;
}
body.map-export-capture-mode #map,
body.map-export-capture-mode #map * { cursor: none !important; }
body.map-export-capture-mode #map .leaflet-control-container,
body.map-export-capture-mode #map .leaflet-popup-pane,
body.map-export-capture-mode #map .leaflet-tooltip-pane { visibility: hidden !important; }
/* r73: vector administrative borders are composed directly into export pixels.
   Hide Leaflet's transformed SVG copy so desktop and phone capture paths cannot
   double-render or omit it inconsistently. */
body.map-export-capture-mode #map .wxradar-county-boundary,
body.map-export-capture-mode #map .wxradar-uat-boundary { visibility: hidden !important; }

/* v6.32.0 — export branding and visible capture progress. */
.map-export-progress {
  position: fixed;
  z-index: 1550;
  left: 50%;
  bottom: 28px;
  width: min(420px, calc(100vw - 28px));
  padding: 10px 12px 9px;
  transform: translateX(-50%);
  border: 1px solid rgba(100,116,139,.34);
  border-radius: 13px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 12px 32px rgba(15,23,42,.20);
  color: #172033;
  pointer-events: none;
}
.map-export-progress.is-hidden,
.map-export-progress[hidden] { display: none !important; }
.map-export-progress-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #d8dee7;
}
.map-export-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #2563eb);
  transition: width .22s ease;
}
.map-export-progress-text {
  display: block;
  margin-top: 6px;
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
.map-export-progress.is-error .map-export-progress-bar { background: #dc2626; }
.map-export-progress.is-error .map-export-progress-text { color: #991b1b; }
body.map-export-capture-mode .map-export-progress { visibility: hidden !important; }
@media (max-width: 600px) {
  .map-export-progress { bottom: 84px; width: calc(100vw - 18px); }
}

/* v6.32.0 mobile export: two taps choose opposite corners. */
@media (pointer: coarse) and (max-width: 960px) {
  #map.map-export-selecting, #map.map-export-selecting * { cursor: default !important; }
  .map-export-selection-hint { bottom: calc(var(--phone-safe-bottom, 0px) + 106px); }
}

/* v6.32.0 — phone county outlines use full ADM1 geometry in a dedicated SVG
   renderer, so repeated zooming never resamples them as a low-resolution
   canvas. Keep the stroke screen-sharp during Leaflet zoom transforms. */
.wxradar-county-boundary {
  shape-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
}

/* v6.32.0 — national-scale phone radar labels stay compact.  The actual
   geographic marker anchor does not scale; only the badge does, preventing
   Leaflet's zoom transform from producing giant ROxxx pills while zooming out. */
@media (pointer: coarse) and (max-width: 960px) {
  .radar-site-label-icon {
    overflow: visible !important;
    transform-origin: center center;
  }
  .radar-site-badge {
    transform-origin: center center;
    will-change: transform;
  }
}

/* v6.32.0 — high-density multi-elevation GPU reflectivity volume. The viewer is
   event-driven: it has no permanent animation loop and drops resolution only
   while the user is actively rotating/zooming. */
.radar-3d-button-icon {
  width: 27px; height: 27px; display: grid; place-items: center;
  color: #64748b; font-size: 16px; font-weight: 950; line-height: 1;
  letter-spacing: -.08em; text-shadow: 0 1px 1px rgba(15,23,42,.25);
  transition: color .16s ease, filter .16s ease;
}
.radar-3d-button.is-enabled {
  border-color: rgba(37,99,235,.46); background: rgba(239,246,255,.96);
}
.radar-3d-button.is-enabled .radar-3d-button-icon { color: #2563eb; filter: drop-shadow(0 0 5px rgba(37,99,235,.25)); }
.radar-3d-button.is-enabled .tool-status { color: #2563eb; }
.radar-3d-button.is-unavailable { opacity: .62; }

.radar-3d-viewer {
  position: fixed; z-index: 800; inset: 0; overflow: hidden;
  background: #111827; opacity: 1; visibility: visible;
  transition: opacity .14s ease, visibility .14s ease;
  user-select: none; -webkit-user-select: none;
}
.radar-3d-viewer.is-hidden,
.radar-3d-viewer[hidden] { display: none !important; opacity: 0; visibility: hidden; }
.radar-3d-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  border: 0; outline: 0; cursor: grab; touch-action: none;
  image-rendering: auto; contain: strict;
}
.radar-3d-canvas:active { cursor: grabbing; }
.radar-3d-hud {
  position: absolute; top: 106px; left: 224px; min-width: 230px; max-width: min(440px, calc(100vw - 330px));
  padding: 10px 13px; display: grid; gap: 4px;
  border: 1px solid rgba(148,163,184,.34); border-radius: 14px;
  background: rgba(15,23,42,.82); color: #f8fafc;
  box-shadow: 0 12px 36px rgba(0,0,0,.28); backdrop-filter: blur(13px);
  pointer-events: none;
}
.radar-3d-hud strong { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.radar-3d-hud-mark {
  padding: 3px 5px 3px 4px; border-radius: 6px; background: #2563eb;
  color: #fff; font-size: 10px; font-weight: 950; letter-spacing: -.06em;
}
.radar-3d-status { color: #bfdbfe; font-size: 10px; font-weight: 780; }
.radar-3d-status.is-loading::before {
  content: ""; width: 9px; height: 9px; margin-right: 6px; display: inline-block;
  border: 2px solid rgba(191,219,254,.35); border-top-color: #60a5fa; border-radius: 50%;
  vertical-align: -1px; animation: radar-spin .72s linear infinite;
}
.radar-3d-status.is-error { color: #fecaca; }
.radar-3d-hud small { color: #cbd5e1; font-size: 8.5px; line-height: 1.3; }
.radar-3d-opacity-control {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px;
  margin-top: 4px; padding-top: 7px; border-top: 1px solid rgba(148,163,184,.22);
  color: #e2e8f0; font-size: 9px; font-weight: 760; pointer-events: auto;
}
.radar-3d-opacity-control output {
  color: #93c5fd; font-variant-numeric: tabular-nums; font-weight: 850;
}
.radar-3d-opacity-control input {
  grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #3b82f6; cursor: pointer;
}
.radar-3d-opacity-control input:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.radar-3d-interaction-help {
  position: absolute; z-index: 1; left: 50%; bottom: 89px; transform: translateX(-50%);
  padding: 7px 11px; border: 1px solid rgba(148,163,184,.25); border-radius: 999px;
  background: rgba(15,23,42,.72); color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,.20);
  backdrop-filter: blur(9px); pointer-events: none; white-space: nowrap;
  font-size: 9px; font-weight: 720;
}
.radar-3d-reset {
  position: absolute; z-index: 2; top: 108px; right: 18px; width: 42px; height: 42px;
  border: 1px solid rgba(148,163,184,.36); border-radius: 13px;
  background: rgba(15,23,42,.80); color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,.24);
  cursor: pointer; font-size: 23px; line-height: 1; backdrop-filter: blur(10px);
}
.radar-3d-reset:hover { border-color: rgba(96,165,250,.62); color: #60a5fa; }
.radar-3d-compass {
  position: absolute; z-index: 1; top: 164px; right: 25px; width: 28px; height: 28px;
  display: grid; place-items: center; color: #f8fafc; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); transform-origin: 50% 50%;
}
.radar-3d-compass span { position: absolute; top: -9px; font-size: 9px; font-weight: 900; }
.radar-3d-compass i {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 17px solid #ef4444; transform: translateY(-1px);
}
.radar-3d-map-credit {
  position: absolute; left: 12px; bottom: 78px; color: rgba(226,232,240,.78);
  pointer-events: none; font-size: 7px; text-shadow: 0 1px 2px #000;
}
body.radar-3d-active #map { visibility: hidden; }
body.radar-3d-active > .attribution-note { display: none; }

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .radar-3d-button-icon { grid-column: 1; grid-row: 1; width: 26px; height: 26px; font-size: 15px; }
  .radar-3d-hud {
    top: calc(var(--phone-safe-top) + 72px); left: calc(var(--phone-safe-left) + 7px);
    min-width: 0; max-width: calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 75px);
    padding: 8px 10px; border-radius: 12px;
  }
  .radar-3d-hud strong { font-size: 11px; }
  .radar-3d-status { font-size: 8.5px; }
  .radar-3d-hud small { font-size: 7.5px; }
  .radar-3d-opacity-control { font-size: 8px; padding-top: 5px; }
  .radar-3d-reset { top: calc(var(--phone-safe-top) + 74px); right: calc(var(--phone-safe-right) + 9px); width: 40px; height: 40px; }
  .radar-3d-compass { top: calc(var(--phone-safe-top) + 128px); right: calc(var(--phone-safe-right) + 16px); }
  .radar-3d-interaction-help { bottom: var(--phone-panel-bottom); max-width: calc(100vw - 24px); font-size: 8px; }
  .radar-3d-map-credit { left: calc(var(--phone-safe-left) + 8px); bottom: calc(var(--phone-safe-bottom) + 100px); font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .radar-3d-viewer, .radar-3d-button-icon { transition: none; }
}

/* v6.32.0 — anti-banded 3D interaction, light scene and distraction-free
   controls. These transitions affect only interface chrome; the WebGL canvas
   remains event-driven and receives no permanent animation loop. */
.radar-3d-viewer.is-touch-tilting .radar-3d-canvas { cursor: ns-resize; }
.radar-3d-hud,
.radar-3d-reset,
.radar-3d-compass,
.radar-3d-interaction-help,
.radar-3d-map-credit {
  transition: top .2s ease, left .2s ease, right .2s ease, bottom .2s ease,
    opacity .18s ease, background-color .18s ease, border-color .18s ease,
    color .18s ease;
}
.radar-3d-theme-toggle {
  width: 100%; min-height: 31px; margin-top: 3px; padding: 5px 7px;
  display: grid; grid-template-columns: 18px minmax(0,1fr) 30px;
  align-items: center; gap: 6px;
  border: 1px solid rgba(148,163,184,.25); border-radius: 9px;
  background: rgba(30,41,59,.72); color: #dbeafe;
  cursor: pointer; pointer-events: auto; text-align: left;
  font-size: 8.5px; line-height: 1; transition: background .16s ease, border-color .16s ease;
}
.radar-3d-theme-toggle > span { font-size: 14px; color: #fbbf24; }
.radar-3d-theme-toggle > b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.radar-3d-theme-toggle > i {
  position: relative; width: 28px; height: 16px; display: block;
  border-radius: 999px; background: #475569; transition: background .18s ease;
}
.radar-3d-theme-toggle > i::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.32);
  transition: transform .18s ease;
}
.radar-3d-theme-toggle.is-enabled { border-color: rgba(96,165,250,.55); background: rgba(30,64,175,.27); }
.radar-3d-theme-toggle.is-enabled > i { background: #3b82f6; }
.radar-3d-theme-toggle.is-enabled > i::after { transform: translateX(12px); }

.radar-3d-focus-button {
  position: absolute; z-index: 4; top: 266px; left: 224px; width: 38px; height: 38px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(148,163,184,.38); border-radius: 12px;
  background: rgba(15,23,42,.84); color: #dbeafe;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(10px);
  cursor: pointer; transition: top .2s ease, left .2s ease, bottom .2s ease,
    background .18s ease, border-color .18s ease, transform .18s ease;
}
.radar-3d-focus-button:hover { border-color: rgba(96,165,250,.68); background: rgba(30,41,59,.94); }
.radar-3d-focus-button > span {
  width: 11px; height: 11px; margin-top: -5px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg); transition: transform .22s cubic-bezier(.2,.75,.25,1.2), margin .22s ease;
}
body.radar-3d-focus-mode .radar-3d-focus-button > span {
  margin-top: 5px; transform: rotate(225deg);
}

/* v6.32.0 — value-specific reflectivity transfer function. */
.radar-3d-transfer-button {
  position: absolute; z-index: 4; top: 312px; left: 224px; width: 38px; height: 38px;
  display: grid; place-items: center; padding: 7px;
  border: 1px solid rgba(148,163,184,.38); border-radius: 12px;
  background: rgba(15,23,42,.84); color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(10px);
  cursor: pointer; transition: top .2s ease, left .2s ease, background .18s ease,
    border-color .18s ease, color .18s ease, transform .18s ease;
}
.radar-3d-transfer-button svg {
  width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.radar-3d-transfer-button svg circle { fill: #0f172a; stroke-width: 1.7; }
.radar-3d-transfer-button:hover,
.radar-3d-transfer-button.is-open {
  border-color: rgba(56,189,248,.72); background: rgba(8,47,73,.94); color: #7dd3fc;
}
.radar-3d-transfer-button:focus-visible,
.radar-3d-focus-button:focus-visible { outline: 3px solid rgba(56,189,248,.72); outline-offset: 2px; }

.radar-3d-transfer-panel {
  position: absolute; z-index: 7; left: 50%; top: 50%; width: min(730px, calc(100vw - 42px));
  max-height: calc(100vh - 42px); overflow: auto; transform: translate(-50%, -50%);
  padding: 15px; border: 1px solid rgba(148,163,184,.34); border-radius: 20px;
  background: rgba(10,17,31,.95); color: #f8fafc;
  box-shadow: 0 28px 90px rgba(0,0,0,.52); backdrop-filter: blur(18px);
  user-select: none; -webkit-user-select: none;
}
.radar-3d-transfer-panel[hidden] { display: none !important; }
.radar-3d-transfer-panel > header {
  display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; align-items: center; gap: 10px;
}
.radar-3d-transfer-symbol {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(145deg,#2563eb,#0891b2); color: #fff;
  font: 900 18px/1 ui-rounded,Spotify Mix, DM Sans, system-ui,sans-serif; box-shadow: 0 6px 16px rgba(37,99,235,.28);
}
.radar-3d-transfer-panel header strong { display: block; font-size: 14px; letter-spacing: -.01em; }
.radar-3d-transfer-panel header small { display: block; margin-top: 2px; color: #94a3b8; font-size: 9.5px; line-height: 1.35; }
.radar-3d-transfer-panel header button {
  width: 32px; height: 32px; padding: 0; border: 1px solid rgba(148,163,184,.24); border-radius: 10px;
  background: rgba(30,41,59,.78); color: #cbd5e1; cursor: pointer; font-size: 21px; line-height: 1;
}
.radar-3d-transfer-panel header button:hover { border-color: rgba(56,189,248,.58); color: #7dd3fc; }
.radar-3d-transfer-readout {
  margin: 13px 3px 5px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: #94a3b8; font-size: 9px; font-weight: 720;
}
.radar-3d-transfer-readout output {
  padding: 4px 8px; border: 1px solid rgba(56,189,248,.24); border-radius: 999px;
  background: rgba(14,116,144,.15); color: #7dd3fc; font-variant-numeric: tabular-nums; font-weight: 850;
}
.radar-3d-transfer-chart-wrap {
  overflow: hidden; border: 1px solid rgba(148,163,184,.16); border-radius: 15px;
  background: linear-gradient(180deg,rgba(30,41,59,.52),rgba(15,23,42,.22));
}
.radar-3d-transfer-chart {
  width: 100%; height: auto; aspect-ratio: 720 / 250;
  display: block; overflow: visible; touch-action: none; cursor: crosshair;
}
.radar-3d-transfer-plot-bg { fill: rgba(2,6,23,.48); stroke: rgba(148,163,184,.13); }
.radar-3d-transfer-grid { stroke: rgba(148,163,184,.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.radar-3d-transfer-grid.is-vertical { stroke-dasharray: 3 6; }
.radar-3d-transfer-y-label,
.radar-3d-transfer-point-value {
  fill: #94a3b8; font: 700 10px/1 Spotify Mix, DM Sans, system-ui,sans-serif; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.radar-3d-transfer-point-value { fill: #e0f2fe; font-size: 9px; }
.radar-3d-transfer-area { fill: url(#radar3dTransferFill); pointer-events: none; }
.radar-3d-transfer-line {
  fill: none; stroke: #38bdf8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 5px rgba(14,165,233,.28)); pointer-events: none;
}
.radar-3d-transfer-hit { fill: transparent; cursor: ns-resize; }
.radar-3d-transfer-point {
  stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; cursor: ns-resize;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
.radar-3d-transfer-point:focus { outline: none; stroke: #7dd3fc; stroke-width: 4; }
.radar-3d-transfer-scale {
  position: relative; margin: 12px 4px 0; padding: 0 4px 17px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(96,165,250,.55) transparent;
}
.radar-3d-transfer-colours,
.radar-3d-transfer-clevs { min-width: 650px; }
.radar-3d-transfer-colours {
  height: 18px; display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,.26); border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.18);
}
.radar-3d-transfer-colours i { display: block; min-width: 0; }
.radar-3d-transfer-clevs { position: relative; height: 22px; color: #cbd5e1; font: 680 7px/1 Spotify Mix, DM Sans, system-ui,sans-serif; }
.radar-3d-transfer-clevs span { position: absolute; top: 7px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.radar-3d-transfer-clevs span:first-child { transform: none; }
.radar-3d-transfer-clevs span:last-child { transform: translateX(-100%); }
.radar-3d-transfer-unit { position: absolute; right: 4px; bottom: 0; color: #64748b; font-size: 7px; font-weight: 800; }
.radar-3d-transfer-panel > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }
.radar-3d-transfer-panel > footer button {
  min-height: 34px; padding: 7px 13px; border: 1px solid rgba(148,163,184,.28); border-radius: 10px;
  background: rgba(30,41,59,.86); color: #e2e8f0; cursor: pointer; font-size: 10px; font-weight: 790;
}
.radar-3d-transfer-panel > footer button:last-child { border-color: #2563eb; background: #2563eb; color: #fff; }
.radar-3d-transfer-panel > footer button:hover { border-color: rgba(56,189,248,.72); }

.radar-3d-viewer.is-light-scene .radar-3d-hud {
  border-color: rgba(100,116,139,.34); background: rgba(248,250,252,.88);
  color: #172033; box-shadow: 0 12px 34px rgba(15,23,42,.18);
}
.radar-3d-viewer.is-light-scene .radar-3d-status { color: #1d4ed8; }
.radar-3d-viewer.is-light-scene .radar-3d-hud small { color: #475569; }
.radar-3d-viewer.is-light-scene .radar-3d-opacity-control {
  border-top-color: rgba(100,116,139,.25); color: #334155;
}
.radar-3d-viewer.is-light-scene .radar-3d-opacity-control output { color: #1d4ed8; }
.radar-3d-viewer.is-light-scene .radar-3d-theme-toggle {
  border-color: rgba(100,116,139,.28); background: rgba(226,232,240,.78); color: #334155;
}
.radar-3d-viewer.is-light-scene .radar-3d-theme-toggle.is-enabled {
  border-color: rgba(37,99,235,.42); background: rgba(219,234,254,.92); color: #1e3a8a;
}
.radar-3d-viewer.is-light-scene .radar-3d-reset,
.radar-3d-viewer.is-light-scene .radar-3d-focus-button,
.radar-3d-viewer.is-light-scene .radar-3d-transfer-button,
.radar-3d-viewer.is-light-scene .radar-3d-interaction-help {
  border-color: rgba(100,116,139,.34); background: rgba(248,250,252,.88);
  color: #334155; box-shadow: 0 8px 22px rgba(15,23,42,.16);
}
.radar-3d-viewer.is-light-scene .radar-3d-transfer-button svg circle { fill: #f8fafc; }
.radar-3d-viewer.is-light-scene .radar-3d-transfer-button.is-open {
  border-color: rgba(2,132,199,.48); background: rgba(224,242,254,.94); color: #0369a1;
}
.radar-3d-viewer.is-light-scene .radar-3d-transfer-panel {
  border-color: rgba(100,116,139,.28); background: rgba(248,250,252,.96); color: #172033;
  box-shadow: 0 28px 80px rgba(15,23,42,.24);
}
.radar-3d-viewer.is-light-scene .radar-3d-transfer-panel header small,
.radar-3d-viewer.is-light-scene .radar-3d-transfer-readout { color: #64748b; }
.radar-3d-viewer.is-light-scene .radar-3d-transfer-panel header button,
.radar-3d-viewer.is-light-scene .radar-3d-transfer-panel > footer button {
  border-color: rgba(100,116,139,.25); background: rgba(226,232,240,.84); color: #334155;
}
.radar-3d-viewer.is-light-scene .radar-3d-transfer-panel > footer button:last-child { border-color: #2563eb; background: #2563eb; color: #fff; }
.radar-3d-viewer.is-light-scene .radar-3d-transfer-chart-wrap { background: linear-gradient(180deg,#eef6ff,#f8fafc); }
.radar-3d-viewer.is-light-scene .radar-3d-transfer-plot-bg { fill: rgba(255,255,255,.72); stroke: rgba(100,116,139,.18); }
.radar-3d-viewer.is-light-scene .radar-3d-transfer-grid { stroke: rgba(71,85,105,.17); }
.radar-3d-viewer.is-light-scene .radar-3d-transfer-y-label { fill: #64748b; }
.radar-3d-viewer.is-light-scene .radar-3d-transfer-point-value { fill: #075985; }
.radar-3d-viewer.is-light-scene .radar-3d-transfer-clevs { color: #475569; }
.radar-3d-viewer.is-light-scene .radar-3d-compass { color: #172033; filter: drop-shadow(0 1px 2px rgba(255,255,255,.8)); }
.radar-3d-viewer.is-light-scene .radar-3d-map-credit { color: rgba(15,23,42,.72); text-shadow: 0 1px 2px #fff; }

body.radar-3d-active #topbar,
body.radar-3d-active .tools-wrap,
body.radar-3d-active #timelinePanel,
body.radar-3d-active #legendDock {
  transition: opacity .2s ease, transform .2s ease, left .2s ease, right .2s ease,
    bottom .2s ease, height .2s ease, visibility 0s linear 0s;
}
body.radar-3d-focus-mode #topbar {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-18px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
body.radar-3d-focus-mode .tools-wrap {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-22px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
body.radar-3d-focus-mode .radar-3d-hud { top: 18px; left: 70px; }
body.radar-3d-focus-mode .radar-3d-focus-button { top: 18px; left: 18px; }
body.radar-3d-focus-mode .radar-3d-transfer-button { top: 64px; left: 18px; }
body.radar-3d-focus-mode .radar-3d-interaction-help { opacity: 0; pointer-events: none; }

body.radar-3d-focus-mode #timelinePanel {
  left: max(18px, 14vw); right: max(18px, 14vw); bottom: 14px;
  min-height: 0; height: 48px; padding: 7px 11px;
  display: grid; grid-template-columns: minmax(120px,1fr) minmax(155px,auto);
  grid-template-rows: 1fr; gap: 12px; border-radius: 16px;
}
body.radar-3d-focus-mode #timelinePanel > button {
  position: absolute; opacity: 0; visibility: hidden; pointer-events: none;
}
body.radar-3d-focus-mode #timelineSlider {
  grid-column: 1; grid-row: 1; width: 100%; min-width: 0; margin: 0;
}
body.radar-3d-focus-mode #frameTime {
  grid-column: 2; grid-row: 1; min-width: 0; display: grid; place-items: center;
  font-size: 10px; line-height: 1.15; text-align: center;
}
body.radar-3d-focus-mode #frameTime > :not(#radarFrameTime) { display: none !important; }
body.radar-3d-focus-mode #radarFrameTime { display: block !important; }

body.radar-3d-focus-mode #legendDock {
  right: 18px; bottom: 72px; max-width: min(190px, calc(100vw - 36px));
  opacity: 1; transform: none;
}
body.radar-3d-focus-mode #mobileLegendButton { display: none !important; }
body.radar-3d-focus-mode #legendControls { display: flex !important; padding: 0; background: transparent; border: 0; box-shadow: none; }
body.radar-3d-focus-mode #legendControls > :not(#reflectivityLegend) { display: none !important; }
body.radar-3d-focus-mode #reflectivityLegend { display: block !important; width: 190px; }

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .radar-3d-interaction-help { display: none !important; }
  .radar-3d-theme-toggle { min-height: 29px; font-size: 8px; }
  .radar-3d-focus-button {
    top: auto; left: calc(var(--phone-safe-left) + 10px);
    bottom: calc(var(--phone-panel-bottom) + 18px); width: 38px; height: 38px;
  }
  .radar-3d-transfer-button {
    top: calc(var(--phone-safe-top) + 220px); left: calc(var(--phone-safe-left) + 10px);
    bottom: auto; width: 38px; height: 38px;
  }
  .radar-3d-transfer-panel {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: min(480px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 12px));
    max-height: calc(100vh - var(--phone-safe-top) - var(--phone-safe-bottom) - 14px);
    max-height: calc(100dvh - var(--phone-safe-top) - var(--phone-safe-bottom) - 14px);
    padding: 10px; border-radius: 16px; transform: translate(-50%, -50%);
    overflow-x: hidden; overscroll-behavior: contain;
  }
  .radar-3d-transfer-panel > header { grid-template-columns: 30px minmax(0,1fr) 30px; gap: 8px; }
  .radar-3d-transfer-symbol { width: 29px; height: 29px; font-size: 16px; }
  .radar-3d-transfer-panel header strong { font-size: 12px; }
  .radar-3d-transfer-panel header small { font-size: 8px; }
  .radar-3d-transfer-readout { margin: 8px 2px 4px; }
  .radar-3d-transfer-chart { width: 100%; height: auto; aspect-ratio: 720 / 250; }
  .radar-3d-transfer-scale {
    margin: 8px 2px 0; padding: 0 2px 12px; overflow: visible;
    scrollbar-width: none;
  }
  .radar-3d-transfer-colours,
  .radar-3d-transfer-clevs { width: 100%; min-width: 0; }
  .radar-3d-transfer-colours { height: 14px; border-radius: 5px; }
  .radar-3d-transfer-clevs { height: 18px; font-size: 6px; }
  .radar-3d-transfer-clevs span { top: 5px; }
  .radar-3d-transfer-unit { right: 2px; font-size: 6px; }
  .radar-3d-transfer-panel > footer {
    position: static; margin: 3px 0 0; padding: 0; background: transparent;
  }
  .radar-3d-transfer-panel > footer button { min-height: 31px; padding: 6px 11px; font-size: 9px; }

  /* The editor is a modal workspace on phones. Hide map chrome while it is
     open so neither the compact legend nor the bottom controls can cover the
     curve, colour scale or actions. Everything returns when the panel closes. */
  body.radar-3d-transfer-open #topbar,
  body.radar-3d-transfer-open .tools-wrap,
  body.radar-3d-transfer-open #mobileLegendButton,
  body.radar-3d-transfer-open #timelinePanel,
  body.radar-3d-transfer-open #legendDock {
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  }
  body.radar-3d-focus-mode .radar-3d-hud {
    top: calc(var(--phone-safe-top) + 7px); left: calc(var(--phone-safe-left) + 57px);
    max-width: calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 116px);
  }
  body.radar-3d-focus-mode .radar-3d-reset {
    top: calc(var(--phone-safe-top) + 9px); right: calc(var(--phone-safe-right) + 8px);
  }
  body.radar-3d-focus-mode .radar-3d-compass {
    top: calc(var(--phone-safe-top) + 63px); right: calc(var(--phone-safe-right) + 15px);
  }
  body.radar-3d-focus-mode .radar-3d-focus-button {
    top: auto; left: calc(var(--phone-safe-left) + 8px);
    bottom: calc(var(--phone-safe-bottom) + 68px);
  }
  body.radar-3d-focus-mode .radar-3d-transfer-button {
    top: calc(var(--phone-safe-top) + 158px); left: calc(var(--phone-safe-left) + 8px); bottom: auto;
  }
  body.radar-3d-focus-mode #timelinePanel {
    left: calc(var(--phone-safe-left) + 7px); right: calc(var(--phone-safe-right) + 7px);
    bottom: calc(var(--phone-safe-bottom) + 6px); height: 56px; padding: 6px 9px;
    grid-template-columns: minmax(0,1fr); grid-template-rows: 25px 17px; gap: 2px;
  }
  body.radar-3d-focus-mode #timelineSlider { grid-column: 1; grid-row: 1; }
  body.radar-3d-focus-mode #frameTime {
    grid-column: 1; grid-row: 2; font-size: 8.5px; white-space: nowrap;
  }
  body.radar-3d-focus-mode #legendDock {
    right: calc(var(--phone-safe-right) + 7px);
    bottom: calc(var(--phone-safe-bottom) + 69px); max-width: 155px;
  }
  body.radar-3d-focus-mode #reflectivityLegend { width: 155px; padding: 8px; }
  body.radar-3d-focus-mode .radar-3d-map-credit {
    bottom: calc(var(--phone-safe-bottom) + 67px);
  }
}

/* Narrow touch screens need wider vertical separation between the middle
   visibility/tendency units and the lower dew-point/precipitation values.
   These declarations intentionally come after the general large-plot rules. */
@media (pointer: coarse) and (max-width: 430px) {
  .synop-plot-card:not(.is-large) .plot-dew-point,
  .synop-plot-card:not(.is-large) .plot-precipitation { bottom: 1px; }

  .synop-plot-card.is-large .plot-value {
    font-size: 14.5px;
    line-height: .95;
  }
  .synop-plot-card.is-large .plot-value small {
    margin-top: 2px;
    font-size: 7.5px;
  }
  .synop-plot-card.is-large .plot-temperature,
  .synop-plot-card.is-large .plot-pressure { top: 11px; }
  .synop-plot-card.is-large .plot-visibility,
  .synop-plot-card.is-large .plot-tendency { top: 45px; }
  .synop-plot-card.is-large .plot-dew-point,
  .synop-plot-card.is-large .plot-precipitation { bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .radar-3d-hud,
  .radar-3d-reset,
  .radar-3d-compass,
  .radar-3d-interaction-help,
  .radar-3d-map-credit,
  .radar-3d-theme-toggle,
  .radar-3d-focus-button,
  .radar-3d-focus-button > span,
  .radar-3d-transfer-button,
  .radar-3d-transfer-panel,
  body.radar-3d-active #topbar,
  body.radar-3d-active .tools-wrap,
  body.radar-3d-active #timelinePanel,
  body.radar-3d-active #legendDock { transition: none !important; }
}

/* Desktop density is calibrated to the successful 75%-zoom reference while
   keeping the browser at 100%. Fluid widths and a vertically scrollable tool
   rail preserve that arrangement on common laptop and workstation screens. */
@media (min-width: 821px) {
  .topbar {
    top: 6px; left: 7px; right: 7px; min-height: 58px; height: 58px;
    padding: 6px 9px; gap: 7px; border-radius: 20px; overflow: hidden;
  }
  .brand {
    min-width: clamp(190px, 22vw, 315px); max-width: clamp(190px, 22vw, 315px);
    gap: 9px; margin-right: auto;
  }
  .brand-logo { width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; }
  .brand-copy { gap: 7px; }
  .brand h1 { font-size: 17px; }
  .brand-author { font-size: clamp(6.5px, .5vw, 9px); }

  .control, .theme-control, .map-box { height: 43px; border-radius: 13px; }
  .select-control {
    min-width: clamp(145px, 13.5vw, 205px); height: 43px; padding: 6px 9px;
    grid-template-columns: auto minmax(0,1fr); gap: 7px;
  }
  .parameter-control { min-width: clamp(205px, 19vw, 285px); }
  .elevation-control { min-width: clamp(130px, 12vw, 170px); }
  .select-control > span { font-size: 8px; }
  select { font-size: 11px; }
  .theme-control { height: 43px; padding: 4px; }
  .theme-control button { padding: 0 clamp(7px, .8vw, 12px); border-radius: 9px; font-size: 10px; }
  .boundary-button { min-width: 116px; height: 43px; padding: 0 10px; gap: 7px; font-size: 10px; }
  .switch-dot { width: 32px; height: 19px; padding: 2px; }
  .switch-dot::after { width: 15px; height: 15px; }
  .switch-dot.on::after { transform: translateX(13px); }
  .switch-dot.partial::after { transform: translateX(6.5px); }

  .tools-wrap {
    top: 66px; left: 20px; width: 138px; gap: 5px;
    max-height: calc(100dvh - 122px); overflow-x: visible; overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: none; padding: 0 0 3px;
  }
  .tools-wrap::-webkit-scrollbar { display: none; }
  .tools-button,
  .tools-button:has(> .tool-chevron) {
    width: 138px; min-height: 43px; height: 43px; padding: 5px 8px;
    grid-template-columns: 22px minmax(0,1fr) auto 10px; gap: 5px;
    border-radius: 13px; font-size: 10px;
  }
  .tools-button:not(:has(> .tool-chevron)) { grid-template-columns: 22px minmax(0,1fr) auto; }
  .tool-button-icon, .tools-lines { font-size: 14px; }
  .tool-button-label { line-height: 1.08; }
  .tool-chevron { font-size: 17px; }
  .tool-status { font-size: 7px; }
  .tools-wrap .warning-button-icon,
  .tools-wrap .radar-button-icon,
  .tools-wrap .satellite-button-icon,
  .tools-wrap .storm-button-icon,
  .tools-wrap .location-button-icon { width: 21px; height: 21px; }
  .tools-wrap .weather-observations-icon { width: 22px; height: 22px; }
  .tools-wrap .weather-observations-icon img { width: 31px; height: 31px; }

  .timeline-panel {
    left: 8px; right: 8px; bottom: 7px; min-height: 45px; height: 45px;
    padding: 6px 8px; gap: 7px; border-radius: 15px;
  }
  .timeline-panel button {
    height: 31px; min-width: 33px; padding: 0 9px; border-radius: 9px; font-size: 10px;
  }
  .timeline-frame-times { min-width: 250px; font-size: 8px; gap: 0; }
  .legend-dock { right: 10px; bottom: 59px; gap: 6px; }
  .legend { width: min(var(--legend-width, 270px), calc(100vw - 40px)); max-width: 100%; min-width: 190px; box-sizing: border-box; padding: 8px; border-radius: 11px; }
  .transparency-control { width: 124px; min-height: 50px; padding: 7px 8px; gap: 5px; border-radius: 11px; }
  .transparency-header { font-size: 8px; }
  .error-toast { top: 70px; }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .brand { min-width: 145px; max-width: 165px; }
  .brand-author { display: none; }
  .brand h1 { font-size: 15px; }
  .brand-logo { width: 36px; height: 36px; flex-basis: 36px; }
  .select-control { min-width: 135px; }
  .parameter-control { min-width: 185px; }
  .select-control > span { display: none; }
  .select-control { grid-template-columns: minmax(0,1fr); }
  .theme-control button { padding: 0 6px; font-size: 8.5px; }
  .boundary-button { min-width: 92px; padding: 0 7px; font-size: 8.5px; }
}

@media (min-width: 821px) and (max-width: 960px) {
  .topbar { padding-left: 6px; padding-right: 6px; gap: 4px; }
  .brand { min-width: 112px; max-width: 122px; gap: 5px; }
  .brand-logo { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
  .brand h1 { font-size: 13px; }
  .select-control { min-width: 108px; padding-left: 6px; padding-right: 6px; }
  .parameter-control { min-width: 150px; }
  .elevation-control { min-width: 104px; }
  select { font-size: 9px; }
  .theme-control button { padding: 0 3px; font-size: 7.5px; }
  .boundary-button { min-width: 72px; padding: 0 5px; gap: 4px; font-size: 7.5px; }
  .switch-dot { width: 28px; }
}

@media (min-width: 821px) and (max-height: 800px) {
  .tools-wrap { gap: 4px; max-height: calc(100dvh - 116px); }
  .tools-button,
  .tools-button:has(> .tool-chevron) { min-height: 39px; height: 39px; padding-top: 4px; padding-bottom: 4px; }
}

/* v6.32.16 — precipitation legends use equal-width colour classes and a
   boundary-aligned two-row label layout. The numerical class limits remain
   non-linear; only the visual widths are equal so tiny low-end intervals are
   as legible as the large high-end intervals. */
.legend.precipitation-legend {
  --legend-width: 720px;
  width: min(var(--legend-width), calc(100vw - 40px));
  min-width: min(520px, calc(100vw - 40px));
  padding: 10px 12px 9px;
}
.legend.precipitation-legend .legend-title {
  margin-bottom: 1px;
  font-size: 12px;
}
.legend.precipitation-legend .legend-bar {
  height: 14px;
  margin-top: 17px;
  border-radius: 5px;
}
.legend.precipitation-legend .legend-values {
  height: 16px;
  margin-top: 4px;
  font-size: 9px;
  line-height: 1;
}
.legend.precipitation-legend .legend-values span {
  padding: 0 1px;
}
.legend.precipitation-legend .legend-values .legend-value-above {
  top: -34px;
}
.legend.precipitation-legend .legend-values .legend-value-below {
  top: 0;
}

/* On phones the precipitation scale is always visible immediately to the left
   of Layers while a precipitation product is selected. Opening Layers restores
   the normal full-width opacity/legend drawer; closing it puts the scale back
   beside the button. */
@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .legend-dock.precipitation-legend-active:not(.mobile-expanded) {
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    bottom: var(--phone-panel-bottom);
    max-width: none;
    width: auto;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 7px;
  }
  .legend-dock.precipitation-legend-active:not(.mobile-expanded) .legend-controls {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .legend-dock.precipitation-legend-active:not(.mobile-expanded) .legend-controls > :not(#reflectivityLegend) {
    display: none !important;
  }
  .legend-dock.precipitation-legend-active:not(.mobile-expanded) #reflectivityLegend {
    display: block !important;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 6px 7px 5px;
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
  .legend-dock.precipitation-legend-active:not(.mobile-expanded) .mobile-legend-button {
    flex: 0 0 82px;
    min-width: 82px;
  }
  .legend.precipitation-legend .legend-title {
    margin-bottom: 0;
    font-size: 9px;
    line-height: 1.1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .legend.precipitation-legend .legend-bar {
    height: 11px;
    margin-top: 14px;
    border-radius: 4px;
  }
  .legend.precipitation-legend .legend-values {
    height: 12px;
    margin-top: 3px;
    font-size: 7.5px;
    font-weight: 800;
  }
  .legend.precipitation-legend .legend-values .legend-value-above {
    top: -28px;
  }
  .legend.precipitation-legend .legend-values .legend-value-below {
    top: 0;
  }
  .legend-dock.mobile-expanded .legend.precipitation-legend {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* Fixed Oradea precipitation comparison mode. */
.test-data-button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid rgba(90, 160, 255, .42); border-radius: 10px; padding: 9px 10px;
  background: rgba(22, 47, 82, .46); color: inherit; cursor: pointer;
}
.test-data-button:hover { background: rgba(30, 68, 112, .58); }
.test-data-button:disabled { cursor: progress; opacity: .78; }
.test-data-badge {
  flex: 0 0 auto; min-width: 42px; padding: 4px 6px; border-radius: 7px; text-align: center;
  font-weight: 800; font-size: 11px; letter-spacing: .04em; color: #fff; background: #356ea8;
}
.test-data-copy { min-width: 0; display: grid; gap: 2px; }
.test-data-copy strong { font-size: 13px; }
.test-data-copy small { font-size: 11px; opacity: .78; line-height: 1.25; }
.test-data-button.is-active { border-color: rgba(62, 210, 135, .82); background: rgba(25, 100, 71, .42); }
.test-data-button.is-active .test-data-badge { background: #168052; }
.test-data-button.is-preparing .test-data-badge { animation: test-data-pulse 1s ease-in-out infinite alternate; }
@keyframes test-data-pulse { from { opacity: .55; } to { opacity: 1; } }

@media (max-width: 520px) {
  .test-data-dataset-buttons { grid-template-columns: 1fr; }
  .test-data-dataset-choice { min-height: 48px; padding: 6px 54px 6px 7px; align-content: center; }
  .test-data-dataset-readiness { left: auto; right: 6px; bottom: 50%; transform: translateY(50%); }
  .test-data-dataset-select-fallback select { max-width: 190px; }
}

/* v6.32.16 r18 — compact controls, independent quick tools and collision-free
   desktop/mobile overlays. */
.tools-wrap > .general-tools-control { order: 1; }
.tools-wrap > #radarVisibilityButton { order: 2; }
.tools-wrap > #radar3dButton { order: 3; }
.tools-wrap > .satellite-control { order: 4; }
.tools-wrap > .lightning-control { order: 5; }
.tools-wrap > .warnings-overview-control { order: 6; }
.tools-wrap > .weather-observations-control { order: 7; }
.tools-wrap > .storm-tracking-control { order: 8; }
.tools-wrap > .drawing-tools-control { order: 9; }
.tools-wrap > #locationButton { order: 10; }
.tools-wrap > .map-export-control { order: 11; }
.tools-wrap > .known-problems-control { order: 12; }
.tools-wrap > .information-control { order: 13; }

.language-choice-control {
  display: grid; gap: 7px; padding: 8px;
  border: 1px solid rgba(148,163,184,.30); border-radius: 11px;
  background: rgba(248,250,252,.94);
}
.language-choice-control > span {
  color: #475569; font-size: 9px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .065em;
}
.language-choice-control > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.language-choice-control button {
  min-width: 0; min-height: 35px; padding: 5px 7px;
  border: 1px solid rgba(100,116,139,.30); border-radius: 9px;
  background: #e5e7eb; color: #475569; cursor: pointer;
  font-size: 10px; font-weight: 900; letter-spacing: .025em;
}
.language-choice-control button.is-selected,
.language-choice-control button[aria-pressed="true"] {
  border-color: #16a34a; background: #dcfce7; color: #166534;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.16);
}

.mobile-panel-close { display: none !important; }

.quick-map-tools {
  position: fixed; z-index: 1001; top: 66px; left: 166px;
  width: 148px; display: grid; gap: 5px;
}
.quick-map-tool {
  width: 148px; min-height: 43px; height: 43px; padding: 5px 9px;
  display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 7px;
  border: 1px solid rgba(100,116,139,.38); border-radius: 13px;
  background: rgba(229,231,235,.96); color: #475569;
  box-shadow: var(--shadow); backdrop-filter: blur(14px); cursor: pointer;
  text-align: left; font-size: 10px; font-weight: 800;
  transition: background .17s ease, border-color .17s ease, color .17s ease, transform .17s ease;
}
.quick-map-tool:active { transform: translateY(1px); }
.quick-map-tool-icon { display: grid; place-items: center; font-size: 19px; line-height: 1; }
.quick-map-tool-label { min-width: 0; line-height: 1.1; }
.quick-map-tool.is-enabled,
.quick-map-tool[aria-pressed="true"] {
  border-color: rgba(22,163,74,.72); background: rgba(220,252,231,.97); color: #166534;
}

/* r19: on desktop the active measure/cross-section instruction belongs below
   the complete two-button quick-tool stack, never underneath either button. */
@media (min-width: 961px), (min-width: 821px) and (min-height: 601px) {
  .measure-hint,
  .cross-section-hint {
    top: 164px; left: 166px; right: auto;
    max-width: min(430px, calc(100vw - 182px));
  }
}

.observation-computation-time {
  top: 70px; bottom: auto;
}

.attributions-control {
  position: fixed; z-index: 1002; left: 8px; bottom: 59px;
}
.attributions-button {
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(185,28,28,.38); border-radius: 12px;
  background: rgba(255,255,255,.96); box-shadow: var(--shadow);
  cursor: pointer; font-size: 22px; line-height: 1;
}
.attributions-button[aria-expanded="true"] { background: #fee2e2; border-color: rgba(185,28,28,.68); }
.attributions-panel {
  position: absolute; left: 0; bottom: 47px; width: min(610px, calc(100vw - 16px));
  padding: 9px 10px; display: grid; gap: 7px;
  border: 1px solid rgba(15,23,42,.20); border-radius: 12px;
  background: rgba(255,255,255,.98); color: #111827;
  box-shadow: 0 12px 34px rgba(15,23,42,.23); backdrop-filter: blur(14px);
  font-size: 10px; font-weight: 650; line-height: 1.35;
}
.attributions-panel[hidden],
.attributions-panel.is-hidden { display: none !important; }
.attributions-panel .attribution-note {
  position: static; inset: auto; max-width: none; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: inherit; font: inherit; pointer-events: auto;
}
.map-provider-attribution { padding-top: 7px; border-top: 1px solid rgba(148,163,184,.28); }
.map-provider-attribution a { color: #075f61; font-weight: 800; }

@media (min-width: 821px) {
  .information-panel {
    top: 66px; bottom: auto;
    max-height: calc(100vh - 74px); max-height: calc(100dvh - 74px);
  }
  .leaflet-control-attribution { display: none !important; }
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  :root {
    --phone-timeline-height: 82px;
    --phone-tool-bottom: calc(var(--phone-safe-bottom) + 94px);
    --phone-panel-bottom: calc(var(--phone-safe-bottom) + 146px);
  }

  .topbar {
    top: calc(var(--phone-safe-top) + 5px);
    min-height: 52px; height: 52px; padding: 5px 6px; gap: 6px; border-radius: 17px;
  }
  .brand { gap: 6px; }
  .brand-logo { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
  .brand-logo img { inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; }
  .brand-copy { gap: 4px; }
  .brand h1 { font-size: 14px; }
  .brand-author { font-size: clamp(4.8px, 1.25vw, 6px); }
  .mobile-controls-button { min-width: 40px; height: 40px; padding: 0 9px; border-radius: 12px; }
  .mobile-controls-button svg { width: 20px; height: 20px; flex-basis: 20px; }

  .mobile-controls-panel {
    top: calc(var(--phone-safe-top) + 64px);
    max-height: calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 70px);
    padding: 7px; gap: 6px; border-radius: 16px;
  }
  .mobile-controls-panel .control,
  .mobile-controls-panel .theme-control { height: 44px; }
  .mobile-controls-panel .select-control { grid-template-columns: 64px minmax(0,1fr); padding: 6px 9px; }
  .mobile-controls-panel .select-control > span { font-size: 9px; }
  .mobile-controls-panel select { font-size: 14px; }
  .mobile-controls-panel .theme-control button { font-size: 10px; }
  .mobile-controls-panel .boundary-button { font-size: 11px; }

  .tools-wrap {
    height: 46px; gap: 4px; padding: 1px;
  }
  .tools-wrap > .tool-control,
  .tools-wrap > .tools-button { flex-basis: 42px; }
  .tools-wrap .tools-button {
    width: 42px; height: 42px; min-height: 42px; border-radius: 12px;
  }
  .tools-wrap .warning-button-icon,
  .tools-wrap .radar-button-icon,
  .tools-wrap .satellite-button-icon,
  .tools-wrap .storm-button-icon,
  .tools-wrap .location-button-icon { width: 23px; height: 23px; }

  .quick-map-tools {
    top: auto; left: calc(var(--phone-safe-left) + 7px);
    bottom: var(--phone-panel-bottom); width: auto;
    display: flex; gap: 5px;
  }
  .quick-map-tool {
    width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0;
    grid-template-columns: 1fr; place-items: center; border-radius: 12px;
  }
  .quick-map-tool-icon { font-size: 20px; }
  .quick-map-tool-label { display: none; }

  .tool-control > .tools-menu,
  .tools-menu,
  .information-panel {
    bottom: var(--phone-panel-bottom);
    max-height: calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 68px);
  }
  .information-panel {
    top: calc(var(--phone-safe-top) + 64px); bottom: var(--phone-panel-bottom);
    max-height: none;
  }

  .mobile-panel-close {
    position: absolute !important; z-index: 5; top: 7px; right: 7px;
    width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important;
    padding: 0 !important; display: grid !important; place-items: center;
    border: 1px solid rgba(100,116,139,.25) !important; border-radius: 11px !important;
    background: rgba(241,245,249,.96) !important; color: #526076 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.12); cursor: pointer;
    font-size: 22px !important; line-height: 1 !important;
  }
  .general-tools-menu.is-mobile-portal { padding-top: 48px; }
  .drawing-tools-heading,
  .factual-data-heading,
  .satellite-menu-heading,
  .lightning-menu-heading,
  .storm-menu-heading,
  .map-export-heading { padding-right: 42px; }

  .timeline-panel {
    height: var(--phone-timeline-height); padding: 5px 6px;
    grid-template-columns: 38px 38px 38px minmax(0,1fr) 52px;
    grid-template-rows: 24px 38px; gap: 4px; border-radius: 16px;
    transform: translateY(0); opacity: 1;
    transition: transform .25s cubic-bezier(.22,.72,.28,1), opacity .18s ease;
  }
  .timeline-panel button { height: 36px; border-radius: 10px; font-size: 10px; }
  #frameTime { font-size: 9px; }
  #latestButton { font-size: 9px; }
  body.mobile-panel-obscures-timeline .timeline-panel {
    transform: translateY(calc(100% + var(--phone-safe-bottom) + 18px));
    opacity: 0; pointer-events: none;
  }

  .observation-computation-time {
    /* Keep the observation-validity badge below Leaflet's white attribution strip. */
    top: calc(var(--phone-safe-top) + 100px); bottom: auto;
    max-width: calc(100vw - 18px); padding: 5px 9px; font-size: 9px;
  }

  .attributions-control { display: none !important; }

  .known-problems-panel {
    top: calc(var(--phone-safe-top) + 64px); bottom: var(--phone-panel-bottom);
    display: flex; flex-direction: column; min-height: 0;
  }
  .known-problems-body {
    min-height: 0; max-height: none; flex: 1 1 auto;
    overflow-y: scroll; overscroll-behavior-y: contain; touch-action: pan-y;
    -webkit-overflow-scrolling: touch; scrollbar-gutter: stable;
  }
  .known-problems-body::-webkit-scrollbar { width: 7px; }
  .known-problems-body::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(185,28,28,.42); }

  .legend.precipitation-legend .legend-values .legend-value-phone-last {
    transform: translateX(-86%) !important;
  }

  .general-warning-panel.has-county-scope .general-warning-header {
    min-height: 108px;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .general-warning-panel.has-county-scope .general-warning-navigation {
    grid-column: 1 / -1; grid-row: 2; justify-self: end; margin-top: 2px;
  }
  .general-warning-panel.has-county-scope .general-warning-close {
    grid-column: 2; grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-panel,
  .quick-map-tool { transition: none !important; }
}


/* v6.32.16 r20 — website appearance, boundary editor, legend collapse and
   phone focus/spacing refinements. */
.is-obsolete-hidden { display: none !important; }

.website-theme-setting {
  display: grid; gap: 7px; padding: 9px 10px;
  border: 1px solid rgba(148,163,184,.30); border-radius: 11px;
  background: rgba(248,250,252,.94);
}
.website-theme-heading { color: #475569; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .065em; }
.website-theme-setting input[type="range"] { width: 100%; margin: 0; accent-color: #3b82f6; cursor: pointer; }
.website-theme-labels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 5px; }
.website-theme-labels span { min-width: 0; color: #64748b; font-size: 9px; font-weight: 800; text-align: center; white-space: nowrap; }
.website-theme-labels span.is-selected { color: #1d4ed8; }
.website-theme-labels b { font: inherit; }

.boundary-control-shell {
  min-width: 178px; padding: 0; display: grid; grid-template-columns: minmax(132px,1fr) 38px;
  align-items: stretch; overflow: hidden;
}
.boundary-mode-switch,
.boundary-settings-button {
  min-width: 0; border: 0; background: transparent; color: inherit; cursor: pointer;
}
.boundary-mode-switch { padding: 0 8px; display: flex; align-items: center; justify-content: flex-start; gap: 7px; font-weight: 750; }
.boundary-settings-button { display: grid; place-items: center; border-left: 1px solid var(--border); font-size: 18px; transition: background .18s ease, transform .2s ease; }
.boundary-settings-button:hover { background: rgba(59,130,246,.10); }
.boundary-settings-button[aria-expanded="true"] { background: rgba(59,130,246,.16); }
.boundary-settings-button span { display: inline-block; transition: transform .22s ease; }
.boundary-settings-button[aria-expanded="true"] span { transform: rotate(180deg); }

.boundary-settings-panel {
  position: fixed; z-index: 1160; top: 66px; right: 9px; width: min(340px,calc(100vw - 18px));
  padding: 10px; display: grid; gap: 10px;
  border: 1px solid var(--border); border-radius: 15px;
  background: rgba(255,255,255,.98); box-shadow: 0 18px 48px rgba(15,23,42,.24); backdrop-filter: blur(18px);
  transform-origin: top right; animation: wxradar-boundary-panel-in .20s cubic-bezier(.22,.72,.28,1);
}
.boundary-settings-panel[hidden], .boundary-settings-panel.is-hidden { display: none !important; }
@keyframes wxradar-boundary-panel-in { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.boundary-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(148,163,184,.24); }
.boundary-settings-header > div { display: grid; gap: 2px; }
.boundary-settings-header strong { font-size: 13px; }
.boundary-settings-header small { color: #64748b; font-size: 9px; }
.boundary-settings-header button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: #e5eaf0; cursor: pointer; font-size: 20px; }
.boundary-settings-panel .boundary-opacity-settings { margin: 0; }
.boundary-color-settings { display: grid; gap: 7px; padding: 9px 10px; border: 1px solid rgba(148,163,184,.28); border-radius: 11px; background: rgba(248,250,252,.88); }
.boundary-color-settings > strong { color: #475569; font-size: 10px; }
.boundary-color-settings label { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #334155; font-size: 10px; font-weight: 800; }
.boundary-color-settings input[type="color"] { width: 52px; height: 30px; padding: 2px; border: 1px solid rgba(100,116,139,.35); border-radius: 8px; background: #fff; cursor: pointer; }

.warnings-hover-name-setting { margin-top: 2px; }

.desktop-legend-collapse-button {
  width: 34px; height: 34px; flex: 0 0 34px; padding: 0; display: grid; place-items: center;
  align-self: center; order: -1; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px);
  cursor: pointer; color: #475569; font-size: 18px;
}
.desktop-legend-collapse-button span { display: inline-block; transition: transform .25s ease; }
.legend-controls { max-width: calc(100vw - 80px); opacity: 1; transform: translateX(0); transition: max-width .28s cubic-bezier(.22,.72,.28,1), opacity .18s ease, transform .25s ease; }
.legend-dock.desktop-collapsed .legend-controls { max-width: 0; opacity: 0; transform: translateX(16px); overflow: hidden; pointer-events: none; flex-wrap: nowrap; }
.legend-dock.desktop-collapsed .desktop-legend-collapse-button span { transform: rotate(180deg); }
.mobile-data-focus-control { display: none; }

/* Dedicated website dark theme. The map theme remains independent. */
body.ui-dark {
  color: #e5e7eb;
  --glass: rgba(15,23,42,.95);
  --border: rgba(148,163,184,.28);
  --shadow: 0 10px 34px rgba(0,0,0,.40);
  background: #0b1220;
}
body.ui-dark :is(.topbar,.control,.theme-control,.map-box,.tools-button,.tools-menu,.information-panel,.mobile-controls-panel,.legend,.transparency-control,.timeline-panel,.boundary-settings-panel,.attributions-panel,.general-warning-panel,.cross-section-panel,.known-problems-panel,.observation-detail-panel,.observation-computation-time) {
  border-color: rgba(148,163,184,.30); background-color: rgba(15,23,42,.95); color: #e5e7eb;
}
body.ui-dark :is(.website-theme-setting,.language-choice-control,.boundary-opacity-settings,.boundary-color-settings,.tool-setting-checkbox,.tool-setting-select,.factual-action,.drawing-settings,.location-search-form,.test-data-dataset-panel,.satellite-switch-control,.observation-network-summary,.observation-size-controls,.observation-render-control) {
  border-color: rgba(148,163,184,.28); background: rgba(30,41,59,.88); color: #e5e7eb;
}
body.ui-dark :is(.tools-menu,.information-panel,.mobile-controls-panel,.boundary-settings-panel,.general-warning-panel,.cross-section-panel,.known-problems-panel,.observation-detail-panel) :is(label,legend,strong,b,span,small,p,h1,h2,h3,h4,summary,output,dt,dd) { color: #e2e8f0; }
body.ui-dark :is(select,input[type="search"],input[type="text"],input[type="number"],textarea) { color: #f8fafc; background: #111827; border-color: rgba(148,163,184,.35); }
body.ui-dark select option { color: #f8fafc; background: #111827; }
body.ui-dark input[type="range"] { accent-color: #60a5fa; color-scheme: dark; }
body.ui-dark input[type="checkbox"], body.ui-dark input[type="radio"] { accent-color: #60a5fa; }
body.ui-dark :is(.timeline-panel button,.mobile-controls-button,.mobile-panel-close,.boundary-settings-header button,.drawing-actions button,.map-export-actions button,.observation-zoom-button) { background: #253247 !important; color: #e5e7eb !important; border-color: rgba(148,163,184,.28) !important; }
body.ui-dark .timeline-panel button.primary { background: #2563eb !important; color: #fff !important; }
body.ui-dark .theme-control button { color: #cbd5e1; }
body.ui-dark .theme-control button.active { background: #334155; color: #f8fafc; box-shadow: inset 0 0 0 1px rgba(148,163,184,.25); }
body.ui-dark .language-choice-control button { background: #253247; color: #cbd5e1; border-color: rgba(148,163,184,.30); }
body.ui-dark .language-choice-control button.is-selected,
body.ui-dark .language-choice-control button[aria-pressed="true"] { background: #14532d; color: #dcfce7; border-color: #22c55e; }
body.ui-dark .factual-action:hover,
body.ui-dark .tools-button:hover { background: #263449; }
body.ui-dark .legend-dock.mobile-expanded .legend-controls { background: rgba(15,23,42,.97); border-color: rgba(148,163,184,.30); }
body.ui-dark .legend-dock.mobile-expanded :is(.legend,.transparency-control) { background: #1e293b; }
body.ui-dark .desktop-legend-collapse-button,
body.ui-dark .mobile-legend-button { background: rgba(15,23,42,.96); color: #e5e7eb; border-color: rgba(148,163,184,.30); }
body.ui-dark .boundary-color-settings input[type="color"] { background: #111827; border-color: rgba(148,163,184,.38); }
body.ui-dark .map-provider-attribution { border-color: rgba(148,163,184,.25); }
body.ui-dark a { color: #7dd3fc; }

@media (min-width: 821px) {
  .boundary-control-shell { min-width: 178px; height: 43px; }
  .mobile-data-focus-control { display: none !important; }
}
@media (min-width: 821px) and (max-width: 1180px) {
  .boundary-control-shell { min-width: 132px; grid-template-columns: minmax(96px,1fr) 34px; }
  .boundary-mode-switch { padding: 0 5px; font-size: 8.5px; gap: 4px; }
}
@media (min-width: 821px) and (max-width: 960px) {
  .boundary-control-shell { min-width: 112px; grid-template-columns: minmax(80px,1fr) 32px; }
  .boundary-mode-switch { font-size: 7.5px; }
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  :root {
    --phone-timeline-height: 70px;
    --phone-tool-bottom: calc(var(--phone-safe-bottom) + 82px);
    --phone-panel-bottom: calc(var(--phone-safe-bottom) + 134px);
  }
  .boundary-control-shell { width: 100%; min-width: 0; height: 44px; grid-template-columns: minmax(0,1fr) 42px; }
  .boundary-mode-switch { padding: 0 10px; font-size: 11px; }
  .boundary-settings-button { font-size: 18px; }
  .boundary-settings-panel {
    top: calc(var(--phone-safe-top) + 64px); left: calc(var(--phone-safe-left) + 7px); right: calc(var(--phone-safe-right) + 7px);
    width: auto; max-height: calc(100dvh - var(--phone-safe-top) - 78px); overflow-y: auto;
  }

  .timeline-panel {
    height: var(--phone-timeline-height); padding: 4px 5px;
    grid-template-columns: 34px 34px 34px minmax(0,1fr) 48px;
    grid-template-rows: 20px 34px; gap: 3px 4px; border-radius: 14px;
    transition: transform .25s cubic-bezier(.22,.72,.28,1), opacity .18s ease;
  }
  .timeline-panel button { height: 32px; border-radius: 9px; padding: 0 3px; font-size: 9px; }
  #frameTime { font-size: 8px; line-height: 1.08; }
  #latestButton { font-size: 8px; }
  #timelineSlider { height: 18px; }

  .leaflet-control-attribution {
    top: calc(var(--phone-safe-top) + 61px) !important;
    left: calc(var(--phone-safe-left) + 8px) !important;
    right: calc(var(--phone-safe-right) + 8px) !important;
    padding: 1px 5px !important; font-size: 7px; line-height: 1.15;
  }
  .observation-computation-time {
    top: calc(var(--phone-safe-top) + 82px); bottom: auto;
    max-width: calc(100vw - 18px); padding: 3px 6px; border-radius: 7px; font-size: 7.5px; line-height: 1.15;
  }

  .desktop-legend-collapse-button { display: none !important; }
  .mobile-data-focus-control {
    grid-column: 1 / -1; min-height: 46px; padding: 7px 9px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid rgba(148,163,184,.28); border-radius: 11px; background: #f8fafc;
  }
  .mobile-data-focus-control > span { min-width: 0; display: grid; gap: 2px; }
  .mobile-data-focus-control strong { font-size: 10px; }
  .mobile-data-focus-control small { color: #64748b; font-size: 8px; line-height: 1.2; }
  .mobile-data-focus-control input { width: 38px; height: 22px; flex: 0 0 auto; accent-color: #3b82f6; }

  body.boundary-settings-open :is(.tools-wrap,.quick-map-tools,.timeline-panel,.legend-dock) {
    transform: translateY(calc(100% + var(--phone-safe-bottom) + 22px)); opacity: 0; pointer-events: none;
    transition: transform .25s cubic-bezier(.22,.72,.28,1), opacity .18s ease;
  }
  body.boundary-settings-open .quick-map-tools,
  body.boundary-settings-open .legend-dock { transform: translateY(26px); }

  body.mobile-data-focus-mode :is(.topbar,.tools-wrap,.quick-map-tools,.information-panel,.known-problems-panel,.general-warning-panel,.cross-section-panel,.observation-detail-panel,.observation-computation-time,.leaflet-control-container .leaflet-top,.leaflet-control-attribution,.attributions-control) {
    opacity: 0 !important; pointer-events: none !important; transform: translateY(-14px); transition: opacity .18s ease, transform .22s ease;
  }
  body.mobile-data-focus-mode .timeline-panel,
  body.mobile-data-focus-mode .legend-dock { opacity: 1 !important; pointer-events: auto !important; }
  body.mobile-data-focus-mode .legend-dock { z-index: 1170; }
  body.mobile-data-focus-mode .timeline-panel { z-index: 1165; }
}

@media (prefers-reduced-motion: reduce) {
  .boundary-settings-panel,
  .boundary-settings-button span,
  .legend-controls,
  .desktop-legend-collapse-button span,
  body.boundary-settings-open :is(.tools-wrap,.quick-map-tools,.timeline-panel,.legend-dock) { animation: none !important; transition: none !important; }
}
body.ui-dark .leaflet-control-attribution {
  background: rgba(15,23,42,.88) !important; color: #e5e7eb !important;
  border-color: rgba(148,163,184,.25) !important;
}
body.ui-dark .leaflet-control-attribution a { color: #7dd3fc !important; }
body.ui-dark :is(.location-search-entry button,.location-search-result,.test-data-dataset-choice,.satellite-layer-card,.lightning-layer-card,.storm-mode-button) {
  background: #253247; color: #e5e7eb; border-color: rgba(148,163,184,.28);
}
body.ui-dark :is(.location-search-result:hover,.test-data-dataset-choice:hover,.satellite-layer-card:hover,.storm-mode-button:hover) { background: #334155; }
/* r20 boundary click isolation: only the switch itself changes boundary mode. */
.boundary-control-shell { grid-template-columns: 44px minmax(82px,1fr) 38px; }
.boundary-mode-switch { padding: 0; display: grid; place-items: center; height: 100%; align-self: stretch; }
.boundary-mode-label {
  min-width: 0; height: 100%; align-self: stretch;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 750; font-size: 10px; line-height: 1; pointer-events: none;
}
.boundary-settings-button { height: 100%; align-self: stretch; }
@media (min-width: 821px) and (max-width: 1180px) {
  .boundary-control-shell { grid-template-columns: 38px minmax(55px,1fr) 34px; }
  .boundary-mode-label { font-size: 8.5px; }
}
@media (min-width: 821px) and (max-width: 960px) {
  .boundary-control-shell { grid-template-columns: 34px minmax(43px,1fr) 32px; }
  .boundary-mode-label { font-size: 7.5px; }
}
@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .boundary-control-shell { grid-template-columns: 50px minmax(0,1fr) 42px; }
  .boundary-mode-label { font-size: 11px; }
}

/* r20 dark-theme contrast completion for docked controls and the three-stop appearance selector. */
.website-theme-labels span::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 auto 3px;
  border: 2px solid #94a3b8;
  border-radius: 999px;
  background: #f8fafc;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.website-theme-labels span.is-selected::before {
  border-color: #2563eb;
  background: #2563eb;
  transform: scale(1.12);
}
body.ui-dark .website-theme-heading { color: #cbd5e1; }
body.ui-dark .website-theme-labels span { color: #cbd5e1; }
body.ui-dark .website-theme-labels span.is-selected { color: #93c5fd; }
body.ui-dark .website-theme-labels span::before { border-color: #64748b; background: #0f172a; }
body.ui-dark .website-theme-labels span.is-selected::before { border-color: #60a5fa; background: #60a5fa; }
body.ui-dark .mobile-data-focus-control { background: #1e293b; border-color: rgba(148,163,184,.30); color: #e5e7eb; }
body.ui-dark .mobile-data-focus-control strong { color: #f1f5f9; }
body.ui-dark .mobile-data-focus-control small { color: #94a3b8; }
body.ui-dark .legend-dock :is(.transparency-header,.transparency-header span,.transparency-header output,.legend-title,.legend-unit,.timeline-meta,.timeline-time) { color: #e2e8f0; }
body.ui-dark .boundary-mode-label { color: #e5e7eb; }


/* v6.32.16 r21 — boundary line controls, desktop clean view, clickable
   appearance presets, interface scaling, reset confirmation and dark-theme
   contrast completion. */
:root { --wxradar-ui-scale: 1; }

/* Scale only WXRadar interface chrome; map imagery/geography keeps its exact
   pixel geometry. CSS zoom preserves hit testing and fixed-panel layout in
   Chromium while avoiding map-coordinate distortion. */
body > :is(
  .topbar,.tools-wrap,.quick-map-tools,.legend-dock,.timeline-panel,
  .boundary-settings-panel,.information-panel,.known-problems-panel,
  .general-warning-panel,.cross-section-panel,.observation-detail-panel,
  .observation-computation-time,.attributions-control,.error-toast,
  .radar-3d-viewer,.settings-reset-confirm
),
body > .is-mobile-portal,
body > .is-desktop-portal {
  zoom: var(--wxradar-ui-scale);
}

.boundary-settings-panel { max-height: calc(100dvh - 82px); overflow-y: auto; }
.boundary-thickness-settings,
.boundary-line-settings {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 11px;
  background: rgba(248,250,252,.88);
}
.boundary-thickness-settings > strong,
.boundary-line-settings > strong { color: #475569; font-size: 10px; }
.boundary-thickness-settings label { display: grid; gap: 4px; }
.boundary-thickness-settings label > span {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #334155; font-size: 10px; font-weight: 800;
}
.boundary-thickness-settings output { font-variant-numeric: tabular-nums; }
.boundary-thickness-settings input[type="range"] { width: 100%; margin: 0; accent-color: #334155; cursor: pointer; }
.boundary-line-settings label {
  min-height: 36px; display: grid; grid-template-columns: minmax(0,1fr) 116px;
  align-items: center; gap: 9px; color: #334155; font-size: 10px; font-weight: 800;
}
.boundary-line-settings select {
  min-width: 0; width: 100%; height: 32px; padding: 0 8px;
  border: 1px solid rgba(100,116,139,.30); border-radius: 8px;
  background: #fff; color: #243044; font-size: 10px; font-weight: 750;
}

.website-theme-labels button {
  min-width: 0; padding: 2px 2px 0; border: 0; border-radius: 8px;
  background: transparent; color: #64748b; font-size: 9px; font-weight: 800;
  text-align: center; white-space: nowrap; cursor: pointer;
}
.website-theme-labels button:hover { background: rgba(59,130,246,.08); color: #1d4ed8; }
.website-theme-labels button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.website-theme-labels button.is-selected { color: #1d4ed8; }
.website-theme-labels button::before {
  content: ""; display: block; width: 6px; height: 6px; margin: 0 auto 3px;
  border: 2px solid #94a3b8; border-radius: 999px; background: #f8fafc;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.website-theme-labels button.is-selected::before {
  border-color: #2563eb; background: #2563eb; transform: scale(1.12);
}
/* Neutralize the old span-only marker rule after changing presets to buttons. */
.website-theme-labels > span::before { display: none !important; }

.website-scale-setting {
  display: grid; gap: 7px; padding: 9px 10px;
  border: 1px solid rgba(148,163,184,.30); border-radius: 11px;
  background: rgba(248,250,252,.94);
}
.website-scale-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #475569; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .065em;
}
.website-scale-heading output { color: #1d4ed8; font-variant-numeric: tabular-nums; }
.website-scale-setting input[type="range"] { width: 100%; margin: 0; accent-color: #3b82f6; cursor: pointer; }
.website-scale-guides {
  display: flex; align-items: center; justify-content: space-between;
  color: #64748b; font-size: 8px; font-weight: 800;
}

@keyframes wxradar-restore-warning-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.18), 0 0 9px rgba(239,68,68,.28); }
  50% { box-shadow: 0 0 0 5px rgba(239,68,68,.11), 0 0 15px rgba(239,68,68,.52); }
}
.restore-default-settings-button {
  width: 100%; min-height: 42px; padding: 8px 10px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(220,38,38,.34); border-radius: 11px;
  background: rgba(254,242,242,.96); color: #991b1b; cursor: pointer;
  font-size: 10px; font-weight: 850; text-align: left;
}
.restore-default-settings-button:hover { background: #fee2e2; }
.restore-default-warning {
  width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center;
  border-radius: 50%; background: #dc2626; color: #fff; font-size: 17px; font-weight: 950;
  animation: wxradar-restore-warning-pulse 1.45s ease-in-out infinite;
}

.settings-reset-confirm {
  position: fixed; z-index: 2600; inset: 0; display: grid; place-items: center;
  padding: 18px; background: rgba(2,6,23,.58); backdrop-filter: blur(8px);
}
.settings-reset-confirm[hidden], .settings-reset-confirm.is-hidden { display: none !important; }
.settings-reset-confirm-card {
  width: min(390px,calc(100vw - 32px)); padding: 18px;
  display: grid; gap: 12px; border: 1px solid rgba(148,163,184,.30); border-radius: 16px;
  background: #fff; color: #1f2937; box-shadow: 0 22px 64px rgba(2,6,23,.34);
}
.settings-reset-confirm-card strong { font-size: 16px; }
.settings-reset-confirm-card p { margin: 0; color: #475569; font-size: 11px; line-height: 1.45; }
.settings-reset-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.settings-reset-confirm-actions button {
  min-height: 40px; border: 1px solid rgba(148,163,184,.32); border-radius: 10px;
  background: #eef2f7; color: #334155; cursor: pointer; font-size: 11px; font-weight: 900;
}
.settings-reset-confirm-actions .danger { border-color: #dc2626; background: #dc2626; color: #fff; }
.settings-reset-confirm-actions .danger:hover { background: #b91c1c; }

.desktop-legend-action-stack {
  flex: 0 0 26px; order: -1; align-self: center;
  display: grid; gap: 4px; place-items: center;
}
.desktop-legend-collapse-button,
.desktop-screen-focus-button {
  width: 26px; height: 26px; min-width: 26px; flex: 0 0 26px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.94); box-shadow: 0 4px 15px rgba(15,23,42,.16);
  backdrop-filter: blur(12px); cursor: pointer; color: #475569; font-size: 14px;
}
.desktop-legend-collapse-button { order: initial; align-self: auto; }
.desktop-screen-focus-button { font-size: 13px; }
.desktop-screen-focus-button:hover,
.desktop-legend-collapse-button:hover { background: rgba(239,246,255,.98); border-color: rgba(59,130,246,.34); }
.desktop-screen-focus-button[aria-pressed="true"] {
  background: #1d4ed8; color: #fff; border-color: #2563eb;
}

/* Full-screen desktop data view: keep the map, the bottom timeline and the two
   small display buttons. The action stack remains the escape hatch. */
@media (min-width: 821px) {
  body.desktop-screen-focus-mode :is(
    .topbar,.tools-wrap,.quick-map-tools,.boundary-settings-panel,
    .information-panel,.known-problems-panel,.general-warning-panel,
    .cross-section-panel,.observation-detail-panel,.observation-computation-time,
    .attributions-control,.error-toast,.hover-value,.measure-hint,
    .leaflet-control-container,.radar-3d-hud,.radar-3d-transfer-button,
    .radar-3d-transfer-panel,.radar-3d-reset,.radar-3d-compass,
    .radar-3d-map-credit,.radar-3d-interaction-help
  ) {
    opacity: 0 !important; pointer-events: none !important; visibility: hidden !important;
  }
  body.desktop-screen-focus-mode .legend-dock {
    display: flex !important; opacity: 1 !important; pointer-events: auto !important; z-index: 2200;
  }
  body.desktop-screen-focus-mode .legend-controls,
  body.desktop-screen-focus-mode .mobile-legend-button { display: none !important; }
  body.desktop-screen-focus-mode .desktop-legend-action-stack { display: grid !important; }
  body.desktop-screen-focus-mode .timeline-panel {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 2190;
  }
}

/* Phone focus mode: move Layers close to the compact timeline instead of
   leaving the old large empty vertical gap. */
@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  body.mobile-data-focus-mode .legend-dock {
    bottom: calc(var(--phone-safe-bottom) + 79px) !important;
    transition: bottom .24s cubic-bezier(.22,.72,.28,1), opacity .18s ease, transform .22s ease;
  }
  .boundary-settings-panel { max-height: calc(100dvh - var(--phone-safe-top) - 74px); }
  .boundary-line-settings label { grid-template-columns: minmax(0,1fr) 122px; }
}

/* Dark-theme contrast completion. Every surface shown in the reported
   satellite/lightning/observations/storm/drawing/export/information screens
   gets an explicit dark surface + readable foreground, including disabled
   controls. */
body.ui-dark .website-theme-setting,
body.ui-dark .website-scale-setting,
body.ui-dark .boundary-thickness-settings,
body.ui-dark .boundary-line-settings {
  background: #1e293b; border-color: rgba(148,163,184,.32); color: #e5e7eb;
}
body.ui-dark .website-scale-heading,
body.ui-dark .website-scale-guides,
body.ui-dark .boundary-thickness-settings > strong,
body.ui-dark .boundary-line-settings > strong,
body.ui-dark .boundary-thickness-settings label > span,
body.ui-dark .boundary-line-settings label { color: #cbd5e1; }
body.ui-dark .website-scale-heading output { color: #93c5fd; }
body.ui-dark .website-theme-labels button { color: #cbd5e1; }
body.ui-dark .website-theme-labels button:hover { background: rgba(96,165,250,.12); color: #bfdbfe; }
body.ui-dark .website-theme-labels button.is-selected { color: #93c5fd; }
body.ui-dark .website-theme-labels button::before { border-color: #64748b; background: #0f172a; }
body.ui-dark .website-theme-labels button.is-selected::before { border-color: #60a5fa; background: #60a5fa; }
body.ui-dark .boundary-line-settings select { background: #111827; color: #f8fafc; border-color: rgba(148,163,184,.38); }

body.ui-dark .restore-default-settings-button {
  background: #351820; border-color: rgba(248,113,113,.55); color: #fecaca;
}
body.ui-dark .restore-default-settings-button:hover { background: #471c25; }
body.ui-dark .settings-reset-confirm-card {
  background: #111827; color: #f8fafc; border-color: rgba(148,163,184,.34);
}
body.ui-dark .settings-reset-confirm-card p { color: #cbd5e1; }
body.ui-dark .settings-reset-confirm-actions button:not(.danger) {
  background: #253247; color: #e5e7eb; border-color: rgba(148,163,184,.30);
}
body.ui-dark .desktop-legend-collapse-button,
body.ui-dark .desktop-screen-focus-button {
  background: rgba(15,23,42,.97); color: #e5e7eb; border-color: rgba(148,163,184,.34);
}
body.ui-dark .desktop-screen-focus-button[aria-pressed="true"] { background: #2563eb; color: #fff; border-color: #60a5fa; }

body.ui-dark .satellite-menu-heading strong,
body.ui-dark .lightning-menu-heading strong,
body.ui-dark .storm-menu-heading strong { color: #f8fafc; }
body.ui-dark .satellite-menu-heading > div span,
body.ui-dark .lightning-menu-heading > div span,
body.ui-dark .storm-menu-heading > div span,
body.ui-dark .satellite-note,
body.ui-dark .lightning-note { color: #94a3b8; }
body.ui-dark .satellite-message { color: #e2e8f0; }
body.ui-dark .satellite-shared-timeline-note {
  background: #172554; color: #dbeafe; border: 1px solid rgba(96,165,250,.24);
}
body.ui-dark .satellite-switch-control { background: #1e293b; }
body.ui-dark .satellite-switch-control b { color: #f1f5f9; }
body.ui-dark .satellite-switch-control small { color: #94a3b8; }

body.ui-dark .lightning-message {
  background: #302a16; color: #fde68a; border: 1px solid rgba(250,204,21,.24);
}
body.ui-dark .lightning-radar-sync-button {
  background: #3a1c24; color: #fecaca; border-color: rgba(248,113,113,.60);
}
body.ui-dark .lightning-radar-sync-button:hover { background: #4a2029; }
body.ui-dark .lightning-radar-sync-copy strong { color: #fee2e2; }
body.ui-dark .lightning-radar-sync-copy small { color: #fca5a5; }
body.ui-dark .lightning-radar-sync-button.is-radar-matched {
  background: #153522; color: #dcfce7; border-color: rgba(74,222,128,.56);
}
body.ui-dark .lightning-radar-sync-button.is-radar-matched:hover { background: #18462a; }
body.ui-dark .lightning-layer-card {
  background: #1e293b; border-color: rgba(148,163,184,.34);
}
body.ui-dark .lightning-layer-switch b { color: #f1f5f9; }
body.ui-dark .lightning-layer-switch small,
body.ui-dark .lightning-opacity-control { color: #aebccd; }
body.ui-dark .lightning-placement-settings {
  background: #17243a; border-color: rgba(34,211,238,.24);
}
body.ui-dark .lightning-placement-settings legend { color: #bae6fd; }
body.ui-dark .lightning-placement-settings label {
  background: #111827; color: #e5e7eb; border-color: rgba(148,163,184,.30);
}
body.ui-dark .lightning-placement-settings small { color: #94a3b8; }
body.ui-dark .lightning-placement-settings label:has(input:checked) {
  background: #164e63; color: #ecfeff; border-color: #22d3ee;
}
body.ui-dark .lightning-symbol-settings {
  background: #29240f; border-color: rgba(250,204,21,.28);
}
body.ui-dark .lightning-symbol-settings legend { color: #fde68a; }
body.ui-dark .lightning-symbol-settings label {
  background: #111827; color: #e5e7eb; border-color: rgba(148,163,184,.30);
}

body.ui-dark .observation-switch,
body.ui-dark .observation-daily-extremes-button,
body.ui-dark .observation-daily-extremes-panel,
body.ui-dark .observation-weather-style-control {
  background: #1e293b !important; color: #e5e7eb !important;
  border-color: rgba(148,163,184,.32) !important;
}
body.ui-dark .observation-switch b,
body.ui-dark .observation-network-summary b { color: #f1f5f9; }
body.ui-dark .observation-switch small,
body.ui-dark .observation-network-summary small { color: #aebccd; }
body.ui-dark .observation-network-summary { background: #17313a; border-color: rgba(45,212,191,.32); }
body.ui-dark .observation-parameter-control > span,
body.ui-dark .observation-render-control legend,
body.ui-dark .observation-daily-extremes-panel label > span { color: #cbd5e1; }
body.ui-dark .observation-parameter-control select,
body.ui-dark .observation-daily-extremes-panel select {
  background: #0f172a; color: #f8fafc; border-color: rgba(148,163,184,.36);
}
body.ui-dark .observation-daily-extremes-button:disabled {
  background: #1e293b !important; color: #94a3b8 !important; opacity: .72;
}
body.ui-dark .observation-render-control label > span {
  background: #1f2937; color: #cbd5e1; border-color: rgba(148,163,184,.32);
}
body.ui-dark .observation-render-control input:checked + span {
  background: #123d38; color: #ccfbf1; border-color: #2dd4bf;
}
body.ui-dark .observation-weather-style-control.is-relevant { background: #153b36; }
body.ui-dark .observation-size-controls { background: #1e293b; border-color: rgba(148,163,184,.28); }
body.ui-dark .observation-size-controls :is(b,output,small) { color: #dbe5f0; }

body.ui-dark .storm-master-switch b,
body.ui-dark .storm-mode-fieldset legend { color: #cbd5e1; }
body.ui-dark .storm-mode-fieldset:disabled { opacity: .76; }
body.ui-dark .storm-mode-grid button {
  background: #1f2937; color: #e5e7eb; border-color: rgba(148,163,184,.32);
}
body.ui-dark .storm-mode-grid button:hover { background: #2b3442; border-color: rgba(251,146,60,.65); }
body.ui-dark .storm-mode-grid button.active {
  background: #4a2a0e; color: #fed7aa; border-color: #fb923c;
}
body.ui-dark .storm-mode-grid button small { color: #aebccd; }
body.ui-dark .storm-severity-key {
  background: #1e293b; border-color: rgba(148,163,184,.28); color: #e5e7eb;
}
body.ui-dark .storm-severity-key b { color: #cbd5e1; }
body.ui-dark .storm-tracking-message,
body.ui-dark .storm-experimental-note { color: #d5deea; }

body.ui-dark .drawing-tool-grid .drawing-tool,
body.ui-dark .drawing-color-control {
  background: #1f2937; color: #e5e7eb; border-color: rgba(148,163,184,.32);
}
body.ui-dark .drawing-tool-grid .drawing-tool:hover { background: #273449; }
body.ui-dark .drawing-tool-grid .drawing-tool.active {
  background: #173f72; color: #dbeafe; border-color: #60a5fa;
}
body.ui-dark .drawing-tool-grid .drawing-eraser-tool.active {
  background: #4a2a0e; color: #fed7aa; border-color: #fb923c;
}
body.ui-dark .drawing-range-control output,
body.ui-dark .drawing-settings :is(label,span,summary) { color: #e2e8f0; }
body.ui-dark .drawing-select-control select { background: #111827; color: #f8fafc; border-color: rgba(148,163,184,.35); }
body.ui-dark .drawing-actions .drawing-clear-button {
  background: #3a1c24 !important; color: #fecaca !important; border-color: rgba(248,113,113,.45) !important;
}

body.ui-dark .map-export-heading strong { color: #f8fafc; }
body.ui-dark .map-export-heading span,
body.ui-dark .map-export-status { color: #b8c5d5; }
body.ui-dark .map-export-field,
body.ui-dark .map-export-area-summary {
  background: #1e293b; color: #e5e7eb; border-color: rgba(148,163,184,.32);
}
body.ui-dark .map-export-field > span { color: #d5deea; }
body.ui-dark .map-export-field select {
  background: #111827; color: #f8fafc; border-color: rgba(148,163,184,.38);
}
body.ui-dark .map-export-download {
  background: #2563eb !important; color: #fff !important; border-color: #3b82f6 !important;
}
body.ui-dark .map-export-download:hover { background: #1d4ed8 !important; }

body.ui-dark .information-panel header {
  background: #172033; border-color: rgba(148,163,184,.28);
}
body.ui-dark .information-panel header span { color: #94a3b8; }
body.ui-dark .information-panel header strong { color: #f8fafc; }
body.ui-dark .information-panel header button { background: #253247; color: #e5e7eb; }
body.ui-dark .information-panel-body { color: #d5deea; }
body.ui-dark .information-source-group {
  background: #1e293b; border-left-color: #22d3ee;
}
body.ui-dark .information-source-group h3 { color: #f1f5f9; }
body.ui-dark .information-data-attribution {
  background: #17313a; border-left-color: #22d3ee; color: #d8f4f8;
}
body.ui-dark .information-data-attribution strong { color: #a5f3fc; }

body.ui-dark .known-problems-button {
  background: #3a171f !important; color: #fecaca !important;
  border-color: rgba(248,113,113,.72) !important;
}
body.ui-dark .known-problems-button :is(.known-problems-icon,.tool-button-label,.tool-chevron) { color: #fecaca !important; }
body.ui-dark .known-problems-button:hover,
body.ui-dark .known-problems-button[aria-expanded="true"] {
  background: #4b1d27 !important; color: #fee2e2 !important;
}
body.ui-dark .known-problems-panel {
  background: #1d1217; border-color: rgba(248,113,113,.46); color: #fee2e2;
}
body.ui-dark .known-problems-panel header {
  background: #351820; border-bottom-color: rgba(248,113,113,.34);
}
body.ui-dark .known-problems-panel header > div,
body.ui-dark .known-problems-panel header strong,
body.ui-dark .known-problems-intro,
body.ui-dark .known-problems-body { color: #fecaca; }
body.ui-dark .known-problems-panel header button { background: #4b1d27; color: #fee2e2; }

html.ios-webkit body.ui-dark :is(.tools-menu,.information-panel) {
  background: rgba(15,23,42,.99) !important;
  color: #e5e7eb !important;
}

@media (prefers-reduced-motion: reduce) {
  .restore-default-warning { animation: none !important; }
  body.mobile-data-focus-mode .legend-dock { transition: none !important; }
}


/* r21 polish: prevent the legacy span marker rule from decorating the emoji
   inside the now-clickable website-appearance buttons. */
.website-theme-labels button > span::before {
  content: none !important;
  display: none !important;
}

/* Disabled controls must remain legible in dark mode. Their state is conveyed
   by switches/cursors as well as opacity, so do not wash the copy out. */
body.ui-dark .satellite-layer-control select:disabled,
body.ui-dark .observation-parameter-control select:disabled,
body.ui-dark .lightning-opacity-control input:disabled { opacity: .78; }
body.ui-dark .lightning-layer-card.is-disabled { opacity: .78; }
body.ui-dark .lightning-placement-settings label:has(input:disabled) { opacity: .76; }
body.ui-dark .theme-control button:disabled,
body.ui-dark .theme-control button.is-locked { opacity: .68; }
body.ui-dark :is(.tools-menu,.information-panel,.known-problems-panel) button:disabled {
  color: #aebccd !important;
}

/* Leaflet's own small map controls are part of the UI-size preference too,
   while the map canvas and geographic coordinates themselves remain unscaled. */
#map .leaflet-control { zoom: var(--wxradar-ui-scale); }


/* v6.32.16 r22 — dark warning contrast, desktop legend action alignment,
   first-visit 100% scale polish and phone-only clean-view integration. */

/* The author credit remains deliberately red in dark mode, but uses a much
   lighter red so the small copy stays readable on the dark top bar. */
body.ui-dark .brand-author { color: #ff8a8a; }

/* General-warning panel: r20/r21's generic dark-text rule made the copy light
   without also converting every nested legacy light surface. Give each nested
   surface an explicit dark background/foreground so the whole bulletin is
   readable on both desktop and phone. */
body.ui-dark .general-warning-header {
  background: #172033;
  border-bottom-color: rgba(148,163,184,.30);
}
body.ui-dark .general-warning-eyebrow { color: #94a3b8 !important; }
body.ui-dark .general-warning-header h2 { color: #f8fafc !important; }
body.ui-dark .general-warning-navigation button,
body.ui-dark .general-warning-close {
  background: #253247 !important;
  color: #e5e7eb !important;
  border-color: rgba(148,163,184,.34) !important;
}
body.ui-dark .general-warning-navigation button:hover,
body.ui-dark .general-warning-close:hover { background: #334155 !important; }
body.ui-dark .general-warning-navigation button:disabled { opacity: .55; }
body.ui-dark .general-warning-navigation span { color: #cbd5e1 !important; }
body.ui-dark .general-warning-scope-bar {
  background: #2b2118;
  border-bottom-color: rgba(251,146,60,.24);
}
body.ui-dark .general-warning-scope-bar button {
  background: #3a2818;
  color: #fed7aa !important;
  border-color: rgba(251,146,60,.42);
}
body.ui-dark .general-warning-scope-bar button:hover { background: #4a3019; }
body.ui-dark .general-warning-scope-bar span { color: #fdba74 !important; }
body.ui-dark .general-warning-body { color: #e5e7eb; background: #0f172a; }
body.ui-dark .general-warning-code-chip { color: #111827 !important; }
body.ui-dark .general-warning-section {
  background: #172033;
  border-color: rgba(148,163,184,.28);
  border-left-color: var(--warning-color);
}
body.ui-dark .general-warning-section h3,
body.ui-dark .general-warning-section dd { color: #e5e7eb !important; }
body.ui-dark .general-warning-section dt { color: #9fb0c4 !important; }
body.ui-dark .general-warning-counties {
  background: #1e293b;
  border: 1px solid rgba(148,163,184,.20);
}
body.ui-dark .general-warning-counties strong { color: #f1f5f9 !important; }
body.ui-dark .general-warning-counties p { color: #cbd5e1 !important; }
body.ui-dark .general-warning-details {
  background: #172033;
  border-color: rgba(148,163,184,.28);
}
body.ui-dark .general-warning-details summary { color: #e5e7eb !important; }
body.ui-dark .general-warning-details div,
body.ui-dark .general-warning-details p { color: #cbd5e1 !important; }
body.ui-dark .general-warning-empty { color: #aebccd !important; }
body.ui-dark .general-warning-footer {
  background: #172033;
  color: #94a3b8;
  border-top-color: rgba(148,163,184,.26);
}
body.ui-dark .general-warning-footer span { color: #94a3b8 !important; }

/* Keep map popups consistent with the dark warning navigator too. */
body.ui-dark .general-warning-popup .leaflet-popup-content-wrapper,
body.ui-dark .general-warning-popup .leaflet-popup-tip { background: #172033; color: #e5e7eb; }
body.ui-dark .general-warning-popup-content { color: #e5e7eb; }
body.ui-dark .general-warning-popup-content h3 { color: #f8fafc; }
body.ui-dark .general-warning-popup-content p { color: #cbd5e1; }
body.ui-dark .general-warning-popup .leaflet-popup-close-button { color: #e5e7eb !important; }

/* Desktop: nudge the compact action stack down so its lower edge visually
   aligns with the neighboring transparency card. */
@media (min-width: 821px) {
  .desktop-legend-action-stack { transform: translateY(7px); }
  .desktop-legend-collapse-button { font-size: 12px; }
}

/* Phone: neither desktop-only legend action button should float separately on
   the map. Their phone clean-view behavior is exposed as the selectable
   "Undisturbed data view" option inside Layers. */
@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .desktop-legend-action-stack,
  .desktop-screen-focus-button,
  .desktop-legend-collapse-button { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-legend-action-stack { transition: none !important; }
}


/* v6.32.16 r23 — radar product continuity, warning/observation placement and
   dark-export polish. */
@media (min-width: 821px) {
  /* Keep the minimized national-warning navigator below both quick-map tools. */
  .general-warning-panel.is-collapsed {
    top: 166px;
    left: 166px;
    right: auto;
    width: min(350px, calc(100vw - 182px));
  }
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  /* The project credit must remain readable on phones rather than shrinking to
     a 5–6 px caption. */
  .brand-author {
    font-size: clamp(8.5px, 2.1vw, 10.5px);
    letter-spacing: -.045em;
  }

  /* Observation validity belongs near the lower map workspace, above the
     controls/timeline, so a minimized national-warning navigator at the top
     cannot cover it. */
  .observation-computation-time {
    top: auto !important;
    bottom: calc(var(--phone-panel-bottom) + 54px) !important;
    max-width: min(330px, calc(100vw - 28px));
    padding: 4px 8px;
    font-size: 8.5px;
    border-radius: 8px;
  }
}

@media (max-width: 420px) {
  .brand-author { font-size: 8.5px; }
}


/* v6.32.16 r24 — anonymous live presence in the brand line and dark satellite
   status contrast. */
.online-presence {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .22em;
  color: #26DF20;
  font-size: 22px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.035em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.online-presence-dot { color: #26DF20; }
body:not(.ui-dark) .online-presence {
  -webkit-text-stroke: .28px rgba(0,0,0,.96);
  paint-order: stroke fill;
  text-shadow: 0 0 .5px rgba(0,0,0,.92);
}
.brand-author { margin-left: 5px; }

/* The generic dark-mode span rule used by tools-menu content can otherwise
   wash out the active satellite badge. Give ON a strong dedicated contrast. */
body.ui-dark .satellite-mode-badge.is-enabled {
  background: #075985 !important;
  color: #e0f2fe !important;
  border: 1px solid rgba(125,211,252,.52);
}
body.ui-dark .satellite-button.is-enabled .tool-status { color: #7dd3fc !important; }

@media (min-width: 821px) {
  .online-presence { font-size: 17px; }
  .brand-copy { gap: 9px; }
  .brand-author { margin-left: 7px; }
}

@media (min-width: 961px) and (max-width: 1180px) {
  /* Medium desktop widths can still show all three pieces without stealing
     enough space to clip radar/parameter controls. */
  .brand { min-width: 235px; max-width: 260px; }
  .brand-author { display: inline !important; font-size: 6.5px; margin-left: 1px; }
  .online-presence { font-size: 15px; }
  .brand-copy { gap: 5px; }
}

@media (min-width: 821px) and (max-width: 960px) {
  /* Preserve the compact legacy desktop/tablet layout at this edge width. */
  .brand { min-width: 112px; max-width: 122px; gap: 5px; }
  .brand-author { display: none !important; }
  .brand h1, .online-presence { font-size: 13px; }
  .brand-copy { gap: 4px; }
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .brand-copy { width: 100%; gap: 7px; }
  .brand h1, .online-presence { font-size: 15px; }
  .brand-author { margin-left: 4px; }
}

@media (max-width: 420px) {
  .brand-logo { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; }
  .brand h1, .online-presence { font-size: 13px; }
  .brand-copy { gap: 4px; }
  .brand-author { font-size: 8px; margin-left: 1px; letter-spacing: -.055em; }
  .mobile-controls-button { min-width: 38px; width: 38px; height: 38px; padding: 0; }
}

@media (max-width: 360px) {
  .brand h1, .online-presence { font-size: 12px; }
  .brand-author { font-size: 7.2px; }
  .brand-copy { gap: 3px; }
}


/* r25 — 3D workspace layout, clean-view consistency and geolocated marker. */
.radar-3d-location-marker {
  position: absolute; z-index: 8; width: 30px; height: 38px;
  transform: translate(-50%, -100%); pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
.radar-3d-location-marker[hidden] { display: none !important; }
.radar-3d-location-marker > span {
  position: absolute; left: 5px; top: 2px; width: 20px; height: 20px;
  border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  background: #2563eb; transform: rotate(-45deg);
  box-shadow: 0 0 0 2px rgba(37,99,235,.38);
}
.radar-3d-location-marker > span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: #fff; transform: translate(-50%,-50%);
}
body.radar-3d-active .tools-button.is-disabled-in-3d {
  opacity: .38 !important; filter: grayscale(1) saturate(.15) !important;
  cursor: not-allowed !important; box-shadow: none !important;
}
body.radar-3d-active .tools-button.is-disabled-in-3d :is(.tool-status,.tool-button-label,.tool-chevron) {
  opacity: .72 !important;
}

@media (min-width: 821px) {
  /* Put the 3D status card below the two quick-map buttons instead of on top of them. */
  body.radar-3d-active .radar-3d-hud { top: 164px; left: 166px; }
  body.radar-3d-active .radar-3d-transfer-button { top: 306px; left: 166px; }
  /* Desktop has one distraction-free control: the ⏬ button in the legend action stack. */
  body.radar-3d-active .radar-3d-focus-button { display: none !important; }
  /* Make desktop Known problems a true centered dialog. */
  .known-problems-panel {
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    width: min(520px, calc(100vw - 40px)) !important;
    max-height: min(78dvh, 720px) !important;
    transform: translate(-50%, -50%) !important;
  }
  .known-problems-body { max-height: calc(min(78dvh, 720px) - 60px) !important; }
  /* Clean view must also remove measure/cross-section while the WebGL viewer is active. */
  body.radar-3d-active.desktop-screen-focus-mode .quick-map-tools,
  body.radar-3d-active.radar-3d-focus-mode .quick-map-tools {
    display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  }
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  /* The phone-only 3D focus control sits directly left of Layers. */
  body.radar-3d-active .radar-3d-focus-button {
    top: auto !important; left: auto !important;
    right: calc(var(--phone-safe-right) + 98px) !important;
    bottom: var(--phone-panel-bottom) !important;
    width: 42px; height: 42px;
  }
  /* In 3D focus mode Layers remains the way back to layer/focus options. */
  body.radar-3d-active.radar-3d-focus-mode #mobileLegendButton { display: inline-flex !important; }
  body.radar-3d-active.radar-3d-focus-mode #legendDock {
    right: calc(var(--phone-safe-right) + 7px) !important;
    bottom: calc(var(--phone-safe-bottom) + 70px) !important;
    max-width: 124px !important;
  }
  body.radar-3d-active.radar-3d-focus-mode #legendControls { max-width: 124px !important; }
  body.radar-3d-active.radar-3d-focus-mode #reflectivityLegend {
    width: 118px !important; max-width: calc(100vw - 18px) !important;
    padding: 6px !important; border-radius: 9px !important;
  }
  body.radar-3d-active.radar-3d-focus-mode #reflectivityLegend .legend-title { font-size: 8px !important; }
  body.radar-3d-active.radar-3d-focus-mode #reflectivityLegend .legend-values { font-size: 6px !important; }
  /* Align the transfer-function button with the left edge of the shifted 3D HUD. */
  body.radar-3d-active.radar-3d-focus-mode .radar-3d-transfer-button {
    left: calc(var(--phone-safe-left) + 57px) !important;
    right: auto !important;
  }
  /* Phone information dialogs live only in the clear space between attribution and Layers. */
  .information-panel,
  .known-problems-panel {
    top: calc(var(--phone-safe-top) + 98px) !important;
    bottom: calc(var(--phone-panel-bottom) + 54px) !important;
    left: calc(var(--phone-safe-left) + 7px) !important;
    right: calc(var(--phone-safe-right) + 7px) !important;
    width: auto !important; max-height: none !important;
    min-height: 0 !important;
  }
  .information-panel { display: flex; flex-direction: column; }
  .information-panel-body,
  .known-problems-body {
    min-height: 0 !important; max-height: none !important; flex: 1 1 auto;
    overflow-y: auto !important; overscroll-behavior: contain;
  }
}
body.radar-3d-active .is-disabled-in-3d { pointer-events: none !important; }


/* r26 — final 3D control spacing and phone clean-view escape fixes. */
@media (min-width: 821px) {
  /* Keep a visible gap under the 3D status cassette at every desktop UI scale. */
  body.radar-3d-active .radar-3d-transfer-button {
    top: 326px !important;
  }
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  /* The 3D clean-view button must remain reachable after clean view is enabled.
     Anchor it immediately left of Layers, which is also deliberately retained. */
  body.radar-3d-active .radar-3d-focus-button,
  body.radar-3d-active.radar-3d-focus-mode .radar-3d-focus-button,
  body.radar-3d-active.mobile-data-focus-mode .radar-3d-focus-button {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1210 !important;
    top: auto !important;
    left: auto !important;
    right: calc(var(--phone-safe-right) + 101px) !important;
    bottom: calc(var(--phone-safe-bottom) + 70px) !important;
    transform: none !important;
  }

  /* 3D clean view is genuinely undisturbed on phones too. */
  body.radar-3d-active.radar-3d-focus-mode .quick-map-tools {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Keep Layers itself reachable next to the 3D clean-view escape button. */
  body.radar-3d-active.radar-3d-focus-mode #legendDock {
    bottom: calc(var(--phone-safe-bottom) + 70px) !important;
  }
  body.radar-3d-active.radar-3d-focus-mode #mobileLegendButton {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* v6.32.16 r33 — reliable server-backed TEST DATA password dialog. */
dialog.test-data-password-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 18px;
  border: 0;
  box-sizing: border-box;
  background: transparent;
  color: inherit;
  overflow: hidden;
  place-items: center;
  z-index: 2147483000;
}
dialog.test-data-password-dialog[open] {
  display: grid !important;
}
dialog.test-data-password-dialog:not([open]),
dialog.test-data-password-dialog[hidden],
dialog.test-data-password-dialog.is-hidden {
  display: none !important;
}
dialog.test-data-password-dialog::backdrop {
  background: rgba(15, 23, 42, .56);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.test-data-password-card {
  width: min(390px, calc(100vw - 30px));
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(100, 116, 139, .35);
  border-radius: 16px;
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 20px 55px rgba(15, 23, 42, .32);
  color: #0f172a;
}
.test-data-password-card > strong {
  font-size: 18px;
  line-height: 1.2;
}
.test-data-password-card > p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
}
.test-data-password-badge {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.test-data-password-label {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  color: #334155;
}
.test-data-password-card input[type="password"] {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid rgba(100, 116, 139, .42);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  outline: none;
}
.test-data-password-card input[type="password"]:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}
.test-data-password-error {
  min-height: 18px;
  color: #b91c1c !important;
  font-size: 11px !important;
  font-weight: 750;
}
.test-data-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.test-data-password-actions button {
  min-width: 90px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid rgba(100, 116, 139, .30);
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
  cursor: pointer;
}
.test-data-password-actions .test-data-password-submit {
  border-color: #6d28d9;
  background: #7c3aed;
  color: #fff;
}
.test-data-password-actions button:disabled {
  opacity: .55;
  cursor: wait;
}
body.ui-dark .test-data-password-card {
  border-color: rgba(148, 163, 184, .28);
  background: #111827;
  color: #f8fafc;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .52);
}
body.ui-dark .test-data-password-card > p,
body.ui-dark .test-data-password-label {
  color: #cbd5e1;
}
body.ui-dark .test-data-password-card input[type="password"] {
  border-color: rgba(148, 163, 184, .32);
  background: #0f172a;
  color: #f8fafc;
}
body.ui-dark .test-data-password-actions button {
  border-color: rgba(148, 163, 184, .30);
  background: #1e293b;
  color: #e2e8f0;
}
body.ui-dark .test-data-password-actions .test-data-password-submit {
  border-color: #8b5cf6;
  background: #7c3aed;
  color: #fff;
}
@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  dialog.test-data-password-dialog {
    padding: 12px;
  }
  .test-data-password-card {
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 15px;
    border-radius: 14px;
  }
}


/* r35 — phone 3D focus control shares the Layers anchor.
   Keeping both buttons in the same dock row means the focus toggle inherits
   every vertical movement of Layers and remains in the same stacking context,
   so it cannot fall under the timeline or become untappable after activation. */
.mobile-legend-actions {
  display: contents;
}
.mobile-legend-actions .radar-3d-focus-button {
  display: none !important;
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .mobile-legend-actions {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  /* The focus toggle is intentionally not positioned against the viewport.
     Its position is controlled by #legendDock, exactly like Layers. */
  .mobile-legend-actions .radar-3d-focus-button,
  body.radar-3d-active .mobile-legend-actions .radar-3d-focus-button,
  body.radar-3d-active.radar-3d-focus-mode .mobile-legend-actions .radar-3d-focus-button,
  body.radar-3d-active.mobile-data-focus-mode .mobile-legend-actions .radar-3d-focus-button {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 14px !important;
    z-index: auto !important;
  }

  .mobile-legend-actions .radar-3d-focus-button {
    display: none !important;
  }

  body.radar-3d-active .mobile-legend-actions .radar-3d-focus-button,
  body.radar-3d-active.radar-3d-focus-mode .mobile-legend-actions .radar-3d-focus-button,
  body.radar-3d-active.mobile-data-focus-mode .mobile-legend-actions .radar-3d-focus-button {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* The row remains available even while the dock is expanded. */
  .legend-dock.mobile-expanded .mobile-legend-actions {
    width: 100%;
    align-self: stretch;
  }

  body.radar-3d-active.radar-3d-focus-mode #legendDock {
    max-width: 144px !important;
  }
}


/* r36 — 3D phone HUD alignment, desktop help placement and true 2D-tool lockout. */
body.radar-3d-active .quick-map-tool.is-disabled-in-3d {
  opacity: .38 !important;
  filter: grayscale(1) saturate(.15) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

@media (min-width: 821px) {
  /* Keep the 3D interaction hint clear of the bottom transparency/legend stack. */
  body.radar-3d-active .radar-3d-interaction-help {
    top: 76px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
  }

  /* Project Information opens in the exact desktop dialog zone used by Known problems. */
  .information-panel {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(520px, calc(100vw - 40px)) !important;
    max-height: min(78dvh, 720px) !important;
    transform: translate(-50%, -50%) !important;
  }
  .information-panel-body {
    max-height: calc(min(78dvh, 720px) - 60px) !important;
  }
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  /* In phone 3D clean/focus mode, hug the left safe edge.  The transfer editor
     button uses the same x anchor, so the two pieces stay visually aligned. */
  body.radar-3d-active.radar-3d-focus-mode .radar-3d-hud {
    left: calc(var(--phone-safe-left) + 7px) !important;
    max-width: calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 64px) !important;
  }
  body.radar-3d-active.radar-3d-focus-mode .radar-3d-transfer-button {
    left: calc(var(--phone-safe-left) + 7px) !important;
    right: auto !important;
  }
}

/* r37 — compact/stable phone cross-section panel and unmistakable active quick tools. */
.quick-map-tool.is-enabled,
.quick-map-tool[aria-pressed="true"] {
  border-color: #22c55e !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .14), var(--shadow) !important;
}
body.ui-dark .quick-map-tool.is-enabled,
body.ui-dark .quick-map-tool[aria-pressed="true"] {
  border-color: #22c55e !important;
  background: #14532d !important;
  color: #dcfce7 !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .22), var(--shadow) !important;
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  /* The plot is a bottom sheet, not a full-height phone dialog.  Its bottom edge
     sits immediately above the two quick-map buttons (measure/cross-section). */
  .cross-section-panel {
    top: auto !important;
    bottom: calc(var(--phone-panel-bottom) + 49px) !important;
    left: calc(var(--phone-safe-left) + 7px) !important;
    right: calc(var(--phone-safe-right) + 7px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(52dvh, 470px, calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 64px)) !important;
    transform: none !important;
    overflow: hidden !important;
  }
  .cross-section-header {
    min-height: 50px !important;
    padding: 7px 8px 7px 12px !important;
  }
  .cross-section-header h2 { font-size: 14px !important; }
  .cross-section-header p { margin-top: 2px !important; font-size: 10px !important; }
  .cross-section-header button {
    width: 34px !important; height: 34px !important; flex-basis: 34px !important;
  }
  .cross-section-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: min(44dvh, 410px, calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 116px)) !important;
    overflow: auto !important;
    padding: 5px !important;
  }
  .cross-section-image {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  .cross-section-status { min-height: 104px !important; padding: 14px !important; }
}


/* r38 — desktop cross-section stays above bottom controls and can be dragged by its header. */
@media (min-width: 821px) and (min-height: 601px), (min-width: 961px) {
  .cross-section-panel {
    bottom: 128px;
    max-height: calc(100dvh - 196px);
    resize: none !important;
  }
  .cross-section-header {
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  .cross-section-panel.is-dragging .cross-section-header { cursor: grabbing; }
  .cross-section-header button { cursor: pointer; }
}

/* r39 — keep the phone observation-validity badge visible above the Layers drawer.
   The normal phone position remains near the lower controls. Only while the
   Layers dock is expanded do we move the badge to the clear area below the
   top bar, where the bottom-anchored Layers cassette cannot cover it. */
@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .legend-dock.mobile-expanded ~ .observation-computation-time:not(.is-hidden):not([hidden]) {
    top: calc(var(--phone-safe-top) + 66px) !important;
    bottom: auto !important;
    z-index: 1188 !important;
    transform: translateX(-50%) !important;
  }
}

/* r53 — grouped radar parameters + WET/DRY precipitation ensemble UI. */
.parameter-control {
  position: relative;
  overflow: visible;
}
.parameter-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%);
}
.parameter-menu-button {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  text-align: left;
}
.parameter-menu-button:disabled {
  cursor: default;
  opacity: .58;
}
.parameter-menu-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parameter-menu-chevron {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  transition: transform .16s ease;
}
.parameter-menu-open .parameter-menu-chevron { transform: rotate(180deg); }
.parameter-menu {
  position: absolute;
  z-index: 5200;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  width: min(470px, calc(100vw - 22px));
  max-height: min(72vh, 650px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 7px;
  border: 1px solid rgba(100,116,139,.30);
  border-radius: 12px;
  background: rgba(248,250,252,.985);
  color: #172033;
  box-shadow: 0 18px 48px rgba(15,23,42,.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.parameter-menu.is-hidden,
.parameter-menu[hidden] { display: none !important; }
/* r54: the parameter dropdown is portalled directly under <body> while open.
   This avoids clipping by the desktop topbar and the scrollable phone controls
   panel, both of which legitimately use overflow at different breakpoints. */
.parameter-menu.parameter-menu-portal {
  position: fixed !important;
  z-index: 6500 !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.parameter-accordion-group + .parameter-accordion-group { margin-top: 5px; }
.parameter-accordion-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 6px;
  align-items: stretch;
}
.parameter-accordion-toggle {
  min-height: 37px;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #e5e7eb;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}
.parameter-accordion-toggle:hover { background: #dce1e7; }
.parameter-accordion-chevron {
  font-size: 15px;
  line-height: 1;
  transition: transform .15s ease;
}
.parameter-accordion-toggle[aria-expanded="true"] .parameter-accordion-chevron {
  transform: rotate(180deg);
}
.precipitation-info-button {
  width: 37px;
  min-height: 37px;
  border: 1px solid rgba(220,38,38,.24);
  border-radius: 8px;
  background: rgba(254,226,226,.92);
  color: #dc2626;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  cursor: pointer;
}
.precipitation-info-button:hover { background: #fee2e2; }
.parameter-accordion-body {
  display: grid;
  gap: 2px;
  padding: 4px 2px 2px;
}
.parameter-accordion-body[hidden] { display: none !important; }
.parameter-menu-option {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 7px 9px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.parameter-menu-option:hover:not(:disabled) { background: rgba(219,234,254,.80); }
.parameter-menu-option.is-selected { background: #dbeafe; box-shadow: inset 0 0 0 1px rgba(37,99,235,.22); }
.parameter-menu-option:disabled { opacity: .48; cursor: not-allowed; }
.parameter-menu-option.is-in-work:disabled { opacity: 1; }
.parameter-status-in-work { color: #dc2626; font-weight: 950; }
.qpe-member-tag { font-weight: 950; }
.qpe-member-wet { color: #2563eb; }
.qpe-member-dry { color: #a16207; }

body.ui-dark .parameter-menu {
  background: rgba(17,24,39,.985);
  color: #f8fafc;
  border-color: rgba(148,163,184,.35);
  box-shadow: 0 20px 54px rgba(0,0,0,.48);
}
body.ui-dark .parameter-accordion-toggle {
  background: #343a42;
  color: #f8fafc;
}
body.ui-dark .parameter-accordion-toggle:hover { background: #3f4650; }
body.ui-dark .parameter-menu-option:hover:not(:disabled) { background: rgba(30,64,175,.30); }
body.ui-dark .parameter-menu-option.is-selected { background: rgba(37,99,235,.32); }
body.ui-dark .parameter-status-in-work { color: #ff4d4f; }
body.ui-dark .precipitation-info-button {
  background: rgba(127,29,29,.28);
  border-color: rgba(248,113,113,.35);
  color: #f87171;
}
body.ui-dark .qpe-member-wet { color: #60a5fa; }
body.ui-dark .qpe-member-dry { color: #d4a72c; }

/* The precipitation explanation is a true modal. Its backdrop intentionally
   blurs the whole application while the card itself always has its own scroll
   bar on short phone/desktop viewports. */
dialog.precipitation-info-dialog {
  border: 0;
  padding: 0;
  margin: auto;
  max-width: none;
  max-height: none;
  background: transparent;
  color: inherit;
  overflow: visible;
}
dialog.precipitation-info-dialog:not([open]),
dialog.precipitation-info-dialog[hidden],
dialog.precipitation-info-dialog.is-hidden { display: none !important; }
dialog.precipitation-info-dialog::backdrop {
  background: rgba(2,6,23,.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.precipitation-info-card {
  width: min(700px, calc(100vw - 24px));
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(100,116,139,.28);
  border-radius: 16px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 28px 90px rgba(0,0,0,.42);
}
.precipitation-info-header {
  flex: 0 0 auto;
  padding: 13px 14px 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.24);
}
.precipitation-info-header strong { font-size: 16px; }
.precipitation-info-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: rgba(226,232,240,.85);
  color: #334155;
  font-size: 24px;
  line-height: 30px;
  cursor: pointer;
}
.precipitation-info-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 15px 17px 18px;
  font-size: 14px;
  line-height: 1.55;
  outline: 0;
}
.precipitation-info-scroll p { margin: 0 0 14px; }
.precipitation-info-scroll p:last-child { margin-bottom: 0; }
body.ui-dark .precipitation-info-card {
  background: rgba(17,24,39,.99);
  color: #f8fafc;
  border-color: rgba(148,163,184,.35);
}
body.ui-dark .precipitation-info-header { border-color: rgba(148,163,184,.28); }
body.ui-dark .precipitation-info-close { background: #374151; color: #f8fafc; }

@media (max-width: 720px) {
  .parameter-menu {
    width: min(94vw, 470px);
    max-height: min(66vh, 560px);
    padding: 6px;
  }
  .parameter-accordion-toggle { min-height: 35px; font-size: 12px; padding: 7px 9px; }
  .precipitation-info-button { width: 35px; min-height: 35px; }
  .parameter-menu-option { font-size: 11.5px; padding: 7px 8px; }
  .precipitation-info-card { width: calc(100vw - 18px); max-height: 80vh; }
  .precipitation-info-scroll { padding: 13px 14px 16px; font-size: 13px; line-height: 1.5; }
}

/* r56 — cross-section thermal line defaults and interactive line controls. */
.cross-section-default-setting {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(248,250,252,.78);
}
.cross-section-default-heading { font-size: 12px; font-weight: 800; color: #334155; }
.cross-section-default-setting > small { color: #64748b; font-size: 10px; line-height: 1.3; }
.cross-section-default-choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.cross-section-default-choices label,
.cross-section-overlay-controls label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
  font-weight: 800;
}
.cross-section-default-choices label {
  min-height: 31px;
  padding: 4px 5px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font-size: 10px;
}
.cross-section-default-choices input,
.cross-section-overlay-controls input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #a855f7;
  cursor: pointer;
}
.cross-section-default-choices label:has(input:checked) {
  border-color: #a855f7;
  background: #f3e8ff;
  color: #6b21a8;
}

.cross-section-header {
  justify-content: flex-start;
}
.cross-section-title-block {
  flex: 1 1 190px;
  min-width: 150px;
  max-width: 330px;
  text-align: left;
}
.cross-section-header .cross-section-title-block h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-align: left;
}
.cross-section-header .cross-section-title-block p {
  min-height: 13px;
  margin: 3px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.15;
}
.cross-section-header .cross-section-title-block small {
  display: block;
  min-height: 11px;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 9px;
  line-height: 1.1;
}
.cross-section-overlay-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(53px, 1fr));
  gap: 5px;
  flex: 0 1 300px;
  margin-left: auto;
}
.cross-section-overlay-controls label {
  min-height: 31px;
  padding: 4px 7px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
  color: #334155;
  font-size: 10px;
}
.cross-section-overlay-controls label:has(input:checked) {
  border-color: #a855f7;
  background: #f3e8ff;
  color: #6b21a8;
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.1);
}
.cross-section-header > #crossSectionClose { margin-left: 2px; }

body.ui-dark .cross-section-default-setting {
  background: rgba(15,23,42,.72);
  border-color: #475569;
}
body.ui-dark .cross-section-default-heading,
body.ui-dark .cross-section-default-setting > small { color: #cbd5e1; }
body.ui-dark .cross-section-default-choices label,
body.ui-dark .cross-section-overlay-controls label {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}
body.ui-dark .cross-section-default-choices label:has(input:checked),
body.ui-dark .cross-section-overlay-controls label:has(input:checked) {
  border-color: #c084fc;
  background: #3b1d56;
  color: #f3e8ff;
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .cross-section-header {
    display: grid !important;
    grid-template-columns: minmax(120px, 1fr) auto;
    grid-template-areas:
      "title close"
      "lines lines";
    gap: 5px 7px !important;
    min-height: 79px !important;
    padding: 6px 7px 6px 10px !important;
  }
  .cross-section-title-block { grid-area: title; max-width: none; }
  .cross-section-header > #crossSectionClose { grid-area: close; align-self: start; }
  .cross-section-overlay-controls {
    grid-area: lines;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .cross-section-overlay-controls label { min-height: 27px; padding: 3px 4px; font-size: 9px; }
  .cross-section-overlay-controls input { width: 13px; height: 13px; }
  .cross-section-header .cross-section-title-block h2 { font-size: 13px !important; }
  .cross-section-header .cross-section-title-block p { font-size: 9px !important; }
  .cross-section-header .cross-section-title-block small { font-size: 8px !important; }
  .cross-section-body {
    max-height: min(40dvh, 380px, calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 144px)) !important;
  }
  .cross-section-default-choices { grid-template-columns: repeat(5, minmax(45px, 1fr)); }
}

/* r83 — MAP TYPE accordion, optional hillshade, persistent point values and
   satellite-footprint styling. */
.map-type-control {
  position: relative; min-width: 150px; height: 58px;
  border: 1px solid var(--border); border-radius: 17px;
  background: rgba(241,245,249,.88); color: #334155;
}
.map-type-control > summary {
  height: 100%; padding: 0 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; list-style: none;
  cursor: pointer; user-select: none; font-size: 12px; font-weight: 850;
  letter-spacing: .055em;
}
.map-type-control > summary::-webkit-details-marker { display: none; }
.map-type-chevron { color: #64748b; font-size: 18px; transition: transform .18s ease; }
.map-type-control[open] .map-type-chevron { transform: rotate(180deg); }
.map-type-options {
  position: absolute; z-index: 1250; top: calc(100% + 7px); right: 0;
  width: min(340px, calc(100vw - 24px)); padding: 9px; display: grid; gap: 8px;
  border: 1px solid var(--border); border-radius: 15px;
  background: rgba(255,255,255,.98); box-shadow: 0 18px 48px rgba(15,23,42,.24);
  backdrop-filter: blur(18px);
}
.map-type-options .theme-control { width: 100%; height: 46px; }
.map-type-options .theme-control button { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.map-type-hillshade {
  min-height: 40px; padding: 8px 11px; display: flex; align-items: center; gap: 9px;
  border: 1px solid rgba(148,163,184,.28); border-radius: 11px;
  background: rgba(248,250,252,.92); cursor: pointer; font-size: 11px; font-weight: 800;
}
.map-type-hillshade input { width: 17px; height: 17px; accent-color: #2563eb; }

/* r87 terrain-relief composition.  The reference look is produced by using
   the Esri hillshade as the actual terrain background and placing a translucent
   OSM label/road layer above it.  This preserves fine relief instead of crushing
   the hillshade with extreme contrast/mix-blend filters. */
.leaflet-hillshade-pane { pointer-events: none; opacity: 1; mix-blend-mode: normal; }
body[data-map-theme="light"] .leaflet-hillshade-pane,
body[data-map-theme="intermediate"] .leaflet-hillshade-pane,
body[data-map-theme="dark"] .leaflet-hillshade-pane { opacity: 1; mix-blend-mode: normal; }

body.hillshade-enabled[data-map-theme="light"] .leaflet-layer.osm-basemap-light {
  opacity: .42;
}
body.hillshade-enabled[data-map-theme="intermediate"] .leaflet-layer.osm-basemap-intermediate {
  opacity: .46;
}
body.hillshade-enabled[data-map-theme="dark"] .leaflet-layer.osm-basemap-dark {
  opacity: .50;
}

body[data-map-theme="light"] .wxradar-hillshade-tiles {
  filter: grayscale(1) contrast(1.42) brightness(1.04);
}
body[data-map-theme="intermediate"] .wxradar-hillshade-tiles {
  filter: grayscale(1) contrast(1.50) brightness(.88);
}
body[data-map-theme="dark"] .wxradar-hillshade-tiles {
  filter: invert(1) grayscale(1) contrast(1.38) brightness(.36);
}

/* Restore the map-type layer to full opacity as soon as relief is disabled. */
body:not(.hillshade-enabled) .leaflet-layer.osm-basemap-light,
body:not(.hillshade-enabled) .leaflet-layer.osm-basemap-intermediate,
body:not(.hillshade-enabled) .leaflet-layer.osm-basemap-dark {
  opacity: 1;
}

.satellite-extent-setting {
  display: grid; gap: 8px; padding: 9px 10px;
  border: 1px solid rgba(148,163,184,.30); border-radius: 11px;
  background: rgba(248,250,252,.94);
}
.satellite-extent-heading {
  color: #475569; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .065em;
}
.satellite-extent-toggle { margin: 0; }
.satellite-extent-style-controls { display: grid; gap: 7px; transition: opacity .15s ease; }
.satellite-extent-style-controls.is-disabled { opacity: .45; }
.satellite-extent-style-controls label {
  min-height: 34px; display: grid; grid-template-columns: minmax(88px,1fr) minmax(96px,1fr);
  align-items: center; gap: 10px; color: #334155; font-size: 10px; font-weight: 800;
}
.satellite-extent-style-controls input[type="color"] {
  justify-self: end; width: 52px; height: 30px; padding: 2px;
  border: 1px solid rgba(100,116,139,.35); border-radius: 8px; background: #fff; cursor: pointer;
}
.satellite-extent-style-controls input[type="range"] { width: 100%; accent-color: #16a34a; }
.satellite-extent-style-controls select {
  width: 100%; padding: 6px 7px; border: 1px solid rgba(148,163,184,.32);
  border-radius: 8px; background: #fff; font-size: 10px;
}
.satellite-extent-setting small { color: #64748b; font-size: 9px; line-height: 1.35; }

.radar-value-popup .leaflet-popup-content-wrapper {
  border: 1px solid rgba(30,41,59,.18); border-radius: 13px;
  background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(15,23,42,.24);
  backdrop-filter: blur(12px);
}
.radar-value-popup .leaflet-popup-content { margin: 10px 28px 10px 11px; width: auto !important; }
.radar-value-popup .leaflet-popup-tip { background: rgba(255,255,255,.97); }
.radar-value-popup .leaflet-popup-close-button { top: 3px !important; right: 4px !important; font-size: 20px !important; }
.radar-value-popup-card { min-width: 130px; max-width: 220px; display: grid; gap: 4px; }
.radar-value-popup-title {
  color: #64748b; font-size: 9px; line-height: 1.2; font-weight: 900;
  text-transform: uppercase; letter-spacing: .045em;
}
.radar-value-popup-value {
  display: flex; align-items: center; gap: 7px; color: #111827;
  font-size: 17px; line-height: 1.15; font-weight: 900;
}
.radar-value-popup-swatch {
  width: 13px; height: 13px; flex: 0 0 13px; border-radius: 3px;
  border: 1px solid rgba(15,23,42,.30); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.radar-value-popup-meta { color: #94a3b8; font-size: 9px; font-weight: 700; }

body.ui-dark .map-type-control,
body.ui-dark .map-type-options,
body.ui-dark .map-type-hillshade,
body.ui-dark .satellite-extent-setting {
  border-color: rgba(148,163,184,.30); background: rgba(15,23,42,.96); color: #e5e7eb;
}
body.ui-dark .map-type-options .theme-control { background: rgba(30,41,59,.92); }
body.ui-dark .satellite-extent-style-controls label,
body.ui-dark .satellite-extent-heading,
body.ui-dark .satellite-extent-setting small { color: #cbd5e1; }
body.ui-dark .radar-value-popup .leaflet-popup-content-wrapper,
body.ui-dark .radar-value-popup .leaflet-popup-tip { background: rgba(23,32,51,.98); color: #e5e7eb; }
body.ui-dark .radar-value-popup .leaflet-popup-close-button { color: #e5e7eb !important; }
body.ui-dark .radar-value-popup-value { color: #f8fafc; }
body.ui-dark .radar-value-popup-title { color: #94a3b8; }

@media (max-width: 960px) {
  .mobile-controls-panel .map-type-control { width: 100%; min-width: 0; height: 52px; }
  .mobile-controls-panel .map-type-options {
    position: static; width: 100%; margin-top: 1px; box-shadow: none; background: rgba(248,250,252,.98);
  }
  .mobile-controls-panel .map-type-control[open] { height: auto; }
  .mobile-controls-panel .map-type-control[open] > summary { height: 52px; }
  .mobile-controls-panel .map-type-options .theme-control { height: 44px; }
  body.ui-dark .mobile-controls-panel .map-type-options { background: rgba(15,23,42,.98); }
}

/* r84 — MAP TYPE visibility/row sizing and compact persistent point cassette. */
.map-type-control {
  box-sizing: border-box;
}

/* The desktop topbar deliberately clips its children in the normal state. The
   MAP TYPE dropdown is the one child that is meant to leave the bar. */
@media (min-width: 821px) {
  #topbar.map-type-menu-open {
    overflow: visible;
  }
  .map-type-control {
    min-width: clamp(116px, 10vw, 150px);
    height: 43px;
    border-radius: 13px;
    flex: 0 0 auto;
  }
  .map-type-control > summary {
    height: 43px;
    padding: 0 10px;
    gap: 7px;
    font-size: 9px;
    letter-spacing: .05em;
  }
  .map-type-chevron {
    font-size: 16px;
  }
  .map-type-options {
    top: calc(100% + 6px);
  }
}

/* Point values stay visually secondary to the meteorological field. Use fixed
   compact CSS-pixel dimensions so zooming the geographic map does not make the
   readout dominate the view. */
.radar-value-popup .leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 7px 20px rgba(15,23,42,.20);
}
.radar-value-popup .leaflet-popup-content {
  margin: 7px 22px 7px 8px;
  width: auto !important;
  min-width: 0 !important;
}
.radar-value-popup .leaflet-popup-close-button {
  top: 1px !important;
  right: 2px !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 16px !important;
  line-height: 19px !important;
}
.radar-value-popup-card {
  min-width: 96px;
  max-width: 168px;
  gap: 2px;
}
.radar-value-popup-title {
  font-size: 7.5px;
  line-height: 1.15;
  letter-spacing: .035em;
}
.radar-value-popup-value {
  gap: 5px;
  font-size: 13px;
  line-height: 1.1;
}
.radar-value-popup-swatch {
  width: 10px;
  height: 10px;
  flex-basis: 10px;
  border-radius: 2px;
}
.radar-value-popup-meta {
  font-size: 7.5px;
  line-height: 1.15;
}

@media (max-width: 820px) {
  .mobile-controls-panel .map-type-control {
    height: 52px;
    border-radius: 13px;
  }
  .mobile-controls-panel .map-type-control > summary {
    min-height: 52px;
  }
  .radar-value-popup-card {
    min-width: 92px;
    max-width: 154px;
  }
  .radar-value-popup-value {
    font-size: 12px;
  }
}
@media (max-width: 820px) {
  .mobile-controls-panel .map-type-control[open] { height: auto; }
}

/* r93 — multi-model hourly point meteograms ----------------------------------- */
.meteogram-tool-icon svg {
  width: 25px;
  height: 25px;
  overflow: visible;
}
.meteogram-tool-icon .meteo-sun {
  fill: #facc15;
  stroke: #ca8a04;
  stroke-width: 1;
}
.meteogram-tool-icon .meteo-cloud {
  fill: #cbd5e1;
  stroke: #475569;
  stroke-width: 1.15;
  stroke-linejoin: round;
}
.meteogram-tool-icon .meteo-chart {
  fill: none;
  stroke: #2563eb;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.meteogram-hint { max-width: min(560px, calc(100vw - 32px)); }
.meteogram-panel {
  position: fixed;
  z-index: 1510;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(1180px, calc(100vw - 28px));
  height: min(690px, calc(100vh - 112px));
  min-width: 560px;
  min-height: 420px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: none;
  border: 1px solid rgba(15, 23, 42, .22);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 60px rgba(15,23,42,.28);
  color: #0f172a;
  backdrop-filter: blur(10px);
}
.meteogram-panel.is-hidden { display: none !important; }
.meteogram-panel.is-dragging { user-select: none; }
.meteogram-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid rgba(148,163,184,.35);
  cursor: move;
  touch-action: none;
  flex: 0 0 auto;
}
.meteogram-header-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.meteogram-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.meteogram-model-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  color: #64748b;
  cursor: default;
}
.meteogram-model-picker select {
  height: 34px;
  min-width: 112px;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 9px;
  padding: 0 28px 0 9px;
  background: rgba(248,250,252,.94);
  color: #0f172a;
  font: inherit;
  cursor: pointer;
}
.meteogram-header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}
.meteogram-header p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #64748b;
}
#meteogramClose {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: rgba(148,163,184,.16);
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.meteogram-status {
  min-height: 43px;
  display: flex;
  align-items: center;
  padding: 9px 14px;
  font-size: 13px;
  color: #475569;
  flex: 0 0 auto;
}
.meteogram-status:empty {
  display: none;
  min-height: 0;
  padding: 0;
}
.meteogram-panel.is-loading .meteogram-status::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 9px;
  border: 2px solid rgba(37,99,235,.25);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: meteogram-spin .8s linear infinite;
}
@keyframes meteogram-spin { to { transform: rotate(360deg); } }
.meteogram-chart-shell {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 54px;
  flex: 1 1 auto;
  min-height: 280px;
  overflow: hidden;
  border-top: 1px solid rgba(226,232,240,.8);
  border-bottom: 1px solid rgba(226,232,240,.8);
  background: #fff;
}
.meteogram-chart-shell.is-hidden { display: none; }
.meteogram-row-labels {
  position: relative;
  z-index: 4;
  overflow: hidden;
  background: rgba(248,250,252,.985);
  color: #334155;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  pointer-events: none;
}
.meteogram-row-labels-left {
  border-right: 1px solid rgba(148,163,184,.30);
  text-align: right;
}
.meteogram-row-labels-right {
  border-left: 1px solid rgba(148,163,184,.30);
  text-align: left;
}
.meteogram-row-label {
  position: absolute;
  left: 6px;
  right: 6px;
  transform: translateY(-50%);
  white-space: nowrap;
}
.meteogram-row-labels-left .meteogram-row-label { right: 10px; }
.meteogram-row-labels-right .meteogram-row-label { left: 10px; }
.meteogram-scroll {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: contain;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  background: #fff;
  cursor: grab;
  outline: none;
}
.meteogram-scroll::-webkit-scrollbar { display: none; }
.meteogram-scroll:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(37,99,235,.42);
}
.meteogram-scroll.is-pointer-dragging {
  cursor: grabbing;
  user-select: none;
}
#meteogramCanvas {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  background: #fff;
}
.meteogram-slider-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 4px;
  color: #64748b;
  font-size: 12px;
  flex: 0 0 auto;
}
.meteogram-slider-wrap.is-hidden { display: none; }
#meteogramSlider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: #2563eb;
}
.meteogram-footer {
  padding: 5px 14px 8px;
  font-size: 11px;
  color: #64748b;
  flex: 0 0 auto;
}
.meteogram-resize-handle {
  position: absolute;
  z-index: 9;
  width: 18px;
  height: 18px;
  touch-action: none;
  background: transparent;
}
.meteogram-resize-nw { left: -2px; top: -2px; cursor: nwse-resize; }
.meteogram-resize-ne { right: -2px; top: -2px; cursor: nesw-resize; }
.meteogram-resize-sw { left: -2px; bottom: -2px; cursor: nesw-resize; }
.meteogram-resize-se { right: -2px; bottom: -2px; cursor: nwse-resize; }
.meteogram-resize-handle::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: rgba(100,116,139,.55);
  border-style: solid;
}
.meteogram-resize-nw::after { left: 3px; top: 3px; border-width: 2px 0 0 2px; }
.meteogram-resize-ne::after { right: 3px; top: 3px; border-width: 2px 2px 0 0; }
.meteogram-resize-sw::after { left: 3px; bottom: 3px; border-width: 0 0 2px 2px; }
.meteogram-resize-se::after { right: 3px; bottom: 3px; border-width: 0 2px 2px 0; }
body.ui-dark .meteogram-panel {
  background: rgba(15,23,42,.98);
  border-color: rgba(148,163,184,.28);
  color: #e2e8f0;
}
body.ui-dark .meteogram-header p,
body.ui-dark .meteogram-status,
body.ui-dark .meteogram-footer,
body.ui-dark .meteogram-slider-wrap { color: #94a3b8; }
body.ui-dark .meteogram-chart-shell,
body.ui-dark .meteogram-scroll,
body.ui-dark #meteogramCanvas { background: #111827; }
body.ui-dark .meteogram-row-labels {
  background: rgba(15,23,42,.985);
  color: #cbd5e1;
}
body.ui-dark #meteogramClose { background: rgba(148,163,184,.14); }
body.ui-dark .meteogram-model-picker { color: #94a3b8; }
body.ui-dark .meteogram-model-picker select {
  background: rgba(30,41,59,.96);
  border-color: rgba(148,163,184,.34);
  color: #e2e8f0;
}
body.ui-dark .meteogram-resize-handle::after { border-color: rgba(203,213,225,.60); }

@media (max-width: 760px) {
  .meteogram-panel {
    left: 6px;
    right: 6px;
    top: calc(var(--phone-safe-top, 0px) + 62px);
    bottom: 88px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    transform: none;
    resize: none;
    border-radius: 13px;
  }
  .meteogram-header {
    padding: 10px 11px 7px;
    cursor: default;
    touch-action: auto;
  }
  .meteogram-header h2 { font-size: 16px; }
  .meteogram-header-actions { gap: 5px; }
  .meteogram-model-picker > span { display: none; }
  .meteogram-model-picker select { min-width: 92px; height: 32px; font-size: 10.5px; padding-left: 7px; }
  .meteogram-resize-handle { display: none; }
  .meteogram-status { padding: 7px 11px; min-height: 38px; }
  .meteogram-chart-shell {
    grid-template-columns: 96px minmax(0, 1fr) 40px;
    min-height: 0;
  }
  .meteogram-row-labels { font-size: 9.5px; }
  .meteogram-row-labels-left .meteogram-row-label { right: 6px; }
  .meteogram-row-labels-right .meteogram-row-label { left: 5px; }
  .meteogram-scroll {
    scrollbar-width: none;
    cursor: default;
    touch-action: pan-x pan-y;
  }
  .meteogram-scroll::-webkit-scrollbar { display: none; }
  .meteogram-slider-wrap { display: none !important; }
  .meteogram-footer { padding: 5px 11px 7px; }
}

/* r95 — prefetched meteograms; r94 duration/mobile layout preserved ---------- */
.meteogram-hint {
  top: 76px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 360px));
  text-align: center;
  pointer-events: none;
}
.meteogram-duration-picker select,
.meteogram-model-picker select {
  height: 34px;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 9px;
  padding: 0 26px 0 9px;
  background: rgba(248,250,252,.94);
  color: #0f172a;
  font: inherit;
  cursor: pointer;
}
.meteogram-duration-picker select { min-width: 126px; font-size: 11px; font-weight: 700; }
.meteogram-model-picker select { min-width: 205px; }
.meteogram-close-stack { display:flex; flex-direction:column; align-items:center; gap:2px; }
.meteogram-help-button {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #dc2626; font-size: 17px; font-weight: 900;
  line-height: 1; cursor: pointer;
}
.meteogram-help-button:hover { background: rgba(220,38,38,.08); }
.meteogram-help-popover {
  flex: 0 0 auto; margin: 7px 12px 0; padding: 9px 11px;
  border: 1px solid rgba(220,38,38,.22); border-radius: 10px;
  background: rgba(254,242,242,.96); color: #334155; font-size: 11px; line-height: 1.35;
}
.meteogram-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; }
#meteogramCoordinates { margin-left:auto; white-space:nowrap; text-align:right; }
body.ui-dark .meteogram-duration-picker select {
  background: rgba(30,41,59,.96); border-color: rgba(148,163,184,.34); color:#e2e8f0;
}
body.ui-dark .meteogram-help-popover { background:rgba(69,10,10,.34); border-color:rgba(248,113,113,.30); color:#e2e8f0; }

@media (max-width: 760px) {
  .meteogram-hint {
    top: calc(var(--phone-safe-top, 0px) + 72px);
    left: 8px; right: 8px; transform:none; max-width:none;
    font-size: 11px; padding: 7px 9px;
  }
  .meteogram-header { align-items:flex-start; gap:6px; }
  .meteogram-header-copy { flex: 1 1 auto; min-width:80px; }
  .meteogram-header-actions { flex-wrap:nowrap; align-items:flex-start; max-width:74%; }
  .meteogram-duration-picker select { min-width: 105px; max-width: 112px; height:30px; font-size:9.5px; padding-left:5px; }
  .meteogram-model-picker select { min-width: 135px; max-width: 156px; height:30px; font-size:9px; padding-left:5px; }
  .meteogram-close-stack #meteogramClose { width:30px; height:30px; }
  .meteogram-help-button { width:18px; height:18px; font-size:15px; }
  .meteogram-help-popover { margin:5px 7px 0; padding:7px 8px; font-size:9.5px; }
  .meteogram-chart-shell { grid-template-columns: 72px minmax(0, 1fr) 32px; }
  .meteogram-row-labels { font-size: 8.75px; }
  .meteogram-row-label { left: 3px; right: 3px; }
  .meteogram-row-labels-left .meteogram-row-label { right: 3px; }
  .meteogram-row-labels-right .meteogram-row-label { left: 3px; }
  .meteogram-footer { padding-left:7px; padding-right:7px; font-size:9px; gap:5px; }
  #meteogramCoordinates { font-size:8.5px; }
  body.meteogram-open-mobile .timeline-panel {
    transform: translateY(calc(100% + var(--phone-safe-bottom, 0px) + 24px));
    opacity: 0; pointer-events: none;
  }
}

/* r96 daily/hourly meteogram controls and compact mobile chart */
.meteogram-mode-picker select {
  min-width: 84px;
  height: 34px;
  border: 1px solid rgba(71,85,105,.35);
  border-radius: 9px;
  background: rgba(255,255,255,.96);
  color: #0f172a;
  font: 700 11px/1 Spotify Mix, DM Sans, system-ui, sans-serif;
  padding: 0 22px 0 8px;
}
body.ui-dark .meteogram-mode-picker select {
  background: rgba(15,23,42,.96);
  color: #f8fafc;
  border-color: rgba(148,163,184,.35);
}
.meteogram-mobile-mode { display: none; }
@media (max-width: 760px) {
  .meteogram-mode-picker { display: none !important; }
  .meteogram-chart-shell { grid-template-columns: 58px minmax(0, 1fr) 26px !important; }
  .meteogram-row-labels { font-size: 8.1px !important; }
  .meteogram-row-labels-left .meteogram-row-label {
    right: 1px !important;
    white-space: normal !important;
    line-height: 1.05 !important;
    overflow-wrap: normal;
    word-break: normal;
  }
  .meteogram-row-labels-right .meteogram-row-label { left: 1px !important; }
  .meteogram-mobile-mode {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 5px 2px;
  }
  .meteogram-mobile-mode button {
    min-width: 74px;
    height: 28px;
    border: 1px solid rgba(71,85,105,.32);
    border-radius: 8px;
    background: rgba(226,232,240,.85);
    color: #334155;
    font: 800 10px/1 Spotify Mix, DM Sans, system-ui, sans-serif;
  }
  .meteogram-mobile-mode button.is-active {
    background: #16a34a;
    color: #fff;
    border-color: #15803d;
  }
  body.ui-dark .meteogram-mobile-mode button {
    background: rgba(51,65,85,.9);
    color: #e2e8f0;
    border-color: rgba(148,163,184,.28);
  }
  body.ui-dark .meteogram-mobile-mode button.is-active {
    background: #16a34a;
    color: #fff;
  }
}
.meteogram-mobile-mode.is-hidden { display: none !important; }

/* r101 — meteogram cloud stickers + in-panel location search ---------------- */
.meteogram-location-search {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  z-index: 8;
}
.meteogram-location-search-box {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(71,85,105,.35);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
}
.meteogram-location-search input {
  width: 150px;
  min-width: 82px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font: 650 10.5px/1 Spotify Mix, DM Sans, system-ui, sans-serif;
}
.meteogram-location-search input::placeholder { color: #94a3b8; }
.meteogram-location-search button[type="submit"] {
  flex: 0 0 31px;
  width: 31px;
  height: 32px;
  border: 0;
  border-left: 1px solid rgba(71,85,105,.22);
  background: rgba(226,232,240,.78);
  color: #334155;
  font: 900 18px/1 Spotify Mix, DM Sans, system-ui, sans-serif;
  cursor: pointer;
}
.meteogram-location-search.is-searching button[type="submit"] { opacity: .55; cursor: wait; }
.meteogram-location-results {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: min(310px, 76vw);
  max-height: 240px;
  overflow: auto;
  padding: 4px;
  border: 1px solid rgba(100,116,139,.35);
  border-radius: 10px;
  background: rgba(255,255,255,.99);
  box-shadow: 0 12px 30px rgba(15,23,42,.22);
  z-index: 24;
}
.meteogram-location-results.is-hidden { display: none !important; }
.meteogram-location-result {
  width: 100%;
  display: block;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}
.meteogram-location-result:hover,
.meteogram-location-result:focus-visible { background: rgba(37,99,235,.10); outline: none; }
.meteogram-location-result strong,
.meteogram-location-result span { display: block; }
.meteogram-location-result strong { font-size: 11px; line-height: 1.2; }
.meteogram-location-result span {
  margin-top: 2px;
  color: #64748b;
  font-size: 9.5px;
  line-height: 1.25;
  white-space: normal;
}
.meteogram-location-empty {
  display: block;
  padding: 8px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.25;
}
body.ui-dark .meteogram-location-search-box {
  background: rgba(15,23,42,.96);
  border-color: rgba(148,163,184,.35);
}
body.ui-dark .meteogram-location-search input { color: #f8fafc; }
body.ui-dark .meteogram-location-search button[type="submit"] {
  background: rgba(51,65,85,.90);
  color: #e2e8f0;
  border-left-color: rgba(148,163,184,.24);
}
body.ui-dark .meteogram-location-results {
  background: rgba(15,23,42,.99);
  border-color: rgba(148,163,184,.34);
}
body.ui-dark .meteogram-location-result { color: #f8fafc; }
body.ui-dark .meteogram-location-result span,
body.ui-dark .meteogram-location-empty { color: #94a3b8; }
body.ui-dark .meteogram-location-result:hover,
body.ui-dark .meteogram-location-result:focus-visible { background: rgba(59,130,246,.18); }
.meteogram-location-search-mobile { display: none; }
.meteogram-mobile-mode-buttons { display: flex; align-items: center; gap: 6px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .meteogram-location-search input { width: 112px; }
  .meteogram-model-picker select { min-width: 172px; }
  .meteogram-duration-picker select { min-width: 112px; }
}

@media (max-width: 760px) {
  .meteogram-location-search-desktop { display: none !important; }
  .meteogram-location-search-mobile {
    display: block;
    flex: 1 1 145px;
    max-width: 210px;
  }
  .meteogram-mobile-mode {
    position: relative;
    flex-wrap: wrap;
    gap: 5px 7px;
    padding: 4px 5px 3px;
  }
  .meteogram-mobile-mode-buttons { flex: 0 0 auto; }
  .meteogram-location-search-mobile input {
    width: 122px;
    min-width: 76px;
    height: 28px;
    font-size: 9.5px;
  }
  .meteogram-location-search-mobile button[type="submit"] {
    width: 29px;
    height: 28px;
    flex-basis: 29px;
    font-size: 17px;
  }
  .meteogram-location-results-mobile {
    top: auto;
    bottom: calc(100% + 5px);
    left: auto;
    right: 0;
    width: min(285px, calc(100vw - 26px));
    max-height: min(240px, 38vh);
  }
}

/* r102 — compact persistent meteogram launcher, clean search cards, fog UI ---- */
.meteogram-launcher {
  position: fixed;
  z-index: 1512;
  top: 72px;
  left: 50%;
  width: min(390px, calc(100vw - 28px));
  transform: translateX(-50%);
  pointer-events: auto;
}
.meteogram-launcher.is-hidden { display: none !important; }
.meteogram-launcher-search { width: 100%; }
.meteogram-launcher .meteogram-location-search-box {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 30px rgba(15,23,42,.22);
  backdrop-filter: blur(10px);
}
.meteogram-launcher .meteogram-location-search input {
  width: auto;
  flex: 1 1 auto;
  height: 40px;
  padding-left: 12px;
  font-size: 12px;
}
.meteogram-launcher .meteogram-search-button,
.meteogram-launcher .meteogram-my-location-button { height: 40px; }
.meteogram-launcher-results {
  top: calc(100% + 7px);
  width: 100%;
  max-height: min(330px, 48vh);
}

.meteogram-my-location-button {
  flex: 0 0 34px;
  width: 34px;
  height: 32px;
  border: 0;
  border-left: 1px solid rgba(71,85,105,.22);
  background: rgba(241,245,249,.92);
  color: #2563eb;
  font: 900 17px/1 Spotify Mix, DM Sans, system-ui, sans-serif;
  cursor: pointer;
}
.meteogram-my-location-button:hover { background: rgba(219,234,254,.96); }
.meteogram-my-location-button:disabled,
.meteogram-my-location-button.is-locating { opacity: .55; cursor: wait; }
body.ui-dark .meteogram-my-location-button {
  background: rgba(51,65,85,.90);
  color: #93c5fd;
  border-left-color: rgba(148,163,184,.24);
}

/* Search results are cards with their own text column. This prevents long OSM
   display names from colliding with the next result on narrow screens. */
.meteogram-location-results {
  padding: 6px;
  overscroll-behavior: contain;
}
.meteogram-location-result {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-height: 50px;
  padding: 8px;
  margin: 0 0 5px;
  border: 1px solid rgba(148,163,184,.23);
  border-radius: 9px;
  background: rgba(248,250,252,.72);
  overflow: hidden;
}
.meteogram-location-result:last-child { margin-bottom: 0; }
.meteogram-location-result-pin {
  display: grid !important;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 !important;
  border-radius: 8px;
  background: rgba(219,234,254,.78);
  color: #2563eb !important;
  font: 900 18px/1 Spotify Mix, DM Sans, system-ui, sans-serif !important;
}
.meteogram-location-result-copy {
  display: block !important;
  min-width: 0;
  margin: 0 !important;
}
.meteogram-location-result-copy strong {
  display: block;
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
  color: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}
.meteogram-location-result-copy > span {
  display: -webkit-box !important;
  margin-top: 3px !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #64748b !important;
  font-size: 9.5px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body.ui-dark .meteogram-location-result { background: rgba(30,41,59,.72); }
body.ui-dark .meteogram-location-result-pin {
  background: rgba(30,64,175,.28);
  color: #93c5fd !important;
}
body.ui-dark .meteogram-location-result-copy > span { color: #94a3b8 !important; }

/* Before data exists, the full panel is only a small loading shell. Controls
   and footer are shown only after the first forecast has arrived. */
.meteogram-panel:not(.has-forecast) .meteogram-header-actions > :not(.meteogram-close-stack),
.meteogram-panel:not(.has-forecast) .meteogram-help-button,
.meteogram-panel:not(.has-forecast) .meteogram-footer { display: none !important; }
.meteogram-panel:not(.has-forecast) {
  height: auto;
  min-height: 0;
  max-height: 180px;
}
.meteogram-panel:not(.has-forecast) .meteogram-header { cursor: default; }

/* Desktop right-click action. */
.meteogram-context-popup .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: 11px;
}
.meteogram-context-popup .leaflet-popup-content { margin: 0; }
.meteogram-context-popup .leaflet-popup-tip { box-shadow: none; }
.meteogram-context-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 208px;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  color: #0f172a;
  font: 750 12px/1.2 Spotify Mix, DM Sans, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.meteogram-context-action:hover { background: #eff6ff; }
body.ui-dark .meteogram-context-action { background: #0f172a; color: #f8fafc; }
body.ui-dark .meteogram-context-action:hover { background: #1e293b; }

@media (max-width: 820px) {
  .meteogram-launcher {
    top: calc(var(--phone-safe-top, 0px) + 70px);
    width: min(430px, calc(100vw - 30px));
  }
  .meteogram-launcher .meteogram-location-search-box { min-height: 44px; }
  .meteogram-launcher .meteogram-location-search input { height: 42px; font-size: 12px; }
  .meteogram-launcher .meteogram-search-button,
  .meteogram-launcher .meteogram-my-location-button { height: 42px; }
  .meteogram-launcher-results {
    width: 100%;
    max-height: min(350px, 52vh);
  }

  /* While meteogram mode is armed, collapse every other phone quick tool
     instead of abruptly hiding the complete bottom bar. */
  .quick-map-tools .quick-map-tool {
    transition: opacity .20s ease, transform .24s ease, width .24s ease,
                min-width .24s ease, padding .24s ease, margin .24s ease,
                border-width .24s ease;
  }
  body.meteogram-mode-active .quick-map-tools .quick-map-tool:not(.meteogram-tool) {
    opacity: 0;
    transform: translateY(10px) scale(.78);
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    overflow: hidden;
    pointer-events: none;
  }
  body.meteogram-mode-active .quick-map-tools .meteogram-tool {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  /* Make the title and selectors share the same left/right edges. The close
     button floats in the top-right instead of squeezing the model selector. */
  .meteogram-panel.has-forecast .meteogram-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 7px;
    align-items: stretch;
    padding: 9px 10px 8px;
    padding-right: 44px;
  }
  .meteogram-panel.has-forecast .meteogram-header-copy {
    width: 100%;
    min-width: 0;
  }
  .meteogram-panel.has-forecast #meteogramTitle {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .meteogram-panel.has-forecast .meteogram-header-actions {
    display: grid;
    grid-template-columns: minmax(94px,.75fr) minmax(138px,1.25fr);
    gap: 6px;
    width: 100%;
    max-width: none;
    min-width: 0;
    align-items: center;
  }
  .meteogram-panel.has-forecast .meteogram-duration-picker,
  .meteogram-panel.has-forecast .meteogram-model-picker { min-width: 0; width: 100%; }
  .meteogram-panel.has-forecast .meteogram-duration-picker select,
  .meteogram-panel.has-forecast .meteogram-model-picker select {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 31px;
  }
  .meteogram-panel.has-forecast .meteogram-close-stack {
    position: absolute;
    right: 8px;
    top: 7px;
    z-index: 3;
  }

  /* Search first, mode buttons second: enough width for a real city name and
     no overlapping result list. */
  .meteogram-mobile-mode {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 6px;
    padding: 6px 8px 5px;
  }
  .meteogram-location-search-mobile {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    order: 1;
  }
  .meteogram-location-search-mobile .meteogram-location-search-box { width: 100%; }
  .meteogram-location-search-mobile input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    height: 31px;
    font-size: 10.5px;
  }
  .meteogram-location-search-mobile button[type="submit"],
  .meteogram-location-search-mobile .meteogram-my-location-button {
    height: 31px;
  }
  .meteogram-mobile-mode-buttons {
    order: 2;
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 7px;
  }
  .meteogram-mobile-mode-buttons button { flex: 0 1 96px; }
  .meteogram-location-results-mobile {
    position: fixed;
    z-index: 1700;
    left: 18px;
    right: 18px;
    top: auto;
    bottom: 142px;
    width: auto;
    max-height: min(350px, 46vh);
  }
  .meteogram-location-result { min-height: 54px; padding: 9px; }
  .meteogram-location-result-copy strong { font-size: 11.5px; }
  .meteogram-location-result-copy > span { font-size: 9.8px !important; }
}

@media (max-width: 760px) {
  .meteogram-panel:not(.has-forecast) {
    bottom: auto;
    min-height: 0;
    max-height: 180px;
  }
}

@media (max-width: 820px) {
  body.meteogram-mode-active .quick-map-tools { gap: 0; }
}


/* r103 — dark-safe meteogram weather assets and phone alignment ------------- */

/* Desktop: help and close are peers on the same control row. The help button
   no longer hangs below the model selector. */
.meteogram-close-stack {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.meteogram-close-stack .meteogram-help-button {
  order: -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Use a real vector crosshair instead of the tiny font-dependent ⌖ glyph. */
.meteogram-my-location-icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.meteogram-my-location-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.meteogram-launcher .meteogram-my-location-icon { width: 24px; height: 24px; }

@media (max-width: 760px) {
  /* Give phone row labels enough room and center both row names and units in
     their own side cells. This also prevents Weather(day/night) from being
     clipped at the chart edge. */
  .meteogram-chart-shell {
    grid-template-columns: 60px minmax(0, 1fr) 30px !important;
  }
  .meteogram-row-labels-left,
  .meteogram-row-labels-right {
    text-align: center !important;
  }
  .meteogram-row-labels .meteogram-row-label,
  .meteogram-row-labels-left .meteogram-row-label,
  .meteogram-row-labels-right .meteogram-row-label {
    left: 2px !important;
    right: 2px !important;
    width: auto !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.02 !important;
    font-size: clamp(8px, 2.35vw, 10px) !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
  }

  /* The X belongs to the title row; the ? belongs to the selector row.
     Positioning them independently keeps the ? vertically centred beside the
     duration/model cassettes on every phone width. */
  .meteogram-panel.has-forecast .meteogram-close-stack {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
  }
  .meteogram-panel.has-forecast .meteogram-close-stack #meteogramClose {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 31px;
    height: 31px;
  }
  .meteogram-panel.has-forecast .meteogram-close-stack .meteogram-help-button {
    position: absolute;
    right: 8px;
    top: 39px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    order: 0;
  }

  /* Reserve the same right-hand rail for X / ? on both header rows. */
  .meteogram-panel.has-forecast .meteogram-header {
    padding-right: 47px;
  }
  .meteogram-panel.has-forecast .meteogram-header-actions {
    align-items: center;
  }

  /* Larger, unmistakable geolocation target on phones. */
  .meteogram-my-location-icon {
    width: 23px;
    height: 23px;
    stroke-width: 2.25;
  }
  .meteogram-location-search-mobile .meteogram-my-location-button,
  .meteogram-launcher .meteogram-my-location-button {
    min-width: 43px;
  }
}

/* r108 — phone full-height meteograms + exclusive meteogram clean view ------- */
@media (max-width: 820px) {
  /* The phone meteogram owns the usable screen while a forecast is open.
     r107 kept an 88 px bottom reservation for map controls that are now hidden;
     reclaim it so Precipitation, Snow depth and Relative humidity remain in the
     visible chart instead of falling below the footer. */
  .meteogram-panel.has-forecast {
    bottom: calc(var(--phone-safe-bottom, 0px) + 6px) !important;
    max-height: calc(100dvh - var(--phone-safe-top, 0px) - 68px) !important;
  }
  .meteogram-panel.has-forecast .meteogram-chart-shell {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .meteogram-panel.has-forecast .meteogram-scroll {
    min-height: 0 !important;
    height: 100% !important;
  }

  /* Every non-meteogram phone control slides away while Meteograms is armed.
     Keep the green Meteograms quick button itself available so a second tap can
     disable the persistent mode. */
  .tools-wrap,
  .mobile-legend-actions,
  .timeline-panel,
  .mobile-controls-button,
  .mobile-controls-panel,
  .legend-controls,
  .attributions-control,
  .leaflet-control-zoom,
  .leaflet-control-layers {
    transition: transform .28s cubic-bezier(.22,.61,.36,1),
                opacity .22s ease, visibility 0s linear .28s !important;
    will-change: transform, opacity;
  }

  body.meteogram-mode-active .tools-wrap {
    transform: translateY(calc(100% + 34px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.meteogram-mode-active .mobile-legend-actions,
  body.meteogram-mode-active .mobile-controls-button,
  body.meteogram-mode-active .mobile-controls-panel,
  body.meteogram-mode-active .legend-controls,
  body.meteogram-mode-active .leaflet-control-zoom,
  body.meteogram-mode-active .leaflet-control-layers {
    transform: translateX(calc(100% + 38px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.meteogram-mode-active .timeline-panel {
    transform: translateY(calc(100% + var(--phone-safe-bottom, 0px) + 34px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.meteogram-mode-active .attributions-control {
    transform: translateY(calc(100% + 28px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Existing quick-tool collapse remains, but also make the container itself
     reserve only the active Meteograms button after the other two animate out. */
  body.meteogram-mode-active .quick-map-tools {
    width: max-content !important;
    max-width: max-content !important;
  }
}

/* r131 — ensemble run badge ------------------------------------------------ */
.meteogram-ens-cluster {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}
.meteogram-ens-run {
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 7px;
  border:1px solid rgba(100,116,139,.28);
  border-radius:8px;
  background:rgba(248,250,252,.90);
  color:#475569;
  font-size:9.5px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
}
body.ui-dark .meteogram-ens-run {
  background:rgba(30,41,59,.90);
  border-color:rgba(148,163,184,.28);
  color:#cbd5e1;
}

/* r113 — ICON-EU ensemble meteogram dashboard ----------------------------- */
.meteogram-ens-button {
  height: 34px;
  min-width: 46px;
  padding: 0 11px;
  border: 1px solid rgba(37,99,235,.34);
  border-radius: 9px;
  background: rgba(239,246,255,.96);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
.meteogram-ens-button:hover { background: rgba(219,234,254,.98); }
.meteogram-ens-button.is-active,
.meteogram-ens-button[aria-pressed="true"] {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
body.ui-dark .meteogram-ens-button {
  background: rgba(30,58,138,.26);
  border-color: rgba(96,165,250,.42);
  color: #bfdbfe;
}
body.ui-dark .meteogram-ens-button.is-active,
body.ui-dark .meteogram-ens-button[aria-pressed="true"] { background:#2563eb; color:#fff; }

.meteogram-panel.is-ensemble .meteogram-mode-picker,
.meteogram-panel.is-ensemble .meteogram-model-picker,
.meteogram-panel.is-ensemble .meteogram-mobile-mode-buttons,
.meteogram-panel.is-ensemble .meteogram-chart-shell,
.meteogram-panel.is-ensemble .meteogram-slider-wrap { display:none !important; }
.meteogram-panel.is-ensemble .meteogram-ensemble-panel { display:flex !important; }
.meteogram-ensemble-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f4f7fb;
  border-top: 1px solid rgba(226,232,240,.9);
}
.meteogram-ensemble-panel.is-hidden { display:none !important; }
.ensemble-toolbar {
  position: relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  flex:0 0 auto;
  border-bottom:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.94);
}
.ensemble-picker-wrap { position:relative; }
.ensemble-picker-button,
.ensemble-layout-toggle button {
  height:32px;
  border:1px solid rgba(148,163,184,.38);
  border-radius:8px;
  background:#fff;
  color:#0f172a;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.ensemble-picker-button { padding:0 12px; }
.ensemble-layout-toggle { display:flex; gap:4px; }
.ensemble-layout-toggle button { min-width:58px; padding:0 10px; }
.ensemble-layout-toggle button.is-active { background:#2563eb; border-color:#2563eb; color:#fff; }
.ensemble-model-badge {
  margin-left:auto;
  padding:7px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  font-size:10.5px;
  font-weight:750;
  white-space:nowrap;
}
.ensemble-picker-menu {
  position:absolute;
  z-index:30;
  left:0;
  top:38px;
  min-width:250px;
  padding:8px;
  border:1px solid rgba(148,163,184,.34);
  border-radius:10px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.18);
}
.ensemble-picker-menu.is-hidden { display:none !important; }
.ensemble-picker-menu label {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:5px 7px;
  border-radius:7px;
  color:#1e293b;
  font-size:11px;
  cursor:pointer;
}
.ensemble-picker-menu label:hover { background:#f1f5f9; }
.ensemble-status {
  flex:0 0 auto;
  min-height:34px;
  display:flex;
  align-items:center;
  padding:6px 13px;
  color:#64748b;
  font-size:11px;
}
.ensemble-status:empty { display:none; }
.ensemble-cards {
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:10px;
  display:grid;
  align-content:start;
  gap:10px;
}
.ensemble-cards.ensemble-grid {
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-rows:repeat(var(--ensemble-grid-rows, 1), minmax(0,1fr));
  overflow:hidden;
}
.ensemble-cards.ensemble-grid .ensemble-chart-card { height:auto; min-height:0; }
.ensemble-cards.ensemble-large { grid-template-columns:minmax(0,1fr); }
.ensemble-chart-card {
  position:relative;
  min-width:0;
  height:290px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.18);
  border-radius:13px;
  background:#fff;
  box-shadow:0 4px 14px rgba(15,23,42,.055);
}
.ensemble-large .ensemble-chart-card { height:420px; }
.ensemble-chart-head {
  position:absolute;
  z-index:3;
  left:14px;
  top:10px;
  right:14px;
  pointer-events:none;
}
.ensemble-chart-title { color:#0f2857; font-size:14px; font-weight:800; line-height:1.15; }
.ensemble-chart-subtitle { margin-top:2px; color:#71809b; font-size:9.5px; }
.ensemble-chart-canvas { display:block; width:100%; height:100%; touch-action:pan-y; cursor:crosshair; }
.ensemble-ptype-bars-legend {
  position:absolute; z-index:4; left:14px; right:14px; top:34px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:4px 10px; align-items:start; pointer-events:none;
}
.ensemble-ptype-bars-legend[hidden] { display:none !important; }
.ensemble-ptype-bars-legend-item { min-width:0; }
.ensemble-ptype-bars-legend-label { color:#334155; font:700 8.5px/1.05 Spotify Mix, DM Sans, system-ui; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.ensemble-ptype-bars-legend-levels { display:flex; flex-wrap:wrap; gap:2px 6px; }
.ensemble-ptype-bars-legend-level { display:inline-flex; align-items:center; gap:3px; color:#64748b; font:600 7px/1 Spotify Mix, DM Sans, system-ui; white-space:nowrap; }
.ensemble-ptype-bars-legend-level i { width:8px; height:8px; border:1px solid rgba(15,23,42,.16); border-radius:1px; flex:0 0 auto; }
.ensemble-ptype-bars-legend-level b { font:inherit; }
body.ui-dark .ensemble-ptype-bars-legend-label { color:#e2e8f0; }
body.ui-dark .ensemble-ptype-bars-legend-level { color:#94a3b8; }
@media (max-width:760px) {
  .ensemble-ptype-bars-legend { left:9px; right:9px; top:30px; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:3px 6px; }
  .ensemble-ptype-bars-legend-label { font-size:7.2px; }
  .ensemble-ptype-bars-legend-level { font-size:6.2px; gap:2px; }
  .ensemble-ptype-bars-legend-level i { width:7px; height:7px; }
}

.ensemble-tooltip {
  position:absolute;
  z-index:8;
  display:none;
  max-width:220px;
  padding:6px 8px;
  border-radius:7px;
  background:rgba(15,23,42,.94);
  color:#fff;
  font-size:9.5px;
  line-height:1.35;
  box-shadow:0 5px 18px rgba(15,23,42,.22);
  pointer-events:none;
  white-space:nowrap;
}
.ensemble-chart-card.has-hover .ensemble-tooltip { display:block; }
.ensemble-chart-loading {
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:50px 18px 18px;
  color:#64748b;
  font-size:11px;
  text-align:center;
}
body.ui-dark .meteogram-ensemble-panel { background:#0c1424; border-color:rgba(148,163,184,.18); }
body.ui-dark .ensemble-toolbar { background:rgba(15,23,42,.98); border-color:rgba(148,163,184,.18); }
body.ui-dark .ensemble-picker-button,
body.ui-dark .ensemble-layout-toggle button { background:#1e293b; border-color:rgba(148,163,184,.3); color:#e2e8f0; }
body.ui-dark .ensemble-layout-toggle button.is-active { background:#2563eb; color:#fff; }
body.ui-dark .ensemble-model-badge { background:rgba(49,46,129,.42); color:#c7d2fe; }
body.ui-dark .ensemble-picker-menu { background:#111827; border-color:rgba(148,163,184,.28); }
body.ui-dark .ensemble-picker-menu label { color:#e2e8f0; }
body.ui-dark .ensemble-picker-menu label:hover { background:#1e293b; }
body.ui-dark .ensemble-status { color:#94a3b8; }
body.ui-dark .ensemble-chart-card { background:#111827; border-color:rgba(148,163,184,.18); box-shadow:none; }
body.ui-dark .ensemble-chart-title { color:#e0e7ff; }
body.ui-dark .ensemble-chart-subtitle { color:#94a3b8; }


@media (min-width: 761px) {
  .meteogram-panel.is-ensemble {
    width: min(1460px, calc(100vw - 24px));
    height: min(920px, calc(100vh - 42px));
    max-width: calc(100vw - 18px);
    max-height: calc(100vh - 24px);
  }
}

@media (max-width: 760px) {
  .meteogram-panel.has-forecast .meteogram-header-actions {
    grid-template-columns: 42px minmax(78px,.72fr) minmax(124px,1.28fr);
  }
  .meteogram-panel.has-forecast .meteogram-ens-cluster { gap:4px; }
  .meteogram-panel.has-forecast .meteogram-ens-run {
    height:24px;
    padding:0 5px;
    font-size:7.8px;
  }
  .meteogram-panel.has-forecast .meteogram-ens-button {
    width:42px;
    min-width:42px;
    height:31px;
    padding:0;
    font-size:9.5px;
  }
  .meteogram-panel.has-forecast .meteogram-duration-picker select {
    min-width:0;
    width:100%;
    font-size:9px;
  }
  .meteogram-panel.is-ensemble .meteogram-header-actions {
    grid-template-columns:minmax(102px,max-content) minmax(92px,1fr);
  }
  .meteogram-panel.is-ensemble .meteogram-duration-picker { width:100%; }
  .meteogram-panel.is-ensemble .meteogram-mobile-mode {
    display:grid !important;
  }
  .meteogram-panel.is-ensemble .meteogram-location-search-mobile { order:1; }
  .ensemble-toolbar {
    padding:6px 7px;
    gap:5px;
    flex-wrap:wrap;
  }
  .ensemble-picker-button { height:29px; padding:0 9px; font-size:9.5px; }
  .ensemble-layout-toggle { display:none; }
  .ensemble-model-badge { margin-left:0; font-size:8.5px; padding:5px 7px; }
  .ensemble-picker-menu {
    position:fixed;
    left:14px;
    right:14px;
    top:150px;
    width:auto;
    min-width:0;
    max-height:52vh;
    overflow:auto;
  }
  .ensemble-status { min-height:28px; padding:4px 9px; font-size:9.5px; }
  .ensemble-cards,
  .ensemble-cards.ensemble-grid,
  .ensemble-cards.ensemble-large {
    grid-template-columns: minmax(0, 1fr);
    gap:7px;
    padding:7px;
  }
  .ensemble-chart-card,
  .ensemble-large .ensemble-chart-card { height:245px; }
  .ensemble-chart-title { font-size:11.5px; }
  .ensemble-chart-subtitle { font-size:8.3px; }
}

/* r118 multi-model ensemble controls */
.ensemble-model-wrap { position:relative; margin-left:auto; }
button.ensemble-model-badge { border:0; cursor:pointer; font-family:inherit; }
.ensemble-model-menu {
  position:absolute; z-index:36; top:38px; right:0; min-width:240px; padding:6px;
  border:1px solid rgba(148,163,184,.34); border-radius:10px; background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.18);
}
.ensemble-model-menu.is-hidden { display:none !important; }
.ensemble-model-menu button { display:block; width:100%; padding:8px 10px; border:0; border-radius:7px; background:transparent; text-align:left; font:700 10px Spotify Mix, DM Sans, system-ui; color:#1e293b; cursor:pointer; }
.ensemble-model-menu button:hover, .ensemble-model-menu button.is-active { background:#eef2ff; color:#3730a3; }
body.ui-dark .ensemble-model-menu { background:#111827; border-color:rgba(148,163,184,.28); }
body.ui-dark .ensemble-model-menu button { color:#e2e8f0; }
body.ui-dark .ensemble-model-menu button:hover, body.ui-dark .ensemble-model-menu button.is-active { background:#1e293b; color:#bfdbfe; }

.ensemble-probability-control { position:absolute; z-index:12; right:12px; top:10px; }
.ensemble-probability-button { min-width:70px; height:29px; padding:0 9px; border:1px solid rgba(148,163,184,.38); border-radius:8px; background:rgba(255,255,255,.94); color:#111827; font:800 10px Spotify Mix, DM Sans, system-ui; cursor:pointer; }
.ensemble-probability-menu { position:absolute; z-index:20; top:34px; right:0; min-width:132px; max-height:230px; overflow:auto; padding:5px; border:1px solid rgba(148,163,184,.35); border-radius:9px; background:#fff; box-shadow:0 10px 26px rgba(15,23,42,.16); }
.ensemble-probability-menu.is-hidden { display:none !important; }
.ensemble-probability-menu button { display:block; width:100%; padding:6px 8px; border:0; border-radius:6px; background:transparent; color:#1e293b; text-align:left; font:700 9px Spotify Mix, DM Sans, system-ui; cursor:pointer; }
.ensemble-probability-menu button:hover, .ensemble-probability-menu button.is-active { background:#f1f5f9; }
body.ui-dark .ensemble-probability-button { background:#1e293b; color:#fff; border-color:rgba(148,163,184,.35); }
body.ui-dark .ensemble-probability-menu { background:#111827; border-color:rgba(148,163,184,.3); }
body.ui-dark .ensemble-probability-menu button { color:#e2e8f0; }
body.ui-dark .ensemble-probability-menu button:hover, body.ui-dark .ensemble-probability-menu button.is-active { background:#1e293b; }

@media (max-width: 760px) {
  :root { --ensemble-phone-card-height: 258px; }
  .ensemble-cards,
  .ensemble-cards.ensemble-grid,
  .ensemble-cards.ensemble-large {
    display:flex !important; flex-direction:column; grid-template-columns:none !important;
    overflow-y:auto !important; overflow-x:hidden !important; align-content:unset;
  }
  .ensemble-chart-card,
  .ensemble-large .ensemble-chart-card,
  .ensemble-cards.ensemble-grid .ensemble-chart-card {
    flex:0 0 var(--ensemble-phone-card-height); height:var(--ensemble-phone-card-height) !important;
    min-height:var(--ensemble-phone-card-height) !important; max-height:var(--ensemble-phone-card-height) !important;
  }
  .ensemble-model-wrap { margin-left:0; max-width:100%; }
  .ensemble-model-badge { max-width:210px; overflow:hidden; text-overflow:ellipsis; }
  .ensemble-model-menu { position:fixed; left:14px; right:14px; top:150px; min-width:0; }
  .ensemble-probability-control { right:7px; top:7px; }
  .ensemble-probability-button { min-width:62px; height:26px; font-size:8.5px; padding:0 6px; }
}

/* r119 — responsive ensemble chart readability */
.ensemble-large .ensemble-chart-card { height:560px; }

@media (min-width: 1200px) {
  .ensemble-large .ensemble-chart-card { height:620px; }
  .ensemble-chart-title { font-size:15px; }
  .ensemble-chart-subtitle { font-size:10.5px; }
}

@media (max-width: 760px) {
  :root {
    --ensemble-phone-card-height: 340px;
    --ensemble-phone-plot-side-padding: 4px;
  }
  .ensemble-cards,
  .ensemble-cards.ensemble-grid,
  .ensemble-cards.ensemble-large {
    gap:6px;
    padding:4px var(--ensemble-phone-plot-side-padding) 6px;
  }
  .ensemble-chart-card,
  .ensemble-large .ensemble-chart-card,
  .ensemble-cards.ensemble-grid .ensemble-chart-card {
    flex-basis:var(--ensemble-phone-card-height);
    height:var(--ensemble-phone-card-height) !important;
    min-height:var(--ensemble-phone-card-height) !important;
    max-height:var(--ensemble-phone-card-height) !important;
  }
  .ensemble-chart-head {
    left:9px;
    right:9px;
    top:8px;
  }
  .ensemble-chart-title { font-size:12px; }
  .ensemble-chart-subtitle { font-size:8.5px; }
  .ensemble-probability-control { right:5px; top:5px; }
}
.ensemble-picker-menu label.is-disabled {
  opacity: .42;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ensemble-picker-menu label.is-disabled:hover { background: transparent; }

/* r137 — synoptic QPE is temporarily suspended while previous-day RATE_ZH repairs use the derived capacity. */
.parameter-menu-option.is-temporarily-unavailable:disabled { opacity: .82; }
.parameter-temporary-status { color: #dc2626; font-weight: 700; }
body.ui-dark .parameter-temporary-status { color: #ff4d4f; }

/* r138 — concise model-source attribution inside meteogram help. */
.meteogram-attributions { margin-top: .65rem; line-height: 1.35; }

/* r143 — wide mobile ensemble heatmaps */
@media (max-width: 760px) {
  .ensemble-chart-card.ensemble-mobile-wide {
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none !important;
    height: auto !important;
    min-height: 260px !important;
    -webkit-overflow-scrolling: touch;
  }
  .ensemble-chart-card.ensemble-mobile-wide .ensemble-chart-canvas {
    display: block;
    max-width: none;
  }
}
@media (max-width: 760px) {
  .meteogram-panel.has-forecast .meteogram-ens-cluster {
    display:grid;
    grid-template-columns:42px 54px;
    width:100px;
    align-items:center;
  }
  .meteogram-panel.has-forecast .meteogram-ens-run {
    grid-column:1 / -1;
    justify-content:center;
  }
  .meteogram-panel.has-forecast .meteogram-det-ens-button {
    width:54px;
    min-width:54px;
    font-size:8px;
  }
}
@media (max-width: 760px) {
  .ensemble-chart-card.ensemble-mobile-wide { flex-basis:auto !important; }
}

/* r150 — phone-width member heatmaps with native horizontal swipe + synced slider */
.ensemble-chart-viewport {
  width:100%;
  height:100%;
  min-width:0;
  overflow:hidden;
}
.ensemble-chart-scroll-control { display:none; }
@media (max-width:760px) {
  .ensemble-chart-card.ensemble-mobile-wide {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
  }
  .ensemble-chart-card.ensemble-mobile-wide .ensemble-chart-viewport {
    width:100%;
    max-width:100%;
    height:auto;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
    scrollbar-width:thin;
  }
  .ensemble-chart-card.ensemble-mobile-wide .ensemble-chart-canvas {
    display:block;
    max-width:none;
    touch-action:pan-x pan-y;
  }
  .ensemble-chart-card.ensemble-mobile-wide .ensemble-chart-scroll-control {
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:4px 10px 8px;
    background:inherit;
  }
  .ensemble-chart-card.ensemble-mobile-wide .ensemble-chart-scroll-control[hidden] { display:none !important; }
  .ensemble-chart-card.ensemble-mobile-wide .ensemble-chart-scroll-range {
    display:block;
    width:100%;
    margin:0;
    touch-action:manipulation;
    accent-color:#64748b;
  }
}

/* r168 — member heatmap cassette scrolls independently in both directions. */
.ensemble-cards.ensemble-grid.has-member-heatmap {
  grid-template-rows: repeat(var(--ensemble-grid-rows, 1), auto);
  overflow: auto;
  align-content: start;
}
.ensemble-chart-card.ensemble-member-heatmap {
  height: auto !important;
  min-height: calc(30px + var(--ensemble-member-heatmap-viewport-height) + var(--ensemble-member-heatmap-controls-height, 0px)) !important;
  max-height: none !important;
  overflow: hidden;
}
.ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-head {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  height: 30px;
  padding: 9px 14px 0;
  box-sizing: border-box;
}
.ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-subtitle {
  display: none !important;
}
.ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-viewport {
  width: 100%;
  height: var(--ensemble-member-heatmap-viewport-height);
  min-height: var(--ensemble-member-heatmap-viewport-height);
  max-height: var(--ensemble-member-heatmap-viewport-height);
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}
.ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-canvas {
  display: block;
  width: var(--ensemble-member-heatmap-width);
  min-width: var(--ensemble-member-heatmap-width);
  height: var(--ensemble-member-heatmap-canvas-height);
  min-height: var(--ensemble-member-heatmap-canvas-height);
  max-height: none;
  max-width: none;
  touch-action: pan-x pan-y;
}
@media (max-width: 760px) {
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap,
  .ensemble-cards.ensemble-grid .ensemble-chart-card.ensemble-member-heatmap,
  .ensemble-cards.ensemble-large .ensemble-chart-card.ensemble-member-heatmap {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: calc(28px + var(--ensemble-member-heatmap-viewport-height) + var(--ensemble-member-heatmap-controls-height, 0px)) !important;
    max-height: none !important;
    overflow: hidden;
  }
  .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-head {
    height: 28px;
    padding: 8px 9px 0;
  }
  .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-viewport {
    width: 100%;
    max-width: 100%;
    height: var(--ensemble-member-heatmap-viewport-height);
    min-height: var(--ensemble-member-heatmap-viewport-height);
    max-height: var(--ensemble-member-heatmap-viewport-height);
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }
}

/* r170 — fixed UTC hour/date ruler above mobile member heatmaps. It is outside
   the vertically scrolling cassette and follows horizontal scrolling exactly. */
.ensemble-member-time-header[hidden] { display:none !important; }
.ensemble-chart-card.ensemble-member-heatmap .ensemble-member-time-header {
  display:block; position:relative; flex:0 0 40px; width:100%; height:40px;
  min-height:40px; max-height:40px; overflow:hidden; pointer-events:none;
  box-sizing:border-box; border-bottom:1px solid rgba(148,163,184,.24);
  background:#fff;
}
body.ui-dark .ensemble-chart-card.ensemble-member-heatmap .ensemble-member-time-header { background:#111827; }
.ensemble-chart-card.ensemble-member-heatmap .ensemble-member-time-canvas {
  display:block; position:absolute; top:0; left:0; max-width:none; max-height:none;
  transform:translate3d(0,0,0); will-change:transform; pointer-events:none;
}
@media (max-width:760px) {
  .ensemble-chart-card.ensemble-member-heatmap {
    min-height:calc(28px + 40px + var(--ensemble-member-heatmap-viewport-height) + var(--ensemble-member-heatmap-controls-height, 0px)) !important;
  }
}

/* r171 — mobile member charts have ONE vertical scroll owner: the ensemble
   cards pane. Their canvases have their full natural height, so the last member
   and the special control/mean rows can always be reached by scrolling down.
   Keep per-chart horizontal swiping and the hour/date ruler sticky within the
   chart as the outer pane scrolls. Avoid nested y-scrollers fighting on touch. */
@media (max-width: 760px) {
  .ensemble-cards.has-member-heatmap,
  .ensemble-cards.ensemble-grid.has-member-heatmap,
  .ensemble-cards.ensemble-large.has-member-heatmap {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    align-content: start;
    min-height: 0;
  }
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap,
  .ensemble-cards.ensemble-grid .ensemble-chart-card.ensemble-member-heatmap,
  .ensemble-cards.ensemble-large .ensemble-chart-card.ensemble-member-heatmap {
    flex: 0 0 auto !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
  }
  .ensemble-chart-card.ensemble-member-heatmap .ensemble-member-time-header {
    position: sticky;
    top: 0;
    z-index: 6;
  }
  .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-viewport {
    width: 100%;
    height: var(--ensemble-member-heatmap-canvas-height);
    min-height: var(--ensemble-member-heatmap-canvas-height);
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-canvas {
    height: var(--ensemble-member-heatmap-canvas-height);
    min-height: var(--ensemble-member-heatmap-canvas-height);
    max-height: none;
    touch-action: pan-x pan-y;
  }
}

/* r171 — handle canvas gestures explicitly so horizontal heatmap pans do not
   swallow downward member-list swipes in nested Android/Edge scroll containers. */
@media (max-width: 760px) {
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-canvas {
    touch-action: none;
  }
}

/* r172 — PHONE ONLY: each member heatmap is its own two-axis scroll cassette.
   The UTC/date ruler is a normal fixed row above the viewport, so it never
   disappears when the user scrolls down through ICON/ECMWF members. The
   viewport height is bounded, while the canvas keeps its complete natural
   row height; therefore scrollTop can always reach the final member/control/
   mean row regardless of how many member rows are present. */
@media (max-width: 760px) {
  .ensemble-cards.has-member-heatmap,
  .ensemble-cards.ensemble-grid.has-member-heatmap,
  .ensemble-cards.ensemble-large.has-member-heatmap {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    align-content: start !important;
  }

  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap,
  .ensemble-cards.ensemble-grid .ensemble-chart-card.ensemble-member-heatmap,
  .ensemble-cards.ensemble-large .ensemble-chart-card.ensemble-member-heatmap {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(28px + 40px + var(--ensemble-member-heatmap-viewport-height) + var(--ensemble-member-heatmap-controls-height, 0px)) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-head {
    flex: 0 0 28px !important;
    height: 28px !important;
    min-height: 28px !important;
  }

  .ensemble-chart-card.ensemble-member-heatmap .ensemble-member-time-header {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    flex: 0 0 40px !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    z-index: 7 !important;
  }

  .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-viewport {
    position: relative !important;
    flex: 0 0 var(--ensemble-member-heatmap-viewport-height) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--ensemble-member-heatmap-viewport-height) !important;
    min-height: var(--ensemble-member-heatmap-viewport-height) !important;
    max-height: var(--ensemble-member-heatmap-viewport-height) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    touch-action: none !important;
  }

  .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-canvas {
    display: block !important;
    flex: 0 0 auto !important;
    width: var(--ensemble-member-heatmap-width) !important;
    min-width: var(--ensemble-member-heatmap-width) !important;
    max-width: none !important;
    height: var(--ensemble-member-heatmap-canvas-height) !important;
    min-height: var(--ensemble-member-heatmap-canvas-height) !important;
    max-height: none !important;
    touch-action: none !important;
  }

  .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-scroll-control {
    flex: 0 0 var(--ensemble-member-heatmap-controls-height, 0px) !important;
  }
}


/* r173: phone-only, explicit member-row scrubber. This stays interactive even
   when Android Edge captures nested scroll gestures for the outer panel. */
.ensemble-member-y-control[hidden] { display:none !important; }
@media (max-width:760px) {
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-viewport {
    overscroll-behavior:contain !important;
    scrollbar-gutter:stable;
  }
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap .ensemble-member-y-control {
    display:flex !important;
    position:absolute !important;
    z-index:12 !important;
    right:1px;
    top:70px;
    bottom:var(--ensemble-member-heatmap-controls-height, 38px);
    width:27px;
    min-height:100px;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:3px 2px 5px;
    box-sizing:border-box;
    border-radius:8px;
    background:rgba(15,23,42,.72);
    color:white;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap .ensemble-member-y-control[hidden] {display:none !important;}
  .ensemble-member-y-control button {
    display:block; flex:0 0 23px; width:23px; height:23px; padding:0;
    border:0; border-radius:5px; background:rgba(255,255,255,.20);
    color:#fff; font:700 17px/23px Spotify Mix, DM Sans, system-ui;
  }
  .ensemble-member-y-control button:disabled {opacity:.35;}
  .ensemble-member-y-control .ensemble-member-y-range {
    display:block; min-height:30px; min-width:15px; flex:1 1 auto;
    width:17px; height:auto; margin:2px 0;
    writing-mode:vertical-lr; direction:rtl;
    touch-action:none; accent-color:#93c5fd;
  }
  .ensemble-member-y-control .ensemble-member-y-progress {
    display:block; flex:0 0 15px; font:600 8px/15px Spotify Mix, DM Sans, system-ui;
    white-space:nowrap;
  }
}


/* r174 — PHONE ONLY: native unlimited-feeling member scrolling.
   The browser owns touch/momentum scrolling; no JavaScript touch interception.
   A transparent runway after the real heatmap gives plenty of downward travel so
   the last member can be moved fully above browser chrome / WXRadar footer. */
.ensemble-member-y-runway { display:none; }
@media (max-width:760px) {
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-viewport {
    overflow-x:auto !important;
    overflow-y:auto !important;
    touch-action:pan-x pan-y !important;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:thin;
    scroll-behavior:auto !important;
  }
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-canvas {
    touch-action:auto !important;
  }
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap .ensemble-member-y-runway {
    display:block !important;
    width:var(--ensemble-member-heatmap-width) !important;
    min-width:var(--ensemble-member-heatmap-width) !important;
    height:var(--ensemble-member-heatmap-runway-height, max(100svh, 760px)) !important;
    min-height:var(--ensemble-member-heatmap-runway-height, max(100svh, 760px)) !important;
    pointer-events:none !important;
    background:transparent !important;
  }
  /* The old r173 side scrubber can steal touch area on narrow phones; native
     scrolling is now the primary interaction and does not need that overlay. */
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap .ensemble-member-y-control {
    display:none !important;
  }
  .ensemble-chart-card.ensemble-member-heatmap .ensemble-member-time-header {
    display:block !important;
    position:relative !important;
    flex:0 0 40px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    overflow:hidden !important;
  }
}

/* r175 — desktop rollback + phone-only member controls.
   Desktop keeps the pre-r166 standard Grid/Large card sizing and never gets
   member sliders/special heatmap scroll geometry. Phone heatmaps keep the
   native two-axis cassette and fixed UTC/date header, but the redundant
   horizontal range slider is removed because direct finger drag owns X. */
@media (min-width:761px) {
  .ensemble-cards.ensemble-grid.has-member-heatmap {
    grid-template-rows:repeat(var(--ensemble-grid-rows, 1), minmax(0,1fr)) !important;
    overflow:hidden !important;
    align-content:start !important;
  }
  .ensemble-cards.ensemble-large.has-member-heatmap {
    grid-template-rows:none !important;
    overflow:auto !important;
  }
  .ensemble-chart-card .ensemble-chart-scroll-control,
  .ensemble-chart-card .ensemble-member-y-control,
  .ensemble-chart-card .ensemble-member-time-header {
    display:none !important;
  }
}
@media (max-width:760px) {
  .ensemble-cards .ensemble-chart-card.ensemble-member-heatmap .ensemble-chart-scroll-control {
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }
}

/* r187.3 typography: all page text, form controls, map labels, tooltips and popups. */
html, body, button, input, textarea, select, option, label,
.leaflet-container, .leaflet-popup, .leaflet-control,
.meteogram-panel, .meteogram-launcher, .ensemble-panel {
  font-family: Spotify Mix, DM Sans, system-ui, sans-serif;
}

/* r187.5 — replace the weather-station icon without changing button behaviours. */
.tools-wrap .wx-toolbar-button-icon,
.quick-map-tools .wx-toolbar-button-icon,
#mobileControlsButton .wx-toolbar-button-icon,
#mapExportDownloadButton .wx-toolbar-button-icon {
  display: grid !important; place-items: center !important;
  width: 27px; height: 27px; flex: 0 0 27px;
  min-width: 0; min-height: 0; padding: 0; margin: 0;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: inherit !important;
  box-shadow: none !important; text-shadow: none !important;
  font-size: 0 !important; line-height: 1 !important; overflow: visible;
}
.wx-toolbar-icon-img {
  display: block !important; width: 100%; height: 100%; object-fit: contain;
  max-width: 100%; max-height: 100%; flex: none;
  pointer-events: none; user-select: none;
}
.tools-wrap .wx-toolbar-button-icon img { width: 100% !important; height: 100% !important; }
#mobileControlsButton .wx-toolbar-button-icon { width: 19px; height: 19px; flex-basis: 19px; }
#mapExportDownloadButton .wx-toolbar-button-icon { width: 20px; height: 20px; flex-basis: 20px; }
.quick-map-tools .wx-toolbar-button-icon { width: 27px; height: 27px; flex-basis: 27px; }
@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .wx-toolbar-button-icon { width: 22px !important; height: 22px !important; flex-basis: 22px; }
  .quick-map-tools .wx-toolbar-button-icon { width: 24px; height: 24px; flex-basis: 24px; }
  /* Snowfall joins the existing alternating precipitation legend layout. */
  .legend.snowfall-legend .legend-values span { font-variant-numeric: tabular-nums; }
}


/* WXRadar r187.6: per-button surface alpha, not whole-element opacity. */
:root {
  --wx-toolbar-background-opacity: 1;
  --wx-toolbar-surface: 241 245 249;
}
body.ui-dark { --wx-toolbar-surface: 30 41 59; }

/* Set opacity on the *background paint only*. Never set CSS opacity on a
   button, parent toolbar, symbol, image, or a whole Leaflet pane. */
body :is(.tools-wrap .map-box.tools-button,
         .quick-map-tools .map-box,
         .quick-map-tools > button,
         #mobileControlsButton,
         #mapExportDownloadButton) {
  background: rgb(var(--wx-toolbar-surface) / var(--wx-toolbar-background-opacity)) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
/* Keep map plots and mobile button trays opaque in both modes, irrespective
   of the background-opacity slider or existing translucent legacy CSS. */
body .topbar, body .tools-menu, body .mobile-controls-panel {
  background-color: #f8fafc !important;
}
body.ui-dark .topbar, body.ui-dark .tools-menu,
body.ui-dark .mobile-controls-panel {
  background-color: #0f172a !important;
}
body .synop-plot-card:not(.is-boxless),
body .synop-plot-card:not(.is-boxless).is-theme-light {
  background: #fff !important;
  opacity: 1 !important;
}
body .synop-plot-card:not(.is-boxless).is-theme-dark {
  background: #0f172a !important;
  opacity: 1 !important;
}
body .weather-sticker-marker:not(.is-boxless) {
  background-color: #fff !important;
}
/* Explicit "no box" preference is respected. */
body .weather-sticker-marker.is-boxless,
body .is-sticker-boxless .weather-sticker-marker {
  background: transparent !important;
}
body :is(.wx-toolbar-button-icon, .wx-toolbar-icon-img,
         .wx-theme-icon-pair, .wx-theme-icon-pair img,
         .weather-sticker-marker img, .weather-sticker-marker span,
         .weather-wmo-marker svg, .synop-plot-card .plot-value,
         .meteogram-my-location-button img) {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
body .wx-toolbar-icon-img, body .wx-theme-icon-pair img {
  filter: none !important;
  -webkit-filter: none !important;
}
.wx-theme-icon-pair {
  display: block; width: 100%; height: 100%; position: relative;
  flex: 0 0 100%; background: transparent !important;
}
.wx-theme-icon-pair > img {
  position: absolute; inset: 0; display: block; width: 100% !important;
  height: 100% !important; max-width: 100%; max-height: 100%;
  object-fit: contain; pointer-events: none; user-select: none;
}
body:not(.ui-dark) .wx-theme-icon-pair > img.wx-theme-dark,
body.ui-dark .wx-theme-icon-pair > img.wx-theme-light { display: none !important; }
body:not(.ui-dark) .wx-theme-icon-pair > img.wx-theme-light,
body.ui-dark .wx-theme-icon-pair > img.wx-theme-dark { display: block !important; }
/* Meteogram geolocation buttons reuse the same black/white location PNGs. */
.meteogram-my-location-button .wx-theme-icon-pair {
  width: 22px; height: 22px; margin: auto;
}
.website-button-opacity-setting {
  padding: 11px 12px; border: 1px solid #cbd5e1;
  background: #fff; border-radius: 12px;
  display: grid; gap: 9px; color: #0f172a;
}
.website-button-opacity-setting > div {
  display: flex; gap: 10px; align-items: baseline;
  justify-content: space-between; font-weight: 750;
}
.website-button-opacity-setting output { font-variant-numeric: tabular-nums; }
.website-button-opacity-setting input { width: 100%; accent-color: #2563eb; }
.website-button-opacity-setting small { font-size: 11px; line-height: 1.3; }
body.ui-dark .website-button-opacity-setting {
  background: #1e293b; color: #f8fafc; border-color: #64748b;
}
@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  body .tools-wrap .map-box.tools-button { opacity: 1 !important; }
  body .synop-plot-card:not(.is-boxless) { opacity: 1 !important; }
}