/* ==========================================================================
   Meteokav WX Map — base styles (Step 2)
   Glassmorphism UI, light/dark theming via CSS variables + [data-theme].
   ========================================================================== */

/* ---- Theme tokens ---- */
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Desktop browser-zoom lock: zoomlock.js sets this to 1/zoom so the floating
     chrome keeps a constant on-screen size even at a non-100% browser zoom. */
  --ui-scale: 1;

  /* Light theme (default) */
  --bg: #eef2f7;
  --text: #0b1220;
  --text-soft: #4b5567;
  --accent: #2f7df6;

  /* Glass panels */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 30px rgba(16, 24, 40, 0.14);
  --glass-blur: 14px;
}

html[data-theme="dark"] {
  --bg: #0b1220;
  --text: #eaf0fb;
  --text-soft: #9aa6bd;
  --accent: #5aa2ff;

  --glass-bg: rgba(20, 28, 44, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  --glass-blur: 14px;
}

/* Midnight Blue: same dark tiles, recolored navy (tile filter below). */
html[data-theme="midnight"] {
  --bg: #0a1426;
  --text: #e7eefc;
  --text-soft: #8fa3c8;
  --accent: #4f8cff;

  --glass-bg: rgba(14, 26, 48, 0.58);
  --glass-border: rgba(120, 160, 230, 0.16);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  --glass-blur: 14px;
}

/* Flat midnight: navy mood, no terrain — slightly cooler/greyer glass. */
html[data-theme="flat"] {
  --bg: #1a232e;
  --text: #e6ecf4;
  --text-soft: #93a1b5;
  --accent: #5a93e6;

  --glass-bg: rgba(26, 36, 49, 0.6);
  --glass-border: rgba(150, 175, 210, 0.14);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  --glass-blur: 14px;
}

/* ============================================================================
   LITE MODE (html.wx-lite) — for weak-GPU Android only (auto-enabled by a runtime
   FPS probe, or via the manual toggle; see lite.js). NEVER auto-applied on desktop
   or iOS, so those keep the full glass + animations exactly as-is.

   The dominant cost is `backdrop-filter: blur()` re-blurring the moving map every
   frame (28 glass surfaces). Here we drop ALL backdrop-filter + animations and make
   the panels opaque so they stay readable without the frost.
   ============================================================================ */
html.wx-lite *,
html.wx-lite *::before,
html.wx-lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
}
/* Opaque panel backgrounds per theme (same hue, no blur needed) */
html.wx-lite[data-theme="light"]    { --glass-bg: rgba(255, 255, 255, 0.95); }
html.wx-lite[data-theme="dark"]     { --glass-bg: rgba(20, 28, 44, 0.96); }
html.wx-lite[data-theme="midnight"] { --glass-bg: rgba(14, 26, 48, 0.96); }
html.wx-lite[data-theme="flat"]     { --glass-bg: rgba(26, 36, 49, 0.97); }
/* Performance-toggle button: accent when lite mode is on */
.lite-btn.is-active { color: var(--accent); }

/* ---- Reset-ish ---- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Full-screen map; respect mobile safe areas */
#map {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background: var(--bg);
}

/* ---- Glass panel mixin ---- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-radius: 16px;
}

/* ---- Top bar ---- */
.ui-bar {
  position: absolute;
  z-index: 1000;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  min-height: 52px;
  padding: 7px 9px 7px 13px;

  display: flex;
  align-items: center;
  gap: 14px;

  max-width: calc(100vw - 24px);
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 0;            /* anchor top-left under zoom-lock */
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.brand-text-wrap { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text {
  font-size: 13.5px;
  letter-spacing: 0.2px;
  color: var(--text-soft);
  white-space: nowrap;
}
.brand-text strong { color: var(--text); font-weight: 700; }
.brand-clock {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.brand-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #8ff0a8, #2ecc5e);
  box-shadow: 0 0 0 3px rgba(46, 204, 94, 0.22);
}
/* Flashes once whenever new station data arrives (a 200 feed, not a 304). */
@keyframes brandFlash {
  0%   { transform: scale(1);   box-shadow: 0 0 0 3px rgba(46, 204, 94, 0.22); }
  25%  { transform: scale(1.55); box-shadow: 0 0 10px 3px rgba(46, 204, 94, 0.95); }
  100% { transform: scale(1);   box-shadow: 0 0 0 3px rgba(46, 204, 94, 0.22); }
}
.brand-dot.is-flash { animation: brandFlash 0.7s ease; }
@media (prefers-reduced-motion: reduce) { .brand-dot.is-flash { animation: none; } }
.brand-update {
  margin-top: 1px;
  font-size: 10px;
  color: var(--text-soft);
  opacity: 0.85;
  letter-spacing: 0.2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ui-actions { display: flex; align-items: center; gap: 8px; }

/* ---- Brand logo (upper-middle) ---- */
.map-logo {
  position: absolute;
  z-index: 1000;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) scale(var(--ui-scale, 1));
  transform-origin: 50% 0;          /* anchor top-center under zoom-lock */
  display: flex;
  align-items: center;
  border-radius: 12px;
  opacity: 0.85;            /* watermark by default (no box) */
  --logo-h: 79px;          /* +15% (×2) */
}
.map-logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.45));   /* soft fade drop shadow */
}
/* Minimal shine: a soft highlight sweeps across the logo every few seconds.
   The pseudo-element is masked by the logo art so the glint only rides the
   logo's shape (the mask uses the locally-hosted copy → same-origin). */
.map-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.5) 50%, transparent 56%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 120% 0;
  -webkit-mask: url('../img/meteokav-logo.png') center / auto var(--logo-h) no-repeat;
          mask: url('../img/meteokav-logo.png') center / auto var(--logo-h) no-repeat;
  animation: logoShine 6.5s ease-in-out infinite;
}
@keyframes logoShine {
  0%, 72%   { background-position: 120% 0; }   /* rest — glint parked off-left */
  92%, 100% { background-position: -20% 0; }   /* sweep left → right, then hide */
}
@media (prefers-reduced-motion: reduce) {
  .map-logo::after { animation: none; }
}
/* Light theme (desktop): the logo's light parts wash out on the light map, so
   give it a fixed dark card instead of the watermark. */
@media (min-width: 981px) {
  html[data-theme="light"] .map-logo {
    opacity: 1;
    padding: 7px 16px;
    background: rgba(16, 24, 40, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
}

/* ---- Sponsor logo (upper-right, 160×47) ---- */
.sponsor {
  position: absolute;
  z-index: 1000;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  width: 178px;
  height: 54px;
  border-radius: 11px;
  overflow: hidden;
  /* Fixed dark card (NOT theme glass) so the white ENFOS logo stays visible in
     every theme, including Light. */
  background: rgba(16, 24, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transform: scale(var(--ui-scale, 1));
  transform-origin: 100% 0;          /* anchor top-right under zoom-lock */
}
.sponsor img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px 15px; }
/* Sponsor stays upper-right at all sizes. Phone sizes (~20% smaller) live in the
   mobile block near the end of this file (≤600px, with a tinier ≤420px step). */

/* ---- Icon button ---- */
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease;
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }

/* Language button: a compact EL / EN text toggle (square button) */
.lang-btn { width: 38px; padding: 0; }
.lang-flag {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text);
}

/* Theme toggle (bottom-right) — show only the glyph for the CURRENT theme */
.wx-theme-btn { font-size: 17px; }
.wx-theme-btn .icon { line-height: 1; display: none; }
html[data-theme="light"]    .wx-theme-btn .icon-light    { display: block; }
html[data-theme="dark"]     .wx-theme-btn .icon-dark     { display: block; }
html[data-theme="midnight"] .wx-theme-btn .icon-midnight { display: block; color: var(--accent); }
html[data-theme="flat"]     .wx-theme-btn .icon-flat     { display: block; color: var(--accent); }

/* ---- Station markers (temperature circles) ---- */
.wx-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  /* modern Inter numerals, slightly tight tracking
     (set explicitly — MapLibre marker elements don't inherit body font) */
  font-family: var(--font);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1;
  color: #0d1b2a;                    /* overridden inline per temperature */
  background: #cdd6e2;               /* overridden inline per temperature */
  /* glossy inner edge + hairline + soft drop shadow = floating iOS pill */
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
              0 4px 11px rgba(0, 0, 0, 0.28);
  /* NOTE: do NOT transition `transform` — MapLibre drives the marker's transform
     every frame while panning, so a transform-transition makes markers lag and
     "snap back". Only animate box-shadow. */
  transition: box-shadow 0.2s ease;
}
html[data-theme="dark"] .wx-marker,
html[data-theme="midnight"] .wx-marker,
html[data-theme="flat"] .wx-marker {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
              0 5px 14px rgba(0, 0, 0, 0.5);
}
.wx-marker:hover,
.wx-marker:focus-visible {
  /* no transform here — MapLibre owns the marker's transform for positioning;
     use shadow/ring for hover feedback instead so panning stays glitch-free */
  z-index: 2;
  outline: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
              0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Min/Max marker: rounded tag with max (▲) over min (▼), fixed default color */
.wx-marker-mm {
  width: auto;
  min-width: 54px;
  height: 50px;
  border-radius: 14px;
  flex-direction: column;
  gap: 1px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 800;
}
.wx-marker-mm .mm-max,
.wx-marker-mm .mm-min {
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.08;
  white-space: nowrap;
}
.wx-marker-mm i { font-style: normal; font-size: 8px; line-height: 1; }
.wx-marker-mm .mm-max i { color: #ff8e8e; } /* warm up-arrow */
.wx-marker-mm .mm-min i { color: #8fb6ff; } /* cool down-arrow */

/* Temperature mode: smaller oval/capsule marker (fits "12.5°"); no icon/arrow */
.wx-marker-temp {
  width: auto;
  min-width: 42px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;     /* capsule (oval) */
  font-size: 14px;
}

/* Wind mode: capsule marker showing the current GUST speed + a small km/h unit. */
.wx-marker-wind {
  width: auto;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 14px;
}
.wx-mk-unit {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.82;
  letter-spacing: 0;
  margin-left: 2px;
}

/* Rain mode: water-drop shape (mask scales to the element; no border/box-shadow,
   so use a filter drop-shadow for depth). The value sits in the bulb. */
.wx-marker-precip {
  width: 44px;
  height: 52px;
  font-size: 15px;        /* smaller so values like "22.0" fit the bulb */
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  /* weak gloss over the dynamic fill: bright top-left highlight → faint bottom
     shade, so the drop reads like a 3D droplet catching light */
  background-image: linear-gradient(150deg,
    rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 45%, rgba(0, 0, 0, 0.14));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52'%3E%3Cpath d='M22 1 C34 15 43 22 43 31 A21 21 0 1 1 1 31 C1 22 10 15 22 1 Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52'%3E%3Cpath d='M22 1 C34 15 43 22 43 31 A21 21 0 1 1 1 31 C1 22 10 15 22 1 Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  /* faint light outline + a soft drop shadow (both follow the masked shape) */
  filter: drop-shadow(0 0 0.7px rgba(255, 255, 255, 0.55))
          drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}
.wx-marker-precip .wx-temp { transform: translateY(5px); } /* center in the bulb */

/* Weather-condition badge OUTSIDE the temperature circle (top-right) */
.wx-mk-icon {
  position: absolute;
  top: -16px;       /* sits higher so it doesn't cover the temperature's ° */
  right: -9px;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
  /* No backdrop blur — the semi-opaque background + border carry the look, and this
     drops the GPU cost to zero across ~30 badges (was blur(6px)). */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none; /* let clicks fall through to the marker */
}
.wx-mk-icon svg { width: 24px; height: 24px; display: block; }

/* Wind-direction arrow on the LEFT of the marker (doesn't cover the value) */
.wx-mk-wind {
  position: absolute;
  left: -23px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.wx-mk-wind-rot {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;   /* rotated to the wind direction (inline) */
}
.wx-mk-wind-arrow {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--accent);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
  /* subtle repeatable nudge toward the direction it points */
  animation: windBob 1.8s ease-in-out infinite;
}
@keyframes windBob {
  0%, 100% { transform: translateY(1.5px); opacity: 0.75; }
  50%      { transform: translateY(-2px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-mk-wind-arrow { animation: none; }
}
/* Wind mode uses a slightly bigger direction arrow (same style as Conditions). */
.wx-marker-wind .wx-mk-wind { left: -28px; width: 27px; height: 27px; }
/* Light mode: the badge's pale glass washes out cloud/moon icons — use a dark
   chip so the colored icons stay visible. */
html[data-theme="light"] .wx-mk-icon {
  background: rgba(43, 55, 72, 0.82);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.28);
}

/* ---- Wind-mode popup: compass + Beaufort + live speeds ---- */
.wx-pop-wind {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 11px;
}
.wx-compass-svg { width: 106px; height: 106px; flex: none; }
.wx-cmp-ring { fill: none; stroke: var(--glass-border); stroke-width: 2; }
.wx-cmp-ticks line { stroke: var(--text-soft); stroke-width: 2; opacity: 0.45; }
.wx-cmp-card text {
  fill: var(--text-soft); font-size: 12px; font-weight: 700;
  text-anchor: middle; dominant-baseline: middle;
}
/* Thin triangle compass pointer — shows the wind's flow direction (where it blows TO) */
.wx-cmp-arrow { fill: var(--accent); }
.wx-cmp-deg {
  fill: var(--text); font-size: 18px; font-weight: 800;
  text-anchor: middle; font-variant-numeric: tabular-nums;
}
.wx-cmp-name { fill: var(--accent); font-size: 12.5px; font-weight: 800; text-anchor: middle; }

.wx-wind-read { flex: 1; min-width: 0; }
.wx-wind-bft { display: flex; align-items: baseline; gap: 4px; margin-bottom: 7px; }
.wx-bft-num {
  font-size: 23px; font-weight: 800; color: var(--text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wx-bft-unit { font-size: 11px; font-weight: 700; color: var(--text-soft); }
.wx-bft-label {
  font-size: 11px; font-weight: 600; color: var(--text-soft);
  margin-left: auto; text-align: right; line-height: 1.15;
}
.wx-wind-sp {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 4px 0; border-top: 1px solid var(--glass-border);
}
.wx-wsp-lbl { font-size: 11.5px; color: var(--text-soft); font-weight: 600; }
.wx-wsp-val {
  font-size: 16px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.wx-wsp-val small { font-size: 9.5px; font-weight: 700; color: var(--text-soft); margin-left: 2px; }

/* Wind mode: centre the "Max Gust Readings" block (title + each reading). */
.wx-pop-mode-wind .wx-pop-section { text-align: center; }
.wx-pop-mode-wind .wx-pop-rows .wx-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* ---- Color legend (bottom-left) ---- */
.legend {
  position: absolute;
  z-index: 1000;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 244px;
  padding: 9px 13px 7px;
  border-radius: 14px;
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 100%;          /* anchor bottom-left under zoom-lock */
}
.legend-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.legend-bar {
  height: 10px;
  border-radius: 5px;
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.legend-ticks { position: relative; height: 13px; margin-top: 4px; }
.legend-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Tablet (601–980px): hide the legend — the centered mode menu (still showing
   labels) would overlap it. On phones (≤600px) it returns as a compact VERTICAL
   scale at the bottom-left (see the mobile block near the end of this file). */
@media (min-width: 601px) and (max-width: 980px) {
  .legend { display: none !important; }
}

/* ---- Mode switcher (segmented control) ---- */
.mode-menu {
  position: absolute;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%) scale(var(--ui-scale, 1));
  transform-origin: 50% 100%;        /* anchor bottom-center under zoom-lock */
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 16px;
}
.mode-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.is-active {
  background: color-mix(in srgb, var(--accent) 90%, transparent);
  color: #fff;
}
.mode-btn .mode-ic { display: flex; }
.mode-btn .wx-ic { width: 17px; height: 17px; }
@media (max-width: 560px) {
  .mode-btn .mode-label { display: none; }
  .mode-btn { padding: 9px 12px; }
}

/* ---- Station popup (glass card) ---- */
.wx-popup .maplibregl-popup-content {
  padding: 14px 15px 13px;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  color: var(--text);
  font-family: var(--font);
  max-height: 70vh;        /* tall Min/Max popup scrolls instead of overflowing */
  overflow-y: auto;
}

/* Smooth open: animate an INNER wrapper only. Animating transform/opacity on the
   content itself would disable its backdrop-filter (glass blur), so the blurred
   card stays static while its contents fade + rise in. */
@keyframes wxPopupIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wx-popup .wx-pop-anim.is-anim {
  animation: wxPopupIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .wx-popup .wx-pop-anim.is-anim { animation: none; }
}

/* Iris "bubble" open: the whole frosted card reveals via a clip-path circle that
   expands from the marker side (origin set per anchor in JS → --bx/--by). clip-path,
   unlike transform, does NOT disable backdrop-filter, so the glass blur stays intact.
   `is-bubble-init` clips to 0 synchronously (no first-frame flash); `is-bubble` runs
   the expand. Both are stripped after, so the card can resize (Min/Max tabs) freely. */
.wx-popup .maplibregl-popup-content { --bx: 50%; --by: 100%; }
.wx-popup.is-bubble-init .maplibregl-popup-content { clip-path: circle(0% at var(--bx) var(--by)); }
.wx-popup.is-bubble-init .maplibregl-popup-tip { opacity: 0; }
@keyframes wxBubbleIn {
  from { clip-path: circle(0% at var(--bx) var(--by)); }
  to   { clip-path: circle(150% at var(--bx) var(--by)); }
}
@keyframes wxTipIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wxDotPulse { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 100% { transform: scale(1); } }
.wx-popup.is-bubble .maplibregl-popup-content { animation: wxBubbleIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wx-popup.is-bubble .maplibregl-popup-tip { animation: wxTipIn 0.3s ease 0.12s both; }
.wx-popup.is-bubble .wx-pop-dot { animation: wxDotPulse 0.6s ease 0.2s both; }
@media (prefers-reduced-motion: reduce) {
  .wx-popup.is-bubble .maplibregl-popup-content,
  .wx-popup.is-bubble .maplibregl-popup-tip,
  .wx-popup.is-bubble .wx-pop-dot { animation: none; }
  .wx-popup.is-bubble-init .maplibregl-popup-content { clip-path: none; }
  .wx-popup.is-bubble-init .maplibregl-popup-tip { opacity: 1; }
}

/* Color the little pointer to blend with the card */
.wx-popup .maplibregl-popup-tip { border-top-color: var(--glass-bg); }
.wx-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.wx-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.wx-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--glass-bg); }
.wx-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.wx-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.wx-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--glass-bg); }
.wx-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--glass-bg); }
.wx-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--glass-bg); }

.wx-popup .maplibregl-popup-close-button {
  color: var(--text-soft);
  font-size: 19px;
  width: 26px;
  height: 26px;
  right: 3px;
  top: 2px;
  border-radius: 8px;
}
.wx-popup .maplibregl-popup-close-button:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
}

/* Header */
.wx-pop-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.wx-pop-dot {
  flex: none;
  width: 13px; height: 13px; border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent),
              0 1px 3px rgba(0, 0, 0, 0.3);
}
.wx-pop-title { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.wx-pop-sub { font-size: 10.5px; color: var(--text-soft); margin-top: 2px; }

/* Condition + temperature banner inside the Temperature popup */
.wx-pop-sky {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 2px 0 9px;
  padding: 9px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-soft) 11%, transparent);
}
.wx-pop-sky-ic { display: flex; flex: none; }
.wx-pop-sky-ic svg { width: 42px; height: 42px; display: block; }
.wx-pop-sky-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.wx-pop-sky-label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.wx-pop-sky-temp {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-top: 1px;
}
.wx-pop-sky-temp .wx-pop-sky-unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  margin-left: 1px;
}
/* Light mode: darken the weather/temperature banner so the colored icon and the
   temperature read clearly (and flip its text to light). */
html[data-theme="light"] .wx-pop-sky {
  background: rgba(34, 45, 61, 0.92);
}
html[data-theme="light"] .wx-pop-sky-label { color: rgba(255, 255, 255, 0.72); }
html[data-theme="light"] .wx-pop-sky-temp .wx-pop-sky-unit { color: rgba(255, 255, 255, 0.6); }

/* ---- Temperature-mode popup hero: current temp + today max/min + feels like ---- */
.wx-tpop { margin: 2px 0 2px; }
.wx-tpop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.wx-tpop-now {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.wx-tpop-mm { display: flex; flex-direction: column; gap: 5px; min-width: 88px; }
.wx-tpop-mmrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wx-tpop-mlbl { font-size: 11px; font-weight: 600; color: var(--text-soft); }
.wx-tpop-mval { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wx-tpop-feels {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 10px 0 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-soft) 11%, transparent);
}
.wx-tpop-flbl { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.wx-tpop-fval {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* Temperature mode is the tallest popup (hero + 6 rows + 3 section titles), so on a
   scaled laptop (15"/1080p @125–150%) it just tips past 70vh → scrollbar. Tighten its
   vertical rhythm only (other modes are unaffected) to bring it comfortably under. */
.wx-pop-mode-temperature .wx-pop-head { margin-bottom: 6px; }
.wx-pop-mode-temperature .wx-tpop-now { font-size: 38px; }
.wx-pop-mode-temperature .wx-tpop-feels { margin-top: 6px; padding-top: 6px; padding-bottom: 6px; }
.wx-pop-mode-temperature .wx-pop-section { margin-top: 6px; padding-top: 5px; }
.wx-pop-mode-temperature .wx-row { padding-top: 3.5px; padding-bottom: 3.5px; }
.wx-pop-mode-temperature .wx-pop-foot { margin-top: 7px; }

/* ---- Rain-mode popup hero: daily rain + rate/max + storm total ---- */
.wx-rpop { margin: 2px 0 2px; }
.wx-rpop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.wx-rpop-now {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.wx-rpop-unit { font-size: 15px; font-weight: 700; color: var(--text-soft); }
.wx-rpop-side { display: flex; flex-direction: column; gap: 5px; min-width: 112px; }
.wx-rpop-srow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wx-rpop-slbl { font-size: 11px; font-weight: 600; color: var(--text-soft); }
.wx-rpop-sval { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-rpop-u { font-size: 9.5px; font-weight: 600; color: var(--text-soft); }
.wx-rpop-storm {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 10px 0 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-soft) 11%, transparent);
}
.wx-rpop-stlbl { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.wx-rpop-stval {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.wx-rpop-stval .wx-rpop-u { font-size: 11px; }

/* Section header (Min/Max mode) */
.wx-pop-section {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-soft);
  margin: 10px 0 1px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--text-soft) 18%, transparent);
}
.wx-pop-head + .wx-pop-section { border-top: none; margin-top: 2px; padding-top: 0; }

/* Category tabs (Min/Max mode) — fixed-size panels, no scroll */
.wx-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 0 6px;
}
.wx-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--text-soft) 12%, transparent);
  transition: background 0.15s ease, color 0.15s ease;
}
.wx-tab:hover { color: var(--text); }
.wx-tab.is-active {
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  color: #fff;
}
.wx-tab .wx-ic { width: 16px; height: 16px; }
.wx-tabpanels { min-height: 192px; }  /* fits the tallest section (6 rows) */
.wx-tabpanel { display: none; }
.wx-tabpanel.is-active { display: block; }

/* Rows */
.wx-pop-rows { display: flex; flex-direction: column; }
.wx-row-time { font-size: 10.5px; color: var(--text-soft); font-weight: 500; }
.wx-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5.5px 1px;
  border-top: 1px solid color-mix(in srgb, var(--text-soft) 16%, transparent);
}
.wx-row:first-child { border-top: none; }
.wx-row-ic { display: flex; color: var(--text-soft); }
.wx-row-label { font-size: 12.5px; color: var(--text-soft); }
.wx-row-val { font-size: 13.5px; font-weight: 700; letter-spacing: -0.1px; }
.wx-row-val .wx-unit { font-size: 11px; font-weight: 600; color: var(--text-soft); }
/* Emphasised row (e.g. Wind mode's "Today" max gust) — a touch bigger. */
.wx-row.wx-row-lg { padding: 7px 0; }
.wx-row.wx-row-lg .wx-row-label { font-size: 13.5px; font-weight: 600; }
.wx-row.wx-row-lg .wx-row-val { font-size: 16.5px; }
.wx-row.wx-row-lg .wx-row-val .wx-unit { font-size: 11.5px; }
.wx-row-val .wx-na { color: var(--text-soft); font-weight: 600; }

/* Dual "Max | Min" row (compact Monthly/Yearly extremes) */
.wx-row.wx-row-dual { display: flex; align-items: baseline; gap: 0; }
.wx-dual { flex: 1; display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; }
.wx-dual-lbl { font-size: 10.5px; font-weight: 700; flex: none; }
.wx-dual-max { color: #e0605c; }
.wx-dual-min { color: #4f90e0; }
.wx-dual-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-dual-val .wx-unit { font-size: 10px; font-weight: 600; color: var(--text-soft); }
.wx-dual-sep { align-self: stretch; width: 1px; background: var(--glass-border); margin: 2px 9px; flex: none; }

.wx-ic { width: 18px; height: 18px; display: block; }
.wx-row-ic .wx-ic { transition: transform 0.2s ease; } /* wind arrow rotates smoothly */

/* Footer link */
.wx-pop-foot { margin-top: 11px; display: flex; align-items: center; gap: 8px; }
.wx-pop-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.wx-pop-link:hover { text-decoration: underline; }
.wx-pop-link .wx-ic { width: 15px; height: 15px; }

/* ---- MapLibre control restyle (glass) ---- */
/* Counter-scale the bottom-right control stack with the rest of the chrome
   under the desktop zoom-lock (anchored to the bottom-right corner). */
.maplibregl-ctrl-bottom-right {
  transform: scale(var(--ui-scale, 1));
  transform-origin: 100% 100%;
}
.maplibregl-ctrl-group {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.maplibregl-ctrl-group button {
  background: transparent !important;
  width: 38px;
  height: 38px;
}
.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--glass-border) !important;
}
.maplibregl-ctrl-group button:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
}
/* Custom bottom-right buttons (view / theme) — inline SVG, themed via currentColor.
   !important: MapLibre's `.maplibregl-ctrl-group button` sets display:block which
   otherwise wins and breaks centering on some browsers. */
.wx-view-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.wx-view-btn svg { width: 20px; height: 20px; display: block; }
.wx-view-btn:disabled { opacity: 0.35; cursor: default; }
.wx-view-btn:disabled:hover { background: transparent !important; }
/* Recolor the built-in control icons to match the theme text color */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: none;
}
html[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon,
html[data-theme="midnight"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon,
html[data-theme="flat"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

/* ---- Lightning toggle + live strikes (Blitzortung) ---- */
.wx-lightning-btn.is-active {
  color: #ffb02e;
  background: color-mix(in srgb, #ffb02e 18%, transparent) !important;
}
.wx-lightning-btn.is-active svg {
  filter: drop-shadow(0 0 5px rgba(255, 176, 46, 0.85));
}

/* Lightning info box (bottom-left): live strikes/min + required Blitzortung
   credit (their licence requires visible attribution). */
.wx-lightning-box {
  position: absolute;
  z-index: 1000;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px 6px;
  border-radius: 12px;
  line-height: 1.1;
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 100%;          /* anchor bottom-left under zoom-lock */
}
.wx-lt-rate { display: flex; align-items: center; gap: 5px; }
.wx-lt-rate .wx-lt-ic { display: flex; }
.wx-lt-rate .wx-lt-ic svg { width: 15px; height: 15px; color: #ffb02e; }
.wx-lt-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.wx-lt-unit { font-size: 10.5px; font-weight: 600; color: var(--text-soft); }
.wx-lt-updated { font-size: 9.5px; font-weight: 600; color: var(--text-soft); opacity: 0.85; margin-top: 5px; }
.wx-lightning-box { min-width: 162px; }
/* Strike-age legend (gradient bar + minute ticks), like the temp/rain legend. */
.wx-lt-legend { margin-top: 4px; }
.wx-lt-leg-title { font-size: 9px; font-weight: 700; color: var(--text-soft); margin-bottom: 3px; letter-spacing: 0.2px; }
.wx-lt-leg-bar {
  height: 9px;
  border-radius: 5px;
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  background: linear-gradient(to right,
    #ffffff 0%, #fde9a8 16.7%, #fbd45e 33.3%, #f8b154 50%,
    #f08a45 66.7%, #e56450 83.3%, #cc4040 100%);
}
.wx-lt-leg-ticks { display: flex; margin-top: 2px; }
.wx-lt-leg-ticks span {
  flex: 1;
  text-align: right;
  font-size: 8px;
  font-weight: 600;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
/* When the layer is on, lift the (bottom-left) legend above the box. */
body.wx-lightning-on .legend {
  bottom: calc(116px + env(safe-area-inset-bottom));
}

/* ---- Radar dBZ legend (bottom-left; shown only while radar is active) ---- */
.wx-radar-legend {
  position: absolute;
  z-index: 1000;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: none;                       /* shown via body.wx-radar-on below */
  padding: 9px 13px 10px;
  border-radius: 14px;
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 100%;            /* anchor bottom-left under zoom-lock */
}
body.wx-radar-on .wx-radar-legend { display: block; }
/* Radar replaces the core temperature/precipitation legend while it's on. */
body.wx-radar-on .legend { display: none !important; }
/* If lightning is also on, lift the radar legend above the lightning box. */
body.wx-lightning-on .wx-radar-legend { bottom: calc(116px + env(safe-area-inset-bottom)); }

.rl-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--text-soft); margin-bottom: 7px; text-align: center;
}
.rl-body { display: flex; }
.wx-radar-legend .rl-bar {
  flex: none; width: 13px; height: 150px; border-radius: 6px;
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  /* Real RainViewer scheme-2 colours, 10 dBZ (top) → 55 dBZ (bottom). Tick % in
     app.js are aligned to these stops so each number sits on its true colour. */
  background: linear-gradient(to bottom,
    rgb(136,221,238) 0%, rgb(0,163,224) 13%, rgb(0,119,170) 22%, rgb(0,85,136) 33%,
    rgb(255,238,0) 44%, rgb(255,170,0) 56%, rgb(255,68,0) 67%, rgb(193,0,0) 78%,
    rgb(143,0,0) 89%, rgb(93,0,0) 100%);
}
.rl-ticks { position: relative; height: 150px; min-width: 20px; margin-left: 7px; }
.rl-tick {
  position: absolute; left: 0; transform: translateY(-50%);
  font-size: 10px; font-weight: 600; color: var(--text-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Radar hover/tap readout (dBZ + rain rate at a point) */
.wx-radar-tip {
  position: fixed;
  z-index: 1200;
  pointer-events: none;                /* never block map interaction */
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 10px;
  font-family: var(--font);
}
.wx-radar-tip .rt-cat { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.15; }
.wx-radar-tip .rt-v {
  font-size: 11px; font-weight: 600; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   MOBILE (≤600px) — ultra-compact VERTICAL legends (text stripped)
   ----------------------------------------------------------------------------
   To stop covering the centered mode menu, the bottom-left panels drop ALL
   descriptive text on phones: the lightning box keeps just the value + a tiny
   "(min)" over a vertical age scale; the temp/rain legend keeps just its unit
   ("°C"/"mm") over a vertical scale. That makes them narrow enough to live in
   the bottom-left CORNER. And since two stacked scales would still be busy,
   when LIGHTNING is active the temp/rain legend is hidden outright (mobile).
   ========================================================================== */
@media (max-width: 600px) {
  /* ---- Lightning box: value on top, "(min)" + vertical age scale below ---- */
  .wx-lightning-box {
    min-width: 0;
    width: auto;
    max-width: 92px;
    padding: 6px 9px 7px;
    gap: 2px;
  }
  .wx-lt-unit { display: none; }            /* drop "strikes/min" — keep only the number */
  .wx-lt-legend {
    display: grid;
    grid-template-columns: 12px auto;
    grid-template-areas: "title title" "bar ticks";
    column-gap: 7px;
    margin-top: 4px;
  }
  .wx-lt-leg-title { grid-area: title; margin-bottom: 5px; }   /* now just "(min)" */
  .wx-lt-leg-bar {
    grid-area: bar;
    width: 12px;
    height: 104px;
    background: linear-gradient(to bottom,
      #ffffff 0%, #fde9a8 16.7%, #fbd45e 33.3%, #f8b154 50%,
      #f08a45 66.7%, #e56450 83.3%, #cc4040 100%);
  }
  .wx-lt-leg-ticks {
    grid-area: ticks;
    flex-direction: column;
    height: 104px;
    margin-top: 0;
  }
  .wx-lt-leg-ticks span {
    flex: 1;
    display: flex;
    align-items: flex-end;        /* number sits at the bottom of its age band */
    text-align: left;
    line-height: 1;
  }

  /* ---- Temperature / Precipitation legend: unit only + vertical scale ---- */
  .legend { width: auto; }
  .legend.legend-vertical {
    display: grid;
    /* Reserve the ticks column (the ticks are absolutely positioned, so an `auto`
       track would collapse to 0 and the numbers would spill to the box edge).
       22px fits 3-digit labels like "120" (Wind) / "0.1" (Rain). */
    grid-template-columns: 12px 22px;
    grid-template-areas: "title title" "bar ticks";
    column-gap: 8px;
    padding: 8px 11px 9px;
  }
  .legend-vertical .legend-title {  /* now just the unit, e.g. "(°C)" */
    grid-area: title;
    margin-bottom: 7px;
    white-space: nowrap;
    font-size: 10px;
  }
  .legend-vertical .legend-bar {
    grid-area: bar;
    width: 12px;
    height: 132px;
    border-radius: 6px;
  }
  .legend-vertical .legend-ticks {
    grid-area: ticks;
    position: relative;
    height: 132px;
    margin-top: 0;
  }
  .legend-vertical .legend-tick {
    left: 0;
    transform: translateY(-50%);  /* center the number on its value position */
    text-align: left;
  }
  /* Temperature scale carries the widest labels (the "−20"/"−10" minus signs),
     so give it a smaller tick font. The ticks are absolutely positioned, so the
     auto grid column collapses to 0 and the numbers would overflow to the box
     edge — reserve an explicit ticks-column width so the box contains them, with
     a small gap (numbers sit close to the bar) and right padding for breathing. */
  .legend-temperature.legend-vertical {
    grid-template-columns: 12px 20px;
    column-gap: 5px;
    padding-right: 10px;
  }
  .legend-temperature.legend-vertical .legend-tick { font-size: 8px; }

  /* While lightning is active, hide the temp/rain legend (one scale at a time). */
  body.wx-lightning-on .legend { display: none !important; }

  /* ---- Radar legend: compact bar + dBZ ticks ---- */
  .wx-radar-legend { padding: 7px 9px 9px; }
  .wx-radar-legend .rl-title { font-size: 9.5px; margin-bottom: 6px; }
  .wx-radar-legend .rl-bar { width: 12px; height: 122px; }
  .wx-radar-legend .rl-ticks { height: 122px; min-width: 16px; margin-left: 6px; }
  .wx-radar-legend .rl-tick { font-size: 9px; }
  /* Stack the radar bar ABOVE the (taller) lightning box when both are on. */
  body.wx-lightning-on .wx-radar-legend { bottom: calc(172px + env(safe-area-inset-bottom)); }

  /* ---- Sponsor box: ~20% smaller on phones ---- */
  .sponsor { width: 142px; height: 43px; }
  .sponsor img { padding: 6px 11px; }
}

/* Smallest phones: a touch smaller still (ordered AFTER the ≤600 block so it wins). */
@media (max-width: 420px) {
  .sponsor { width: 126px; height: 38px; }
}

/* ---- Webcam mode ---- */
.wx-webcam-btn.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
/* In webcam mode the station markers, mode menu and colour legend step aside. */
body.wx-webcam-on .wx-marker { display: none !important; }
body.wx-webcam-on .mode-menu,
body.wx-webcam-on .legend { display: none !important; }

/* ---- 3rd-party (partner) stations toggle (top-left, under the brand box) ---- */
.wx-3p-toggle {
  position: absolute;
  z-index: 1000;
  top: calc(92px + env(safe-area-inset-top));   /* breathing space below the brand box */
  left: calc(12px + env(safe-area-inset-left));
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 0;            /* match the brand box anchor under zoom-lock */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;              /* override .glass 16px for a tighter square */
  cursor: pointer;
  color: var(--text-soft);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.wx-3p-toggle svg { width: 21px; height: 21px; display: block; }
.wx-3p-toggle:hover { color: var(--text); }
.wx-3p-toggle:focus-visible {
  outline: none;
  box-shadow: var(--glass-shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}
.wx-3p-toggle.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
}
/* In webcam mode the station markers step aside, so hide this toggle too. */
body.wx-webcam-on .wx-3p-toggle { display: none !important; }

/* ---- Webcam toggle — upper-left, below the live-data-table button ---- */
.wx-webcam-corner {
  position: absolute;
  z-index: 1000;
  top: calc(188px + env(safe-area-inset-top));   /* stacked under the data-table button */
  left: calc(12px + env(safe-area-inset-left));
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 0;             /* match the top-left anchor under zoom-lock */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-soft);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.wx-webcam-corner svg { width: 20px; height: 20px; display: block; }
.wx-webcam-corner:hover { color: var(--text); }
.wx-webcam-corner:focus-visible {
  outline: none;
  box-shadow: var(--glass-shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---- Live data-table button — upper-left, between exterior toggle and camera ---- */
.wx-data-toggle {
  position: absolute;
  z-index: 1000;
  top: calc(140px + env(safe-area-inset-top));   /* between the exterior toggle (92) and camera (188) */
  left: calc(12px + env(safe-area-inset-left));
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-soft);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.wx-data-toggle svg { width: 21px; height: 21px; display: block; }
.wx-data-toggle:hover { color: var(--text); }
.wx-data-toggle:focus-visible {
  outline: none;
  box-shadow: var(--glass-shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}
.wx-data-toggle.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
}
/* In webcam mode the station markers step aside, so hide this button too. */
body.wx-webcam-on .wx-data-toggle { display: none !important; }

/* ---- Live data-table modal ---- */
.wx-dt-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(7px) saturate(115%); backdrop-filter: blur(7px) saturate(115%);
}
.wx-dt-modal.is-on { display: flex; }
.wx-dt-card {
  width: min(1000px, 96vw);
  max-height: 88vh;
  border-radius: 16px;
  padding: 14px 16px 14px;
  display: flex; flex-direction: column;
  animation: wxGraphIn 0.22s ease;
}
.wx-dt-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.wx-dt-titles { flex: 1; min-width: 0; }
.wx-dt-title { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.2; }
.wx-dt-sub { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin-top: 2px; }
.wx-dt-close {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; background: transparent; color: var(--text-soft); cursor: pointer;
}
.wx-dt-close:hover { background: rgba(150, 160, 175, 0.15); color: var(--text); }
/* Category segmented toggle (Network / Exterior) */
.wx-dt-tabs {
  display: flex; gap: 3px; padding: 3px; align-self: flex-start; margin-bottom: 10px;
  border-radius: 10px; background: rgba(150, 160, 175, 0.10);
}
.wx-dt-tabs.is-single { display: none; }   /* only one category → hide the toggle */
.wx-dt-tab {
  border: none; background: transparent;
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--text-soft);
  padding: 5px 14px; border-radius: 8px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wx-dt-tab:hover { color: var(--text); }
.wx-dt-tab.is-active { background: color-mix(in srgb, var(--accent) 90%, transparent); color: #fff; }
/* Scroll container (both axes; sticky header + first column ride along) */
.wx-dt-body { overflow: auto; flex: 1; min-height: 0; border-radius: 10px; }
.wx-dt-empty { padding: 28px; text-align: center; color: var(--text-soft); font-weight: 600; }

/* ---- the table ---- */
.wx-dt-table { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.wx-dt-table th, .wx-dt-table td { white-space: nowrap; text-align: right; }
.wx-dt-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg);                       /* opaque so scrolled rows don't bleed through */
  padding: 7px 11px 8px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--text-soft) 26%, transparent);
}
.wx-dt-hl { display: block; }
.wx-dt-hu { display: block; font-size: 9px; font-weight: 600; opacity: 0.7; margin-top: 1px; text-transform: none; }
/* Sortable headers */
.wx-dt-sortable { cursor: pointer; -webkit-user-select: none; user-select: none; transition: color 0.15s ease; }
.wx-dt-sortable:hover { color: var(--text); }
.wx-dt-table thead th.is-sorted { color: var(--accent); }
.wx-dt-sa { margin-left: 3px; font-size: 8px; vertical-align: middle; }
/* Last-update column: muted, compact timestamp */
.wx-dt-time .wx-dt-val { font-size: 11px; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
/* First column (station name): sticky on the left, left-aligned */
.wx-dt-name-h, .wx-dt-name {
  position: sticky; left: 0; z-index: 2; text-align: left;
  background: var(--bg);
}
.wx-dt-name-h { z-index: 4; }                  /* header ∩ first col sits above both */
.wx-dt-name {
  padding: 6px 14px 6px 10px;
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--text-soft) 12%, transparent);
}
.wx-dt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #46d07a; box-shadow: 0 0 0 2px color-mix(in srgb, #46d07a 28%, transparent); }
.wx-dt-row.is-offline .wx-dt-dot { background: #e0605c; box-shadow: 0 0 0 2px color-mix(in srgb, #e0605c 28%, transparent); }
.wx-dt-nm { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.wx-dt-c {
  padding: 6px 11px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--text-soft) 12%, transparent);
}
.wx-dt-row:hover .wx-dt-c,
.wx-dt-row:hover .wx-dt-name { background: color-mix(in srgb, var(--text-soft) 8%, transparent); }
.wx-dt-row.is-offline .wx-dt-c, .wx-dt-row.is-offline .wx-dt-nm { opacity: 0.5; }
.wx-dt-val { display: inline-block; }
.wx-dt-val.is-hi { color: #e0605c; }
.wx-dt-val.is-lo { color: #4f90e0; }
.wx-dt-arrow {
  display: inline-block; font-size: 11px; line-height: 1; color: var(--text-soft);
  margin-right: 4px; transform-origin: 50% 50%;
}
/* Change flash: a brief accent pop on the value when a new feed differs */
@keyframes wxDtFlash {
  0%   { background: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); transform: scale(1.22); }
  55%  { color: var(--accent); }
  100% { background: transparent; color: inherit; transform: scale(1); }
}
.wx-dt-val.is-flash { animation: wxDtFlash 0.6s ease; border-radius: 5px; padding: 0 3px; margin: 0 -3px; }

/* Large screens — roomier card + a gentle font bump for at-a-glance readability */
@media (min-width: 1500px) {
  .wx-dt-card { width: min(1340px, 92vw); padding: 18px 20px 18px; }
  .wx-dt-title { font-size: 17px; }
  .wx-dt-sub { font-size: 12.5px; }
  .wx-dt-tab { font-size: 13px; padding: 6px 16px; }
  .wx-dt-table thead th { font-size: 11.5px; padding: 9px 14px 9px; }
  .wx-dt-c { font-size: 14px; padding: 8px 14px; }
  .wx-dt-name { font-size: 14px; padding: 8px 16px 8px 12px; }
  .wx-dt-hu { font-size: 10px; }
  .wx-dt-time .wx-dt-val { font-size: 12.5px; }
  .wx-dt-nm { max-width: 210px; }
}

@media (max-width: 600px) {
  .wx-dt-card { padding: 12px 12px 12px; width: 96vw; max-height: 90vh; }
  .wx-dt-table thead th { padding: 6px 8px; }
  .wx-dt-c { padding: 6px 8px; font-size: 12px; }
  .wx-dt-name { padding: 6px 10px 6px 8px; font-size: 12px; }
  .wx-dt-nm { max-width: 96px; }
}

/* ---- Lat/Lon DMS cursor tracker (desktop only; bottom-right, left of the ⓘ) ---- */
.wx-coords {
  position: absolute;
  z-index: 1000;
  right: calc(60px + env(safe-area-inset-right));   /* clear the ⓘ + zoom buttons, with breathing room */
  bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 4px 10px;
  border-radius: 9px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.wx-coords.is-on { opacity: 1; }
/* Elevation pill sits just above the coords pill (same right edge). */
.wx-elev { bottom: calc(38px + env(safe-area-inset-bottom)); }

/* ---- Radar rain control (RainViewer) ---- */
.wx-radar-btn.is-active {
  color: #38bdf8;
  background: color-mix(in srgb, #38bdf8 18%, transparent) !important;
}
.wx-radar-btn.is-active svg {
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.75));
}
.wx-radar-btn.is-loading { opacity: 0.55; pointer-events: none; }

/* ---- Satellite clouds control: main cloud button + IR/VIS flyout (to its left) ---- */
.wx-sat-ctrl { position: relative; overflow: visible; }
.wx-sat-btn.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.wx-sat-flyout {
  position: absolute;
  right: calc(100% + 6px);          /* sit to the LEFT of the main button */
  top: 50%;
  display: flex;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.wx-sat-ctrl.is-open .wx-sat-flyout {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.wx-sat-opt {
  width: 30px;
  height: 30px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--glass-shadow);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.wx-sat-opt:hover { color: var(--text); }
.wx-sat-opt.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 16%, var(--glass-bg));
}

/* ---- Satellite time player (above the mode menu; visible only while sat layer on) ---- */
.wx-satplayer {
  position: absolute;
  z-index: 1000;
  left: 50%;
  bottom: calc(70px + env(safe-area-inset-bottom));
  transform: translateX(-50%) scale(var(--ui-scale, 1));
  transform-origin: 50% 100%;          /* anchor bottom-center under zoom-lock */
  display: none;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 7px;
  border-radius: 13px;
}
.wx-satplayer.is-on { display: flex; }
.wx-sp-play {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 90%, transparent);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wx-sp-play:hover { background: var(--accent); }
.wx-sp-play svg { width: 18px; height: 18px; display: block; }
.wx-sp-slider {
  flex: 1 1 auto;          /* grow to fill the player (width is matched to the mode menu) */
  min-width: 90px;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}
.wx-sp-time {
  flex: none;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  white-space: nowrap;
  font-family: var(--font);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.wx-sp-date {            /* small, dim date line above the time */
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: 0.6;
}
.wx-sp-hm {              /* the HH:MM (or LIVE) line */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.wx-satplayer.is-live-frame .wx-sp-date { display: none; }   /* LIVE has no date */
.wx-satplayer.is-live-frame .wx-sp-hm { color: #ff6961; }    /* LIVE in pastel red */
/* Mobile: keep the player exactly as before — fixed slider, content-width player. */
@media (max-width: 560px) { .wx-sp-slider { flex: none; width: 104px; } }
/* Desktop only — meaningless on touch (no hover) and avoids clutter on phones. */
@media (hover: none), (max-width: 900px) { .wx-coords { display: none !important; } }

/* On touch devices the +/- zoom buttons are redundant (pinch-to-zoom) — hide them
   to free up space in the bottom-right control stack. Kept on desktop (mouse). */
@media (hover: none) and (pointer: coarse) {
  .wx-zoom-ctrl { display: none !important; }
}

/* Partner-station marker: a small accent dot centered just below the pill so it
   reads as distinct from the network's own stations (the pill colour still
   encodes the value). The ::after survives marker re-renders (innerHTML swaps). */
.wx-marker-3p::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Glassy camera marker */
.wx-cam-marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.wx-cam-marker:hover {
  transform: scale(1.12);
  color: var(--accent);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.42);
}
.wx-cam-marker svg { width: 19px; height: 19px; display: block; }

/* Webcam popup — glass card with the live image + condition/temp footer */
.wx-cam-popup .maplibregl-popup-content {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  width: 315px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}
.wx-cam-popup .maplibregl-popup-tip {
  border-top-color: var(--glass-bg);
  border-bottom-color: var(--glass-bg);
}
.wx-cam-popup .maplibregl-popup-close-button {
  width: 22px; height: 22px;
  right: 4px; top: 3px;
  color: var(--text-soft);
  font-size: 17px;
  border-radius: 7px;
  z-index: 2;
}
.wx-cam-popup .maplibregl-popup-close-button:hover { background: var(--glass-border); color: var(--text); }
.wx-cam-title {
  padding: 8px 30px 7px 11px;
  font-size: 12.5px;
  line-height: 1.2;
}
.wx-cam-name { font-weight: 800; color: var(--text); }
.wx-cam-area { font-weight: 600; color: var(--text-soft); }
.wx-cam-imgwrap {
  display: block;
  position: relative;
  width: 315px;
  height: 179px;
  background: #0a0e14;
}
/* "LIVE" indicator over the webcam image */
.wx-cam-live {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 5px;
  border-radius: 5px;
  background: rgba(10, 14, 20, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: #fff;
  pointer-events: none;
}
.wx-cam-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b30;
  animation: camLivePulse 1.6s ease-out infinite;
}
@keyframes camLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.65); opacity: 1; }
  70% { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); opacity: 0.75; }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-cam-live i { animation: none; }
}
.wx-cam-img { width: 315px; height: 179px; object-fit: cover; display: block; }
.wx-cam-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
}
.wx-cam-cond { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; color: var(--text); }
.wx-cam-cond svg { width: 21px; height: 21px; }
.wx-cam-cond b { font-variant-numeric: tabular-nums; }
.wx-cam-visit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.wx-cam-visit:hover { text-decoration: underline; }
.wx-cam-visit svg { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .wx-cam-popup .maplibregl-popup-content,
  .wx-cam-imgwrap, .wx-cam-img { width: min(315px, calc(100vw - 28px)); }
}

/* ---- Network stations sidebar (left drawer) ---- */
.wx-sidebar {
  position: fixed;
  top: 50%;
  left: 0;
  width: min(300px, 86vw);
  max-height: calc(100vh - 24px);    /* cap on tall networks → list scrolls */
  z-index: 1100;
  /* vertically centred; height grows with the number of stations */
  transform: translateX(-100%) translateY(-50%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wx-sidebar.is-open { transform: translateX(0) translateY(-50%); }

.wx-sb-inner {
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  border-left: none;
  border-radius: 0 16px 16px 0;
  box-shadow: 6px 0 28px rgba(0, 0, 0, 0.28);
}

/* The tab that sticks out on the left edge (rides the drawer's right edge). */
.wx-sidebar-handle {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: none;
  border-radius: 0 13px 13px 0;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.22);
}
.wx-sidebar-handle:hover { background: color-mix(in srgb, var(--accent) 14%, var(--glass-bg)); }
.wx-sidebar-handle svg { width: 18px; height: 18px; }

.wx-sb-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 10px 16px;
}
.wx-sb-title { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: 0.2px; }
.wx-sb-close {
  flex: none;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-size: 22px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
}
.wx-sb-close:hover { background: var(--glass-border); color: var(--text); }

.wx-sb-summary {
  flex: none;
  display: flex;
  gap: 16px;
  padding: 0 16px 11px;
  border-bottom: 1px solid var(--glass-border);
}
.wx-sb-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.wx-sb-stat i { width: 8px; height: 8px; border-radius: 50%; }
.wx-sb-stat.is-online i { background: #35c463; }
.wx-sb-stat.is-offline i { background: #ec5b56; }

.wx-sb-list {
  flex: 0 1 auto;          /* size to content; scroll only when capped */
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px 10px;
}
.wx-sb-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 10px;
  text-align: left;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.wx-sb-row.is-nolink { cursor: default; }
.wx-sb-row:not(.is-nolink):hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.wx-sb-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.wx-sb-row.is-online .wx-sb-dot { background: #35c463; box-shadow: 0 0 5px rgba(53, 196, 99, 0.6); }
.wx-sb-row.is-offline .wx-sb-dot { background: #ec5b56; box-shadow: 0 0 5px rgba(236, 91, 86, 0.5); }
.wx-sb-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-sb-row.is-offline .wx-sb-name { color: var(--text-soft); }
.wx-sb-slug { flex: none; font-size: 10.5px; font-weight: 600; color: var(--text-soft); opacity: 0.8; }
.wx-sb-age {
  flex: none;
  min-width: 30px;
  text-align: right;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.wx-sb-row.is-offline .wx-sb-age { color: #d9756f; }
.wx-sb-empty { padding: 24px 16px; text-align: center; color: var(--text-soft); font-size: 12px; }

/* ---- Sidebar two-page segmented toggle (Network / Partners) ---- */
.wx-sb-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.wx-sb-tabs.is-single { background: transparent; padding: 0; }   /* no partners → plain header */
.wx-sb-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: none;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: background 0.16s ease, color 0.16s ease;
}
.wx-sb-tab .wx-sb-tab-ic { flex: none; display: flex; }
.wx-sb-tab .wx-sb-tab-ic svg { width: 15px; height: 15px; }
.wx-sb-tab:hover { color: var(--text); }
.wx-sb-tab[hidden] { display: none !important; }   /* explicit display would otherwise override [hidden] */
.wx-sb-tab.is-active {
  background: var(--glass-bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.wx-sb-tabs.is-single .wx-sb-tab.is-active { background: transparent; box-shadow: none; font-weight: 800; }

/* Mobile: a more compact stations sidebar (smaller fonts + tighter spacing). */
@media (max-width: 600px) {
  .wx-sidebar { width: min(258px, 82vw); }
  .wx-sidebar-handle { width: 26px; height: 54px; }
  .wx-sidebar-handle svg { width: 16px; height: 16px; }
  .wx-sb-head { padding: 10px 11px 8px 13px; }
  .wx-sb-title { font-size: 12.5px; }
  .wx-sb-close { width: 24px; height: 24px; font-size: 19px; }
  .wx-sb-summary { gap: 13px; padding: 0 13px 9px; }
  .wx-sb-stat { font-size: 11px; gap: 5px; }
  .wx-sb-stat i { width: 7px; height: 7px; }
  .wx-sb-list { padding: 4px 6px 8px; }
  .wx-sb-row { gap: 8px; padding: 6px 7px; border-radius: 9px; }
  .wx-sb-dot { width: 8px; height: 8px; }
  .wx-sb-name { font-size: 12px; }
  .wx-sb-slug { font-size: 9.5px; }
  .wx-sb-age { font-size: 9.5px; min-width: 26px; }
}

/* Attribution as a small glass chip */
.maplibregl-ctrl-attrib {
  background: var(--glass-bg) !important;
  color: var(--text-soft) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px !important;
  padding: 1px 8px !important;
}
.maplibregl-ctrl-attrib a { color: var(--accent) !important; }
.maplibregl-ctrl-attrib-button { filter: var(--attrib-btn-filter, none); }

/* ---- Mobile ---- */
/* Below desktop width the top-right is given to the sponsor, so the Meteokav
   logo moves to the bottom-center (above the mode menu) as an 80% watermark. */
@media (max-width: 980px) {
  .map-logo {
    top: auto;
    left: 50%;
    right: auto;
    bottom: calc(70px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    opacity: 0.8;
    --logo-h: 45px;          /* +15% (×2) */
  }
}
@media (max-width: 600px) {
  .map-logo { --logo-h: 40px; }   /* +15% (×2) */
}
@media (max-width: 600px) {
  /* Slightly more compact station popups on phones (width set in popup.js). */
  .wx-popup .maplibregl-popup-content { max-width: calc(100vw - 24px); padding: 11px 12px 10px; }
  .wx-popup .wx-pop-head { margin-bottom: 7px; gap: 8px; }
  .wx-popup .wx-pop-title { font-size: 13.5px; }
  .wx-popup .wx-pop-sub { font-size: 10px; }
  .wx-popup .wx-row { padding: 4.5px 0; }
  .wx-popup .wx-row-label { font-size: 12px; }
  .wx-popup .wx-row-val { font-size: 13px; }
  .wx-popup .wx-row.wx-row-lg .wx-row-val { font-size: 15px; }
  .wx-popup .wx-pop-foot { margin-top: 8px; }
  /* Conditions weather banner */
  .wx-popup .wx-pop-sky { gap: 9px; margin: 1px 0 7px; padding: 7px 10px; }
  .wx-pop-sky-ic svg { width: 36px; height: 36px; }
  .wx-pop-sky-temp { font-size: 23px; }
  /* Wind compass */
  .wx-compass-svg { width: 92px; height: 92px; }
  .wx-bft-num { font-size: 21px; }
  /* Temperature hero */
  .wx-tpop-now { font-size: 34px; }
  .wx-tpop-mm { min-width: 78px; }
  .wx-tpop-fval { font-size: 18px; }
  /* Rain hero */
  .wx-rpop-now { font-size: 32px; }
  .wx-rpop-unit { font-size: 13px; }
  .wx-rpop-side { min-width: 104px; }
  .wx-rpop-stval { font-size: 17px; }

  /* Collapsible info panel: collapsed = a round tap target showing the brand
     dot; tap to expand to a narrower bar with brand + clock + controls. */
  .ui-bar {
    border-radius: 50%;
    padding: 0;
    min-height: 0;
    gap: 0;
    max-width: calc(100vw - 24px);
  }
  .ui-bar .brand {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    gap: 0;
    cursor: pointer;
  }
  .ui-bar:not(.is-open) .brand-dot { width: 15px; height: 15px; }
  .ui-bar .brand-text-wrap,
  .ui-bar .ui-actions { display: none; }

  .ui-bar.is-open {
    border-radius: 13px;
    padding: 5px 6px 5px 10px;
    gap: 7px;
  }
  .ui-bar.is-open .brand {
    width: auto; height: auto;
    justify-content: flex-start;
    gap: 7px;
  }
  .ui-bar.is-open .brand-text-wrap { display: flex; }
  .ui-bar.is-open .ui-actions { display: flex; }
  .ui-bar.is-open .brand-suffix { display: none; } /* narrower overall */
  .ui-bar.is-open .brand-text { font-size: 11.5px; }
  .ui-bar.is-open .brand-clock { font-size: 9px; margin-top: 1px; }
  .ui-bar.is-open .brand-update { font-size: 8.5px; }
  .ui-bar.is-open .icon-btn { width: 31px; height: 31px; }
  .ui-bar.is-open .lang-btn { width: 31px; padding: 0; }
  .ui-bar.is-open .lang-flag { font-size: 11px; }

  /* Shrink markers on mobile to reduce overlap near Kavala */
  .wx-marker { width: 44px; height: 44px; font-size: 16px; }
  .wx-mk-icon { width: 27px; height: 27px; top: -13px; right: -7px; }
  .wx-mk-icon svg { width: 19px; height: 19px; }
  .wx-mk-wind { left: -19px; width: 18px; height: 18px; }
  .wx-marker-wind .wx-mk-wind { left: -23px; width: 22px; height: 22px; }
  .wx-marker-mm { min-width: 46px; height: 42px; font-size: 12px; }
  .wx-marker-temp { width: auto; min-width: 36px; height: 26px; padding: 0 8px; font-size: 12.5px; }
  .wx-marker-wind { width: auto; min-width: 38px; height: 26px; padding: 0 8px; font-size: 12.5px; }
  .wx-marker-precip { width: 40px; height: 47px; font-size: 13px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .icon-btn { transition: none; }
}

/* ---- Station graph: footer button (right of the station link) + 24h modal ---- */
.wx-graph-btn {
  flex: none;
  margin-left: auto;             /* sit at the right end of the footer line */
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s ease;
}
.wx-graph-btn:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.wx-graph-btn svg { width: 16px; height: 16px; display: block; }

.wx-graph-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.wx-graph-modal.is-on { display: flex; }
.wx-graph-card {
  width: min(560px, 100%);
  border-radius: 16px;
  padding: 14px 16px 12px;
  display: flex; flex-direction: column;
  animation: wxGraphIn 0.22s ease;
}
@keyframes wxGraphIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.wx-graph-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.wx-graph-titles { flex: 1; min-width: 0; }
.wx-graph-title { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.2; }
.wx-graph-sub { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin-top: 2px; }
.wx-graph-close, .wx-graph-expand {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; background: transparent; color: var(--text-soft); cursor: pointer;
}
.wx-graph-close:hover, .wx-graph-expand:hover { background: rgba(150, 160, 175, 0.15); color: var(--text); }
.wx-graph-modal.is-large .wx-graph-expand { color: var(--accent); }
/* Controls row: metric tabs (left) + range selector (right) */
.wx-graph-ctl {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 9px;
}
.wx-graph-body { position: relative; height: 240px; }
.wx-graph-chart { height: 100%; }
.wx-graph-msg {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center;
  color: var(--text-soft); font-weight: 600; font-size: 13px;
}
/* In-modal segmented controls: metric tabs (Wind → Gust / Direction) + range (24h / 7d / 30d) */
.wx-graph-tabs, .wx-graph-ranges {
  display: flex; gap: 3px; padding: 3px;
  border-radius: 10px;
  background: rgba(150, 160, 175, 0.10);
}
.wx-graph-tabs { display: none; }        /* shown via JS only when there are 2+ tabs */
.wx-graph-tab, .wx-graph-range {
  border: none; background: transparent;
  font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--text-soft);
  padding: 5px 12px; border-radius: 8px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wx-graph-range { padding: 5px 10px; }
.wx-graph-tab:hover, .wx-graph-range:hover { color: var(--text); }
.wx-graph-tab.is-active, .wx-graph-range.is-active { background: color-mix(in srgb, var(--accent) 90%, transparent); color: #fff; }
/* ApexCharts zoom/pan/reset toolbar — themed + nudged clear of the chart edge */
.wx-graph-card .apexcharts-toolbar { gap: 2px; }
.wx-graph-card .apexcharts-toolbar svg { fill: var(--text-soft); }
.wx-graph-card .apexcharts-menu-icon:hover svg,
.wx-graph-card .apexcharts-pan-icon:hover svg,
.wx-graph-card .apexcharts-zoom-icon:hover svg,
.wx-graph-card .apexcharts-reset-icon:hover svg { fill: var(--accent); }
.wx-graph-card .apexcharts-selected svg { fill: var(--accent); }
/* Expanded modal — bigger canvas for inspecting spikes */
.wx-graph-modal.is-large .wx-graph-card { width: min(1080px, 96vw); }
.wx-graph-modal.is-large .wx-graph-body { height: min(62vh, 560px); }
@media (max-width: 600px) {
  .wx-graph-card { padding: 12px 12px 10px; }
  .wx-graph-body { height: 200px; }
  .wx-graph-ctl { gap: 6px; }
  .wx-graph-tab, .wx-graph-range { padding: 5px 9px; font-size: 11.5px; }
  .wx-graph-modal.is-large .wx-graph-body { height: 70vh; }
}