/* Weather Radar — dark-only UI.
 * Layout: top bar (menu / legend / mode toggle / dual / settings), left menu
 * panel, right settings panel, license strip + bottom animation bar. On tiny
 * screens the legend drops to its own full-width row below the top-bar icons
 * and the panels position below the whole top block (JS-measured). */

:root {
  --bg: #0a0d12;
  --bar-bg: rgba(13, 17, 23, 0.92);
  --bar-border: rgba(255, 255, 255, 0.08);
  --text: #e5eef5;
  --text-dim: rgba(229, 238, 245, 0.55);
  --accent: #4fc3f7;
  --accent-active: #ffeb3b;
  --bar-h: 52px;
  --bot-h: 56px;
  /* JS-measured height of the whole top block (bar + wrapped legend row);
   * panels anchor below it so they never collide with the legend row. */
  --menu-top: var(--bar-h);
  /* dark-only site: declaring this opts the page out of browser auto-dark
   * (which otherwise darkens the white legend stops) */
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--bg);
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--text);
}

#map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ---- top control area: full-width bar + anchored settings panel ---- */
#topWrap {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 10;
}

/* ---- top bar (edge-to-edge; legend wraps below icons on narrow screens) ---- */
#topbar {
  position: relative;
  min-height: var(--bar-h); height: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-border);
  padding: 6px 10px;
  backdrop-filter: blur(10px);
}

.icon-btn {
  display: flex; align-items: center; gap: 5px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); cursor: pointer;
  border-radius: 8px; padding: 6px 8px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0; transition: all .15s;
}
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.icon-btn.active {
  color: var(--accent-active);
  background: rgba(255, 235, 59, 0.08);
  border-color: rgba(255, 235, 59, 0.3);
}
.icon-btn svg { flex-shrink: 0; }
.icon-btn.soon { opacity: 0.45; cursor: default; }
.icon-btn.soon:hover { color: var(--text-dim); background: transparent; }

/* ---- interactive legend (gradient set by JS, cut at the active cutoff) ---- */
.legend {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: 2px;
  flex: 1 1 auto; min-width: 60px;
  touch-action: none;
}
.legend-bar {
  width: 100%; height: 20px; border-radius: 4px;
  cursor: crosshair;
  /* gradient set dynamically by JS (getCssGradient) per scheme + cutoff */
  background: linear-gradient(to right, #838383 0%, #BDBDBD 6%, #A1AEFF 12%, #697FFF 18%, #2A49FF 24%, #1489F0 29%, #0095FF 35%, #78E6FF 41%, #BBF2FF 47%, #FFFFFF 53%, #FFF799 59%, #FFD700 65%, #FF9E00 71%, #FF6200 76%, #EC0000 82%, #B90000 88%, #860000 94%, #D6119B 100%);
  forced-color-adjust: none; print-color-adjust: exact;
}
.legend-marker {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px; background: #fff; box-shadow: 0 0 3px #000;
  opacity: 0; pointer-events: none; transition: opacity .1s;
  forced-color-adjust: none; print-color-adjust: exact;
}
.legend-tip {
  position: absolute; top: calc(100% + 4px); left: 0;
  transform: translateX(-50%);
  background: #000; color: #fff;
  font-size: 15px; font-weight: 700; white-space: nowrap;
  padding: 1px 7px; border-radius: 4px;
  opacity: 0; pointer-events: none; transition: opacity .1s;
  forced-color-adjust: none; print-color-adjust: exact;
}
.legend.over .legend-marker,
.legend.over .legend-tip { opacity: 1; }

/* ---- mode select: CMAX | stations — active mode highlighted ---- */
#cmaxBtn { letter-spacing: 0.6px; }

/* layer menu chevron: one glyph, points down when closed, up when open */
#layersBtn svg { transition: transform .15s ease; }
#layersBtn.active svg { transform: rotate(180deg); }

/* ---- options card (colors + mode sections + cutoff) ---- */
#layersPanel {
  position: absolute; top: calc(100% + 6px); left: 8px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bar-bg);
  border: 1px solid var(--bar-border);
  border-radius: 10px;
  padding: 12px 14px;
  backdrop-filter: blur(10px);
  z-index: 12;
  width: 300px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - var(--menu-top, 60px) - 70px);
  overflow-y: auto;
}
#layersPanel[hidden] { display: none; }
#schemePicker[hidden] { display: none; }
#schemePicker { display: flex; flex-direction: column; gap: 4px; }

/* collapsible "Colors" header row */
.opt-toggle {
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; text-align: left; width: 100%;
  color: var(--text); font: inherit;
}
.opt-chevron { margin-left: auto; color: var(--text-dim); transition: transform .15s ease; }
.opt-toggle[aria-expanded="true"] .opt-chevron { transform: rotate(180deg); }

/* station menu: latest-data freshness lamp (green <40 min / orange / red 2h) */
.fresh-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6b7280; flex: 0 0 auto;
  forced-color-adjust: none; print-color-adjust: exact;
}
.fresh-dot.fresh-live {
  background: #35d07f;
  box-shadow: 0 0 6px rgba(53, 208, 127, 0.85);
  animation: freshpulse 2s ease-in-out infinite;
}
.fresh-dot.fresh-warn { background: #ff9800; box-shadow: 0 0 6px rgba(255, 152, 0, 0.7); }
.fresh-dot.fresh-stale { background: #f44336; box-shadow: 0 0 6px rgba(244, 67, 54, 0.7); }
.fresh-txt {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  forced-color-adjust: none; print-color-adjust: exact;
}
.fresh-txt.fresh-live { color: #35d07f; }
.fresh-txt.fresh-warn { color: #ff9800; }
.fresh-txt.fresh-stale { color: #f44336; }
@keyframes freshpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* card header (station + country): name on top, meta line below */
.card-head {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 0 2px;
}
.card-name {
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text);
}
.card-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
}
.station-stamp { font-variant-numeric: tabular-nums; }

/* ---- station / country sections live INSIDE #layersPanel (not floating) ---- */
#stationCard, #countryCard {
  display: flex; flex-direction: column; gap: 8px;
}
#stationCard[hidden], #countryCard[hidden] { display: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---- station shortname chips on the map (ported from radar_app) ---- */
.map-chip {
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 700;
  font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: background .15s, color .15s, border-color .4s, border-width .4s;
  forced-color-adjust: none; print-color-adjust: exact;
}
.chip-dark {
  background: rgba(17, 22, 29, 0.86);
  color: #EAF1F7;
  border-color: rgba(255, 255, 255, 0.28);
}
.chip-light {
  background: rgba(255, 255, 255, 0.9);
  color: #16202b;
  border-color: rgba(0, 0, 0, 0.35);
}
/* Station chips sit on the radar centers: a touch smaller and rounder than
   the base chip (country chips keep the base shape). */
.map-chip.station-chip {
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 10px;
}
.station-chip.active {
  background: #CCFF00;
  color: #16210a;
  border-color: #CCFF00;
}
/* Ingestion staleness: thick rounded-rectangle border, no fill change.
   40+ min -> orange, 2+ h or no data -> red; clears when data resumes. */
.map-chip.chip-age-warn { border: 3px solid #ff9800; }
.map-chip.chip-age-stale { border: 3px solid #f44336; }

/* country chips (country composite): blue outline, light-blue when open */
.map-chip.country-chip {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-width: 2px;
  border-color: #3aa0ff;
}
.map-chip.country-chip.active {
  background: #cfe8ff;
  color: #0a2540;
  border-color: #2f80ed;
}
/* File-format problem (e.g. missing calibration): grey + strike, never the
   age colours — the data is there but cannot be read, so ageing is moot.
   Last so it also wins over the active/country chip colours. */
.map-chip.chip-unreadable,
.map-chip.country-chip.chip-unreadable {
  background: #9aa3ab;
  color: #23282d;
  border: 2px solid #6b7379;
}
.layers-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.layers-label { white-space: nowrap; }
.layers-divider { height: 1px; background: var(--bar-border); }
.layers-slider { width: 100%; }

/* ---- left menu panel (300px; fills top-to-bottom above the bottom bar) ---- */
#menuPanel {
  position: fixed;
  top: var(--menu-top);
  bottom: var(--bot-h);
  left: 0;
  width: 300px; max-width: 85vw;
  background: var(--bar-bg);
  border-right: 1px solid var(--bar-border);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  transform: translateX(-102%);
  transition: transform .2s ease;
  z-index: 12;
}
#menuPanel.open { transform: translateX(0); }

/* ---- subtle, smooth scrolling inside the floating panels ---- */
#layersPanel, #menuPanel, .settings-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
#layersPanel::-webkit-scrollbar,
#menuPanel::-webkit-scrollbar,
.settings-panel::-webkit-scrollbar { width: 5px; height: 5px; }
#layersPanel::-webkit-scrollbar-track,
#menuPanel::-webkit-scrollbar-track,
.settings-panel::-webkit-scrollbar-track { background: transparent; }
#layersPanel::-webkit-scrollbar-thumb,
#menuPanel::-webkit-scrollbar-thumb,
.settings-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 3px;
}
#layersPanel::-webkit-scrollbar-thumb:hover,
#menuPanel::-webkit-scrollbar-thumb:hover,
.settings-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

.menu-section { border-bottom: 1px solid var(--bar-border); }
.menu-title {
  padding: 11px 14px;
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; user-select: none; transition: background .15s;
}
/* single chevron, CSS-only: rotates 90° when the section is open */
.menu-title::before {
  content: "\25B8";            /* ▸ */
  display: inline-block;
  width: 1em; margin-right: 4px;
  color: var(--text-dim);
  transition: transform .15s;
}
.menu-section.open .menu-title::before { transform: rotate(90deg); }
.menu-title:hover { background: rgba(255, 255, 255, 0.05); }

/* "About the site" is a link out to /about, not a collapsible section */
.menu-link {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text); text-decoration: none;
}
.menu-link::before { content: none; }

.menu-body { padding: 2px 14px 12px; }
.menu-body[hidden] { display: none; }

/* info text inside the menu sections (About / Radar Data / Rendering /
   Licenses) */
.menu-body p {
  margin: 0 0 9px;
  font-size: 12px; line-height: 1.45; color: var(--text-dim);
}
.menu-body p:last-child { margin-bottom: 0; }
.menu-body ul { margin: 0 0 9px; padding-left: 16px; }
.menu-body li {
  margin: 0 0 5px;
  font-size: 12px; line-height: 1.45; color: var(--text-dim);
}
.menu-body li:last-child { margin-bottom: 0; }
.menu-body strong { color: var(--text); font-weight: 600; }

/* Color Scales rows: full product name, click to reveal the scheme bars.
   Distinct .scale-* names so the options card's scheme picker stays separate. */
.scale-item + .scale-item { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.scale-name {
  display: block; width: 100%;
  padding: 8px 0;
  background: transparent; border: 0;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer;
}
.scale-name::before {
  content: "\25B8";            /* ▸ */
  display: inline-block;
  width: 1em; margin-right: 4px;
  color: var(--text-dim);
  transition: transform .15s;
}
.scale-item.open .scale-name::before { transform: rotate(90deg); }
.scale-name:hover { color: #fff; }
.scale-bars {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 0 10px 1.1em;
}
.scale-bars[hidden] { display: none; }
.scale-variant { display: flex; flex-direction: column; gap: 3px; }
.scale-bar {
  display: block; width: 100%; height: 18px; border-radius: 3px;
  forced-color-adjust: none; print-color-adjust: exact;
}
.scale-desc { font-size: 11px; color: var(--text-dim); }

/* scheme preview bars (layer menu card) — clickable v1 / v2 / v3 */
#schemePicker { display: flex; flex-direction: column; gap: 10px; }
.scheme-preview {
  display: flex; flex-direction: column; gap: 4px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 5px; cursor: pointer; text-align: left; transition: all .15s;
}
.scheme-preview:hover { background: rgba(255, 255, 255, 0.05); }
.scheme-preview.active {
  border-color: rgba(255, 235, 59, 0.45);
  background: rgba(255, 235, 59, 0.07);
}
.scheme-bar {
  display: block; width: 100%; height: 22px; border-radius: 3px;
  forced-color-adjust: none; print-color-adjust: exact;
}
.scheme-desc { font-size: 11px; color: var(--text-dim); }

/* ---- right settings panel (anchored below the whole top block) ---- */
.settings-panel {
  position: absolute; top: calc(100% + 6px); right: 8px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bar-bg);
  border: 1px solid var(--bar-border);
  border-radius: 10px;
  padding: 12px 14px;
  backdrop-filter: blur(10px);
  z-index: 12;
  min-width: 300px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: calc(100vh - var(--menu-top, 60px) - 70px);
  overflow-y: auto;
}
.settings-panel[hidden] { display: none; }

.status { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.status[hidden] { display: none; }
.status.status-err { color: #ff6b6b; font-weight: 600; white-space: normal; }

.settings-row, .settings-slider {
  display: flex; align-items: center; gap: 8px;
  color: var(--text); font-size: 12px; font-weight: 600;
}
.settings-label { white-space: nowrap; }

.settings-toggle {
  margin-left: auto;
  width: 38px; height: 22px; border-radius: 11px;
  border: 1px solid var(--bar-border);
  background: rgba(255, 255, 255, 0.12);
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: background .15s, border-color .15s;
  padding: 0;
}
.settings-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-dim);
  transition: transform .15s, background .15s;
}
.settings-toggle.active {
  background: rgba(255, 235, 59, 0.3);
  border-color: rgba(255, 235, 59, 0.5);
}
.settings-toggle.active::after { transform: translateX(16px); background: var(--accent-active); }

.settings-slider input[type=range] { flex: 1 1 auto; width: auto; min-width: 0; }

.slider-val {
  font-size: 11px; color: var(--text-dim); white-space: nowrap;
  min-width: 46px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- frame-count toggle (12 / 24 / 48) ---- */
.frame-count-toggle {
  margin-left: auto;
  display: flex; align-items: center; gap: 4px;
}
.frame-count-btn {
  padding: 3px 8px;
  font-size: 11px; font-weight: 700;
  line-height: 1.4;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--bar-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.frame-count-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.10); }
.frame-count-btn.active {
  color: var(--accent-active);
  background: rgba(255, 235, 59, 0.10);
  border-color: rgba(255, 235, 59, 0.35);
}
/* angle chip whose frame load failed: known but not published (yet) */
.frame-count-btn.angle-unavailable { opacity: 0.35; }

/* ---- license line (just above the bottom bar; text only, no background) ----
 * Desktop: one truncated line, the 'i' icon (always right) slides the text
 * away. Mobile: the text auto-hides; the 'i' icon opens it (wrapped). */
#licenseStrip {
  position: absolute; left: 0; right: 0;
  bottom: var(--bot-h);
  display: flex; align-items: center; overflow: hidden;
  justify-content: flex-end;   /* text sits right, next to the info icon */
  gap: 4px;
  padding: 2px 8px 2px 12px;
  z-index: 9;
}
.license-text {
  flex: 0 1 auto; min-width: 0;
  font-size: 11px; line-height: 1.3;
  /* clean pill that inverts with the basemap (see .light below) */
  color: var(--bg);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  padding: 1px 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: right;
  transition: opacity .25s ease, visibility .25s;
  }
  /* desktop: the parts stay one truncated line, joined by a middot */
  .license-part + .license-part::before { content: "\00a0\00b7\00a0"; }
  #licenseStrip.off .license-text {
  opacity: 0; visibility: hidden; pointer-events: none;
}
#licenseInfoBtn {
  flex-shrink: 0;
  width: 30px; height: 30px;
  padding: 4px;
  color: var(--text-dim);
  text-shadow: none;
}
#licenseInfoBtn.active {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}
.license-text a { color: #0a6c9c; text-decoration: none; }

/* light basemaps (carto-light, bright): dark pill, white text */
#licenseStrip.light .license-text {
  color: #f0f5fa;
  background: rgba(10, 13, 18, 0.86);
}
#licenseStrip.light .license-text a { color: var(--accent); }
#licenseStrip.light #licenseInfoBtn { color: #111; }

/* ---- bottom animation bar (edge-to-edge) ---- */
#bottombar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--bot-h);
  display: flex; align-items: center; gap: 6px;
  background: var(--bar-bg);
  border-top: 1px solid var(--bar-border);
  padding: 0 14px;
  backdrop-filter: blur(10px);
  z-index: 10;
}
#bottombar.inactive .time-label,
#bottombar.inactive #timeSlider,
#bottombar.inactive #playBtn { opacity: 0.35; pointer-events: none; }

.time-label {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; min-width: 52px;
  font-variant-numeric: tabular-nums;
}

#bottombar #refreshBtn { margin-left: auto; }

/* ---- loading indicator (blinks above the bottom bar) ---- */
#loadingbar {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--bot-h) + env(safe-area-inset-bottom, 0px));
  height: 4px; z-index: 11; pointer-events: none;
}
#loadingbar[hidden] { display: none; }
#loadingbar-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(79, 195, 247, 0.65);
  animation: loadblink 0.9s ease-in-out infinite;
}
#loadingbar.error #loadingbar-fill {
  background: #f44336;
  box-shadow: 0 0 8px rgba(244, 67, 54, 0.7);
  animation-duration: 0.35s;
}

/* click notice for greyed (unreadable) chips: light grey rectangle above
   the bottom bar, visible for 3 s (see showNotice in stations.js) */
#wr-notice {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bot-h) + 16px + env(safe-area-inset-bottom, 0px));
  max-width: min(560px, calc(100vw - 32px));
  background: #e4e7ea;
  color: #23282d;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  z-index: 40;
  pointer-events: none;
}
#wr-notice[hidden] { display: none; }
@keyframes loadblink {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 1; }
}

/* ---- range sliders: full white dot + white fill (timeline + menus) ---- */
#timeSlider, #cutoffSlider, #opacitySlider, #speedSlider {
  -webkit-appearance: none; appearance: none;
  height: 18px; border-radius: 9px;
  /* 6 px track band, centred in an 18 px hit area */
  background: linear-gradient(to right,
    #fff 0 var(--range-fill, 0%),
    rgba(255, 255, 255, 0.15) var(--range-fill, 0%) 100%)
    center / 100% 6px no-repeat;
  cursor: pointer;
  forced-color-adjust: none; print-color-adjust: exact;
}
#timeSlider::-webkit-slider-thumb,
#cutoffSlider::-webkit-slider-thumb,
#opacitySlider::-webkit-slider-thumb,
#speedSlider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
  cursor: pointer;
}
#timeSlider::-moz-range-thumb,
#cutoffSlider::-moz-range-thumb,
#opacitySlider::-moz-range-thumb,
#speedSlider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
  cursor: pointer;
}
#timeSlider::-moz-range-track,
#cutoffSlider::-moz-range-track,
#opacitySlider::-moz-range-track,
#speedSlider::-moz-range-track {
  height: 6px; background: transparent;
}
#timeSlider::-moz-range-progress,
#cutoffSlider::-moz-range-progress,
#opacitySlider::-moz-range-progress,
#speedSlider::-moz-range-progress {
  height: 6px; background: transparent;
}
#timeSlider { flex: 1 1 auto; }
#timeSlider:disabled { opacity: 0.3; cursor: default; }

/* ---- small screens: labels hidden, legend drops to its own row ---- */
@media (max-width: 720px) {
  /* mobile: license text auto-hides (icon only, stays right);
     the 'i' icon opens it as a wrapped block */
  .license-text { display: none; }
  /* the 'i' opens a formatted block: one item per line, left-aligned */
  #licenseStrip.open .license-text {
    display: block;
    flex: 1 1 auto;
    white-space: normal; overflow: visible;
    text-align: left;
    line-height: 1.55;
    padding: 5px 10px;
  }
  #licenseStrip.open .license-part { display: block; }
  #licenseStrip.open .license-part + .license-part { margin-top: 3px; }
  #licenseStrip.open .license-part + .license-part::before { content: none; }
  .legend {
    order: 9;               /* after all the top-bar icons */
    flex-basis: 100%;
    min-width: 0;
  }
  .legend-tip { font-size: 13px; }
  .settings-panel, #layersPanel {
    left: 8px; right: 8px; width: auto; min-width: 0;
  }
  /* loading bar: a touch taller on touch screens, above the safe area */
  #loadingbar { height: 5px; }
}

/* ==== dual view: shell (2 iframe panes + shared timeline) ================
   SHELL: no map/app boots; hosts #dual-grid with two pane iframes and keeps
   the bottom bar as the single shared timeline. Its top bar carries the only
   global controls: info menu, dual exit, camera link, shared settings.
   PANE: full app in one half with NO top bar — just a floating chevron that
   opens the options panel (mode chips + colors/cutoff + station/country
   menu). The hour chip floats top-right, the legend becomes a full-height
   vertical strip on the left edge (max value at the top). */
body.shell #map,
body.shell #layersBtn,
body.shell #legendPicker,
body.shell #cmaxBtn,
body.shell #stationsModeBtn,
body.shell #layersPanel,
body.shell #licenseStrip,
body.shell #loadingbar,
body.shell #timeDisplay { display: none; }

#dual-grid {
  position: absolute;
  top: var(--menu-top, 48px);
  bottom: var(--bot-h);
  left: 0; right: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 1px;
  background: var(--bar-border);
}
#dual-grid iframe {
  width: 100%; height: 100%; border: 0;
  background: #0a0d12;
}

#dualLinkBtn {
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
}

/* --- pane: no top bar, only the floating chevron --- */
body.pane #topbar {
  position: fixed;
  top: 6px; left: 6px;
  width: auto; min-height: 0; height: auto;
  padding: 0; gap: 0;
  background: none; border: none;
  backdrop-filter: none;
  z-index: 21;
}
body.pane #topbar > *:not(#layersBtn) { display: none; }
body.pane #layersBtn {
  background: var(--bar-bg);
  border: 1px solid var(--bar-border);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

/* pane options panel opens just below the floating chevron */
body.pane #layersPanel {
  top: calc(var(--menu-top, 0px) + 44px);
  left: 6px;
}
.pane-mode-row { display: flex; gap: 4px; }
.pane-mode-row .frame-count-btn { flex: 1 1 0; }

/* --- pane: top-right hour chip in place of the bottom bar --- */
body.pane #bottombar {
  position: fixed;
  top: calc(var(--menu-top, 0px) + 6px);
  right: 8px; left: auto; bottom: auto;
  width: auto; height: auto;
  background: var(--bar-bg);
  border: 1px solid var(--bar-border);
  border-radius: 8px;
  padding: 3px 8px;
  gap: 0;
  backdrop-filter: blur(10px);
  z-index: 20;
}
body.pane #bottombar #playBtn,
body.pane #bottombar #timeSlider,
body.pane #bottombar #refreshBtn { display: none; }
body.pane #bottombar .time-label { min-width: 0; }

/* --- pane: fixed vertical legend strip, full half height --- */
body.pane #legendPicker {
  position: fixed;
  left: 4px;
  top: calc(var(--menu-top, 0px) + 44px);
  bottom: 8px;
  width: 26px; min-width: 0;
  flex: none;
  z-index: 9;
}
body.pane #legendPicker .legend-bar {
  position: absolute;
  left: 50%; top: 50%;
  /* exactly the picker's height (top +44 .. bottom 8) so no range is lost */
  width: calc(100vh - var(--menu-top, 0px) - 52px);
  height: 18px;
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}
body.pane #legendPicker .legend-marker {
  top: auto; bottom: auto; left: 0; right: 0;
  width: auto; height: 3px;
}
body.pane #legendPicker .legend-tip {
  top: auto; left: calc(100% + 4px);
  transform: none;
}
body.pane #loadingbar { bottom: 0; }
body.pane #licenseStrip { bottom: 0; }

@media (max-width: 720px) {
  /* mobile: top/bottom halves instead of left/right */
  body.shell #dual-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

/* links inside the left-menu text sections (contact mail, etc.) */
.menu-body a { color: var(--accent); text-decoration: none; }
.menu-body a:hover, .menu-body a:active { text-decoration: underline; }

/* ---- left-menu version footer (filled from changelog.js) ---- */
.menu-version {
  position: sticky;
  bottom: 0;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  background: var(--bar-bg);
  border-top: 1px solid var(--bar-border);
  backdrop-filter: blur(10px);
}

/* ---- "What's new" popup (once per release; whatsnew.js) ---- */
#whatsNew {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}
#whatsNew[hidden] { display: none; }
.whatsnew-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px 16px;
  color: var(--text);
  background: var(--bar-bg);
  border: 1px solid var(--bar-border);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: whatsnew-in .22s ease-out;
}
@keyframes whatsnew-in { from { opacity: 0; transform: translateY(6px); } }
/* the update number, large and faint behind the top right corner */
.whatsnew-num {
  position: absolute; top: -18px; right: -6px;
  font-size: 104px; font-weight: 800; line-height: 1; letter-spacing: -4px;
  color: rgba(229, 238, 245, 0.05);
  pointer-events: none; user-select: none;
  font-variant-numeric: tabular-nums;
}
.whatsnew-x {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; padding: 0;
  font: inherit; font-size: 18px; line-height: 1;
  color: var(--text-dim); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.whatsnew-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.whatsnew-meta {
  position: relative;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
.whatsnew-title { position: relative; margin-top: 2px; font-size: 19px; font-weight: 700; }
.whatsnew-groups { position: relative; margin: 6px 0 4px; }
/* one section per kind of change, a thin coloured rule on its left */
.whatsnew-group {
  margin-top: 12px; padding-left: 11px;
  border-left: 2px solid var(--wn-rule, rgba(229, 238, 245, 0.3));
}
.whatsnew-group h3 {
  margin: 0 0 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--wn-head, var(--text-dim));
}
.whatsnew-group p { margin: 3px 0; font-size: 13px; line-height: 1.45; }
.whatsnew-group.new { --wn-rule: #52ca0b; --wn-head: #7fe04a; }
.whatsnew-group.improved { --wn-rule: #3d8fd8; --wn-head: #7fbcf5; }
.whatsnew-group.fixed { --wn-rule: #f4a20b; --wn-head: #f4b84a; }
.whatsnew-group.removed { --wn-rule: #c25b5b; --wn-head: #e08a8a; }
.whatsnew-group.removed p { color: var(--text-dim); }
/* a quiet text button, not a big block */
.whatsnew-ok {
  position: relative;
  margin-top: 14px; padding: 2px 0 1px;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); background: none; border: 0;
  border-bottom: 1px solid rgba(229, 238, 245, 0.4);
  cursor: pointer;
}
.whatsnew-ok:hover { border-bottom-color: var(--text); }

@media (max-width: 720px) {
  .whatsnew-box { max-height: 76vh; padding: 16px 16px 14px; }
  .whatsnew-num { font-size: 88px; }
}

/* ---- temperature mode: live values only ----
   No timeline (no history), no color-scheme rows, no cutoff: the options card
   shows only the country list with each country's newest update time.
   Overriding --bot-h on the body lets the panels reach the bottom edge. */
body[data-mode="temperature"] { --bot-h: 0px; }
body[data-mode="temperature"] #bottombar,
body[data-mode="temperature"] #colorsToggle,
body[data-mode="temperature"] #schemePicker,
body[data-mode="temperature"] #cutoffRow,
body[data-mode="temperature"] #cutoffSlider { display: none; }

/* Dark-map-only mode: the value colours are tuned for the dark basemap, so
   the rows that could change the map or the radar animation are greyed out.
   Labels on top and Rotate map stay usable. */
body[data-mode="temperature"] #opacityRow,
body[data-mode="temperature"] #basemapRow,
body[data-mode="temperature"] #framesRow,
body[data-mode="temperature"] #speedRow {
  opacity: 0.35;
  pointer-events: none;
}

/* Stations/national views are capped at 12 frames, so the picker does
   nothing there: grey it out like the temperature mode does. */
body[data-mode="stations"] #framesRow {
  opacity: 0.35;
  pointer-events: none;
}

/* temperature card options: one full-width row each, the same yellow
   active state as the station and country cards, square boxes. */
.temp-opt .chip-row { flex-wrap: nowrap; }
.temp-opt .chip-row[hidden] { display: none; }
.temp-opt .frame-count-btn { flex: 1 1 0; white-space: nowrap; border-radius: 0; }

/* selectable rows matching the other panel rows (label left, value right) */
.temp-list { display: flex; flex-direction: column; gap: 1px; }
.temp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: calc(100% + 12px); margin: 0 -6px;
  padding: 5px 6px;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--text); font-size: 12px; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.temp-row:hover { background: rgba(255, 255, 255, 0.06); }
.temp-row.active { color: var(--accent-active); }
.temp-row.active .slider-val { color: var(--accent-active); }