/* ═══════════════════════════════════════════════════════════════════════════
   JustMeteo — foglio di stile principale
   Struttura: token → base → layout → topbar → viste → componenti → responsive
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  --h-tab: 0px;
  --ink: #eef4fb;
  --muted: #d8e4f0;
  --faint: #b3c4d5;
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);
  --card: rgba(255, 255, 255, 0.115);
  --card-hi: rgba(255, 255, 255, 0.17);
  --sheet: rgba(10, 22, 40, 0.80);
  --ctl: rgba(255, 255, 255, 0.10);
  --ctl-strong: rgba(255, 255, 255, 0.16);
  --track: rgba(255, 255, 255, 0.10);
  --body-text: #e2ebf5;
  --fade-1: rgba(6, 14, 26, 0.92);
  --fade-mid: rgba(6, 14, 26, 0.55);
  --fade-0: rgba(6, 14, 26, 0);
  --tab-on: rgba(90, 209, 255, 0.26);
  --nube: rgba(202, 230, 255, 0.20);
  --nube-soft: rgba(202, 230, 255, 0.09);
  --acc: #5ad1ff;
  --acc-deep: #1f9fd4;
  --ind: #8b9bff;
  --warm: #ffb84d;
  --good: #4fe0a4;
  --bad: #ff6f7d;
  --sun: #ffc857;
  --cloud: #cfe0ee;
  --cloud-fill: rgba(207, 224, 238, 0.16);
  --cloud-back: rgba(207, 224, 238, 0.45);
  --moonc: #dfe8ff;
  --snowc: #dbeeff;
  --rainc: #6fc9ff;
  --sun-hi: #ffe6a3;
  --cloud-hi: #e9f3fc;
  --cloud-lo: #8ea7c0;
  --moon-hi: #f4f7ff;
  --moon-lo: #b9c6ea;
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --shadow: 0 34px 90px -26px rgba(0, 0, 0, 0.60);
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --chart-bg: #06121f;
  --night-band: rgba(139, 155, 255, 0.30);
  --dial-halo: rgba(0, 0, 0, 0.45);
  --sky-1: #060d1a;
  --sky-2: #0d2340;
  --sky-3: #071526;
  --tint: rgba(90, 209, 255, 0.30);
  font-family: Inter, "SF Pro Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis-weight: none;
}

/* Il cielo cambia con la condizione corrente e con il giorno/notte. */
body[data-sky="clear"][data-day="1"] { --sky-1:#06172c; --sky-2:#124a77; --sky-3:#0a2038; --tint:rgba(120,215,255,.34); }
body[data-sky="clear"][data-day="0"] { --sky-1:#040a16; --sky-2:#101f3d; --sky-3:#060d1d; --tint:rgba(139,155,255,.26); }
body[data-sky="cloud"] { --sky-1:#0a121e; --sky-2:#26384b; --sky-3:#0c1826; --tint:rgba(180,200,220,.20); }
body[data-sky="rain"]  { --sky-1:#050c17; --sky-2:#143046; --sky-3:#081320; --tint:rgba(90,175,230,.26); }
body[data-sky="snow"]  { --sky-1:#0a1020; --sky-2:#2b3b52; --sky-3:#0b1524; --tint:rgba(215,230,245,.22); }
body[data-sky="storm"] { --sky-1:#07080f; --sky-2:#211f3a; --sky-3:#0a0c17; --tint:rgba(150,130,255,.26); }
body[data-sky="fog"]   { --sky-1:#0c1119; --sky-2:#2f3947; --sky-3:#101720; --tint:rgba(200,210,220,.18); }

html[data-theme="light"] body[data-sky="clear"][data-day="1"] { --sky-1:#d8edff; --sky-2:#8dc4f0; --sky-3:#c3e0f8; --tint:rgba(70,170,240,.38); }
html[data-theme="light"] body[data-sky="clear"][data-day="0"] { --sky-1:#dae1f4; --sky-2:#a8b5dd; --sky-3:#cad3ea; --tint:rgba(110,128,220,.26); }
html[data-theme="light"] body[data-sky="cloud"] { --sky-1:#e4eaf1; --sky-2:#b9c6d5; --sky-3:#d7dee7; --tint:rgba(140,163,188,.24); }
html[data-theme="light"] body[data-sky="rain"]  { --sky-1:#dbe7f3; --sky-2:#a5bfd9; --sky-3:#cbdaea; --tint:rgba(60,140,205,.28); }
html[data-theme="light"] body[data-sky="snow"]  { --sky-1:#ecf3fa; --sky-2:#c7dbed; --sky-3:#ddeaf5; --tint:rgba(130,175,220,.26); }
html[data-theme="light"] body[data-sky="storm"] { --sky-1:#e2dff3; --sky-2:#b1a9dd; --sky-3:#d4d0ec; --tint:rgba(120,100,220,.26); }
html[data-theme="light"] body[data-sky="fog"]   { --sky-1:#e6e9ec; --sky-2:#c1c7cc; --sky-3:#dadde0; --tint:rgba(160,172,184,.24); }

/* Tema chiaro. "Auto" viene risolto in chiaro/scuro da app.js, così qui basta
   una sola serie di token invece di duplicarla anche nelle media query. */
html[data-theme="light"] {
  color-scheme: light;
  --ink: #0b1724;
  --muted: #3b4f64;
  --faint: #5b7086;
  --line: rgba(12, 38, 64, 0.13);
  --line-soft: rgba(12, 38, 64, 0.07);
  --card: rgba(255, 255, 255, 0.68);
  --card-hi: rgba(255, 255, 255, 0.82);
  --sheet: rgba(255, 255, 255, 0.95);
  --ctl: rgba(255, 255, 255, 0.78);
  --ctl-strong: rgba(255, 255, 255, 0.93);
  --track: rgba(12, 38, 64, 0.11);
  --body-text: #263a4e;
  --fade-1: rgba(216, 233, 250, 0.94);
  --fade-mid: rgba(216, 233, 250, 0.6);
  --fade-0: rgba(216, 233, 250, 0);
  --tab-on: rgba(11, 142, 199, 0.20);
  --nube: rgba(255, 255, 255, 0.92);
  --nube-soft: rgba(255, 255, 255, 0.46);
  --acc: #0b8ec7;
  --acc-deep: #0a7bad;
  --ind: #5a6bdc;
  --warm: #e08a10;
  --good: #0fa368;
  --bad: #d63c4a;
  --sun: #f6ab1c;
  --cloud: #7b93a9;
  --cloud-fill: rgba(123, 147, 169, 0.18);
  --cloud-back: rgba(123, 147, 169, 0.5);
  --moonc: #6b78c9;
  --snowc: #4f9ed0;
  --rainc: #1189d0;
  --sun-hi: #ffd47a;
  --cloud-hi: #ffffff;
  --cloud-lo: #8fabc6;
  --moon-hi: #eef1ff;
  --moon-lo: #97a6d8;
  --shadow: 0 30px 74px -26px rgba(18, 46, 78, 0.30);
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --chart-bg: #ffffff;
  --night-band: rgba(90, 107, 220, 0.28);
  --dial-halo: rgba(255, 255, 255, 0.9);
  --sky-1: #dbecfb;
  --sky-2: #a6cdf1;
  --sky-3: #cde2f6;
  --tint: rgba(70, 160, 220, 0.26);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--sky-1); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--sky-1);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
.app-shell {
  position: relative;
  min-height: 100dvh;
  background: transparent;
}

/* Modalità notte: la stessa matrice di colore di MoonSky, applicata a tutta
   l'interfaccia. Non è una tinta simpatica, è togliere il blu — la luce che
   costringe l'occhio a riadattarsi ogni volta che si alza lo sguardo.
   Il filtro sta sullo shell (che contiene anche il fondo, altrimenti le schede
   translucide mostrerebbero un fondo non filtrato) e, separatamente, sugli
   elementi fissi: un filtro su un antenato li ancorerebbe al documento invece
   che allo schermo. */
html[data-night] .app-shell,
html[data-night] .tabbar,
html[data-night] .toast,
html[data-night] .doc-dialog,
html[data-night] .search-results { filter: sepia(1) saturate(.7) hue-rotate(307deg) brightness(.94); }
html[data-night], html[data-night] body { background: #110e0e; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: var(--acc); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted-note { color: var(--muted); font-size: .84rem; margin: 0; }

/* Icone di interfaccia: tratto sottile, colore ereditato. */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Icone meteo. I colori sono attributi che puntano a variabili CSS: i selettori
   discendenti non attraversano lo shadow tree generato da <use>, le variabili sì. */
.wi { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }

/* Il cielo è un canvas fisso dietro tutto (vedi cielo.js). Sta fuori dallo
   shell perché in modalità Notte il filtro va applicato a lui direttamente:
   un filtro sull'antenato ancorerebbe un elemento fisso al documento. */
.cielo { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
html[data-night] .cielo { filter: sepia(1) saturate(.7) hue-rotate(307deg) brightness(.94); }

/* Una velatura tiene leggibile il testo bianco anche quando a mezzogiorno il
   cielo si accende: scurisce appena l'alto e il basso — dove stanno la barra
   dei comandi e quella delle sezioni — e lascia limpido il centro. Sta fuori
   dallo shell per lo stesso motivo del canvas: deve restare fissa allo
   schermo anche con il filtro della modalità Notte acceso. */
.velo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(132% 104% at 50% 40%, transparent 46%, rgba(0, 0, 0, .40) 100%),
    linear-gradient(180deg, rgba(4, 10, 20, .50) 0%, rgba(4, 10, 20, .06) 20%, rgba(4, 10, 20, .05) 62%, rgba(4, 10, 20, .48) 100%);
}
html[data-theme="light"] .velo {
  background:
    radial-gradient(132% 104% at 50% 40%, transparent 52%, rgba(26, 56, 92, .15) 100%),
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.04) 24%, rgba(255,255,255,.06) 60%, rgba(255,255,255,.48) 100%);
}
html[data-night] .velo { filter: sepia(1) saturate(.7) hue-rotate(307deg) brightness(.94); }



/* ───────────────────────────────── layout ───────────────────────────────── */

.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 26px;
  width: min(1520px, 100%);
  height: 100dvh;
  overflow: hidden;
  margin: 0 auto;
  padding: 22px 26px 18px;
}

.sidebar { align-self: stretch; display: flex; flex-direction: column; gap: 22px; min-height: 0; padding: 20px 16px; border: 0; border-radius: var(--r-lg); background: rgba(6, 14, 26, .5); backdrop-filter: blur(20px); }
/* Il marchio è solo la parola: niente icona accanto. "JM" prende il suo posto
   quando la barra laterale si stringe e non c'è spazio per il nome intero. */
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -.05em; }
.brand-name { white-space: nowrap; }
.brand-short { display: none; font-size: 1.05rem; letter-spacing: -.04em; color: var(--acc); }
.nav { display: grid; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 13px; border-radius: 13px; color: var(--muted); font-size: .93rem; font-weight: 600; text-align: left; transition: background .18s ease, color .18s ease; }
.nav-item:hover { background: var(--card); color: var(--ink); }
.nav-item { position: relative; }
.nav-item.is-active { background: linear-gradient(100deg, rgba(90,209,255,.20), rgba(139,155,255,.12)); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(90,209,255,.26); }
.nav-item.is-active::before { content: ""; position: absolute; left: -16px; top: 50%; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--acc); transform: translateY(-50%); }
.nav-item.is-active .ic { color: var(--acc); }
.side-foot { margin-top: auto; color: var(--faint); font-size: .74rem; line-height: 1.5; }
.side-foot p { margin: 0; }
.side-foot a { color: var(--muted); }

.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; height: 100%; }

/* ───────────────────────────────── topbar ───────────────────────────────── */

/* Una riga sola. Il nome della località non è un titolo da guardare: è il
   tasto che apre i posti salvati, e per questo porta il segno di apertura.
   Tutto il resto — posizione, aggiornamento, unità — è finito nel menu: erano
   cinque cerchi che rubavano il primo schermo senza servire ogni giorno. */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; min-height: 48px; }
.brand-top { display: none; }
@media (max-width: 900px) {
  /* Il nome del sito sta a sinistra di tutto; il luogo gli sta accanto,
     perché è il contesto, non l'identità. Su schermo stretto è il luogo a
     stringersi — il marchio è corto e non cambia mai. */
  .brand-top { display: flex; flex: none; padding: 0; font-size: .95rem; letter-spacing: -.04em; }
  .appbar { gap: 8px; min-height: 40px; }
  .appbar-tools { gap: 2px; }
  .luogo-riga { padding: 0 14px 2px; }
  .place-btn { font-size: clamp(1.35rem, 7.2vw, 1.72rem); }
  .place-btn[data-lunghezza="lungo"] { font-size: clamp(1.15rem, 5.8vw, 1.45rem); }
  .place-btn[data-lunghezza="lunghissimo"] { font-size: clamp(1rem, 4.6vw, 1.2rem); }
}
.appbar-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Nessuna pillola scura: il nome del posto sta sul cielo come tutto il
   resto. Il segno di apertura basta a dire che è un comando. */
/* Il nome del posto è il titolo della schermata: prende tutta la riga, e con
   un nome lungo è il nome a decidere, non il marchio. La freccia resta
   sempre attaccata al testo, anche quando il testo viene troncato. */
/* Il nome comincia dove comincia tutto il resto; la stella va in fondo, con
   le altre azioni. Un'azione prima del nome si legge come un segno decorativo
   davanti a un titolo, non come un comando — e rubava larghezza proprio alla
   cosa più importante della riga. */
.luogo-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; flex: none; }
.place-btn { display: flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; padding: 2px 2px 4px; border-radius: 12px; color: var(--ink); font-size: 1.72rem; font-weight: 700; letter-spacing: -.045em; line-height: 1.15; background: none; transition: opacity .18s ease; }
.place-btn:hover { opacity: .78; }
.place-btn:active { transform: scale(.985); }
.fav-btn { display: grid; place-items: center; width: 44px; height: 42px; flex: none; margin-right: 0; border-radius: 50%; color: var(--faint); transition: color .18s ease, transform .18s ease; }
.fav-btn:hover { color: var(--muted); }
.fav-btn:active { transform: scale(.9); }
.fav-btn[aria-pressed="true"] { color: var(--warm); }
.fav-btn[aria-pressed="true"] .ic { fill: currentColor; }
.place-btn span:not(.live-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-btn .caret { width: 17px; height: 17px; flex: none; align-self: center; color: var(--faint); transform: rotate(90deg); }
.updated { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.menu-val { color: var(--faint) !important; font-size: .76rem !important; }
.menu-wrap { position: relative; }
.menu-panel { position: absolute; z-index: 45; top: calc(100% + 10px); right: 0; width: min(300px, calc(100vw - 28px)); padding: 8px; border: 0; border-radius: 18px; background: var(--sheet); backdrop-filter: blur(30px) saturate(1.2); box-shadow: var(--shadow); animation: rise .18s ease; }
.menu-panel[hidden] { display: none; }
.menu-group + .menu-group { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.menu-title { margin: 6px 10px 8px; color: var(--faint); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.menu-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin: 0 6px 6px; padding: 4px; border: 0; border-radius: 999px; background: var(--card); }
.menu-seg .chip { height: 32px; padding: 0; font-size: .8rem; }
.menu-versione { margin: 8px 12px 4px; color: var(--faint); font-size: .8rem; }
.menu-versione b { color: var(--muted); font-weight: 600; }
.menu-hint { margin: -2px 12px 8px; color: var(--faint); font-size: .72rem; line-height: 1.45; }
.menu-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; padding: 0 10px; border-radius: 12px; color: var(--ink); font-size: .96rem; text-align: left; transition: background .16s ease; }
.menu-row:hover { background: var(--card-hi); }
.menu-row .ic { color: var(--acc); }
.menu-row span { flex: 1; }
.menu-row b { color: var(--muted); font-size: .8rem; font-weight: 600; }
.switch { position: relative; width: 36px; height: 21px; flex: none; border-radius: 99px; background: var(--card-hi); box-shadow: inset 0 0 0 1px var(--line); transition: background .18s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--muted); transition: transform .18s ease, background .18s ease; }
.menu-row[aria-checked="true"] .switch { background: var(--acc); box-shadow: none; }
.menu-row[aria-checked="true"] .switch::after { transform: translateX(15px); background: #fff; }

.cerca { flex: none; display: grid; gap: 8px; padding: 2px 0 4px; animation: rise .2s ease; }
.cerca[hidden] { display: none; }
.cerca-riga { display: flex; align-items: center; gap: 8px; }
.locate-row { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 14px; background: var(--sheet); backdrop-filter: blur(30px); color: var(--acc); font-size: .98rem; font-weight: 600; }
.locate-row:hover { background: var(--card-hi); }
.eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(79,224,164,.12); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(79,224,164,0); } }
.place-meta { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search { position: relative; display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--sheet); backdrop-filter: blur(30px) saturate(1.2); box-shadow: var(--shadow); transition: border-color .18s ease, background .18s ease; }
.search:focus-within { border-color: rgba(90,209,255,.5); background: var(--ctl-strong); }
.search-ic { color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--ink); font-size: 1.05rem; }
/* Il vetro della barra di ricerca stava sul cielo aperto e il testo dentro
   spariva. Il campo è l'unico posto dell'app dove si scrive: qui il fondo
   deve essere pieno, non trasparente. */
.search input::placeholder { color: var(--faint); opacity: 1; }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--faint); background: var(--track); }
.search-clear .ic { width: 14px; height: 14px; }
.search-results { position: relative; z-index: 40; max-height: min(46vh, 380px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 0; border-radius: var(--r-md); background: var(--sheet); backdrop-filter: blur(30px) saturate(1.2); box-shadow: var(--shadow); }
.search-results li { padding: 0; }
.search-results button { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 11px; text-align: left; }
.search-results button:hover, .search-results button.is-cursor { background: var(--card-hi); }
.search-results strong { font-size: 1.02rem; font-weight: 650; }
.search-results span { color: var(--muted); font-size: .86rem; }
.search-empty { padding: 12px; color: var(--muted); font-size: .86rem; }

.icon-btn { display: grid; place-items: center; min-width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink); transition: color .18s ease, background .18s ease, transform .18s ease; }
.icon-btn:hover { background: var(--card); }
.icon-btn:active { transform: scale(.94); }
.icon-btn[aria-pressed="true"] { color: var(--warm); border-color: rgba(255,184,77,.4); background: rgba(255,184,77,.14); }
.icon-btn[aria-pressed="true"] .ic { fill: currentColor; }
.is-spinning .ic { animation: spin .8s linear; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ────────────────────────────────── viste ───────────────────────────────── */

/* Le sezioni stanno una accanto all'altra e si sfogliano: il dito le trascina,
   lo scorrimento nativo con aggancio decide dove fermarsi. Non è un vezzo —
   sei tocchi al giorno diventano un gesto solo, e la barra in fondo resta per
   chi vuole saltare.

   Ogni pagina ha il proprio scorrimento verticale: così la testata non se ne
   va, il cielo dietro non si muove mai, e tornando su una sezione la ritrovi
   dove l'avevi lasciata. */
.views {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.views::-webkit-scrollbar { display: none; }
.view {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-align: start;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.view::-webkit-scrollbar { display: none; }
/* Il contenuto resta indietro rispetto alla pagina che scorre: è quel mezzo
   passo di ritardo a far sembrare che si stia girando un foglio invece di
   trascinare un pannello. Il valore lo scrive app.js a ogni scorrimento. */
.view-in { padding-bottom: calc(var(--h-tab) + env(safe-area-inset-bottom) + 26px); transform: translateX(var(--sfoglia, 0px)); opacity: var(--fuoco, 1); will-change: transform; }
.view-head { margin: 2px 0 16px; }
.view-head h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.04em; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.today-grid > .card, .air-grid > .card { animation: rise .4s ease backwards; }
.today-grid > .card:nth-child(2), .air-grid > .card:nth-child(2) { animation-delay: .05s; }
.today-grid > .card:nth-child(3), .air-grid > .card:nth-child(3) { animation-delay: .1s; }
.today-grid > .card:nth-child(4) { animation-delay: .15s; }
.today-grid > .card:nth-child(5) { animation-delay: .2s; }
.today-grid > .card:nth-child(6) { animation-delay: .25s; }

/* Scena meteo della testata: disegnata in linea, quindi animabile parte per
   parte. Tutti i movimenti sono lenti e continui — deve dare vita, non chiedere
   attenzione — e si fermano con "Riduci le animazioni". */
.hero-scena { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-scena * { transform-box: view-box; }
.hs-raggi { animation: hs-ruota 40s linear infinite; }
.hs-alone { transform-origin: center; animation: hs-respira 6s ease-in-out infinite; }
.hs-nuvola { animation: hs-deriva 9s ease-in-out infinite alternate; }
.hs-nuvola-b { animation: hs-deriva-b 14s ease-in-out infinite alternate; }
.hs-goccia { animation: hs-cade 1.5s linear infinite; }
.hs-fiocco { animation: hs-fiocca 3.6s linear infinite; }
.hs-lampo { transform-origin: 60px 70px; animation: hs-lampeggia 3.8s ease-in-out infinite; }
.hs-nebbia { animation: hs-scorre 7s ease-in-out infinite alternate; }
.hs-stelle circle { animation: hs-scintilla 3.4s ease-in-out infinite; }
@keyframes hs-ruota { to { transform: rotate(360deg); } }
@keyframes hs-respira { 50% { transform: scale(1.07); opacity: .82; } }
@keyframes hs-deriva { to { transform: translateX(4px); } }
@keyframes hs-deriva-b { to { transform: translateX(-5px); } }
@keyframes hs-cade { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes hs-fiocca { 0% { transform: translate(0,-6px); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate(-5px,20px); opacity: 0; } }
@keyframes hs-lampeggia { 0%, 62%, 100% { opacity: .35; } 66% { opacity: 1; } 70% { opacity: .4; } 74% { opacity: 1; } }
@keyframes hs-scorre { to { transform: translateX(7px); } }
@keyframes hs-scintilla { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* I riquadri non sono più pannelli: hanno lo stesso cielo della pagina e li
   separa solo lo spazio. Le superfici visibili restano quelle interne — schede
   dei dati, righe, pillole — che è dove serve davvero leggere. */
.card {
  position: relative;
  padding: 6px 2px 20px;
  border: 0;
  border-radius: var(--r-xl);
  background: transparent;
  box-shadow: none;
}
.view > .card + .card { margin-top: 26px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.card-head h2 { margin: 0; font-size: 1.3rem; }
.pill { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--card-hi); color: var(--muted); font-size: .78rem; font-weight: 600; }
.ghost-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 0; border-radius: 999px; color: var(--muted); font-size: .83rem; font-weight: 600; transition: background .18s ease, color .18s ease; }
.ghost-btn:hover { background: var(--card-hi); color: var(--ink); }
.ghost-btn .ic { width: 16px; height: 16px; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; color: var(--muted); background: transparent; font-size: .82rem; font-weight: 650; transition: background .18s ease, color .18s ease; }
.chip:hover { background: var(--card-hi); color: var(--ink); }
.chip.is-active { background: var(--acc); color: #05131f; }
.chip:disabled { opacity: .38; cursor: not-allowed; }
.chip:disabled:hover { background: transparent; color: var(--muted); }
.seg, .radar-layers { display: flex; gap: 3px; flex: none; padding: 4px; border: 0; border-radius: 999px; background: var(--card); }

/* ── vista Oggi ── */
.today-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.today-grid > .card, .air-grid > .card { min-width: 0; }
.now-card { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 6px 2px 20px; overflow: visible; }
.nowcast-card { grid-column: span 2; display: flex; flex-direction: column; }
.metrics-card { grid-column: span 3; }
.radar-peek { grid-column: span 3; display: flex; flex-direction: column; }
.sun-card { grid-column: span 3; }
.tips-card { grid-column: span 3; }

/* Temperatura e scena meteo sulla stessa riga, la didascalia sotto a tutta
   larghezza: così l'immagine può essere grande senza spezzare il testo. */
/* L'apertura: l'icona grande al centro, il numero sotto, e nient'altro fino
   alla piega. È l'unica schermata che la gente guarda di sfuggita, e deve
   rispondere da lontano — non con otto riquadri uguali. */
/* Incolonnato a sinistra come il resto dell'app: l'occhio scende lungo un
   bordo solo. Il numero e l'icona dividono la stessa riga, così l'apertura
   resta grande senza mangiarsi lo schermo. */
.now-card { align-items: stretch; text-align: left; gap: 0; padding-top: 2px; }
.now-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
/* Il testo dell'apertura sta direttamente sul cielo: una sola ombra diffusa
   lo tiene staccato a qualunque ora, senza dover scurire il fondo. */
.now-card, .view-head, .card-head { text-shadow: 0 1px 18px rgba(3, 9, 18, .45); }
html[data-theme="light"] .now-card, html[data-theme="light"] .view-head, html[data-theme="light"] .card-head { text-shadow: 0 1px 16px rgba(255, 255, 255, .7); }
.now-icon { width: clamp(136px, 40vw, 214px); height: clamp(136px, 40vw, 214px); flex: none; margin: -6px -10px -6px auto; filter: drop-shadow(0 18px 44px rgba(0,0,0,.34)); }
.now-temp { font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; margin: 0; font-size: clamp(5rem, 22vw, 7.6rem); font-weight: 250; line-height: .86; letter-spacing: -.06em; }
/* Il simbolo dei gradi era piccolo, staccato e di un altro colore: si leggeva
   come un esponente o un rimando a una nota, non come parte della temperatura.
   Stesso colore della cifra, più grande, attaccato, e appena più tenue perché
   resti subordinato senza sembrare un'altra cosa. */
.now-temp sup { align-self: flex-start; margin: .16em 0 0 .02em; color: inherit; font-size: .38em; font-weight: 200; opacity: .6; }
.now-cond { margin: 6px 0 4px; font-size: 1.32rem; font-weight: 650; letter-spacing: -.02em; }
.now-range { margin: 0; color: var(--body-text); font-size: 1.08rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.now-card .place-meta { color: var(--muted); font-size: .94rem; }
.now-story { position: relative; z-index: 1; max-width: 60ch; margin: 18px 0 0; font-size: 1.08rem; color: var(--body-text); font-size: 1.02rem; line-height: 1.6; }
.now-strip { min-width: 0; position: relative; z-index: 1; margin-top: 20px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); gap: 4px; overflow-x: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); scrollbar-width: none; }
.now-strip::-webkit-scrollbar { display: none; }
.strip-hour { display: grid; justify-items: center; gap: 7px; padding: 9px 4px; border-radius: var(--r-sm); transition: background .18s ease; }
.strip-hour:hover { background: var(--card-hi); }
.strip-hour .h { color: var(--muted); font-size: .74rem; font-weight: 600; }
.strip-hour .wi { width: 28px; height: 28px; }
.strip-hour .t { font-size: .95rem; font-weight: 650; }
.strip-hour .p { color: var(--rainc); font-size: .68rem; min-height: 1em; }
.strip-hour.is-now { background: rgba(90,209,255,.12); box-shadow: inset 0 0 0 1px rgba(90,209,255,.26); }

.nowcast-chart { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 118px; padding: 10px; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(111,201,255,.10), rgba(111,201,255,.02)); }
.nc-bar { flex: 1; min-height: 6px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--rainc), rgba(111,201,255,.35)); transition: height .4s ease; }
.nc-bar.is-dry { background: var(--track); }
.nowcast-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--faint); font-size: .72rem; }
.nowcast-card .pill.is-wet { background: rgba(111,201,255,.18); color: var(--rainc); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.metric { display: grid; gap: 6px; padding: 13px 14px; border: 0; border-radius: var(--r-md); background: var(--card); transition: border-color .18s ease, transform .18s ease; }
.metric:hover { border-color: var(--line); transform: translateY(-1px); }
.metric-top { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.metric-top .ic { width: 15px; height: 15px; color: var(--acc); }
.metric strong { font-variant-numeric: tabular-nums; font-size: 1.26rem; font-weight: 600; letter-spacing: -.02em; }
.metric small { display: grid; gap: 1px; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.metric small span { display: block; }
.metric .arrow { display: inline-block; color: var(--acc); transform-origin: center; }

.peek-map { flex: 1; min-height: 230px; border-radius: var(--r-md); overflow: hidden; border: 0; background: #0a1626; }

.sun-arc-wrap { padding: 6px 0 2px; }
#sun-arc { display: block; width: 100%; height: auto; overflow: visible; }
.sun-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.sun-foot div { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 0; border-radius: var(--r-md); background: var(--card); }
.sun-foot .ic { color: var(--warm); }
.sun-foot span { color: var(--muted); font-size: .74rem; }
.sun-foot strong { font-size: .98rem; }

.score { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 17px; background: var(--good); color: #052117; font-size: 1.08rem; font-weight: 800; box-shadow: 0 14px 30px rgba(79,224,164,.16); }
.score[data-level="mid"] { background: var(--warm); color: #2a1a00; box-shadow: 0 14px 30px rgba(255,184,77,.16); }
.score[data-level="low"] { background: var(--bad); color: #2a0409; box-shadow: 0 14px 30px rgba(255,111,125,.16); }
.tips { display: grid; gap: 9px; }
.tip { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 13px; border: 0; border-radius: var(--r-md); background: var(--card); }
.tip-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(90,209,255,.10); color: var(--acc); }
.tip strong { display: block; margin-bottom: 2px; font-size: .92rem; }
.tip span { display: block; color: var(--muted); font-size: .81rem; line-height: 1.4; }

/* ── vista Radar ── */
.radar-card { display: flex; flex-direction: column; gap: 14px; }
.radar-head { margin-bottom: 4px; flex-wrap: wrap; }
.map-shell { position: relative; height: clamp(380px, 58vh, 640px); border-radius: var(--r-md); overflow: hidden; border: 0; background: #0a1626; }
#map, .peek-map .leaflet-container { height: 100%; width: 100%; background: #0a1626; }
.map-loading { position: absolute; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(8,18,32,.72); color: var(--muted); font-size: .88rem; backdrop-filter: blur(4px); transition: opacity .3s ease; }
.map-loading[hidden] { display: none; }
.map-legend { position: absolute; z-index: 450; left: 10px; bottom: 30px; display: flex; align-items: center; gap: 8px; width: auto; max-width: 76%; padding: 6px 10px; transition: opacity .2s ease; border: 0; border-radius: 13px; background: var(--sheet); backdrop-filter: blur(14px); }
.legend-title { flex: none; color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.legend-bar { width: 62px; height: 6px; flex: none; border-radius: 99px; background: linear-gradient(90deg, #8ad6ff, #2f9bf0 26%, #3ad26b 46%, #f7e05a 66%, #f08a3c 82%, #e5484d); }
.legend-ticks { display: flex; gap: 4px; color: var(--muted); font-size: .62rem; white-space: nowrap; }
.legend-ticks span + span::before { content: "→ "; opacity: .6; }
.radar-controls { display: flex; align-items: center; gap: 16px; }
.play-btn { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--acc); color: #05131f; box-shadow: 0 12px 28px rgba(90,209,255,.24); transition: transform .18s ease; }
.play-btn:active { transform: scale(.93); }
.play-btn .ic { stroke-width: 2.2; }
.play-btn[data-state="play"] .ic { fill: currentColor; }
.timeline { flex: 1; min-width: 0; }
.timeline-range { width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.timeline-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgba(90,209,255,.55) var(--past, 60%), var(--track) var(--past, 60%)); }
.timeline-range::-moz-range-track { height: 8px; border-radius: 99px; background: var(--track); }
.timeline-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; border: 4px solid #fff; border-radius: 50%; background: var(--acc-deep); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.timeline-range::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid #fff; border-radius: 50%; background: var(--acc-deep); }
.timeline-marks { display: flex; justify-content: space-between; padding: 0 4px; color: var(--faint); font-size: .7rem; }
.radar-stamp { display: grid; justify-items: end; flex: none; min-width: 92px; }
.radar-stamp strong { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.radar-stamp span { color: var(--faint); font-size: .72rem; }
.radar-stamp.is-forecast strong { color: var(--warm); }

/* La mappa di base è OpenStreetMap: il filtro la trasforma in una mappa scura. */
.mappa-scura { filter: grayscale(.75) invert(1) contrast(.86) hue-rotate(185deg) brightness(.78) saturate(.85); }

/* La mappa chiara, ma viva. I tasselli di OpenStreetMap così come sono
   risultano slavati sotto le macchie del radar: un po' di saturazione e di
   contrasto restituiscono il verde alla pianura e il blu all'acqua, che è
   quello che fa sembrare una mappa del tempo una mappa del tempo. */
.mappa-viva { filter: saturate(1.38) contrast(1.07) brightness(1.02); }

/* Le città sulla mappa: gradi e cielo sopra, il punto esatto, il nome sotto.
   Il testo ha un contorno scuro invece di un riquadro — su una mappa i
   riquadri coprono proprio quello che si sta guardando. */
.citta-meteo { display: grid; justify-items: center; gap: 1px; pointer-events: none; text-align: center; }
.citta-meteo .cm-alto { display: flex; align-items: center; gap: 2px; }
/* I gradi in ambra su una mappa piena di icone gialle facevano confusione:
   due gialli che competono e nessuno dei due vince. Bianchi come il nome,
   ma più grandi — la gerarchia la fa la dimensione, non il colore. */
.citta-meteo b { color: #fff; font-size: 1.06rem; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.7); }
.citta-meteo .wi { width: 32px; height: 32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.citta-meteo .cm-punto { width: 6px; height: 6px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.55); }
.citta-meteo .cm-nome { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.92); font-size: .78rem; font-weight: 650; letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.7); }

/* Leaflet, adattato al tema scuro */
.leaflet-container { font: inherit; }
.leaflet-control-zoom a { background: rgba(7,16,28,.86) !important; color: var(--ink) !important; border-color: var(--line) !important; backdrop-filter: blur(10px); }
.leaflet-control-zoom a:hover { background: rgba(20,36,56,.95) !important; }
.leaflet-control-attribution { background: rgba(7,16,28,.7) !important; color: var(--faint) !important; font-size: .64rem !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-bar { border: 1px solid var(--line) !important; box-shadow: 0 8px 22px rgba(0,0,0,.3) !important; }
.here-pin { display: grid; place-items: center; }
.here-pin i { display: block; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--acc-deep); box-shadow: 0 0 0 6px rgba(90,209,255,.22), 0 2px 8px rgba(0,0,0,.5); }
.city-dot { color: #e7f1fb; font-size: .72rem; font-weight: 650; white-space: nowrap; text-shadow: 0 1px 4px #000, 0 0 10px rgba(0,0,0,.8); pointer-events: none; }
.city-dot::before { content: "•"; margin-right: 4px; color: var(--acc); }

/* ── vista Ora per ora ── */
.chart-wrap { position: relative; height: 260px; margin-bottom: 6px; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(90,209,255,.05), transparent 70%); }
#hours-chart { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
.chart-tip { position: absolute; z-index: 5; top: 8px; padding: 9px 12px; border: 0; border-radius: 12px; background: var(--sheet); backdrop-filter: blur(14px); box-shadow: var(--shadow); pointer-events: none; transform: translateX(-50%); white-space: nowrap; }
.chart-tip strong { display: block; font-size: 1.02rem; }
.chart-tip span { display: block; color: var(--muted); font-size: .76rem; }
.hours-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 86px; gap: 6px; overflow-x: auto; padding: 14px 2px 6px; border-top: 1px solid var(--line-soft); }
.hours-scroll::-webkit-scrollbar { height: 6px; }
.hours-scroll::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--track); }
.hour-card { display: grid; justify-items: center; gap: 6px; padding: 13px 6px; border: 0; border-radius: var(--r-md); background: var(--card); }
.hour-card.is-new-day { border-color: rgba(90,209,255,.28); background: rgba(90,209,255,.06); }
.hour-card .h { color: var(--muted); font-size: .76rem; font-weight: 650; }
.hour-card .wi { width: 30px; height: 30px; }
.hour-card .t { font-size: 1.05rem; font-weight: 600; }
.hour-card .meta { display: flex; align-items: center; gap: 4px; color: var(--rainc); font-size: .7rem; }
.hour-card .meta .ic { width: 12px; height: 12px; }
.hour-card .wind { color: var(--faint); font-size: .7rem; }

/* ── vista 7 giorni ── */
.days { display: grid; gap: 8px; }
.day-row { display: grid; grid-template-columns: 92px 40px 1fr 168px 58px; align-items: center; gap: 14px; padding: 16px 16px; border: 0; border-radius: var(--r-md); background: var(--card); cursor: pointer; transition: background .18s ease, transform .18s ease; }
.day-row:hover { background: var(--card-hi); }
.day-row .d-name { font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; }
.day-row .d-name small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; font-weight: 500; }
.day-row .wi { width: 38px; height: 38px; }
.day-row .d-cond { color: var(--muted); font-size: .86rem; }
.d-bar-wrap { display: grid; gap: 7px; min-width: 0; }
.d-bar { position: relative; height: 8px; border-radius: 99px; background: var(--track); }
.d-bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #5ad1ff, #ffb84d); }
.d-temps { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.d-temps .lo { color: var(--muted); font-size: 1.02rem; }
.d-temps .hi { font-size: 1.18rem; font-weight: 700; }
.d-rain { display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--rainc); font-size: .9rem; font-weight: 600; }
.d-rain .ic { width: 13px; height: 13px; }
.day-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 9px; margin: -2px 0 8px; padding: 14px 16px; border: 0; border-radius: var(--r-md); background: var(--card); }
.day-detail[hidden] { display: none; }
.day-detail div { display: grid; gap: 3px; }
.day-detail span { color: var(--muted); font-size: .78rem; }
.day-detail strong { font-size: .95rem; font-weight: 600; }

/* ── vista Aria e sole ── */
.air-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aqi-card { grid-column: span 2; }
.aqi-main { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 18px; }
.aqi-dial { position: relative; width: 220px; flex: none; }
.aqi-dial svg { display: block; width: 100%; height: auto; }
.aqi-value { position: absolute; left: 0; right: 0; bottom: 4px; display: grid; justify-items: center; }
.aqi-value strong { font-size: 2.3rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.aqi-value span { color: var(--muted); font-size: .82rem; font-weight: 600; }
.aqi-note { flex: 1; min-width: 220px; margin: 0; color: var(--body-text); font-size: .97rem; line-height: 1.6; }
.pollutants { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
.pollutant { display: grid; gap: 6px; padding: 12px 13px; border: 0; border-radius: var(--r-md); background: var(--card); }
.pollutant span { color: var(--muted); font-size: .82rem; font-weight: 600; }
.pollutant strong { font-size: 1.14rem; font-weight: 650; }
.pollutant i { display: block; height: 5px; border-radius: 99px; background: var(--good); }
.uv-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; align-items: end; height: 130px; margin-bottom: 12px; }
.uv-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.uv-col i { width: 100%; max-width: 26px; min-height: 3px; flex: none; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--warm), rgba(255,184,77,.3)); }
.uv-col.is-high i { background: linear-gradient(180deg, var(--bad), rgba(255,111,125,.3)); }
.uv-col span { color: var(--muted); font-size: .74rem; }
.uv-col b { font-size: .86rem; font-weight: 700; }
.pollen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.pollen-row { display: grid; gap: 7px; padding: 13px; border: 0; border-radius: var(--r-md); background: var(--card); }
.pollen-row span { color: var(--muted); font-size: .8rem; }
.pollen-row strong { font-size: .95rem; }
.pollen-row i { display: block; height: 5px; border-radius: 99px; background: var(--track); }
.pollen-row i b { display: block; height: 100%; border-radius: 99px; background: var(--good); }

/* ── vista Località ── */
/* Righe, non schede. Su un telefono la griglia diventava una colonna di
   rettangoli tutti uguali, e per capire quale fosse quale bisognava leggerli
   uno per uno. Una riga si scorre con l'occhio: nome a sinistra, cielo e
   gradi a destra, e la ✕ dove ci si aspetta. */
.schermo-luoghi { gap: 24px; }
.gruppo-luoghi { display: grid; gap: 8px; }
.gruppo-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gruppo-testa h3 { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.places, .quick-cities { display: grid; gap: 2px; }
.place-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 4px 8px 4px 14px; border-radius: var(--r-md); background: var(--card); transition: background .18s ease; }
.place-row:hover { background: var(--card-hi); }
.place-row.e-attuale { background: rgba(90, 209, 255, .16); }
.pr-vai { display: grid; gap: 2px; min-width: 0; padding: 14px 0; text-align: left; }
.pr-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.16rem; font-weight: 650; }
.pr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .88rem; }
.pr-meteo { display: flex; align-items: center; gap: 8px; padding-right: 4px; font-variant-numeric: tabular-nums; }
.pr-meteo .wi { width: 30px; height: 30px; }
.pr-meteo b { font-size: 1.34rem; font-weight: 600; }
.pr-togli { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--faint); }
.pr-togli .ic { width: 16px; height: 16px; }
.pr-togli:hover { background: rgba(255, 111, 125, .18); color: var(--bad); }
.page-foot { margin-top: 26px; color: var(--faint); font-size: .76rem; line-height: 1.55; }
.page-foot p { margin: 0 0 4px; }
.page-foot a { color: var(--muted); }
.page-foot .versione { color: var(--faint); opacity: .8; }

/* La riga che sostituisce il grafico quando non piove: una frase, non un
   rettangolo vuoto. */
.nowcast-nota { margin: 4px 0 0; color: var(--body-text); font-size: 1.06rem; line-height: 1.55; }
.nowcast-nota[hidden] { display: none; }
.nowcast-chart[hidden], .nowcast-axis[hidden] { display: none; }

.empty-state { padding: 26px; color: var(--muted); font-size: .9rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-md); }

.page-foot { padding: 8px 4px 0; color: var(--faint); font-size: .75rem; line-height: 1.6; }
.page-foot p { margin: 0; }
.page-foot strong { color: var(--muted); }
.page-foot a { color: var(--muted); }

.doc-dialog { width: min(620px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.doc-dialog::backdrop { background: rgba(3, 9, 18, .62); backdrop-filter: blur(5px); }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft); }
.doc-head h2 { margin: 0; font-size: 1.15rem; }
.doc-body { max-height: calc(min(80vh, 760px) - 74px); overflow-y: auto; padding: 18px 20px 24px; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.doc-body h3 { margin: 18px 0 6px; color: var(--ink); font-size: .95rem; }
.doc-body h3:first-child { margin-top: 0; }
.doc-body p, .doc-body ul { margin: 0 0 10px; }
.doc-body ul { padding-left: 18px; }
.doc-body li { margin-bottom: 5px; }
.doc-body strong { color: var(--ink); }
.doc-body .danger-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-top: 6px; padding: 0 15px; border: 1px solid rgba(255,111,125,.4); border-radius: 999px; color: var(--bad); font-size: .85rem; font-weight: 650; }
.doc-body .danger-btn:hover { background: rgba(255,111,125,.12); }

/* Una barra a tutta larghezza, non una pillola: l'ovale centrato costringeva
   il testo a stare corto e a capo a metà, e con un tasto accanto diventava una
   cosa sbilenca. Così invece il messaggio ha tutta la riga, e l'azione sta in
   fondo a destra come in ogni altra riga dell'app. */
.toast {
  position: fixed; z-index: 60;
  left: 14px; right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 0; border-radius: 18px;
  background: var(--sheet);
  backdrop-filter: blur(30px) saturate(1.2);
  box-shadow: var(--shadow);
  font-size: .92rem; line-height: 1.4;
  opacity: 0; transform: translateY(14px);
  pointer-events: none; transition: .26s ease;
}
.toast .ic { flex: none; color: var(--acc); }
.toast span { flex: 1; min-width: 0; }
.toast.show { opacity: 1; transform: translateY(0); }

.tabbar { display: none; }

/* Scheletro di caricamento */
.is-loading .now-temp, .is-loading .now-cond { opacity: .35; }

/* ──────────────────────────────── responsive ────────────────────────────── */

@media (max-width: 1180px) {
  .layout { grid-template-columns: 78px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .sidebar .brand-name, .nav-item span, .side-foot { display: none; }
  .sidebar .brand-short { display: block; }
  .brand { justify-content: center; }
  .nav-item { justify-content: center; padding: 0; }
  .sidebar { padding: 16px 10px; }
  .now-card, .nowcast-card, .metrics-card, .radar-peek, .sun-card, .tips-card { grid-column: span 6; }
  .metrics-card, .radar-peek, .sun-card, .tips-card { grid-column: span 3; }
  .now-card { grid-column: span 6; }
  .nowcast-card { grid-column: span 6; }
}

@media (max-width: 900px) {
  :root { --h-tab: 74px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding: calc(6px + env(safe-area-inset-top)) 0 0; }
  .sidebar { display: none; }
  .appbar { padding: 0 14px; }
  .cerca { padding: 6px 14px 2px; }
  .view { padding: 0 14px; }
  .updated { font-size: .68rem; letter-spacing: .1em; }
  .main { gap: 8px; }
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .now-card, .nowcast-card, .metrics-card, .radar-peek, .sun-card, .tips-card { grid-column: span 1; }
  .air-grid { grid-template-columns: minmax(0, 1fr); }
  .aqi-card { grid-column: span 1; }
  /* Le schede sono trasparenti: quei diciotto pixel di padding orizzontale
     non delimitavano niente, spostavano solo il contenuto verso destra —
     ed erano il motivo per cui titoli e testo non erano mai in colonna con
     il marchio in alto. Un margine solo, quello della pagina. */
  .card { padding: 18px 0; }
  .now-card { padding: 2px 0 20px; }
  .card-head { flex-wrap: wrap; gap: 12px; }
  .day-row { grid-template-columns: 74px 32px minmax(0, 1fr) 52px; gap: 10px; }
  .day-row .d-cond { display: none; }
  .map-shell { height: 56vh; }
  .radar-stamp { min-width: 74px; }
  .aqi-dial { width: 180px; margin: 0 auto; }

  /* Nessuna pillola: la barra emerge dal fondo con una sfumatura, e la voce
     attiva è segnata da un filo di luce che scivola da una all'altra insieme
     alle pagine — così il gesto e il segno raccontano la stessa cosa. */
  .tabbar {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
    padding: 10px 4px calc(8px + env(safe-area-inset-bottom));
    border: 0; border-radius: 0; box-shadow: none;
    background: linear-gradient(to top, var(--fade-1) 40%, var(--fade-mid) 74%, var(--fade-0) 100%);
    backdrop-filter: blur(16px);
    -webkit-mask-image: linear-gradient(to top, #000 78%, rgba(0,0,0,.6) 92%, transparent 100%);
            mask-image: linear-gradient(to top, #000 78%, rgba(0,0,0,.6) 92%, transparent 100%);
  }
  .tab { position: relative; display: grid; justify-items: center; gap: 4px; padding: 7px 1px; border-radius: 14px; color: var(--faint); font-size: .63rem; font-weight: 650; letter-spacing: -.01em; background: none; transition: color .2s ease; }
  .tab .ic { width: 21px; height: 21px; transition: transform .2s ease; }
  .tab.is-active { color: var(--acc); }
  .tab.is-active .ic { transform: translateY(-1px); filter: drop-shadow(0 3px 10px var(--tab-on)); }
  .tab-ind { position: absolute; top: 4px; left: 0; width: calc(100% / 6); height: 2px; pointer-events: none; transform: translateX(var(--x, 0)); }
  .tab-ind::after { content: ""; display: block; width: 26px; height: 2px; margin: 0 auto; border-radius: 2px; background: var(--acc); box-shadow: 0 0 14px var(--acc); opacity: .9; }
  .toast { bottom: calc(var(--h-tab) + env(safe-area-inset-bottom) + 12px); }
}

@media (max-width: 560px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .sun-foot { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sun-foot div { padding: 10px 4px; }
  .radar-layers { width: 100%; overflow-x: auto; }
  .search { height: 46px; }
  .search input { font-size: 16px; }
  .icon-btn { min-width: 42px; height: 42px; }
  .radar-controls { gap: 10px; }
  .play-btn { width: 44px; height: 44px; }
  .chart-wrap { height: 210px; }
}

html[data-motion="ridotto"] *, html[data-motion="ridotto"] *::before, html[data-motion="ridotto"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ──────────────────── schermate di "Altro" e sezioni minori ─────────────── */

/* I riquadri dell'indice: la stessa aria del resto, nessun contorno, il vetro
   solo dove serve leggere. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.tile { display: grid; align-content: start; gap: 6px; padding: 18px 16px 20px; border-radius: var(--r-lg); background: var(--card); backdrop-filter: blur(16px); text-align: left; transition: background .18s ease, transform .18s ease; }
.tile:hover { background: var(--card-hi); }
.tile:active { transform: scale(.985); }
.tile .ic { width: 24px; height: 24px; margin-bottom: 6px; color: var(--acc); }
.tile b { font-size: 1.14rem; font-weight: 700; }
.tile span { color: var(--muted); font-size: .89rem; line-height: 1.45; }

.schermi { position: fixed; inset: 0; z-index: 46; }
.schermi[hidden] { display: none; }
html[data-night] .schermi { filter: sepia(1) saturate(.7) hue-rotate(307deg) brightness(.94); }
.schermo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(6, 13, 24, .58), rgba(6, 13, 24, .74));
  backdrop-filter: blur(30px) saturate(1.1);
  animation: entra-schermo .26s cubic-bezier(.22, .8, .3, 1);
}
html[data-theme="light"] .schermo { background: linear-gradient(180deg, rgba(240, 246, 253, .62), rgba(232, 240, 250, .78)); }
.schermo[hidden] { display: none; }
@keyframes entra-schermo { from { opacity: 0; transform: translateX(26px); } }
.schermo-head { display: flex; align-items: center; gap: 12px; flex: none; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
.schermo-head h2 { margin: 0; font-size: 1.14rem; letter-spacing: -.03em; }
.back-btn { display: flex; align-items: center; gap: 4px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: .92rem; font-weight: 600; }
.back-btn:hover { background: var(--card-hi); }
.schermo-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 14px calc(var(--h-tab, 78px) + env(safe-area-inset-bottom) + 20px); display: grid; gap: 16px; align-content: start; }
.schermo-body::-webkit-scrollbar { display: none; }

/* Righe di attesa: dicono cosa manca e perché, invece di lasciare un vuoto. */
.vuoto { display: grid; gap: 8px; padding: 26px 18px; border-radius: var(--r-lg); background: var(--card); text-align: center; }
.vuoto .ic { width: 26px; height: 26px; margin: 0 auto; color: var(--faint); }
.vuoto b { font-size: 1rem; }
.vuoto p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.5; }

/* ─────────────────────────────── sole, luna, allerte ─────────────────────── */

.astro-luna { display: flex; align-items: center; gap: 20px; }
.astro-luna h3 { margin: 0 0 4px; font-size: 1.35rem; letter-spacing: -.03em; }
.luna-disco { width: clamp(96px, 30vw, 132px); height: auto; flex: none; filter: drop-shadow(0 14px 34px rgba(0,0,0,.45)); }
.astro-tabella { display: grid; gap: 2px; }
.astro-riga { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px 72px; align-items: center; gap: 8px; padding: 11px 12px; border-radius: var(--r-sm); background: var(--card); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.astro-riga strong { color: var(--ink); text-align: right; }
.astro-giorno { color: var(--ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le allerte prendono il colore del livello e basta: è l'unico posto dell'app
   in cui il colore è il dato, non la decorazione. */
.allerta { padding: 18px 18px 20px; border-radius: var(--r-lg); color: #10131a; }
.allerta h3 { margin: 0 0 6px; font-size: 1.5rem; letter-spacing: -.03em; }
.allerta-tipo { margin: 0 0 2px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.allerta-area { margin: 0 0 10px; font-size: .95rem; font-weight: 650; }
.allerta-quando { margin: 0; font-size: .84rem; opacity: .78; }
.allerta-testo { margin: 12px 0 0; font-size: .9rem; line-height: 1.5; opacity: .88; }
.allerta-gialla { background: linear-gradient(150deg, #f5d868, #e9c545); }
.allerta-arancione { background: linear-gradient(150deg, #f6ab5a, #ef8f34); }
.allerta-rossa { background: linear-gradient(150deg, #f0766f, #e0524d); color: #fff; }
.allerta-verde { background: linear-gradient(150deg, #7fd8a4, #58c489); }

/* ─────────────────────────────────── notifiche ───────────────────────────── */

.avvisi-testa { padding-bottom: 4px; }
.avvisi-manifesto { margin: 0; color: var(--body-text); font-size: 1rem; line-height: 1.55; }
/* Righe alte: la voce in grassetto e sotto il perché, così l'interruttore non
   chiede di indovinare che cosa accenderà. */
.riga-grande { min-height: 58px; padding: 12px 10px; align-items: flex-start; }
.riga-grande span { display: grid; gap: 3px; }
.riga-grande b { font-size: .96rem; font-weight: 650; }
.riga-grande em { color: var(--muted); font-size: .82rem; font-style: normal; line-height: 1.4; }
.riga-grande .switch { margin-top: 4px; }
.card.spento { opacity: .42; pointer-events: none; }


/* ─────────────────────────────── pagina del radar ───────────────────────── */

/* Il radar è l'unica pagina che non deve scorrere: la mappa prende tutto lo
   spazio fra la testata e i comandi, e i comandi stanno sempre sopra la barra
   delle sezioni. Prima la pagina era più alta dello schermo e la linea del
   tempo finiva sotto il menù, proprio mentre la si trascinava. */
#view-radar { overflow: hidden; }
#view-radar .view-in { display: flex; height: 100%; padding-bottom: calc(var(--h-tab) + env(safe-area-inset-bottom) + 6px); }
.radar-card { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 10px; padding-top: 0; }
.radar-card .map-shell { flex: 1; min-height: 240px; height: auto; }
.radar-controls { flex: none; }

/* I comandi della mappa stanno sulla mappa: sopra c'erano un'intestazione e
   una riga di schede che rubavano centosessanta pixel al radar, cioè alla
   sola cosa che in questa pagina si guarda. */
.radar-finestra {
  position: absolute; z-index: 450; right: 10px; bottom: 30px;
  display: flex; gap: 3px; padding: 3px;
  border-radius: 999px; background: rgba(8, 18, 32, .72);
  backdrop-filter: blur(12px);
}
.radar-finestra .chip { flex: none; max-width: none; height: 28px; padding: 0 12px; font-size: .76rem; white-space: nowrap; }
.radar-layers {
  position: absolute; z-index: 450; left: 50%; top: 10px;
  display: flex; gap: 3px; padding: 3px;
  border-radius: 999px; background: rgba(8, 18, 32, .72);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.radar-layers[hidden] { display: none; }
.radar-layers .chip { height: 30px; padding: 0 13px; font-size: .78rem; }

/* La mappa bloccata: un velo appena percettibile e un invito, non un muro. */
.map-shell.e-bloccata #map { pointer-events: none; }
.map-shell.e-bloccata .map-legend { opacity: 0; pointer-events: none; }
.mappa-blocco {
  position: absolute; z-index: 460; right: 12px; top: 12px;
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: rgba(8, 18, 32, .82); color: var(--acc);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.7);
  transition: color .18s ease, transform .18s ease;
}
.mappa-blocco:active { transform: scale(.92); }
.mappa-blocco[aria-pressed="true"] { color: var(--muted); }

/* Quanto radar far scorrere. Non aggiunge dati: rallenta il racconto. */
.radar-finestra { display: flex; gap: 6px; justify-content: center; }
.radar-finestra .chip { flex: 1; max-width: 120px; }


/* ──────────────────────────────── ore in colonna ────────────────────────── */

/* Sul telefono le ore stavano in una striscia che scorreva di lato, e sotto
   restava mezza pagina vuota. In colonna si legge una riga alla volta, si
   scorre nella direzione in cui si sta già scorrendo, e la pagina si riempie
   di roba invece che di niente. */
@media (max-width: 900px) {
  .hours-scroll { display: grid; grid-auto-flow: row; grid-auto-columns: auto; gap: 2px; overflow: visible; padding: 0; }
  /* Due righe per ora, non cinque colonne strizzate: sopra quello che si
     cerca — ora, cielo, gradi, pioggia — sotto il vento, che si legge solo
     quando serve. */
  .hour-card {
    grid-template-columns: 74px 32px 64px 1fr;
    grid-template-areas: "h ic t meta" ". . wind wind";
    justify-items: start; align-items: center;
    gap: 4px 10px; padding: 11px 14px;
  }
  .hour-card .h { grid-area: h; font-size: .88rem; color: var(--ink); font-weight: 650; }
  .hour-card .wi { grid-area: ic; width: 28px; height: 28px; }
  .hour-card .t { grid-area: t; font-size: 1.18rem; font-weight: 650; }
  .hour-card .meta { grid-area: meta; justify-self: end; min-height: 1em; font-size: .84rem; }
  .hour-card .wind { grid-area: wind; color: var(--muted); font-size: .78rem; }
  .hour-card.is-new-day { margin-top: 10px; background: rgba(90,209,255,.10); }
  .chart-wrap { height: 196px; }
}



/* Sette giorni in una pagina sola: le righe si dividono l'altezza che resta
   fra la testata e la barra delle sezioni, invece di avere un'altezza fissa
   che a volte avanza e a volte sborda. La pagina resta comunque scorrevole,
   perché aprendo il dettaglio di un giorno la riga cresce. */
@media (max-width: 900px) {
  #view-days .view-in { display: flex; flex-direction: column; min-height: 100%; }
  #view-days .card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #days { display: flex; flex-direction: column; flex: 1; gap: 2px; }
  .day-row { flex: 1 1 auto; min-height: 58px; padding: 10px 14px; }
  .day-row .d-name { font-size: 1.02rem; }
  .day-row .d-name small { margin-top: 1px; font-size: .78rem; }
  .day-detail { flex: none; }
}

/* Il toast con un'azione resta più a lungo e mostra il tasto. */
.toast.con-azione { padding-right: 8px; pointer-events: auto; }
.toast-azione { flex: none; padding: 9px 16px; border-radius: 12px; background: var(--acc); color: #04121d; font-size: .86rem; font-weight: 700; }