/* ──────────────────────────────────────────────────────────────────
   TarantoRespira — map page styles
   ────────────────────────────────────────────────────────────────── */

:root {
  --bg:            #eef3f8;   /* soft sky white — page + map veil */
  --surface:       #ffffff;   /* solid card */
  --text:          #12293a;   /* deep sea ink — high contrast for readability */
  --muted:         #5b6b7a;   /* secondary ink */
  --sea:           #15384f;   /* deep-sea blue (brand) */
  --teal:          #0e9aa7;   /* teal accent */
  --gold:          #d98f1e;   /* gold accent, readable on white */
  --yellow:        #d98f1e;   /* alias: legacy var(--yellow) references map to gold */
  --border:        rgba(20, 45, 64, 0.14);
  --border-strong: rgba(20, 45, 64, 0.24);
  --glass:         rgba(255, 255, 255, 0.62);   /* frosted light panel */
  --glass-strong:  rgba(255, 255, 255, 0.82);
  --scrim:         rgba(18, 41, 58, 0.22);       /* dim behind open sheets */
  --font:          'Josefin Sans', system-ui, sans-serif;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

/* We no longer force fullscreen, so the map should fill the VISIBLE viewport
   (below the browser chrome), not the largest-possible one. `100dvh` = the
   dynamic viewport height, which tracks the URL bar showing/hiding — so the
   bottom launcher buttons stay above Safari's toolbar instead of behind it.
   In a standalone PWA there's no chrome, so dvh == the full screen anyway.
   Fallback chain: 100% (always), then 100dvh on modern Safari/Chrome.
   map.js re-calls map.resize() on visualViewport changes to stay crisp. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

#map { position: fixed; inset: 0; }
@supports (height: 100dvh) {
  #map { height: 100dvh; width: 100vw; top: 0; left: 0; }
}

/* ── Brand mark — top-left, now logo + wordmark together, clickable ── */
/* `env(safe-area-inset-*)` keeps fixed elements clear of the iOS notch
   / Dynamic Island and the home-indicator on PWA-standalone screens.
   The `0px` fallback makes it a no-op on browsers that don't provide
   the var (older Android, all desktops). */
.brand {
  position: fixed;
  top:  calc(env(safe-area-inset-top, 0px) + 1.15rem);
  left: calc(env(safe-area-inset-left, 0px) + 1.4rem);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea);                                /* deep-sea ink on the light map */
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(255,255,255,0.75);    /* keeps the wordmark legible over the map */
  transition: transform 0.18s ease, filter 0.18s ease;
}
.brand:hover { transform: translateY(-1px); filter: brightness(1.05); }
.brand-text  { display: inline-block; }
.brand b {
  font-weight: 600;
  color: var(--gold);
}
.brand-mark {
  width: 1.85rem;
  height: 1.85rem;
  filter: drop-shadow(0 1px 3px rgba(20,45,64,0.28));
}

/* ── Loading veil — fades out once the map is ready ── */
.veil {
  position: fixed; inset: 0; z-index: 20;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  transition: opacity 0.6s ease;
}
.veil.gone { opacity: 0; pointer-events: none; }

/* ── Attribution — quiet, on-brand ── */
.maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(4px);
}
.maplibregl-ctrl-attrib a,
.maplibregl-ctrl-attrib {
  color: var(--muted) !important;
  font-family: var(--font);
  font-size: 0.6rem !important;
  letter-spacing: 0.04em;
}
.maplibregl-ctrl-attrib-button { filter: opacity(0.5); }

/* ══════════════════════════════════════════════════════════════════
   LAUNCHER SYSTEM
   Left  (#launcherBtn → #launcher)        = NAVIGATOR (constant nav)
   Right (#actionsBtn → #actionsLauncher)  = layers & pollutants
   ══════════════════════════════════════════════════════════════════ */

/* ── Floating launcher buttons ─────────────────────────────────────── */
.launcher-btn-floating,
.actions-btn-floating {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.75rem);
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 800;
  transition: all 0.2s;
  backdrop-filter: blur(28px) saturate(140%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(140%) brightness(1.04);
  background: var(--glass-strong);
  box-shadow:
    0 0.6rem 1.6rem rgba(20,45,64,0.18),
    inset 0 1px 0 0 rgba(255,255,255,0.9),
    inset 0 -2px 6px 0 rgba(20,45,64,0.06);
}
.launcher-btn-floating {
  left: calc(env(safe-area-inset-left, 0px) + 1.75rem);
  border: 1px solid var(--border-strong);
  color: var(--sea);
  background:
    linear-gradient(180deg, rgba(14,154,167,0.10) 0%, rgba(21,56,79,0.06) 100%),
    var(--glass-strong);
}
.actions-btn-floating {
  right: calc(env(safe-area-inset-right, 0px) + 1.75rem);
  border: 1px solid rgba(217,143,30,0.45);
  color: var(--gold);
  background:
    linear-gradient(180deg, rgba(217,143,30,0.12) 0%, rgba(217,143,30,0.05) 100%),
    var(--glass-strong);
}

.launcher-btn-floating svg,
.actions-btn-floating svg {
  width: 2.25rem; height: 2.25rem;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.launcher-btn-floating:hover {
  background: rgba(14,154,167,0.14);
  border-color: var(--teal);
  color: var(--sea); transform: scale(1.08);
}
.actions-btn-floating:hover {
  background: rgba(217,143,30,0.16);
  border-color: rgba(217,143,30,0.6);
  transform: scale(1.08);
}
.launcher-btn-floating.open {
  background: rgba(14,154,167,0.20);
  border-color: var(--teal);
  color: var(--sea); transform: rotate(90deg) scale(1.06);
}
.actions-btn-floating.open {
  background: rgba(217,143,30,0.22);
  border-color: rgba(217,143,30,0.7);
  transform: scale(1.06);
}

/* ── Overlay containers ────────────────────────────────────────────── */
.launcher, .actions-launcher {
  position: fixed; inset: 0;
  z-index: 900;
  pointer-events: none;
}
.launcher.open, .actions-launcher.open { pointer-events: all; }

.launcher-backdrop, .actions-launcher-backdrop {
  position: absolute; inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.launcher.open .launcher-backdrop,
.actions-launcher.open .actions-launcher-backdrop { opacity: 1; }

/* ── Bottom sheets ─────────────────────────────────────────────────── */
/* Padding-bottom adds the home-indicator inset so the last tile-row sits
   above the iOS gesture bar, instead of being clipped by it. */
.launcher-sheet, .actions-launcher-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0.75rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.30s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; flex-direction: column; gap: 1.25rem;
  box-shadow:
    0 -18px 52px rgba(20,45,64,0.18),
    inset 0 1px 0 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(40px) saturate(150%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(150%) brightness(1.05);
}
.launcher-sheet {
  background:
    linear-gradient(180deg, rgba(14,154,167,0.08) 0%, rgba(21,56,79,0.05) 100%),
    var(--glass-strong);
  border-top: 1px solid var(--border-strong);
}
.actions-launcher-sheet {
  background:
    linear-gradient(180deg, rgba(217,143,30,0.09) 0%, rgba(217,143,30,0.04) 100%),
    var(--glass-strong);
  border-top: 1px solid rgba(217,143,30,0.30);
}
.launcher.open .launcher-sheet,
.actions-launcher.open .actions-launcher-sheet { transform: translateY(0); }

.launcher-sheet::-webkit-scrollbar,
.actions-launcher-sheet::-webkit-scrollbar { width: 2px; }
.launcher-sheet::-webkit-scrollbar-thumb         { background: rgba(14,154,167,0.35); }
.actions-launcher-sheet::-webkit-scrollbar-thumb { background: rgba(217,143,30,0.35); }

.launcher-sheet::before,
.actions-launcher-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0)   60%);
}

/* ── Sheet handle + header ─────────────────────────────────────────── */
.sheet-handle {
  width: 2.5rem; height: 3px;
  border-radius: 2px;
  align-self: center;
  flex-shrink: 0;
  margin-bottom: 0.25rem;
  background: var(--border-strong);
}
.sheet-header {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  text-align: center;
  padding: 0.31rem 0;
}

/* ── Sheet sections + tiles ────────────────────────────────────────── */
.sheet-section { display: flex; flex-direction: column; gap: 0.55rem; }
.sheet-section-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding-left: 0.25rem;
}
.tile-grid { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.tile {
  width: 5rem; height: 5rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--sea);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.44rem;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.16s;
  text-decoration: none;
  /* Subtle drop + inner highlight so tiles read as raised glass, not flat panes */
  box-shadow:
    0 4px 12px rgba(20,45,64,0.10),
    0 1px 0 rgba(255,255,255,0.9) inset;
}
.tile svg {
  width: 1.375rem; height: 1.375rem;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.tile span {
  font-size: 0.56rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 400;
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.tile:hover {
  background: #f2f8fb;
  border-color: var(--teal);
  color: var(--sea);
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(20,45,64,0.14),
    0 1px 0 rgba(255,255,255,0.9) inset;
}
.tile.active {
  background: rgba(14,154,167,0.10);
  border-color: var(--teal);
  color: var(--teal);
  box-shadow:
    0 8px 18px rgba(20,45,64,0.12),
    0 0 0 1px rgba(14,154,167,0.35) inset,
    0 1px 0 rgba(255,255,255,0.9) inset;
}

/* ── Coloured map-layer toggles — each view its own accent (pollutant tiles
   keep the default teal). Labels stay ink for readability; icons + the active
   state carry the colour. ── */
.tile[data-layer] svg { transition: color 0.16s ease; }
.tile[data-layer="wind"]        svg { color: #0e9aa7; }
.tile[data-layer="stations"]    svg { color: #4b7a94; }
.tile[data-layer="temperature"] svg { color: #d98f1e; }
.tile[data-layer="green"]       svg { color: #2e9e5b; }
.tile[data-layer="erosion"]     svg { color: #3f88a0; }

.tile[data-layer].active { color: var(--sea); }
.tile[data-layer="wind"].active {
  border-color: #0e9aa7; background: rgba(14,154,167,0.12);
  box-shadow: 0 6px 16px rgba(20,45,64,0.12), 0 0 0 1px rgba(14,154,167,0.45) inset, 0 1px 0 rgba(255,255,255,0.9) inset;
}
.tile[data-layer="stations"].active {
  border-color: #4b7a94; background: rgba(75,122,148,0.12);
  box-shadow: 0 6px 16px rgba(20,45,64,0.12), 0 0 0 1px rgba(75,122,148,0.45) inset, 0 1px 0 rgba(255,255,255,0.9) inset;
}
.tile[data-layer="temperature"].active {
  border-color: #d98f1e; background: rgba(217,143,30,0.12);
  box-shadow: 0 6px 16px rgba(20,45,64,0.12), 0 0 0 1px rgba(217,143,30,0.45) inset, 0 1px 0 rgba(255,255,255,0.9) inset;
}
.tile[data-layer="green"].active {
  border-color: #2e9e5b; background: rgba(46,158,91,0.12);
  box-shadow: 0 6px 16px rgba(20,45,64,0.12), 0 0 0 1px rgba(46,158,91,0.45) inset, 0 1px 0 rgba(255,255,255,0.9) inset;
}
.tile[data-layer="erosion"].active {
  border-color: #3f88a0; background: rgba(63,136,160,0.12);
  box-shadow: 0 6px 16px rgba(20,45,64,0.12), 0 0 0 1px rgba(63,136,160,0.45) inset, 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* Show the map layers/views ABOVE the pollutant picker in the right sheet. */
.sheet-section--layers    { order: 1; }
.sheet-section--pollutant { order: 2; }

/* Nav tiles are <a> elements — same look as buttons but no hover lift on tap */
.nav-tile { text-decoration: none; }
.nav-tile:active { transform: translateY(0); }

/* ── Pollutant info card ─────────────────────────────────────────────
   Sits under the pollutant tile grid in the right sheet. Updates when
   a tile is tapped, showing source + health effects + EAQI thresholds. */
.pollutant-info {
  margin-top: 0.25rem;
  padding: 0.85rem 0.95rem 0.9rem;
  border-radius: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pollutant-info-title {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sea);
}
.pollutant-info-row {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.pollutant-info-label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pollutant-info-text {
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 300;
  color: var(--text);
}
.pollutant-info-bands {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-top: 0.15rem;
}
.pollutant-info-bands:empty { display: none; }
.pollutant-band {
  display: grid;
  grid-template-columns: 0.6rem auto 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(243,238,254,0.92);
}
.pollutant-band-dot {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}
.pollutant-band-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}
.pollutant-band-range {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* Match the AQ_LEVELS palette in respira/views.py so dots = map colours. */
.pollutant-band--0 { color: #2e9e5b; }
.pollutant-band--1 { color: #d99a00; }
.pollutant-band--2 { color: #d1452f; }
.pollutant-band--3 { color: #6a2b5e; }

/* ══════════════════════════════════════════════════════════════════
   "INSTANT KNOWING" HEADLINE — the glass pill, top-center
   ══════════════════════════════════════════════════════════════════ */
.headline {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1.25rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1.125rem;
  border-radius: 2rem;
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  font-family: var(--font);
  white-space: nowrap;
}
.headline-dot {
  width: 0.625rem; height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px currentColor;
}
.headline-text {
  font-size: 0.92rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--text);
}
.headline-text b { font-weight: 400; }

@media (max-width: 768px) {
  /* Bumped from 3.25rem → 5rem so the primary nav is an obvious thumb
     target on phones, not a tiny icon. Apple HIG minimum is 44pt;
     5rem (~80px) sits well clear of that and matches the bold visual
     weight the desktop button has on its larger canvas. */
  .launcher-btn-floating, .actions-btn-floating {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
    width: 5rem; height: 5rem;
  }
  .launcher-btn-floating svg,
  .actions-btn-floating svg { width: 1.85rem; height: 1.85rem; }
  .launcher-btn-floating { left:  calc(env(safe-area-inset-left, 0px)  + 1.25rem); }
  .actions-btn-floating  { right: calc(env(safe-area-inset-right, 0px) + 1.25rem); }
  /* Desktop has room for brand (left) + pill (center) on one row; a phone
     doesn't — the centered pill reaches over the logo. Give the pill its
     own row just below the brand, and cap it so a long status ("aria
     scarsa · 10 stazioni") can never spill off-screen. */
  .headline {
    top: calc(env(safe-area-inset-top, 0px) + 3.4rem);
    max-width: calc(100vw - 1.25rem);
  }
  .headline-text {
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand {
    top:  calc(env(safe-area-inset-top, 0px)  + 0.9rem);
    left: calc(env(safe-area-inset-left, 0px) + 1rem);
    font-size: 0.85rem;
  }
  .brand-mark { width: 1.5rem; height: 1.5rem; }
}

/* ── Arrow Web credit — discreet, bottom-center between the launcher buttons ──
   Container ignores pointer events; only the link itself is tappable, so it
   never steals a tap meant for the round launcher buttons if they overlap. */
.map-credit {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
  transform: translateX(-50%);
  z-index: 5;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  color: var(--muted);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}
.map-credit a {
  pointer-events: auto;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: color 0.18s ease;
}
.map-credit a:hover { color: var(--text); }

/* ── Data-layer notice — top-center pill shown when a layer can't load ──
   e.g. the CAMS model is unavailable, so we tell the visitor the pollution
   canvas is missing instead of letting them read the map as "clean air". */
.map-notice {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 1.25rem);
  transform: translateX(-50%);
  z-index: 12;
  max-width: min(90vw, 32rem);
  padding: 0.5rem 0.95rem;
  border-radius: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--sea);
  background: rgba(255, 248, 236, 0.92);
  border: 1px solid rgba(217,143,30,0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.map-notice[hidden] { display: none; }

/* ── Temperature legend — bottom-center, only while the temp layer is on ── */
.temp-legend {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2.2rem);
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.9rem 0.55rem;
  border-radius: 0.85rem;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 16px rgba(20, 45, 64, 0.14);
}
.temp-legend[hidden] { display: none; }
.temp-legend-cap {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.temp-legend-scale { display: flex; align-items: center; gap: 0.5rem; }
.temp-legend-bar {
  width: 10rem;
  height: 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, #3f6ebe, #5aaad2, #aacdc8, #f0d282, #e89646, #c83c32);
}
.temp-legend-end {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--sea);
  min-width: 2.2rem;
  text-align: center;
}

/* ── Erosion legend — EMODnet's own graphic, bottom-center (stacks above temp) ── */
.erosion-legend {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5.6rem);
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.9rem 0.55rem;
  border-radius: 0.85rem;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 16px rgba(20, 45, 64, 0.14);
  max-width: min(90vw, 22rem);
}
.erosion-legend[hidden] { display: none; }
.erosion-legend-rows {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
}
.erosion-key {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.72rem;
  color: var(--sea);
}
.erosion-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.erosion-legend-src {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ── Station popup — the actual numbers behind a dot ─────────────────── */
.tr-popup .maplibregl-popup-content {
  font-family: var(--font);
  color: var(--text);
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  box-shadow: 0 10px 26px rgba(20, 45, 64, 0.18);
  padding: 0.8rem 0.9rem 0.55rem;
  min-width: 250px;
}
.tr-popup .maplibregl-popup-tip {
  border-top-color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.85);
}
.tr-popup .maplibregl-popup-close-button {
  font-size: 1.1rem;
  color: var(--muted);
  padding: 0.1rem 0.5rem;
  background: none;
}
.station-popup .sp-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.45rem;
  padding-right: 1.2rem;
}
.station-popup .sp-row {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.17rem 0;
  font-size: 0.85rem;
}
.station-popup .sp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c7d2db;
  align-self: center;
  flex: 0 0 auto;
}
.station-popup .sp-name {
  width: 3.1rem;
  flex: 0 0 auto;
  font-weight: 600;
}
.station-popup .sp-val {
  min-width: 4.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.station-popup .sp-val small { color: var(--muted); font-size: 0.72em; }
.station-popup .sp-when {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
}
.station-popup .sp-row--stale .sp-val,
.station-popup .sp-row--nd .sp-val { color: var(--muted); }
/* Provenance chip on a reading (EEA / ARPA) — kept tiny on purpose. */
.station-popup .sp-src {
  display: inline-block;
  padding: 0 0.28em;
  border: 1px solid var(--border);
  border-radius: 0.5em;
  font-size: 0.88em;
  letter-spacing: 0.03em;
  color: var(--muted);
}
/* ADI (ex ILVA) network provenance line under the title. */
.station-popup .sp-net {
  margin: -0.3rem 0 0.4rem;
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.station-popup .sp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--muted);
}
.station-popup .sp-foot a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
}

/* ── Wind-source note (colore del vento section) ─────────────────────── */
.windsource-note {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  background: var(--glass);
}

/* ── Pennacchio overlay — 2D canvas above the map, below the UI ────────── */
/* width/height are REQUIRED, not redundant with inset: a canvas is a
   replaced element, so an absolutely positioned one with width:auto takes
   its INTRINSIC size (the dpr-scaled bitmap) and ignores right/bottom —
   on a 3x phone the overlay laid itself out 3x the map and the plume drew
   magnified and displaced. Invisible on a 1x desktop. */
.plume-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── Situational nav tile (Etna eruptive phase) ──────────────────────
   Sits in its own "in corso" section at the TOP of the left nav sheet.
   Ember, deliberately outside the teal + gold palette, so an ongoing
   event never reads as ordinary navigation.
   Delete with the markup in _launcher.html when the phase closes. */
.nav-tile.is-event {
  border-color: rgba(194, 65, 12, 0.34);
  background: rgba(194, 65, 12, 0.06);
  color: #8a2c08;
}
.nav-tile.is-event svg { stroke: #c2410c; }
.nav-tile.is-event.active,
.nav-tile.is-event:hover {
  border-color: rgba(194, 65, 12, 0.62);
  background: rgba(194, 65, 12, 0.12);
}

/* ── Situational corner badge (Etna eruptive phase) ──────────────────
   Top-right on the map, opposite the wordmark. Same ember as the nav tile
   and deliberately outside the teal + gold palette, so an ongoing event
   never reads as ordinary navigation. Borrows the .headline glass so it
   belongs to the map's language rather than sitting on top of it.
   Delete with the markup in map.html when the phase closes. */
.event-badge {
  position: fixed;
  top:   calc(env(safe-area-inset-top, 0px) + 1.15rem);
  right: calc(env(safe-area-inset-right, 0px) + 1.4rem);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 2rem;
  border: 1px solid rgba(194, 65, 12, 0.40);
  background:
    linear-gradient(180deg, rgba(194,65,12,0.10) 0%, rgba(194,65,12,0.04) 100%),
    var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--font);
  text-decoration: none;
  color: #8a2c08;
  white-space: nowrap;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.event-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(194, 65, 12, 0.68);
}
.event-badge-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: #c2410c;
  box-shadow: 0 0 8px rgba(194, 65, 12, 0.9);
  animation: event-pulse 2.4s ease-in-out infinite;
}
.event-badge-text {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.event-badge-sub {
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
@keyframes event-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
/* A pulsing dot beside an eruption is a notification, not decoration —
   honour the OS setting instead of insisting on it. */
@media (prefers-reduced-motion: reduce) {
  .event-badge-dot { animation: none; }
}
/* Phones: .headline already moves to its own row below the wordmark, so the
   top row is free — but only just. Drop the sub-label and tighten up. */
@media (max-width: 768px) {
  .event-badge {
    top:   calc(env(safe-area-inset-top, 0px) + 0.9rem);
    right: calc(env(safe-area-inset-right, 0px) + 1rem);
    padding: 0.4rem 0.7rem;
  }
  .event-badge-sub  { display: none; }
  .event-badge-text { font-size: 0.75rem; }
}


/* ── Screen-reader-only ──────────────────────────────────────────────
   Carries the H1 on the full-bleed map pages, where a visible heading
   would sit on top of the canvas. Not display:none — that would hide it
   from assistive tech and strip its SEO value along with it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}