/*
 * forecast.css — foglio della pagina Modelli (forecast.html)
 * ==========================================================
 * Fino all'11/10/2026 queste regole stavano in un <style> dentro
 * forecast.html (#1133 punto 4.2). Ora hanno un file loro: la pagina HTML
 * pesa meno a ogni visita e il foglio resta nella cache del browser.
 *
 * CHI DECIDE COSA
 * - assets/css/app.css: componenti CONDIVISI con le altre pagine (analysis,
 *   compare, location...). Una regola che vale solo qui NON va li'.
 * - questo file: tutto cio' che e' solo della pagina Modelli. Si carica DOPO
 *   app.css, auth.css e maplibre-gl.css, quindi a parita' di specificita'
 *   vince lui. home.css (la home) dall'11/10/2026 qui non si carica: le
 *   poche regole che servivano sono nella sezione 1b.
 *
 * COME E' FATTO
 * 0. La scala dei livelli (z-index), con un nome per ogni livello.
 * 1. «Venute da app.css»: le regole che app.css conteneva solo per questa
 *    pagina (classi che nessun altro file del sito usa, o `body.page-forecast`).
 *    Spostate l'11/10/2026 nello stesso ordine in cui stavano li'.
 * 1b. Le poche regole di home.css che toccano questa pagina (intestazione,
 *    pie' di pagina): home.css non si carica piu' qui (#1133 punto 4.3).
 * 2. Le regole che stavano nel <style> di forecast.html, nello stesso ordine.
 * Il criterio di spostamento e il controllo che la pagina non cambi di un
 * pixel sono descritti in #1133 (punto 4.2).
 * Dal 12/10/2026 (pagina unica, #1133 punto 4.1) la classe `mode-simple` del
 * <body> e' fissa, scritta in forecast.html: le regole che la nominano
 * valgono sempre, e le regole del modo Pro sono state tolte.
 */

/* ==========================================================================
   0. SCALA DEI LIVELLI (z-index)
   ==========================================================================
   Misurata nel browser l'11/10/2026 (#1133 punto 4.2), telefono e computer,
   Semplice e Pro. Un numero conta SOLO contro gli elementi dello stesso
   contenitore di impilamento: 60 dentro la barra del titolo non ha niente a
   che fare con 60 altrove. Chi aggiunge un livello sceglie qui il suo posto e
   usa il nome, non un numero nuovo.

   Contenitore RADICE della pagina (quasi tutto sta qui):
      1  mappe (#vector-map, #webgl-map)                       [app.css]
      3  mappa di destra del confronto        --fc-z-mappa-confronto
      4  griglia del confronto multiplo       --fc-z-griglia-multipla
      4  velo «mappa riservata/non rilevante» --fc-z-velo-mappa
      5  nomi dei modelli, legenda dei fronti --fc-z-etichette-mappa
      8  avviso di allineamento multiplo      --fc-z-avviso-mappa
     10  legenda, linguetta, barra in basso, «i»  [app.css e sezione 2]
     11  maniglia del confronto (app.css), mirino --fc-z-mirino
     12  filigrana della fonte                --fc-z-filigrana
     15  fumetto al passaggio, ora sulla mappa --fc-z-fumetti-mappa
     16  attesa del fotogramma                --fc-z-attesa-fotogramma
     20  barra del titolo (#map-info-bar)     --fc-z-barra-titolo
     21  pastiglie dei parametri (telefono)   --fc-z-pastiglie
     50  elenco dei parametri di Semplice     --fc-z-elenco-parametri
    100  valore al tocco                                    [app.css]
    200  barra laterale; aperta in Semplice   --fc-z-barra-laterale-aperta (300)
   1000  avvisi a comparsa (toast)                          [app.css]
   1100  intestazione del sito                              [home.css]
   1200  suggerimenti contestuali             --fc-z-suggerimento
   1500  foglio in basso del telefono         --fc-z-foglio-telefono
   2000  impostazioni, finestre (GIF, meteogramma, tasti) --fc-z-modali
   3000  visita guidata, avviso presentazione --fc-z-avviso-presentazione
   9999  banner dei cookie, «salta al contenuto»            [auth.css, app.css]
  10000  fumetti dei parametri, accesso       --fc-z-fumetti-pagina
  10050  descrizione del parametro («i»)      --fc-z-fumetto-descrizione

   DENTRO la barra del titolo (#map-info-bar, che e' a 20):
     60  tendine del titolo e pannello «Strumenti»  --fc-z-tendine
   1000  pannello del confronto multiplo      --fc-z-confronto-multiplo
   DENTRO il pannello «Strumenti» (.map-more-panel):
     70  sottopannelli (vento, confronto, multiplo) --fc-z-pannelli-strumenti
   DENTRO la barra laterale: 1100 tendina dei modelli --fc-z-tendina-modelli
   DENTRO la barra in basso: 1-6, livelli locali della timeline (numeri
   lasciati in chiaro: non escono dalla barra). */
:root {
  --fc-z-mappa-confronto: 3;
  --fc-z-griglia-multipla: 4;
  --fc-z-velo-mappa: 4;
  --fc-z-etichette-mappa: 5;
  --fc-z-avviso-mappa: 8;
  --fc-z-mirino: 11;
  --fc-z-filigrana: 12;
  --fc-z-fumetti-mappa: 15;
  --fc-z-attesa-fotogramma: 16;
  --fc-z-barra-titolo: 20;
  --fc-z-pastiglie: 21;
  --fc-z-elenco-parametri: 50;
  --fc-z-tendine: 60;
  --fc-z-pannelli-strumenti: 70;
  --fc-z-barra-laterale-aperta: 300;
  --fc-z-confronto-multiplo: 1000;
  --fc-z-tendina-modelli: 1100;
  --fc-z-suggerimento: 1200;
  --fc-z-foglio-telefono: 1500;
  --fc-z-modali: 2000;
  --fc-z-avviso-presentazione: 3000;
  --fc-z-fumetti-pagina: 10000;
  --fc-z-fumetto-descrizione: 10050;
}

/* ==========================================================================
   1. VENUTE DA app.css (11/10/2026, #1133 punto 4.2)
   ========================================================================== */

/* Sidebar category — smooth expand with opacity stagger */
.sidebar__cat-items {
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

/* Sidebar param item — hover indent */
.sidebar__param-btn:hover {
  padding-left: calc(var(--spacing-sm) + 3px);
  transition: padding-left 0.15s ease, background 0.15s ease;
}

/* ========== Model Compare (swipe) ========== */
.model-compare-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}
.model-compare-controls__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  flex: 1;
}
.model-compare-controls__label span {
  font-weight: 600;
  color: var(--primary);
}

.map-toolbar__compare-wrap {
  position: relative;
  display: inline-flex;
}
.map-toolbar__compare-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.map-toolbar__compare-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.map-toolbar__compare-btn.active {
  color: var(--primary);
  background: rgba(26, 115, 232, 0.12);
}
.model-compare-dropdown {
  right: 0;
  left: auto;
}

/* Compare map overlay (second MapLibre instance) */
/* Note: MapLibre adds .maplibregl-map to the container (position:relative), must override */
.compare-map,
.compare-map.maplibregl-map {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--fc-z-mappa-confronto);
  pointer-events: none;
}
.compare-map .maplibregl-ctrl-attrib,
.compare-map .maplibregl-ctrl-logo,
.compare-map .maplibregl-ctrl {
  display: none !important;
}
.compare-slider__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: white;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  pointer-events: none;
}
.compare-slider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  cursor: ew-resize;
  z-index: 1;
}
.compare-slider__grip {
  display: flex;
  gap: 3px;
}
.compare-slider__grip::before,
.compare-slider__grip::after {
  content: '';
  display: block;
  width: 2px;
  height: 14px;
  background: #999;
  border-radius: 1px;
}
/* Fuoco da tastiera sulla maniglia del confronto (#924, difetto DIF-8 del
   collaudo del 21/09/2026). La maniglia e' un comando da quando
   forecast-topbar.js le mette role="slider" e tabindex="0": le frecce spostano
   il taglio fra le due mappe. L'anello sta FUORI (offset positivo) perche' la
   maniglia e' un tondo bianco sopra la mappa e non c'e' niente che lo tagli. */
.compare-slider__handle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

[data-theme="dark"] .compare-slider__handle {
  background: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
[data-theme="dark"] .compare-slider__grip::before,
[data-theme="dark"] .compare-slider__grip::after {
  background: #666;
}

/* Model labels on map */
.compare-model-label {
  position: absolute;
  top: 8px;
  z-index: var(--fc-z-etichette-mappa);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.55);
  color: white;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.compare-model-label--left {
  left: 8px;
}
.compare-model-label--right {
  right: 8px;
}

/* ============================================================
   Multi-Map Compare (4 crosshair / 4-6-8 grid)
   ============================================================ */

/* Follower tile (crosshair): fullscreen stacked MapLibre clipped to a quadrant.
   pointer-events:auto + clip-path → ogni quadrante riceve pan/zoom sulla PROPRIA
   mappa (le aree clippate non fanno hit-test; il knob crosshair resta sopra). */
.multi-tile-map,
.multi-tile-map.maplibregl-map {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: auto;
}
.multi-tile-map .maplibregl-ctrl-attrib,
.multi-tile-map .maplibregl-ctrl-logo,
.multi-tile-map .maplibregl-ctrl {
  display: none !important;
}
.multi-tile-label {
  z-index: 6;
}

/* Crosshair divider (cross-shaped draggable) */
.multi-crosshair {
  position: absolute;
  inset: 0;
  z-index: var(--fc-z-mirino);
  pointer-events: none;
}
.multi-crosshair__v,
.multi-crosshair__h {
  position: absolute;
  background: white;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  pointer-events: none;
}
.multi-crosshair__v {
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  left: 50%;
}
.multi-crosshair__h {
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  top: 50%;
}
.multi-crosshair__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  pointer-events: all;
  cursor: move;
  touch-action: none;
}
.multi-crosshair__knob::before,
.multi-crosshair__knob::after {
  content: '';
  position: absolute;
  background: #999;
  border-radius: 1px;
}
.multi-crosshair__knob::before {
  left: 50%; top: 8px; bottom: 8px; width: 2px; margin-left: -1px;
}
.multi-crosshair__knob::after {
  top: 50%; left: 8px; right: 8px; height: 2px; margin-top: -1px;
}
[data-theme="dark"] .multi-crosshair__knob {
  background: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
[data-theme="dark"] .multi-crosshair__knob::before,
[data-theme="dark"] .multi-crosshair__knob::after {
  background: #666;
}

/* Grid layout: CSS grid of independent map cells */
.map-container.multi-grid-active .vector-map,
.map-container.multi-grid-active .compare-map,
.map-container.multi-grid-active .compare-slider {
  display: none !important;
}
.multi-grid {
  position: absolute;
  inset: 0;
  z-index: var(--fc-z-griglia-multipla);
  display: grid;
  gap: 2px;
  background: var(--border, #444);
}
.multi-grid--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.multi-grid--6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.multi-grid--8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
.multi-cell {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary, #1a1a1a);
}
.multi-cell__map,
.multi-cell__map.maplibregl-map {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Tutte le celle ricevono pan/zoom (sync bidirezionale) */
.multi-cell .multi-cell__map {
  pointer-events: auto;
}
.multi-cell__map .maplibregl-ctrl-attrib,
.multi-cell__map .maplibregl-ctrl-logo,
.multi-cell__map .maplibregl-ctrl {
  display: none !important;
}
.multi-cell__label {
  position: absolute;
  top: 6px;
  left: 6px;
  right: auto;
  z-index: 6;
}
/* Riga superiore: etichetta in basso (sopra il divisore centrale), così non
   finisce dietro header/toggle/P1/toolbar che occupano la fascia alta. */
.multi-cell--toprow .multi-cell__label {
  top: auto;
  bottom: 6px;
}

/* Nota di copertura nel popover info: e' un avviso, non una voce come le altre. */
.map-info-popover__warn {
  color: #ffb74d;
  line-height: 1.5;
}

/* Motivo del buco, sotto il nome del modello nelle celle vuote. */
.multi-cell__na {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  opacity: 0.75;
}

/* Barra azionabile: celle vuote solo perché i run non sono allineati. */
.multi-align-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bottom-bar-height, 80px) + 12px);
  z-index: var(--fc-z-avviso-mappa);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(680px, calc(100vw - 32px));
  padding: 8px 10px 8px 12px;
  background: rgba(15, 18, 25, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  line-height: 1.4;
}
.multi-align-hint.hidden { display: none; }
.multi-align-hint__icon { flex: 0 0 auto; color: #ffb74d; }
.multi-align-hint__text { flex: 1 1 auto; }
.multi-align-hint__btn {
  flex: 0 0 auto;
  padding: 5px 10px;
  background: var(--primary, #1a73e8);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.multi-align-hint__btn:hover { filter: brightness(1.12); }
.multi-align-hint__close {
  flex: 0 0 auto;
  padding: 0 2px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.multi-align-hint__close:hover { color: #fff; }
@media (max-width: 640px) {
  .multi-align-hint { flex-wrap: wrap; font-size: 11px; }
  .multi-align-hint__text { flex: 1 1 100%; order: 2; }
  .multi-align-hint__btn { order: 3; }
}

/* Config panel — ancorato al bordo destro del viewport via JS (top/right impostati in _multiOpenConfig) */
.multi-config-panel {
  position: fixed;
  z-index: var(--fc-z-confronto-multiplo);
  width: 260px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-secondary, #fff);
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.multi-config__section { margin-bottom: 12px; }
.multi-config__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-bottom: 6px;
}
.multi-config__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.multi-config__chip {
  flex: 1 1 auto;
  min-width: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border, #ccc);
  border-radius: var(--radius-sm, 5px);
  background: var(--bg-tertiary, #f2f2f2);
  color: var(--text-primary, #222);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.multi-config__chip.active {
  background: var(--primary, #1976d2);
  color: white;
  border-color: var(--primary, #1976d2);
}
.multi-config__chip.disabled,
.multi-config__chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.multi-config__hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.62;
}
.multi-config__slot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.multi-config__slot-idx {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-tertiary, #eee);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.multi-config__slot-main {
  font-size: 13px;
  opacity: 0.75;
  font-style: italic;
}
.multi-config__select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid var(--border, #ccc);
  border-radius: var(--radius-sm, 5px);
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #222);
  font-size: 13px;
}
.multi-config__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ========== Contour Overlay Selector ========== */
.contour-select {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--on-surface);
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.contour-select:hover {
  border-color: var(--primary);
}

/* ========== Legenda overlay fronti (ForecastFronts) ========== */
.fronts-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: var(--fc-z-etichette-mappa);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.9);
  color: #222;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.fronts-legend__title { font-weight: 600; margin-right: 2px; }
.fronts-legend span { display: inline-flex; align-items: center; gap: 4px; }
.fronts-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
/* La legenda ha pointer-events:none per non rubare i click alla mappa: il link alla
   carta sinottica deve riabilitarli su di se', o non e' cliccabile. */
.fronts-legend__chart {
  pointer-events: auto;
  margin-left: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  color: #1a4a7a;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.fronts-legend__chart:hover { background: rgba(0, 0, 0, 0.12); text-decoration: underline; }
[data-theme="dark"] .fronts-legend {
  background: rgba(30, 33, 40, 0.9);
  color: #eee;
}
[data-theme="dark"] .fronts-legend__chart {
  background: rgba(255, 255, 255, 0.12);
  color: #9ec9f0;
}
/* Sotto i 768px la bottom-nav copre la fascia in fondo alla mappa: finche' la legenda
   era inerte (pointer-events:none) non importava, ma il link alla carta sinottica li'
   sotto NON sarebbe cliccabile. Stesso calcolo usato dagli altri elementi flottanti. */
@media (max-width: 767px) {
  .fronts-legend {
    bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 12px);
  }
}

.meteogram-proxy-notice {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meteogram-mos-info {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.meteogram-proxy-notice .tier-badge--inline {
  font-size: 10px;
  vertical-align: middle;
  margin-left: 2px;
  cursor: pointer;
}
.meteogram-proxy-notice .tier-badge--inline svg {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
}

/* Param info dot — piccolo indicatore "i" sempre visibile accanto al nome parametro */
.param-info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--text-hint);
  border: 1px solid var(--border);
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar__param-item:hover .param-info-dot,
.sidebar__param-item.active .param-info-dot,
.sidebar__agg-group:hover .param-info-dot,
.sidebar__agg-group.active .param-info-dot {
  opacity: 1;
  color: var(--accent, var(--text));
  border-color: var(--accent, var(--text-hint));
}
/* Nel layout agg-group la label usa flex per allineare il dot a destra */
.sidebar__agg-group .sidebar__agg-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Tooltip parametri — elemento JS appended a <body>, fuori da overflow:hidden della sidebar */
.param-tooltip {
  position: fixed;
  padding: 6px 10px;
  max-width: 280px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: #f5f5f5;
  background: rgba(32, 33, 36, 0.95);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  z-index: var(--fc-z-fumetti-pagina);
  transition: opacity 0.15s;
  font-family: inherit;
}
.param-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}
[data-theme="dark"] .param-tooltip {
  background: rgba(60, 64, 67, 0.97);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Stato pinnato: tooltip resta aperto durante interazioni con la mappa */
.param-tooltip.pinned {
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding-right: 26px; /* spazio per il bottone × */
}
.param-tooltip__close {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  border-radius: 3px;
  font-family: inherit;
}
.param-tooltip__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}

/* Icona (i) cliccabile per pinnare il tooltip */
.param-info-dot {
  cursor: pointer;
}

/* Severity pills inline nei tooltip (Rischio temporali) — colori scala SPC-style */
.param-tooltip .sev-pill {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10.5px;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: baseline;
}
.param-tooltip .sev-l0 { background: #00b050; color: #fff; }
.param-tooltip .sev-l1 { background: #ffeb00; color: #1a1a1a; }
.param-tooltip .sev-l2 { background: #ff8a00; color: #fff; }
.param-tooltip .sev-l3 { background: #e60000; color: #fff; }
.param-tooltip .sev-l4 { background: #a020a0; color: #fff; }

/* Pressure Level (PL) groups with level buttons */
.sidebar__pl-group {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
}
.sidebar__pl-group.active {
  background: rgba(26, 115, 232, 0.05);
}
[data-theme="dark"] .sidebar__pl-group.active {
  background: rgba(100, 181, 246, 0.08);
}
.sidebar__pl-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.sidebar__pl-group.active .sidebar__pl-label {
  color: var(--primary);
}
.sidebar__pl-levels {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sidebar__pl-level {
  min-width: 36px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-primary);
  transition: border-color 0.15s, background 0.15s;
}
.sidebar__pl-level:hover {
  border-color: var(--primary);
}
.sidebar__pl-level.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.sidebar__pl-unit {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 2px;
}

/* ========== Aggregation Groups (prec 1h/3h/6h, snow variants, etc.) ========== */
.sidebar__agg-group {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.sidebar__agg-group.active {
  background: rgba(26, 115, 232, 0.05);
}
[data-theme="dark"] .sidebar__agg-group.active {
  background: rgba(100, 181, 246, 0.08);
}
.sidebar__agg-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.sidebar__agg-group.active .sidebar__agg-label {
  color: var(--primary);
}
.sidebar__agg-label-op {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  opacity: 0.7;
  margin-left: 4px;
}
.sidebar__agg-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sidebar__agg-btn {
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-primary);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 24px;
}
.sidebar__agg-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.sidebar__agg-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.sidebar__agg-group.hidden-by-search {
  display: none;
}

/* Stat selector in source-selector (ensemble mode) */
.source-stat-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-left: auto;
}
.source-stat-select:focus {
  border-color: var(--primary);
  outline: none;
}

/* Collapse button hidden on mobile (sidebar is already a drawer) */
.sidebar__collapse-btn { display: none; }

@media (min-width: 768px) {
  /* ---- Collapse button (desktop only) ---- */
  .sidebar__collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
  }
  .sidebar__collapse-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }
  .sidebar.collapsed .sidebar__collapse-btn svg {
    /* Switch to expand chevron */
    transform: scaleX(-1);
  }
  .sidebar.collapsed .sidebar__nowcasting {
    display: none;
  }
  .sidebar.collapsed.open .sidebar__nowcasting { display: block; }
  .sidebar:not(.collapsed) .sidebar__collapse-btn svg {
    /* Chevron pointing left = collapse */
  }
}

/* Play-speed wrapper and overlay label */
.play-speed-wrap {
  position: relative;
  display: inline-flex;
}
.play-speed-label {
  position: absolute;
  bottom: -3px;
  right: -5px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  border-radius: 4px;
  padding: 1px 3px;
  cursor: pointer;
  z-index: 1;
  user-select: none;
  transition: background 0.15s;
}
.play-speed-label:hover {
  background: rgba(0, 0, 0, 0.85);
}
[data-theme="light"] .play-speed-label {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

/* GIF button in map toolbar */
.map-toolbar__gif-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Badge in timeline */
.bottom-bar .timeline .fhr-avail-badge {
  position: absolute;
  top: 2px;
  right: 10px;
  z-index: 5;
}

@media (pointer: coarse) {
  .map-toolbar__compare-btn,
  .map-toolbar__gif-btn {
    position: relative;
  }
  .map-toolbar__compare-btn::after,
  .map-toolbar__gif-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    pointer-events: none;
  }
}
.map-info-bar__left {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  flex-wrap: wrap;
  min-width: 0;
}
.map-info-bar__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  flex-shrink: 0;
}
#info-param-name {
  font-weight: 600;
  color: var(--text-primary);
}
.map-info-bar__model {
  font-weight: 600;
  color: var(--primary);
}
.map-info-bar__tz-toggle {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(26, 115, 232, 0.1);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.map-info-bar__tz-toggle:hover,
.map-info-bar__tz-toggle.local {
  background: var(--primary);
  color: white;
}

/* ========== Quick Parameter Bar (Fase 1) ========== */

.quick-params {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.quick-params::-webkit-scrollbar { display: none; }
.quick-params:empty { display: none; }

.quick-param-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  color: var(--text-primary);
}
.quick-param-chip:hover {
  background: var(--bg-secondary);
  border-color: var(--border);
}
.quick-param-chip.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.quick-param-chip__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-param-chip__icon svg {
  width: 16px;
  height: 16px;
}
/* Availability ticks on scrubber track */
.scrubber-tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 1;
  border-radius: 1px;
  transition: opacity 0.2s;
}
.scrubber-tick.available {
  background: var(--primary);
  opacity: 0.55;
}
.scrubber-tick.pending {
  background: var(--text-hint);
  opacity: 0.12;
}
/* Edge marker at last available FHR */
.scrubber-avail-edge {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--primary);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
  border-radius: 1px;
  opacity: 0.7;
}
/* Availability badge in controls */
.fhr-avail-badge {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  line-height: 1.3;
  user-select: none;
}
.fhr-avail-badge.complete {
  color: var(--success, #4caf50);
}

/* ===== P3 — Preset salti rapidi (Ora / +6h / Domani) ===== */
.scrubber-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
  padding-right: 56px; /* lascia spazio al badge disponibilità top-right */
}
.scrubber-preset {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.scrubber-preset:hover {
  background: rgba(255, 255, 255, 0.13);
  color: var(--text-primary);
}
.scrubber-preset.active {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}
[data-theme="light"] .scrubber-preset {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .scrubber-preset:hover {
  background: rgba(0, 0, 0, 0.08);
}
/* Scrubber: pulse on avail-edge */
.processing .scrubber-avail-edge {
  animation: pulse-edge 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .processing .scrubber-avail-edge {
    animation: none;
  }
}
/* L'angolo in basso a destra sta stretto (#921, difetti DIF-6 e DIF-9 del
   collaudo del 21/09/2026). La legenda verticale e' centrata (`top: 50%` piu'
   `translateY(-50%)`) con un tetto di 75vh che non toglie ne' la barra sopra
   ne' il bottone «i» sotto: misurato il 22/09 a 1366x620, modo Pro, parametro
   `precip_type`, la legenda finiva a y562 e il bottone «i» (y506-y532) le si
   disegnava sopra per 24x26 px, cioe' tutto il bottone.
   Il tetto nuovo tiene conto del bottone. Siccome la legenda e' CENTRATA, ogni
   pixel tolto sopra si toglie anche sotto, quindi lo spazio del bottone va
   contato DUE volte: (bottom 88 + alto 26) x 2 = 228, piu' 8 px di respiro
   sopra e sotto = 244. Il 100% e' l'altezza di `#map-container`, che e' il
   contenitore di posizione della legenda.
   🪤 Vale per la sola pagina forecast: `analysis.html` usa le stesse due
   classi ma NON ha il bottone «i» (`grep -c map-info-btn analysis.html` = 0),
   e li' la legenda si accorcerebbe per niente.
   🪤 Il pavimento di 140 px non e' decorativo. `calc(100% - 244px)` toglie una
   quantita' FISSA, quindi su un contenitore basso collassa: misurato a
   1366x420 il contenitore e' 356 px e la legenda scendeva a 112 px, e sul
   telefono in orizzontale scenderebbe a pochi pixel. Sotto i ~384 px di
   contenitore vince il pavimento: la legenda resta leggibile e il bottone «i»
   torna a sedersi sull'angolo. E' una scelta: in uno spazio cosi' basso vale
   piu' vedere la legenda che avere l'angolo pulito. */
body.page-forecast .legend-container--vertical.legend-container--overlay {
  max-height: 75vh;                            /* per chi non conosce clamp() */
  max-height: clamp(140px, calc(100% - 244px), 75vh);
  overflow-y: auto;
}

/* 🪤 La legenda e' `pointer-events: none` (vedi il commento qui sopra) per non
   rubare la maniglia del confronto quando ci finisce sotto. Ma un pannello che
   non riceve eventi non si puo' nemmeno SCORRERE, e col tetto nuovo il
   contenuto puo' traboccare: senza questa classe resterebbe irraggiungibile.
   `forecast-topbar.js` misura se trabocca davvero e solo allora la mette. */
body.page-forecast .legend-container--vertical.legend-container--overlay.legend-container--scorre {
  pointer-events: auto;
}

/* (#921) Il punto d'appoggio della legenda verticale sul telefono era 122 px
   fissi dal fondo; dall'08/10/2026 (0973a49) segue la barra in basso misurata
   (--bottom-bar-height): la regola sta piu' avanti, nella sezione 2. */

/* Area di tocco piu' larga per i bersagli stretti della barra (#924, difetto
   DIF-12 del collaudo del 21/09/2026). Strada scelta da Marco il 23/09: si
   allarga la zona che risponde al dito, non il comando — l'aspetto della barra
   non cambia di un pixel e la mappa non perde spazio.
   Misure vere sull'A54 (384x694, modo Semplice): le righe del titolo distano
   1-3 px, quindi IN VERTICALE non c'e' niente da prendere senza rubare il
   tocco al comando vicino. In orizzontale invece lo spazio c'e', ma va contato
   dentro il contenitore, non sullo schermo:
   - `#timezone-toggle` 33x14 sta in `.map-info-bar__sub`, che arriva fino a
     x329: 240 px liberi a destra. +11 px lo portano a **44 px**, l'obiettivo.
     A sinistra non si guadagna: il contenitore comincia dove comincia lui.
   - `#info-param-desc-btn` (il bottoncino «i») 14x14 sembrava avere 75 px
     liberi a destra, ma 🪤 `.map-info-bar__headline` ha `overflow: hidden` e
     finisce a x264, cioe' **1 px dopo il bottone**: quello spazio e' fuori dal
     contenitore e verrebbe tagliato. Restano 3 px a sinistra, prima del nome
     del parametro. Da 14 a 18 px: poco, ma e' tutto quello che il contenitore
     concede senza togliergli il taglio del testo lungo.
   - `#info-cat-btn` 27x14 ha 5 px prima del nome del parametro: +2 px, il
     resto sarebbe sovrapposizione.
   Ogni estensione si ferma a meta' dello spazio libero verso il vicino, cosi'
   nessun comando puo' rubare il tocco a un altro. */
@media (max-width: 767px) {
  body.page-forecast #timezone-toggle,
  body.page-forecast #info-param-desc-btn,
  body.page-forecast #info-cat-btn {
    position: relative;
  }
  body.page-forecast #timezone-toggle::after,
  body.page-forecast #info-param-desc-btn::after,
  body.page-forecast #info-cat-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
  }
  /* 33 -> 44 px: tutto a destra, dentro `.map-info-bar__sub` */
  body.page-forecast #timezone-toggle::after { left: 0; right: -11px; }
  /* 14 -> 18 px: solo a sinistra, il resto lo taglia `.map-info-bar__headline` */
  body.page-forecast #info-param-desc-btn::after { left: -3px; right: -1px; }
  /* 27 -> 29 px: due pixel prima del nome del parametro */
  body.page-forecast #info-cat-btn::after { left: 0; right: -2px; }
}

/* ── Legenda comprimibile (toggle Legenda ▾/▴) ───────────────────────── */
/* Quando la legenda ha il toggle, impila contenuto + pulsante e allinea a dx;
   il pulsante resta in basso (overlay ancorato in basso su mobile = pollice). */
.legend-container--vertical.legend-container--overlay.legend-has-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.legend-has-toggle .legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  /* Resta visibile in basso anche se la legenda espansa scrolla */
  position: sticky;
  bottom: 0;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  /* Il contenitore è pointer-events:none su desktop: riabilitalo sul pulsante */
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.legend-toggle__chev { font-size: 10px; opacity: 0.85; }
.legend-container--collapsed .legend-bar { display: none !important; }
[data-theme="light"] .legend-has-toggle .legend-toggle {
  color: #fff;
  background: rgba(40, 40, 40, 0.78);
}

/* ===== P2 — Mini-legenda (stato chiuso) =====
   Chiave di lettura compatta = fenomeno dominante + scala + gradiente.
   Coerente col pannello P1 (scuro locale, blur, bordo sottile, radius morbido),
   ma più piccola. Solo-forecast (app.css non è caricato altrove). */
.legend-mini { display: none; }
.legend-container--collapsed .legend-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: auto;          /* il container vertical è pointer-events:none */
  cursor: pointer;
  text-align: left;
  color: #fff;
  background: rgba(15, 20, 28, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 6px 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  max-width: 170px;
  width: max-content;
}
.legend-mini__head { display: flex; align-items: center; gap: 6px; }
.legend-mini__title { font-size: 13px; font-weight: 600; line-height: 1.15; }
.legend-mini__chev { font-size: 11px; opacity: 0.75; }
.legend-mini__scale { font-size: 11px; opacity: 0.82; line-height: 1.15; }
.legend-mini__grad {
  display: flex;
  width: 100%;
  min-width: 96px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
}
.legend-mini__grad i { flex: 1 1 0; display: block; }
[data-theme="light"] .legend-container--collapsed .legend-mini {
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.12);
}
/* Chiusa: nascondi il pulsante ▾ (la mini stessa apre la completa) */
.legend-container--collapsed .legend-toggle { display: none !important; }

/* Stato chiuso: ancora la mini-legenda in basso-destra, SOPRA la timeline.
   Il map-container si estende dietro le barre, quindi `bottom` deve scavalcare
   bottom-bar (~94px) + bottom-nav (~56px, solo mobile). */
body.page-forecast .legend-container--vertical.legend-container--overlay.legend-container--collapsed {
  top: auto;
  bottom: 158px;            /* mobile: oltre bottom-bar + bottom-nav */
  right: 8px;
  transform: none;
  padding: 0;
  align-items: flex-end;
  max-height: none;
}
@media (min-width: 768px) {
  body.page-forecast .legend-container--vertical.legend-container--overlay.legend-container--collapsed {
    bottom: 101px;          /* desktop: solo bottom-bar (no bottom-nav) */
  }
}

/* ========== Legend 2D (precip type × intensity, cloud + fenomeni, etc.) ========== */
/* Numero di colonne dato dallo script via custom property `--legend-2d-cols`
   (default 3 per back-compat con precip_type_intensity). */
.legend-2d__multigroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* La legenda 2D (multigroup) è un blocco verticale: la `.legend-bar` che la
   contiene NON deve essere costretta dall'height fisso del layout colorbar
   1D verticale (28vh / 35vh max su mobile), altrimenti la parte inferiore
   della legenda viene tagliata. */
.legend-container--vertical .legend-bar:has(.legend-2d__multigroup),
.legend-container--vertical .legend-bar:has(> .legend-2d) {
  display: block;
  height: auto;
  min-height: 0;
  max-height: none;
}
/* Group title (Cielo/Nebbia/Fenomeni): emesso come PRIMO span dentro
   .legend-2d__header — occupa la cella top-left della grid, allineato in
   basso (= a ridosso delle celle colorate della prima riga). Selettore
   con specificità maggiore di `.legend-2d__header span` per non ereditare
   rotate(-45deg) e text-align:left delle col-header. */
.legend-2d__header .legend-2d__group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1.0);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 1px 1px 2px rgba(0, 0, 0, 0.9);
  transform: none;
  white-space: nowrap;
  line-height: 1.1;
  text-align: right;
  align-self: end;
  width: auto;
  padding-left: 0;
  padding-right: 5px;
}
[data-theme="light"] .legend-2d__header .legend-2d__group-title {
  color: rgba(0, 0, 0, 0.85);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.85);
}
@media (max-width: 767px) {
  .legend-2d__header .legend-2d__group-title { font-size: 10px; padding-right: 4px; }
}
.legend-2d {
  --legend-2d-cols: 3;
  --legend-2d-cell: 16px;
  --legend-2d-cell-h: 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px;
}
.legend-2d__header {
  display: grid;
  grid-template-columns: 1fr repeat(var(--legend-2d-cols), var(--legend-2d-cell));
  gap: 2px;
  align-items: end;
  padding-bottom: 4px;
  min-height: 56px;
}
.legend-2d__header span {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 1px 1px 2px rgba(0, 0, 0, 0.9);
  line-height: 1;
  transform: rotate(-45deg);
  transform-origin: left bottom;
  white-space: nowrap;
  display: inline-block;
  width: var(--legend-2d-cell);
  text-align: left;
  padding-left: 2px;
  align-self: end;
}
[data-theme="light"] .legend-2d__header span {
  color: rgba(0, 0, 0, 0.85);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.85);
}
.legend-2d__header span:first-child {
  transform: none;
  width: auto;
  text-align: right;
}
.legend-2d__row {
  display: grid;
  grid-template-columns: 1fr repeat(var(--legend-2d-cols), var(--legend-2d-cell));
  gap: 2px;
  align-items: center;
}
.legend-2d__label {
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
  color: rgba(255, 255, 255, 1.0);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 1px 1px 2px rgba(0, 0, 0, 0.9);
  line-height: 1.1;
  padding-right: 5px;
}
[data-theme="light"] .legend-2d__label {
  color: rgba(0, 0, 0, 0.9);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.85);
}
.legend-2d__cell {
  width: var(--legend-2d-cell);
  height: var(--legend-2d-cell-h);
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
/* Mobile: compact 2D legend */
@media (max-width: 767px) {
  .legend-2d {
    --legend-2d-cell: 14px;
    --legend-2d-cell-h: 12px;
  }
  .legend-2d__header { min-height: 50px; }
  .legend-2d__header span { font-size: 9px; }
  .legend-2d__label { font-size: 10px; }
  .legend-2d__header,
  .legend-2d__row { gap: 1px; }
}

/* ========== Settings Panel (Fase 5) ========== */

.settings-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--fc-z-modali);
  display: flex;
  justify-content: flex-end;
}
.settings-panel.hidden { display: none; }
.settings-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.settings-panel__content {
  position: relative;
  width: 340px;
  max-width: 90vw;
  height: 100%;
  background: var(--bg-primary);
  box-shadow: -4px 0 16px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  animation: slideInRight 0.25s cubic-bezier(0.4,0,0.2,1) forwards;
  overflow-y: auto;
}
.settings-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.settings-panel__header h3 {
  font-size: 18px;
  font-weight: 600;
}
.settings-panel__close {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-panel__close:hover { background: var(--bg-tertiary); }
.settings-panel__body {
  padding: 12px 20px 24px;
}
.settings-section__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-hint);
  margin-bottom: 10px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-primary);
}
.settings-row + .settings-row {
  border-top: 1px solid var(--border);
}
.settings-toggle-group {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  padding: 2px;
}
.settings-toggle-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.settings-toggle-btn.active {
  background: var(--primary);
  color: white;
}
.settings-range {
  flex: 0 0 100px;
}
.settings-range__val {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
}

/* Mobile: settings as bottom sheet */
@media (max-width: 767px) {
  .settings-panel { justify-content: center; align-items: flex-end; }
  .settings-panel__content {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    animation: slideUp 0.25s cubic-bezier(0.4,0,0.2,1) forwards;
  }
}

/* ========== Presentation Mode (Fase 7) ========== */

body.presentation-mode .sidebar,
body.presentation-mode .bottom-bar,
body.presentation-mode .bottom-nav,
body.presentation-mode .quick-params,
body.presentation-mode .map-info-bar,
body.presentation-mode .app-main { padding-bottom: 0; }
body.presentation-mode .main-content { height: 100vh; display: flex; flex-direction: column; }
body.presentation-mode .card--map { flex: 1; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
body.presentation-mode .map-container { flex: 1; }
body.presentation-mode .map-info-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; opacity: 0.7; }
body.presentation-mode .map-toolbar:hover { opacity: 1; }
body.presentation-mode .legend-container--overlay { opacity: 0.5; }
body.presentation-mode .legend-container--overlay:hover { opacity: 1; }

.presentation-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  z-index: var(--fc-z-avviso-presentazione);
  pointer-events: none;
  transition: opacity 0.3s;
}
.presentation-hint.hidden { display: none; }
.presentation-hint kbd {
  background: rgba(255,255,255,0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ========== Mobile Bottom Sheet (Fase 8) ========== */

.mobile-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--fc-z-foglio-telefono);
  background: var(--bg-primary);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  padding-bottom: var(--safe-area-bottom);
  max-height: 50vh;
}
.mobile-sheet.visible {
  transform: translateY(0);
}
.mobile-sheet.hidden { display: none; }
.mobile-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  margin: 10px auto 8px;
}
.mobile-sheet__content {
  padding: 0 20px 16px;
}
.mobile-sheet__value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.mobile-sheet__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
}
.mobile-sheet__unit {
  font-size: 16px;
  color: var(--text-secondary);
}
.mobile-sheet__location {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.mobile-sheet__actions {
  display: flex;
  gap: 8px;
}
.mobile-sheet__actions .btn {
  flex: 1;
}

/* Hide mobile sheet on desktop */
@media (min-width: 768px) {
  .mobile-sheet { display: none !important; }
}

/* ========== Tooltip hints (Sprint 1) ========== */

.has-tooltip { cursor: help; }

/* Contextual hints for first-time users */
.contextual-hint {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--fc-z-suggerimento);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(32, 33, 36, 0.9);
  color: #fff;
  font-size: 13px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  animation: hintFadeIn 0.3s ease;
  pointer-events: auto;
}
.contextual-hint--out {
  animation: hintFadeOut 0.3s ease forwards;
}
.contextual-hint__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.contextual-hint__close:hover { color: #fff; }
.model-selector__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
  transition: border-color 0.15s;
}
.model-selector__trigger:hover {
  border-color: var(--primary);
}
.model-selector__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--fc-z-tendina-modelli);
  scrollbar-width: thin;
}
.model-selector__search {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
}
.model-selector__search::placeholder { color: var(--text-hint); }
.model-selector__group-label {
  padding: 6px 10px 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-hint);
  background: var(--bg-secondary);
  position: sticky;
  top: 37px;
  z-index: 1;
}
.model-selector__section .model-selector__group-label {
  top: 37px;
}
.model-selector__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.1s;
  gap: 6px;
}
.model-selector__item:hover {
  background: var(--bg-tertiary);
}
.model-selector__item.active {
  background: rgba(26, 115, 232, 0.08);
  border-left: 3px solid var(--primary);
  padding-left: 7px;
}
.model-selector__item-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.model-selector__item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
/* Bandiera nazionale del centro che produce il modello (liste di selezione) */
.model-flag {
  display: inline-block;
  width: 16px;
  height: 11px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: -1px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .model-flag {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.22);
}
/* Contesti non-flex: la bandiera precede il testo nello stesso box */
.simple-model-dropdown__item > .model-flag,
.simple-model-dropdown__self-label > .model-flag {
  margin-right: 6px;
}
/* Barra info: bandiera del modello attivo, poco più piccola del testo */
#info-model > .model-flag {
  width: 14px;
  height: 10px;
  margin-right: 5px;
}
/* Trigger del selettore in cima alla sidebar */
#model-selector-label > .model-flag {
  margin-right: 6px;
}
/* Barra controlli del confronto */
#model-compare-left-name > .model-flag,
#model-compare-right-name > .model-flag {
  width: 14px;
  height: 10px;
  margin-right: 5px;
}
/* Etichette sulle mappe (confronto a tendina e griglia multi).
   NB: serve `.map-container` nel selettore — il layer PNG delle mappe è servito
   da un catch-all `.main-content .map-container img { position:absolute;
   width:100%; height:100% }` che altrimenti gonfia la bandiera a tutta
   l'etichetta. Il contorno è chiaro perché il fondo è scuro in entrambi i temi. */
.map-container .compare-model-label > .model-flag {
  position: static;
  width: 14px;
  height: 10px;
  margin-right: 5px;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.35);
}
.model-selector__item-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.model-selector__item-res {
  font-size: 10px;
  color: var(--text-hint);
  white-space: nowrap;
  flex-shrink: 0;
}
.model-selector__fav-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-hint);
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.15s;
  opacity: 0.4;
}
.model-selector__fav-btn:hover {
  opacity: 1;
  color: var(--warning);
}
.model-selector__fav-btn.active {
  color: var(--warning);
  opacity: 1;
}

/* Dark mode adjustments */
[data-theme="dark"] .model-selector__trigger {
  background: var(--bg-secondary);
}
[data-theme="dark"] .model-selector__dropdown {
  background: var(--bg-secondary);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .model-selector__item.active {
  background: rgba(66, 133, 244, 0.15);
}

/* Scrubber day lines (Simple mode) */
.scrubber-day-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed var(--border);
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

@media (max-width: 767px) {
  /* Model selector dropdown: full-width on mobile, inside sidebar drawer */
  .model-selector__dropdown {
    width: calc(var(--sidebar-width) - 16px);
    max-height: 50vh;
  }
  /* Contextual hints: allow wrap on narrow screens */
  .contextual-hint {
    white-space: normal;
    max-width: calc(100vw - 32px);
    text-align: center;
    bottom: calc(var(--bottom-nav-height, 56px) + 4px);
  }
}

/* ==========================================================================
   FORECAST GLASSMORPHISM OVERLAY — Full-Viewport Map
   Scoped: body.page-forecast only. No impact on other pages.
   ========================================================================== */

/* ---- Header: non c'e' piu' ----
   Fino al 17/09/2026 qui stavano DICIOTTO regole `body.page-forecast
   .app-header`: l'intestazione di forecast era un overlay `position: fixed`
   alto 44 px sopra la mappa, col vetro sfocato, piu' le varianti in tema
   chiaro per titolo, bottoni, Semplice/Pro, site-topnav, site-menu-btn e
   account. Con #803 forecast e' passata all'intestazione unica e la
   combinazione `body.page-forecast` + `.app-header` non esiste piu' in nessuna
   pagina: le regole erano inerti.
   🔑 Le tre geometrie che dipendevano dall'altezza ZERO di quell'overlay
   (.app-layout 100vh, .map-info-bar top 44px, .sidebar__collapse-btn
   padding-top 52px) sono state ricalcolate nel <style> di forecast.html, col
   prefisso `body.page-forecast` perche' altrimenti perdono il confronto di
   specificita' con le regole qui sotto.
   Il resto di questa sezione — riga di informazioni, barra laterale, comandi
   sulla mappa — e' VIVO. */

/* ---- Info bar: posizione, fondo e livello li decide la sezione 2 («UNA barra sola sopra la mappa») ---- */
body.page-forecast .card--map {
  position: relative;
}
body.page-forecast .map-info-bar {
  position: absolute;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* -- Text group: frosted pill for readability over any map color -- */
body.page-forecast .map-info-bar__left {
  color: #fff;
  filter: none;
}
body.page-forecast .map-info-bar__model {
  color: #90caf9;
}
body.page-forecast .map-info-bar__sep {
  color: rgba(255, 255, 255, 0.4);
}

/* -- TZ toggle: individual pill -- */
body.page-forecast .map-info-bar__tz-toggle {
  color: #90caf9;
  background: rgba(10, 14, 20, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(144, 202, 249, 0.3);
  text-shadow: none;
}
body.page-forecast .map-info-bar__tz-toggle:hover,
body.page-forecast .map-info-bar__tz-toggle.local {
  background: #64b5f6;
  color: #0d1117;
}

/* ===== P1 narrative info-bar (commit 1) — pannello locale a due tier ===== */
body.page-forecast .map-info-bar__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  max-width: calc(100vw - 20px);
}
body.page-forecast .map-info-bar__headline {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.page-forecast .map-info-bar__headline #info-param-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.15;
}
body.page-forecast .map-info-bar__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  margin-top: 2px;
  font-size: 12.5px;
}
body.page-forecast .map-info-bar__sub .map-info-bar__model {
  color: #90caf9;
  font-weight: 600;
}
body.page-forecast .map-info-bar #info-valid { color: rgba(255, 255, 255, 0.74); }
body.page-forecast .map-info-bar #info-run { color: rgba(255, 255, 255, 0.6); }
/* UTC: micro-chip molto discreto */
body.page-forecast .map-info-bar__sub .map-info-bar__tz-toggle {
  font-size: 9px;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  opacity: 0.7;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}
body.page-forecast .map-info-bar__sub .map-info-bar__tz-toggle:hover,
body.page-forecast .map-info-bar__sub .map-info-bar__tz-toggle.local {
  background: #64b5f6;
  color: #0d1117;
  opacity: 1;
}
/* run nascosto in Semplice su mobile (resta visibile in Pro e su desktop) */
@media (max-width: 767px) {
  body.page-forecast.mode-simple .map-info-bar__run-wrap { display: none !important; }
}
/* Desktop: riga singola con separatori verticali netti */
@media (min-width: 768px) {
  body.page-forecast .map-info-bar__left {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  body.page-forecast .map-info-bar__headline { padding: 0 14px; }
  body.page-forecast .map-info-bar__headline #info-param-name {
    font-size: 15px;
    letter-spacing: -0.1px;
  }
  body.page-forecast .map-info-bar__sub {
    margin-top: 0;
    flex-wrap: nowrap;
    gap: 0;
  }
  /* separatore + respiro tra blocchi: param | modello | run | valido */
  body.page-forecast .map-info-bar__sub > span {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: 12px;
    margin-left: 12px;
  }
  /* più respiro dopo il modello: stacca identità-modello da validità temporale */
  body.page-forecast .map-info-bar__sub > .map-info-bar__run-wrap,
  body.page-forecast .map-info-bar__sub > #info-valid {
    margin-left: 18px;
    padding-left: 18px;
  }
  body.page-forecast .map-info-bar__sub .map-info-bar__tz-toggle { margin-left: 11px; }
}

/* Modalità Confronto: la barra superiore mostra SOLO le info comuni a tutti i
   tile. Asse 'model' (modelli diversi) → nascondi modello/centro + sorgente
   (Ctrl/Ens) + run (i tile possono avere cicli diversi dal main); asse 'param'
   (parametri diversi) → nascondi parametro + dettaglio (modello e run restano,
   sono comuni). */
.map-info-bar--compare-model #info-model-wrap,
.map-info-bar--compare-model #info-source-wrap {
  display: none !important;
}
/* Il run è comune solo in init (mostra il ciclo comune); in validità i tile
   hanno cicli diversi → nascosto. */
.map-info-bar--compare-model.map-info-bar--align-valid #info-run-wrap {
  display: none !important;
}
.map-info-bar--compare-param #info-param-wrap {
  display: none !important;
}
/* niente separatore "orfano" davanti al primo segmento rimasto del sub (desktop) */
.map-info-bar--compare-param .map-info-bar__sub > #info-model-wrap {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}

/* -- Toolbar buttons: individual pill backgrounds -- */
body.page-forecast .map-info-bar .map-toolbar__share-btn,
body.page-forecast .map-info-bar .map-toolbar__compare-btn,

body.page-forecast .map-info-bar .map-toolbar__fullscreen-btn,
body.page-forecast .map-info-bar .map-toolbar__wind-btn,
body.page-forecast .map-info-bar .map-toolbar__btn {
  background: rgba(10, 14, 20, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}
body.page-forecast .map-info-bar .map-toolbar__share-btn:hover,
body.page-forecast .map-info-bar .map-toolbar__compare-btn:hover,

body.page-forecast .map-info-bar .map-toolbar__fullscreen-btn:hover,
body.page-forecast .map-info-bar .map-toolbar__wind-btn:hover,
body.page-forecast .map-info-bar .map-toolbar__btn:hover {
  background: rgba(10, 14, 20, 0.6);
  color: #fff;
}
body.page-forecast .map-info-bar .map-toolbar__compare-btn.active,
body.page-forecast .map-info-bar .map-toolbar__wind-btn.active,
body.page-forecast .map-info-bar .map-toolbar__btn.active {
  background: var(--primary);
  color: white;
}

/* -- Grouped controls: mode toggle, basemap, grid toggles -- */
body.page-forecast .map-info-bar .map-toolbar__mode {
  background: rgba(10, 14, 20, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 2px;
}
body.page-forecast .map-info-bar .map-toolbar__mode .map-mode-btn {
  color: rgba(255, 255, 255, 0.7);
  border-color: transparent;
  background: transparent;
}
body.page-forecast .map-info-bar .map-toolbar__mode .map-mode-btn.active {
  background: var(--primary);
  color: white;
}
body.page-forecast .map-info-bar .basemap-flavor {
  background: rgba(10, 14, 20, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}
body.page-forecast .map-info-bar .contour-select {
  background: rgba(10, 14, 20, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}
body.page-forecast .map-info-bar .grid-toggles {
  background: rgba(10, 14, 20, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
}
body.page-forecast .map-info-bar .grid-toggles label {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: none;
}

/* -- Light theme: floating controls -- */
[data-theme="light"] body.page-forecast .map-info-bar__left {
  color: var(--text-primary);
  text-shadow: none;
  filter: none;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 3px 8px;
}
[data-theme="light"] body.page-forecast .map-info-bar__model {
  color: var(--primary-dark);
  text-shadow: none;
}
/* Tema chiaro: finestra di validità + run sono bianchi by-default (tema scuro) → illeggibili su barra chiara */
[data-theme="light"] body.page-forecast .map-info-bar #info-valid {
  color: var(--text-primary);
  text-shadow: none;
}
[data-theme="light"] body.page-forecast .map-info-bar #info-run {
  color: var(--text-secondary);
  text-shadow: none;
}
[data-theme="light"] body.page-forecast .map-info-bar__sep {
  color: rgba(0, 0, 0, 0.3);
  text-shadow: none;
}
[data-theme="light"] body.page-forecast .map-info-bar__tz-toggle {
  color: var(--primary);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--primary);
}
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__share-btn,
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__compare-btn,
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__gif-btn,
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__fullscreen-btn,
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__wind-btn,
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__btn {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-secondary);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__share-btn:hover,
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__compare-btn:hover,
[data-theme="light"] 
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__fullscreen-btn:hover,
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__wind-btn:hover,
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__btn:hover {
  background: rgba(255, 255, 255, 0.8);
  color: var(--primary);
}
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__mode {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__mode .map-mode-btn {
  color: var(--text-secondary);
}
[data-theme="light"] body.page-forecast .map-info-bar .basemap-flavor {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] body.page-forecast .map-info-bar .contour-select {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] body.page-forecast .map-info-bar .grid-toggles {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] body.page-forecast .map-info-bar .grid-toggles label {
  color: var(--text-primary);
}

/* ---- Bottom bar: semi-transparent with readable timeline ---- */
body.page-forecast .bottom-bar {
  background: rgba(15, 20, 30, 0.50);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}
body.page-forecast .bottom-bar .fhr-day-sep__label,
body.page-forecast .bottom-bar .scrubber-days__label {
  color: rgba(255, 255, 255, 0.7);
}
body.page-forecast .bottom-bar .controls .btn {
  color: rgba(255, 255, 255, 0.9);
}
[data-theme="light"] body.page-forecast .bottom-bar {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text-primary);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] body.page-forecast .bottom-bar .fhr-day-sep__label,
[data-theme="light"] body.page-forecast .bottom-bar .scrubber-days__label {
  color: var(--text-secondary);
}

/* ---- Quick params: glassmorphism ---- */
body.page-forecast .quick-params {
  background: rgba(15, 20, 30, 0.30);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.page-forecast .quick-param-chip {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}
body.page-forecast .quick-param-chip:hover {
  background: rgba(255, 255, 255, 0.18);
}
body.page-forecast .quick-param-chip.active {
  background: var(--primary);
  color: white;
}
[data-theme="light"] body.page-forecast .quick-params {
  background: rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] body.page-forecast .quick-param-chip {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] body.page-forecast .quick-param-chip:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* ========== Simple Mode: Interactive Controls ========== */

/* -- Model selector wrapper (inline in info bar) -- */
.map-info-bar__model-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* -- Model button: reset to inline look -- */
.map-info-bar__model--clickable {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: default;
  line-height: inherit;
}
body.mode-simple .map-info-bar__model--clickable {
  cursor: pointer;
}

/* Chevron */
.map-info-bar__model-chevron {
  transition: transform 0.2s;
  opacity: 0.7;
  flex-shrink: 0;
}
.map-info-bar__model--clickable[aria-expanded="true"] .map-info-bar__model-chevron {
  transform: rotate(180deg);
}

/* -- Simple Model Dropdown -- */
.simple-model-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 24px));
  max-height: 320px;
  overflow-y: auto;
  background: rgba(15, 20, 30, 0.88);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 0;
  z-index: var(--fc-z-tendine);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.simple-model-dropdown.hidden {
  display: none;
}
.simple-model-dropdown__group {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
}
.simple-model-dropdown__item {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.12s;
}
.simple-model-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.simple-model-dropdown__item.active {
  color: var(--primary);
  font-weight: 600;
}
.simple-model-dropdown__self-label {
  padding: 6px 12px 2px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.simple-model-dropdown__subheader {
  padding: 5px 12px 2px 24px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.simple-model-dropdown__toggle {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 500;
}
.simple-model-dropdown__chevron {
  float: right;
  opacity: 0.5;
}
.simple-model-dropdown__collapsible {
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  margin-left: 10px;
}
.simple-model-dropdown__subgroup {
  padding: 4px 12px 2px 24px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
.simple-model-dropdown__run {
  padding-left: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.model-compare-dropdown {
  max-height: min(500px, 70vh);
  overflow-y: auto;
}

/* During param compare: main legend moves to left (matches left map) */
.legend-container--compare-left.legend-container--vertical.legend-container--overlay {
  left: 8px;
  right: auto;
}
@media (min-width: 768px) {
  .legend-container--compare-left.legend-container--vertical.legend-container--overlay {
    left: 10px;
    right: auto;
  }
}
@media (max-width: 767px) {
  .legend-container--compare-left.legend-container--vertical.legend-container--overlay {
    left: 4px;
    right: auto;
  }
}
/* Compare legend stays on the right (default position, matches right map) */

/* Light theme */
[data-theme="light"] .simple-model-dropdown {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .simple-model-dropdown__group {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .simple-model-dropdown__item {
  color: var(--text-primary);
}
[data-theme="light"] .simple-model-dropdown__item:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .simple-model-dropdown__item.active {
  color: var(--primary);
}
[data-theme="light"] .simple-model-dropdown__self-label {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .simple-model-dropdown__subheader {
  color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .simple-model-dropdown__toggle {
  color: var(--text-primary) !important;
}
[data-theme="light"] .simple-model-dropdown__collapsible {
  border-left-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .simple-model-dropdown__subgroup {
  color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .simple-model-dropdown__run {
  color: rgba(0, 0, 0, 0.5);
}

/* -- Run clickable (Simple mode) -- */
.map-info-bar__run {
  all: unset;
  font: inherit;
  color: inherit;
  cursor: default;
  line-height: inherit;
}
body.mode-simple .map-info-bar__run--clickable {
  cursor: pointer;
}
body.mode-simple .map-info-bar__run--clickable:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* -- Segment wrappers (cat, param, source, run) -- */
.map-info-bar__cat-wrap,
.map-info-bar__param-wrap,
.map-info-bar__source-wrap,
.map-info-bar__run-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* -- Icona info (i) accanto al nome parametro — tooltip descrittivo -- */
.param-desc-icon {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 50%;
  color: var(--color-text-secondary, #9ca3af);
  opacity: 0.7;
  cursor: help;
  transition: opacity 0.15s, background-color 0.15s;
}
.param-desc-icon:hover,
.param-desc-icon:focus-visible {
  opacity: 1;
  background-color: rgba(128, 128, 128, 0.18);
}

.param-desc-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  max-width: 340px;
  padding: 8px 12px;
  background: var(--color-surface-raised, #1f2937);
  color: var(--color-text-primary, #f3f4f6);
  border: 1px solid var(--color-border, rgba(128, 128, 128, 0.25));
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: normal;
  pointer-events: auto;
}

/* -- Segment button (shared across cat, param, detail, source) -- */
.map-info-bar__segment--clickable {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: inherit;
  color: inherit;
  line-height: inherit;
  cursor: default;
}
body.mode-simple .map-info-bar__segment--clickable {
  cursor: pointer;
}
body.mode-simple .map-info-bar__segment--clickable:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* -- Segment chevron -- */
.map-info-bar__segment-chevron {
  transition: transform 0.2s;
  opacity: 0.7;
  flex-shrink: 0;
}
.map-info-bar__segment--clickable[aria-expanded="true"] .map-info-bar__segment-chevron {
  transform: rotate(180deg);
}

/* -- Category icon in info bar -- */
.map-info-bar__cat-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}
.map-info-bar__cat-icon svg {
  width: 14px;
  height: 14px;
}

/* -- Source label -- */
body.page-forecast .map-info-bar__source {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}
[data-theme="light"] body.page-forecast .map-info-bar__source {
  color: rgba(0, 0, 0, 0.55);
}

/* -- Source partner pill (visible only in paired-offset ensemble: ciclo del partner ≠ parent) -- */
.map-info-bar__source-partner {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255, 200, 80, 0.55);
  background: rgba(255, 200, 80, 0.14);
  color: rgba(255, 220, 140, 0.95);
  border-radius: 10px;
  cursor: help;
  white-space: nowrap;
}
.map-info-bar__source-partner[hidden] {
  display: none !important;
}
[data-theme="light"] .map-info-bar__source-partner {
  border-color: rgba(180, 110, 0, 0.45);
  background: rgba(255, 200, 80, 0.22);
  color: rgba(140, 80, 0, 0.95);
}

/* -- Simple Dropdown (shared glassmorphism base) -- */
.simple-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: 320px;
  overflow-y: auto;
  background: rgba(15, 20, 30, 0.88);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 0;
  z-index: var(--fc-z-tendine);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.simple-dropdown.hidden {
  display: none;
}

/* Dropdown size modifiers */
.simple-dropdown--cat { min-width: 160px; }
.simple-dropdown--param { min-width: 220px; }
.simple-dropdown--source { min-width: 140px; }
.simple-dropdown--run { min-width: 200px; }

/* Dropdown item */
.simple-dropdown__item {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.12s;
}
.simple-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.simple-dropdown__item.active {
  color: var(--primary);
  font-weight: 600;
}
.simple-dropdown__item.dimmed {
  opacity: 0.5;
}
.simple-dropdown__item-detail {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: auto;
  white-space: nowrap;
}
.simple-dropdown__item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
}
.simple-dropdown__item-icon svg {
  width: 16px;
  height: 16px;
}

/* Light theme for simple-dropdown */
[data-theme="light"] .simple-dropdown {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .simple-dropdown__item {
  color: var(--text-primary);
}
[data-theme="light"] .simple-dropdown__item:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .simple-dropdown__item.active {
  color: var(--primary);
}
[data-theme="light"] .simple-dropdown__item-detail {
  color: rgba(0, 0, 0, 0.4);
}

/* Mobile: right-align rightmost dropdowns */
@media (max-width: 600px) {
  .simple-dropdown--run,
  .simple-dropdown--source {
    left: auto;
    right: 0;
  }
}

/* -- Chip "Altro…" -- */
body.page-forecast .quick-param-chip--more {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
}
body.page-forecast .quick-param-chip--more:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] body.page-forecast .quick-param-chip--more {
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--text-secondary);
  background: transparent;
}
[data-theme="light"] body.page-forecast .quick-param-chip--more:hover {
  border-color: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.04);
}

/* -- Params Flyout (Simple mode) -- */
.simple-params-flyout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--fc-z-elenco-parametri);
  background: rgba(15, 20, 30, 0.92);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  overflow-y: auto;
  animation: simpleFlyoutSlideUp 0.2s ease-out;
}
.simple-params-flyout.hidden {
  display: none;
}
.simple-flyout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: rgba(15, 20, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1;
}
.simple-flyout__title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.simple-flyout__close {
  all: unset;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.simple-flyout__close:hover {
  color: white;
}
.simple-flyout__body {
  padding: 8px 0 16px;
}
.simple-flyout__cat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
}
.simple-flyout__cat-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
}
.simple-flyout__cat-icon svg {
  width: 14px;
  height: 14px;
}
.simple-flyout__param {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px 8px 36px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: background 0.12s;
}
.simple-flyout__param:hover {
  background: rgba(255, 255, 255, 0.08);
}
.simple-flyout__param.active {
  background: var(--primary);
  color: white;
  font-weight: 600;
}

/* Flyout — light theme */
[data-theme="light"] .simple-params-flyout {
  background: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .simple-flyout__header {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .simple-flyout__title {
  color: var(--text-primary);
}
[data-theme="light"] .simple-flyout__close {
  color: var(--text-hint);
}
[data-theme="light"] .simple-flyout__close:hover {
  color: var(--text-primary);
}
[data-theme="light"] .simple-flyout__cat-label {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .simple-flyout__param {
  color: var(--text-primary);
}
[data-theme="light"] .simple-flyout__param:hover {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .simple-flyout__param.active {
  background: var(--primary);
  color: white;
}

/* ============ DESKTOP (≥768px) ============ */
@media (min-width: 768px) {

  /* Sidebar icon rail: glassmorphism */
  body.page-forecast .sidebar {
    background: rgba(15, 20, 30, 0.30);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }
  body.page-forecast .sidebar__collapse-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    height: auto;
    box-sizing: border-box;
  }
  body.page-forecast .sidebar__collapse-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
  }
  body.page-forecast .sidebar.collapsed .sidebar__cat-header__icon {
    color: rgba(255, 255, 255, 0.7);
  }
  body.page-forecast .sidebar.collapsed .sidebar__cat-header:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  body.page-forecast .sidebar.collapsed .sidebar__cat-header.active {
    border-left-color: #64b5f6;
  }

  /* Sidebar expanded overlay: stronger glass */
  body.page-forecast .sidebar.collapsed.open {
    background: rgba(15, 20, 30, 0.55);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
  }
  body.page-forecast .sidebar.collapsed.open .sidebar__cat-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
  }

  /* Light theme sidebar */
  [data-theme="light"] body.page-forecast .sidebar {
    background: rgba(255, 255, 255, 0.72);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }
  [data-theme="light"] body.page-forecast .sidebar__collapse-btn {
    color: var(--text-secondary);
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }
  [data-theme="light"] body.page-forecast .sidebar__collapse-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
  }
  [data-theme="light"] body.page-forecast .sidebar.collapsed .sidebar__cat-header__icon {
    color: var(--text-secondary);
  }
  [data-theme="light"] body.page-forecast .sidebar.collapsed .sidebar__cat-header:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  [data-theme="light"] body.page-forecast .sidebar.collapsed.open {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
  }
  [data-theme="light"] body.page-forecast .sidebar.collapsed.open .sidebar__cat-header {
    background: rgba(0, 0, 0, 0.03);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
  }
}

/* ============ MOBILE (<768px) ============ */
@media (max-width: 767px) {
  /* Bottom nav: glassmorphism */
  body.page-forecast .bottom-nav {
    background: rgba(15, 20, 30, 0.35);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
  }
  body.page-forecast .bottom-nav__item {
    color: rgba(255, 255, 255, 0.6);
  }
  body.page-forecast .bottom-nav__item.active {
    color: #90caf9;
  }
  [data-theme="light"] body.page-forecast .bottom-nav {
    background: rgba(255, 255, 255, 0.72);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  [data-theme="light"] body.page-forecast .bottom-nav__item {
    color: var(--text-secondary);
  }
  [data-theme="light"] body.page-forecast .bottom-nav__item.active {
    color: var(--primary);
  }

  /* Mappa a tutto schermo (l'altezza la decide la regola nella sezione 2) */
  body.page-forecast .app-layout {
    overflow: hidden;
  }
  body.page-forecast .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  body.page-forecast .card--map {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
  }
  body.page-forecast .map-container {
    flex: 1;
    aspect-ratio: auto;
    overflow: hidden;
    position: relative;
  }
  body.page-forecast .map-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
  }
  /* Bottom-bar above bottom-nav, compact single row */
  body.page-forecast .bottom-bar {
    bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
    display: flex;
    align-items: center;
  }
  body.page-forecast .bottom-bar .controls {
    flex-shrink: 0;
    gap: 3px;
    padding: 3px 5px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  body.page-forecast .bottom-bar .controls .btn--primary {
    width: 36px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
  }
  body.page-forecast .bottom-bar .controls .btn--primary svg {
    width: 20px;
    height: 20px;
  }
  body.page-forecast .bottom-bar .controls .btn--icon:not(.btn--primary) {
    width: 28px;
    height: 28px;
    min-width: 44px;
    min-height: 44px;
  }
  body.page-forecast .bottom-bar .controls .btn--icon:not(.btn--primary) svg {
    width: 16px;
    height: 16px;
  }
  body.page-forecast .play-speed-label {
    bottom: -2px;
    right: -4px;
  }
  body.page-forecast .bottom-bar .timeline {
    min-width: 0;
    border-top: none;
    padding: 2px 6px 4px;
  }
  body.page-forecast .app-main {
    padding-bottom: 0;
  }
  /* Legend above bottom-bar + bottom-nav on mobile */
  body.page-forecast .legend-container--overlay {
    bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 94px);
  }

  /* Map info bar: prevent toolbar controls from overflowing */
  body.page-forecast .map-info-bar__right {
    max-width: 100%;
    flex-shrink: 1;
  }
  /* Hide less-essential toolbar controls on mobile */
  body.page-forecast .map-info-bar .basemap-flavor,
  body.page-forecast .map-info-bar .contour-select {
    display: none !important;
  }
  /* Il badge Valori+Opacita' non compare su mobile: mangiava ~47px di mappa
     (l'opacita' andava a capo per via del width:100%, due righe invece di una).
     Valori e' il bottone #values-btn nella toolbar; l'opacita' vive nel
     pannello impostazioni, allineata allo stesso valore. Triangoli e Nodi sono
     diagnostica WebGL da desktop. */
  body.page-forecast .map-info-bar .grid-toggles {
    display: none !important;
  }
  /* Mode toggle compact on mobile */
  body.page-forecast .map-info-bar .map-toolbar__mode .map-mode-btn span {
    display: none;
  }
}/* ========== Ore irrilevanti (mappa non generata: fenomeno fuori dominio) ========== */
/* Tick scrubber (modalità Semplice) */
.scrubber-tick.irrelevant {
  background: var(--text-hint);
  opacity: 0.28;
}

/* Pannello informativo sopra la mappa (pointer-events:none → pan/zoom passano) */
.map-irrelevant-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 17, 28, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--fc-z-velo-mappa);
  pointer-events: none;
}
[data-theme="light"] .map-irrelevant-overlay {
  background: rgba(245, 247, 250, 0.6);
}
.map-irrelevant-overlay.hidden {
  display: none;
}
.map-irrelevant-card {
  max-width: 340px;
  margin: 0 var(--spacing-md);
  padding: 20px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
  color: var(--text-primary);
}
.map-irrelevant-card__icon {
  color: var(--text-hint);
  margin-bottom: 8px;
}
.map-irrelevant-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin-bottom: 6px;
}
.map-irrelevant-card__reason {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.map-irrelevant-card__hint {
  font-size: var(--font-size-xs);
  color: var(--text-hint);
  line-height: 1.4;
}

.quick-params {
  touch-action: pan-x pan-y;
}

.quick-params input[type="range"] {
  touch-action: none;
}

/* ===== Il centro meteo sparisce dal titolo sul telefono (#942) =====
   23/09/2026. Marco: sul telefono basta la bandiera a dire di chi e' il
   modello, il nome del centro no. L'involucro `.info-model__centro` lo mette
   `forecast-topbar.js` intorno a « · MeteoSwiss», perche' `app.js` compone
   quel testo in un pezzo solo e mezzo nodo di testo non si nasconde col CSS.
   🪤 Sotto `body.page-forecast`: `analysis.html` usa la stessa barra e li' il
   titolo non e' affollato allo stesso modo. Su desktop non cambia niente.
   🔑 Il nome completo resta nell'`aria-label` del bottone, quindi chi usa un
   lettore di schermo continua a sentire «Modello: ICON-CH1 · MeteoSwiss». */
@media (max-width: 767px) {
  body.page-forecast .map-info-bar__model .info-model__centro { display: none; }
}

/* ===== La legenda si scosta a destra e lascia una linguetta (#941) =====
   23/09/2026, chiesto da Marco. Il gesto e la linguetta li governa
   `forecast-topbar.js`; qui c'e' solo l'aspetto. Tutto sotto i 768 px e sotto
   `body.page-forecast`: su desktop e su analysis.html non cambia niente.

   🪤 La legenda e' `pointer-events: none` (app.css:11697) per non rubare la
   maniglia del confronto. Un pannello che non riceve eventi non puo' ricevere
   nemmeno uno swipe, quindi sul telefono gli eventi si riaccendono. La
   maniglia resta afferrabile perche' `.compare-slider` ha `z-index: 11` e la
   legenda 10: le sta sopra, non sotto.

   🪤 Si scosta con `transform`, non con `right` o `width`: quelli fanno
   ricalcolare il layout a ogni fotogramma dell'animazione, `transform` no.
   `visibility: hidden` arriva a movimento finito (ritardo 0,22 s) e serve a
   togliere dalla lettura dello schermo e dal Tab una legenda che sta fuori
   dallo schermo; prima di quel momento deve restare visibile, altrimenti
   sparirebbe di colpo invece di scorrere via. */
@media (max-width: 767px) {
  body.page-forecast .legend-container--vertical.legend-container--overlay {
    pointer-events: auto;
    transition: transform 0.22s ease, visibility 0s linear 0s;
    /* 🪤 `touch-action` decide CHI prende il gesto, prima ancora che arrivi
       agli ascoltatori. La regola di #496 da' a `.legend-container`
       `pan-x pan-y`, cioe' dichiara che il trascinamento orizzontale e' del
       BROWSER: quando il browser se lo prende, il `touchend` puo' non arrivare
       mai (o arrivare come `touchcancel`) e il gesto qui non verrebbe mai
       deciso. Con `pan-y` il verticale resta al browser — serve, perche' la
       legenda alta scorre dentro di se' — e l'orizzontale torna a noi. Il
       pinch resta escluso come voleva #496: `pan-y` non comprende
       `pinch-zoom`. */
    touch-action: pan-y;
  }
  body.page-forecast .legend-container--vertical.legend-container--overlay.legend-container--via {
    transform: translateX(calc(100% + 12px));
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  /* Sul telefono la pasticca non c'e' piu' (scelta di Marco, 23/09/2026): gli
     stati sono due soli, legenda completa o legenda via con la linguetta.
     A tenerla fuori e' `forecast-topbar.js`, che toglie la classe
     `legend-container--collapsed` e riallinea `legend_collapsed`; questa regola
     e' la cintura, per il caso in cui `app.js` la rimetta per un istante
     durante un ridisegno. */
  body.page-forecast .legend-container--vertical .legend-mini {
    display: none !important;
  }

  /* Il bottone «Legenda»: in basso a sinistra, sopra la barra dei comandi
     dell'animazione (scelta di Marco, 25/09/2026, dopo aver provato la maniglia
     al bordo destro e non esserne stato convinto).
     🪤 Quella maniglia aveva un difetto che si e' visto solo col dito: nasceva
     nei primi ~24 px dal bordo, dove Android si prende il gesto «torna
     indietro» — lo swipe non arrivava alla pagina e partiva l'animazione di
     sistema, che sembrava un rimbalzo della mappa. Un bottone con una parola
     sopra toglie il problema alla radice: non c'e' nessun gesto da indovinare.
     Sta a 8 px sopra `--bottom-bar-height`, cioe' appena sopra la timeline. */
  body.page-forecast .legend-tab:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 8px;
    bottom: calc(var(--bottom-bar-height, 85px) + 8px);
    z-index: 10;
    height: 34px;
    padding: 0 12px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: rgba(15, 20, 28, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    cursor: pointer;
  }
  /* Lo stato si legge come su ogni altro comando della mappa: ACCESO =
     fondo pieno del colore primario, come `.map-toolbar__btn.active` fa per
     frecce del vento, isolinee e confini (app.css:7711). Prima la differenza
     era una sfumatura di opacita', cioe' un segnale debole — ed e' quello che
     ha fatto chiedere a Marco, il 25/09/2026, se non ci volesse una levetta.
     🔑 Una levetta non e' della famiglia giusta: in questa pagina gli
     `toggle-switch` vivono DENTRO i pannelli (particelle vento, impostazioni),
     in righe con l'etichetta a sinistra. Sulla mappa comandano i bottoni. */
  body.page-forecast .legend-tab:not(.legend-tab--spenta) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
  body.page-forecast .legend-tab--spenta {
    font-weight: 500;
  }
  body.page-forecast .legend-tab .legend-tab__testo { letter-spacing: 0.2px; }
  /* L'area di tocco resta piu' alta del disegno: 34 px di altezza diventano 46. */
  body.page-forecast .legend-tab:not([hidden])::before {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
  }
  [data-theme="light"] body.page-forecast .legend-tab.legend-tab--spenta {
    background: rgba(255, 255, 255, 0.94);
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  }
}
/* Chi ha chiesto meno movimento al sistema operativo non lo subisce qui:
   la legenda arriva e va via senza scorrere. E' gia' la convenzione di
   app.css (quattro regole con questa stessa media query). */
@media (prefers-reduced-motion: reduce) {
  body.page-forecast .legend-container--vertical.legend-container--overlay,
  body.page-forecast .legend-container--vertical.legend-container--overlay.legend-container--via {
    transition: none;
  }
}

/* ===== La descrizione del parametro in cima al pannello della mappa (#944) =====
   24/09/2026. Il pannello che si apre dal bottone dell'attribuzione (in basso a
   destra) non ripete piu' il nome del parametro in una riga della lista: lo dice
   in grassetto seguito da che cos'e'. I colori seguono quelli gia' usati dentro
   il pannello (`inter.css`: dd al 90% di bianco, dt al 50%), perche' il fondo
   e' scuro in tutti e due i temi. */
body.page-forecast .map-info-popover__desc {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  /* 🪤 Certe descrizioni sono paragrafi tecnici lunghi: quella di
     `precip_type` conta piu' di 600 caratteri e cita Steiner 1995. Misurato il
     24/09/2026 sull'A54: senza limite il pannello diventava alto 567 px su 694
     di schermo, l'82%. Con questo tetto le descrizioni corte non cambiano di
     un pixel e quelle lunghe scorrono dentro il loro riquadro. */
  max-height: 8.7em;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.page-forecast .map-info-popover__desc b {
  color: #fff;
  font-weight: 600;
}

/* (#941) Il tetto d'altezza della legenda verticale del telefono non e' piu'
   «100% - 122px»: segue la barra in basso misurata (--bottom-bar-height),
   regola nella sezione 2. */

/* Le colonne ripetute non si disegnano due volte (#941, 25/09/2026).
   `forecast-topbar.js` mette `legend-2d--colonne-ripetute` sul blocco le cui
   intestazioni di colonna dicono, parola per parola, quelle del blocco sopra —
   «Debole Moderata Forte» dei fenomeni convettivi contro quelle degli
   stratiformi. Scritte in obliquo costano 50 px, e su uno schermo da 694 px
   sono la differenza fra una legenda che si legge tutta e una da scorrere.
   Il titolo del gruppo resta, perche' e' l'unica cosa che distingue i due. */
@media (max-width: 767px) {
  body.page-forecast .legend-2d--colonne-ripetute .legend-2d__header > span:not(.legend-2d__group-title) {
    display: none;
  }
  body.page-forecast .legend-2d--colonne-ripetute .legend-2d__header {
    height: auto;
    min-height: 0;
    align-items: end;
  }
}

/* ===== L'unità di misura non si taglia piu' in cima (#941) =====
   25/09/2026, segnalato da Marco con una foto: nella legenda della temperatura
   il «°C» era tagliato a meta' dal bordo superiore.
   🪤 La causa non era il tetto della legenda ma un margine negativo: 
   `.legend-container--vertical .legend-bar__unit` ha `margin-top: -18px` per
   stare attaccata alla barra dei colori, e sopra di lei il contenitore aveva 8
   px di padding. I 10 px che mancavano finivano FUORI, e l'`overflow-y: auto`
   del contenitore li tagliava. Misurato: unita' a y351, contenitore a y360.
   🔑 E' la stessa lezione dell'area di tocco del 23/09: lo spazio per una cosa
   si conta DENTRO il contenitore che la ritaglia, non sullo schermo.
   Si da' al contenitore il padding che il margine negativo si mangia. */
/* (La regola vive nel blocco <style> di forecast.html, dove il padding del
   telefono e' definito con una specificita' piu' alta: la si corregge li'.) */

/* ===== #921 — la pasticca della legenda lascia libero il bottone «©» =====
   28/09/2026. Su desktop, a legenda chiusa, la pasticca `.legend-mini` e
   `#map-info-btn` finivano sullo stesso bordo destro (x 1358 a 1366x768) e si
   sovrapponevano per 26x13 px, col bottone sopra. Spostata a sinistra di 26 px
   (il bottone) + 8 di respiro. Sul telefono la pasticca non c'e' (vedi sopra),
   quindi la regola vale solo da 768 px in su. Misurato a 1024, 1366 e 1920:
   nessuna sovrapposizione, 8 px fra i due. */
@media (min-width: 768px) {
  body.page-forecast .legend-container--vertical.legend-container--collapsed .legend-mini {
    margin-right: 34px;
  }
}


/* ==========================================================================
   1b. VENUTE DA home.css (11/10/2026, #1133 punto 4.3)
   ==========================================================================
   forecast.html non carica piu' home.css (154 KB, quasi tutto della home).
   Qui le sole regole che possono toccare questa pagina: intestazione e
   pie' di pagina del sito (.home-header, .home-footer), .skeleton,
   .home-badge-live. Criterio: classi presenti nei sorgenti della pagina
   (meteo-mobile-tests/strumenti-peso/estrai_home.py). Chi cambia queste
   regole in home.css le cambia anche qui. */

.home-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--spacing-md);
  /* #90 WCAG AA: --primary (#1a73e8) è troppo chiaro per reggere il bianco
     attenuato di nav/tagline (3.7:1 / 2.99:1). Blu header dedicato più profondo
     (#0b57d0, stessa famiglia Material Blue 700) → nav/tagline a opacity passano
     ~5:1. Il brand #1a73e8 resta su link/accenti altrove. */
  background-color: #0b57d0;
  color: white;
  box-shadow: var(--shadow-md);
}

.home-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-lg);
  font-weight: 500;
  text-decoration: none;
  color: white;
  flex-shrink: 0;
}

.home-header__brand-logo {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
}

.home-header__nav {
  display: none;
  list-style: none;
  gap: var(--spacing-xs);
  margin: 0 var(--spacing-lg);
}

.home-header__nav a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.85); /* #90 WCAG AA: 5.08:1 sul blu header #0b57d0 (falliva 3.7:1 su #1a73e8) */
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  /* Le etichette non vanno a capo dentro la barra — 16/09/2026, #802.
     Senza questa riga quattro voci si spezzavano su due righe dentro il blu
     («Tempo reale», «Rischio calore», «Confronto modelli», «Calore Sicuro»),
     perche' qui si ereditava white-space:normal. La barra sembrava piu' stretta
     (1084 px invece di 1262) ma era solo testo accartocciato. */
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.home-header__nav a:hover,
.home-header__nav a:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.home-header__nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
}

.home-header__altro {
  position: relative;
  display: flex;
  align-items: center;
}

.home-header__altro summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  white-space: nowrap;
  cursor: pointer;
  list-style: none; /* via il triangolino nativo (Firefox) */
  transition: background var(--transition-fast), color var(--transition-fast);
}

.home-header__altro summary::-webkit-details-marker {
  display: none; /* via il triangolino nativo (Safari, Chrome vecchi) */
}

.home-header__altro summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--transition-fast);
}

.home-header__altro summary:hover,
.home-header__altro summary:focus-visible,
.home-header__altro details[open] summary {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.home-header__altro details[open] summary::after {
  transform: rotate(180deg);
}

.home-header__altro ul {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1200; /* dentro lo stacking context dell'header, che sta a 1100 */
  min-width: 240px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.home-header__altro ul a {
  display: block;
  padding: 8px 12px;
  color: var(--text-primary);
  border-radius: 6px;
}

.home-header__altro ul a:hover,
.home-header__altro ul a:focus-visible {
  background: var(--bg-secondary, rgba(127, 127, 127, 0.12));
  color: var(--text-primary);
}

.home-header__altro ul a[aria-current="page"] {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 600;
}

.home-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.home-header .auth-login-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.home-header .auth-login-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}

.home-header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

.home-header__hamburger:hover {
  background: rgba(255, 255, 255, 0.15);
}

.home-header__theme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.home-header__theme:hover {
  background: rgba(255, 255, 255, 0.15);
}

.home-header__theme svg {
  width: 22px;
  height: 22px;
}

.home-header__mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 1099;
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-sm) 0;
  list-style: none;
  /* Il menu e' fixed: cio' che deborda dal fondo dello schermo NON si
     raggiunge scorrendo la pagina, sparisce e basta. Con 17 voci su un
     telefono si perdevano le ultime tre (31/08/2026: «Eclissi», «Avvisi sul
     telefono», «Impostazioni» invisibili su uno schermo da 740 px utili).
     Serve che scorra da se'. 100dvh dopo 100vh: i browser che non conoscono
     l'unita' dinamica tengono la prima, gli altri la seconda — che e' quella
     giusta quando le barre del browser compaiono e scompaiono. */
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  /* Arrivati in fondo all'elenco, lo scorrimento non prosegue sulla pagina
     sotto: il menu e' un pannello, non un pezzo del documento. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.home-header__mobile-nav.open {
  display: block;
}

.home-header__mobile-nav a {
  display: block;
  padding: 12px var(--spacing-lg);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-md);
  transition: background var(--transition-fast);
}

.home-header__mobile-nav a:hover {
  background: var(--bg-secondary);
}

.home-header__mobile-auth {
  border-top: 1px solid var(--border, rgba(127, 127, 127, .25));
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

.home-header__mobile-auth-name {
  display: block;
  padding: 4px var(--spacing-lg) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.home-header__mobile-auth-btn {
  display: block;
  width: 100%;
  padding: 12px var(--spacing-lg);
  background: none;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.home-header__mobile-auth-btn:hover {
  background: var(--bg-secondary);
}

.home-header .auth-header-container {
  display: none;
}

@media (min-width: 768px) {
  .home-header .auth-header-container {
    display: block;
  }
}

@media (min-width: 1260px) {
  .home-header__nav {
    display: flex;
  }
  .home-header__hamburger {
    display: none;
  }
}

.home-footer {
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

.home-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

.home-footer__nav a {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.18s ease;
}

.home-footer__nav a:hover { color: var(--primary); }

.skeleton {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.home-header a:focus-visible,
.home-header button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.home-header__tagline {
  display: none;
  font-size: 10px;
  opacity: 0.8; /* #90 WCAG AA: 0.7 = 2.99:1; a 0.8 su header #0b57d0 = 4.65:1 (resta più tenue della nav a 0.85) */
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 1px;
}

@media (min-width: 768px) {
  .home-header__tagline { display: block; }
  .home-header__brand-text { display: flex; flex-direction: column; }
}

.home-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(76, 175, 80, 0.9);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--spacing-sm);
  vertical-align: middle;
}

/* ==========================================================================
   2. VENUTE DAL <style> DI forecast.html
   ========================================================================== */
/* ============================================================
   #803 — quello che cambia quando l'intestazione smette di
   galleggiare
   ============================================================
   La vecchia .app-header di questa pagina era un overlay
   `position: fixed` alto 44 px sopra una mappa a tutto schermo
   (app.css:14379): occupava ZERO altezza nel flusso. Tre numeri di
   app.css erano tarati su quel fatto, e con l'intestazione unica —
   che sta nel flusso e alta var(--header-height) — sbagliano tutti e
   tre. Le correzioni stanno qui e non in app.css per due motivi: sono
   geometrie di QUESTA pagina, e un bump di app.css riscriverebbe il
   `?v=` in una trentina di file che altre sessioni stanno modificando.

   🪤 Il prefisso `body.page-forecast` non e' decorativo: le regole di
   app.css hanno quella stessa specificita', e una regola nuda
   `.app-layout` perderebbe il confronto.
   ============================================================ */

/* 1. Il contenitore chiedeva tutta la finestra perche' sopra non c'era
      niente. Ora sopra c'e' l'intestazione: senza sottrarla la pagina
      scorre in verticale di esattamente la sua altezza, ed e' la pagina
      con meno spazio verticale di tutto il sito (misurato:
      scrollHeight = clientHeight). */
@media (min-width: 768px) {
  body.page-forecast .app-layout { height: calc(100vh - var(--header-height)); }
}
@media (max-width: 767px) {
  body.page-forecast .app-layout {
    height: calc(100vh - var(--header-height));
    /* 🪤 `dvh` NON basta dentro l'app Android (TWA). Misurato sul telefono
       il 02/09/2026: window.innerHeight 750 px, ma 100dvh = 100vh = 806 px.
       I 56 px di differenza sono la barra di navigazione di sistema, sotto la
       quale l'app disegna (targetSdkVersion 36 + Android 15 = edge-to-edge
       obbligatorio). Con `dvh` la barra dei controlli, alta 94 px, ne perdeva
       56 e restava tagliata a meta'.
       `svh` e' l'altezza GARANTITA visibile e li' vale 750, esatto.
       🔑 `env(safe-area-inset-bottom)` NON serve: nella TWA vale 0. */
    height: calc(100svh - var(--header-height));
  }
}

/* 2. UNA barra sola sopra la mappa (21/09/2026)
   ------------------------------------------------
   Fino a ieri sopra la mappa c'erano DUE fasce sovrapposte: il gruppo dei
   comandi di pagina (y 16→74) e questa riga di informazioni, spinta a
   `top: 80px` per scavalcarlo. A 1366 px in modo Pro diventavano TRE,
   perche' la toolbar di destra non entrava e andava a capo da sola: la
   chrome arrivava a y=226 e mangiava mappa. Ora le zone stanno tutte
   qui dentro, in riga: [comandi] [titolo] [strumenti].
   Misurato: a 1366 px in Pro la chrome finisce a y=109 invece di 226. */
body.page-forecast .map-info-bar {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0 10px;
  min-height: 44px;
  /* 🪤 fondo OPACO, non vetro sfocato. #multi-config-panel (il pannello del
     confronto multiplo) e' `position: fixed` e vive dentro questa barra: un
     `backdrop-filter` su un antenato gli cambia il containing block, e le
     coordinate di finestra che app.js gli calcola con getBoundingClientRect
     (app.js:15504) finirebbero fuori posto. */
  background: rgba(12, 17, 24, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* la fascia e' piena, quindi intercetta lei i clic: app.css la lasciava
     trasparente ai clic perche' erano pastiglie separate su mappa viva. */
  pointer-events: auto;
  /* 🪤 app.css:14188 la mette a z-index 5, e un elemento posizionato con
     z-index crea un contesto di impilamento: tutto cio' che sta DENTRO la
     barra resta a 5, per quanto alto sia il suo z-index. Il pannello
     «Altro» finiva cosi' sotto la legenda, che sta a 10 (app.css:11636).
     20 la porta sopra la legenda e la lascia sotto la barra laterale
     (300) e il suo pannello sovrapposto. */
  z-index: var(--fc-z-barra-titolo);
}
body.page-forecast .map-info-bar > * { pointer-events: auto; }

/* ============================================================
   Tema chiaro della barra del titolo (#1132 punto 3.1, 10/10/2026).
   La barra qui sopra e' una fascia scura piena dal 21/09, ma in tema
   chiaro restavano attive le regole di app.css (≈14555) pensate per il
   titolo a pastiglia sulla mappa: zona del titolo bianca al 60% e
   pulsanti bianchi al 65%. Sopra la fascia scura davano un grigio medio
   con testo scuro (illeggibile), e la sfumatura di .titolo-tagliato
   passava dal grigio al nero. Ora la fascia chiara e' PIENA (con la
   trasparenza si leggevano i nomi delle citta' sotto il titolo) e
   dentro ricalca il tema scuro: titolo senza fondo con la cornice
   sottile, pulsanti trasparenti.
   🪤 Le righe del pannello «Strumenti» sono ANCHE loro
   .map-toolbar__btn dentro la barra: la regola dei pulsanti le esclude
   con :not(.map-more-panel *), o le spegnerebbe.
   ============================================================ */
html[data-theme="light"] body.page-forecast .map-info-bar {
  background: #fff;
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
/* il riquadro del titolo: in scuro cornice bianca 0,12 e un'ombra che
   sulla fascia scura non si vede; in chiaro l'ombra si vedrebbe */
html[data-theme="light"] body.page-forecast .map-info-bar__left {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: none;
}
html[data-theme="light"] body.page-forecast .pagina__controlli--in-barra {
  border-right-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] body.page-forecast #map-info-bar #sidebar-toggle,
html[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__btn:not(.map-more-panel *) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  color: var(--text-secondary);
}
html[data-theme="light"] body.page-forecast .map-more-btn[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] body.page-forecast #map-info-bar #geo-btn:not(.map-more-panel *) {
  color: var(--text-secondary);
}
/* Standard/Nativa (Pro): app.css (≈14619) dava il grigio anche al
   pulsante ATTIVO, che ha il fondo blu: icona a 1,34:1 */
html[data-theme="light"] body.page-forecast .map-info-bar .map-toolbar__mode .map-mode-btn.active {
  color: #fff;
}
/* Il pannello «Strumenti» in chiaro, come la legenda */
html[data-theme="light"] body.page-forecast .map-more-panel {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] body.page-forecast .map-more-panel__info {
  border-bottom-color: rgba(0, 0, 0, 0.10);
  color: rgba(0, 0, 0, 0.68);
}
html[data-theme="light"] body.page-forecast .map-more-panel__titolo { color: rgba(0, 0, 0, 0.6); }
html[data-theme="light"] body.page-forecast .map-more-panel__campo { color: rgba(0, 0, 0, 0.7); }
html[data-theme="light"] body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta] {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}
html[data-theme="light"] body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta]:hover {
  background: rgba(0, 0, 0, 0.09);
  color: var(--text-primary);
}
html[data-theme="light"] body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta].active,
html[data-theme="light"] body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta][aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 🔑 22/09/2026: il riquadro del valore sotto il mouse sta a z-index 100
   (app.css) e vive dentro #map-container, che e' `position: relative` ma
   SENZA z-index: non crea contesto di impilamento, quindi quel 100 va a
   competere direttamente col 20 della barra e le passa sopra, coprendo il
   titolo. Il riquadro e' contenuto della mappa, la barra e' il telaio
   della pagina: il telaio sta sopra. 15 lo tiene comunque sopra la legenda
   (che sta a 10, app.css:11636), dove serve, perche' il cursore ci passa
   sopra. */
body.page-forecast #hover-tooltip { z-index: var(--fc-z-fumetti-mappa); }

/* Le tre zone. Il titolo e' l'unico che cede spazio. */
body.page-forecast .pagina__controlli--in-barra {
  position: static;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 0;
  background: none;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-forecast .map-info-bar__left {
  flex: 1 1 auto;
  min-width: 0;
  /* app.css:14239 lo mette a `max-content`: cosi' non si restringerebbe mai */
  width: auto;
  flex-wrap: nowrap;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  text-shadow: none;
}
body.page-forecast .map-info-bar__right {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 10px;
}
body.page-forecast .map-info-bar__headline,
body.page-forecast .map-info-bar__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
}
body.page-forecast .map-info-bar__when {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
/* 🪤 La zona del titolo non taglia il testo: i segmenti del titolo aprono
   i menu a tendina (#simple-*-dropdown, `position:absolute` ancorati ai
   wrapper qui dentro) e un `overflow: hidden` li decapiterebbe. Il taglio
   c'era solo in Pro, dove quei segmenti non erano cliccabili. */
body.page-forecast .map-info-bar .map-toolbar__btn,
body.page-forecast .map-info-bar .map-toolbar__share-btn,
body.page-forecast .map-info-bar .map-toolbar__compare-btn,
body.page-forecast .map-info-bar .map-toolbar__fullscreen-btn,
body.page-forecast .map-info-bar .map-toolbar__gif-btn,
body.page-forecast .map-info-bar .map-toolbar__wind-btn {
  background: transparent;
  border-color: transparent;
}
body.page-forecast .map-info-bar .map-toolbar__btn:hover,
body.page-forecast .map-info-bar .map-toolbar__share-btn:hover,
body.page-forecast .map-info-bar .map-toolbar__compare-btn:hover,
body.page-forecast .map-info-bar .map-toolbar__fullscreen-btn:hover,
body.page-forecast .map-info-bar .map-toolbar__gif-btn:hover,
body.page-forecast .map-info-bar .map-toolbar__wind-btn:hover {
  background: rgba(255, 255, 255, 0.10);
}

/* Compressione a gradini, prima di spostare qualcosa nel menu «Altro»:
   le due scritte Standard/Nativa lasciano le sole icone. */
@media (max-width: 1600px) {
  body.page-forecast .map-info-bar .map-mode-btn span { display: none; }
}

/* Menu «Altro» — il contenitore dei comandi che non entrano in riga.
   Chi ci finisce dentro lo decide forecast-topbar.js misurando. */
body.page-forecast .map-toolbar__more-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
body.page-forecast .map-more-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--fc-z-tendine);
  display: flex;
  background: rgba(12, 17, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  /* i comandi spostati qui possono avere a loro volta un pannello ancorato
     (particelle vento, confronto modelli): non vanno tagliati */
  overflow: visible;
}
/* Le parti del titolo uscite dalla riga, scritte in cima al pannello: sul
   telefono il tooltip non esiste, e Marco ha chiesto che niente sparisca. */
body.page-forecast .map-more-panel__info {
  flex: 1 0 100%;
  margin: 0 0 4px;
  padding: 0 2px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}
body.page-forecast .map-more-panel.hidden { display: none; }
body.page-forecast .map-more-btn.hidden { display: none; }
body.page-forecast .map-more-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.16);
}

/* Icona della categoria e nome del parametro nel titolo: testo, non
   pulsanti (#1131 punto 2.5). Stessa disposizione dei segmenti cliccabili
   vicini, senza cursore a mano ne' sottolineatura. */
body.page-forecast .map-info-bar__segment {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: inherit;
  color: inherit;
  line-height: inherit;
}

/* «Altro…» in modo Semplice sul computer (#1131 punto 2.5): apre la
   barra laterale «Mappe» sovrapposta alla mappa, come fa gia' la barra
   ridotta a icone in Pro (app.css, «Expanded overlay»). Prima in Semplice
   la barra era sempre `display: none` (app.css, «Simple mode: hide
   sidebar on desktop») e l'elenco completo stava in un riquadro a parte,
   un quarto modo di scegliere il parametro. */
@media (min-width: 768px) {
  body.page-forecast.mode-simple .sidebar.open {
    display: flex;
    width: var(--sidebar-width);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: var(--fc-z-barra-laterale-aperta);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.35);
  }
}

body.page-forecast .model-selector__group-label--consigliati,
body.page-forecast .simple-model-dropdown__group--consigliati {
  color: var(--primary);
}

/* ============================================================
   «Mappe» e «Strumenti»: due pulsanti con il nome — 08/10/2026
   ============================================================
   #1131 punto 2.1. I due pulsanti ai lati del titolo erano due icone
   mute (cursori a sinistra, «⋮» a destra). Ora hanno il nome scritto: sul
   computer accanto all'icona, sul telefono sotto (blocco 6). Il nome
   «Mappe» si vede solo sul telefono: sopra i 768 px #sidebar-toggle e'
   nascosto perche' la barra laterale e' sempre aperta. */
body.page-forecast .map-info-bar .barra-con-nome {
  width: auto;
  gap: 6px;
  padding: 0 10px;
}
body.page-forecast .barra-con-nome__testo {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* Il pannello «Strumenti»: gruppi con titolo e righe icona + testo.
   I gruppi li crea forecast-topbar.js (GRUPPI), il testo delle righe sta
   in `data-etichetta` e si vede SOLO qui dentro: in riga, sul computer,
   gli stessi comandi restano icone. */
body.page-forecast .map-more-panel {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
  /* 400 e non 340: a 340 le celle erano di 155 px e «Frecce del vento»
     e «Animazione GIF» uscivano troncate (misurato l'08/10 a 1280 px). */
  width: min(400px, calc(100vw - 16px));
  max-width: none;
  padding: 10px;
  /* 🪤 prima era `overflow: visible` per non tagliare i sotto-pannelli
     ancorati. Ora il pannello scorre (l'altezza massima la scrive
     forecast-topbar.js, misuraPannello) e i due sotto-pannelli diventano
     `fixed` qui sotto, che e' l'unico modo di non farli tagliare. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.page-forecast .map-more-panel__gruppo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
body.page-forecast .map-more-panel__gruppo[hidden] { display: none; }
body.page-forecast .map-more-panel__titolo {
  margin: 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
body.page-forecast .map-more-panel__voci {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
body.page-forecast .map-more-panel__gruppo--modo .map-more-panel__voci {
  display: flex;
  justify-content: center;
}
/* Gli involucri non contano: i loro bottoni diventano celle della griglia.
   Il riferimento di posizione dei sotto-pannelli non serve piu', perche'
   dentro il pannello quelli sono `fixed`. */
body.page-forecast .map-more-panel__voci > .map-toolbar__compare-wrap,
body.page-forecast .map-more-panel__voci > .wind-settings-wrap,
body.page-forecast .map-more-panel__voci > .fronts-overlay-wrap { display: contents; }
/* I comandi composti (menu, Standard/Nativa, griglia) prendono la riga intera,
   e cosi' le etichette dei due menu a tendina (forecast-topbar.js, CAMPI). */
body.page-forecast .map-more-panel__voci > .map-more-panel__campo,
body.page-forecast .map-more-panel__voci > select,
body.page-forecast .map-more-panel__voci > .map-toolbar__mode,
body.page-forecast .map-more-panel__voci > .grid-toggles { grid-column: 1 / -1; }
body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta]:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}
body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta].active,
body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta][aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta] svg { flex: 0 0 auto; }
body.page-forecast .map-more-panel .map-more-panel__voci [data-etichetta]::after {
  content: attr(data-etichetta);
  /* 🪤 app.css (blocco «bersagli da 44 px» dei telefoni) usa lo stesso
     ::after di questi bottoni come area di tocco invisibile: assoluto,
     centrato con translate, 44x44. Senza questo reset il testo finiva
     sopra l'icona. Le righe qui sono gia' alte 44 px. */
  position: static;
  transform: none;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-forecast .map-more-panel__campo {
  margin: 4px 2px -2px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
}
body.page-forecast .map-more-panel__campo[hidden] { display: none; }
body.page-forecast .map-more-panel__voci > select { min-height: 40px; }
/* Standard / Nativa (solo Pro) nel pannello: le scritte tornano (sotto i
   1600 px la regola in cima le toglie per far posto in riga) e i due
   bottoni dividono la riga a meta', alti 44 px come le altre righe. */
body.page-forecast .map-more-panel .map-toolbar__mode {
  display: flex;
  gap: 4px;
  padding: 0;
  background: none;
  border: 0;
}
body.page-forecast .map-more-panel .map-toolbar__mode .map-mode-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 14px;
}
body.page-forecast .map-more-panel .map-toolbar__mode .map-mode-btn span { display: inline; }
/* I due sotto-pannelli ancorati, quando il loro comando sta qui dentro:
   `fixed` e appoggiati sopra il pannello stesso (stesse misure, scritte da
   forecast-topbar.js in quattro variabili). Vedi misuraPannello(). */
/* Il pannello del confronto 4/6/8 mappe era gia' `fixed`, ma ancorato al
   bottone e largo 260 px: dentro «Strumenti» finiva schiacciato in un
   angolo, sopra le righe (collaudo dell'08/10 sul telefono). Si appoggia
   sopra il pannello come gli altri due.
   🪤 `!important` perche' _multiOpenConfig() (app.js) scrive top, right,
   left e max-height nello stile in linea. */
body.page-forecast .map-more-panel .multi-config-panel {
  top: var(--strumenti-top, 160px) !important;
  left: var(--strumenti-left, 8px) !important;
  right: auto !important;
  width: var(--strumenti-larghezza, calc(100vw - 16px));
  max-width: none;
  max-height: var(--strumenti-altezza, 60vh) !important;
  z-index: var(--fc-z-pannelli-strumenti);
}
body.page-forecast .map-more-panel .model-compare-dropdown,
body.page-forecast .map-more-panel .wind-settings-panel {
  position: fixed;
  top: var(--strumenti-top, 160px);
  left: var(--strumenti-left, 8px);
  right: auto;
  bottom: auto;
  width: var(--strumenti-larghezza, calc(100vw - 16px));
  min-width: 0;
  max-width: none;
  max-height: var(--strumenti-altezza, 60vh);
  overflow-y: auto;
  z-index: var(--fc-z-pannelli-strumenti);
}
/* Le parti del titolo che hanno lasciato la riga. Sono testo, non comandi:
   nel pannello «Altro» non avrebbero senso, quindi spariscono dalla riga e
   il loro contenuto finisce nel tooltip del titolo (forecast-topbar.js). */
body.page-forecast .map-info-bar .fuori-riga { display: none !important; }
/* Quando il titolo non ci sta nemmeno dopo aver ceduto tutto il cedibile,
   la fine sfuma invece di essere tranciata: un taglio netto a meta' parola
   sembra un errore di resa, la sfumatura dice «il testo continua». */
body.page-forecast .map-info-bar__left.titolo-tagliato {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

/* Il fuoco della tastiera si vede anche qui dentro. 21/09/2026, collaudo.
   L'unica regola che disegna l'anello e' «.btn:focus-visible» (app.css), e
   nella barra solo #geo-btn ha la classe .btn: gli altri SEDICI comandi
   raggiungibili col Tab (i due del badge Semplice/Pro, i cinque segmenti
   del titolo, il fuso orario, condividi, i due confronti, schermo intero,
   valori, i due modi mappa, il bottone «Altro») restavano senza alcun
   segno visibile, con outline-style: none.
   🪤 L'anello e' INTERNO (outline-offset negativo): .map-info-bar__left ha
   overflow: hidden in modo Pro e sotto i 768 px, e un anello esterno
   verrebbe tranciato di netto.
   🪤 Il colore e' currentColor e non un colore fisso: nella barra scura il
   testo e' chiaro, sulle pasticche chiare del titolo e' scuro, quindi
   l'anello resta leggibile in tutti e due i casi e in tutti e due i temi. */
body.page-forecast .map-info-bar :is(button, select, input, a, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  /* 🪤 offset ZERO, non negativo e non positivo: i segmenti del titolo sono
     alti 17 px, con -2px l'anello entrava dentro le lettere; con un offset
     positivo verrebbe tranciato da .map-info-bar__left, che ha
     overflow: hidden. A filo del bordo sta dentro la zona (alta 26 px) e
     non tocca il testo. */
  outline-offset: 0;
}

/* In modo presentazione la barra torna leggibile col mouse sopra.
   app.css:12286 lo fa con «body.presentation-mode .map-toolbar:hover», e
   .map-toolbar non esiste piu' dal 21/09: la barra unica e' .map-info-bar.
   Senza questa riga la barra restava a opacita' 0,7 per sempre, mentre la
   legenda risaliva a 1 perche' ha una regola sua. */
body.page-forecast.presentation-mode .map-info-bar:hover { opacity: 1; }

/* 3. Il bottone che chiude la barra laterale si scansava dall'intestazione
      che gli stava sopra. Adesso non gli sta piu' sopra nessuno. */
@media (min-width: 768px) {
  body.page-forecast .sidebar__collapse-btn { padding-top: 0; }
}

/* 4. I comandi parlano la lingua di QUESTA pagina.
      Il riquadro di vetro proprio non serve piu': dal 21/09/2026 stanno
      dentro la barra, che ha gia' il suo fondo. Resta il rivestimento del
      bottone tondo: il suo fondo trasparente veniva da «.app-header
      .btn--icon» (app.css:1716), e senza resterebbe il fondo bianco di
      default del browser con l'icona bianca sopra. */
body.page-forecast .pagina__controlli .btn--icon {
  color: white;
  background: transparent;
}
body.page-forecast .pagina__controlli .btn--icon:hover {
  background: rgba(255, 255, 255, 0.10);
}

/* Il contatore «utenti online» resta nel markup spento: senza questo
   elemento online-widget.js ripiega su un badge flottante in basso a
   destra, cioe' sopra la mappa. */
.online-widget-target { display: none; }

.map-watermark{
  position:absolute; left:10px; bottom:66px; 
  padding:3px 8px; border-radius:6px;
  background:rgba(13,17,23,.5); color:#fff;
  font:600 11px/1.25 Inter, system-ui, -apple-system, Arial, sans-serif;
  letter-spacing:.2px; white-space:nowrap;
  pointer-events:none; user-select:none;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:.82;
}
@media (max-width:640px){ .map-watermark{ left:8px; bottom:8px; font-size:10px; padding:2px 6px; } }
/* #1131 punto 2.13: sul telefono stava nell'angolo in basso a sinistra,
   sotto i comandi del tempo; ora li' c'e' la barra a tutta larghezza e
   la scritta copriva le ore. Sale sopra la barra, accanto al ©.
   --fc-barra-h = altezza di .bottom-bar, misurata da app.js. */
@media (max-width: 767px) {
  body.page-forecast .map-watermark {
    left: auto;
    right: 58px;
    bottom: calc(var(--fc-barra-h, 92px) + 14px);
  }
}

/* ============================================================
   5. La legenda torna leggibile — 21/09/2026
   ============================================================
   La legenda verticale aveva `background: none` scritto apposta
   (app.css:11665, commento «Transparent — no background panel», senza un
   perche'). L'unica difesa contro i toponimi della mappa sotto era una
   doppia ombra nera sul testo, e sopra le citta' non bastava. In piu' le
   intestazioni delle colonne (Sereno, Poco nuv., Debole, Moderata…) erano
   scritte a 10 px e ruotate di -45 gradi (app.css:12005).
   Qui la legenda ritrova il pannello — lo stesso vetro della barra in alto
   — e le intestazioni si raddrizzano. Col pannello le ombre non servono
   piu' e vanno via: sono rumore su fondo pieno.
   🪤 Il `pointer-events: none` di app.css:11670 ha una ragione: la legenda
   non deve rubare la maniglia dello slider quando confronti due modelli.
   Resta, e i clic si riaccendono solo sul bottone che apre e chiude.
   🪤 Solo `body.page-forecast`: la stessa legenda e' usata da analysis.html.
   ============================================================ */
body.page-forecast .legend-container--vertical.legend-container--overlay:not(.legend-container--collapsed) {
  background: rgba(12, 17, 24, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
body.page-forecast .legend-container--vertical .legend-mini,
body.page-forecast .legend-container--vertical .legend-toggle {
  pointer-events: auto;
}
[data-theme="light"] body.page-forecast .legend-container--vertical.legend-container--overlay:not(.legend-container--collapsed) {
  background: rgba(248, 249, 251, 0.94);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
/* Intestazioni dritte: «Moderata» per esteso vuole ~58 px di colonna. */
body.page-forecast .legend-2d {
  --legend-2d-cell: 58px;
  --legend-2d-cell-h: 16px;
}
body.page-forecast .legend-2d__multigroup { gap: 10px; }
body.page-forecast .legend-2d__header {
  min-height: 0;
  padding-bottom: 5px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
body.page-forecast .legend-2d__header span {
  transform: none;
  width: auto;
  align-self: center;
  text-align: center;
  padding-left: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: none;
}
body.page-forecast .legend-2d__header .legend-2d__group-title {
  align-self: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: none;
}
body.page-forecast .legend-2d__label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: none;
}
body.page-forecast .legend-2d__cell {
  border-radius: 3px;
  box-shadow: none;
}
body.page-forecast .legend-container--vertical .legend-bar__tick,
body.page-forecast .legend-container--vertical .legend-bar__unit {
  text-shadow: none;
}
[data-theme="light"] body.page-forecast .legend-2d__header { border-bottom-color: rgba(0, 0, 0, 0.10); }
[data-theme="light"] body.page-forecast .legend-2d__header span { color: rgba(0, 0, 0, 0.62); text-shadow: none; }
[data-theme="light"] body.page-forecast .legend-2d__header .legend-2d__group-title { color: rgba(0, 0, 0, 0.88); text-shadow: none; }
[data-theme="light"] body.page-forecast .legend-2d__label { color: rgba(0, 0, 0, 0.88); text-shadow: none; }

/* ============================================================
   Legenda di «Tempo previsto» (#1131 punto 2.9, 09/10/2026)
   ============================================================
   Prima: ~20 voci sempre tutte, sul telefono 216x448 px (meta' mappa),
   intestazioni ruotate e tagliate («Coperto»). Ora app.js
   (render2DLegend) mostra di partenza solo le voci che si vedono nella
   zona inquadrata, in un pannello compatto: Cielo e Nebbia = una fila di
   quadratini col nome sotto ciascuno; fenomeni = nome + 3 quadratini con
   UNA intestazione dritta «deb. mod. forte». Telefono: 236x243 px
   nell'esempio dell'anteprima approvata da Marco.
   Classi nuove (.legenda2d*): le vecchie .legend-2d* restano per chi le usa. */
body.page-forecast .legend-container--2d.legend-container--vertical.legend-container--overlay:not(.legend-container--collapsed) {
  padding: 10px 12px;
}
/* 🪤 Come per la vecchia (app.css, `:has(.legend-2d__multigroup)`): senza,
   vale l'altezza fissa della barra dei colori verticale (28vh sul
   telefono) e il pulsante in fondo resta tagliato. */
body.page-forecast .legend-container--vertical .legend-bar:has(> .legenda2d) {
  display: block;
  height: auto;
  min-height: 0;
  max-height: none;
}
body.page-forecast .legenda2d {
  min-width: 196px;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.92);
}
body.page-forecast .legenda2d__titolo {
  margin: 0 0 7px;
  padding-right: 34px;            /* posto per la ✕ */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
body.page-forecast .legenda2d__vuota { margin: 2px 0 4px; color: rgba(255, 255, 255, 0.75); }
body.page-forecast .legenda2d__scala {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  column-gap: 3px;
  margin: 0 0 8px;
}
body.page-forecast .legenda2d__gruppo { grid-column: 1 / -1; margin-bottom: 3px; }
body.page-forecast .legenda2d__voce { display: flex; flex-direction: column; min-width: 0; }
body.page-forecast .legenda2d__voce > span {
  margin-top: 2px;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.66);
}
body.page-forecast .legenda2d__riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 26px);
  column-gap: 3px;
  align-items: center;
  margin: 0 0 3px;
}
body.page-forecast .legenda2d__nome {
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-forecast .legenda2d__intestazione {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}
body.page-forecast .legenda2d__intestazione span { text-align: center; white-space: nowrap; }
body.page-forecast .legenda2d__voce > i,
body.page-forecast .legenda2d__riga > i {
  display: block;
  height: 14px;
  border-radius: 3px;
  /* bordo appena visibile: «Coperto» e «Grandine molto grossa» sono scuri
     come il pannello, «Sereno» chiaro come quello del tema chiaro */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.page-forecast .legenda2d__unica { grid-column: span 3; }
body.page-forecast .legenda2d__modo {
  display: block;
  width: 100%;
  min-height: 36px;
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #8ab4f8;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;           /* il contenitore e' pointer-events:none */
}
/* La ✕ al posto del bottone «▾» in fondo: e' sempre `.legend-toggle`,
   perche' forecast-topbar.js la intercetta (sul telefono nasconde la
   legenda, sul computer la riduce alla pasticca). */
body.page-forecast .legend-container--2d.legend-has-toggle:not(.legend-container--collapsed) .legend-toggle {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: auto;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  justify-content: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="light"] body.page-forecast .legenda2d { color: rgba(0, 0, 0, 0.88); }
[data-theme="light"] body.page-forecast .legenda2d__titolo,
[data-theme="light"] body.page-forecast .legenda2d__voce > span,
[data-theme="light"] body.page-forecast .legenda2d__intestazione { color: rgba(0, 0, 0, 0.6); }
[data-theme="light"] body.page-forecast .legenda2d__vuota { color: rgba(0, 0, 0, 0.7); }
[data-theme="light"] body.page-forecast .legenda2d__voce > i,
[data-theme="light"] body.page-forecast .legenda2d__riga > i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }
[data-theme="light"] body.page-forecast .legenda2d__modo {
  color: #1a56c4;
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] body.page-forecast .legend-container--2d.legend-has-toggle:not(.legend-container--collapsed) .legend-toggle {
  color: rgba(0, 0, 0, 0.6);
  background: transparent;
}
@media (max-width: 767px) {
  /* Sopra la riga «meteo.sm / ©», che prima finiva SOPRA la legenda. */
  body.page-forecast .legend-container--2d.legend-container--vertical.legend-container--overlay {
    bottom: calc(var(--bottom-bar-height, 122px) + 48px);
    max-height: calc(100% - var(--bottom-bar-height, 122px) - 112px);
  }
  body.page-forecast .legend-container--2d.legend-container--vertical.legend-container--overlay:not(.legend-container--collapsed) {
    padding: 10px 12px;
  }
}

/* ============================================================
   6. Telefono: una riga sola da 52 px — 21/09/2026
   ============================================================
   Sotto i 768 px gli strumenti non stanno in riga e non ha senso provarci:
   forecast-topbar.js li porta tutti nel menu «Altro», e restano in barra i
   tre comandi che servono col pollice piu' il titolo.
   I bersagli passano a 44 px (l'icona resta 16): sotto quella misura si
   sbaglia bottone. E sul telefono il difetto del badge sopra l'elenco dei
   modelli non c'era: li' la barra laterale e' `position: fixed` a
   z-index 1200 (app.css:8987) e copre lei tutto il resto.
   ============================================================ */
@media (max-width: 767px) {
  body.page-forecast .map-info-bar {
    min-height: 52px;
    padding: 0 6px;
  }
  body.page-forecast .pagina__controlli--in-barra {
    gap: 2px;
  }
  body.page-forecast .map-info-bar__right { padding-left: 6px; }
  body.page-forecast .map-info-bar .map-toolbar__btn,
  body.page-forecast .map-info-bar .map-toolbar__share-btn,
  body.page-forecast .map-info-bar .map-toolbar__compare-btn,
  body.page-forecast .map-info-bar .map-toolbar__fullscreen-btn,
  body.page-forecast .map-info-bar .map-toolbar__gif-btn,
  body.page-forecast .map-info-bar .map-toolbar__wind-btn,
  body.page-forecast .map-info-bar .btn--icon,
  body.page-forecast .map-info-bar .sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  body.page-forecast .map-more-panel {
    /* 🪤 22/09/2026: era -6px, e con il padding della barra sceso da 6 a 2
       il pannello finiva 4 px FUORI dallo schermo a destra (misurato sul
       telefono vero: bordo destro a 388 su 384). Il -6 compensava il
       vecchio padding; ora il margine da recuperare e' 2. */
    right: -2px;
    width: calc(100vw - 16px);
    padding: 8px;
  }
  /* «Mappe» e «Strumenti» sul telefono: nome SOTTO l'icona, come nelle
     barre di navigazione delle app. Accanto non ci starebbe: il titolo ha
     gia' bisogno di ogni pixel (vedi sotto). Cosi' i due pulsanti passano
     da 44 a circa 50 e 56 px di larghezza. */
  body.page-forecast .map-info-bar .barra-con-nome {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 3px;
    min-width: 48px;
    border-radius: 8px;
  }
  body.page-forecast .barra-con-nome__testo { font-size: 10.5px; }
  /* Il bottone «Legenda» si trascina col dito (08/10/2026, richiesta di
     Marco: nel confronto a 4 mappe copriva l'etichetta di un modello).
     La logica e' in forecast-topbar.js (trascinabile). Senza
     `touch-action: none` il browser si prende il gesto per scorrere e il
     trascinamento si interrompe dopo pochi pixel. */
  body.page-forecast .legend-tab {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  body.page-forecast .legend-tab.legend-tab--trascinata {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transform: scale(1.06);
  }
  /* il titolo e' l'unico che puo' cedere: tronca invece di spingere fuori.
     🪤 21/09/2026, collaudo: il ragionamento che stava scritto qui era
     SBAGLIATO, e il difetto c'era davvero. Diceva che questo overflow non
     decapita i menu a tendina del titolo perche' .map-info-bar__left e'
     `position: static`. Non basta: il blocco contenitore di un menu non e'
     .map-info-bar__left, ma il suo involucro (#info-param-wrap e compagni),
     che e' `position: relative` e sta DENTRO questo overflow. La regola CSS
     e' che un `position: absolute` sfugge al taglio solo se il suo blocco
     contenitore e' un ANTENATO di chi taglia. Misurato sul telefono vero
     (384x694, modo Semplice): #simple-param-dropdown occupa y135-177 ma la
     zona del titolo finisce a y151, e sotto quella riga elementFromPoint
     risponde il canvas della mappa. Del menu restavano 16 px su 42: una
     striscia bianca senza testo.
     La cura: sul telefono gli involucri tornano `position: static`, cosi'
     il riferimento dei menu diventa #map-info-bar (che e' `position:
     absolute` ed e' ANTENATO di chi taglia) e il taglio non li tocca piu'.
     I menu si aprono allora a filo della barra, larghi quanto lei meno i
     margini: su 384 px e' anche piu' comodo da toccare. */
  /* 🪤 Il taglio sta sulle DUE RIGHE DI TESTO, non sulla zona che le
     contiene. La zona ha `backdrop-filter: blur(8px)` (il vetro sotto il
     titolo) e in Chrome anche un backdrop-filter rende l'elemento blocco
     contenitore dei suoi discendenti assoluti, esattamente come la
     maschera: mettendo qui l'overflow, i menu restavano ancorati alla zona
     E tagliati dalla zona. Sulle righe interne invece funziona, perche' il
     blocco contenitore dei menu resta la ZONA, che e' ANTENATA delle righe:
     un assoluto non viene tagliato da un antenato che sta piu' in basso
     del suo blocco contenitore. Il testo si taglia, i menu escono interi. */
  body.page-forecast .map-info-bar__left { overflow: visible; }
  /* 🪤 `max-width: 100%` insieme all'overflow: senza, le due righe restano
     larghe quanto il loro contenuto (misurato: 201 px la prima, 356 la
     seconda, dentro una zona larga 135) e, non essendo piu' la zona a
     tagliare, SBORDANO fin sotto il bottone «Altro».
     🪤 Il limite e' `100% + 8px`, non `100%` secco: la zona ha
     `padding: 3px 8px`, e prima era il suo bordo ESTERNO a tagliare, non
     quello interno. Con il 100% secco si perdevano 8 px di testo visibile
     (126 -> 118 su un telefono da 384): pochi, ma erano una perdita
     introdotta dalla cura, non un difetto preesistente.
     I menu non ne risentono: il loro blocco contenitore e' la zona, che e'
     ANTENATA di queste due righe, quindi questo overflow non li tocca. */
  body.page-forecast .map-info-bar__headline,
  body.page-forecast .map-info-bar__sub { overflow: hidden; max-width: calc(100% + 8px); }
  /* 🔑 21/09/2026: sul telefono il titolo VA A CAPO invece di tagliare.
     Marco lo vuole leggibile per intero, e su uno schermo da 384 px non
     c'e' verso di farci stare tutto su due righe: il parametro piu' lungo
     («Bulk Richardson Number») chiede da solo 235 px dei 258 disponibili,
     e la riga delle informazioni ne chiede 318 (modello 165 + validita'
     105 + fuso 36, piu' sorgente 51 e run 105 che prima venivano SPENTI).
     Con `flex-wrap: wrap` il blocco diventa di tre righe e non si perde
     piu' niente: il parametro sta sulla prima, e sotto vanno
     [dettaglio + modello + sorgente] e [run + validita' + fuso].
     🪤 La riga delle informazioni scende a 10 px e il passo fra i pezzi a 5.
     a 12,5 px i suoi pezzi chiedono 287 px contro i 258 disponibili, a 11 px ne
     chiedono 264 e mancano SEI pixel: in tutti e due i casi va a capo una volta di piu e le righe diventano quattro. A 10,5 px chiedono 252 e ci stanno.
     🪤 Il nome del parametro resta a 12 px: da solo ci sta. Se un giorno
     ne arriva uno piu' lungo di 258 px, va a capo anche lui e le righe
     diventano quattro: preferibile a tagliarlo.
     🔑 Di conseguenza `stretto()` torna falso (niente piu' overflow
     orizzontale), quindi il meccanismo che spegneva dettaglio, sorgente e
     run non si accende piu' sul telefono, e non serve piu' il loro testo
     nella riga in cima al pannello «Altro». */
  body.page-forecast .map-info-bar__headline,
  body.page-forecast .map-info-bar__sub {
    flex-wrap: wrap;
    row-gap: 1px;
    column-gap: 5px;
  }
  /* 🪤 Cinque pixel decidevano fra tre righe e quattro. Col padding da 8 px
     per lato la zona del titolo offre 248 px alle righe, e la seconda ne
     chiede 253: «Principale» andava a capo da sola e il fuso orario si
     ritrovava su una quarta riga tutto solo. Qui si recuperano 12 px —
     8 dal padding della zona, 4 dal passo fra le tre zone della barra —
     e diventano 260. Non e' un margine largo: se arriva un modello con un
     nome piu' lungo, la riga va a capo e le righe tornano quattro. Meglio
     una riga in piu' che un testo tagliato. */
  /* 🪤 Con `body.page-forecast .map-info-bar__left` il padding NON cambiava:
     app.css:14437 usa `[data-theme="light"] body.page-forecast
     .map-info-bar__left`, che ha una classe in piu' e vince. Qui si passa
     dall'id, che batte qualunque numero di classi. */
  body.page-forecast #map-info-bar .map-info-bar__left {
    padding-left: 4px;
    padding-right: 4px;
  }
  /* 🔑 21/09/2026: i due bottoni ai lati del titolo costavano molto piu'
     dei loro 44 px. A sinistra: 6 di padding della barra + 44 di bottone +
     6 di padding della zona comandi + 1 di separatore + 4 di passo = 61.
     A destra lo stesso, specchiato. Su 384 px se ne andavano 122 per due
     bottoni, e al titolo ne restavano 252.
     Qui si stringe TUTTO quello che non e' il bottone: il padding della
     barra da 6 a 2, i due padding interni delle zone da 6 a 2, i due passi
     da 4 a 2. Sono 22 px che vanno al titolo, e i bottoni restano 44x44,
     cioe' la misura minima per il dito (voce #924).
     🫤 Per scendere sotto i 44 bisognerebbe rinunciare a quella misura, e
     non basterebbe comunque: i modelli dal nome piu' lungo (AROME France
     HD, ARPEGE) chiedono 190 px di etichetta contro i 167 che restano. */
  body.page-forecast .map-info-bar { gap: 2px; padding-left: 2px; padding-right: 2px; }
  body.page-forecast .pagina__controlli--in-barra { padding-right: 2px; }
  body.page-forecast #map-info-bar .map-info-bar__right { padding-left: 2px; }
  /* 21/09/2026: in tema chiaro «Mappe» (comando di pagina) e «Strumenti»
     (strumento di mappa) avevano due rivestimenti diversi; erano stati
     uniformati sul fondo bianco 0,65. Dal 10/10 (#1132 punto 3.1) la barra
     chiara e' piena e tutti e due sono trasparenti come in tema scuro: la
     regola sta nel blocco «Tema chiaro della barra», in cima. */
  body.page-forecast .map-info-bar__left #info-cat-wrap,
  body.page-forecast .map-info-bar__left #info-param-wrap,
  body.page-forecast .map-info-bar__left #info-run-wrap, /* 2.8: l'avviso «corsa …» apre l'elenco delle corse */
  body.page-forecast .map-info-bar__left #info-model-wrap,
  /* 10/10/2026: il menu «Previsione principale / Scenari possibili» prima
     non compariva mai sul telefono; senza questa riga si apriva a x -85 */
  body.page-forecast .map-info-bar__left #info-source-wrap { position: static; }
  /* 🪤 La seconda meta' della cura, e senza questa la prima peggiora le
     cose. La sfumatura del titolo e' una `mask-image`, e in Chrome una
     maschera non nulla rende l'elemento il BLOCCO CONTENITORE dei suoi
     discendenti `position: absolute`, esattamente come farebbero un
     `transform` o un `filter`. Quindi finche' la maschera c'e', i menu
     restano ancorati alla zona del titolo e questo `overflow: hidden` li
     taglia comunque — misurato: con i soli involucri a `static` il menu
     finiva a y157 mentre la zona finisce a y151, cioe' tagliato del tutto
     invece che a meta'.
     Togliendo la maschera MENTRE un menu e' aperto, il blocco contenitore
     torna a essere #map-info-bar, che e' ANTENATO di chi taglia: per la
     regola del CSS un assoluto non viene tagliato da un antenato quando il
     suo blocco contenitore sta piu' in alto di quello. Il menu esce intero.
     Il prezzo e' che, per il tempo in cui il menu e' aperto, la fine del
     titolo e' tranciata netta invece che sfumata: in quel momento si sta
     guardando il menu, non il titolo. */
  body.page-forecast .map-info-bar__left:has(.simple-dropdown:not(.hidden)),
  body.page-forecast .map-info-bar__left:has(.simple-model-dropdown:not(.hidden)) {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Ancorati a DESTRA: il blocco contenitore e' la zona del titolo, che
     sta gia' addossata al bordo destro della barra. Con `left: 0` il menu
     partiva dal bordo sinistro della zona e con i suoi 220 px di larghezza
     minima usciva dallo schermo di 31 px (misurato: destro a 415 su 384).
     Con `right: 0` finisce dove finisce la zona e ci sta. */
  body.page-forecast .map-info-bar__left .simple-dropdown,
  body.page-forecast .map-info-bar__left .simple-model-dropdown {
    left: auto;
    right: 0;
    max-width: calc(100vw - 24px);
  }
  /* 🪤 Sul telefono le intestazioni tornano inclinate, come erano prima.
     Scritte dritte «Moderata» vuole 58 px di colonna: la legenda del tempo
     previsto passa da 188 a 320 px e su uno schermo da 414 ne occupa i
     tre quarti. Qui il problema di leggibilita' lo risolve gia' il
     pannello: e' il fondo che mancava, non l'inclinazione. */
  body.page-forecast .legend-2d {
    --legend-2d-cell: 14px;
    --legend-2d-cell-h: 12px;
  }
  body.page-forecast .legend-2d__header {
    min-height: 50px;
    border-bottom: none;
    padding-bottom: 4px;
    margin-bottom: 0;
  }
  body.page-forecast .legend-2d__header span {
    transform: rotate(-45deg);
    transform-origin: left bottom;
    width: var(--legend-2d-cell);
    text-align: left;
    padding-left: 2px;
    align-self: end;
  }
  body.page-forecast .legend-2d__header .legend-2d__group-title {
    transform: none;
    width: auto;
    text-align: right;
    align-self: end;
    font-size: 10px;
  }
  body.page-forecast .legend-2d__label { font-size: 10px; }
  body.page-forecast .legend-2d__multigroup { gap: 2px; }
  body.page-forecast .legend-container--vertical.legend-container--overlay:not(.legend-container--collapsed) {
    /* 🪤 26 px sopra e non 8 (25/09/2026, foto di Marco): l'unita' di
       misura — il «°C» della temperatura — ha `margin-top: -18px` per
       stare attaccata alla barra dei colori, e con soli 8 px di padding
       finiva FUORI dal contenitore, che la tagliava a meta' con il suo
       `overflow-y: auto`. Misurato: unita' a y351, contenitore a y360.
       Lo spazio per una cosa si conta DENTRO il contenitore che la
       ritaglia, non sullo schermo — la stessa lezione dell'area di tocco
       del 23/09. */
    padding: 26px 10px 8px;
  }
}

/* 5. Leggibilita' e tocco sul telefono (#825, 07/10/2026). Pareri dei
      collaudatori del 30/09-01/10: Chierici «scritte piccole, devo
      mettermi gli occhiali», Callisti «i modelli dal cellulare non sono
      di semplice consultazione», Cherubini «slide bar troppo piccole per
      usarle con precisione». Misurato a 393 px: testi da 7, 9 e 10 px,
      pulsanti alti 13-26 px, barra del tempo alta 6 px.
      Regola di questa sezione: sul telefono niente testo sotto gli 11 px,
      comandi alti almeno 32 px, barra del tempo toccabile su 40 px. */

/* Il nome del parametro sta su una barra SCURA (rgba(12,17,24,.88)), ma
   prendeva `--text-primary`, che senza tema scelto e' quello chiaro:
   «Tempo previsto» usciva rgb(32,33,36) su quasi nero, a ogni larghezza.
   Lo vede chi non ha mai toccato la luna, cioe' quasi tutti. Il tema
   chiaro esplicito schiarisce la barra (app.css:14555) e resta com'e'. */
html:not([data-theme="light"]) body.page-forecast .map-info-bar #info-param-name {
  color: #fff;
}
/* `touch-action: auto` lasciava al browser il trascinamento orizzontale:
   a meta' corsa arrivava `pointercancel` e il cursore si fermava. */
body.page-forecast .scrubber-track { touch-action: none; }
/* Stesso difetto nella barra in basso, scura anche lei (rgba(15,20,30,.5)
   sopra la mappa): «Ora / +6h / Domani» uscivano rgb(95,99,104) e le ore
   rgb(154,160,166). */
html:not([data-theme="light"]) body.page-forecast .scrubber-preset {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}
html:not([data-theme="light"]) body.page-forecast .scrubber-hours {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   Contrasti (#1132 punto 3.2, 10/10/2026). Soglia: 4,5:1 per il testo,
   3:1 per icone e bordi (WCAG 1.4.3 e 1.4.11), misurata nel browser.
   🔑 ACCENTO e FONDO PIENO sono due colori diversi. In tema scuro
   --primary e' #64b5f6: ottimo come testo o bordo sul fondo scuro
   (7,86:1), pessimo come fondo sotto il bianco (2,21:1). Lo usavano
   come fondo ~20 comandi: play, Legenda, «Ora», pulsanti attivi della
   barra e di Strumenti, pastiglie attive, corse attive… Qui sotto il
   fondo pieno diventa --fc-pieno #1967d2 (bianco sopra: 5,37:1; contro
   il fondo scuro 3,24:1, cioe' il bottone si vede ancora come bottone).
   In tema chiaro --primary e' #1a73e8 (4,51:1) e resta com'e'.
   🪤 Un comando NUOVO con fondo var(--primary) e testo bianco va
   aggiunto a questo elenco, o in tema scuro torna a 2,21:1.
   ============================================================ */
body.page-forecast { --fc-pieno: #1967d2; }
html:not([data-theme="light"]) body.page-forecast :is(
  .skip-link,
  .btn--primary,
  .chip--active, .chip.active, .chip--primary,
  .run-item.active, .source-btn.active,
  .map-mode-btn.active,
  .map-toolbar__btn.active, .map-toolbar__wind-btn.active, .map-toolbar__compare-btn.active,
  .map-toolbar__tz-toggle.local, .map-info-bar__tz-toggle.local, .valid-time-bar__toggle.local,
  .wind-style-btn.active, .gif-speed-btn.active,
  .sidebar__pl-level.active, .sidebar__agg-btn.active,
  .quick-param-chip.active, .simple-flyout__param.active,
  .scrubber-preset.active, .settings-toggle-btn.active,
  .legend-tab:not(.legend-tab--spenta),
  .map-more-panel__voci [data-etichetta].active,
  .map-more-panel__voci [data-etichetta][aria-pressed="true"],
  .map-info-popover__corsa.attiva,
  .toast__action
) {
  background-color: var(--fc-pieno);
  border-color: var(--fc-pieno);
}
html:not([data-theme="light"]) body.page-forecast :is(
  .map-toolbar__tz-toggle, .map-info-bar__tz-toggle, .valid-time-bar__toggle,
  .btn--gif, .btn--meteogram, .sidebar__run-nav-btn, .compare-presets button
):hover {
  background-color: var(--fc-pieno);
}
/* «Ora» attivo: in chiaro la regola [data-theme="light"] .scrubber-preset
   (app.css ≈11488) veniva DOPO .scrubber-preset.active a pari peso e gli
   toglieva il fondo: testo bianco su quasi bianco, 1,11:1. In scuro il
   bianco 0,9 della regola qui sopra (≈1249) passava anche sull'attivo. */
html body.page-forecast .scrubber-preset.active {
  background-color: var(--primary);
  border-color: transparent;
  color: #fff;
}
html:not([data-theme="light"]) body.page-forecast .scrubber-preset.active {
  background-color: var(--fc-pieno);
}
/* Ore e giorni della barra del tempo: erano --text-hint (#757575 / grigio
   chiaro) e nero o bianco al 40-45%: 2,6-4,5:1. Sul computer erano anche
   a 9-10 px; ora 11 come sul telefono. */
body.page-forecast .scrubber-hours { font-size: 11px; }
html[data-theme="light"] body.page-forecast .scrubber-hours {
  color: rgba(0, 0, 0, 0.65);
}
/* La barra in basso e' un vetro SOPRA la mappa (sul computer si vede
   bene). In scuro era rgba(15,20,30,.5) (app.css ≈14652): sopra una zona
   chiara della mappa (cielo sereno, neve) il fondo diventava grigio medio
   e le ore bianche scendevano a ~3,4:1. A 0,78 restano ~6,8:1 anche sopra
   il bianco. In chiaro (bianco 0,75) il caso peggiore, mappa nera, da'
   gia' ~5,4:1. */
html:not([data-theme="light"]) body.page-forecast .bottom-bar {
  background-color: rgba(15, 20, 30, 0.78);
}

@media (max-width: 767px) {
  /* Barra del tempo (modo Semplice). L'area di tocco la allarga uno
     pseudo-elemento del binario: il tocco arriva al binario stesso, e
     app.js (`pointerdown` sul binario) legge solo la x. */
  body.page-forecast .scrubber-track { height: 8px; border-radius: 4px; }
  body.page-forecast .scrubber-track::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: -16px;
    bottom: -16px;
  }
  body.page-forecast .scrubber-thumb { width: 24px; height: 24px; }
  body.page-forecast .scrubber-days { font-size: 12px; height: 16px; }
  body.page-forecast .scrubber-hours { font-size: 11px; height: 14px; margin-top: 3px; }
  /* #1131 punto 2.7: barra del tempo piu' bassa (110 -> ~90 px) stringendo
     i margini. Fra giorni e binario restano 4 px: il cursore (24 px su un
     binario di 8) sporge di 8 px e con meno toccherebbe «Ven 9». */
  body.page-forecast .timeline-scrubber { padding: 3px 12px 5px; }
  /* Corsa completa: il contatore «33/33h» non dice niente di utile e
     ruba spazio. Resta visibile solo mentre mancano ore. */
  body.page-forecast .fhr-avail-badge.complete { display: none; }
  /* #1107: la linea rossa dell'ora attuale saliva nella riga dei giorni e
     la sua scritta «Ora» copriva il primo giorno («Gio 8» diventava
     «Gio 8Ora»). Su 220 px di barra non c'e' una riga libera per la
     scritta: la linea resta una tacca sul binario, e il suo nome lo da'
     il pallino rosso sul pulsante «Ora» qui sopra. Il pallino sta
     nell'angolo e non occupa larghezza: in linea col testo spingeva
     «Domani» sotto l'etichetta «45/45h». */
  body.page-forecast .scrubber-now-line { top: -6px; bottom: -6px; }
  body.page-forecast .scrubber-now-line::after { content: none; }
  body.page-forecast .scrubber-preset[data-preset="now"] { position: relative; }
  body.page-forecast .scrubber-preset[data-preset="now"]::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--error);
  }
  /* 🪤 Larghezza contata: la zona dei salti e' larga quanto la barra del
     tempo (244 px a 393) e tiene 56 px liberi a destra per l'etichetta
     «45/45h». A 13 px con padding 12 «Domani» finiva sotto l'etichetta. */
  body.page-forecast .scrubber-preset {
    font-size: 12px;
    min-height: 28px;
    padding: 4px 9px;
  }
  body.page-forecast .fhr-avail-badge { font-size: 11px; }
  body.page-forecast .play-speed-label { font-size: 10px; }

  /* Riga di modello e validita' sotto il titolo: da 10 a 12 px. Costa
     una riga in piu' (vedi la nota al punto 2: a 10,5 px ci stavano tre
     righe), ma era proprio la riga che chiedeva gli occhiali. */
  body.page-forecast .map-info-bar__sub { font-size: 12px; }
  body.page-forecast .map-info-bar__sub .map-info-bar__tz-toggle {
    font-size: 11px;
    padding: 3px 5px;
  }
  /* 08/10: a 12 px la riga chiedeva ~320 px contro 281 (telefono da 393,
     ICON-CH1): il fuso «UTC» andava a capo DA SOLO e la barra grigia
     cresceva di una riga intera. Sul telefono la parola «valido» si
     toglie («domani 12:00 · tra 25 ore» si capisce da sé) e validita' e
     fuso stanno legati in .map-info-bar__when: se un modello dal nome
     lungo non lascia spazio, va a capo il gruppo intero. */
  body.page-forecast .map-info-bar__valid-word { display: none; }
  /* 08/10: la legenda verticale stava a 122 px fissi dal fondo, ma la
     barra in basso ora e' alta 111-140 px e le scivolava sopra. Si aggancia
     alla misura vera (--bottom-bar-height, la scrive forecast-topbar.js);
     64 px in alto lasciano libera la barra grigia del titolo. */
  /* 10/10 (foto di Marco, AROME-PI): il bottone «©» (#map-info-btn, 26 px,
     a bottom-bar + 8) stava sopra il fondo della legenda aperta e copriva
     l'ultima voce («Nessuna»). Legenda su di 26 + 8 px. */
  body.page-forecast .legend-container--vertical.legend-container--overlay {
    bottom: calc(var(--bottom-bar-height, 122px) + 42px);
    max-height: calc(100% - var(--bottom-bar-height, 122px) - 106px);
  }

  /* Scelta del modello, del parametro e della categoria */
  body.page-forecast .simple-model-dropdown__item,
  body.page-forecast .simple-dropdown__item,
  body.page-forecast .model-selector__item-name {
    font-size: 15px;
  }
  body.page-forecast .simple-model-dropdown__item,
  body.page-forecast .simple-dropdown__item,
  body.page-forecast .model-selector__item {
    min-height: 40px;
  }
  body.page-forecast .simple-model-dropdown__group,
  body.page-forecast .simple-model-dropdown__subheader,
  body.page-forecast .simple-model-dropdown__subgroup,
  body.page-forecast .model-selector__group-label,
  body.page-forecast .model-selector__item-badge,
  body.page-forecast .model-selector__item-res {
    font-size: 12px;
  }
  body.page-forecast .simple-model-dropdown__self-label { font-size: 13px; }

  /* Barra laterale (pannello parametri) */
  body.page-forecast .sidebar__agg-btn {
    font-size: 13px;
    min-height: 34px;
  }
  body.page-forecast .sidebar__pl-level { min-height: 34px; }
  body.page-forecast .sidebar__pl-unit { font-size: 12px; }
  body.page-forecast .sidebar__run-nav-btn { width: 36px; height: 36px; }
  body.page-forecast .param-info-dot {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  /* Legende */
  body.page-forecast .legend-bar__tick,
  body.page-forecast .legend-bar__unit { font-size: 11px; }
  body.page-forecast .legend-bar__tick--discrete { font-size: 10px; }
  body.page-forecast .legend-2d__header span { font-size: 10px; }
  body.page-forecast .legend-2d__header .legend-2d__group-title,
  body.page-forecast .legend-2d__label { font-size: 11px; }

  /* Cursori delle particelle del vento: pallino da 14 a 24 px */
  body.page-forecast .wind-slider input[type="range"] { height: 24px; }
  body.page-forecast .wind-slider input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  body.page-forecast .wind-slider input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
  body.page-forecast .wind-slider__val { font-size: 12px; }

  /* Avviso «Oltre i 3 giorni: accedi gratis» (app.js
     renderGuestForecastLimit). Fino all'08/10 era una riga sua sopra la
     barra del tempo: 27 px tolti alla mappa per tutta la visita.
     #1131 punto 2.7: resta solo il lucchetto, nell'angolo in alto a
     destra della barra del tempo, accanto ai salti rapidi (lo spazio e'
     quello che .scrubber-presets lascia libero a destra, 56 px). Il
     testo intero compare sopra la barra quando si arriva in fondo ai 3
     giorni (classe .al-limite, app.js aggiornaLimiteOspite).
     `!important` perche' bordo, sfondo, margini ecc. glieli scrive
     app.js nello style. */
  body.page-forecast #guest-forecast-limit {
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 6;
    width: 28px;
    height: 28px;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 13px !important;
  }
  body.page-forecast #guest-forecast-limit .guest-forecast-limit__testo { display: none; }
  /* Il contatore «33/33h» sta nello stesso angolo: per gli ospiti cede
     il posto al lucchetto. */
  body.page-forecast #guest-forecast-limit + .timeline .fhr-avail-badge { display: none; }
  body.page-forecast #guest-forecast-limit.al-limite {
    top: auto;
    /* sopra la fila di «Legenda» e ©, che sta 8-42 px sopra la barra */
    bottom: calc(100% + 48px);
    right: 50%;
    transform: translateX(50%);
    width: max-content;
    max-width: calc(100vw - 32px) !important;
    height: auto;
    min-height: 32px;
    padding: 6px 14px !important;
    border-radius: 16px !important;
    background: rgba(48, 34, 6, 0.92) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  body.page-forecast #guest-forecast-limit.al-limite .guest-forecast-limit__testo { display: inline; }
  /* #1131 punto 2.13, soluzione B (approvata da Marco il 09/10/2026, al
     posto della sua idea di mettere play e frecce sul cursore: bersagli
     troppo vicini per il dito, pausa che scappa durante la
     riproduzione). Sul telefono indietro / play / avanti (#controls)
     stanno a destra nella riga dei salti rapidi, anche in Pro, e la
     barra del tempo prende tutta la larghezza (232 -> ~380 px).
     Solo stile: i pulsanti restano gli stessi (listener, scorciatoie).
     Il lucchetto degli ospiti sta fra i salti e i comandi. */
  body.page-forecast #controls {
    position: absolute;
    top: 3px;
    z-index: 6;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
  }
  body.page-forecast #controls .btn {
    width: 40px;
    min-width: 40px;
    height: 32px;
    min-height: 32px;
    border-radius: 16px;
  }
  body.page-forecast #controls .play-speed-wrap { width: auto; height: auto; }
  /* «1x» = pulsante a parte in fondo a destra (09/10, scelta di Marco su
     anteprima): attaccato al play era 16x12 px, e col dito si premeva il
     play. display:contents fa del «1x» un elemento della riga #controls,
     order:1 lo porta dopo «avanti». Ogni tocco 1x -> 2x -> 4x (cycleSpeed). */
  body.page-forecast #controls .play-speed-wrap { display: contents; }
  body.page-forecast #controls #speed-btn {
    order: 1;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  html[data-theme="light"] body.page-forecast #controls #speed-btn {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.18);
    text-shadow: none;
  }
  body.page-forecast .bottom-bar .timeline {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    border-left: 0;
  }
  body.page-forecast .scrubber-presets { padding-right: 0; margin-bottom: 6px; }
  body.page-forecast #guest-forecast-limit:not(.al-limite) { top: 5px; }
  /* Telefoni fino a 399 px (360 molti Android, 390 iPhone, 393 Pixel): salti
     rapidi piu' piccoli. Le misure di comandi e lucchetto che stavano qui
     (164 px) erano battute da regole piu' avanti e sono state tolte l'11/10/2026
     (#1133 punto 4.2): oggi decidono quelle. */
  @media (max-width: 399px) {
    body.page-forecast .scrubber-preset { font-size: 11px; padding: 4px 6px; }
    body.page-forecast #controls #speed-btn { font-size: 12px; }
  }
  /* Contatore «N/Nh»: sul telefono non serve piu', le ore in
     elaborazione si vedono gia' sulla barra (tratteggio giallo-nero). */
  body.page-forecast .fhr-avail-badge { display: none !important; }

  /* #1131 punto 2.7: la riga delle pastiglie (#quick-params) diventa uno
     strato SOPRA la mappa invece di stare sopra di essa nel flusso. Cosi'
     quando scorre via (app.js impostaPastiglieNascoste, al primo
     trascinamento o zoom col dito) la mappa non cambia altezza e non
     salta sotto il dito; la barra del titolo sale al suo posto.
     --fc-pastiglie-h = altezza della riga, misurata da app.js (47 px
     prima della misura: senza, la barra del titolo scivolerebbe giu'
     a ogni apertura).
     Solo con il confronto spento: col confronto la riga resta nel flusso,
     sotto i comandi del confronto (#model-compare-controls). */
  body.page-forecast.mode-simple #model-compare-controls.hidden + #quick-params {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--fc-z-pastiglie);
    transition: transform 0.22s ease, visibility 0s linear 0s;
    /* Ora sta sopra la mappa colorata e non piu' sul fondo grigio della
       pagina: stesso fondo della barra del titolo, o il testo bianco
       delle pastiglie su una mappa gialla non si legge. */
    background: rgba(12, 17, 24, 0.88);
  }
  [data-theme="light"] body.page-forecast.mode-simple #model-compare-controls.hidden + #quick-params {
    background: rgba(255, 255, 255, 0.92);
  }
  body.page-forecast.mode-simple #model-compare-controls.hidden + #quick-params + .card--map .map-info-bar {
    top: var(--fc-pastiglie-h, 47px);
    transition: top 0.22s ease;
  }
  body.page-forecast.mode-simple .main-content.pastiglie-nascoste > #model-compare-controls.hidden + #quick-params {
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  body.page-forecast.mode-simple .main-content.pastiglie-nascoste > #model-compare-controls.hidden + #quick-params + .card--map .map-info-bar {
    top: 0;
  }
  /* Linguetta per far tornare le pastiglie: appesa sotto il centro della
     barra del titolo, visibile solo a pastiglie nascoste. Disegnata
     44x14, toccabile 44x30 (::before). */
  body.page-forecast.mode-simple .main-content.pastiglie-nascoste .pastiglie-linguetta {
    display: flex;
  }
  body.page-forecast .pastiglie-linguetta {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    width: 44px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 0 0 8px 8px;
    align-items: center;
    justify-content: center;
    background: rgba(15, 20, 28, 0.85);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
  }
  body.page-forecast .pastiglie-linguetta::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    bottom: -8px;
  }
  [data-theme="light"] body.page-forecast .pastiglie-linguetta {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  @media (prefers-reduced-motion: reduce) {
    body.page-forecast #quick-params,
    body.page-forecast .map-info-bar { transition: none !important; }
  }
}
/* #1131 punto 2.13: finestra di 2 giorni + panoramica (app.js
   applicaFinestra). La vista taglia in orizzonte ma NON in verticale:
   l'etichetta del cursore («+30h») sporge sopra il binario.
   overflow-x:clip lo permette, hidden no (forzerebbe anche y). */
body.page-forecast .fc-finestra { overflow-x: clip !important; overflow-y: visible !important; }
@supports not (overflow: clip) {
  body.page-forecast .fc-finestra { overflow: hidden !important; }
}
body.page-forecast .fc-finestra > .fc-finestra-tela { transition: transform 0.25s ease; }
body.page-forecast .fc-finestra .fuori-finestra { visibility: hidden; }
/* La vista occupa anche i 12 px di margine laterale della barra: li' la
   prima e l'ultima ora («06» a inizio corsa) si leggono per intero e si
   intravede che la barra continua. Spenta, margine e padding si
   annullano e non cambia niente. */
body.page-forecast #timeline-scrubber .fc-finestra-vista { margin: 0 -12px; padding: 0 12px; }
body.page-forecast .fc-panoramica {
  position: relative;
  height: 8px;
  margin: 7px 0 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  touch-action: none;
  cursor: pointer;
}
body.page-forecast .fc-panoramica[hidden] { display: none; }
/* Area di tocco piu' alta della striscia (8 px sono pochi per un dito) */
body.page-forecast .fc-panoramica::before {
  content: '';
  position: absolute;
  inset: -9px 0;
}
body.page-forecast .fc-panoramica__pronto {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
body.page-forecast .fc-panoramica__ora {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: #ef4444;
  pointer-events: none;
}
body.page-forecast .fc-panoramica__finestra {
  position: absolute;
  top: -3px; bottom: -3px;
  box-sizing: border-box;
  border: 2px solid var(--primary, #3b82f6);
  border-radius: 5px;
  background: rgba(59, 130, 246, 0.22);
  pointer-events: none;
}
html[data-theme="light"] body.page-forecast .fc-panoramica { background: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] body.page-forecast .fc-panoramica__pronto { background: rgba(0, 0, 0, 0.16); }
@media (prefers-reduced-motion: reduce) {
  body.page-forecast .fc-finestra > .fc-finestra-tela { transition: none; }
}
/* Il «1x» e' un <button> (prima uno span con role="button", che con la
   tastiera non si attivava): via i bordi e il carattere del pulsante. */
body.page-forecast #speed-btn { border: 0; font-family: inherit; margin: 0; }
/* #1131 punto 2.13: in tema chiaro indietro / play / avanti avevano
   icone bianche (rgba(255,255,255,.9)) su fondo quasi trasparente sopra
   la barra chiara: quasi invisibili. Icone scure, play pieno. */
html[data-theme="light"] body.page-forecast #controls .btn {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] body.page-forecast #controls #play-btn {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
/* #1131 punto 2.7: la linguetta delle pastiglie esiste solo sul telefono
   (le regole sono nel blocco max-width 767px qui sopra). */
@media (min-width: 768px) {
  body.page-forecast .pastiglie-linguetta { display: none !important; }
}
/* Il momento scelto («Mar 02:00 · tra 109 ore») mentre si trascina la
   barra del tempo: sta sulla mappa, dove si guarda, e non sopra il
   cursore, dove sul telefono lo copriva il dito. Un terzo dall'alto e non
   al centro esatto, perché al centro c'e' di solito San Marino, cioe'
   proprio cio' che si sta guardando cambiare. Lo crea app.js
   (getScrubMapLabel) dentro #map-container. */
body.page-forecast .scrub-map-label {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: var(--fc-z-fumetti-mappa);
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(15, 20, 28, 0.82);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
body.page-forecast .scrub-map-label.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
[data-theme="light"] body.page-forecast .scrub-map-label {
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
}
/* Riquadro «Mappa non caricata»: spiegazione e «Riprova» (#1130 punto 1.4) */
body.page-forecast .map-error-overlay { color: var(--text-secondary); text-align: center; padding: 0 24px; }
body.page-forecast .map-error-overlay span { font-size: 16px; font-weight: 600; color: var(--text-primary); }
body.page-forecast .map-error-overlay__detail { font-size: 14px; }
body.page-forecast .map-error-overlay__retry {
  min-height: 44px; padding: 0 22px; margin-top: 4px;
  border: 0; border-radius: 22px; cursor: pointer;
  background: #1557b0; color: #fff; font: 600 15px/1 inherit; /* fisso: in scuro --primary-dark è chiaro e col bianco darebbe 2,6:1 */
}
body.page-forecast .map-error-overlay__retry:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
/* Fotogramma chiesto ma non ancora sulla mappa (#1130 punti 1.9-1.10): una
   barra sottile scorre in cima alla mappa e l'orario del titolo si attenua,
   perché l'immagine visibile è ancora quella dell'ora precedente. */
body.page-forecast.frame-pending #map-container::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: var(--fc-z-attesa-fotogramma);
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #42a5f5 50%, transparent 100%);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: msm-frame-pending 0.9s linear infinite;
}
@keyframes msm-frame-pending { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) {
  body.page-forecast.frame-pending #map-container::before { animation: none; background: #42a5f5; opacity: 0.6; }
}
body.page-forecast.frame-pending #info-valid { opacity: 0.55; transition: opacity 0.15s; }
/* Barra del tempo senza ore (es. modello riservato per l'ospite) e
   stagionali (asse in mesi): niente salti «Ora/+6h/Domani» (#1130 punto 1.15) */
body.page-forecast .timeline-scrubber.scrubber--empty .scrubber-presets,
body.page-forecast .timeline-scrubber.scrubber--empty .scrubber-thumb,
body.page-forecast .timeline-scrubber.scrubber--seasonal .scrubber-presets { visibility: hidden; }
/* #1131 punto 2.8, 09/10/2026 (approvato da Marco su anteprima): titolo
   della mappa meno carico, uguale su telefono e computer, Semplice e Pro.
   Restano il parametro (grande), il modello (sempre visibile, decisione di
   Marco dell'08/10) e la validita', ora in evidenza. Escono corsa,
   fornitore e dettaglio tecnico: stanno in «Dettagli previsione» (pulsante
   © sulla mappa, app.js renderMapInfoPopover). Sul telefono in Pro il
   titolo passa da 3 righe a 2 (63 -> 52 px).
   La corsa torna nel titolo solo come avviso arancione, quando quella
   guardata non e' la piu' recente (`.corsa-vecchia`, messa da app.js), o
   nel confronto per ciclo comune.
   🪤 Il dettaglio («accumulo 6h · suolo») spesso ripeteva il nome e a
      volte era sbagliato («istantaneo» per «Neve equiv. 3h»): era nascosto
      qui, e dal 12/10/2026 (#1210) non c'e' piu' nemmeno nella pagina. Le
      finestre di accumulo restano visibili: le scrive la validita'
      («06:00–12:00»). */
body.page-forecast #map-info-bar #info-run-wrap:not(.corsa-vecchia):not(.ciclo-comune) { display: none !important; }
/* 🪤 app.css nasconde la corsa in Semplice sul telefono (!important): l'avviso
   della corsa vecchia deve vedersi anche li'. Non nel confronto fra
   modelli, dove ogni riquadro ha la sua corsa. */
body.page-forecast #map-info-bar:not(.map-info-bar--compare-model) #info-run-wrap.corsa-vecchia:not(.fuori-riga) { display: inline-flex !important; }
/* 🪤 Fra 768 e 999 px (tablet in verticale) il titolo in una riga non ci
   stava: a 820 px la zona offre 296 px e il testo ne chiede 391, e l'ora
   valida finiva fuori vista. Era cosi' anche prima del 2.8, con piu'
   testo. Qui il titolo va su due righe come sul telefono (parametro sopra,
   modello e validita' sotto) e la barra resta alta 45 px. */
@media (min-width: 768px) and (max-width: 999px) {
  body.page-forecast #map-info-bar .map-info-bar__left {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1px; padding-top: 3px; padding-bottom: 3px;
  }
  body.page-forecast #map-info-bar .map-info-bar__headline,
  body.page-forecast #map-info-bar .map-info-bar__sub { padding: 0 10px; }
  body.page-forecast #map-info-bar .map-info-bar__sub > span:first-child {
    border-left: 0; margin-left: 0; padding-left: 0;
  }
}
body.page-forecast #map-info-bar .info-model__centro { display: none; }
body.page-forecast #map-info-bar #info-valid { color: #fff; font-weight: 600; }
html[data-theme="light"] body.page-forecast #map-info-bar #info-valid { color: var(--text-primary); }
body.page-forecast #map-info-bar .corsa-vecchia #info-run {
  font-size: 10px; font-weight: 600; line-height: 1.3;
  padding: 1px 6px; border-radius: 8px; white-space: nowrap;
  color: #fbbf24; background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.5);
  cursor: pointer;
  pointer-events: auto;
}
html[data-theme="light"] body.page-forecast #map-info-bar .corsa-vecchia #info-run {
  color: #92400e; background: rgba(245, 158, 11, 0.16); border-color: rgba(180, 83, 9, 0.45);
}
/* Pulsanti delle ultime corse dentro «Dettagli previsione» */
body.page-forecast .map-info-popover__corse { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
body.page-forecast .map-info-popover__corsa {
  font: inherit; font-size: 11px; line-height: 1.3;
  min-height: 26px; padding: 2px 8px; border-radius: 13px;
  background: transparent; color: inherit; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
body.page-forecast .map-info-popover__corsa.attiva {
  background: var(--primary); border-color: var(--primary); color: #fff; cursor: default;
}
body.page-forecast .map-info-popover__corsa:disabled { opacity: 0.45; cursor: default; }
html[data-theme="light"] body.page-forecast .map-info-popover__corsa:not(.attiva) { border-color: rgba(0, 0, 0, 0.25); }

/* #1131 punto 2.11: salto rapido che la corsa non raggiunge (es. «Domani»
   con AROME-PI Nowcast, 6 h). Spento ma toccabile: il tocco dice perche'. */
body.page-forecast .scrubber-preset.scrubber-preset--spento {
  opacity: 0.4; cursor: default;
}
/* Legenda a classi nella colonna VERTICALE (10/10/2026, foto di Marco su
   AROME-PI): app.js aggiunge copie invisibili delle etichette
   (.legend-bar__ticks-sizer) che danno alla colonna la larghezza della piu'
   lunga. Alte 0, mai visibili, mai cliccabili. */
body.page-forecast .legend-bar__ticks-sizer {
  display: block; height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
}
body.page-forecast .legend-bar__ticks-sizer > .legend-bar__tick {
  position: static; display: block; transform: none; height: 0; line-height: 0;
}
body.page-forecast .legend-container--vertical .legend-bar__ticks-sizer { overflow: visible; }
/* #1131 punto 2.10 (09/10/2026): la «i» del parametro.
   Il fumetto e' fixed (posizione da app.js): dentro .map-info-bar__headline,
   che ha overflow hidden, veniva tagliato e sul telefono non si vedeva.
   In Semplice: frase piana, poi «Dettagli tecnici» che apre il testo tecnico.
   Il fumetto e' scuro anche in tema chiaro (come gli altri riquadri, #1132
   punto 3.1): i bordi chiari qui sotto valgono per entrambi i temi. */
body.page-forecast .param-desc-tooltip {
  position: fixed;
  max-width: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 13px;
  line-height: 1.45;
  z-index: var(--fc-z-fumetto-descrizione);
}
body.page-forecast .param-desc-tooltip__piana { font-size: 14px; line-height: 1.45; }
body.page-forecast .param-desc-tooltip__tecnica { white-space: pre-line; }
body.page-forecast .param-desc-tooltip__piana + .param-desc-tooltip__piu { margin-top: 8px; }
body.page-forecast .param-desc-tooltip__piu {
  font: inherit; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 32px; padding: 0 10px; border-radius: 16px;
  background: transparent; color: inherit; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
body.page-forecast .param-desc-tooltip__piu::after { content: "▸" / ""; font-size: 10px; }
body.page-forecast .param-desc-tooltip__piu[aria-expanded="true"]::after { content: "▾" / ""; }
body.page-forecast .param-desc-tooltip__piu + .param-desc-tooltip__tecnica {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px; opacity: 0.9;
}
/* La «i» era 14 px a opacita' 0.45: quasi invisibile e difficile da
   toccare. Piu' leggibile, e un'area di tocco di 40 px che non sposta niente. */
/* 10/10: anche a 0.7 sul telefono vero restava grigio su barra grigia
   (in app.css: colore secondario + scale 0.8). Ora stesso blu del nome del
   modello, che e' l'altra cosa toccabile della barra, a piena opacita'. */
body.page-forecast .map-info-bar .param-desc-icon {
  opacity: 1; transform: none; position: relative; color: #90caf9;
}
[data-theme="light"] body.page-forecast .map-info-bar .param-desc-icon { color: var(--primary-dark); }
body.page-forecast .map-info-bar .param-desc-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; transform: translate(-50%, -50%);
}

/* ============================================================
   7. Bersagli di tocco da 44 px (#1132 punto 3.3, 10/10/2026)
   ============================================================
   Misurato a 393x851 con elementFromPoint (l'area che risponde davvero
   al dito, pseudo-elementi compresi): 16 comandi su 23 sotto i 44 px
   sulla pagina, tutte le righe di «Mappe» (31-35), il menu dei modelli
   (40), le Impostazioni (22), le corse di «Dettagli previsione» (26).
   Due modi, a seconda di quanto spazio c'e':
   - dove lo spazio c'e' (elenchi, Impostazioni) il comando diventa
     alto 44;
   - dove la misura visibile conta (la riga sopra la barra del tempo,
     le pastiglie) l'aspetto resta quello e l'area di tocco la allarga
     uno pseudo-elemento trasparente. Ogni allargamento si ferma a meta'
     dello spazio verso il vicino: nessun comando ruba il tocco a un altro.
   🪤 app.css (blocco «Touch targets», ≈11099) fa la stessa cosa con
   `pointer-events: none` sullo pseudo-elemento: cosi' non allarga niente.
   Qui sotto vale per le frecce delle corse; per le altre pagine e' #1132.
   Restano sotto i 44 px, con un'alternativa da 44 (WCAG 2.5.8, eccezione
   «equivalente»): il nome del modello, «UTC» e la «i» nel titolo. Il
   titolo e' alto 45 px per DUE righe, e ogni riga taglia il testo lungo
   (overflow: hidden), quindi l'area non puo' uscire dalla riga. Il
   modello si cambia anche da «Mappe», il fuso da Impostazioni, la
   descrizione dalla «i» dell'elenco dei parametri. */
@media (max-width: 767px) {
  /* La riga sopra la barra del tempo: 754-798 a 393 px, fra il bordo
     della barra (756) e i giorni (796, testo non toccabile). Misure
     visibili + spazi da 8, contati perche' a 390 px ci stia tutto:
     salti 18 + 36 + 8 + 36 + 8 + «Domani» = ~160; comandi 6 + 36 + 8 +
     44 + 8 + 36 + 8 + 36 = 182 da destra; il lucchetto degli ospiti nel
     mezzo, largo 44 di tocco. */
  body.page-forecast .scrubber-presets { gap: 8px; }
  body.page-forecast .scrubber-preset { min-width: 36px; justify-content: center; }
  /* ::before e non ::after: l'::after di «Ora» e' il pallino rosso.
     🪤 lo pseudo-elemento parte dal bordo INTERNO: con il bordo da 1 px
     -9/-5 vuol dire 8 e 4 oltre il pulsante. z-index 1: senza, i giorni
     («Ven 9», dopo nel documento) coprivano gli ultimi 2 px in basso. */
  body.page-forecast .scrubber-preset::before {
    content: '';
    position: absolute;
    inset: -9px -5px;
    z-index: 1;
  }
  /* z-index sul pulsante e non solo sullo pseudo-elemento: «Domani»
     spento ha opacity < 1, che lo chiude in un suo livello */
  body.page-forecast .scrubber-preset { position: relative; z-index: 1; }
  body.page-forecast #controls { right: 6px; gap: 8px; }
  body.page-forecast #controls #prev-btn,
  body.page-forecast #controls #next-btn { width: 36px; min-width: 36px; }
  body.page-forecast #controls #play-btn { width: 44px; min-width: 44px; }
  /* inset: auto: app.css gli da' top 2 / left 4 (era assoluto accanto
     al play), che con position: relative lo spostavano di 4 px */
  body.page-forecast #controls #speed-btn { width: 36px; inset: auto; }
  body.page-forecast #controls .btn,
  body.page-forecast #controls #speed-btn { position: relative; }
  body.page-forecast #controls .btn::after,
  body.page-forecast #controls #speed-btn::after {
    content: '';
    position: absolute;
    inset: -7px -5px;
    z-index: 1;
  }
  /* lucchetto: 28 visibili, tocco da w-230 a w-186 (dove comincia
     «indietro»). Sotto i 390 px si accavallerebbe a «Domani»: sparisce,
     e la frase intera compare comunque al limite (.al-limite). */
  body.page-forecast #guest-forecast-limit:not(.al-limite) { right: 194px; }
  body.page-forecast #guest-forecast-limit:not(.al-limite)::after {
    content: '';
    position: absolute;
    inset: -9px;
    z-index: 1;
  }
  /* il «©» (26 px) sta 8 px sopra la barra: il tocco cresce verso
     l'alto, e sotto si ferma a 2 px dalla riga dei comandi */
  body.page-forecast #map-info-btn::after {
    content: '';
    position: absolute;
    top: -15px; bottom: -5px; left: -10px; right: -10px;
  }
  /* La barra del tempo: l'area di tocco del binario (::before, sezione
     della barra Semplice) diventava di 8 px quando la corsa e' ancora in
     elaborazione: app.css usa lo stesso ::before per la scritta «In
     elaborazione…», con `pointer-events: none`. z-index 1 anche fuori
     dall'elaborazione: senza, le ore (dopo il binario) coprivano la
     meta' bassa dell'area. Giorni e ore non si toccano. */
  body.page-forecast .scrubber-track::before {
    pointer-events: auto;
    z-index: 1;
  }
  /* Intestazione e pastiglie: l'aspetto resta, il tocco arriva a 44
     dentro la fascia (intestazione 0-56, pastiglie 56-103). */
  body.page-forecast .home-header__brand,
  body.page-forecast .quick-param-chip { position: relative; }
  body.page-forecast .home-header__brand::after,
  body.page-forecast .quick-param-chip::after {
    content: '';
    position: absolute;
    inset: -8px 0;
  }
  body.page-forecast .quick-param-chip::after { inset: -8px -5px; }
}
/* Il «1x» sul computer: era un bollino da 14x10 px con testo da 8 px
   nell'angolo del play (app.css .play-speed-label), e col mouse si
   prendeva il play. Come sul telefono (scelta di Marco del 09/10): un
   pulsante a sé dopo «avanti», alto come le frecce. */
@media (min-width: 768px) {
  body.page-forecast #controls .play-speed-wrap { display: contents; }
  body.page-forecast #controls #speed-btn {
    order: 1;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  body.page-forecast #controls #speed-btn:hover { background: rgba(255, 255, 255, 0.16); }
  html[data-theme="light"] body.page-forecast #controls #speed-btn {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.18);
    text-shadow: none;
  }
}
/* !important: app.js scrive `display: flex` nello style dell'elemento
   (una regola dei 359 px senza !important, per questo, non agiva: tolta il
   12/10/2026, #1210) */
@media (max-width: 389px) {
  body.page-forecast #guest-forecast-limit:not(.al-limite) { display: none !important; }
}
@media (pointer: coarse) {
  /* Elenchi: qui c'e' posto, i comandi diventano alti 44 */
  body.page-forecast .sidebar__cat-header,
  body.page-forecast .sidebar__param-item,
  body.page-forecast #model-selector-trigger,
  body.page-forecast .sidebar__admin-link,
  body.page-forecast .simple-model-dropdown__item { min-height: 44px; }
  body.page-forecast #param-search { min-height: 44px; }
  body.page-forecast .sidebar__pl-level { min-height: 44px; min-width: 44px; }
  /* frecce delle corse: 36 + 2 di spazio + 36. Lo spazio sale a 8 (a
     sinistra c'erano 80 px liberi) e l'area da 44 di app.css comincia
     a funzionare: pointer-events */
  body.page-forecast .sidebar__run-nav { gap: 8px; }
  body.page-forecast .sidebar__run-nav-btn::after { pointer-events: auto; }
  /* Impostazioni: gruppi a segmenti, chiudi, cursore dell'opacita' */
  body.page-forecast .settings-toggle-btn { min-height: 44px; min-width: 44px; }
  body.page-forecast .settings-panel__close { min-width: 44px; min-height: 44px; }
  body.page-forecast #settings-weather-opacity { height: 44px; }
  /* «Dettagli previsione»: le ultime 4 corse e la ✕ */
  body.page-forecast .map-info-popover__corsa { min-height: 44px; }
  body.page-forecast .map-info-popover__close,
  body.page-forecast .contextual-hint__close { position: relative; }
  body.page-forecast .map-info-popover__close::after,
  body.page-forecast .contextual-hint__close::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
  /* la ✕ sta a 10 px dal bordo alto del riquadro, che taglia
     (overflow: hidden): l'area scende invece di restare centrata */
  body.page-forecast .map-info-popover__close::after { top: -9px; transform: translateX(-50%); }
  /* «Tutti i crediti e le licenze · Privacy»: testo da 12 px. Il margine
     negativo restituisce l'altezza aggiunta: la riga non si muove */
  body.page-forecast .map-info-popover__footer a {
    display: inline-block;
    padding: 16px 5px;
    margin: -16px -5px;
  }
}

/* 8. Barra del tempo come cursore (#1132 punto 3.5, 10/10/2026): col Tab
   si arriva su .scrubber-track, che ha role="slider" (app.js,
   aggiornaCursoreTempo). L'anello deve vedersi: la barra e' alta 8 px,
   l'anello le gira intorno a 4 px. */
body.page-forecast .scrubber-track[role="slider"]:focus { outline: none; }
body.page-forecast .scrubber-track[role="slider"]:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 4px;
}

/* 9. Niente righine nella barra in alto (10/10/2026, Marco con una
   schermata del telefono: «righine che evidenziano il bordo del
   rettangolo del parametro e anche del bottone di sinistra, ma non
   stanno su tutti i quattro lati»; poi «Elimina i bordi sottili»).
   Erano tre: la cornice di 1 px intorno alla zona del titolo (app.css,
   che in chiaro diventa nera 0,12 alla riga 177 qui sopra) — in alto e in
   basso tocca il bordo della barra e si vedeva a pezzi —, il separatore a
   destra di «Mappe» e quello a sinistra degli strumenti. Le zone restano
   separate dallo spazio. La riga SOTTO la barra resta: separa la barra
   dalla mappa. L'id serve a battere le regole del tema chiaro. */
body.page-forecast #map-info-bar .map-info-bar__left { border: 0; }
body.page-forecast #map-info-bar .pagina__controlli--in-barra { border-right: 0; }
body.page-forecast #map-info-bar .map-info-bar__right { border-left: 0; }

/* 10. «Principale / Scenari» e' un comando (10/10/2026, Marco: «manca il
   bottone ensemble per molti modelli per i quali le mappe ensemble
   esistono»): apre il menu «Previsione principale / Scenari possibili»
   (app.js, renderSimpleSourceDropdown). Prima in Semplice era nascosto e
   in Pro era un'etichetta muta. Le due eccezioni che servivano in Pro
   (clic sul segmento muto, zona del titolo che tagliava il menu) sono
   cadute con la pagina unica (#1133 punto 4.1). */

/* 11. Righe dei modelli nella barra «Mappe» (#1132 punto 3.7, 10/10/2026):
   la parte principale della riga e' diventata un <button> (app.js,
   renderModelItem) per poter scegliere il modello con la tastiera. Qui
   il pulsante perde l'aspetto da pulsante e resta la riga di prima. */
body.page-forecast .model-selector__item-main {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  align-self: stretch;
}
/* Un fornitore lungo («Arpae-SIMC / ISMAR-CNR (MeteoHub)», SHYFEM-ICON)
   non andava a capo e allargava l'elenco di 54 px: barra di scorrimento
   orizzontale sotto i modelli. Ora si accorcia coi puntini; il testo
   intero resta nel nome letto dal lettore di schermo. */
body.page-forecast .model-selector__item-badge {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-forecast .model-selector__item-main:focus-visible,
body.page-forecast .model-selector__fav-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 12. «Riduci movimento» del dispositivo (#1132 punto 3.8, 10/10/2026).
   Prima lo rispettavano solo alcuni pezzi (legenda, pastiglie, barra del
   tempo, fotogramma in arrivo): restavano il luccichio della mappa in
   caricamento (app.css map-shimmer), il puntino pulsante della posizione,
   la barra di avanzamento, l'etichetta dell'ora che si anima. Una regola
   sola per tutta la pagina, cosi' vale anche per le animazioni future.
   🔑 0.01ms e non `none`: gli eventi animationend/transitionend arrivano
      lo stesso, e il codice che li aspetta (chiusure, comparse) non si
      blocca. Finita l'unica iterazione l'elemento torna allo stile di
      base: la barra di avanzamento resta un tratto fermo, visibile.
   Restano: Play (lo avvia chi guarda), i movimenti della mappa (MapLibre
   li fa di scatto da se', nessuno e' marcato `essential`), le particelle
   del vento che partono spente (app.js, preferenze) ma si accendono. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body.page-forecast *,
  body.page-forecast *::before,
  body.page-forecast *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 13. Ritocchi (#1132 punti 3.9 e 3.10, 10/10/2026), approvati da Marco
   su un'anteprima prima/dopo. */

/* «meteo.sm»: sul computer `bottom: 66px` (sezione del watermark, in
   alto) era l'altezza di una vecchia barra del tempo: la scritta finiva
   DENTRO la barra di 93 px, sopra i pulsanti di riproduzione. Ora sta
   sulla mappa appena sopra la barra (--fc-barra-h, misurata da app.js).
   Sul telefono passava sopra il pannello «Due modelli»: z-index 400
   contro i 20 di #map-info-bar. 12 = sopra mappe, confronto e cursore
   del confronto (11), sotto fumetti (15) e barre con i pannelli (20). */
body.page-forecast .map-watermark { z-index: var(--fc-z-filigrana); }
@media (min-width: 768px) {
  body.page-forecast .map-watermark { bottom: calc(var(--fc-barra-h, 93px) + 10px); }
}

/* Riga dei parametri sul computer: il vetro di app.css (rgba .30, «Quick
   params: glassmorphism») sopra una mappa chiara lasciava il testo
   bianco a ~1,6:1. Stesso vetro del telefono (sezione del punto 2.7):
   ~8:1 nel caso peggiore (mappa bianca). La misura automatica dei
   contrasti non lo vedeva: prende come fondo il body, non la mappa. */
@media (min-width: 768px) {
  body.page-forecast .quick-params { background: rgba(12, 17, 24, 0.88); }
  [data-theme="light"] body.page-forecast .quick-params { background: rgba(255, 255, 255, 0.92); }
}

/* Strumenti sul computer: 9 icone (piu' vento e fronti, a seconda del
   modello) da 28 px con disegno da 16 e bianco all'85%. Ora 36 px,
   disegno 20, bianco pieno. Le righe del pannello
   «Strumenti» hanno le stesse classi: escluse. */
@media (min-width: 1000px) {
  body.page-forecast .map-info-bar__right :is(.map-toolbar__btn, .map-toolbar__share-btn, .map-toolbar__compare-btn, .map-toolbar__fullscreen-btn, .map-toolbar__wind-btn):not(.map-more-panel *) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  html:not([data-theme="light"]) body.page-forecast .map-info-bar__right :is(.map-toolbar__btn, .map-toolbar__share-btn, .map-toolbar__compare-btn, .map-toolbar__fullscreen-btn, .map-toolbar__wind-btn):not(.map-more-panel *) {
    color: #fff;
  }
  body.page-forecast .map-info-bar__right :is(.map-toolbar__btn, .map-toolbar__share-btn, .map-toolbar__compare-btn, .map-toolbar__fullscreen-btn, .map-toolbar__wind-btn):not(.map-more-panel *) svg {
    width: 20px !important;
    height: 20px !important;
  }
  /* In chiaro condivisione, confronti, schermo intero e vento/fronti
     avevano un riquadro bianco con bordo (app.css), le altre icone no. */
  [data-theme="light"] body.page-forecast .map-info-bar__right :is(.map-toolbar__btn, .map-toolbar__share-btn, .map-toolbar__compare-btn, .map-toolbar__fullscreen-btn, .map-toolbar__wind-btn):not(.map-more-panel *):not(.active):not([aria-pressed="true"]) {
    color: var(--text-primary);
    background: transparent;
    border-color: transparent;
  }
  [data-theme="light"] body.page-forecast .map-info-bar__right :is(.map-toolbar__btn, .map-toolbar__share-btn, .map-toolbar__compare-btn, .map-toolbar__fullscreen-btn, .map-toolbar__wind-btn):not(.map-more-panel *):not(.active):not([aria-pressed="true"]):hover {
    background: rgba(0, 0, 0, 0.06);
  }
  /* Acceso, in chiaro era un riquadro bianco con l'icona grigia: piu'
     spento di quello spento. Come in scuro: fondo pieno, icona bianca. */
  [data-theme="light"] body.page-forecast .map-info-bar__right :is(.map-toolbar__btn, .map-toolbar__share-btn, .map-toolbar__compare-btn, .map-toolbar__fullscreen-btn, .map-toolbar__wind-btn):not(.map-more-panel *):is(.active, [aria-pressed="true"]) {
    background: var(--fc-pieno, #1967d2);
    border-color: var(--fc-pieno, #1967d2);
    color: #fff;
  }
}

/* Barra del tempo sul computer: la scritta «In elaborazione…» di app.css
   (.processing .scrubber-track::before, 8 px gialla, centrata sulle ore
   non ancora pronte) stava sulla riga dei giorni e copriva «Mar 13»; in
   chiaro, giallo su bianco, non si leggeva. Sul telefono e' spenta dal
   punto 3.3 (sezione 7). Restano il tratteggio giallo-nero e il
   contatore «15/33h». */
@media (min-width: 768px) {
  body.page-forecast .processing .scrubber-track::before { content: none; }
}

/* Pastiglie che escono dallo schermo: niente diceva che la riga scorre.
   Ombra con freccia sul bordo dove c'e' altro, a destra e (dopo aver
   scorso) a sinistra. Classi scorre-sx / scorre-dx dallo script
   «Pastiglie che scorrono» in fondo alla pagina. Pseudo-elementi sticky
   dentro la riga: restano anche quando app.js riscrive le pastiglie.
   -12px = il padding della riga, che cosi' resta coperto. */
body.page-forecast .quick-params::before,
body.page-forecast .quick-params::after {
  content: '';
  position: sticky;
  z-index: 1;
  flex: 0 0 40px;
  align-self: stretch;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  background-repeat: no-repeat;
  background-size: 20px 20px, 100% 100%;
  --fc-pastiglie-fondo: rgba(12, 17, 24, 0.96);
  --fc-pastiglie-freccia-sx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M14.71 6.71 13.3 5.3 6.59 12l6.71 6.7 1.41-1.41L9.41 12z'/%3E%3C/svg%3E");
  --fc-pastiglie-freccia-dx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9.29 6.71 10.7 5.3 17.41 12l-6.71 6.7-1.41-1.41L14.59 12z'/%3E%3C/svg%3E");
}
[data-theme="light"] body.page-forecast .quick-params::before,
[data-theme="light"] body.page-forecast .quick-params::after {
  --fc-pastiglie-fondo: rgba(255, 255, 255, 0.97);
  --fc-pastiglie-freccia-sx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23202124'%3E%3Cpath d='M14.71 6.71 13.3 5.3 6.59 12l6.71 6.7 1.41-1.41L9.41 12z'/%3E%3C/svg%3E");
  --fc-pastiglie-freccia-dx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23202124'%3E%3Cpath d='M9.29 6.71 10.7 5.3 17.41 12l-6.71 6.7-1.41-1.41L14.59 12z'/%3E%3C/svg%3E");
}
body.page-forecast .quick-params::before {
  order: -1;
  left: -12px;
  margin-right: -48px;
  background-image: var(--fc-pastiglie-freccia-sx), linear-gradient(to left, transparent, var(--fc-pastiglie-fondo) 60%);
  background-position: 4px center, 0 0;
}
body.page-forecast .quick-params::after {
  right: -12px;
  margin-left: -48px;
  background-image: var(--fc-pastiglie-freccia-dx), linear-gradient(to right, transparent, var(--fc-pastiglie-fondo) 60%);
  background-position: right 4px center, 0 0;
}
body.page-forecast .quick-params.scorre-sx::before,
body.page-forecast .quick-params.scorre-dx::after { opacity: 1; }

/* Mappa riservata agli ospiti (punto 3.10): riquadro di app.js
   aggiornaMappaRiservata al posto dell'immagine di blocco stirata sui
   confini del dominio. Stesso vetro della legenda; il pulsante usa il
   fondo pieno --fc-pieno (sezione «Contrasti»). */
body.page-forecast .map-riservata-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--fc-z-velo-mappa);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(12, 17, 28, 0.35);
}
body.page-forecast .map-riservata-overlay.hidden { display: none; }
[data-theme="light"] body.page-forecast .map-riservata-overlay { background: rgba(245, 247, 250, 0.45); }
body.page-forecast .map-riservata-card {
  pointer-events: auto;
  max-width: 360px;
  margin: 0 16px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(12, 17, 24, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color: #fff;
  text-align: center;
}
body.page-forecast .map-riservata-card__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.14);
  color: #f5a623;
}
body.page-forecast .map-riservata-card__titolo { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
body.page-forecast .map-riservata-card__motivo { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); margin-bottom: 14px; }
body.page-forecast .map-riservata-card__accedi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 22px;
  background: var(--fc-pieno, #1967d2);
  color: #fff;
  font: 600 15px/1 inherit;
  cursor: pointer;
}
body.page-forecast .map-riservata-card__accedi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.page-forecast .map-riservata-card__nota { margin-top: 12px; font-size: 12.5px; color: rgba(255, 255, 255, 0.66); }
[data-theme="light"] body.page-forecast .map-riservata-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  color: #202124;
}
[data-theme="light"] body.page-forecast .map-riservata-card__icona { color: #a15c00; }
[data-theme="light"] body.page-forecast .map-riservata-card__motivo { color: #3c4043; }
[data-theme="light"] body.page-forecast .map-riservata-card__nota { color: #5f6368; }
[data-theme="light"] body.page-forecast .map-riservata-card__accedi:focus-visible { outline-color: #1967d2; }

/* 14. Senza rete (#1133 punto 4.4) =====================================
   Riquadro «Questa mappa non è salvata» (app.js mostraMappaNonSalvata):
   stessa famiglia del riquadro delle mappe riservate (classi map-riservata-*),
   col fondo della mappa che resta visibile sotto il velo. «Riprova» e' un
   pulsante secondario di solo testo. L'etichetta della corsa «salvata · corsa
   …» usa lo stile arancione di .corsa-vecchia (app.js mette tutte e due le classi). */
body.page-forecast .map-non-salvata .map-riservata-card__icona { background: rgba(138, 180, 248, 0.16); color: #8ab4f8; }
[data-theme="light"] body.page-forecast .map-non-salvata .map-riservata-card__icona { background: rgba(25, 103, 210, 0.1); color: #1967d2; }
body.page-forecast .map-non-salvata .map-riservata-card__motivo { margin-bottom: 12px; }
body.page-forecast .map-non-salvata__riprova {
  display: block;
  min-height: 44px;
  margin: 4px auto 0;
  padding: 0 16px;
  border: 0;
  background: none;
  color: #8ab4f8;
  font: 600 15px/1 inherit;
  cursor: pointer;
}
body.page-forecast .map-non-salvata__riprova:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 22px; }
[data-theme="light"] body.page-forecast .map-non-salvata__riprova { color: #1967d2; }
[data-theme="light"] body.page-forecast .map-non-salvata__riprova:focus-visible { outline-color: #1967d2; }

/* 15. Pagina unica, catalogo (#1133 punto 4.1) =========================
   I parametri da esperti stanno in fondo a ogni categoria, sotto il
   titoletto «Per esperti» (app.js renderSidebarParams/dividiPerEsperti).
   Prima Semplice li toglieva e mostrava «Altri N parametri per esperti in
   modalità Pro»: quella riga non c'e' piu'. Il titoletto riprende le
   etichette dei gruppi (.sidebar__pl-label), in maiuscoletto per non
   sembrare una voce da toccare. */
body.page-forecast .sidebar__esperti {
  margin-top: 8px;
  border-top: 1px dashed var(--border);
}
body.page-forecast .sidebar__esperti-titolo {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* Categoria tutta da esperti (livelli in hPa, dati fissi): niente riga sopra. */
body.page-forecast .sidebar__cat-params > .sidebar__esperti:first-child { margin-top: 0; border-top: 0; }
body.page-forecast .sidebar__esperti.hidden-by-search { display: none; }

/* 16. Pagina unica, barra «Mappe» e corse in Semplice (#1133 punto 4.1) ===
   Sul computer la barra di Semplice ha due stati (app.js barraMappeFissata):
   chiusa = classe `collapsed`, nascosta (app.css «Simple mode: hide sidebar
   on desktop»), e «Mappe» nel titolo la apre SOPRA la mappa (regola «Altro…»
   del 2.5 qui sopra); fissata = senza `collapsed`, colonna della pagina
   accanto alla mappa. Il pulsante in cima alla barra dice «Tieni aperto» o
   «Chiudi». Le corse (blocco «Aggiornamento» e «Elaborazione in corso…»), dal
   2.6 tolte in Semplice, tornano: sul telefono chiuse in una riga. */
.sidebar__fissa,
.sidebar__runs-espandi { display: none; }
@media (min-width: 768px) {
  body.page-forecast.mode-simple .sidebar:not(.collapsed) { display: flex; }
  body.page-forecast.mode-simple #map-info-bar #sidebar-toggle {
    display: inline-flex;
    align-items: center;
  }
  body.page-forecast.mode-simple .sidebar .sidebar__collapse-icona { display: none; }
  body.page-forecast.mode-simple .sidebar__collapse-btn {
    justify-content: flex-end;
    min-height: 44px;
    padding: 0 12px;
    font: 600 13px/1 var(--font-display, inherit);
  }
  body.page-forecast.mode-simple .sidebar.collapsed .sidebar__fissa--apri,
  body.page-forecast.mode-simple .sidebar:not(.collapsed) .sidebar__fissa--chiudi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}
@media (max-width: 767px) {
  body.page-forecast.mode-simple .sidebar__runs .sidebar__section-header > .sidebar__runs-titolo { display: none; }
  body.page-forecast.mode-simple .sidebar__runs-espandi {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
  }
  /* Due righe: «Aggiornamento ▾» e sotto la corsa guardata. Su una riga
     sola, nei 280 px della barra, la data andava a capo (e a 4 righe con
     le frecce dell'elenco aperto). */
  body.page-forecast.mode-simple .sidebar__runs-espandi { flex-wrap: wrap; row-gap: 2px; padding: 4px 0; }
  body.page-forecast .sidebar__runs-riassunto {
    order: 3;
    flex-basis: 100%;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--text-primary);
  }
  body.page-forecast .sidebar__runs-espandi svg { order: 2; flex-shrink: 0; transition: transform 0.15s; }
  body.page-forecast.mode-simple .sidebar__runs.aperte .sidebar__runs-espandi svg { transform: rotate(180deg); }
  body.page-forecast.mode-simple .sidebar__runs:not(.aperte) .run-selector,
  body.page-forecast.mode-simple .sidebar__runs:not(.aperte) .sidebar__run-nav { display: none; }
  body.page-forecast.mode-simple .sidebar__runs:not(.aperte) .sidebar__section-header { margin-bottom: 0; }
}

/* 17. Pagina unica, «+N h» sul cursore di Semplice (#1133 punto 4.1) ======
   Come la pastiglia della vecchia barra di Pro (fondo pieno --fc-pieno del
   blocco «Contrasti»): quante ore dopo l'inizio della corsa cade la mappa.
   Nel titolo resta «adesso / fra 3 ore», che dice di piu' a chiunque. Il
   giorno che le starebbe sotto si nasconde (app.js
   liberaGiornoSottoCursore). */
body.page-forecast .scrubber-thumb__anticipo {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  background: var(--fc-pieno, var(--primary));
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.3px;
  pointer-events: none;
}
body.page-forecast .scrubber-thumb__anticipo[hidden] { display: none; }
body.page-forecast .scrubber-days__label.sotto-cursore { opacity: 0; }


/* 18. «La mia posizione» sul telefono, nel pannello «Strumenti» (#1199) ====
   app.css nasconde #geo-btn sotto i 768 px con `display: none !important`
   (regola scritta per solar.html). Nel pannello torna una riga come le
   altre, larga quanto il pannello perche' sta da sola in cima.
   forecast-topbar.js lo sposta qui solo sul telefono. */
body.page-forecast .map-more-panel .map-more-panel__voci > #geo-btn {
  display: flex !important;
  grid-column: 1 / -1;
}


/* 19. Telefoni sotto i 340 px (#1210 b) ===================================
   A 320 px «Domani» (106-153) finiva sotto la freccia «indietro» (138):
   15 px di sovrapposizione, misurati il 12/10/2026. Da 338 px in su ci sta.
   Gli spazi da 8 diventano 4, fra i salti rapidi e fra i comandi: «Domani»
   finisce a 145 e «indietro» comincia a 150. Le aree di tocco (8 oltre il
   bordo) restano; fra i due si toccano solo nei 5 px di mezzo.
   Prima c'erano «misure compatte» per i telefoni fino a 399 px, battute da
   regole piu' avanti e quindi senza effetto (tolte l'11/10, #1133 punto 4.2):
   per questo la cura sta in fondo al foglio. */
@media (max-width: 339px) {
  body.page-forecast .scrubber-presets { gap: 4px; }
  body.page-forecast #controls { gap: 4px; }
}