/* ============================================================
   Wanderlust — Home mobile (palette "Ghiaccio & Profondo")
   Caricato solo da index.html: admin.html non deve importarlo.
   Tutte le variabili sono scoping su .home / .wl-welcome,
   mai su :root (styles.css è condiviso con l'admin).
   ============================================================ */
/* Nunito è il font ufficiale del brand (deciso dall'utente, 12 lug 2026):
   wordmark "anderlust" in Medium 500, titoli 600, testi 400, bottoni/link 600.
   Il monogramma W resta l'SVG originale, mai sostituito da testo. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap");

.wl-welcome,
.wl-home,
.wl-explore,
.wl-detail,
.wl-favorites,
.wl-trip,
.wl-wizard,
.wl-contribute,
.wl-collections,
/* 14/8: la vista del cammino entra qui insieme alle altre. Non e' una
   formalita', e' la trappola gia' costata cara il 12/8 con la bottom bar e il
   13/8 con il toast: fuori da questo elenco var(--wl-glass-blur) e compagne
   non risolvono, e la regola che le usa perde la proprieta' del tutto invece
   di ricadere su un valore vecchio. */
.wl-cammino,
/* La bottom bar sta in questa lista non per se stessa (le sue variabili se
   le dichiara da sola in bottom-bar.css, che l'admin carica senza home.css)
   ma per il menu profilo, che vive DENTRO la barra e da lì eredita le
   variabili del progetto. Toglierla di qui lo ha rotto davvero, il 12/8:
   senza --wl-ic-md le icone del menu perdevano la larghezza e ogni voce
   diventava alta 172px e larga più del viewport, con il menu spinto fuori
   schermo (test E2E "Guida installazione iOS", `page.click` a vuoto). È
   la stessa trappola già annotata nel commento HTML accanto al menu. */
.wl-bbar,
.wl-modal-backdrop,
/* Il toast vive fuori da qualunque vista (sibling a fine body), quindi per
   anni ha usato valori letterali. Dal 13/8 legge il filtro condiviso del
   progetto come tutte le altre superfici in vetro, e per farlo deve stare in
   questo elenco: senza, var(--wl-glass-blur) non risolve e il backdrop-filter
   sparisce del tutto invece di ricadere sul valore vecchio. */
.toast {
  --wl-ice: #a9c6da;
  --wl-ice-soft: #dce8f0;
  --wl-navy: #0e2a47;
  --wl-navy-70: rgba(14, 42, 71, 0.7);
  --wl-gray: #dfe5e9;
  --wl-cream: #f7f3ec;
  --wl-card: #ffffff;
  --wl-ink: #24364c;
  --wl-muted: #7d8b99;
  --wl-accent: #e2652b;
  --wl-bronze: #b98a52;
  --wl-overlay: linear-gradient(180deg, rgba(14, 42, 71, 0) 34%, rgba(14, 42, 71, 0.85) 100%);
  --wl-r-lg: 24px;
  --wl-r-md: 16px;
  --wl-r-sm: 12px;
  /* Logo negli header di vista (27/7, richiesta utente: "la grandezza del
     logo deve essere la stessa anche per Preferiti, Esplora e Itinerari
     salvati, stesso header"). Prima ne convivevano quattro: Home 62x36,
     Esplora/Preferiti/Itinerari 40x23, wizard e Contribuisci 52x30. Vince
     la taglia di Home, l'ultima calibrata dall'utente (21/7 e 27/7).
     Il rapporto monogramma/scritta e' quello del brand sheet, non
     cambiarne uno solo. */
  --wl-logo-mark-w: 62px;
  --wl-logo-mark-h: 36px;
  --wl-logo-word-w: 142px;
  --wl-logo-word-h: 21px;
  /* ---- La ricetta unica del vetro --------------------------------------
     Un filtro solo per OGNI superficie in vetro del progetto: bottom bar,
     toolbar, menu a tendina, pannelli, chip, card. Documentato in
     knowledge/wiki/vetro-materiale.md, che e' la fonte, non questo commento.

     Storia breve, perche' spiega i valori che si trovano ancora in giro:
     27/7 la variabile nasce per dare a tutte le tendine lo stesso blur della
     barra (prima 24px le tendine, 20px la barra, differenza mai decisa);
     28/7 sale a 40px su richiesta ("un accenno di blur in piu'", tre volte);
     13/8 la barra viene tarata sul serio contro la documentazione Apple e
     scende a 10px con saturazione e smorzamento, e la variabile la segue.

     I tre ingredienti fanno tre mestieri diversi: blur(10px) diffonde (a 40px
     il fondo diventava una macchia uniforme, cioe' vetro sporco, non opaco),
     saturate(200%) fa arrivare su vivo il colore di sotto ed e' cio' che fa
     leggere la superficie come trasparente, brightness(0.78) smorza il
     contenuto campionato in proporzione a quanto e' chiaro e prende il posto
     del velo denso.

     Il VELO invece resta un parametro per famiglia, di proposito: una tendina
     e' testo su contenuto arbitrario, una barra e' una cornice su fondi
     prevedibili. Si condivide il filtro, non la densita'. */
  --wl-glass-blur: blur(10px) saturate(200%) brightness(0.78);
  --wl-glass-border: rgba(255, 255, 255, 0.28);
  /* Velo della ricetta: leggero, serve a dare tinta e verso (piu' chiaro in
     alto, piu' scuro in basso, come la luce che cade), non a coprire. */
  --wl-glass-tint: linear-gradient(180deg, rgba(20, 48, 80, 0.08) 0%, rgba(6, 24, 42, 0.16) 100%);
  /* Stesso materiale, ma per le superfici che NON possono permettersi il
     filtro dal vivo: le liste (centinaia di card in scroll, il backdrop-filter
     per card fa crashare il compositor su mobile, bug reale del 16/7) e le
     viste che poggiano su un fondo gia' sfocato una volta per tutte
     (assets/wanderlust-bg-explore.webp: Esplora, Preferiti, scheda, viaggio).
     Li' il blur c'e' gia', ma lo smorzamento no, e senza quello il velo da
     0.08-0.16 non si vedrebbe affatto: la card resterebbe due fili di bordo.
     Il velo se ne fa carico. brightness(0.78) equivale a comporre nero al
     22% sotto il velo, quindi 0.08 su fondo scuro diventa alpha 0.28 e 0.16
     diventa 0.34, con i colori ricalcolati sulla somma dei due strati.
     Chi ritocca --wl-glass-tint rifaccia questo conto, o le card smettono di
     essere lo stesso materiale della barra. */
  --wl-glass-tint-flat: linear-gradient(180deg, rgba(6, 14, 23, 0.28) 0%, rgba(3, 11, 20, 0.34) 100%);
  /* I due fili che danno spessore. Con un velo cosi' leggero sono loro a
     staccare la superficie dal contenuto, non piu' la densita' del velo:
     il chiaro e' il riflesso (specular highlight, alzato da iOS 27), lo
     scuro esterno e' lo spigolo del vetro.

     13/8 (sera), segnalazione utente: "un bordo bianco discontinuo, non
     l'effetto trasparenza iOS". Era vero e la causa stava qui. Il filo
     chiaro si otteneva con TRE colori di bordo, uno per lato (alto 0.80,
     fianchi 0.28, basso 0.12), nella convinzione che agli angoli il browser
     sfumasse tra due colori adiacenti. Non lo fa: su un angolo arrotondato
     taglia netto a meta' curva. Quindi ogni card aveva un cappello bianco
     che si interrompeva di colpo ai quattro angoli. Misurato sulla tile
     Esplora: 209/255 di luminosita' lungo il bordo alto, 91 sul fianco a
     due pixel di distanza.

     La barra in fondo non aveva il difetto perche' il suo filo e' un tratto
     SVG con un gradiente vero (`wl-bbar-edge-a/b/c`, verticale, 0.80 -> 0.28
     -> 0.12): una sola immagine continua lungo tutto il perimetro. Le card
     ora fanno la stessa cosa in CSS: bordo trasparente e il gradiente steso
     sul solo anello (`padding-box` per il velo, `border-box` per il filo).
     Un'unica immagine sotto tutti e quattro i lati non puo' avere giunture,
     quindi il filo gira l'angolo invece di spezzarsi.

     I valori NON sono quelli della barra: la barra e' una superficie sola e
     larga, le card sono decine per schermata e un 0.80 ripetuto trenta volte
     e' un reticolo bianco, non del vetro. Il picco scende a 0.46, che sul
     fondo scuro compone circa 130/255, ed e' inclinato di 12 gradi
     (`168deg`) perche' la luce venga da sopra-sinistra invece che da un
     lampione a soffitto. Chi lo ritocca cambi il gradiente, non torni ai
     colori per lato: sono loro il difetto. */
  --wl-glass-rim: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(255, 255, 255, 0.22) 26%,
    rgba(255, 255, 255, 0.09) 55%,
    rgba(255, 255, 255, 0.07) 72%,
    rgba(255, 255, 255, 0.16) 100%
  );
  --wl-glass-edge-out: 0 0 0 0.5px rgba(0, 0, 0, 0.42);
  /* Distacco dal fondo: il vetro galleggia, non e' incollato. */
  --wl-glass-lift: 0 10px 24px -8px rgba(3, 17, 29, 0.55);
  /* 28/7, richiesta utente: sfumatura verticale per i menu scuri (non la
     bottom bar/toolbar, che restano a tinta piatta: sono cornici strette,
     non pannelli col contenuto che scorre dentro), piu' chiara in alto e
     piu' scura in basso. Stessa tinta navy di base (5,28,50), si sfuma
     solo luminosita'/alpha: un secondo colore avrebbe rotto la palette. */
  --wl-glass-menu-bg: linear-gradient(180deg, rgba(30, 62, 98, 0.62) 0%, rgba(5, 28, 50, 0.8) 100%);
  /* Scala icone (27/7, richiesta utente: "uno standard uguale ovunque").
     Cinque gradini, uno per ruolo, invece delle ~15 misure sparse che
     c'erano prima (11, 13, 14, 15, 17, 18, 19, 20, 21, 22, 24...):
       xs  affordance minuta, mai da sola (chevron di riga, pin inline)
       sm  metadato dentro una riga di testo
       md  azione o categoria dentro card, chip, riga di lista, menu
       lg  azione dentro un pulsante tondo (l'icona "piena" standard)
       xl  tile grandi, dove l'icona e' il soggetto
     Vedi knowledge/wiki/iconography.md per la regola completa, incluso il
     requisito di dimensione ottica (~78% del riquadro) che vale nello
     sprite: due icone della stessa misura CSS sembrano diverse se i loro
     disegni riempiono il viewBox in modo diverso. */
  --wl-ic-xs: 14px;
  --wl-ic-sm: 16px;
  --wl-ic-md: 20px;
  --wl-ic-lg: 24px;
  --wl-ic-xl: 40px;
  --wl-shadow-card: 0 8px 24px rgba(14, 42, 71, 0.08);
  --wl-shadow-float: 0 12px 32px rgba(14, 42, 71, 0.18);
  /* Un solo font, Nunito, ovunque (15/7): completa la decisione già presa
     il 12/7 ("font ufficiale per tutta l'interfaccia"), fin qui applicata
     solo al login e al pannello admin. Le due variabili restano distinte
     per non dover toccare i ~30 selettori che le usano (ognuno imposta
     già il proprio font-weight), ma puntano allo stesso font-family. */
  --wl-serif: "Nunito", sans-serif;
  --wl-sans: "Nunito", sans-serif;
}

/* Il fondo blu sta sulla radice, non solo sul body con la classe che aggiunge
   home.js: quel colore lo dipinge il browser anche fuori dal viewport di
   layout (fasce di sistema con viewport-fit=cover, rimbalzo dello scroll,
   tinta della barra di stato), e finche' la radice restava senza colore
   quelle zone erano bianche mentre lo splash era gia' blu. Da fuori si
   leggeva come "due sfondi": la parte con le curve e una fascia in cima e in
   fondo che non c'entrava niente (segnalazione utente 5/9, con screenshot).
   La classe .wl-bg resta per non cambiare niente al resto dell'app. */
html { background: #0b2138; }
body.wl-bg { background: #0b2138; }
body.wl-booting { overflow: hidden; height: 100%; touch-action: none; }
/* Il lucchetto vale anche per la radice: overflow nascosto sul solo body non
   ferma lo scorrimento quando a scorrere e' l'html, ed e' quello che succede
   appena la Home diventa alta dietro lo splash ancora acceso (misurato il 4/9,
   224px di scorrimento a splash opaco). Dove :has non esiste resta il
   comportamento di prima, cioe' il solo body bloccato. */
html:has(body.wl-booting) { overflow: hidden; height: 100%; }

/* Reset di base e utility generiche (erano in styles.css, cancellato il
   16/7 con l'esploratore classico — home.css è sempre stato un livello
   aggiuntivo sopra queste basi, mai pensato per bastare da solo). Nessuno
   scoping di variabili qui: valgono ovunque, anche fuori dai contenitori
   con le custom property definite più sotto. */
*, *::before, *::after { box-sizing: border-box; }
/* 22/7: mancava l'azzeramento del margine di default del browser (8px su
   tutti i lati) — invisibile finché tutto restava dentro contenitori già
   centrati/con padding, ma esposto dalla prima vera hero a tutta
   larghezza (la mappa del risultato, sotto): senza questo reset restava
   un bordo di 8px non voluto su ogni lato dell'intera app. */
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

/* ============================================================
   Il vetro delle card: un materiale solo, due modi di ottenerlo
   ------------------------------------------------------------
   13/8, richiesta utente: "applica la regola del vetro a tutte le card, e
   in Home anche alle due tile Esplora/Pianifica e al box meteo". La regola
   e' quella tarata sulla bottom bar (knowledge/wiki/vetro-materiale.md):
   filtro condiviso, velo leggero con un verso, due fili di bordo che danno
   spessore. Prima di questo giro ogni famiglia si era scritta il suo vetro:
   arancio 0.34 sulle liste, blu ghiaccio 0.28 sulle tappe, navy piatto 0.42
   sulle tile, bianco 0.12 sul meteo, con cinque raggi di blur diversi.

   Le due varianti non sono due materiali: sono lo stesso materiale ottenuto
   in due modi, perche' il filtro dal vivo non e' sempre pagabile.

   - VETRO FILTRATO: poche superfici per schermata, sopra un fondo nitido
     (la Home e il wizard usano wanderlust-bg.webp non sfocato). Qui il
     backdrop-filter c'e' davvero.
   - VETRO APPOGGIATO: le liste, dove le card sono centinaia e un
     backdrop-filter per card fa crashare il compositor in scroll (bug reale
     segnalato il 16/7), e le viste il cui fondo e' gia' sfocato come file
     statico. Niente filtro: il blur lo da' il fondo, lo smorzamento passa
     nel velo (vedi --wl-glass-tint-flat per la conversione).

   C'e' un terzo caso che ricade nella variante appoggiata per un motivo
   diverso: i riquadri DENTRO il foglio della scheda luogo ("Lo sapevi?",
   "Info pratiche", il link ufficiale). Il foglio e' gia' vetro, e una
   superficie in vetro non puo' campionarne un'altra (regola Apple, "mai
   vetro sopra vetro"): quei riquadri avevano un blur(24px) proprio, cioe'
   un secondo blur sopra il primo. Ora prendono solo velo e fili.

   Il materiale sta QUI e solo qui: le regole delle singole famiglie piu'
   sotto tengono la geometria (raggio, padding, colonne) e non ridichiarano
   background/border/backdrop-filter, altrimenti vincono per ordine e la
   card torna a essere un caso a se'. Le eccezioni volute passano per
   selettori piu' specifici (.wl-trip-stop:active, la tappa corrente) e
   restano valide.
   ============================================================ */
.wl-f-card,
.wl-trip-card,
.wl-trip-stop,
.wl-wiz-stats > div,
.wl-d-meta > div,
.wl-contrib-level-card,
.wl-d-curio,
.wl-d-practical,
.wl-d-link {
  background: var(--wl-glass-tint-flat) padding-box, var(--wl-glass-rim) border-box;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid transparent;
  box-shadow: var(--wl-glass-edge-out), var(--wl-glass-lift);
}
.wl-home-card,
.wl-home-continue-card,
.wl-home-near-card,
.wl-home-tile,
.wl-weather-btn,
.wl-wiz-sugg-open {
  background: var(--wl-glass-tint) padding-box, var(--wl-glass-rim) border-box;
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid transparent;
  box-shadow: var(--wl-glass-edge-out), var(--wl-glass-lift);
}
/* Senza backdrop-filter il velo da 0.08 lascerebbe il testo sopra
   l'illustrazione nitida: si ripiega su un velo coprente, come gia' fanno
   toolbar e tendine. */
@supports not (backdrop-filter: blur(1px)) {
  .wl-home-card,
  .wl-home-continue-card,
  .wl-home-near-card,
  .wl-home-tile,
  .wl-weather-btn,
  .wl-wiz-sugg-open { background: rgba(8, 25, 42, 0.88) padding-box, var(--wl-glass-rim) border-box; }
}
/* Card che sono una foto, non una superficie: niente velo da cambiare (il
   materiale sarebbe sopra il contenuto, che e' esattamente cio' che la
   regola vieta), ma i fili del bordo sono gli stessi, cosi' la famiglia
   resta una sola anche dove il vetro non c'e'. */
.wl-home-coll-card,
.wl-home-new-card,
.wl-home-oggi-card {
  background: var(--wl-glass-rim) border-box;
  border: 1px solid transparent;
  box-shadow: var(--wl-glass-edge-out), var(--wl-glass-lift);
}
/* Scrollbar nascosta sui pannelli a scroll interno (19/7, richiesta utente:
   la barra di scroll visibile su mobile non serve, il pannello admin non
   la mostrava già). Lo scroll resta identico, sparisce solo il track.
   REGOLA FERMA (24/7): qualunque nuovo contenitore con scroll orizzontale o
   verticale personalizzato (righe di card, liste, caroselli) va aggiunto
   qui, sempre — mai lasciare la scrollbar nativa visibile su un container
   di scroll "custom" del progetto. */
.wl-d-sheet, #credits-list, .wl-modal, .wl-wiz-body, .wl-xp-list,
.wl-home-nearby-row, .wl-home-collections-row, .wl-home-coll-row,
.wl-home-rail, .wl-home-oggi-row {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge legacy */
}
.wl-d-sheet::-webkit-scrollbar,
#credits-list::-webkit-scrollbar,
.wl-modal::-webkit-scrollbar,
.wl-wiz-body::-webkit-scrollbar,
.wl-home-rail::-webkit-scrollbar,
.wl-home-oggi-row::-webkit-scrollbar,
.wl-xp-list::-webkit-scrollbar,
.wl-home-nearby-row::-webkit-scrollbar,
.wl-home-collections-row::-webkit-scrollbar,
.wl-home-coll-row::-webkit-scrollbar { display: none; }
/* Base di "primary"/"wide": le regole scoped (.wl-welcome .primary,
   .wl-modal .primary, ecc.) definiscono forma/colore/ombra ma assumono
   già border/colore testo/cursore da qui — mai stati duplicati lì. */
.primary { border: 0; color: white; cursor: pointer; font-weight: 700; }
.primary:disabled { cursor: not-allowed; opacity: 0.5; }
.wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* ---------- App shell: colonna mobile centrata ---------- */
/* 15/8: qui dentro c'e' anche .wl-cammino, e mancava. Non e' una svista di
   forma: `body` non dichiara nessun font, lo dichiara ogni vista, quindi il
   testo della vista del cammino che non aveva una regola sua (le righe
   "Giorno N - da X a Y - km" sono <p> e <small>) ricadeva sul serif di
   default del browser e usciva in Times New Roman. Stesso identico difetto
   del toast, trovato il 14/8, e presente qui da quando la vista esiste
   (1.52, 14/8): sedici righe su sedici, e nessun controllo lo vedeva. */
.wl-welcome,
.wl-home,
.wl-detail,
.wl-favorites,
.wl-cammino,
.wl-trip,
.wl-wizard {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--wl-cream);
  font-family: var(--wl-sans);
  color: var(--wl-ink);
}
/* Esplora ha una sua altezza fissa (100dvh, niente min-height): vedi la
   regola dedicata più sotto, "solo la lista scorre" (centinaia di luoghi). */
.wl-explore {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  font-family: var(--wl-sans);
  color: var(--wl-ink);
}
@media (min-width: 431px) {
  .wl-welcome,
  .wl-home,
  .wl-explore,
  .wl-detail,
  .wl-favorites,
  .wl-trip,
  .wl-wizard { box-shadow: 0 0 60px rgba(14, 42, 71, 0.14); }
}

/* Splash d'avvio: visibile di default (subito, senza aspettare JS), non
   la pagina di login né una schermata vuota, finché non sappiamo se
   mostrare login o app (evita il lampo "login poi home" al boot). Niente
   immagini da caricare: deve dipingersi all'istante.

   13/8: il fondo passa da tinta piatta chiara (#f8fafc) a blu profondo con
   curve di livello. Due motivi, tutti e due verificati a schermo prima di
   cambiare:

   - Il fuoco che percorre la W non aveva niente su cui brillare. L'alone
     arancione, il core giallo e le braci si perdevano sul bianco: su blu
     profondo la fiamma si legge come fiamma.
   - Lo splash chiaro era l'unica schermata chiara dell'app. `body.wl-bg` è
     #0b2138, quindi l'uscita dello splash faceva un salto chiaro -> scuro.
     La base qui è lo stesso #0b2138: la consegna alla home non si vede più.

   Le curve di livello non sono decorazione: fanno della W un percorso
   tracciato su un territorio, che è quello che l'app fa. Stanno in un
   data-URI scritto a mano qui sotto (tre curve base riusate nove volte con
   uno scostamento verticale, ~1KB): nessuna richiesta di rete e nessuna
   attesa di JS, quindi la regola "si dipinge all'istante" resta valida.
   Rigenerabile con scripts/gen-splash-topo.mjs. */
.wl-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  /* L'inset azzerato si misura sul viewport di layout, che su iOS cambia
     altezza quando la barra degli indirizzi si ritrae. Il minimo esplicito
     tiene il fondo coperto anche nel fotogramma in cui quella misura sta
     cambiando. Unita' sconosciuta uguale regola ignorata, quindi dove lvh non
     esiste resta l'inset azzerato di prima. */
  min-height: 100lvh;
}
/* Il fondo dello splash: colore pieno, curve di livello, alone caldo. Vive in
   un elemento suo e non sul contenitore perche' all'uscita l'iride apre una
   maschera su di lui: il logo che vola al suo posto sta fuori da questa
   maschera e non viene tagliato a meta' volo. */
.wl-boot-fondo { position: absolute; inset: 0; z-index: 0; background: #0b2138; }
/* Curve di livello. Strato separato per poterle tenere tenui senza smorzare
   anche l'alone caldo del ::after, che deve restare acceso. */
.wl-boot-fondo::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22760%22 height=%22420%22 fill=%22none%22 stroke=%22%237dd3fc%22 stroke-opacity=%22.22%22 stroke-width=%221.4%22%3E%3Cdefs%3E%3Cpath id=%22c0%22 d=%22M0,0L40,3L80,7L120,9L160,12L200,14L240,15L280,16L320,16L360,15L400,14L440,12L480,9L520,6L560,3L600,0L640,-4L680,-7L720,-10L760,-12%22/%3E%3Cpath id=%22c1%22 d=%22M0,0L40,20L80,22L120,23L160,23L200,23L240,21L280,20L320,17L360,14L400,11L440,7L480,4L520,0L560,-4L600,-8L640,-12L680,-15L720,-18L760,-20%22/%3E%3Cpath id=%22c2%22 d=%22M0,0L40,27L80,24L120,20L160,14L200,9L240,2L280,-4L320,-10L360,-16L400,-21L440,-25L480,-28L520,-30L560,-30L600,-29L640,-27L680,-24L720,-19L760,-14%22/%3E%3C/defs%3E%3Cuse href=%22%23c0%22 y=%2222%22/%3E%3Cuse href=%22%23c1%22 y=%2268%22/%3E%3Cuse href=%22%23c2%22 y=%22114%22/%3E%3Cuse href=%22%23c0%22 y=%22160%22/%3E%3Cuse href=%22%23c1%22 y=%22206%22/%3E%3Cuse href=%22%23c2%22 y=%22252%22/%3E%3Cuse href=%22%23c0%22 y=%22298%22/%3E%3Cuse href=%22%23c1%22 y=%22344%22/%3E%3Cuse href=%22%23c2%22 y=%22390%22/%3E%3C/svg%3E");
  /* La piastrella nativa è 760x420. Rimpicciolita a 470x300 perché a
     grandezza naturale su un telefono da 390px se ne vedeva mezza: le curve
     arrivavano quasi orizzontali e si leggevano come righe. Così ogni
     schermata ne contiene una intera e l'ondulazione si vede. */
  background-size: 470px 300px;
}
/* Alone caldo dietro la W: la fiamma "illumina" il fondo. Solo quello.

   Qui c'era anche una vignettatura che scuriva i bordi per staccare il logo
   dal fondo. Il 4/9 l'ho ammorbidita dopo una segnalazione ("in fondo si vede
   solo il blu") misurando la cosa sbagliata: che le curve ai bordi **si
   vedessero**, non che il fondo fosse **uniforme**. Il 5/9 l'utente ha
   descritto il difetto rimasto: in basso un quarto di schermo dove si legge
   il blu pieno con le curve sopra, invece di una superficie sola. La misura
   gli da' ragione. Contrasto locale per ottavi, dall'alto in basso, a
   390x844:

     con vignettatura   21 25 27 28 28 27 24 20
     senza              36 36 36 37 37 36 36 36

   Le curve perdevano un quarto del contrasto nell'ottavo in fondo, e il
   passaggio graduale si legge come un secondo fondo appoggiato sopra il
   primo. Scelta dell'utente il 5/9: via la vignettatura, fondo uniforme. Il
   logo si stacca lo stesso, perche' e' arancione acceso su blu profondo, e
   quel poco di profondita' la da' l'alone caldo che resta.

   Chi volesse rimetterla misuri prima l'uniformita' (media e contrasto riga
   per riga), non la sola visibilita' ai bordi: e' l'errore del 4/9. */
.wl-boot-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(70% 40% at 50% 48%, rgba(249,115,22,.12) 0%, rgba(249,115,22,0) 70%);
}
.wl-boot-splash.is-leaving { pointer-events: none; }
/* Ripiego, e non un caso raro: se `@property` non c'e' (Safari sotto la 16.4)
   il raggio dell'iride non e' animabile e la maschera scatterebbe di colpo. Lo
   splash allora esce con la dissolvenza di sempre. Stessa strada con
   prefers-reduced-motion: l'iride e' vistosa e a chi ha quell'impostazione
   attiva da' fastidio davvero. La classe la mette boot-splash.js. */
.wl-boot-splash.va-in-dissolvenza { opacity: 0; transition: opacity .35s ease; }

/* L'iride. Il raggio deve essere una custom property registrata, altrimenti
   non e' animabile. La sfumatura di 90px serve a farla sembrare un'ottica che
   si apre e non un ritaglio netto; il raggio finale e' la distanza dall'angolo
   piu' lontano e basta, perche' oltre il cerchio cresce fuori dallo schermo e
   l'ultimo pezzo di animazione non si vedrebbe. */
@property --iris { syntax: "<length>"; inherits: false; initial-value: 0px; }
.wl-boot-fondo.iride {
  --iris: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--ix) var(--iy), #0000 var(--iris), #000 calc(var(--iris) + 90px));
          mask-image: radial-gradient(circle at var(--ix) var(--iy), #0000 var(--iris), #000 calc(var(--iris) + 90px));
  transition: --iris var(--durata-iride) cubic-bezier(.45, 0, .15, 1);
}
.wl-boot-fondo.iride.aperta { --iris: var(--iris-max); }

/* Il monogramma che vola. E' `#wl-monogram`, cioe' lo stesso vettore che
   l'intestazione disegna davvero: il filo dello splash e' un altro disegno
   (tratto costruito contro percorso pieno del brand sheet) e nessuna
   trasformazione li fa combaciare, quindi il filo si spegne e questo si
   accende a meta' volo. Il colore lo copia da quello di destinazione. */
.wl-boot-mono { position: fixed; z-index: 3; pointer-events: none; opacity: 0; }
/* Onda alle tappe (8/10, scelta sul banco test-splash-provini.html): quando un
   nodo del logo si accende, un anello caldo si allarga sulla mappa. Sta dentro
   .wl-boot-fondo, sopra le curve, e all'uscita l'iride la taglia con il resto
   del fondo. Posizione la scrive boot-splash.js; quella dell'ultimo nodo e'
   piu' grande, perche' chiude la corsa. */
.wl-boot-onda { position: absolute; z-index: 1; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(253,186,116,.38); box-shadow: 0 0 10px rgba(249,115,22,.18);
  --onda: 12; animation: wl-boot-onda 1.3s cubic-bezier(.15,.6,.3,1) forwards; }
.wl-boot-onda.is-grande { --onda: 26; }
@keyframes wl-boot-onda { from { transform: scale(.5); opacity: .9; } to { transform: scale(var(--onda)); opacity: 0; } }
.wl-boot-splash-inner { position: relative; z-index: 2; width: min(100%, 520px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#boot-splash-wave { width: 100%; height: auto; max-height: 55vh; overflow: visible; }
/* Nell'SVG dello splash ogni path e' un tratto, mai una superficie: il
   riempimento va spento qui e non solo dagli attributi che scrive
   boot-splash.js. Il tracciato del logo vive nel markup come sola geometria,
   e il default SVG (riempimento nero pieno) lo dipingeva come sagoma piena
   della W nei millisecondi tra il primo fotogramma e l'avvio dello script:
   invece dell'animazione si vedeva la sua impalcatura, tanto piu' a lungo
   quanto piu' lento il telefono, e per sempre con JS disattivato
   (segnalazione utente 5/9). Solo `fill`: lo `stroke` deve restare a
   boot-splash.js, che lo cambia lungo la corsa. */
#boot-splash-wave path { fill: none; }
.boot-splash-text { margin: 28px 0 0; color: #94a3b8; font-size: 14px; text-align: center; opacity: 0; transform: translateY(12px); }
/* Filo spento: schiarito da #072c4e, che sul fondo nuovo spariva. Il valore è
   ripetuto in boot-splash.js, che disegna il tracciato via JS.

   I nodi partono invisibili e compaiono quando la corsa arriva a tiro
   (`is-near`, scritta da boot-splash.js), poi si accendono (`is-on`). Prima
   erano tutti e tre lì dal primo fotogramma: insieme al filo disegnato per
   intero facevano vedere la forma finale prima che l'animazione la
   costruisse. Il primo nodo è l'eccezione: è il punto di partenza e pulsa in
   attesa della fiamma. */
.boot-wave-node { fill: none; stroke: #0d3b66; stroke-width: 36; opacity: 0; transition: stroke .3s ease, opacity .3s ease; transform-box: fill-box; transform-origin: center; }
.boot-wave-node.is-near, .boot-wave-node.is-on, .boot-wave-node-start { opacity: 1; }
.boot-wave-node.is-on { stroke: #f97316; filter: drop-shadow(0 0 14px rgba(249,115,22,.65)); animation: boot-wave-node-pop .45s ease-out; }
.boot-wave-node-start { stroke: #f97316; animation: boot-wave-node-pulse 1.1s ease-in-out infinite; }
.boot-wave-node-start.is-on { animation: none; }
@keyframes boot-wave-node-pulse { 0%, 100% { filter: drop-shadow(0 0 5px rgba(249,115,22,.5)); } 50% { filter: drop-shadow(0 0 18px rgba(251,191,36,.9)); } }
@keyframes boot-wave-node-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.boot-wave-flash { fill: #ffedd5; transform-box: fill-box; transform-origin: center; animation: boot-wave-flash-pop .55s ease-out forwards; pointer-events: none; }
@keyframes boot-wave-flash-pop { 0% { opacity: .95; transform: scale(.35); } 55% { opacity: .55; } 100% { opacity: 0; transform: scale(2.1); } }
@media (prefers-reduced-motion: reduce) { .boot-wave-node-start { animation: none; } }

/* ---------- Brand (logo W + wordmark) ---------- */
.wl-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.wl-mark {
  width: 44px;
  height: 25px;
  color: var(--wl-ice);
  align-self: center;
}
/* Wordmark "anderlust": SVG vettorizzato dal brand sheet (come il
   monogramma), niente più testo/font. Rapporto 678:106 ≈ 6.4:1;
   nel logo originale l'altezza del testo è ~0.56 di quella del
   monogramma, con base allineata leggermente più in alto. */
.wl-wordmark { color: var(--wl-navy); flex: 0 0 auto; }
.wl-wordmark-header {
  width: 92px;
  height: 14px;
  margin-left: 2px;
  align-self: center;
  transform: translateY(2px);
}

.wl-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  font-family: var(--wl-sans);
}
.wl-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--wl-ice-soft);
  border: 1.5px solid var(--wl-ice);
}
.wl-avatar svg { width: 24px; height: 24px; color: #3f6f96; }
.wl-profile-ic { width: 24px; height: 24px; color: var(--navy); }
.wl-greet {
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--wl-ink);
}
.wl-chev { width: 14px; height: 14px; color: var(--wl-muted); }
.wl-profile[aria-expanded="true"] .wl-chev { transform: rotate(180deg); }

/* Glass di base (usata su sfondi chiari come Home): stessa famiglia
   della tab bar chiara, un po' più opaca per restare leggibile su un
   menu con testo piccolo e fitto. Le viste su foto (Esplora/Preferiti)
   la sovrascrivono con la variante scura più sotto. */
.wl-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 20px;
  z-index: 60;
  min-width: 190px;
  padding: 6px;
  border-radius: var(--wl-r-md);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--wl-shadow-float);
}
@supports not (backdrop-filter: blur(1px)) {
  .wl-menu { background: rgba(255, 255, 255, 0.96); }
}
.wl-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 11px 12px;
  border-radius: 10px;
  font: 600 0.85rem var(--wl-sans);
  color: var(--wl-ink);
  cursor: pointer;
}
.wl-menu button:hover { background: var(--wl-ice-soft); }
.wl-menu button svg { flex: 0 0 auto; width: var(--wl-ic-md); height: var(--wl-ic-md); opacity: 0.72; }
.wl-menu button [data-lang-name] { margin-left: auto; font: 600 0.75rem var(--wl-sans); opacity: 0.6; }
/* Stato dell'interruttore posizione (11/8), stesso trattamento del nome
   lingua sopra: valore corrente allineato a destra della riga di menu. */
#menu-gps-status { margin-left: auto; font: 600 0.75rem var(--wl-sans); opacity: 0.6; }

/* ---------- Main ---------- */
.wl-h2 {
  margin: 0;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--wl-navy);
}
.wl-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.wl-link {
  border: 0;
  background: none;
  padding: 0;
  font: 600 0.8rem var(--wl-sans);
  color: #3f6f96;
  cursor: pointer;
}
.wl-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wl-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #e8eef4;
}
.wl-loc svg { width: var(--wl-ic-xs); height: var(--wl-ic-xs); }

/* Cuore preferiti e spunta "visitato" (su qualunque card fotografica):
   stesso identico materiale, cambia solo il glifo dentro (28/7). */
.wl-fav,
.wl-visited {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  /* 27/7, richiesta utente ("gli voglio tutti con lo sfondo arancione e
     il testo bianco"): stessa ricetta certificata dei pulsanti tondi
     della card viaggio, al posto del velo navy che questo pulsante
     aveva dal 18/7. Il motivo di allora (poco leggibile su foto chiare
     come un cielo) resta soddisfatto: il fondo arancione e' anche piu'
     staccato di quel navy su una foto luminosa. */
  border: 1px solid rgba(226, 101, 43, 0.45);
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  box-shadow: 0 8px 24px rgba(226, 101, 43, 0.38);
  color: white;
  cursor: pointer;
  transition: 0.2s;
}
.wl-fav svg,
.wl-visited svg { width: var(--wl-ic-lg); height: var(--wl-ic-lg); }
/* 26/7: la nuova icona cuore (linea continua unica, tracciata da artwork
   fornito) e' un unico path pieno, non ha piu' un interno separatamente
   riempibile, quindi il segnale "preferito" vive tutto nel contenitore.
   27/7, seguito della richiesta "li voglio tutti col fondo arancione e il
   glifo bianco": lo stato salvato era bianco con glifo accent, cioe'
   l'esatto contrario di quanto chiesto. Si notava soprattutto in
   Preferiti, dove OGNI riga e' salvata e quindi nessun cuore mostrava il
   nuovo trattamento. Ora salvato = arancione PIENO, non salvato =
   arancione traslucido: entrambi col glifo bianco, distinti per densita'
   invece che per inversione. */
.wl-fav.active,
.wl-visited.active {
  background: var(--wl-accent);
  border-color: var(--wl-accent);
  color: white;
}

/* Foto di sfondo fissa (colonna mobile): il contenuto le scorre sopra.
   REGOLA DI PROGETTO: ogni vista principale vive su una foto a tutto
   schermo con pannelli in vetro (.wl-photo-bg è la classe condivisa). */
.wl-photo-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  max-width: 430px;
  margin: 0 auto;
  /* 22/7, richiesta utente: sfondo unico in tutto il progetto (era la foto
     lago/borgo al tramonto), l'illustrazione blueprint blu notte fornita
     dall'utente, in WebP. top center perché il disegno (castello, borgo,
     sentiero, bussola) è concentrato nella metà superiore. */
  background: url("assets/wanderlust-bg.webp") top center / cover no-repeat;
}

/* Ingresso direzionale della vista dopo uno swipe (bindSwipeNav in
   home.js): breve e sobrio, stessa ricetta dell'admin. */
@keyframes wl-slide-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes wl-slide-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.wl-slide-right { animation: wl-slide-right 0.22s ease; }
.wl-slide-left { animation: wl-slide-left 0.22s ease; }
@media (prefers-reduced-motion: reduce) {
  .wl-slide-right, .wl-slide-left { animation: none; }
}
/* "Ricomincia" con effetto di pulizia (21/7, richiesta utente: un
   "qualcosa che toglie lo sporco" mentre la carrellata all'indietro
   5→4→3→2→1 scarta il vecchio itinerario) — una banda di luce diagonale
   che spazza lo schermo una volta sola, come un panno che pulisce il
   vetro. Sopra la carrellata (restartWithCleanEffect in wizard.js),
   rimossa da sola a fine animazione. */
.wl-wiz-clean-wipe {
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 46%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.5) 54%,
    transparent 70%);
  transform: translateX(-130%);
  animation: wl-wiz-wipe 0.9s ease-in-out;
}
@keyframes wl-wiz-wipe {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-wiz-clean-wipe { animation: none; display: none; }
}
.wl-photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Velo scuro verticale, più leggero in alto: tiene leggibili i testi
     sulle sezioni basse senza spegnere il disegno dove vivono i pannelli
     vetro (tile Home, card viaggio salvato, liste).
     27/7, richiesta utente: la trasparenza delle CTA di Home non si
     percepiva, perché lo 0.30 scuro qui sotto spegneva il disegno proprio
     nella fascia dove stanno. Fascia alta (0-35%) portata a 0.12: il
     blueprint si vede davvero attraverso i pannelli.
     27/7, stesso giorno: eliminati per sempre i puntini radiali aggiunti
     il 23/7 per dare "qualcosa da sfocare" al blur, l'utente li ha
     rivisti sullo schermo e non li vuole più. Con il blur dei pannelli
     vetro ridotto a 8px, invece di 40, il disegno resta comunque
     leggibile attraverso il vetro senza bisogno della texture puntinata. */
  background: linear-gradient(180deg,
    rgba(5, 28, 50, 0.12) 0%,
    rgba(5, 28, 50, 0.16) 35%,
    rgba(5, 28, 50, 0.42) 62%,
    rgba(5, 28, 50, 0.55) 100%);
}

/* 27/7, richiesta utente: vetro vero per le card di Esplora (.wl-xp-card)
   senza il backdrop-filter per card che il 16/7 ha fatto crashare il
   compositor su centinaia di card in scroll. Serve uno sfondo già sfocato
   dietro, cosicché le card tornino trasparenti con solo colore e alpha,
   zero costo di blur per card.
   Primo tentativo, filter:blur() dal vivo sull'elemento .wl-photo-bg
   (position:fixed): sul telefono reale mostrava solo un blu piatto,
   invisibile, mentre nel test headless Chromium sembrava corretto.
   Causa probabile: combinare filter e position:fixed è un punto debole
   noto di Safari/iOS, non riproducibile fuori da un vero dispositivo.
   Soluzione più robusta: l'immagine stessa è pre-sfocata come file
   statico (assets/wanderlust-bg-explore.webp, generata da
   wanderlust-bg.webp con GaussianBlur, raggio 2.5 dopo una prima prova
   troppo sfocata a raggio 5, segnalata dall'utente), niente filter dal
   vivo, niente possibilità che un motore la interpreti diversamente.
   Riusata anche dietro la scheda luogo (.wl-detail, vedi sotto), stesso
   problema con .wl-d-sheet.
   28/7, richiesta utente ("mi sembra pieno" sul vetro arancio appena
   esteso a Preferiti/Itinerari): non bastava cambiare il colore della
   card, mancava tutta la ricetta che rende il vetro di Esplora
   leggibile come vetro. Estesa la stessa combinazione (sfondo già
   sfocato + velo standard, vedi .wl-photo-bg::after sotto) anche a
   Preferiti/Itinerari, invece di lasciarle sul velo rinforzato pensato
   per la vecchia card ghiaccio su sfondo amber. */
.wl-explore .wl-photo-bg,
.wl-detail .wl-photo-bg,
.wl-favorites .wl-photo-bg,
.wl-trip .wl-photo-bg {
  background-image: url("assets/wanderlust-bg-explore.webp");
}
/* L'header di Esplora (titolo+sottotitolo+ricerca+filtri) è più alto di
   quello di Home: allo stesso punto percentuale della pagina, la lista
   qui inizia più in basso e trovava lo scrim già nella fascia scura
   tarata per Home. Curva propria, fascia chiara estesa fino al 48% circa
   invece che al 35%, così le prime card della lista restano leggibili
   attraverso il vetro. */
.wl-explore .wl-photo-bg::after {
  background: linear-gradient(180deg,
    rgba(5, 28, 50, 0.12) 0%,
    rgba(5, 28, 50, 0.16) 48%,
    rgba(5, 28, 50, 0.42) 72%,
    rgba(5, 28, 50, 0.55) 100%);
}

/* ---------- Toolbar glass ----------
   Non sticky: gli oggetti interni non devono mai scorrere dietro la
   toolbar né la bottom bar (regola di progetto). La toolbar scorre
   via con la pagina come in Percorso/Preferiti/Home. */
/* Stessa famiglia di materiale della bottom bar (.wl-bbar, vetro scuro):
   pillola in vetro fluttuante, margini dai bordi, non un bordo/rettangolo. */
.wl-x-toolbar {
  /* position+z-index reali (non solo z-index, che senza position non fa
     nulla): senza un proprio stacking context il menu a tendina finiva
     sotto i pannelli in vetro sottostanti (anche loro creano contesto,
     via backdrop-filter). */
  position: relative;
  z-index: 50;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 16px 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(9, 27, 45, 0.28);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 32px rgba(4, 14, 25, 0.35);
}
@supports not (backdrop-filter: blur(1px)) {
  .wl-x-toolbar { background: rgba(8, 25, 42, 0.92); }
}
.wl-x-toolbar .wl-mark { color: var(--wl-cream); }
.wl-x-toolbar .wl-greet { color: white; }
.wl-x-toolbar .wl-chev { color: rgba(255, 255, 255, 0.75); }
.wl-x-toolbar .wl-avatar {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
}
.wl-x-toolbar .wl-avatar svg { color: white; }
/* Menu a tendina in vetro scuro, coerente con la pagina. */
.wl-wizard .wl-menu {
  background: var(--wl-glass-menu-bg);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid var(--wl-glass-border);
}
@supports not (backdrop-filter: blur(1px)) {
  .wl-wizard .wl-menu { background: rgba(8, 25, 42, 0.94); }
}
.wl-wizard .wl-menu button { color: white; }
.wl-wizard .wl-menu button:hover { background: rgba(255, 255, 255, 0.12); }
/* ============================================================
   Vista Dettaglio luogo — foto a tutto schermo fissa, pannello
   in vetro scuro che scorre sopra (stessa ricetta di Esplora).
   ============================================================ */
.wl-detail {
  background: transparent;
  padding: 0;
}
.wl-d-hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 46dvh;
  min-height: 200px;
  background: var(--wl-navy);
  overflow: hidden;
}
.wl-d-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Carosello della hero (21/8, richiesta utente: "una volta aggiunte allo
   stesso sito altre foto, la hero diventa una hero con carosello").
   Perche' una pista in translateX e non overflow-x:auto con scroll-snap:
   dentro .wl-d-hero il gesto orizzontale e' gia' conteso — lo swipe verso
   destra torna indietro dalla scheda (bindDetailSwipeBack, home.js) e
   inHorizontalScroller() disattiva quel gesto su qualunque antenato che
   scorra davvero in orizzontale. Uno scroller nativo qui spegnerebbe il
   ritorno su tutta la fascia alta della scheda, in silenzio. Con la pista
   il gesto lo governa home.js, che sa quando e' l'ultima foto e restituisce
   il gesto al "torna indietro".
   La transizione sta sulla trasformazione e basta: mai su width/left, che
   ridisegnano l'immagine ad ogni fotogramma. */
.wl-d-hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wl-d-hero-track img { flex: 0 0 100%; }
/* Durante il trascinamento la pista segue il dito: la transizione si spegne
   da JS aggiungendo questa classe, non azzerando lo stile inline. */
.wl-d-hero-track.is-dragging { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .wl-d-hero-track { transition: none; }
}
/* Pallini di avanzamento, centrati sul bordo basso della hero: sono il
   segnale che la foto non e' una sola, ed e' per far loro posto che i
   navigatori sono passati a destra (.wl-d-nav-right).
   Il contenitore non intercetta il dito (pointer-events:none): lo swipe
   sulla hero deve poter cominciare anche da qui. I singoli pallini invece
   si toccano, e hanno un'area sensibile di 24px anche se il segno ne
   misura 6: sotto i 24px un bersaglio e' scomodo per tutti e inaccessibile
   per qualcuno. */
.wl-d-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  /* Vetro scuro come .wl-d-distinction e .wl-d-meta: su una foto chiara
     (un cielo, la neve) dei pallini bianchi da soli sparirebbero, ed e' la
     stessa ragione per cui il badge particolarita' non usa vetro chiaro. */
  background: rgba(5, 28, 50, 0.45);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
  transition: opacity 0.18s ease;
}
/* Quando la capsula dei navigatori si apre, cresce verso sinistra e arriva
   addosso ai pallini: misurato su iPhone 390px, 9px di sovrapposizione con
   tre foto, e cresce con il numero di foto. Invece di rimpicciolire i
   pallini (li' il problema tornerebbe alla quarta foto) i pallini si
   ritirano finche' la capsula e' aperta: in quel momento l'utente sta
   scegliendo un navigatore, non guardando le foto, e la capsula e' comunque
   una cosa sola che si richiude da se'.
   `:has()` e non una classe scritta da JS: lo stato "aperta" e' gia' scritto
   sulla capsula da nav-split.js (.is-open), e duplicarlo altrove vorrebbe
   dire tenere allineate due verita'. */
.wl-d-hero:has(.wl-d-nav-right.is-open) .wl-d-hero-dots {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wl-d-hero-dots { transition: none; }
}
.wl-d-hero-dot {
  position: relative;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  pointer-events: auto;
  transition: width 0.22s ease, background 0.22s ease;
}
/* L'area toccabile, invisibile, attorno al segno. */
.wl-d-hero-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}
/* La foto corrente e' un trattino, non un pallino piu' acceso: si distingue
   per forma e non per la sola luminosita', quindi si legge anche a colori
   spenti e su una foto che gli finisce chiara dietro. */
.wl-d-hero-dot.is-current { width: 18px; background: var(--wl-ice); }
@media (prefers-reduced-motion: reduce) {
  .wl-d-hero-dot { transition: none; }
}
/* Mappa d'insieme in hero per un luogo che fa parte di un raggruppamento
   (26/7, richiesta utente: al posto della foto, appena si apre una scheda
   di un gruppo — es. Tor Marancia — la hero mostra subito la mappa con
   tutti i siti collegati, non un'icona da toccare). Sostituisce l'icona +
   popup sospesi in precedenza: qui la mappa vive già nel flusso della
   pagina, niente più bottone/chiusura da progettare. */
.wl-d-hero-map {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wl-d-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 28, 50, 0.18) 0%, rgba(5, 28, 50, 0.05) 35%, rgba(5, 28, 50, 0.4) 100%);
  pointer-events: none;
}
/* La safe area in cima non e' decorazione (4/9, segnalazione dell'utente da
   iPhone 16 Pro): index.html dichiara `apple-mobile-web-app-status-bar-style:
   black-translucent`, quindi nella PWA installata la pagina parte davvero da
   y=0 e la status bar le sta SOPRA. Un `top` di 16px misurato dal bordo dello
   schermo finisce percio' sotto la Dynamic Island, e i pulsanti diventano
   intoccabili. Gli header delle altre viste lo tengono gia' presente
   (.wl-home-head, .wl-view-head): la hero della scheda e quella del
   risultato del wizard erano rimaste indietro, perche' i loro controlli non
   stanno in un header ma appoggiati sulla foto.
   In Safari, e in una PWA senza black-translucent, env(safe-area-inset-top)
   vale 0 e il calcolo torna esattamente ai 16px di prima: la correzione non
   cambia niente dove non serve. */
.wl-d-back {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: 16px;
}
.wl-d-back svg { transform: rotate(90deg); }
.wl-d-actions {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: 16px;
  display: flex;
  gap: 10px;
}
.wl-d-actions .wl-fav,
.wl-d-actions .wl-visited { position: static; }
/* Particolarità del luogo (17/7): badge in vetro accanto al pulsante
   Indietro, stessa altezza (40px) per allinearsi in linea.
   13/8, richiesta utente ("invece di Patrimonio UNESCO, Bene FAI, eccetera,
   lascia solo una icona nel badge"): via il testo, resta il marchio. Sono
   marchi che si riconoscono da soli, e la riga di testo li trasformava in
   un'etichetta lunga quanto mezza hero. La pillola diventa quindi un tondo
   di 40px, come i pulsanti che le stanno accanto: niente piu' larghezza
   variabile e niente piu' troncamento su "Borgo piu' bello d'Italia".
   Il nome NON sparisce, si sposta: resta come aria-label sul badge, cosi'
   uno screen reader continua a dire "Patrimonio UNESCO". */
.wl-d-distinction {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: 66px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  /* Vetro scuro (18/7, segnalazione utente: il vetro chiaro spariva su
     foto luminose come un cielo, proprio in cima dove il gradiente della
     hero è più leggero) — stessa ricetta di .wl-d-meta/.wl-d-curio. */
  background: rgba(5, 28, 50, 0.45);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
}
.wl-d-distinction-icon { display: flex; align-items: center; flex: 0 0 auto; }
.wl-d-distinction-icon svg { width: 20px; height: 20px; }
/* I marchi verificati e il simbolo originale delle Oasi WWF sono immagini,
   non glifi a tinta unita come le altre icone dell'app: altezza fissa e
   angoli leggermente smussati per intonarsi alla pillola di vetro. */
.wl-d-distinction-icon img { height: 22px; width: auto; border-radius: 4px; }
/* Meteo in tempo reale (27/7, richiesta utente): pillow in basso a sinistra
   dell'hero, zona libera da quando la barra km/tempo/periodo si è spostata
   nel foglio (26/7). Vetro arancio verso navy invece di arancio puro:
   sull'hero (foto o mappa variabile) l'arancio puro sparirebbe su sfondi
   chiari, stesso motivo per cui .wl-d-distinction usa vetro scuro. */
.wl-d-weather {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(226, 101, 43, 0.45);
  color: white;
  box-shadow: 0 8px 24px rgba(226, 101, 43, 0.3);
}
.wl-d-weather-icon { width: 20px; height: 20px; }
#detail-weather-temp { font: 700 0.78rem var(--wl-sans); }
/* Percorso di trekking: dal 28/7 al 21/8 e' stato un disco in basso a destra
   nella hero, contrapposto al meteo in basso a sinistra. Il 21/8 quel posto
   e' passato ai navigatori (i pallini del carosello hanno preso il centro) e
   la traccia si e' spostata nel foglio, come riga scritta accanto al link
   ufficiale: vedi .wl-d-track piu' avanti in questo file. La regola vuota
   qui non serve piu' e non c'e'.  */
.wl-d-sheet {
  position: fixed;
  /* 46dvh + 80px, non solo 46dvh (27/7): .wl-d-meta è fissa esattamente lì
     sopra (vedi commento su .wl-d-meta). Se il foglio iniziasse comunque a
     46dvh, il suo background pieno dipingerebbe comunque quella fascia di
     schermo (lo z-index più basso conta per l'ordine di disegno, non
     esclude l'area): il blur della barra vedrebbe di nuovo il fondo del
     foglio invece dell'illustrazione pura. Il foglio deve iniziare DOPO la
     barra perché quella fascia di schermo resti "libera" per lei sola. */
  top: calc(46dvh + 80px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Niente angoli curvi (17/7, richiesta utente): il foglio parte netto
     sotto la hero, a tutta larghezza, con la sola linea di luce in alto. */
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  /* 27/7, richiesta utente ("vorrei vedere il background sottostante"):
     lo sfondo restava piatto sul telefono reale nonostante il codice
     fosse quello giusto (blur(24px) su .wl-photo-bg dietro), stesso
     risultato nel mio test headless funzionava bene. .wl-d-sheet ha una
     combinazione unica che nessun altro pannello vetro del progetto ha:
     position:fixed CON backdrop-filter E scroll interno proprio
     (-webkit-overflow-scrolling:touch), sopra un altro elemento anch'esso
     fixed (.wl-photo-bg). Sospetto un bug di compositing di Safari/iOS su
     questa combinazione specifica, non riproducibile fuori da un vero
     dispositivo (vedi .wl-explore .wl-photo-bg poco sopra per lo stesso
     tipo di problema). Stessa soluzione: niente backdrop-filter dal vivo,
     l'immagine dietro è già sfocata come file statico. */
  background: rgba(5, 28, 50, 0.22);
  padding: 26px 22px calc(62px + 14px + 24px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wl-d-sheet::-webkit-scrollbar { display: none; }
@supports not (backdrop-filter: blur(1px)) {
  .wl-d-sheet { background: rgba(8, 25, 42, 0.9); }
}
body.wl-scroll-lock { overflow: hidden; height: 100%; width: 100%; touch-action: none; }
body.wl-scroll-lock .wl-d-sheet { touch-action: pan-y; }

/* Su mobile si scorre col dito: niente scrollbar visibili negli scroller
   dell'app (17/7, richiesta utente — si vedevano nei 5 passi del wizard).
   Regola unica per tutti gli scroller verticali interni. */
.wl-wiz-body,
.wl-xp-list,
.wl-modal,
.wl-contrib-body,
#credits-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wl-wiz-body::-webkit-scrollbar,
.wl-xp-list::-webkit-scrollbar,
.wl-modal::-webkit-scrollbar,
.wl-contrib-body::-webkit-scrollbar,
#credits-list::-webkit-scrollbar { display: none; }
.wl-d-sheet .wl-eyebrow { color: rgba(255, 255, 255, 0.7); }
.wl-d-sheet h1 {
  margin: 8px 0 6px;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  color: white;
}
.wl-d-sheet .wl-h2 { color: white; }
.wl-d-sub {
  margin: 0 0 12px;
  font-family: var(--wl-serif);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--wl-ice);
}
/* Riquadro del punteggio nella scheda (14/8): il numero (o la notorieta') e,
   sotto, le cinque stelle per votare. Come le card, nessun materiale proprio:
   .wl-d-sheet e' gia' vetro. Solo un filo orizzontale a separarlo dal testo
   che segue, come fanno gia' gli altri blocchi della scheda. */
.wl-d-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.wl-d-rating .wl-rating { font-size: 0.95rem; }
.wl-d-rating .wl-rating svg { width: var(--wl-ic-sm); height: var(--wl-ic-sm); }
.wl-d-rating .wl-fame { font-size: 0.82rem; }
.wl-d-rating-empty { font-size: 0.8rem; color: var(--wl-ice); opacity: 0.7; }
/* Chip "Scelto da Wanderlust" (20/8): la scelta redazionale sta sopra il
   punteggio e non dentro, perche' non e' un voto e non deve somigliarci.
   Bronzo (--wl-bronze, gia' dichiarato in cima al foglio e mai usato prima):
   il colore non compete con l'arancione di voto e notorieta'. */
.wl-d-scelto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(185, 138, 82, 0.16);
  border: 1px solid rgba(185, 138, 82, 0.5);
  font: 700 0.78rem var(--wl-sans);
  color: var(--wl-bronze);
}
.wl-d-scelto svg { width: var(--wl-ic-sm); height: var(--wl-ic-sm); flex: 0 0 auto; }
/* Le cinque stelle da toccare: bottoni nudi, area comoda al dito (44px di
   altezza complessiva con il padding) senza sembrare cinque pulsanti. */
.wl-d-rating-vote { display: inline-flex; align-items: center; gap: 2px; }
.wl-d-rating-vote button {
  display: inline-flex;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.34);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wl-d-rating-vote button svg { width: var(--wl-ic-sm); height: var(--wl-ic-sm); }
/* Acceso fino alla stella toccata: la classe la mette place-rating.js sia sul
   voto salvato sia in anteprima mentre il dito scorre. */
.wl-d-rating-vote button.on { color: var(--wl-accent); }
.wl-d-rating-vote button:disabled { cursor: default; }
.wl-d-rating-msg {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--wl-ice);
  opacity: 0.85;
}

.wl-d-desc {
  margin: 0 0 6px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  /* Compatta di default: il resto si apre con "Leggi tutto". */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wl-d-desc.open { -webkit-line-clamp: unset; }
/* Link interni tra schede (2/8, richiesta utente): i luoghi citati nella
   descrizione sono link cliccabili con icona contestuale di categoria.
   Stesso accento della CTA, sottolineatura leggera, icona piccola. */
.wl-d-cited {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
  margin: 0 1px;
  border-radius: 6px;
  color: var(--wl-accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 101, 43, 0.45);
  vertical-align: baseline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wl-d-cited svg { width: 13px; height: 13px; flex: 0 0 auto; }
.wl-d-cited:active { background: rgba(226, 101, 43, 0.18); }
.wl-d-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  border: 0;
  background: none;
  padding: 4px 0;
  font: 600 0.82rem var(--wl-sans);
  color: var(--wl-ice);
  cursor: pointer;
}
.wl-d-more svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s;
}
.wl-d-more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Km, tempi e periodo: striscia in vetro scuro appoggiata in fondo alla
   hero (17/7, richiesta utente), sopra il gradiente della foto. Stessa
   ricetta del riquadro curiosità: sul bianco 10% le cover chiare
   mangiavano il testo. z-index sopra il ::after del gradiente. */
/* Sotto la mappa/foto, non più sopra (26/7, richiesta utente: "in tutte le
   schede posiziona la barra tempo/spazio sotto la mappa, come in Itinerari
   a tema": prima era una card in vetro assoluta dentro .wl-d-hero, che
   nella vista di gruppo copriva i pin più vicini al bordo inferiore). */
/* 27/7, richiesta utente: doveva avere lo stesso vetro della bottom bar,
   ma da figlia di .wl-d-sheet il blur vedeva solo il fondo già appiattito
   dal background piatto del foglio (rgba(5,28,50,.22), senza backdrop-
   filter proprio, vedi commento su .wl-d-sheet), non l'illustrazione vera:
   anche azzerando l'alpha della barra il velo sotto non si vedeva.
   Spostata fuori da .wl-d-sheet, sorella invece che figlia: stessa
   posizione fissa di .wl-d-hero/.wl-d-sheet, esattamente al confine
   (top: 46dvh), cosi' il suo backdrop-filter sfoca l'illustrazione+scrim
   direttamente, come fa la tab bar. Effetto collaterale accettato: non
   scorre più via con il resto del foglio, resta fissa li' mentre il testo
   sotto scorre. .wl-d-sheet ha un padding-top maggiorato (106px = 26px
   base + 80px di altezza di questa barra) per non nascondere l'inizio del
   contenuto sotto di essa. */
.wl-d-meta {
  position: fixed;
  top: 46dvh;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  /* minmax(0, 1fr) e non 1fr: i valori delle card non vanno a capo
     (white-space: nowrap), e una colonna senza minimo azzerato non si
     restringe sotto il proprio contenuto, sfondando la riga sui telefoni
     stretti (stesso bug gia' corretto su .wl-wiz-stats). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  height: 80px;
  /* 12 + 56 (altezza card) + 12 = 80px: le card riempiono la striscia senza
     lasciare un gradino sopra o sotto. */
  padding: 12px 8px;
  border-width: 0 0 1px;
  border-style: solid;
  /* Filo azzurrino (27/7, richiesta utente, seguito): bordo chiaro
     --wl-ice + ombra interna scura appena sopra (infossamento) e un
     bagliore morbido appena sotto (rilievo), invece del semplice bordo
     bianco piatto di prima. */
  border-color: rgba(169, 198, 218, 0.55);
  border-radius: 0;
  /* Alpha dimezzata (0.28 → 0.14, richiesta utente "più trasparente"),
     ora che la barra e' davvero sopra l'illustrazione (vedi commento
     sopra su .wl-d-sheet): prima l'alpha non contava nulla perche' il
     vero velo era il fondo piatto del foglio dietro, ora invece incide
     per davvero. */
  background: rgba(9, 27, 45, 0.14);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  box-shadow:
    inset 0 -1px 2px rgba(5, 28, 50, 0.4),
    0 1px 4px rgba(169, 198, 218, 0.35);
}
/* Le quattro celle non si vestono qui: dal 12/8 sono le stesse card
   informative del viaggio salvato e del risultato del wizard (icona accento
   a sinistra, valore e didascalia a destra), scritte una volta sola in fondo
   a questo foglio, voce "Box informativi km/tempo/visita". Qui resta la sola
   striscia che le contiene. */
/* Link alla pagina ufficiale (18/7): CTA in vetro, indispensabile per i
   beni FAI la cui descrizione è il testo ufficiale tagliato — stessa
   ricetta scura degli altri riquadri sopra la sheet. */
.wl-d-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 13px 16px;
  border-radius: var(--wl-r-md);
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     appoggiata (sta dentro .wl-d-sheet, che e' gia' vetro). */
  font: 700 0.82rem var(--wl-sans);
  color: white;
  text-decoration: none;
}
.wl-d-link svg { width: 21px; height: 21px; color: var(--wl-ice); flex: 0 0 auto; }
/* Traccia del percorso (21/8): stessa CTA del link ufficiale, di cui porta
   la classe, con la sola differenza che le due righe possono comparire
   insieme (un bene FAI con un sentiero segnato). Quando succede, la prima
   perde il margine basso e restano appaiate invece di aprire un vuoto in
   mezzo. */
.wl-d-link + .wl-d-track { margin-top: -14px; }
/* "Lo sapevi?" */
.wl-d-curio {
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: var(--wl-r-md);
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     appoggiata. 13/8: qui c'era la tinta arancio 0.50 con blur(24px) proprio,
     cioe' un secondo blur sopra quello del foglio. Il titolo "LO SAPEVI?"
     resta in ghiaccio: e' lui a marcare il riquadro, non piu' il colore del
     fondo. */
}
.wl-d-curio-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font: 700 0.78rem var(--wl-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wl-ice);
}
.wl-d-curio-head svg { width: 19px; height: 19px; }
.wl-d-curio p {
  margin: 0;
  font-family: var(--wl-serif);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}
/* Nota di apertura per i gruppi "contenitore-opere" (3/8): quando si apre
   un'opera (un membro), chiarisce che è dentro il contenitore e che la lista
   sotto permette di passare alle altre opere. */
/* "Tappa N di M · Cammino X" sotto il sottotitolo della scheda (14/8, regola
   dei cammini). Pillola e non riquadro come .wl-d-inside-note qui sotto: e'
   un comando (porta alla vista del cammino), e la forma deve dirlo prima che
   lo dica il testo. */
.wl-d-cammino-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(226, 101, 43, 0.2);
  color: #fff;
  font: 600 0.76rem var(--wl-sans);
  text-align: left;
  cursor: pointer;
}
.wl-d-inside-note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--wl-accent);
  border-radius: 0 var(--wl-r-sm) var(--wl-r-sm) 0;
  background: rgba(226, 101, 43, 0.14);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
/* Info pratiche (19/7, richiesta utente): accordion in vetro scuro sotto
   "Lo sapevi?". Chiuso di default; l'apertura anima grid-template-rows
   (0fr -> 1fr), così l'altezza è sempre quella vera del contenuto, senza
   max-height stimati che scattano. Compare solo se il luogo ha almeno un
   dato tra sito, telefono, email e note. */
.wl-d-practical {
  margin: 0 0 24px;
  border-radius: var(--wl-r-md);
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     appoggiata (sta dentro .wl-d-sheet, che e' gia' vetro). */
  overflow: hidden;
}
.wl-d-practical-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  padding: 13px 16px;
  font: 700 0.78rem var(--wl-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wl-ice);
  cursor: pointer;
}
.wl-d-practical-toggle svg { width: 19px; height: 19px; flex: 0 0 auto; }
.wl-d-practical-chevron { margin-left: auto; transition: transform 0.3s; }
.wl-d-practical.open .wl-d-practical-chevron { transform: rotate(180deg); }
.wl-d-practical-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.wl-d-practical.open .wl-d-practical-body { grid-template-rows: 1fr; }
.wl-d-practical-rows { overflow: hidden; min-height: 0; }
.wl-d-practical-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}
.wl-d-practical-row svg {
  width: var(--wl-ic-sm);
  height: var(--wl-ic-sm);
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--wl-ice);
}
a.wl-d-practical-row span {
  color: white;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.wl-d-practical-row span strong {
  color: white;
  font-weight: 700;
}
/* Attribuzione della cover (Wikimedia Commons): discreta ma leggibile. */
.wl-d-credit {
  margin: -6px 0 22px;
  font-size: 0.68rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}
.wl-d-credit a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Righe del modale Crediti fotografici. */
#credits-list {
  max-height: 46vh;
  overflow-y: auto;
  margin: 4px 0 16px;
  text-align: left;
  display: grid;
  gap: 10px;
}
.wl-credit-row { display: grid; gap: 1px; }
.wl-credit-row strong { font-size: 0.82rem; color: white; }
.wl-credit-row small { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); }
.wl-credit-row a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; text-underline-offset: 2px; }
/* Ricerca per nominativo/luogo sopra la lista (31/7, richiesta utente). */
.wl-credits-search { margin: 4px 0 10px; }
.wl-credits-search input { height: 38px; }
/* Accordion per fotografo con più crediti: stessa animazione grid-template-rows
   già usata in .wl-d-practical, qui su sfondo scuro coerente col resto del modale. */
.wl-credit-group {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--wl-r-md);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.wl-credit-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}
.wl-credit-group-toggle svg:first-child { width: 17px; height: 17px; flex: 0 0 auto; color: rgba(255, 255, 255, 0.75); }
.wl-credit-group-toggle strong { font-size: 0.82rem; color: white; font-weight: 700; }
.wl-credit-group-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.wl-credit-group-chevron { width: 15px; height: 15px; flex: 0 0 auto; margin-left: auto; transition: transform 0.25s ease; color: rgba(255, 255, 255, 0.6); }
.wl-credit-group.open .wl-credit-group-chevron { transform: rotate(180deg); }
.wl-credit-group-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.wl-credit-group.open .wl-credit-group-body { grid-template-rows: 1fr; }
.wl-credit-group-rows { overflow: hidden; min-height: 0; display: grid; gap: 8px; }
.wl-credit-row--sub {
  padding: 0 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
}
.wl-credit-group-rows .wl-credit-row--sub:first-child { border-top: 0; padding-top: 0; margin-top: -4px; }
.wl-d-map-section {
  position: relative;
  margin: 14px 0 22px;
}
.wl-d-map-section .wl-h2 {
  margin-bottom: 10px;
}
.wl-d-map {
  position: relative;
  z-index: 0;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  /* 6/8, effetto fossa: la mappa sembra incassata nella scheda. */
  box-shadow: inset 0 3px 12px rgba(14, 42, 71, 0.35),
    inset 0 1px 3px rgba(14, 42, 71, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(14, 42, 71, 0.18);
}
/* 6/8: il pan a un dito è disattivato via JS (dragging: false), ma senza
   touch-action iOS Safari intercetta comunque il gesto e blocca lo scroll
   della pagina. pan-y lascia passare lo scorrimento verticale; pinch-zoom
   permette lo zoom a due dita. */
.wl-d-map .leaflet-container {
  touch-action: pan-y pinch-zoom;
}
/* 6/8: pin animato, puntino accent con alone che pulsa. */
.wl-d-pin {
  position: relative;
  background: none;
  border: none;
}
.wl-d-pin-dot {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--wl-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(14, 42, 71, 0.45);
}
.wl-d-pin-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--wl-accent);
  opacity: 0.55;
  animation: wl-d-pin-pulse 2s ease-out infinite;
}
@keyframes wl-d-pin-pulse {
  0% { transform: scale(0.55); opacity: 0.55; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-d-pin-pulse { animation: none; opacity: 0; }
}
.wl-d-nav-buttons {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wl-d-nav-buttons a {
  text-decoration: none;
}
/* Navigatori a destra nella scheda luogo (21/8): il centro del bordo basso
   e' dei pallini del carosello. Non e' un caso particolare del carosello, e'
   il posto della capsula in questa vista — anche su un luogo con una foto
   sola, dove i pallini non ci sono.
   `right` invece di `left`: la capsula si allarga quando si aprono le
   alternative, e ancorata a destra cresce verso l'interno dello schermo.
   Ancorata a sinistra (o centrata) uscirebbe dal bordo proprio nel momento
   in cui compaiono i due tasti in piu'.
   Le hero di wizard e viaggi NON sono toccate: la' la capsula resta
   centrata e rialzata sopra la barra statistiche (.wl-wiz-navigate). */
.wl-d-nav-right {
  left: auto;
  right: 16px;
  transform: none;
}
/* "Itinerario suggerito" della scheda luogo. Dal 12/8 (richiesta utente:
   una sola timeline in tutta l'app) questa lista NON ha più una geometria
   propria: il markup di renderDetailSteps (home.js) porta le stesse classi
   della timeline del viaggio salvato (.wl-trip-tl-row, .wl-trip-tl-num,
   .wl-trip-stop), quindi binario, medaglione e card arrivano da lì, più in
   basso in questo foglio. Qui restano solo le differenze di operatività di
   questa vista: il nodo è un bottone (apre la scheda), la card si espande a
   fisarmonica invece di aprire il luogo, e la riga già visitata si spegne. */
.wl-d-steps {
  /* Stesse misure di .wl-trip-tl, che la classe .wl-trip-tl-row delle righe
     si aspetta di trovare sul contenitore. */
  --wl-tl-rail: 52px;
  --wl-tl-num: 42px;
  --wl-tl-top: 14px;
  margin: 14px 0 22px;
  display: grid;
  gap: 0;
}
@media (min-width: 400px) {
  .wl-d-steps { --wl-tl-rail: 60px; --wl-tl-num: 46px; }
}
/* Il nodo è un bottone (apre la scheda del luogo), non lo <span> passivo del
   viaggio salvato: si annulla il vestito da bottone e si lascia che il
   medaglione .wl-trip-tl-num dentro di esso faccia tutto il lavoro. */
.wl-step-node {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  cursor: default;
}
.wl-step-node[data-detail] { cursor: pointer; }
/* Monogramma della tappa 1 (il luogo aperto): dentro lo stesso medaglione
   delle altre, come il pin del "Rientro" nel viaggio salvato. */
.wl-step-node svg { width: 26px; height: 16px; color: white; }
.wl-step.wl-step-visited { opacity: 0.5; }
/* Il nodo di arrivo non ha pannello da aprire: la sua card non e' toccabile
   e non deve fingere di esserlo (mano e pressione restano alle altre). */
.wl-d-steps .wl-trip-stop:not(.wl-step-copy--tap) { cursor: default; }
.wl-d-steps .wl-trip-stop:not(.wl-step-copy--tap):active { transform: none; }
/* Fisarmonica dei siti nella catena (17/7, richiesta utente "rendi
   espandibili anche i siti nella catena"): il pannello si apre dentro la
   card, a piena larghezza sotto foto e testo; la linea del binario, ancorata
   a top/bottom della riga, si allunga da sola. */
.wl-step-copy--tap { cursor: pointer; }
.wl-step-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(5, 28, 50, 0.55);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.95);
  font: 700 0.6rem var(--wl-sans);
  white-space: nowrap;
  max-width: min(140px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Stessa area toccabile dei pulsanti di stato del viaggio salvato (38px,
   .wl-trip-stop .wl-visited/.wl-step-nav): sta nella stessa colonna, deve
   avere lo stesso passo. */
.wl-step-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--wl-ice);
  cursor: pointer;
}
.wl-step-link svg { width: var(--wl-ic-md); height: var(--wl-ic-md); }
.wl-step-chev {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.2s;
}
.wl-step[aria-expanded="true"] .wl-step-chev { transform: rotate(180deg); }
/* Il pannello vive dentro la card (griglia foto/testo/azioni della
   .wl-trip-stop): riga propria a piena larghezza, non più la sola colonna
   del testo di quando la riga era a tre colonne senza card. */
.wl-step-more {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 0.82rem;
}
.wl-step-more-desc {
  margin: 0 0 6px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wl-step-more-curio {
  margin: 0;
  line-height: 1.45;
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
}
.wl-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--wl-r-md);
  background: var(--wl-accent);
  color: white;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 12px 26px rgba(226, 101, 43, 0.35);
  cursor: pointer;
}
.wl-cta-mark { width: 36px; height: 20px; color: white; }
.wl-cta:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ============================================================
   Componenti condivisi: chip a pillola, bottoni icona circolari
   ============================================================ */
.wl-tag-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 18px;
}
.wl-tag-row::-webkit-scrollbar { display: none; }
.wl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid rgba(14, 42, 71, 0.12);
  border-radius: 999px;
  background: var(--wl-card);
  color: var(--wl-ink);
  font: 600 0.78rem var(--wl-sans);
  cursor: pointer;
  white-space: nowrap;
}
.wl-tag svg { width: var(--wl-ic-md); height: var(--wl-ic-md); color: #4a7fa5; }
/* 24/7, richiesta utente: gli stati selezionati/attivi di tutto il
   progetto adottano la stessa ricetta della tile "Pianifica" in home
   (gradiente accent→navy, bordo accent traslucido, icona/testo bianchi) —
   prima ogni componente aveva un trattamento diverso (navy pieno qui,
   vetro bianco translucido altrove). Vale per .wl-tag, .wl-wiz-tile, i
   chip regione/particolarità di Esplora e il pulsante centrale d'azione. */
.wl-tag.active {
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  border-color: rgba(226, 101, 43, 0.45);
  color: white;
}
.wl-tag.active svg { color: white; }
.wl-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid rgba(14, 42, 71, 0.12);
  border-radius: 50%;
  background: var(--wl-card);
  color: var(--wl-navy);
  cursor: pointer;
}
.wl-icon-btn svg { width: var(--wl-ic-lg); height: var(--wl-ic-lg); }
.wl-icon-btn[aria-pressed="true"] { background: var(--wl-navy); border-color: var(--wl-navy); color: white; }

/* ============================================================
   Componenti condivisi in versione vetro (viste su foto)
   ============================================================ */
.wl-home,
.wl-explore,
.wl-favorites,
.wl-trip,
.wl-wizard,
.wl-contribute { background: #0b2138; }
.wl-home > *:not(.wl-photo-bg),
.wl-explore > *:not(.wl-photo-bg),
.wl-favorites > *:not(.wl-photo-bg),
.wl-trip > *:not(.wl-photo-bg),
.wl-wizard > *:not(.wl-photo-bg),
/* 14/8, vista del cammino. Senza questa riga il difetto e' preciso e
   sconcertante: la card della mappa si vedeva (ha un position: relative suo,
   quindi e' un elemento posizionato e paga il prezzo dopo lo sfondo) e la
   striscia statistiche subito sotto **spariva del tutto**, pur avendo
   geometria giusta, testo bianco e opacita' 1. `.wl-photo-bg` e' fixed con
   z-index: 0, cioe' un elemento posizionato: nell'ordine di disegno passa
   sopra il contenuto in flusso non posizionato. Non e' una svista di stile,
   e' la stessa trappola che ha gia' colpito Preferiti e il wizard, ed e'
   invisibile a qualunque controllo sulle misure. */
.wl-cammino > *:not(.wl-photo-bg),
.wl-contribute > *:not(.wl-photo-bg) {
  position: relative;
  z-index: 1;
}
/* La regola sopra e .wl-x-toolbar (z-index:50) hanno la stessa specificità:
   senza questa, a parità di specificità vince l'ultima nel file (questa),
   schiacciando la toolbar a z-index:1 — il menu profilo finiva sotto il
   contenuto sottostante (es. l'SVG del JourneyProgress) e non era più
   cliccabile. Specificità più alta qui, indipendente dall'ordine. */
.wl-wizard .wl-x-toolbar { z-index: 50; }
/* Stesso identico bug in Preferiti (16/7, segnalato dall'utente: "Svuota
   preferiti" non cliccabile): .wl-f-head e #favorites-types sono entrambi
   figli diretti di .wl-favorites, quindi entrambi z-index:1 dalla regola
   sopra — a parità vince l'ultimo nel DOM (i chip tipologia, sotto
   l'header), e il menu (z-index:60 solo dentro lo stacking context di
   .wl-f-head) restava intrappolato sotto. Stesso rimedio: alzare lo
   stacking dell'intero header — MA la regola generica qui sopra vale
   (0,3,0) (due :not() contano come classi): ".wl-favorites .wl-f-head"
   (0,2,0) non basta, serve l'id per vincere davvero. */
#favorites .wl-f-head { z-index: 2; }
/* Nel dettaglio di "I tuoi viaggi" la hero sticky della mappa sta a z-index:3;
   l'header deve restare sopra, altrimenti i pulsanti Modifica/Cestino possono
   essere coperti e non ricevere il tap. */
#trip .wl-f-head { z-index: 5; }
/* Scrim più scuro nel wizard (15/7, richiesta utente): i contenuti degli
   step poggiano direttamente sulla foto e col velo standard si perdevano.
   Le altre viste (Esplora/dettaglio/preferiti) restano col velo condiviso. */
.wl-wizard .wl-photo-bg::after {
  background: linear-gradient(180deg, rgba(5, 28, 50, 0.48) 0%, rgba(5, 28, 50, 0.60) 60%, rgba(5, 28, 50, 0.72) 100%);
}
/* 27/7, richiesta utente: niente pattern puntinato in Contributi — stesso
   velo scuro di base, solo senza il radial-gradient di puntini blueprint
   (voluto altrove, qui giudicato di troppo su un form pieno di campi). */
.wl-contribute .wl-photo-bg::after {
  background: linear-gradient(180deg, rgba(5, 28, 50, 0.30) 0%, rgba(5, 28, 50, 0.42) 60%, rgba(5, 28, 50, 0.55) 100%);
}
/* Componenti condivisi in versione vetro dentro le viste su foto.
   .wl-trip aggiunto il 28/7 per le due chip "Itinerari salvati"/
   "Visitati": stesso sfondo illustrato di Preferiti, mancava dal giro
   di scurimento perché prima qui non c'erano chip. */
/* .wl-trip aggiunto l'11/8: il navy di .wl-h2 e' pensato per fondo chiaro, e
   qui i titoli "Giorno 1"/"Giorno 2" degli itinerari su piu' giorni erano
   navy su navy, cioe' invisibili. Difetto preesistente, visibile solo con un
   viaggio di almeno due giorni. */
.wl-favorites .wl-h2,
.wl-trip .wl-h2,
/* 14/8: la vista del cammino riusa .wl-h2 come tutte le altre viste su fondo
   scuro. Senza questa riga i titoli ereditano --wl-navy, cioe' blu scuro su
   blu scuro: si leggevano appena, e il difetto e' saltato fuori solo dal
   primo scatto a schermo, non dai controlli. */
.wl-cammino .wl-h2,
.wl-wizard .wl-h2 { color: white; }
.wl-favorites .wl-tag,
.wl-explore .wl-tag,
.wl-wizard .wl-tag,
.wl-trip .wl-tag,
.wl-contribute .wl-tag {
  /* Scurito leggermente (18/7, da 0.3 a 0.4) per uniformarsi alle tessere
     regione/particolarità qui accanto, stessa segnalazione di leggibilità. */
  background: rgba(5, 28, 50, 0.4);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border-color: rgba(255, 255, 255, 0.32);
  color: white;
}
.wl-favorites .wl-tag svg,
.wl-explore .wl-tag svg,
.wl-wizard .wl-tag svg,
.wl-trip .wl-tag svg,
.wl-contribute .wl-tag svg { color: var(--wl-ice); }
.wl-favorites .wl-tag.active,
.wl-explore .wl-tag.active,
.wl-wizard .wl-tag.active,
.wl-trip .wl-tag.active,
.wl-contribute .wl-tag.active {
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  border-color: rgba(226, 101, 43, 0.45);
  color: white;
}
.wl-favorites .wl-tag.active svg,
.wl-explore .wl-tag.active svg,
.wl-wizard .wl-tag.active svg,
.wl-trip .wl-tag.active svg,
.wl-contribute .wl-tag.active svg { color: white; }
.wl-favorites .wl-icon-btn,
.wl-explore .wl-icon-btn,
.wl-trip .wl-icon-btn,
.wl-wizard .wl-icon-btn,
.wl-detail .wl-icon-btn,
.wl-contribute .wl-icon-btn {
  /* Materiale certificato dei pulsanti circolari (22/7): stessa ricetta
     del tasto centrale — gradiente accent→navy semi-trasparente, bordo
     accent e ombra arancione. Il filtro e' quello condiviso del progetto
     (13/8: era blur(40px) saturate(115%) scritto qui). */
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border-color: rgba(226, 101, 43, 0.45);
  box-shadow: 0 8px 24px rgba(226, 101, 43, 0.38);
  color: white;
}
.wl-favorites .wl-icon-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   Split button dei navigatori (13/8, richiesta utente)
   ============================================================
   Una capsula sola al posto di tre dischi affiancati: navigatore
   primario, filo, chevron; al tap la capsula si allarga e le
   alternative escono sulla stessa riga. Markup e comportamento in
   `nav-split.js`, che spiega anche perche' si allarga invece di aprire
   un pannello (l'altezza non deve cambiare: la usa il fitBounds delle
   mappe per non lasciare pin sotto i pulsanti).

   Il materiale NON e' nuovo: e' la stessa ricetta dei pulsanti circolari
   in vetro qui sopra, applicata una volta al contenitore invece che tre
   volte ai figli. Un `backdrop-filter` per schermata al posto di tre.

   Sta DOPO quel blocco di proposito: `.wl-split .wl-icon-btn` pesa due
   classi come `.wl-detail .wl-icon-btn`, quindi a decidere e' l'ordine.
   ============================================================ */
.wl-split {
  --wl-split-btn: 40px;
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--wl-split-btn);
  padding-right: 2px;
  border: 1px solid rgba(226, 101, 43, 0.45);
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  box-shadow: 0 8px 24px rgba(226, 101, 43, 0.38);
  color: white;
}
/* I figli non portano piu' vetro proprio: sarebbe vetro sopra vetro, e
   dentro una capsula sola si vedrebbero tre dischi in trasparenza. */
.wl-split .wl-icon-btn {
  width: var(--wl-split-btn);
  height: var(--wl-split-btn);
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: inherit;
}
.wl-split .wl-icon-btn:active { transform: scale(0.92); }
/* fill: currentColor perche' i simboli dei tre navigatori nello sprite non
   lo dichiarano, e senza questo restano NERI sul vetro invece che bianchi.
   Stessa trappola gia' documentata su .wl-trip-stop .wl-step-nav: nella
   scheda luogo non si vedeva perche' li' i tre loghi erano SVG inline con
   il fill scritto a mano, cioe' la copia che questo componente ha tolto. */
.wl-split .wl-icon-btn svg { fill: currentColor; }
.wl-split-alts {
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: 0;
  /* visibility e non `hidden`: toglie le alternative dal giro del tasto
     di tabulazione e dagli screen reader esattamente come `display:none`,
     ma si puo' animare. Il ritardo sul ramo di chiusura la fa sparire
     solo a capsula richiusa. */
  visibility: hidden;
  transition: max-width 0.22s ease, visibility 0s linear 0.22s;
}
.wl-split.is-open .wl-split-alts {
  visibility: visible;
  transition: max-width 0.22s ease, visibility 0s;
}
.wl-split[data-split-alts="1"].is-open .wl-split-alts { max-width: var(--wl-split-btn); }
.wl-split[data-split-alts="2"].is-open .wl-split-alts { max-width: calc(var(--wl-split-btn) * 2); }
/* Filo di separazione fra i navigatori e il chevron, come nel combo
   categoria di Esplora: dice che i due lati fanno mestieri diversi
   senza spezzare la capsula in due oggetti. */
.wl-split-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.25);
}
.wl-split-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: var(--wl-split-btn);
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.wl-split-chev {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}
.wl-split-toggle[aria-expanded="true"] .wl-split-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .wl-split-alts { transition: visibility 0s linear 0.01s; }
  .wl-split.is-open .wl-split-alts { transition: visibility 0s; }
  .wl-split-chev { transition: none; }
}
.wl-favorites .wl-menu,
.wl-explore .wl-menu {
  background: var(--wl-glass-menu-bg);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid var(--wl-glass-border);
}
.wl-favorites .wl-menu button,
.wl-explore .wl-menu button { color: white; }
.wl-favorites .wl-menu button:hover,
.wl-explore .wl-menu button:hover { background: rgba(255, 255, 255, 0.12); }

/* ============================================================
   Vista Preferiti — "I tuoi preferiti"
   ============================================================ */
.wl-favorites { padding-top: 0; }

.wl-f-head {
  position: relative;
  display: grid;
  /* 24/7: prima colonna passata da 40px fisso ad auto — Esplora e Preferiti
     ora mostrano il logo completo (monogramma + scritta "anderlust", non
     più solo il monogramma), che è più largo dei 40px riservati al solo
     monogramma. auto si adatta da solo alla larghezza reale di .wl-brand,
     con o senza il wordmark (Il tuo viaggio, che non lo mostra, resta a
     40px come prima). */
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  /* Stessa formula di safe-area e stesso gap sotto (12px) di tutte le
     altre viste (27/7, richiesta utente: standardizzazione header),
     invece del floor 18px fisso di prima che ignorava la notch. */
  padding: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)) 20px 12px;
}
/* Esplora, Preferiti e Itinerari salvati: stessa taglia di Home (27/7).
   Erano 40x23/92x14, cioe' visibilmente piu' piccoli. */
.wl-f-head .wl-mark { width: var(--wl-logo-mark-w); height: var(--wl-logo-mark-h); color: var(--wl-cream); }
.wl-f-head .wl-wordmark-header { width: var(--wl-logo-word-w); height: var(--wl-logo-word-h); }
.wl-f-head .wl-wordmark, .wl-home-head .wl-wordmark { color: var(--wl-cream); }
/* Variante centrata (24/7, richiesta utente, usata solo da Esplora: nessuna
   icona azione da affiancare, il logo può stare su una riga propria sopra
   titolo e descrizione, invece che di lato). */
.wl-f-head-centered {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  row-gap: 6px;
}
.wl-f-head-copy h1 {
  margin: 0 0 3px;
  font-family: var(--wl-serif);
  /* Peso 500, non più 700 (richiesta utente 23/7): stesso peso con cui è
     disegnato il wordmark "anderlust" del logo. */
  font-weight: 500;
  font-size: 1.28rem;
  color: white;
  line-height: 1.15;
}
.wl-f-head-copy p { margin: 0; font-size: 0.76rem; color: rgba(255, 255, 255, 0.75); line-height: 1.4; }

/* margin-top a 0 (27/7): il gap verso l'header lo dà già .wl-f-head
   (12px), altrimenti si sommavano a 20px, fuori standard. */
.wl-f-types { padding: 0 20px; margin-top: 0; }
/* 1/8, screenshot utente: in "I tuoi viaggi" le due capsule non vivono
   dentro .wl-f-types ma in una .wl-tag-row nuda, quindi senza il rientro
   laterale standard da 20px di header, conteggio e card. */
.wl-trip-tabs {
  padding: 0 20px;
  box-sizing: border-box;
}
.wl-f-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 27/7, richiesta utente: più aria tra i filtri/header e la lista
     sottostante (era 10px, si sentiva schiacciata). */
  padding: 0 20px 20px;
  font-family: var(--wl-serif);
  color: white;
  font-size: 0.95rem;
}
.wl-f-listhead .wl-link { color: var(--wl-ice); }
.wl-f-list { display: grid; gap: 12px; padding: 0 20px 6px; }
/* Animazione di deselezione (28/7, richiesta utente: "scappa via dalla
   schermata da dx verso sx"): la card scivola verso sinistra fino a
   uscire dallo schermo invece di sparire di scatto. Usata da Preferiti,
   Visitati e Itinerari salvati, sempre subito prima di rimuovere
   davvero l'elemento e ri-renderizzare la lista (vedi window.WLAnim in
   home.js). Solo trasform+opacity, mai height/margin: niente animazione
   di un grid item dentro un grid a gap fisso, che si comporta in modo
   incoerente tra i motori. */
@keyframes wl-card-slide-out {
  to { transform: translateX(-130%); opacity: 0; }
}
.wl-card-leaving {
  animation: wl-card-slide-out 0.36s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .wl-card-leaving { animation: none; opacity: 0; }
}
.wl-f-card {
  position: relative;
  display: grid;
  grid-template-columns: 16px 60px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     appoggiata (nessun filtro dal vivo: qui le card sono centinaia e lo
     sfondo della vista e' gia' sfocato come file statico, vedi
     .wl-explore .wl-photo-bg piu' sopra).
     13/8: qui c'era la tinta arancio 0.34 con bordo accent, scritta il 27-28/7
     quando ogni famiglia si tarava il suo vetro. Se un giorno si rivuole una
     tinta di famiglia, il posto e' --wl-glass-tint-flat, non questa regola. */
  cursor: pointer;
}
.wl-f-grip { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); }
/* Riga della card lista (Preferiti/Esplora): maniglia, cuore e check sono
   tutti "azione in riga di lista", quindi tutti md; il pin della localita'
   e' un metadato inline dentro il testo, quindi xs (27/7: prima erano
   17/22/20 e 11px, quattro misure diverse nella stessa riga). */
.wl-f-grip svg { width: var(--wl-ic-md); height: var(--wl-ic-md); transform: rotate(90deg); }
.wl-f-card img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; }
.wl-f-cat {
  display: inline-block;
  margin-bottom: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font: 700 0.6rem var(--wl-sans);
}
/* Colonna 1fr della griglia (16px 60px 1fr auto / 60px 1fr auto per i
   Visitati): senza min-width: 0 un nome lungo non si comprime, sfonda la
   colonna e finisce sotto il pulsante check/cuore in "auto" (bug reale,
   segnalato dall'utente). L'h3 tronca con ellissi invece di andare a capo
   o uscire dal contenitore. */
.wl-f-card > div:not(.wl-f-actions) { min-width: 0; }
.wl-f-card h3 { margin: 0; font-family: var(--wl-serif); font-weight: 700; font-size: 0.92rem; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-f-card .wl-loc { margin-top: 2px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-f-card .wl-loc svg { width: var(--wl-ic-xs); height: var(--wl-ic-xs); }

/* ------------------------------------------------------------------
   Punteggio del luogo (14/8): voto della community, oppure notorieta'.

   Nessun fondo, nessun bordo, nessun backdrop-filter propri: vivono dentro
   card che sono gia' vetro (sezione "Il vetro delle card" in cima al foglio)
   e devono appoggiarsi a quel materiale. Un velo proprio qui dentro sarebbe
   vetro sopra vetro, il difetto corretto in 1.37-beta.

   I due stati NON si somigliano, ed e' il punto: le stelle sono un giudizio
   di persone, la notorieta' e' una stima calcolata da Wikipedia. Glifo
   diverso, colore diverso, e la notorieta' non stampa mai un numero. Vedi
   ratingHTML in home.js per il perche' non sono i voti di Google Maps.
   ------------------------------------------------------------------ */
.wl-rating,
.wl-fame {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.wl-rating svg { flex: none; width: var(--wl-ic-xs); height: var(--wl-ic-xs); }

/* Misuratore della notorieta': cinque tacche di altezza crescente, accese in
   arancione fino al livello del luogo (14/8, richiesta utente: prima erano tre
   barre sempre grigie e il livello lo diceva solo la parola accanto).

   Le altezze crescono sul serio, non e' decorazione: cinque forme identiche
   riempite per quattro quinti si leggono come "4 su 5", cioe' come un voto, e
   questo blocco esiste proprio per non farsi scambiare per uno. La scaletta e'
   il linguaggio dell'intensita', non del punteggio.

   Le spente restano dello stesso colore del testo a bassa opacita' invece di
   un grigio proprio: cosi' il misuratore appartiene alla riga in cui vive e
   non si porta dietro una tinta che sul vetro chiaro stonerebbe. */
.wl-fame-meter {
  display: inline-flex;
  align-items: flex-end;
  flex: none;
  gap: 1.5px;
  height: 11px;
}
.wl-fame-meter i {
  width: 2.5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.3;
}
.wl-fame-meter i:nth-child(1) { height: 3px; }
.wl-fame-meter i:nth-child(2) { height: 5px; }
.wl-fame-meter i:nth-child(3) { height: 7px; }
.wl-fame-meter i:nth-child(4) { height: 9px; }
.wl-fame-meter i:nth-child(5) { height: 11px; }
.wl-fame-meter i.on { background: var(--wl-accent); opacity: 1; }
/* Il colore va dichiarato, non ereditato. Senza questa riga il conteggio
   usciva in --wl-ink (#24364c, il navy scuro del progetto) su una card
   scura, cioe' praticamente invisibile: le card di lista non impostano un
   colore di testo proprio e il valore ereditato e' quello del contenitore.
   Si vedeva solo a schermo, misurato sul colore calcolato: la geometria era
   giusta e nessun controllo logico poteva accorgersene. */
.wl-rating { color: rgba(255, 255, 255, 0.78); }
.wl-rating svg { color: var(--wl-accent); }
.wl-rating strong { font-weight: 700; color: white; }
/* Il conteggio e' contesto, non il dato: sta in secondo piano rispetto alla
   media, altrimenti "(128)" pesa quanto "4,7". */
.wl-rating small { font-weight: 500; opacity: 0.78; }
/* Ghiaccio e non arancione: l'arancione in questo progetto marca le azioni e
   il voto vero, e la notorieta' non e' nessuno dei due. */
.wl-fame { color: var(--wl-ice); opacity: 0.9; }
.wl-fame--low { opacity: 0.66; }

/* Nelle card di lista il punteggio sta accanto alla localita', alla sua stessa
   taglia: e' un altro metadato della stessa riga, non un elemento di rilievo.

   Il contenitore flex non e' decorazione. Senza, .wl-loc e il punteggio sono
   due elementi inline slegati dentro una colonna di griglia: insieme sfondano
   la colonna e il conteggio "(128)" finisce SOTTO il cuore e la spunta a
   destra (difetto visto a schermo, non dai controlli logici, perche' la
   geometria della card restava corretta). Qui la localita' e' l'unica a
   comprimersi e troncare, il punteggio resta intero. */
.wl-f-card .wl-f-metarow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 2px;
}
.wl-f-card .wl-f-metarow .wl-loc { margin-top: 0; min-width: 0; flex: 0 1 auto; }
.wl-f-card .wl-rating,
.wl-f-card .wl-fame { flex: none; font-size: 0.72rem; }
/* L'etichetta della notorieta' e' la piu' lunga delle due: se proprio lo
   spazio manca, si tronca lei invece di spingere fuori il resto. */
.wl-f-card .wl-fame { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Contenitore delle azioni in riga (28/7): cuore preferiti + spunta
   visitato affiancati, un solo elemento nell'ultima colonna "auto" della
   griglia della card invece di doverla ridisegnare a 5 colonne. Vuoto di
   suo, prende dimensione dai due bottoni dentro. */
.wl-f-actions { display: flex; align-items: center; gap: 8px; }
/* Stessa ricetta certificata dei pulsanti tondi della card viaggio
   (27/7, richiesta utente: "lo voglio con lo sfondo arancione e il testo
   bianco, come negli itinerari salvati"): prima era `background: none` +
   glifo arancione, quindi un cuore nudo e sottile che si leggeva molto
   piu' leggero di ogni altra azione dell'app. Stesso diametro (36px) dei
   pulsanti della card viaggio. Estesa al bottone "visitato" (28/7), stesso
   materiale, stesso contenitore in riga. */
.wl-f-card .wl-fav,
.wl-f-card .wl-visited {
  position: static;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(226, 101, 43, 0.45);
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  box-shadow: 0 8px 24px rgba(226, 101, 43, 0.38);
  color: white;
}
/* Stato attivo, ripetuto qui per specificita': `.wl-f-card .wl-fav` e
   `.wl-fav.active` pesano uguale (due classi), quindi vincerebbe questa
   perche' viene dopo nel file, e il cuore/la spunta attivi resterebbero
   traslucidi come lo stato inattivo. Stesso inciampo gia' visto altrove
   nel progetto (vedi la nota su .wl-contrib-selectors). */
.wl-f-card .wl-fav.active,
.wl-f-card .wl-visited.active {
  background: var(--wl-accent);
  border-color: var(--wl-accent);
  color: white;
}
.wl-f-card .wl-fav svg,
.wl-f-card .wl-visited svg { width: var(--wl-ic-md); height: var(--wl-ic-md); }
.wl-f-check {
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--wl-ice);
  color: transparent;
}
.wl-f-check svg { width: var(--wl-ic-md); height: var(--wl-ic-md); }
/* Nasconde l'intero contenitore (cuore + spunta visitato), non solo il
   cuore da solo (28/7): altrimenti in modalita' selezione la spunta
   visitato restava sola, disallineata rispetto al check di selezione. */
.wl-favorites.selecting .wl-f-actions,
.wl-explore.selecting .wl-f-actions { display: none; }
.wl-favorites.selecting .wl-f-check,
.wl-explore.selecting .wl-f-check { display: grid; }
.wl-f-card.chosen .wl-f-check { background: var(--wl-ice); border-color: var(--wl-ice); color: var(--wl-navy); }

.wl-f-empty { padding: 60px 24px 118px; text-align: center; color: rgba(255, 255, 255, 0.8); }
.wl-f-empty p { margin: 0 0 10px; font-size: 0.88rem; }
.wl-f-empty .wl-link { color: var(--wl-ice); }
.wl-empty-mascot { display: block; width: 190px; max-width: 60%; height: auto; margin: 0 auto 18px; }

/* Barra di selezione multipla (17/7, molto più leggera di prima: appare
   solo in modalità "Modifica", una riga sola — niente più titolo+sottotitolo
   fissi che occupavano spazio anche senza nulla selezionato). */
.wl-f-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 20px 118px;
  padding: 12px 14px 12px 18px;
  border-radius: 999px;
  /* Ricetta "vetro vero" (27/7, richiesta utente: altro pannello rimasto
     con la vecchia ricetta pre-27/7). 28/7: stessa ricetta arancio di
     .wl-f-card ovunque, tolto lo sfondo amber di Preferiti (vedi
     .wl-f-card più sopra). Blur sicuro qui: è una barra sola, non
     centinaia di card ripetute come in Esplora. */
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.34), rgba(5, 28, 50, 0.20));
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(226, 101, 43, 0.45);
}
.wl-f-bar-label { font-size: 0.78rem; font-weight: 600; color: white; }
.wl-f-bar-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--wl-ice);
  color: var(--wl-navy);
  font: 700 0.78rem var(--wl-sans);
  cursor: pointer;
  white-space: nowrap;
}
.wl-f-bar-btn svg { width: var(--wl-ic-md); height: var(--wl-ic-md); }
.wl-f-bar-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   Modale "Novità" (changelog semplice per l'utente)
   ============================================================ */
.wl-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(14, 42, 71, 0.45);
  backdrop-filter: blur(2px);
}
.wl-modal {
  width: min(360px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  padding: 28px 24px 24px;
  border-radius: var(--wl-r-lg);
  background: var(--wl-cream);
  box-shadow: var(--wl-shadow-float);
  text-align: center;
  font-family: var(--wl-sans);
}
.wl-modal .wl-mark {
  width: 46px;
  height: 26px;
  margin: 0 auto 10px;
  display: block;
  color: var(--wl-ice);
}
.wl-modal h2 {
  margin: 0 0 18px;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--wl-navy);
}
.wl-modal-group { margin-bottom: 18px; text-align: left; }
.wl-modal-group h3 {
  margin: 0 0 8px;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--wl-navy);
}
.wl-modal-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.wl-modal-group li { font-size: 0.86rem; line-height: 1.4; color: var(--wl-ink); }
.wl-modal .primary { width: 100%; border-radius: 999px; background: var(--wl-navy); font-family: var(--wl-sans); }
.wl-modal-alert {
  border: 1px solid rgba(226, 101, 43, 0.62);
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.94), rgba(8, 25, 42, 0.96));
  color: white;
}
.wl-modal-alert .wl-mark,
.wl-modal-alert h2,
.wl-modal-alert .wl-modal-intro { color: white; }
.wl-modal-alert h2 { margin-bottom: 10px; }
.wl-modal-alert .primary {
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.94);
  color: var(--wl-navy);
}
.wl-modal-version { margin: 14px 0 0; font-size: 0.7rem; color: var(--wl-muted); }
.wl-modal-intro { margin: 0 0 14px; font-size: 0.88rem; color: var(--wl-muted); }
.wl-modal-note { margin: 14px 0 16px; font-size: 0.74rem; line-height: 1.4; color: var(--wl-muted); text-align: left; }

/* Popup posizione al primo accesso (2/8): #geo-intro-backdrop, riusa
   interamente .wl-modal/.wl-modal-glass. Qui solo l'icona grande in testa e
   la riga che indica dove sta l'interruttore, ripetendo la stessa icona
   (#wl-ic-current) che l'utente dovrà cercare in alto a destra. */
.wl-geo-intro-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  display: block;
  color: var(--wl-accent);
}
.wl-geo-intro-where {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid rgba(226, 101, 43, 0.28);
  background: rgba(226, 101, 43, 0.09);
  text-align: left;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--wl-ink);
}
.wl-geo-intro-where svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--wl-accent);
}
.wl-geo-intro-where strong { display: block; font-weight: 700; }
.wl-geo-intro-where span span { color: var(--wl-muted); }

/* Passaggi in stile timeline: nodo-icona, linea verticale, nodo-icona */
/* Passaggi dell'installazione su iOS: e' l'unico altro elenco "a binario"
   dell'app, e dal 12/8 (richiesta utente: stessa timeline dappertutto) usa
   la stessa colonna, lo stesso tratteggio e lo stesso medaglione della
   timeline del viaggio salvato. La sua operativita' resta la sua: qui non ci
   sono luoghi ne' card, ci sono tre istruzioni con un'icona al posto del
   numero, e il nodo sta in cima al testo (che puo' essere lungo due righe)
   invece che centrato. */
.wl-steps-list {
  --wl-tl-rail: 52px;
  --wl-tl-num: 42px;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.wl-steps-list li {
  position: relative;
  display: grid;
  grid-template-columns: var(--wl-tl-rail) 1fr;
  gap: 0 10px;
  padding-bottom: 18px;
}
.wl-steps-list li:last-child { padding-bottom: 0; }
.wl-steps-list li::before {
  content: "";
  position: absolute;
  left: calc(var(--wl-tl-rail) / 2 - 1px);
  /* Parte da sotto il medaglione (42px) e scende fino alla riga seguente. */
  top: var(--wl-tl-num);
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, 0.32) 0, rgba(255, 255, 255, 0.32) 5px,
    transparent 5px, transparent 10px);
}
.wl-steps-list li:last-child::before { display: none; }
.wl-step-ic { justify-self: center; }
.wl-step-ic svg { width: 22px; height: 22px; }
.wl-step-txt {
  align-self: center;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--wl-ink);
}
.wl-step-txt strong { color: var(--wl-navy); }

/* Variante glass del modale (regola di design: glassmorphism ovunque
   abbia senso, con leggibilità piena — qui su sfondo app chiaro serve
   un velo scuro più presente del login) */
/* 14/8: i modali erano rimasti fuori da tutti e due i giri sul vetro. Il 13/8
   (1.36-1.37) era stato unificato il FILTRO, che infatti qui e' gia' quello
   condiviso; la sera dello stesso giorno (1.44) il filo del bordo era passato
   al gradiente, perche' un colore di bordo piatto su un angolo arrotondato si
   legge come un contorno disegnato invece che come un riflesso. Il modale
   aveva ancora il bianco piatto a 0.38, cioe' esattamente il "bordo bianco
   bruttissimo" segnalato allora sulle card.
   Il VELO resta denso, e non e' una deroga: un modale e' una superficie di
   LETTURA sopra una pagina intera, non una card sopra uno sfondo. Con il velo
   leggero della famiglia (0.08 -> 0.16) il testo lungo delle Novita' finirebbe
   sotto il minimo WCAG: misurato prima dell'intervento, il modale sta a
   4.62:1, cioe' gia' vicino al limite di 4.5:1 con lo 0.74 che aveva. Quello
   che cambia e' il MECCANISMO, non la densita': velo con un verso (piu' chiaro
   in alto, come la luce che cade) al posto della tinta piatta, filo di
   gradiente al posto del bianco continuo, e la coppia di ombre del progetto al
   posto di quella scritta a mano. Vale la regola gia' scritta in
   knowledge/wiki/vetro-materiale.md: quando una famiglia cambia fondo, il velo
   si rimisura, non si eredita. */
.wl-modal-glass {
  background: linear-gradient(180deg, rgba(9, 32, 56, 0.50) 0%, rgba(4, 20, 38, 0.62) 100%) padding-box,
              var(--wl-glass-rim) border-box;
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid transparent;
  box-shadow: var(--wl-glass-edge-out), var(--wl-glass-lift);
  font-family: "Nunito", sans-serif;
}
@supports not (backdrop-filter: blur(1px)) {
  .wl-modal-glass {
    background: linear-gradient(180deg, rgba(9, 32, 56, 0.86) 0%, rgba(4, 20, 38, 0.92) 100%) padding-box,
                var(--wl-glass-rim) border-box;
  }
}
.wl-modal-glass .wl-mark { color: var(--wl-ice); }
.wl-modal-glass h2 { color: white; font-family: "Nunito", sans-serif; font-weight: 600; }
.wl-modal-glass .wl-modal-intro { color: rgba(255, 255, 255, 0.85); }
.wl-modal-glass .wl-modal-note { color: rgba(255, 255, 255, 0.7); }
.wl-modal-glass .wl-step-txt { color: rgba(255, 255, 255, 0.95); }
.wl-modal-glass .wl-step-txt strong { color: white; }
.wl-modal-glass .primary {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(13, 39, 71, 0.85);
  font-family: "Nunito", sans-serif;
}
.wl-modal-glass .wl-modal-group h3 { color: white; }
.wl-modal-glass .wl-modal-group li { color: rgba(255, 255, 255, 0.9); }
.wl-modal-glass .wl-modal-version { color: rgba(255, 255, 255, 0.65); }
/* L’alert eredita il vetro scuro, ma il comando Chiudi deve restare ad alto contrasto. */
.wl-modal-glass.wl-modal-alert .primary {
  background: rgba(255, 255, 255, 0.96);
  color: var(--wl-navy);
  border-color: rgba(255, 255, 255, 0.78);
}
/* Più opaco della variante standard (Novità ha testo denso, verticale,
   spesso su più voci: la trasparenza piena lo rendeva poco leggibile). */
/* Variante densa (Novita', geo-intro): stesso materiale, velo piu' carico
   perche' ci si legge dentro un testo lungo. Ridichiara il solo velo, il filo
   e le ombre restano quelli di .wl-modal-glass. */
.wl-modal-opaque {
  background: linear-gradient(180deg, rgba(9, 32, 56, 0.70) 0%, rgba(4, 20, 38, 0.80) 100%) padding-box,
              var(--wl-glass-rim) border-box;
}
@supports not (backdrop-filter: blur(1px)) {
  .wl-modal-opaque {
    background: linear-gradient(180deg, rgba(9, 32, 56, 0.93) 0%, rgba(4, 20, 38, 0.96) 100%) padding-box,
                var(--wl-glass-rim) border-box;
  }
}

/* ============================================================
   Welcome / login reale (Supabase Auth)
   ============================================================ */
.wl-welcome {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 28px;
}
.wl-welcome-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 22/7: il disegno (castello, borgo, sentiero, bussola) è concentrato
     nella metà superiore dell'immagine — top, non center, altrimenti un
     ritaglio stretto lo taglierebbe via. */
  object-position: top center;
  z-index: 0;
}
.wl-welcome-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14, 42, 71, 0.38) 0%, rgba(14, 42, 71, 0.1) 26%, rgba(14, 42, 71, 0.02) 48%, rgba(14, 42, 71, 0.05) 80%, rgba(14, 42, 71, 0.16) 100%);
}
.wl-welcome-top {
  position: relative;
  z-index: 2;
  padding: 88px 24px 0;
  text-align: center;
}
.wl-lang-toggle {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border-radius: 999px;
  padding: 7px 13px;
  color: white;
  /* 5/9: era 700 a 0.8rem dentro una pillola con fondo e bordo pieni, cioe'
     pesava quanto il marchio a cui sta accanto. Un cambio lingua e' un
     servizio, non un'azione della schermata: resta raggiungibile e smette
     di gridare. Il fondo e il bordo scendono nella regola qui sopra. */
  font: 600 0.75rem var(--wl-sans);
  cursor: pointer;
}
.wl-lang-toggle svg { width: 16px; height: 16px; opacity: 0.9; }
.wl-brand-hero {
  justify-content: center;
  align-items: center;
}
.wl-mark-solo {
  width: 84px;
  height: 48px;
  color: white;
  filter: drop-shadow(0 2px 12px rgba(5, 28, 50, 0.5));
}
.wl-wordmark-hero {
  width: 178px;
  height: 27px;
  margin-left: 4px;
  color: white;
  filter: drop-shadow(0 2px 10px rgba(5, 28, 50, 0.5));
  transform: translateY(3px);
}
.wl-welcome-top .wl-welcome-tag {
  margin: 12px 0 0;
  font-family: "Nunito", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(5, 28, 50, 0.5);
}

/* Card di login "vetro smerigliato" centrata: valori concordati con
   l'utente perché la villa resti chiaramente percepibile attraverso
   il vetro, con testi navy ben leggibili grazie al blur. */
.wl-welcome-card {
  position: relative;
  /* Qui c'era `top: 22px`, una spinta visiva che NON muoveva il box: la
     card si vedeva 22px piu' in basso di dov'era davvero. Finche' era
     l'ultimo elemento non se ne accorgeva nessuno; col pulsante ospite
     dopo di lei, quei 22px diventavano una sovrapposizione misurabile (il
     bottone iniziava 6px sopra il bordo inferiore della card). Tolta: la
     posizione verticale la decidono i margini automatici, che muovono il
     box davvero. */
  z-index: 2;
  /* 5/9: `margin: auto 26px` dava alla card TUTTO lo spazio libero, sopra e
     sotto. Finche' era l'ultimo elemento andava bene; da quando l'ingresso
     da ospite le sta dopo, quel margine inferiore automatico lo spingeva in
     fondo allo schermo, a 200px dalla card, come se fosse finito li' per
     sbaglio. Ora l'auto e' solo sopra: lo spazio sotto lo rivendica il
     bottone ospite, e i due si muovono come un blocco solo. */
  margin: auto 26px 0;
  padding: 12px 16px 10px;
  /* Velo adattivo basato sull'analisi della foto: la card poggia su zona
     scura (lum 0.17-0.36) tranne la fascia del titolo, che sta sul cielo
     chiaro del tramonto (lum 0.68): si scurisce solo lì, il resto è vetro
     puro. Se la foto cambia, ricalibrare (scratchpad analyze-bg). */
  background: linear-gradient(180deg, rgba(5, 28, 50, 0.32) 0%, rgba(5, 28, 50, 0.12) 15%, rgba(5, 28, 50, 0) 28%);
  -webkit-backdrop-filter: blur(4px) saturate(105%);
  backdrop-filter: blur(4px) saturate(105%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(5, 28, 50, 0.18);
  font-family: "Nunito", sans-serif;
}
/* Senza supporto al blur la trasparenza renderebbe il testo illeggibile:
   si ripiega su un velo navy piu' coprente (il testo qui e' bianco). */
@supports not (backdrop-filter: blur(1px)) {
  .wl-welcome-card { background: rgba(5, 28, 50, 0.78); }
}

#auth-title {
  margin: 0 0 1px;
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.45rem;
  color: white;
  text-shadow: 0 1px 10px rgba(5, 28, 50, 0.55);
}
.wl-auth-sub {
  margin: 0 0 10px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(5, 28, 50, 0.4);
}

/* Campi trasparenti bordati di bianco, testo bianco, come nel mockup.
   26/7, richiesta utente: niente colore diverso al focus (il campo deve
   restare identico a riposo e focalizzato, il cursore lampeggiante basta
   come segnale).
   27/7, richiesta utente: stesso materiale del pulsante "Mi trovo qui"
   (.wl-contrib-gps-btn) — niente backdrop-filter (dopo due tentativi di
   blur, 20px poi 10px, la richiesta finale è di toglierlo del tutto),
   stesso bordo più leggero (0.35 invece di 0.5). */
.wl-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
}
.wl-field > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.9);
}
.wl-field input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 42px;
  /* margin/padding/shadow espliciti: styles.css (condiviso con l'admin)
     aggiunge margin-top a text/email ma non a password (campi sfalsati)
     e un box-shadow azzurro al focus (perimetro indesiderato). */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  appearance: none;
  /* 16px minimi: sotto questa soglia iOS Safari zooma la pagina al focus,
     facendo "strabordare" la card verso destra. */
  font: 400 16px/1.3 "Nunito", sans-serif;
  color: white;
  caret-color: white;
}
.wl-field input:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}
/* L'autofill di WebKit dipinge lo sfondo di bianco/giallo: lo si rende
   invisibile per mantenere il campo "anonimo" dentro il vetro. */
.wl-field input:-webkit-autofill,
.wl-field input:-webkit-autofill:hover,
.wl-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 99999s ease-in-out 0s;
}
.wl-field input::placeholder { color: rgba(255, 255, 255, 0.75); }
.wl-eye {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: -8px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}
.wl-eye svg { width: 24px; height: 24px; }

/* 5/9: era a meta' strada fra il campo e il pulsante, senza appartenere a
   nessuno dei due. Si stringe verso la password, che e' la sua. */
.wl-forgot-row { margin: -2px 0 0; text-align: right; }
.wl-welcome .wl-link {
  color: white;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(5, 28, 50, 0.4);
}
.wl-auth-message:empty { display: none; }
.wl-auth-message {
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffd3c2;
  text-shadow: 0 1px 4px rgba(5, 28, 50, 0.5);
}
/* Il primario della card di benvenuto (5/9, richiesta utente: "come nel
   resto dell'app"). Era navy col filo ghiaccio, scelta del 28/7, e per
   quasi due mesi ha avuto un difetto misurabile: il fondo navy translucido
   (rgba(13,39,71,.72)) contro campi a rgba(255,255,255,.1) e un "Accedi con
   Google" bianco pieno con ombra faceva vincere il SECONDARIO. L'azione
   principale della schermata era la meno evidente delle tre.
   Ora e' l'accent della casa, lo stesso di .wl-cta e del monogramma
   centrale: un'app che ha un colore per "questa e' l'azione" non puo'
   permettersi una schermata dove quel colore non compare.
   Il rilievo resta quello chiesto il 28/7 (luce sottile in alto, ombra
   interna in basso, convesso), solo in arancione invece che in navy.
   L'altezza sale da 39 a 52: contro campi da 42 non deve solo distinguersi
   per colore, deve essere piu' grande di loro. In registrazione la card ha
   tre campi in fila e senza questa differenza il pulsante si legge come un
   quarto campo. */
.wl-welcome .primary {
  width: 100%;
  min-height: 52px;
  /* Stacca dai campi: in registrazione ce ne sono tre in fila e senza
     questo respiro il pulsante entra nella pila come se fosse il quarto. */
  margin-top: 12px;
  padding: 8px 20px;
  border-radius: 15px;
  background: linear-gradient(160deg, #ef7b41 0%, var(--wl-accent) 58%, #c8521c 100%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    0 12px 26px rgba(226, 101, 43, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -3px 8px rgba(118, 40, 6, 0.32);
  /* 1.17rem = 18.7px, non un numero a caso: bianco sull'accent misura 3,43:1
     di contrasto, che WCAG AA accetta solo come "testo grande", cioe' da
     18.66px in su se in grassetto. Sotto quella soglia servirebbe 4,5:1, che
     su questo arancione non si raggiunge senza cambiare colore. Mezzo pixel
     sopra la soglia il pulsante e' a norma restando dell'arancione di casa. */
  font: 700 1.17rem "Nunito", sans-serif;
  letter-spacing: 0.01em;
}
.wl-welcome .primary:hover {
  box-shadow:
    0 14px 30px rgba(226, 101, 43, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -3px 8px rgba(118, 40, 6, 0.32);
}
.wl-welcome .primary:active { transform: translateY(1px); }

/* Schermi corti (iPhone SE e simili, 667 di altezza): misurato, a 640 la
   card arriva a toccare il claim, zero stacco. Non si tagliava niente, ma
   "non taglia" non e' un layout. Qui il marchio scende di taglia e cede
   spazio: e' la parte che si puo' comprimere senza togliere niente a chi
   deve accedere. */
@media (max-height: 700px) {
  .wl-welcome-top { padding-top: 40px; }
  .wl-welcome-tag { margin-top: 8px; font-size: 0.7rem; letter-spacing: 0.16em; }
  /* Marchio e monogramma hanno larghezza e altezza fisse, non una
     max-width: si riducono davvero solo riscrivendo le due misure, in
     proporzione (178x27 e 84x48 diventano 150x23 e 70x40). */
  .wl-wordmark-hero { width: 150px; height: 23px; }
  .wl-mark-solo { width: 70px; height: 40px; }
  .wl-welcome-card { padding-top: 10px; }
  #auth-title { font-size: 1.3rem; }
  .wl-auth-sub { margin-bottom: 8px; font-size: 0.8rem; }
}

.wl-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 400;
  text-shadow: 0 1px 6px rgba(5, 28, 50, 0.4);
}
.wl-divider::before, .wl-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.5); }

/* 5/9: Google scende di un gradino. Era bianco pieno con ombra, cioe'
   l'elemento piu' forte dell'intera schermata: un modo di accedere fra i
   due gridava piu' dell'azione principale. Ora e' lo stesso vetro dei
   campi (stessa ricetta di .wl-field, blur compreso: nessuno, per la
   richiesta del 27/7), quindi la gerarchia si legge in un colpo d'occhio,
   arancione poi vetro. Il marchio G resta su fondo bianco, in un dischetto:
   e' la sola parte che non si puo' reinterpretare a piacere. */
.wl-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font: 600 0.95rem "Nunito", sans-serif;
  cursor: pointer;
  text-shadow: 0 1px 6px rgba(5, 28, 50, 0.4);
}
.wl-google-btn:hover { background: rgba(255, 255, 255, 0.16); }
.wl-google-btn svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 50%;
  background: #fff;
}

.wl-switch {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(5, 28, 50, 0.4);
}

/* ============================================================
   Wizard "Crea itinerario" (STEP 1-5). Colonna flex a tutta altezza,
   solo il corpo scorre (il contenuto non finisce mai sotto la tab bar)
   e stessa ricetta vetro di .wl-x-panel/.wl-tag/.wl-icon-btn: nessuna
   nuova "resa" di vetro, solo composizione di classi già esistenti.
   ============================================================ */
.wl-wizard {
  height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wl-wiz-toolbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 10px;
  /* 23/7, richiesta utente: niente più "toolbar" come contenitore — solo i
     due pulsanti tondi (già .wl-icon-btn, invariati) e il titolo, senza
     pillola/riquadro di vetro dietro. Azzera tutta la resa da .wl-x-toolbar
     (background/bordo/ombra/blur/padding), lascia solo margine e griglia. */
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Margine sotto 12px, non più 6px (27/7): stesso gap standard di tutte
     le altre viste sotto l'header. */
  margin: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)) 16px 12px;
  padding: 0 4px;
}
.wl-wiz-brand {
  grid-column: 2;
  justify-self: center;
  color: var(--wl-cream);
}
.wl-wiz-brand .wl-mark { width: var(--wl-logo-mark-w); height: var(--wl-logo-mark-h); color: var(--wl-cream); }
.wl-wiz-brand .wl-wordmark-header { width: var(--wl-logo-word-w); height: var(--wl-logo-word-h); color: var(--wl-cream); }
/* Assegnazione esplicita di colonna (non affidarsi al piazzamento
   automatico): allo STEP 1 "Indietro" si nasconde con .hidden
   (display:none), e senza grid-column fisso titolo/chiudi scivolerebbero
   nelle colonne 1/2 invece di restare centrati in 2/3. */
.wl-wiz-back { grid-column: 1; }
.wl-wiz-back svg { transform: rotate(90deg); }
.wl-wiz-close { grid-column: 3; }
.wl-wiz-close svg { width: 21px; height: 21px; }

/* JourneyProgress: sentiero che sale e scende (come un profilo collinare)
   invece di una barra piatta — su mockup dell'utente, stesso linguaggio
   "percorso/viaggio" del resto di Wanderlust. Vedi renderJourneyProgress()
   in wizard.js per come si generano curva/nodi/trattini. */
.wl-jp {
  flex: 0 0 auto;
  /* padding-top a 0 (27/7): il gap verso il toolbar lo dà già
     .wl-wiz-toolbar (12px), altrimenti si sommavano fuori standard. */
  padding: 0 0 2px;
}
/* Stesso rapporto del viewBox (400x84) di JP_VIEWBOX in wizard.js: con
   preserveAspectRatio di default (uniforme) e nessuna distorsione, i
   cerchi restano sferici invece di ovalizzarsi. */
.wl-jp-svg { display: block; width: 100%; height: auto; aspect-ratio: 400 / 84; }
/* Niente più pulsante "Avanti" (16/7): il percorso stesso indica dove
   toccare. Un tratto per ogni coppia di pallini (non più un unico path),
   così quelli già passati e quello successivo possono colorarsi da soli. */
.wl-jp-segment {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
}
.wl-jp-segment-done { stroke: var(--wl-accent); }
/* Flusso animato leggero, sx→dx, in loop: segnala "tocca il pallino
   successivo" senza un pulsante. Dash corto + intervallo lungo = un
   impulso che scorre, non una linea tratteggiata statica. */
.wl-jp-segment-next {
  stroke: var(--wl-accent);
  stroke-dasharray: 8 14;
  animation: wl-jp-flow 1.3s linear infinite;
}
@keyframes wl-jp-flow {
  to { stroke-dashoffset: -22; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-jp-segment-next { animation: none; }
}
.wl-jp-node { fill: rgba(14, 42, 71, 0.4); stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.6; }
.wl-jp-node-done { fill: var(--wl-accent); stroke: rgba(255, 255, 255, 0.85); }
.wl-jp-ring { fill: none; stroke: white; stroke-width: 2; }
.wl-jp-core { fill: var(--wl-navy); stroke: white; stroke-width: 1.5; }
/* Ogni pallino porta alla propria scheda (jumpToStep in wizard.js).
   .wl-jp-hitarea allarga l'area di tocco oltre il pallino visibile
   (r=5/11 è troppo piccolo da centrare col dito). */
.wl-jp-hit { cursor: pointer; }
.wl-jp-hit:focus-visible { outline: 2px solid var(--wl-ice); outline-offset: 2px; }
.wl-jp-hitarea { fill: transparent; }

.wl-wiz-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px calc(84px + max(12px, env(safe-area-inset-bottom, 0px) - 14px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* minmax(0,1fr): senza, la colonna auto si allarga alla larghezza
   intrinseca dei figli (es. il rail "Aggiungi una tappa" dello STEP 5,
   ~10 card da 118px) e l'intero step sborda a destra del viewport. */
.wl-wiz-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.wl-wiz-step.hidden { display: none; }
/* Compensa lo spazio non più riservato da #wizard-result-hero, ora
   position:fixed (22/7): senza un padding il resto del contenuto
   (statistiche escluse, sovrapposte dentro la hero) scorrerebbe nascosto
   sotto di lei fin dall'inizio. Il valore esatto è calcolato in JS
   (syncResultHeroSpacing in wizard.js), non qui: un valore fisso in dvh
   si sommava allo spazio già occupato dalla toolbar sopra .wl-wiz-body
   (che #wizard-step-5 eredita comunque, essendo ancora nel flusso
   normale), lasciando un vuoto vero e proprio grande quanto la toolbar
   stessa tra la hero e il resto del contenuto. */
/* Pannelli "Tempo e mezzo" (2) e accordion "Personalizza" (4, F4 — eredi
   del vecchio #wizard-customize): contenuto in un unico div con gruppi di
   campi eterogenei (preset, Partenza/Giorni, chip rientro, Mezzo,
   Raggio/Km, toggle regioni) — senza un gap suo restavano incollati uno
   all'altro (segnalato dall'utente 16/7: "tutto raggruppato"). */
#wizard-time, #wizard-style-custom, #wizard-customize-accordion .wl-wiz-accordion-inner { display: grid; gap: 20px; }
.wl-wiz-hint { margin: 0; font-size: 0.8rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }

/* Intestazione del passo (19/8): "Passo 2 di 5" + titolo a parole, scritta
   da renderStepHeading() in wizard.js dentro .wl-wiz-stephead. Vive nel
   flusso del pannello e scorre con lui: il sentiero in cima dice dove si è
   solo finché resta in vista, e i pannelli lunghi lo portano fuori schermo
   quasi subito. Niente vetro qui: è contenuto, non navigazione (regola del
   materiale — il vetro appartiene al livello che galleggia sopra). */
.wl-wiz-stephead { display: grid; gap: 2px; }
.wl-wiz-stepcount {
  font: 700 0.68rem var(--wl-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wl-ice);
  opacity: 0.85;
}
.wl-wiz-steptitle {
  margin: 0;
  font: 700 1.32rem var(--wl-serif);
  line-height: 1.2;
  color: white;
}

/* Anteprima "cosa vedrai" negli step 1-4 del wizard: striscia orizzontale
   di miniature cliccabili. Appesa in fondo al pannello attivo, si aggiorna
   ad ogni passo. */
.wl-wiz-preview { margin-top: auto; }
.wl-wiz-preview.hidden { display: none; }
.wl-wiz-preview-title {
  margin: 0 0 8px;
  font: 700 0.82rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.92);
}
.wl-wiz-preview-empty {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}
.wl-wiz-preview-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.wl-wiz-preview-card {
  flex: 0 0 118px;
  display: grid;
  gap: 4px;
  scroll-snap-align: start;
  text-align: left;
  padding: 0;
  border: none;
  background: transparent;
  color: white;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wl-wiz-preview-card img {
  width: 118px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--wl-r-md);
  background: rgba(5, 28, 50, 0.35);
}
.wl-wiz-preview-name {
  font: 700 0.74rem/1.25 var(--wl-sans);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wl-wiz-preview-where {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-wiz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-wiz-tile {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 10px;
  text-align: center;
  border-radius: var(--wl-r-md);
  background: rgba(5, 28, 50, 0.22);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: white;
  cursor: pointer;
}
.wl-wiz-tile svg { width: 38px; height: 38px; color: var(--wl-ice); }
.wl-wiz-tile strong { font: 700 0.82rem var(--wl-sans); }
.wl-wiz-tile small { font-size: 0.68rem; color: rgba(255, 255, 255, 0.65); }
.wl-wiz-tile.active {
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  border-color: rgba(226, 101, 43, 0.45);
}
.wl-wiz-tile.active svg { color: white; }
.wl-wiz-tile.suggested { border-color: var(--wl-ice); }
.wl-wiz-tile:disabled { opacity: 0.35; cursor: not-allowed; }

/* Contenitore del gruppo di sei pulsanti (22/7, richiesta utente):
   glassmorph con effetto incassato, così i sei pulsanti sembrano poggiare
   dentro un vassoio di vetro invece che fluttuare sullo sfondo foto. */
.wl-wiz-modes {
  padding: 14px;
  border-radius: var(--wl-r-lg);
  background: rgba(5, 28, 50, 0.35);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
/* 19/8: le sei tile del "Dove" erano alte 96px l'una (338px in tutto) per
   dire una parola con un'icona sopra. Icona a 30px e meno aria le porta a
   ~72px senza toccare l'area di tocco minima (44px, molto sotto). Vale solo
   dentro .wl-wiz-modes, cioè "Dove" e i mezzi di trasporto: le tile dei temi
   e dei preset portano anche un sottotitolo e restano come sono. */
.wl-wiz-modes .wl-wiz-tile { padding: 11px 8px; gap: 4px; }
.wl-wiz-modes .wl-wiz-tile svg { width: 30px; height: 30px; }
.wl-wiz-modes .wl-wiz-tile strong { font-size: 0.78rem; }

/* "Decide Wanderlust" (22/7, sesta iterazione — richiesta utente: stesso
   foreground degli altri cinque a riposo, non si trasforma né sparisce al
   tap). Eredita l'aspetto base di .wl-wiz-tile senza alcuna attenuazione;
   l'unica differenza è il bordo azzurro ghiaccio quando un'ancora è già
   scelta (".is-ready") — "attivabile", non ancora attivato: selezionare
   una destinazione lo colora, il tap fa partire la procedura.
   19/8: il cassetto che si apriva qui sotto non esiste più (richiesta
   utente: "esegui direttamente la procedura"), quindi ".is-ready" ora vuol
   dire davvero "premi e parte", non "premi e ti chiedo conferma". */
.wl-wiz-surprise-reveal.is-ready {
  border-color: var(--wl-ice);
  box-shadow: inset 0 0 0 1px var(--wl-ice), 0 4px 18px rgba(169, 198, 218, 0.3);
}

/* Attraversamento carosello (21/7, richiesta utente: "non a scatti, ma
   morbido... una slide dietro l'altra"), usato solo da carouselAdvance()
   in wizard.js durante playSurpriseJourney: il pannello uscente scorre a
   sinistra sfumando, quello entrante arriva da destra. Non tocca la
   navigazione manuale via pallini, che resta istantanea. */
@keyframes wl-wiz-carousel-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-32px); opacity: 0; }
}
@keyframes wl-wiz-carousel-in {
  from { transform: translateX(32px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.wl-wiz-carousel-out { animation: wl-wiz-carousel-out 0.5s ease forwards; }
.wl-wiz-carousel-in { animation: wl-wiz-carousel-in 0.5s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  .wl-wiz-carousel-out, .wl-wiz-carousel-in { animation: none; }
}

/* Coriandoli all'arrivo sul risultato del wizard (24/7, richiesta utente).
   Overlay creato/rimosso da JS (celebrateResultArrival in wizard.js), mai
   markup statico — è un effetto una tantum, non un elemento della pagina.
   Colori della palette del progetto, non arcobaleno generico. */
.wl-confetti-layer {
  position: fixed;
  inset: 0;
  /* Sopra la tab bar (z-index:80) e la hero del risultato (fino a 5), sotto
     un eventuale toast (2000): un effetto di un paio di secondi non deve
     mai coprire un messaggio reale. */
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}
.wl-confetti-piece {
  position: absolute;
  top: -12px;
  border-radius: 1px;
  opacity: 0.95;
  animation-name: wl-confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes wl-confetti-fall {
  from { transform: translate(0, 0) rotate(0deg); opacity: 0.95; }
  to { transform: translate(var(--wl-confetti-drift), 110vh) rotate(var(--wl-confetti-rotate)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-confetti-layer { display: none; }
}

/* Le 20 regioni (19/8): a due colonne facevano 1070px di griglia, cioè un
   pannello che scorreva per una volta e mezza lo schermo prima ancora di
   arrivare al resto. A tre colonne scendono a ~600px e restano tutte
   raggiungibili con meno di uno schermo di scroll. La sagoma della regione
   cala da 40 a 34px: è un'icona di riconoscimento, non l'informazione.
   Il nome può andare a capo su due righe (Emilia-Romagna, Friuli-Venezia
   Giulia): niente ellissi, si legge intero. */
.wl-wiz-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wl-wiz-regions .wl-wiz-tile { padding: 10px 5px; gap: 3px; }
.wl-wiz-region-tile svg { width: 34px; height: 34px; color: var(--wl-ice); }
.wl-wiz-region-tile strong { font-size: 0.66rem; line-height: 1.15; hyphens: auto; }
.wl-wiz-region-tile .wl-shape-letter { font: 700 1.1rem var(--wl-serif); color: var(--wl-ice); }

.wl-wiz-pace { grid-template-columns: 1fr; }
.wl-wiz-pace-tile {
  grid-template-columns: 34px 1fr;
  justify-items: start;
  text-align: left;
  padding: 14px 16px;
}
.wl-wiz-pace-tile small { display: block; }

/* Accordion dimensioni camper: appare a tutta larghezza subito sotto la
   riga della tile "Camper" nella stessa griglia 2 colonne dei mezzi
   (grid-column: 1/-1 forza una nuova riga piena tra Camper e Bicicletta). */
.wl-wiz-accordion {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.wl-wiz-accordion.open { grid-template-rows: 1fr; }
.wl-wiz-accordion-inner { overflow: hidden; min-height: 0; display: grid; gap: 10px; align-content: start; }
.wl-wiz-accordion .wl-wiz-hint { margin: 2px 2px 0; }

.wl-wiz-field { display: grid; gap: 8px; }
.wl-wiz-field > label:first-child { font: 600 0.75rem var(--wl-sans); color: rgba(255, 255, 255, 0.75); }
.wl-wiz-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-wiz-camper-grid { grid-template-columns: 1fr 1fr; }
.wl-wiz-field-row label,
.wl-wiz-camper-grid label {
  display: grid;
  gap: 6px;
  font: 600 0.72rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.75);
}
.wl-wiz-field input[type="time"],
.wl-wiz-field input[type="number"],
.wl-wiz-field select,
.wl-wiz-input {
  padding: 10px 12px;
  border-radius: var(--wl-r-sm);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font: 600 0.85rem var(--wl-sans);
  width: 100%;
}
.wl-wiz-field select option { color: #111; }

.wl-wiz-stepper { display: flex; align-items: center; gap: 14px; }
.wl-wiz-stepper button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
}
.wl-wiz-stepper span { min-width: 20px; text-align: center; font: 700 1.1rem var(--wl-serif); color: white; }

/* Chip "Rientro consigliato" (16/7): non un input — la stima del motore,
   in vetro scuro coerente col resto dello step. La variante .late (dopo
   le 20:00 o oltre mezzanotte) vira all'accento per segnalare una
   giornata troppo piena; la spiegazione vive nel pannello (i). */
.wl-wiz-return-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--wl-r-md);
  background: rgba(5, 28, 50, 0.4);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
}
.wl-wiz-return-chip strong {
  margin-left: auto;
  font: 700 1.05rem var(--wl-serif);
  color: white;
}
.wl-wiz-return-chip.late { border-color: rgba(226, 101, 43, 0.6); }
.wl-wiz-return-chip.late strong { color: var(--wl-accent); }
.wl-wiz-info-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(5, 28, 50, 0.55);
  color: white;
  cursor: pointer;
}
.wl-wiz-info-btn svg { display: block; width: 22px; height: 22px; }
/* Corpo del pannello (i): paragrafi a sinistra dentro il modale centrato
   (vetro SCURO .wl-modal-glass: servono i bianchi, non ink/navy). */
#times-info-body { text-align: left; }
#times-info-body p { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
#times-info-body strong { color: white; }

/* Fissa in cima allo scroll (richiesta utente 16/7): resta visibile mentre
   stats/timeline scorrono sotto — nessun ancestore tra qui e .wl-wiz-body
   (lo scroller) ha overflow diverso da visible, quindi lo sticky funziona.
   Usata anche dal picker "Punto sulla mappa" e dalla vista "Il tuo
   viaggio": queste regole restano il riquadro con bordo/angoli per quei
   due casi, non toccati dalla richiesta del 22/7 (solo il risultato,
   sotto, diventa una hero a tutta larghezza). */
.wl-wiz-map {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 220px;
  border-radius: var(--wl-r-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 20px -6px rgba(5, 28, 50, 0.55);
}

/* Hero a tutta larghezza E a tutta altezza dal vero bordo superiore del
   viewport (22/7, richiesta utente: "come le hero delle schede singole" —
   .wl-d-hero/.wl-d-meta nel dettaglio luogo, che parte da top:0). Da 23/7
   niente più toolbar a pillola sopra: sulla realtà di un dispositivo vero
   restava un vuoto pieno tra lo status bar e la mappa, con la pillola della
   toolbar isolata su sfondo pieno invece che filtrare la mappa dietro di sé
   (screenshot utente) — invece di inseguire quel comportamento, la toolbar
   condivisa si nasconde del tutto sul passo 5 (renderCurrentStep in
   wizard.js) e i due pulsanti Indietro/Ricomincia diventano tondi e
   fluttuanti DENTRO questa hero (.wl-d-back/.wl-d-actions, già globali,
   stessa identica ricetta della hero del dettaglio luogo — non serve CSS
   dedicato). position:fixed: un elemento fixed ignora il padding/overflow
   di qualunque antenato ed esce dal flusso di .wl-wiz-body, raggiungendo il
   vero y=0. Stessa ricetta di max-width/margin di .wl-photo-bg per restare
   centrata anche sopra i 430px su schermi larghi. #wizard-step-5 riceve un
   padding-top calcolato in JS (syncResultHeroSpacing in wizard.js, non un
   valore fisso qui) per non far scorrere il resto del contenuto sotto la
   hero fissa. Altezza portata a metà schermo circa (42dvh → 50dvh, richiesta
   utente 23/7). */
.wl-wiz-result-hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 430px;
  margin: 0 auto;
  z-index: 2;
  height: 50dvh;
  min-height: 320px;
  overflow: hidden;
}
.wl-wiz-result-hero #wizard-result-map {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
/* Pulsanti tondi e titolo sopra la mappa (23/7): .wl-d-back/.wl-d-actions
   non impostano un proprio z-index, ma #wizard-result-map eredita z-index:3
   dalla regola base .wl-wiz-map (stessa classe, condivisa anche dalla mappa
   del passo 2 e del viaggio salvato) — a parità di specificità sulla singola
   proprietà z-index, quella regola vinceva e il contenitore Leaflet
   catturava i click anche sopra pulsanti/titolo (bug reale, scoperto dai
   test: "leaflet-container intercepts pointer events" sul click Indietro).
   Serve un z-index esplicito qui, più alto di 3. */
.wl-wiz-result-hero .wl-d-back,
.wl-wiz-result-hero .wl-d-actions {
  z-index: 5;
}
/* Titolo fluttuante centrato tra i due pulsanti tondi, senza riquadro dietro
   (23/7, richiesta utente: "solo pulsanti e titolo", stesso schema degli
   altri 4 passi). text-shadow invece di uno sfondo: la mappa sotto ha colori
   arbitrari (non uno scrim scuro prevedibile come .wl-photo-bg), il testo
   bianco da solo rischierebbe di perdersi su tratti chiari della mappa. */
.wl-wiz-result-title {
  position: absolute;
  /* Stessa fascia verticale dei due pulsanti tondi (top:16px, 40px di
     altezza): line-height:40px li allinea senza calcoli separati. */
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  max-width: calc(100% - 132px);
  color: white;
  font: 500 1rem var(--wl-serif);
  line-height: 40px;
  text-align: center;
  text-shadow: 0 1px 8px rgba(4, 14, 25, 0.7), 0 1px 3px rgba(4, 14, 25, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-wiz-result-hero #wizard-result-stats {
  position: absolute;
  /* 23/7, richiesta utente: tutta la larghezza, appoggiata in basso senza
     spazio (prima galleggiava con 14px ai lati e 12px dal fondo). */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  /* 8 + 56 (altezza card) + 8: la fascia si adatta alle stesse card
     informative delle altre viste, che sono piu' alte delle vecchie celle
     nude (12/8). .wl-wiz-navigate poco sotto sale di conseguenza. */
  min-height: 72px;
  padding: 8px 10px;
  box-sizing: border-box;
  border-width: 1px 0 0;
  border-style: solid;
  border-radius: 0;
  border-color: rgba(255, 255, 255, 0.42);
  /* Fascia scura sotto la mappa viva: qui il fondo non e' l'illustrazione
     gia' sfocata delle altre viste ma una mappa a colori arbitrari, su cui
     le card da sole non si leggerebbero. */
  background: #091d31;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 -6px 16px rgba(4, 14, 25, 0.28);
}

/* Combo Google/Apple/Waze delle hero itinerario (10/8, ricetta
   .wl-d-nav-buttons della scheda luogo). Nelle hero di wizard e viaggi
   però il fondo è occupato dalla barra statistiche (66px, z-index 4):
   il bottom:16px della ricetta base finirebbe SOTTO la barra, icone
   coperte e intoccabili (bug reale: il tap atterrava sulla barra,
   scoperto dai test E2E della navigazione live). Si rialzano sopra la
   barra come il vecchio pulsante menu: 66px + 16px di margine. */
.wl-wiz-navigate {
  /* 72px di fascia (era 66 prima delle card informative del 12/8) piu' 16 di
     margine. */
  bottom: 88px;
  z-index: 5;
}

.wl-wiz-results { display: grid; gap: 6px; margin-top: 6px; }
.wl-wiz-result {
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  cursor: pointer;
}
.wl-wiz-result small { display: block; color: rgba(255, 255, 255, 0.6); }

/* ---------- STEP 5 — risultato ---------- */
/* Pagina culturale introduttiva delle collezioni a tema (22/7, richiesta
   utente). Niente riquadro/glass proprio attorno a tutto il blocco: il
   titolo (.wl-h2, già bianco dentro .wl-wizard) e il testo (.wl-d-desc/
   .wl-d-more, riusate identiche dalla scheda dettaglio) restano "a corpo
   libero" come nella scheda luogo, solo "Lo sapevi?" (.wl-d-curio, riusata
   anch'essa) ha il proprio riquadro in vetro scuro — stessa gerarchia
   visiva del dettaglio, non un componente nuovo da imparare a leggere. */
.wl-wiz-intro-photo {
  margin: 0 0 12px;
  border-radius: var(--wl-r-md);
  overflow: hidden;
}
.wl-wiz-intro-photo img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.wl-wiz-intro-photo figcaption {
  margin-top: 6px;
  font-size: 0.68rem;
  line-height: 1.4;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
}
.wl-wiz-intro h2.wl-h2 { margin-bottom: 8px; }

.wl-wiz-variants {
  display: flex;
  gap: 8px;
  /* 23/7: niente più overflow-x qui. Con "Suggerito" + un solo combo box
     (non più quattro pillole in fila) la riga sta sempre in larghezza, e
     overflow-x:auto costringeva anche l'asse Y a un valore diverso da
     visible (regola CSS: se un asse ha un overflow diverso da visible,
     l'altro asse non può restare visible) — il pannello del combo, che deve
     debordare SOTTO la riga, veniva tagliato via invece di essere mostrato.
     Bug reale scoperto da segnalazione utente ("il dropdown non si apre"). */
  margin-top: 16px;
  padding: 2px 0 4px;
}
.wl-wiz-variants .wl-tag { flex: 0 0 auto; cursor: pointer; }
.wl-wiz-variants .wl-tag.active {
  border-color: rgba(226, 101, 43, 0.85);
  background: rgba(226, 101, 43, 0.3);
  color: white;
}
/* Combo box delle tre alternative (23/7, richiesta utente: "Suggerito"
   resta un chip a sé, le altre tre si raccolgono in un elegante combo box
   con icone, invece di quattro pillole in fila). Il trigger è un .wl-tag
   come "Suggerito" (stessa forma/stato attivo), solo con icona+chevron. */
.wl-wiz-variant-combo { position: relative; flex: 0 0 auto; }
.wl-wiz-variant-chevron { width: 15px !important; height: 15px !important; transition: transform 0.15s ease; }
.wl-wiz-variant-trigger[aria-expanded="true"] .wl-wiz-variant-chevron { transform: rotate(180deg); }
.wl-wiz-variant-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 180px;
}
/* .wl-wizard .wl-menu (due classi, specificità 0-2-0) è quasi opaco
   (rgba(8,25,42,0.94)) e batte un semplice .wl-wiz-variant-list (0-1-0)
   indipendentemente dall'ordine nel file — il pannello risultava
   praticamente invisibile sul velo scuro del wizard (si notava solo un filo
   di bordo). Serve la stessa specificità (due classi) per vincere davvero,
   con un tono chiaramente più chiaro/blu che si legga come un pannello
   sollevato, non un ritaglio dello sfondo dietro di sé. */
.wl-wizard .wl-wiz-variant-list {
  background: rgba(18, 46, 72, 0.98);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 14px 30px rgba(4, 14, 25, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}
.wl-wiz-variant-list button.active,
.wl-wizard .wl-wiz-variant-list button.active {
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  color: white;
}
.wl-wiz-variant-list button.active svg { color: white; }
/* Contenitore delle quattro statistiche. Dal 12/8 (richiesta utente: gli
   stessi box informativi in tutte le viste) non è più un pannello unico in
   vetro con quattro celle nude dentro: il vetro sta nelle card, il
   contenitore è solo la griglia che le dispone. Chi ha bisogno di una fascia
   sotto di sé (la hero del wizard, sopra una mappa viva) se la rimette
   addosso da sé, più sotto. */
.wl-wiz-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.wl-wiz-stats strong { font-size: 0.7rem; color: white; }
.wl-wiz-stats small { font-size: 0.6rem; color: rgba(255, 255, 255, 0.65); }
/* Wrapper valore+label introdotto per #trip-stats (12/8): qui, fuori dal
   contesto del viaggio salvato, resta un semplice contenitore verticale
   cosi' il risultato del wizard (stessa statsMarkup) non cambia aspetto. */
.wl-stat-copy { display: grid; justify-items: center; gap: 1px; }
.wl-wiz-warnings {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--wl-r-md);
  background: rgba(226, 101, 43, 0.16);
  border: 1px solid rgba(226, 101, 43, 0.45);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
}
.wl-wiz-warnings p { margin: 0; font-size: 0.78rem; line-height: 1.4; color: white; }

/* ---------- STEP 5: timeline tappe, standardizzata (11/8) sulla stessa
   ricetta del dettaglio itinerario salvato (.wl-trip-tl/.wl-trip-stop,
   tripStopMarkup in wizard.js) + drag&drop. Le uniche regole proprie di
   questo step sono le due azioni della card (rimuovi/trascina), che qui
   sostituiscono il bottone "visitato" di .wl-trip-stop-side. ---------- */
.wl-step-remove,
.wl-step-grip {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}
.wl-step-remove svg,
.wl-step-grip svg { width: var(--wl-ic-md); height: var(--wl-ic-md); }
/* touch-action: none — senza, il browser interpreta il trascinamento
   verticale come scroll della pagina e il drag non parte mai. */
.wl-step-grip { touch-action: none; cursor: grab; }
.wl-step-dragging {
  position: relative;
  z-index: 5;
}
.wl-step-dragging .wl-trip-stop {
  background: rgba(11, 33, 56, 0.9);
  box-shadow: 0 14px 28px -8px rgba(3, 17, 29, 0.6);
}
.wl-step-dragging .wl-step-grip { cursor: grabbing; }
/* Le righe scavalcate scalano dolcemente; la trascinata segue il dito. */
.wl-wiz-reordering .wl-trip-tl-row:not(.wl-step-dragging) { transition: transform 0.15s ease; }

/* Tap su un pin della mappa (scrollToStopCard in wizard.js): breve
   lampeggio sulla card raggiunta, per capire subito quale tappa è quale. */
@keyframes wl-step-flash { 0% { background: rgba(226, 101, 43, 0.4); } 100% { background: transparent; } }
/* Raggio 14px di default: pensato per .wl-step (dettaglio luogo, unico
   contesto rimasto con questa forma). Lo STEP 5 del wizard ora usa le
   stesse card .wl-trip-stop del viaggio salvato, che sovrascrivono il
   raggio subito sotto. */
.wl-step-flash { animation: wl-step-flash 1s ease-out; border-radius: 14px; }

/* Rail orizzontale "Aggiungi una tappa". */
.wl-wiz-sugg {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x mandatory;
}
.wl-wiz-sugg-card {
  position: relative;
  flex: 0 0 118px;
  scroll-snap-align: start;
}
/* Il tap sulla foto/testo apre il dettaglio (richiesta utente 16/7: prima
   l'intera card aggiungeva subito la tappa, senza modo di vedere il
   luogo prima); "+" e cuore sono bottoni separati sopra la foto. */
.wl-wiz-sugg-open {
  display: block;
  width: 100%;
  padding: 8px;
  border-radius: 14px;
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     filtrata (il wizard poggia sull'illustrazione nitida, e in un carosello
     stanno poche card per volta). */
  text-align: left;
  color: white;
  cursor: pointer;
}
.wl-wiz-sugg-open img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}
/* Altezza uniforme per tutte le card (richiesta utente 22/7): nomi e
   distanze di lunghezza diversa facevano wrappare titolo/sottotitolo su un
   numero di righe diverso da card a card. Clamp a un numero fisso di
   righe (2 per il nome, 1 per la distanza), troncato con ellissi.
   Il clamp da solo non basta: tronca chi eccede ma non allunga chi sta su
   una riga sola, e una card con nome corto restava piu' bassa delle altre.
   Riservare sempre l'altezza di due righe (min-height = 2 righe di
   line-height) tiene ferma l'altezza del nome, quindi della card, a
   prescindere da quanto e' lungo il testo. */
.wl-wiz-sugg-open strong {
  display: -webkit-box;
  margin-top: 6px;
  font-family: var(--wl-serif);
  font-size: 0.85rem;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(0.85rem * 1.15 * 2);
}
.wl-wiz-sugg-open small {
  display: -webkit-box;
  margin-top: 2px;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.75);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wl-wiz-sugg-plus {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(5, 28, 50, 0.55);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
}
.wl-wiz-sugg-plus svg { width: 18px; height: 18px; color: white; }
/* Cuore preferiti sulla stessa card: angolo opposto al "+", stessa misura
   ridotta (la card è larga solo 118px, la versione base di .wl-fav è
   pensata per foto più grandi). */
.wl-wiz-sugg-card .wl-fav {
  top: 12px;
  left: 12px;
  right: auto;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
  /* Sfondo, bordo e ombra ereditati da .wl-fav (ricetta arancione, 27/7):
     qui si scala solo il diametro, la card e' larga 118px. */
}
.wl-wiz-sugg-card .wl-fav svg { width: var(--wl-ic-md); height: var(--wl-ic-md); }

/* ---------- Vista "Il tuo viaggio" (percorso memorizzato, dal W) ---------- */
.wl-trip { padding-bottom: calc(96px + max(12px, env(safe-area-inset-bottom, 0px) - 14px)); }
.wl-trip .wl-photo-bg::after,
.wl-cammino .wl-photo-bg::after,
.wl-favorites .wl-photo-bg::after {
  /* 28/7, richiesta utente ("mi sembra pieno"): tolto il vecchio velo
     rinforzato (fino a 0.72, pensato per la card ghiaccio su sfondo
     amber), sostituito con la stessa curva di Esplora (.wl-explore
     .wl-photo-bg::after sopra, max 0.55): stesso motivo, header alto
     quanto quello di Esplora, la lista inizia più in basso della fascia
     chiara tarata per Home. */
  background: linear-gradient(180deg,
    rgba(5, 28, 50, 0.12) 0%,
    rgba(5, 28, 50, 0.16) 48%,
    rgba(5, 28, 50, 0.42) 72%,
    rgba(5, 28, 50, 0.55) 100%);
}
/* Header del singolo viaggio (11/8, mockup del dettaglio itinerario): il
   titolo deve dominare, quindi peso 600 invece dei 500 standard degli header
   di vista, e i tre pulsanti tondi arrivano ai 44px di area toccabile. Vale
   SOLO in modalita' dettaglio: l'header a elenco ("I tuoi viaggi") tiene la
   taglia condivisa con Esplora e Preferiti, che e' un'altra schermata.
   Il :not() e' lo stesso interruttore usato da renderTrip in wizard.js, che
   toglie .wl-f-head-centered quando si apre un viaggio. */
#trip-header:not(.wl-f-head-centered) .wl-f-head-copy h1 {
  font-weight: 600;
  font-size: 1.42rem;
}
#trip-header:not(.wl-f-head-centered) .wl-icon-btn { width: 44px; height: 44px; }
/* Il chevron di "indietro" deve puntare a sinistra, come in ogni altra vista
   (.wl-d-back, .wl-wiz-back, .wl-contrib-back usano la stessa rotazione):
   qui mancava e la freccia puntava in giu'. */
#trip-back svg { transform: rotate(90deg); }
.wl-trip-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 0 20px;
}
/* 11/8, riallineamento al mockup del dettaglio itinerario. Prima la hero era
   sticky e alta 50dvh a tutta larghezza, con le statistiche incollate al suo
   fondo come fascia a filo schermo: la mappa occupava mezzo telefono per
   tutto lo scroll e la timeline leggeva l'altra meta'. Ora mappa e
   statistiche sono due sezioni delimitate nel flusso normale: si scorre una
   pagina sola, mappa -> riepilogo -> tappe, come chiede il mockup.
   scrollToStopCard (wizard.js) continua a funzionare: misura la fascia utile
   sotto .wl-trip-hero, che qui semplicemente scorre via invece di restare
   ancorata in cima. */
.wl-trip-hero {
  display: grid;
  gap: 14px;
}
/* Card della mappa: contenitore del solo riquadro cartografico (bordi,
   raggio, ritaglio), mai margini interni tra card e mappa. La mappa vera
   resta #trip-map, invariata come istanza Leaflet. */
.wl-trip-map-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--wl-r-lg);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 24px -10px rgba(5, 28, 50, 0.6);
  /* Fra i due riferimenti del brief (rapporto 1.45-1.65 oppure 280-380px di
     altezza) si tiene la via di mezzo: alla larghezza tipica di un telefono
     sono ~270px, cioe' un rapporto ~1.35. Piu' bassa non conterrebbe tappe
     lontane tra loro senza schiacciarle, piu' alta rimanderebbe di nuovo il
     riepilogo sotto la piega. */
  height: clamp(240px, 32dvh, 300px);
}
/* 14/8: era scritta su #trip-map, cioe' valeva solo per il viaggio salvato.
   La vista del cammino riusa la stessa card con una mappa sua (#cammino-map)
   e senza questa riga la mappa non riempiva il riquadro: restava alta quanto
   .wl-wiz-map e sotto si apriva una fascia vuota. Il selettore parte ora
   dalla classe, che ce l'hanno tutte e due. */
.wl-trip-map-card .wl-wiz-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* I tre navigatori tornano al fondo della mappa: gli 82px di
   .wl-wiz-navigate servivano a scavalcare la barra statistiche che stava
   dentro la mappa, e che ora non c'e' piu'. */
.wl-trip-map-card .wl-wiz-navigate { bottom: 14px; }
/* ---------- Box informativi km/tempo/visita (fascia sotto la hero) --------
   Card compatta orizzontale (12/8, redesign su mockup; 12/8 bis, richiesta
   utente "sembra un doppio box, non e' glassmorfica, troppo alta"): niente
   fondo quasi opaco (0.88, sembrava un secondo riquadro sopra lo sfondo gia'
   sfocato della vista) ne' backdrop-filter dal vivo, stessa ricetta "vetro
   vero" di .wl-trip-stop, con il rilievo dato dal box-shadow e non dal blur.
   Rettangolare e bassa (56px), non un quasi quadrato.
   12/8 quinquies, richiesta utente: la ricetta era scritta su
   .wl-trip-hero #trip-stats, cioe' valeva solo per il viaggio salvato, mentre
   il risultato del wizard e la scheda luogo tenevano la vecchia fascia unica
   con le celle nude. Ora parte dalle classi (.wl-wiz-stats delle due hero
   itinerario, .wl-d-meta della scheda luogo) e i tre posti sono identici. Le
   differenze restano solo nel contenitore, dove servono davvero: fascia scura
   sotto la mappa viva del wizard, striscia in vetro fissa al confine
   hero/foglio nella scheda luogo.
   Il combinatore figlio non e' cosmetico: senza, la regola prendeva anche il
   wrapper .wl-stat-copy interno, che si ritrovava bordo, fondo e altezza
   della card e disegnava un secondo riquadro dentro il primo. */
.wl-wiz-stats > div,
.wl-d-meta > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  height: 56px;
  padding: 0 8px;
  border-radius: var(--wl-r-sm);
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     appoggiata. Qui il filtro dal vivo resta escluso anche nel wizard, dove
     la fascia poggia sulla mappa Leaflet viva: sfocare una mappa che si muove
     a ogni frame e' il caso peggiore per il compositor. */
}
.wl-wiz-stats svg,
.wl-d-meta svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--wl-accent);
}
.wl-wiz-stats .wl-stat-copy,
.wl-d-meta .wl-stat-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}
.wl-wiz-stats strong,
.wl-d-meta strong {
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.15;
  color: white;
  white-space: nowrap;
}
.wl-wiz-stats small,
.wl-d-meta small {
  font-size: 0.6rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}
/* Nella scheda luogo i valori sono parole, non cifre ("Tutto l'anno",
   "1-2 ore"): con nowrap il quarto usciva dalla card a 390px. Qui vanno a
   capo, che la striscia ha l'altezza per contenerle; nelle due hero
   itinerario restano su una riga sola, sono sempre numeri brevi. */
.wl-d-meta strong {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.1;
}
/* Sotto i 400px quattro card in riga lasciano al testo una trentina di pixel
   per card: alle taglie base il valore piu' lungo del set ("1h 25m") sbordava
   di 6px oltre il bordo destro della card, sul viewport da 360. Icona, gap,
   padding e corpo dei testi scendono quindi di un gradino, come gia' fa il
   binario della timeline alla stessa soglia. */
@media (max-width: 399.98px) {
  .wl-wiz-stats,
  .wl-d-meta { gap: 6px; }
  .wl-wiz-stats > div,
  .wl-d-meta > div { gap: 5px; padding: 0 6px; }
  .wl-wiz-stats svg,
  .wl-d-meta svg { width: 21px; height: 21px; }
  .wl-wiz-stats strong,
  .wl-d-meta strong { font-size: 0.66rem; }
  .wl-wiz-stats small,
  .wl-d-meta small { font-size: 0.54rem; }
}
/* Sotto i 340px di larghezza (nessun telefono in commercio, ma succede in
   split view e con lo zoom di sistema al massimo) quattro colonne
   spezzerebbero i valori: si passa a due per due.
   La sola .wl-d-meta resta a quattro colonne: e' una striscia di altezza
   fissa (80px, su cui e' calcolato il padding del foglio sotto), due righe
   di card la sfonderebbero. */
@media (max-width: 339px) {
  .wl-wiz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- Timeline delle tappe (viaggio salvato, 11/8) ----------
   Colonna-binario a sinistra (numero della tappa, linea continua) e una card
   per tappa a destra; tra due card il blocco del trasferimento. La ricetta
   .wl-step del passo 5 del wizard resta dov'è e non si tocca: là la riga
   serve a riordinare le tappe, qui a leggerle. */
.wl-trip-tl {
  /* Binario e pallino piu' stretti sotto i 400px: a 360 una colonna da 60px
     mangerebbe alla card la larghezza che serve al nome del luogo. Il
     badge (42-48px, punto 2/3 del redesign 12/8) resta sempre ben dentro
     al rail, con margine per bordo/box-shadow e per la linea sotto. */
  --wl-tl-rail: 52px;
  --wl-tl-num: 42px;
  /* Padding interno della card. Non allinea piu' il numero (dal 12/8 il
     numero e' centrato verticalmente sulla card), serve ancora alla riga
     "Rientro", che non ha una card e prende da qui il suo respiro. */
  --wl-tl-top: 14px;
  display: grid;
}
@media (min-width: 400px) {
  .wl-trip-tl { --wl-tl-rail: 60px; --wl-tl-num: 46px; }
}
/* Righe stirate, non allineate in alto (12/8, richiesta utente): la colonna
   del binario prende tutta l'altezza della riga, cosi' il numero si centra
   verticalmente sulla card invece di stare appeso al suo bordo superiore. */
.wl-trip-tl-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--wl-tl-rail) minmax(0, 1fr);
  align-items: stretch;
}
.wl-trip-tl-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--wl-tl-rail) / 2 - 1px);
  width: 2px;
  /* Tratto "da fare" (richiesta utente): tratteggiata finche' la tappa a
     cui porta non e' completata. .wl-trip-tl-row-done sotto la rende
     continua, segmento per segmento, man mano che si avanza nel viaggio. */
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, 0.32) 0, rgba(255, 255, 255, 0.32) 5px,
    transparent 5px, transparent 10px);
}
/* La linea nasce dal centro del primo pallino e muore in quello dell'ultimo:
   mai un moncone che parte dal nulla sopra la tappa 1 o che scende oltre
   l'ultima. In mezzo non si interrompe, nemmeno sui trasferimenti. */
.wl-trip-tl-row:first-child::before { top: 50%; }
.wl-trip-tl-row:last-child::before { bottom: 50%; }
.wl-trip-tl-row:first-child:last-child::before { display: none; }
/* Attacco alla fascia dei box informativi (12/8, richiesta utente): il
   binario non nasce dal nulla dentro la pagina, parte da sotto la prima card
   informativa (i km) e scende con un tratto CONTINUO fino al medaglione della
   tappa 1, che sta esattamente sotto di essa. E' un tratto a se' (::after)
   e non il prolungamento del binario (::before): quello resta tratteggiato
   finche' la tappa non e' fatta, questo e' sempre pieno perche' non
   rappresenta una strada da percorrere ma la giuntura tra riepilogo e
   itinerario.
   Solo nel dettaglio del viaggio salvato, unica vista in cui i box
   informativi stanno esattamente sopra il binario (nel wizard in mezzo ci
   sono i chip "Suggerito"/"Filtra", nella scheda luogo il titolo della
   sezione), e solo sulla prima timeline: dal secondo giorno in poi sopra c'e'
   il titolo "Giorno N". */
#trip-days > .wl-trip-tl:first-of-type > .wl-trip-tl-row:first-child::after {
  content: "";
  position: absolute;
  /* 16px = gap di .wl-trip-body tra la fascia delle statistiche e la
     timeline: il tratto arriva a filo del bordo inferiore della card dei km. */
  top: -16px;
  left: calc(var(--wl-tl-rail) / 2 - 1px);
  /* Fino al centro della riga, cioe' al centro del medaglione: gli ultimi
     pixel finiscono dietro al numero, come per il resto del binario. */
  height: calc(50% + 16px);
  width: 2px;
  background: rgba(255, 255, 255, 0.4);
}
/* Tratto "fatto": la tappa (o il trasferimento verso di essa) e' gia'
   stata completata, la linea torna continua invece che tratteggiata. */
.wl-trip-tl-row-done::before { background: rgba(255, 255, 255, 0.4); }
.wl-trip-tl-rail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Medaglione unico per tutte le tappe: stessa taglia, stessa forma, stesso
   blu. Unica eccezione .wl-trip-tl-num-next qui sotto, la prossima tappa da
   visitare (richiesta utente 12/8: segnalarla sul numero invece di
   aggiungere un oggetto nuovo sul binario).
   .wl-step-ic (passaggi dell'installazione iOS) e' nella lista perche' dal
   12/8 ogni elenco a binario dell'app porta lo stesso medaglione: la' dentro
   c'e' un'icona invece di un numero, il vestito e' identico. */
.wl-trip-tl-num,
.wl-step-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--wl-tl-num);
  height: var(--wl-tl-num);
  min-width: var(--wl-tl-num);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(193, 220, 242, 0.75);
  /* Tinta piena con gradiente, non traslucida: il pallino deve coprire la
     linea che passa sotto, altrimenti la si vede attraversare il numero. */
  background: linear-gradient(180deg, rgba(50, 112, 166, 0.98) 0%, rgba(20, 57, 94, 0.98) 100%);
  box-shadow:
    0 0 0 3px rgba(72, 142, 202, 0.10),
    0 3px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  color: white;
  font: 700 0.92rem var(--wl-sans);
  line-height: 1;
}
.wl-trip-tl-num-end svg { width: var(--wl-ic-md); height: var(--wl-ic-md); color: var(--wl-ice); }
/* Tappa senza numero (luogo uscito dal catalogo, nessun pin sulla mappa):
   pallino piccolo, cosi' la numerazione visibile resta quella della mappa. */
.wl-trip-tl-num-plain {
  width: 14px;
  height: 14px;
  min-width: 14px;
  align-self: center;
  border-width: 3px;
  border-color: var(--wl-ice);
  background: none;
  box-shadow: none;
}
/* Prossima tappa da visitare (12/8, richiesta utente): la prima non ancora
   completata percorrendo il viaggio in ordine. Stessa taglia e stessa forma
   di tutti gli altri numeri, cambia solo la tinta (accent al posto del blu)
   e un radar di due anelli che si allargano in loop. Nessun oggetto nuovo
   sul binario: e' il numero stesso a segnalare dove si e' arrivati. */
.wl-trip-tl-num-next {
  border-color: rgba(248, 189, 150, 0.85);
  background: linear-gradient(180deg, rgba(238, 129, 61, 0.98) 0%, rgba(191, 78, 20, 0.98) 100%);
  box-shadow:
    0 0 0 3px rgba(226, 101, 43, 0.16),
    0 3px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.22);
}
/* Due anelli sfasati di mezzo ciclo: uno solo pulserebbe a intermittenza,
   tre sarebbero un fuoco d'artificio. Restano dentro il binario (scala
   1.55: su un numero da 42-46px l'anello piu' largo sfiora appena il bordo
   della card) e non intercettano il tocco. */
.wl-trip-tl-num-next::before,
.wl-trip-tl-num-next::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  /* Bordo sottile: la scala moltiplica anche lo spessore, un 2px a fine
     corsa diventa un anello grasso. */
  border: 1.5px solid rgba(247, 154, 98, 0.7);
  pointer-events: none;
  animation: wl-tl-radar 2.8s ease-out infinite;
}
.wl-trip-tl-num-next::after { animation-delay: 1.4s; }
@keyframes wl-tl-radar {
  0% { transform: scale(1); opacity: 0.6; }
  70% { opacity: 0.1; }
  100% { transform: scale(1.55); opacity: 0; }
}
/* Chi ha chiesto meno animazioni al sistema tiene il numero arancione e
   perde il radar: l'informazione e' nel colore, non nel movimento. */
@media (prefers-reduced-motion: reduce) {
  .wl-trip-tl-num-next::before,
  .wl-trip-tl-num-next::after { animation: none; opacity: 0.3; }
}
/* Trasferimento: sta tra le due card, allineato al binario. Richiesta
   utente: l'auto deve essere grande e visibile, alla sinistra di km e
   minuti sul binario (non piu' un'iconcina in linea col testo), e i
   minuti vanno su una riga propria sotto la distanza. */
.wl-trip-tl-leg { align-items: center; }
.wl-trip-tl-leg .wl-trip-tl-rail {
  padding-top: 0;
  align-items: center;
}
/* Auto senza medaglione e piu' grande (12/8, richiesta utente sul mockup
   annotato): niente cerchio, niente bordo, niente fondo, 64px di riquadro
   sul binario. Il glifo copre i due terzi del riquadro, come faceva nella
   versione da 48px, e resta dello stesso bianco della linea per leggersi
   come parte del binario e non come un'azione. */
.wl-trip-tl-car {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  /* flex-shrink:0 perche' il rail e' piu' stretto del riquadro
     (--wl-tl-rail): senza, il flex del rail comprimerebbe l'auto. */
  flex-shrink: 0;
}
.wl-trip-tl-car svg { width: 42px; height: 42px; color: rgba(255, 255, 255, 0.6); }
.wl-trip-leg-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 11px 0;
}
.wl-trip-leg-km { font-size: 0.82rem; font-weight: 600; color: white; }
.wl-trip-leg-time { font-size: 0.74rem; font-weight: 600; color: var(--wl-accent); }
.wl-trip-tl-return .wl-trip-tl-rail { padding-top: var(--wl-tl-top); }
.wl-trip-return-copy {
  margin: 0;
  padding: 16px 0 2px;
}
.wl-trip-return-copy strong { display: block; font-family: var(--wl-serif); font-weight: 700; font-size: 0.98rem; color: white; }
.wl-trip-return-copy small { display: block; margin-top: 2px; font-size: 0.74rem; color: rgba(255, 255, 255, 0.7); }

/* Card della singola tappa. Tre colonne (foto, testo, stato) piu' una riga
   di metadati a piena larghezza sotto: infilare "arrivo" e "visita" nella
   sola colonna del testo li avrebbe spezzati su due righe a 360px. */
.wl-trip-stop {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: var(--wl-tl-top);
  margin-bottom: 4px;
  border-radius: var(--wl-r-lg);
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     appoggiata (fondo gia' pre-sfocato, vedi .wl-trip .wl-photo-bg piu'
     sopra; il rilievo viene dal box-shadow, non dal blur).
     13/8: qui c'era il blu ghiaccio 0.28 dell'11/8. La tappa corrente resta
     riconoscibile dal bordo accent, che vive in una regola piu' specifica
     poco sotto e continua a vincere. */
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wl-trip-stop:active {
  transform: scale(0.985);
  border-color: var(--wl-accent);
  box-shadow: 0 6px 16px -6px rgba(3, 17, 29, 0.5);
}
/* Tappa corrente: accento leggerissimo sul bordo, non piu' un bordo saturo
   che trasforma la card in uno stato "selected" (12/8, punto 7 del
   redesign). Il segnale principale resta il check .wl-visited a destra. */
.wl-trip-tl-row-current .wl-trip-stop {
  border-color: rgba(225, 112, 52, 0.35);
}
/* Il lampeggio dopo il tap su un pin (scrollToStopCard) usa .wl-step-flash,
   che porta con se' un raggio da 14px pensato per le righe del wizard: qui
   va riportato a quello della card, altrimenti gli angoli "saltano". */
.wl-trip-stop.wl-step-flash { border-radius: var(--wl-r-lg); }
.wl-trip-stop-img {
  width: clamp(80px, 23vw, 104px);
  height: clamp(80px, 23vw, 104px);
  border-radius: var(--wl-r-md);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}
.wl-trip-stop-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Centrato in verticale sulla foto: con un nome corto (una riga) l'allineo
     in alto lasciava un vuoto alto quanto mezza foto sotto il badge. Con un
     nome lungo non cambia nulla, riempie comunque la riga. */
  justify-content: center;
  gap: 8px;
}
/* Localita' sotto il nome della tappa (14/8, segnalazione utente: "la timeline
   non ha negli step le localita'"). Sta fra il nome e il badge di categoria,
   con lo stesso pin usato ovunque per un metadato di luogo; il gap di 8px
   della colonna vale anche per lei, quindi non serve margine. Ghiaccio e non
   bianco: e' un dato secondario, il nome deve restare la prima cosa che si
   legge. */
.wl-trip-stop-where {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font: 400 0.78rem var(--wl-sans);
  color: var(--wl-ice);
}
.wl-trip-stop-where svg {
  width: var(--wl-ic-xs);
  height: var(--wl-ic-xs);
  flex: 0 0 auto;
}
.wl-trip-stop-name {
  margin: 0;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.2;
  color: white;
  /* Nomi lunghi e senza spazi (toponimi composti, parole straniere) non
     devono sfondare la colonna: si spezzano invece di uscire dalla card. */
  overflow-wrap: anywhere;
}
.wl-trip-stop .wl-step-badge {
  height: 22px;
  padding: 0 10px;
  border-color: rgba(169, 198, 218, 0.55);
  background: rgba(169, 198, 218, 0.14);
  color: var(--wl-ice-soft);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  max-width: 100%;
}
.wl-trip-stop-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* Il pulsante "tappa completata" e' lo stesso .wl-visited di tutta l'app
   (stessa classe, stesso data-id, stesso listener delegato in home.js):
   qui esce solo dal posizionamento assoluto, perche' vive in colonna. */
.wl-trip-stop .wl-visited {
  position: relative;
  top: auto;
  right: auto;
}
/* Tre stati distinti (12/8, richiesta utente sul mockup annotato), tutti e
   tre PIENI: il vuoto si leggeva come "manca qualcosa" e ingannava anche
   sulla tappa gia' fatta. Il riempimento e' la ricetta "vetro vero" gia' in
   uso sulle card (gradiente traslucido + bordo chiaro + rilievo interno,
   nessun backdrop-filter dal vivo: qui il fondo e' gia' sfocato e un blur
   in piu' farebbe solo un disco opaco).
   Completata = vetro accent con spunta bianca, come tutti i .wl-visited
   dell'app (regola 27/7: fondo arancione, glifo bianco). Prossima visita =
   vetro blu ghiaccio, anello chiaro, spunta bianca. Ancora da fare = vetro
   neutro, anello tenue, nessuna spunta.
   L'anello e' il bordo del bottone, quindi ha la stessa taglia in tutti e
   tre gli stati; dentro sta la sola spunta (#wl-ic-check) e non il glifo
   cerchio+spunta usato altrove, che disegnerebbe un secondo anello dentro
   il primo. Fuori dalla timeline .wl-visited resta il disco condiviso. */
.wl-trip-stop .wl-visited {
  border: 2px solid rgba(190, 211, 229, 0.34);
  background:
    linear-gradient(160deg, rgba(169, 198, 218, 0.24), rgba(5, 28, 50, 0.42));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 4px 10px -4px rgba(3, 17, 29, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.16);
}
.wl-trip-stop .wl-visited svg { width: 18px; height: 18px; }
.wl-trip-stop .wl-visited:not(.active):not(.wl-visited-next) svg { display: none; }
.wl-trip-stop .wl-visited.active {
  border-color: rgba(240, 146, 92, 0.9);
  background:
    linear-gradient(160deg, rgba(233, 118, 55, 0.72), rgba(160, 60, 12, 0.6));
  color: white;
  box-shadow:
    0 4px 12px -4px rgba(226, 101, 43, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.28);
}
.wl-trip-stop .wl-visited-next {
  border-color: rgba(214, 232, 248, 0.85);
  background:
    linear-gradient(160deg, rgba(169, 198, 218, 0.5), rgba(24, 63, 103, 0.55));
  color: white;
  box-shadow:
    0 4px 12px -4px rgba(3, 17, 29, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
/* Area toccabile portata a 44px senza ingrandire il disco (38px e' la
   taglia condivisa da tutti i .wl-visited dell'app). */
.wl-trip-stop .wl-visited::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}
.wl-trip-stop .wl-step-nav {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}
/* fill: currentColor perche' il simbolo #wl-ic-gmaps nello sprite non lo
   dichiara (a differenza della stessa artwork usata inline nella hero della
   scheda luogo) e senza questo resterebbe nero su fondo navy, illeggibile. */
.wl-trip-stop .wl-step-nav svg { width: var(--wl-ic-md); height: var(--wl-ic-md); fill: currentColor; }
.wl-trip-stop-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 2px;
}
.wl-trip-stop-metaitem,
.wl-trip-stop-start {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.wl-trip-stop-metaitem svg { width: var(--wl-ic-sm); height: var(--wl-ic-sm); color: rgba(255, 255, 255, 0.5); flex: 0 0 auto; }
/* "Punto di partenza": solo sulla prima tappa, riga sua (flex-basis 100%),
   pin in tinta accento perche' e' l'unico metadato che dice dove COMINCIA
   il viaggio, non quanto dura una tappa. */
.wl-trip-stop-start {
  flex: 0 0 100%;
  font-style: italic;
  color: rgba(255, 255, 255, 0.62);
}
.wl-trip-stop-start svg { width: var(--wl-ic-sm); height: var(--wl-ic-sm); color: var(--wl-accent); flex: 0 0 auto; }
.wl-trip-stop-sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.24);
}
/* Tappa gia' completata: la card si attenua, ma lo stato non e' affidato al
   solo colore (il pulsante porta aria-pressed e un'etichetta esplicita). */
.wl-trip-stop.is-done .wl-trip-stop-img { opacity: 0.55; }
.wl-trip-stop.is-done .wl-trip-stop-name { color: rgba(255, 255, 255, 0.78); }
@media (prefers-reduced-motion: reduce) {
  .wl-trip-stop { transition: none; }
  .wl-trip-stop:active { transform: none; }
}

.wl-trip-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 46px 20px;
  text-align: center;
}
.wl-trip-empty p { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }
.wl-trip-empty .wl-cta { width: auto; padding-left: 26px; padding-right: 26px; }
.wl-trip-empty .wl-empty-mascot { margin-bottom: 0; }
/* ============================================================
   Vista Home (16/7) — vera radice, introduttiva: poche parole,
   due azioni in evidenza (Pianifica/Esplora), card condizionali.
   ============================================================ */
/* Il fondo tiene conto della barra (che galleggia) e della safe area: senza,
   l'ultima riga di card finisce sotto la barra sui telefoni con l'home
   indicator. Stessa formula in sei viste (.wl-home, .wl-trip, .wl-cammino,
   .wl-collections, il corpo del wizard, quello di Contribuisci): la si scrive
   per intero in ognuna perche' le variabili di questo foglio sono scopate a
   una lista di selettori e non a un contenitore comune.

   Il primo addendo e' l'altezza della barra (64) piu' l'aria che le si vuole
   lasciare sopra, il secondo e' identico al `bottom` di .wl-bbar in
   bottom-bar.css. Dal 4/9 la barra scende verso il bordo, quindi anche questo
   numero scende: su un iPhone da 130 a 104, mentre dove la safe area non
   esiste resta 96 come prima. Chi cambia il `bottom` della barra cambi anche
   queste sei righe, o in fondo alle viste ricompare un buco. */
.wl-home { padding: 0 20px calc(84px + max(12px, env(safe-area-inset-bottom, 0px) - 14px)); }
/* 11/8, riallineamento al mockup (richiesta utente: "logo, saluto e slogan
   devono essere in altezza come il meteo, come un vero header"): position
   relative sul solo logo/brand, il meteo esce dal flusso (position:absolute)
   cosi' la sua altezza, quasi doppia di quella del logo, non spinge giu'
   saluto e sottotitolo. Prima il meteo viveva nella stessa riga flex del
   logo: la riga prendeva l'altezza del figlio piu' alto, quello del meteo,
   e il saluto (che segue .wl-home-head nel flusso) partiva da li', molto
   piu' in basso del logo. Risultato: due blocchi separati invece di un
   header unico. Ora il saluto segue a ruota il solo logo, come nel mockup. */
.wl-home-head {
  position: relative;
  /* Stessa formula di safe-area di Wizard/Contribuisci (27/7, richiesta
     utente: header disallineati tra loro, "uno più alto, uno più basso"),
     invece del floor 20px isolato di prima: +8px di aria sopra la notch
     reale, non solo un minimo fisso che la ignora. Salvata in una custom
     property (11/8) perche' il meteo qui sotto e' position:absolute: il suo
     contenitore di posizionamento e' il padding box, cioe' il bordo ESTERNO
     del padding, e top:0 lo allinea li' ignorando questo padding-top (che
     sposta solo i figli a flusso normale, non gli absolute). Senza questa
     seconda applicazione il meteo tocca il bordo superiore invece di stare
     alla stessa altezza del logo (segnalato dall'utente). */
  --wl-home-head-pt: max(12px, calc(env(safe-area-inset-top, 0px) + 8px));
  padding-top: var(--wl-home-head-pt);
}
/* Logo ingrandito in home e SOLO qui (21/7, richiesta utente: risultava più
   piccolo del pillow meteo accanto): 40x23/92x14 sono la taglia condivisa
   con le toolbar compatte di Esplora/Preferiti (.wl-wordmark-header), non si
   toccano quelle: qui si vince solo per specificità (.wl-home-head in più),
   stesso rapporto larghezza/altezza di prima. */
/* 27/7, richiesta utente: ingrandito ancora (era 52x30/120x18), stesso
   rapporto larghezza/altezza. */
/* 3/9, concept "Direzione UI/UX", punto 1 (header piu' compatto): il marchio
   scende dai 62x36 + 142x21 di luglio a 46x27 + 106x16, stesso rapporto. Non
   e' un ripensamento sul brand: a piena taglia il lockup pesava piu' del
   saluto e della card meteo messi insieme, e la prima cosa che si leggeva
   entrando in casa propria era il nome dell'app invece del proprio. Il logo
   grande resta dov'e' il suo posto, la schermata di accesso. */
/* 4/9, confronto affiancato col mockup alla stessa scala: il lockup misurava
   ancora 152 CSS di larghezza contro i 108 del concept, cioe' il 40% in piu'.
   Da 46x27 + 106x16 a 36x21 + 74x11, stesso rapporto di prima. */
.wl-home-head .wl-mark { width: 36px; height: 21px; color: var(--wl-cream); }
.wl-home-head .wl-wordmark-header { width: 74px; height: 11px; }
/* Pillow meteo leggermente più piccolo (stessa richiesta, per bilanciare
   il logo più grande accanto). */
.wl-weather-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     filtrata (13/8, richiesta utente: il box meteo passa dal velo bianco
     0.12 con blur 40 alla ricetta della barra). */
  border-radius: 999px;
  padding: 6px 12px;
  color: white;
  cursor: pointer;
}
.wl-weather-icon { width: 20px; height: 20px; }
#home-weather-temp { font: 700 0.78rem var(--wl-sans); min-width: 0.6em; }
/* 27/7, richiesta utente: pillow meteo più piccolo dopo l'ultimo
   ingrandimento del logo (sembrava cresciuto anche lui, per bilanciamento
   visivo accanto al logo più grande). 11/8: torna quadrato ed esce dal
   flusso della riga (position:absolute, vedi sopra), non essendo più in
   una riga flex col logo. */
/* 10/8: il box non e' piu' quadrato a forza. Il min-height 104 lo teneva alto
   quanto largo, cioe' 33px in piu' dei 71 misurati sul mockup, e quei 33px
   scendevano sul saluto sotto (che restava basso anche dopo aver ridotto il
   suo margine). Ora l'altezza la decide il contenuto. */
.wl-home-head .wl-weather-btn {
  position: absolute;
  top: var(--wl-home-head-pt);
  right: 0;
  /* 4/9: 120 e non 96. Misurata sul mockup alla stessa scala, la card meteo
     e' larga 120 CSS e alta 45. Qui era 92x82, cioe' piu' stretta e quasi il
     doppio in altezza, perche' la frase andava a capo tre volte in 72px di
     spazio interno. Allargarla e' quello che la fa abbassare. */
  width: 120px;
  min-width: 120px;
  min-height: 0;
  padding: 8px 11px;
  border-radius: 18px;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.wl-home-head .wl-home-weather-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wl-home-head .wl-weather-icon { width: 19px; height: 19px; }
#home-weather-temp { font: 700 0.92rem var(--wl-sans); min-width: 0.6em; }
/* Due righe al massimo, come nel mockup. La frase la sceglie
   renderWeatherButton e cambia lunghezza con il tempo che fa: senza un tetto,
   una frase lunga rifaceva alta la card e il saluto qui sotto se ne accorgeva. */
#home-weather-hint {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.76);
  font: 400 0.62rem var(--wl-sans);
  line-height: 1.16;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* 13/8: meteo non disponibile (posizione spenta o servizio muto). La nuvola
   barrata di renderWeatherButton resta leggibile ma spenta, cosi' si vede a
   colpo d'occhio che quel dato manca e non e' un cielo nuvoloso. */
.wl-home-head .wl-weather-btn.wl-weather-off .wl-weather-icon { opacity: 0.62; }
/* Richiamo dopo il popup di primo accesso (2/8): pulsa per pochi secondi il
   tab Profilo, cosi' l'utente trova subito l'interruttore posizione senza
   doverlo cercare. Aggiunta da JS (flashGpsButton in home.js), poi tolta.
   11/8: puntava a un'icona GPS nell'header, tolta da li'; l'interruttore
   vive ora nel menu Profilo (#menu-gps-toggle), aperto dal tab Profilo. */
.wl-gps-hint { animation: wl-gps-hint-pulse 1.2s ease-in-out 3; }
@keyframes wl-gps-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 101, 43, 0); }
  50% { box-shadow: 0 0 0 7px rgba(226, 101, 43, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-gps-hint { animation: none; box-shadow: 0 0 0 3px rgba(226, 101, 43, 0.35); }
}

/* 11/8: il blocco storico delle tile (card crema con mascotte illustrate,
   30-31/7) e' stato rimosso. Era una SECONDA definizione di .wl-home-tiles /
   .wl-home-tile che il redesign del 9/8 gia' sovrascriveva piu' in basso:
   due blocchi in gara sulle stesse classi, con il vincitore deciso
   dall'ordine nel file invece che da una scelta. Le mascotte non sono piu'
   nel markup dal riallineamento al mockup (icone lineari, .wl-home-tile-ic),
   quindi .wl-home-tile-mascot se ne va con loro. Definizione unica: piu'
   in basso, nella sezione del redesign. */
.wl-mascot-en { display: none; }
html[lang="en"] .wl-mascot-it { display: none; }
html[lang="en"] .wl-mascot-en { display: block; }

.wl-home-section-label {
  display: block;
  /* Margine ridotto da 24/10 a 18/8px (31/7, richiesta utente: moduli
     della home meno alti). */
  margin: 18px 0 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* "Novità" (29/7, richiesta utente: farla risaltare in un vero badge,
   non testo piatto come le altre etichette di sezione): pillola piena
   nell'accento del progetto, stesso materiale del badge sul conteggio
   viaggi (.wl-home-trip-badge) invece del grigio uniforme delle altre. */
.wl-home-badge-label {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--wl-accent);
  color: white;
  font-size: 0.7rem;
  /* Niente letter-spacing qui: sul badge "NUOVO" (rimosso il 29/7) la
     stessa combinazione, testo piccolo + spaziatura tra lettere, apriva
     un vuoto visibile a metà parola ("NU OVO"). Stesso rischio con
     "NOVITÀ" a questa dimensione, verificato con uno screenshot. */
  box-shadow: 0 4px 12px rgba(226, 101, 43, 0.35);
}

.wl-home-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  /* 27/7, richiesta utente: piu' respiro alla card "I tuoi viaggi"
     (era margin-top 18px, padding 12px). */
  margin-top: 26px;
  padding: 18px;
  border-radius: 16px;
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     filtrata (la Home poggia sull'illustrazione nitida, il blur qui deve
     esserci davvero e le superfici sono poche per schermata). */
  cursor: pointer;
}
.wl-home-card img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.wl-home-card-copy { text-align: left; color: white; min-width: 0; }
.wl-home-card-copy .wl-eyebrow { color: var(--wl-ice); }
.wl-home-card-copy strong { display: block; margin-top: 2px; font-family: var(--wl-serif); font-size: 0.95rem; }
.wl-home-card-copy small { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.72); font-size: 0.74rem; }

/* "Novità" (29/7, richiesta utente): riga con il carosello dei luoghi
   inseriti di recente (2/3) e "Il tuo viaggio" ridotto a un terzo, stessa
   altezza (align-items: stretch). Senza dati (--solo) la riga eredita lo
   stacco dalle tile che di norma sta sull'etichetta sopra, oggi nascosta. */
/* Altezza della riga in un posto solo (6/8, segnalazione utente: "le
   località inserite di recente devono mantenere sempre la stessa altezza").
   Prima nessun elemento della catena .wl-home-novita > -scroll > -track >
   -card fissava un'altezza vera: erano tutti height:100% l'uno dentro
   l'altro, quindi quel 100% restava indefinito e l'ultima parola toccava
   all'<img>, che ricadeva sulla propria altezza intrinseca. Con card larghe
   92px bastava una copertina verticale (misurate in catalogo: 320x557,
   320x427) per portare la riga da 146 a 178px, e quei 32px spingevano
   "Itinerari a tema" sotto il pulsante centrale della tab bar. La misura
   vive qui e la eredita anche la card viaggio accanto, così le due restano
   legate per costruzione invece che per coincidenza. */
.wl-home-feed-row { --wl-novita-h: 128px; display: flex; gap: 12px; align-items: stretch; }
.wl-home-feed-row--solo { margin-top: 16px; }
.wl-home-feed-row .wl-home-trip { flex: 0 0 auto; width: calc(33.333% - 8px); display: flex; }
.wl-home-feed-row .wl-home-trip .wl-home-card { width: 100%; margin-top: 0; }

/* Vassoio incassato che contiene il carosello (stessa ricetta di
   .wl-wiz-modes: sfondo scuro + doppia ombra interna, sopra buia sotto
   un rimbalzo di luce sottile, così il carosello sembra poggiare dentro
   invece di fluttuare sullo sfondo foto). */
.wl-home-novita {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px;
  border-radius: var(--wl-r-lg);
  background: rgba(5, 28, 50, 0.35);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
/* Finestra del carosello: niente più overflow-x:auto (6/8). Lo scorrimento
   non passa più da scrollLeft ma da una transform sul track (vedi
   startNovitaAutoscroll in home.js), quindi qui serve solo ritagliare.
   touch-action:pan-y lascia allo scroll verticale della pagina i gesti su
   e giù: orizzontale lo gestisce il drag nostro. Le immagini possono
   attivare il drag-and-drop nativo del browser: user-select:none e
   -webkit-user-drag:none lo impediscono sempre, prima che il dragstart
   possa partire. */
.wl-home-novita-scroll {
  height: var(--wl-novita-h);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}
.wl-home-novita-scroll:active { cursor: grabbing; }
.wl-home-novita-track { display: flex; gap: 8px; width: max-content; height: 100%; will-change: transform; }
.wl-home-novita-card {
  flex: 0 0 92px;
  position: relative;
  height: var(--wl-novita-h);
  border: none;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: var(--wl-navy);
  text-align: left;
  cursor: pointer;
}
/* position:absolute (6/8) e non solo height:100%: in flusso, con
   object-fit:cover, l'immagine continuerebbe a proporre la propria altezza
   intrinseca al box della card. Fuori flusso non può più dettare nulla,
   qualunque sia il taglio della copertina. Stessa ricetta già in uso su
   .wl-home-card--compact img qui sotto. */
.wl-home-novita-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-home-novita-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 28, 50, 0.05) 0%, rgba(5, 28, 50, 0.2) 45%, rgba(5, 28, 50, 0.86) 100%);
  pointer-events: none;
}
.wl-home-novita-copy { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 1; color: white; }
.wl-home-novita-copy strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1.25;
  text-shadow: 0 1px 5px rgba(4, 14, 25, 0.5);
}

/* Card "Il tuo viaggio" compatta (un terzo della riga, accanto a Novità):
   stessa ricetta immagine-a-piena-card + testo in sovrimpressione di
   .wl-home-collection-card, non il layout orizzontale icona+testo di
   .wl-home-card normale, che a un terzo di larghezza non ci starebbe. */
.wl-home-card--compact {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  /* Legata alla stessa misura del carosello accanto (6/8): erano due 128px
     scritti a mano, che una modifica futura a uno solo dei due avrebbe
     disallineato in silenzio. */
  min-height: var(--wl-novita-h, 128px);
  padding: 0;
  overflow: hidden;
}
.wl-home-card--compact img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.wl-home-card--compact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 28, 50, 0.05) 0%, rgba(5, 28, 50, 0.15) 40%, rgba(5, 28, 50, 0.82) 100%);
  pointer-events: none;
}
.wl-home-card-compact-copy { position: relative; z-index: 1; margin-top: auto; padding: 8px; color: white; }
.wl-home-card-compact-copy strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 0.74rem;
  line-height: 1.25;
  text-shadow: 0 1px 5px rgba(4, 14, 25, 0.5);
}

.wl-home-nearby-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.wl-home-nearby-card {
  flex: 0 0 110px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(5, 28, 50, 0.3);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  color: white;
  text-align: left;
  cursor: pointer;
}
.wl-home-nearby-card img { width: 100%; height: 78px; border-radius: 10px; object-fit: cover; }
.wl-home-nearby-card strong { font-family: var(--wl-serif); font-size: 0.78rem; line-height: 1.2; }
.wl-home-nearby-card small { color: rgba(255, 255, 255, 0.7); font-size: 0.68rem; }

/* "Itinerari a tema" (24/7, prima era un'unica hero a piena larghezza —
   diventata una riga scorrevole come #home-nearby perché ne arriveranno
   altre, es. i Cistercensi nel Lazio): non generata da renderHome()
   (nessun dato utente coinvolto, sempre uguale), stessa etichetta di
   sezione di "Nei dintorni" (.wl-home-section-label, già definita sopra). */
.wl-home-collections-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
/* Pallini del carosello (24/7, richiesta utente: "far capire che ci sono
   più possibilità"): generati in JS (initCollectionsCarousel, home.js) in
   base al numero di card presenti nella riga, nascosti da sola una card.
   31/7, richiesta utente: eliminati, tolgono spazio in altezza senza
   essere indispensabili (lo scroll orizzontale della riga è già evidente
   da solo). L'elemento resta nel markup/JS (home.js continua a popolarlo
   e ad aggiornare .active) ma non occupa più spazio in pagina. */
.wl-home-collections-dots { display: none; }
.wl-home-collections-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.2s ease, background 0.2s ease;
}
.wl-home-collections-dot.active { width: 16px; background: var(--wl-ice); }
.wl-home-collection-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: block;
  position: relative;
  height: 180px;
  /* 31/7, richiesta utente: stesso rilievo 3d delle tile Esplora/Pianifica
     (bordo ghiaccio + inset chiaro sopra/inset scuro sotto), qui solo il
     bordo/ombra: niente sfondo chiaro perché la card è già una foto con il
     suo scrim scuro sotto (vedi ::after), non una superficie vetro vuota. */
  border: 1px solid rgba(169, 198, 218, 0.6);
  border-radius: var(--wl-r-lg);
  padding: 0;
  overflow: hidden;
  background: var(--wl-navy);
  box-shadow:
    0 10px 24px rgba(5, 28, 50, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(5, 28, 50, 0.4);
  text-align: left;
}
.wl-home-collection-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wl-home-collection-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 28, 50, 0.05) 0%, rgba(5, 28, 50, 0.15) 40%, rgba(5, 28, 50, 0.82) 100%);
  pointer-events: none;
}
.wl-home-collection-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  background: rgba(5, 28, 50, 0.5);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
  font: 700 0.62rem var(--wl-sans);
}
.wl-home-collection-badge img { height: 15px; width: auto; border-radius: 3px; }
.wl-home-collection-copy {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  color: white;
}
.wl-home-collection-copy strong {
  display: block;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 1px 6px rgba(4, 14, 25, 0.5);
}
.wl-home-collection-copy small {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 5px rgba(4, 14, 25, 0.5);
}
/* ============================================================
   Redesign Home (9/8, da design/home-page.png): grammatica unica per
   le quattro sezioni (continua / collezioni / vicino / novità), saluto
   orario suo, due CTA a icona lineare, meteo card a due righe.
   Le classi vecchie (.wl-home-novita*, .wl-home-collection-card,
   .wl-home-collections-row/-dots, .wl-home-tile-mascot, .wl-home-trip)
   restano referenziate altrove finché home.js viene migrato (Fase 3):
   keep qui per evitare regressioni di stile nel frattempo, verranno
   rimosse insieme al codice che le usa.
   ============================================================ */
.wl-home-weather {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 12px;
  min-height: 44px;
}
.wl-home-weather-top {
  display: flex;
  align-items: center;
  gap: 5px;
}
.wl-home-weather-top .wl-weather-icon { width: 18px; height: 18px; }
.wl-home-weather-top #home-weather-temp {
  font: 600 0.82rem var(--wl-sans);
  line-height: 1;
}
.wl-home-weather small { font: 400 0.58rem var(--wl-sans); color: rgba(255,255,255,0.78); line-height: 1.1; }

/* 6px e non 18 (10/8, richiesta utente: "buongiorno name va spostato poco
   sotto il logo, tira tutto più su"): nel mockup il saluto sta a ~90 CSS
   dall'alto contro i ~112 del render, e i 22px di scarto erano quasi tutti
   in questo margine. */
.wl-home-greet {
  /* 10px e non 6: il marchio piu' piccolo ha liberato spazio, e il saluto
     senza un filo d'aria sopra sembrava incollato al logo. */
  margin: 10px 2px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Il saluto e' l'unica riga davvero grande dell'header: cresce mentre il
     marchio si ritira, cosi' la gerarchia si inverte come chiede il concept
     (chi guarda prima di cio' che guarda). */
  font: 600 1.28rem/1.15 var(--wl-serif);
  color: white;
  /* La card meteo qui accanto e' position:absolute, quindi non spinge via
     niente: senza questo tetto un nome lungo ci finirebbe sotto. 128 sono i
     120 della card piu' 8 di stacco. Il numero va tenuto allineato alla
     larghezza dichiarata in .wl-home-head .wl-weather-btn. */
  max-width: calc(100% - 128px);
}
.wl-home-greet svg { width: 22px; height: 22px; color: var(--wl-ice); flex-shrink: 0; }
.wl-home-greet-sub {
  margin: 4px 2px 14px;
  font: 400 0.78rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.7);
}

/* 11/8: due colonne affiancate come nel mockup, non una colonna impilata.
   Questo blocco vive dopo quello storico di riga 3434 e quindi vince: le due
   definizioni si contendevano le stesse classi e la seconda rimetteva
   flex-direction:column, che e' ESATTAMENTE l'impilamento segnalato. Il
   contenuto va in colonna DENTRO la card (icona sopra, testo sotto), che e'
   il modo in cui il mockup fa stare due card su una riga da 390px. */
.wl-home-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
/* Riga e non colonna (10/8, richiesta utente: "elimina le frasi... falli piu'
   piccoli, icona a sinistra e freccia a destra"): tolto il sottotitolo restano
   tre elementi che stanno comodi su una riga sola, e la card scende da 118px
   di altezza a ~56. */
.wl-home-tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 16px;
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     filtrata (13/8, richiesta utente: le due tile Esplora/Pianifica passano
     dal navy piatto 0.42 con blur 40 alla ricetta della barra). */
  color: white;
  text-align: left;
  cursor: pointer;
}
/* 10/8: la freccia torna nel flusso, ultima della riga. Con la card in
   colonna stava in basso a destra per non sedersi sotto il testo; ora che la
   riga e' icona + nome + freccia, l'assoluto la staccherebbe soltanto
   dall'allineamento verticale delle altre due. */
.wl-home-tile .wl-home-tile-go { position: static; margin-left: auto; }
/* 11/8: stili delle tile allineati al mockup, icone lineari al posto delle
   mascotte illustrate (niente più .wl-home-tile-mascot qui). */
.wl-home-tile-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.wl-home-tile-ic svg { width: 17px; height: 17px; }
.wl-home-tile-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-home-tile-copy strong {
  font: 700 0.92rem var(--wl-sans);
  /* "Pianifica" in tedesco o in un nome lungo non deve spingere fuori la
     freccia: taglia invece di sfondare la card. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Tre righe e nessuna ellissi (3/9, punto 8 del concept). Su meta' schermo,
   tolti icona e freccia, restano un centinaio di pixel: "Crea il tuo
   itinerario su misura" ci sta in tre righe e in due no, e fermarlo a due
   voleva dire mostrare "Crea il tuo itinerario su..." nella card che
   dovrebbe spiegare cosa fa il pulsante. Le due card restano alte uguale
   perche' la griglia le stira (align-items di default: stretch). */
.wl-home-tile-copy small {
  font: 400 0.7rem/1.25 var(--wl-sans);
  color: rgba(255, 255, 255, 0.7);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wl-home-tile-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.wl-home-tile-go svg { width: 12px; height: 12px; }
/* 3/9, concept punti 2 e 3: le due azioni smettono di pesare uguale. Prima
   erano la stessa card ripetuta e cambiava solo il colore di un'icona, quindi
   la scelta era rimessa alla lettura. Ora "Esplora" e' la primaria e si vede
   da lontano, "Pianifica" resta chiara ma indietro di un passo.

   Il fondo di Esplora NON e' un colore nuovo: e' il gradiente accent->navy a
   160 gradi con bordo accent 0.45 che l'app usa da luglio per dire "questo e'
   attivo" (.wl-tag.active, .wl-wiz-tile.active, i chip di Esplora, il
   pulsante centrale al lavoro). Vive qui e non nel blocco del materiale in
   cima al foglio perche' e' esattamente il tipo di eccezione che quel blocco
   prevede: selettore piu' specifico, geometria e vetro invariati sotto. */
.wl-home-tile--explore {
  background:
    linear-gradient(160deg, rgba(226, 101, 43, 0.5) 0%, rgba(5, 28, 50, 0.4) 100%) padding-box,
    var(--wl-glass-rim) border-box;
  /* NIENTE border-color qui, per quanto la tentazione sia forte: il bordo di
     queste card e' `1px solid transparent` apposta, perche' il filo chiaro e'
     un gradiente steso sull'anello (background-clip: border-box). Dargli un
     colore lo copre, e il filo torna a essere quattro colori per lato che si
     spezzano agli angoli: il difetto misurato e corretto il 13/8, che
     scripts/diag-glass-rim.mjs presidia. Verificato: con il border-color lo
     scarto peggiore passava da 23 a 13 su 45 e lo strumento dava KO.
     L'accento caldo lo porta l'ombra esterna, che non tocca l'anello. */
  box-shadow: var(--wl-glass-edge-out), 0 10px 26px -8px rgba(120, 44, 10, 0.6);
}
.wl-home-tile--explore .wl-home-tile-ic { background: var(--wl-accent); border-color: transparent; color: #0b2238; }
/* Titolo bianco e non arancione: sul fondo arancione l'arancione sparirebbe.
   Il colore del brand qui e' la superficie, non la scritta. */
.wl-home-tile--explore .wl-home-tile-copy strong { color: white; }
.wl-home-tile--explore .wl-home-tile-copy small { color: rgba(255, 255, 255, 0.86); }
.wl-home-tile--explore .wl-home-tile-go { border-color: rgba(255, 255, 255, 0.55); color: white; }
.wl-home-tile--plan .wl-home-tile-ic { background: rgba(133, 180, 216, 0.18); color: var(--wl-ice); }
.wl-home-tile--plan .wl-home-tile-copy strong { color: var(--wl-ice); }
@supports not (backdrop-filter: blur(1px)) {
  .wl-home-tile--explore {
    background:
      linear-gradient(160deg, rgba(180, 74, 27, 0.94) 0%, rgba(8, 25, 42, 0.92) 100%) padding-box,
      var(--wl-glass-rim) border-box;
  }
}

/* 20 e non 26 (4/9). Il 26 del 3/9 nasceva dal timore che le righe, cresciute
   in altezza, si toccassero: misurate, fra il fondo di una riga e il titolo
   della sezione dopo restano 20px di stacco piu' i 12 del margine inferiore
   delle card, mentre il mockup ne mostra 22 in tutto. Il respiro tra le
   sezioni resta, la pagina smette di essere lunga il doppio del concept. */
.wl-home-sec { margin-top: 20px; }
.wl-home-sec.hidden { display: none; }
.wl-home-sec-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 2px 8px;
}
.wl-home-sec-ic { width: 16px; height: 16px; color: var(--wl-ice); flex-shrink: 0; }
.wl-home-sec-head h2 {
  margin: 0;
  /* 0.94rem (4/9). Il salto a 1.06 del 3/9 serviva a dare gerarchia rispetto
     ai nomi sulle card, e la gerarchia resta: nel confronto affiancato col
     mockup, pero', questi titoli erano di un terzo piu' alti dei suoi. Serif e
     sans puntano entrambi a Nunito (scelta dell'utente, confermata il 4/9),
     quindi cambia il peso della riga, non il carattere. */
  font: 700 0.94rem var(--wl-serif);
  color: white;
}
.wl-home-sec-head small {
  margin-left: auto;
  font: 400 0.7rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.6);
}
.wl-home-sec-all {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--wl-ice);
  font: 600 0.72rem var(--wl-sans);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 999px;
}
.wl-home-sec-all:active { background: rgba(255, 255, 255, 0.08); }

/* Card "Continua da dove eri rimasto" (11/8): copertina laterale, testo,
   avanzamento e play in colonna, come nel mockup. min-height 92 e non 116
   (richiesta utente, "e' alta troppo"): 92 CSS e' la misura del mockup
   (~201 immagine / 2.187), 116 la superava del 26%. */
.wl-home-continue-card {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  /* 108 e non 92 (3/9, concept punto 4): la card ha guadagnato il badge di
     stato e la pillola "Riprendi itinerario", che a 92px si sarebbero pestate
     i piedi con la barra di avanzamento. Resta comunque piu' bassa della
     card grande dei consigliati, che e' l'unica a dover fermare l'occhio. */
  min-height: 108px;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     filtrata. */
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* position:relative/absolute (11/8, "e' alta troppo, prende l'altezza
   dall'immagine"): senza questo l'img (height:100%) risolveva "100% di
   un'altezza auto" con la propria proporzione intrinseca, cioe' larghezza
   della cover * rapporto naturale della foto. Con align-items:stretch
   quell'altezza vinceva sempre su quella, piu' bassa, del testo, e tutta
   la riga (quindi la card) si stirava sull'immagine invece che sul
   contenuto. Con l'img fuori dal flusso la cover non porta piu' altezza
   propria: decide tutto .wl-home-continue-copy, testo + barra. */
.wl-home-continue-cover {
  position: relative;
  flex: 0 0 33%;
  min-width: 0;
}
.wl-home-continue-cover img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wl-home-continue-card .wl-home-continue-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 14px;
  color: white;
  min-width: 0;
}
/* Due righe piene e nessun ellissi (3/9, punto 8): i titoli veri sono lunghi
   ("Itinerario del 17/08/2026", il nome che l'utente ha dato al giro) e su una
   riga sola finivano tagliati a meta' parola. */
.wl-home-continue-card .wl-home-continue-copy strong {
  font: 700 1rem/1.2 var(--wl-serif);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Il badge di stato (3/9): dice "In corso" una volta sola, in alto, invece di
   lasciarlo intuire dalla percentuale in fondo. Maiuscolo senza
   letter-spacing: a questa taglia lo spazio fra le lettere apre un buco
   visibile a meta' parola, difetto gia' incontrato due volte su "NUOVO" e
   "NOVITA'" (vedi knowledge/wiki/architecture.md). */
.wl-home-continue-card .wl-home-continue-badge {
  align-self: flex-start;
  margin-bottom: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--wl-accent);
  color: #0b2238;
  font: 700 0.56rem var(--wl-sans);
  text-transform: uppercase;
}
.wl-home-progress { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
/* Percentuale a sinistra e invito a destra, sulla stessa riga: la card dice
   a che punto e' il giro e come riprenderlo senza aggiungere un'altra riga. */
.wl-home-progress-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Non e' un <button>: la card intera lo e' gia' (vedi renderHomeContinue). */
.wl-home-resume {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 4px 9px 4px 11px;
  border-radius: 999px;
  background: var(--wl-accent);
  color: #0b2238;
  font: 700 0.6rem var(--wl-sans);
  white-space: nowrap;
}
.wl-home-resume svg { width: 10px; height: 10px; }
.wl-home-progress-bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}
.wl-home-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--wl-accent);
}
.wl-home-progress-label {
  font: 400 0.6rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.76);
  white-space: nowrap;
}
/* .wl-home-play (il cerchietto col triangolo in fondo alla card) e' stata
   rimossa il 3/9 con il markup che la usava: a 38px, su una card larga quanto
   lo schermo, non diceva a nessuno dove portava. Al suo posto c'e' la pillola
   scritta "Riprendi itinerario" qui sopra. */

/* Card collezioni: copertina + badge categoria + chip durata/mezzo/regione. */
.wl-home-coll-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* proximity e non mandatory (3/9): con lo scorrimento portato da bordo a
     bordo, mandatory riagganciava la riga ad ogni minimo trascinamento e
     l'ultima card non si raggiungeva mai del tutto. */
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
/* 124px e non 78% (10/8): nel mockup si vedono tre card affiancate piu' un
   pezzo della quarta, misurate 124 CSS con gap 8. Il 78% ne mostrava una e
   mezza, e la stessa foto larga il doppio spingeva titolo e chip a occupare
   due righe ciascuno. */
.wl-home-coll-card {
  position: relative;
  /* 138 e non 124 (3/9): a 124 il titolo su UNA riga tagliava "Le Ville
     Medice..." e "Cistercensi nel Lazi..."; su due righe (vedi sotto) serve
     una base un po' piu' larga perche' non diventino quattro parole
     spezzate. */
  flex: 0 0 138px;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  /* Bordo: sezione "Il vetro delle card" in cima al foglio (qui solo i fili,
     la superficie e' la foto). */
  cursor: pointer;
  /* I <button> centrano il testo per default: senza questo il titolo e le
     chip finivano al centro invece che a sinistra come nel mockup. */
  text-align: left;
  /* 11/8, richiesta utente ("le foto hanno sempre uno spazio sx e dx"):
     e' il padding di default del browser sui <button> (circa 1px 6px), mai
     azzerato qui. L'img sotto e' width:100% ma restava dentro quel padding,
     quindi non toccava mai i bordi della card. */
  padding: 0;
  /* Niente `background: none` qui (c'era per azzerare il grigio di default
     del <button>): dal 13/8 il fondo porta il filo del bordo, che e' un
     gradiente ritagliato sull'anello. Riazzerarlo qui lo cancellerebbe. */
}
.wl-home-coll-card img { display: block; width: 100%; height: 100px; object-fit: cover; }
/* Il badge della distinzione sulla copertina non c'e' piu' (4/9, richiesta
   utente). Era passato per due forme, pillola di testo e poi solo marchio,
   e in entrambe copriva l'angolo alto sinistro della fotografia. Il marchio
   resta dov'e' nato, sulla scheda del singolo luogo, e `badgeTone` continua
   a ordinare la riga anche senza mostrarsi. */
/* Velo sotto il testo: nel mockup titolo e chip stanno sulla foto e restano
   leggibili anche sulle coperture chiare, cosa che il solo text-shadow non
   garantiva. */
.wl-home-coll-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(180deg, rgba(4, 14, 25, 0) 0%, rgba(4, 14, 25, 0.78) 70%);
  pointer-events: none;
}
.wl-home-coll-copy {
  position: absolute; left: 8px; right: 8px; bottom: 7px; z-index: 1; color: white;
}
/* Due righe piene invece di una con l'ellissi (3/9, punto 8 del concept).
   La ragione della riga sola era che un nome lungo su 124px sarebbe andato a
   TRE righe spingendo le chip fuori dalla card: il limite a due righe risolve
   la stessa cosa senza tagliare i nomi, e la card e' anche piu' larga. */
.wl-home-coll-copy strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font: 700 0.74rem/1.2 var(--wl-serif);
  text-shadow: 0 1px 6px rgba(4, 14, 25, 0.6);
  overflow: hidden;
}
/* Il sottotitolo non esiste nel mockup: su una card larga 124px le sue due
   righe finivano sopra al titolo (era il testo sovrapposto che si vedeva). */
.wl-home-coll-copy small { display: none; }
/* Card di un cammino (3/9, punto 7 del concept: ogni categoria con una
   grammatica visiva propria). .wl-home-coll-cammino esisteva dal 14/8 ma era
   un gancio senza una sola regola: cammino e itinerario in auto erano la
   stessa identica card, e la differenza la portava solo il testo dentro le
   chip. Un cammino e' lungo giorni e attraversa una regione intera: la sua
   card e' piu' larga, l'immagine piu' bassa e panoramica, e il filo del bordo
   prende un'ombra di accento per staccarla dalla riga sopra. */
.wl-home-coll-card.wl-home-coll-cammino {
  flex: 0 0 calc((100% - 10px) / 2);
  aspect-ratio: 16/9;
}
.wl-home-coll-card.wl-home-coll-cammino img { height: 100%; }
.wl-home-coll-card.wl-home-coll-cammino .wl-home-coll-copy strong { -webkit-line-clamp: 2; font-size: 0.8rem; }
.wl-home-coll-meta {
  display: flex; flex-wrap: nowrap; gap: 6px;
  margin-top: 4px;
  font: 400 0.5rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
}
/* Senza pillola: nel mockup sono icona + testo nudi sulla foto. La pillola
   con bordo rubava i ~30px di padding che a 124px non ci sono piu'. */
.wl-home-coll-chip {
  display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap;
}
.wl-home-coll-chip svg { width: 11px; height: 11px; }

/* Manopola del raggio di "Vicino a te" (3/9, richiesta utente): al posto
   dell'etichetta muta "Entro 50 km" c'e' un cursore da 15 a 50 km con passi
   da 5, e le card si rifanno mentre lo si trascina.

   Sta su una riga propria e non dentro l'intestazione, dove viveva
   l'etichetta che sostituisce: fra il titolo e "Vedi tutti" restano un
   centinaio di pixel, e un cursore lungo cosi' avrebbe avuto passi da 12px,
   cioe' impossibile da centrare col pollice. La riga sua lo porta a piena
   larghezza e gli lascia i 44px di altezza che un controllo trascinabile
   deve avere per essere preso al primo tentativo.

   Il segno grafico e' quello gia' in uso per l'avanzamento del viaggio:
   traccia chiara al 14%, riempimento in accent. Cambia il mestiere (li' si
   guarda, qui si tira) ma la famiglia visiva resta una. */
.wl-home-near-radius {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 2px 12px;
}
.wl-home-radius-val {
  flex: 0 0 auto;
  min-width: 5.5em;
  text-align: right;
  font: 600 0.72rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.wl-home-radius-input {
  flex: 1 1 auto;
  min-width: 0;
  /* L'aspetto nativo va tolto in tutte e tre le forme: senza, Safari e
     Firefox disegnano comunque il loro cursore e il resto delle regole non
     ha alcun effetto. */
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
/* La parte percorsa e' colorata anche su WebKit, che non ha un equivalente di
   ::-moz-range-progress: il gradiente si ferma di netto alla percentuale, che
   il JS scrive nella custom property ad ogni passo (una riga nel listener che
   gia' c'e'). Cosi' la manopola si legge come la barra di avanzamento del
   viaggio, che e' la stessa famiglia visiva. */
.wl-home-radius-input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--wl-accent) var(--wl-radius-pct, 100%),
    rgba(255, 255, 255, 0.14) var(--wl-radius-pct, 100%));
}
.wl-home-radius-input::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
/* Firefox colora da solo la parte percorsa, senza bisogno della percentuale. */
.wl-home-radius-input::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--wl-accent);
}
.wl-home-radius-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  /* Il pollice e' alto 20 e la traccia 6: senza questo margine WebKit lo
     appoggia sul bordo alto della traccia invece che al centro. */
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: var(--wl-accent);
  box-shadow: 0 2px 6px rgba(4, 14, 25, 0.5);
}
.wl-home-radius-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: var(--wl-accent);
  box-shadow: 0 2px 6px rgba(4, 14, 25, 0.5);
}
.wl-home-radius-input:focus-visible { outline: 2px solid var(--wl-ice); outline-offset: 4px; }
/* Raggio troppo stretto: la sezione resta in piedi con la sua manopola,
   altrimenti sparirebbe il solo comando per riallargarla. */
.wl-home-near-empty {
  margin: 0 2px;
  font: 400 0.72rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.6);
}

/* Card "Vicino a te" e "Aggiunti di recente".
   11/8: quattro colonne fisse, come nel mockup di allora.
   3/9, concept punti 7 e 8: le quattro colonne fisse sono la ragione per cui
   i nomi erano illeggibili. Su 390px di schermo, meno 40 di margini e 30 di
   gap, restano 80px per card: a quella larghezza il titolo stava a 0.56rem
   (circa 8,5px) e finiva comunque a "Vicus Caprarius- La...". Non era un
   problema di font, era la griglia. Diventano rail che scorrono: la card
   decide la propria larghezza, il numero di card non deve piu' riempire una
   riga esatta, e i nomi tornano a leggersi.

   3/9, richiesta utente: le righe restano dentro i 20px di margine della
   vista, come l'header e le due CTA. Erano nate con margini negativi
   compensati dal padding, per farle scorrere da bordo a bordo dello schermo:
   guardate insieme alle righe sopra sembravano pero' una pagina diversa,
   incollata ai lati. Meglio un margine solo, uguale per tutto. */
.wl-home-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  align-items: stretch;
  padding-bottom: 4px;
}
.wl-home-rail > * { scroll-snap-align: start; }
.wl-home-near-grid { gap: 10px; }
/* La card e' un <article> contenitore (11/8): dentro ci stanno due bottoni
   fratelli, l'apertura del dettaglio e il cuore. Prima era un solo <button>
   col cuore annidato dentro, HTML illegale che il parser spezzava in pezzi
   sparsi (vedi il commento in renderHomeNearby). Il contenitore tiene forma
   e ritaglio; il bottone interno tiene il layout. */
.wl-home-near-card {
  position: relative;
  /* 118px: due card e mezzo in vista su 390, cioe' abbastanza perche' un nome
     di catalogo vero entri in due righe senza tagli. */
  flex: 0 0 118px;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     filtrata. */
}
/* Colonna a tutta altezza: la card e' stirata dalla griglia, ma senza questo
   il bottone interno restava alto quanto il suo contenuto e sotto rimaneva
   una striscia vuota nelle card dal titolo corto. */
.wl-home-near-open {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
/* 50px e non 76 (10/8): nel mockup la foto occupa i primi ~52px CSS della
   card, il titolo sta a ~58 e il chip km a ~75, per un totale di ~87. Con la
   foto a 76 la card arrivava a 129 e la fascia sfondava in altezza. */
/* 74px e non 50 (3/9): a 50 la foto era una striscia e la card sembrava un
   elenco con l'anteprima, non una scheda di un luogo. Con la card piu' larga
   la proporzione regge. */
.wl-home-near-card img { display: block; width: 100%; height: 74px; object-fit: cover; }
/* Il chip dei km sta SOTTO il titolo, non sulla foto (10/8). Nel mockup e'
   icona + testo nudi nel corpo della card; sovrapposto alla foto copriva
   l'immagine e litigava col cuore per lo spazio in alto. */
.wl-home-near-card .wl-home-near-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: 400 0.62rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.75);
}
.wl-home-near-card .wl-home-near-chip svg { width: 12px; height: 12px; }
/* Le card di Home sono larghe un quarto di schermo: il punteggio scende alla
   taglia del chip dei km che gli sta accanto, e i glifi con lui. */
.wl-home-near-card .wl-rating,
.wl-home-near-card .wl-fame { font: 400 0.6rem var(--wl-sans); gap: 3px; }
.wl-home-near-card .wl-rating svg { width: 12px; height: 12px; }
/* Il misuratore scende con la riga: su una card larga un quarto di schermo le
   tacche piene restano leggibili, la scaletta si accorcia in proporzione. */
.wl-home-near-card .wl-fame-meter { height: 9px; gap: 1px; }
.wl-home-near-card .wl-fame-meter i { width: 2px; }
.wl-home-near-card .wl-fame-meter i:nth-child(1) { height: 3px; }
.wl-home-near-card .wl-fame-meter i:nth-child(2) { height: 4.5px; }
.wl-home-near-card .wl-fame-meter i:nth-child(3) { height: 6px; }
.wl-home-near-card .wl-fame-meter i:nth-child(4) { height: 7.5px; }
.wl-home-near-card .wl-fame-meter i:nth-child(5) { height: 9px; }
/* Il cuore qui e' minuto: .wl-fav nasce 38px per le foto grandi di Esplora e
   Preferiti, su una card larga un quarto di schermo coprirebbe mezza
   immagine. Stesso materiale, taglia ridotta. */
.wl-home-near-card .wl-fav {
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  box-shadow: none;
}
.wl-home-near-card .wl-fav svg { width: 13px; height: 13px; }
.wl-home-near-card .wl-home-near-copy {
  padding: 7px 9px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
/* Due righe al massimo, poi taglia (10/8): "Vicus Caprarius - La citta'
   dell'acqua" ne occupava tre e le quattro card della riga finivano con
   altezze tutte diverse. Il font segue la cap height del mockup (5.9px CSS,
   cioe' ~8.5px) come per le card "Aggiunti di recente". */
/* line-height stretto (1.15): i nomi del catalogo reale sono molto piu' lunghi
   di quelli del mockup ("Vicus Caprarius - La citta' dell'acqua" contro "Nemi")
   e a 80px di larghezza vanno quasi sempre a due righe. Con l'interlinea
   normale quelle due righe costavano 24px e la card arrivava a 103 invece dei
   ~87 del mockup. */
/* 0.72rem e non 0.56 (3/9): con la card a 118px il nome ha di nuovo lo
   spazio per essere letto. Restano due righe al massimo e l'altezza resta
   riservata, cosi' il chip dei km e' allineato fra card dal titolo corto e
   card dal titolo lungo. */
.wl-home-near-card .wl-home-near-copy strong {
  font: 600 0.72rem/1.2 var(--wl-sans); color: white;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.2em);
}
.wl-home-near-card .wl-home-near-copy small { font: 400 0.6rem var(--wl-sans); color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   "Potrebbe piacerti oggi" (3/9, concept "Direzione UI/UX", punto 6)
   ============================================================
   La card grande che rompe il ritmo. Fino a ieri la Home era sei righe di
   miniature una sotto l'altra: tutto alla stessa taglia vuol dire che niente
   ha la precedenza, ed e' il motivo per cui il concept chiede "una hero card
   ispirazionale per creare ritmo".

   La superficie e' la fotografia, non il vetro: il materiale filtrato qui
   sarebbe vetro sopra il contenuto, che la ricetta unica vieta (vedi
   knowledge/wiki/vetro-materiale.md). Come le card collezioni, questa prende
   solo i due fili del bordo, dichiarati nel blocco del materiale in cima al
   foglio.

   Scorre in orizzontale come le altre righe, una card per schermata: il
   contatore "1 / 5" in alto a destra dice che ce n'e' dell'altra, perche' con
   una card larga quanto lo schermo il pezzetto della successiva non si
   intravede piu'. */
.wl-home-oggi-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
.wl-home-oggi-card {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  min-height: clamp(218px, 57vw, 260px);
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}
.wl-home-oggi-card img {
  display: block;
  width: 100%;
  height: clamp(218px, 57vw, 260px);
  object-fit: cover;
}
/* Il velo sale piu' in alto delle card piccole: qui sotto ci vanno quattro
   informazioni (titolo, frase, chip, invito), non due parole. */
.wl-home-oggi-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 14, 25, 0.05) 0%, rgba(4, 14, 25, 0.35) 38%, rgba(4, 14, 25, 0.92) 100%);
  pointer-events: none;
}
/* Maiuscolo senza letter-spacing, come il badge "In corso": a questa taglia
   la spaziatura apre un buco a meta' parola (difetto gia' visto su "NUOVO" e
   "NOVITA'", knowledge/wiki/architecture.md). */
.wl-home-oggi-badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--wl-accent);
  color: #0b2238;
  font: 700 0.5rem var(--wl-sans);
  text-transform: uppercase;
}
.wl-home-oggi-count {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(4, 14, 25, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.9);
  font: 600 0.58rem var(--wl-sans);
}
.wl-home-oggi-copy {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
  display: flex; flex-direction: column; gap: 4px;
  color: white;
}
.wl-home-oggi-copy strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font: 700 1.12rem/1.22 var(--wl-serif);
  text-shadow: 0 1px 8px rgba(4, 14, 25, 0.75);
  overflow: hidden;
}
/* La frase viene dalla descrizione vera della scheda (primaFrase in home.js),
   quindi puo' essere lunga: due righe e poi si ferma. */
.wl-home-oggi-copy small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font: 400 0.72rem/1.3 var(--wl-sans);
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 6px rgba(4, 14, 25, 0.7);
  overflow: hidden;
}
.wl-home-oggi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Va a capo invece di sovrapporsi: con tre dati e un invito su 328px il
     nowrap tagliava l'ultima chip a meta' icona e ci appoggiava sopra la
     pillola. Meglio due righe leggibili di una riga sola rotta. */
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 7px;
}
.wl-home-oggi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  min-width: 0;
}
.wl-home-oggi-chip {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
  font: 400 0.62rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.86);
}
.wl-home-oggi-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Non e' un <button>: la card intera lo e' gia' (vedi oggiCardHTML). Il velo
   scuro sotto la foto e' fondo a sufficienza, quindi qui basta il filo del
   bordo, senza un secondo vetro sopra il primo. */
.wl-home-oggi-cta {
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto;
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  background: var(--wl-accent);
  color: #0b2238;
  font: 700 0.66rem var(--wl-sans);
}
.wl-home-oggi-cta svg { width: 12px; height: 12px; }

.wl-home-new-grid { gap: 10px; }
.wl-home-new-card {
  position: relative;
  /* Piu' larga delle card "Vicino a te" (3/9): qui il testo sta SOPRA la
     foto, quindi ha bisogno di piu' base per non finire su tre righe sopra
     l'immagine. E' anche la differenza che distingue le due famiglie a colpo
     d'occhio, come chiede il punto 7 del concept. */
  flex: 0 0 138px;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  /* Bordo: sezione "Il vetro delle card" in cima al foglio (qui solo i fili,
     la superficie e' la foto). */
  cursor: pointer;
  text-align: left; /* i <button> centrano il testo per default */
  /* Stesso bug delle card collezioni: padding di default del <button> che
     lasciava un margine visibile intorno alla foto (11/8). */
  padding: 0;
  /* Come per le collezioni: `background: none` tolto il 13/8, il fondo ora
     porta il filo del bordo. */
}
.wl-home-new-card img { display: block; width: 100%; height: 104px; object-fit: cover; }
/* Come per le collezioni: il testo sta sulla foto e serve un fondo scuro. */
.wl-home-new-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 68%;
  background: linear-gradient(180deg, rgba(4, 14, 25, 0) 0%, rgba(4, 14, 25, 0.86) 72%);
  pointer-events: none;
}
.wl-home-new-card .wl-home-new-badge {
  position: absolute; top: 7px; left: 7px; z-index: 1;
  padding: 2px 8px; border-radius: 999px;
  background: var(--wl-accent); color: #0b2238;
  font: 700 0.58rem var(--wl-sans);
}
.wl-home-new-card .wl-home-new-copy {
  position: absolute; left: 8px; right: 8px; bottom: 7px; z-index: 1; color: white;
}
/* 10/8, misurato sul mockup di allora: titolo a 0,53rem su una riga sola e
   ellissi. 3/9, punto 8 del concept: quell'ellissi mangiava meta' catalogo
   ("Monte Faltero...", "Parco Naziona..."), cioe' proprio i nomi lunghi che
   uno vorrebbe leggere. Con la card a 138px il nome sta su due righe intere e
   l'ellissi resta solo come ultima difesa sul comune, che e' un dettaglio. */
.wl-home-new-card .wl-home-new-copy strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font: 600 0.7rem/1.2 var(--wl-sans);
  text-shadow: 0 1px 6px rgba(4, 14, 25, 0.6);
  overflow: hidden;
}
.wl-home-new-card .wl-home-new-copy small {
  display: block; font: 400 0.58rem var(--wl-sans); opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Stessa taglia del comune qui sopra: su una card da 80px il punteggio e' la
   terza riga, non puo' pesare piu' delle due che la precedono. */
.wl-home-new-card .wl-rating,
.wl-home-new-card .wl-fame { font: 400 0.48rem var(--wl-sans); gap: 3px; }
.wl-home-new-card .wl-rating svg { width: 10px; height: 10px; }
.wl-home-new-card .wl-fame-meter { height: 8px; gap: 1px; }
.wl-home-new-card .wl-fame-meter i { width: 2px; }
.wl-home-new-card .wl-fame-meter i:nth-child(1) { height: 2.5px; }
.wl-home-new-card .wl-fame-meter i:nth-child(2) { height: 4px; }
.wl-home-new-card .wl-fame-meter i:nth-child(3) { height: 5.5px; }
.wl-home-new-card .wl-fame-meter i:nth-child(4) { height: 7px; }
.wl-home-new-card .wl-fame-meter i:nth-child(5) { height: 8px; }

/* Sfondo Home più denso del velo base condiviso (home.css:678-683): la Home
   del mockup è navy quasi piatto, non la vetro usata altrove. */
.wl-photo-bg--home::after {
  background: linear-gradient(180deg, rgba(8, 25, 42, 0.62) 0%, rgba(8, 25, 42, 0.86) 100%);
}

/* Qui vivevano quattro regole per il pulsante "Visto" e il testo delle tappe
   dentro #trip-days, quando quella timeline era fatta di .wl-step: cerchio
   assoluto da 32px in alto a destra (9/8) e padding-right di riserva su
   .wl-step-copy perche' un nome lungo non ci finisse sotto (10/8). Tolte
   l'11/8 col nuovo dettaglio itinerario: le tappe non sono piu' .wl-step ma
   .wl-trip-stop, il pulsante e' una colonna vera della card (niente
   posizionamento assoluto, quindi niente spazio da riservare a mano) e usa
   la ricetta condivisa di .wl-visited invece di una variante locale. Le
   regole erano rimaste senza nessun elemento da colpire. */

/* Vista elenco collezioni (9/8): la schermata servita dal "Vedi tutti" di
   "Itinerari a tema". Riusa le card .wl-home-coll-card della Home ma le
   dispone in colonna a larghezza piena invece che nella riga scorrevole:
   un'unica grammatica di card tra Home e questa vista. */
.wl-collections {
  min-height: 100dvh;
  padding-bottom: calc(84px + max(12px, env(safe-area-inset-bottom, 0px) - 14px));
}
.wl-collections-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 20px;
}
.wl-collections-list .wl-home-coll-card {
  flex: 0 0 auto;
  width: 100%;
}
.wl-collections-list .wl-home-coll-card img { height: 170px; }
/* Un cammino nella vista elenco tiene il suo formato panoramico anche a
   larghezza piena (10/9, richiesta utente): la card diventa un vero 16:9 e la
   foto lo riempie (object-fit: cover gia' ereditato). Senza questo override la
   regola della riga sopra fissava l'immagine a 170px e l'aspect-ratio 16/9
   della card veniva ignorato, con la foto tagliata e le card disallineate. */
.wl-collections-list .wl-home-coll-card.wl-home-coll-cammino {
  aspect-ratio: 16 / 9;
}
.wl-collections-list .wl-home-coll-card.wl-home-coll-cammino img { height: 100%; }
/* Qui la card e' larga tutto lo schermo, non i 124px del carosello della Home:
   le misure compatte decise per quel formato (titolo 0.66rem, sottotitolo
   nascosto, chip senza pillola) renderebbero questa pagina illeggibile.
   Si torna alle proporzioni piene, che sono quelle che questa vista aveva
   prima del riallineamento della Home al mockup. */
.wl-collections-list .wl-home-coll-copy { left: 12px; right: 12px; bottom: 10px; }
.wl-collections-list .wl-home-coll-copy strong {
  font: 700 1rem var(--wl-serif);
  white-space: normal; overflow: visible;
}
.wl-collections-list .wl-home-coll-copy small {
  display: block; font: 400 0.66rem var(--wl-sans); opacity: 0.88;
}
.wl-collections-list .wl-home-coll-meta {
  flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 0.62rem;
}
.wl-collections-list .wl-home-coll-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(5, 28, 50, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
/* Nella vista elenco la foto e' quasi il doppio (170px contro 92): il badge
   cresce con lei, altrimenti a 24px sembrerebbe un francobollo dimenticato
   sull'angolo. */

/* ============================================================
   Vista del singolo cammino (14/8, regola dei cammini)
   ------------------------------------------------------------
   Qui non nasce nessun materiale nuovo, ed e' voluto: la vista riusa le
   classi del viaggio salvato (.wl-trip-body, .wl-trip-map-card,
   .wl-wiz-stats, .wl-trip-tl) e della lista Esplora (.wl-f-list,
   .wl-f-card.wl-xp-card). Restano solo le poche geometrie che quelle
   famiglie non possono indovinare da sole. Il vetro arriva tutto dalla
   sezione "Il vetro delle card" in cima al foglio.
   ============================================================ */
/* Fascia dei cammini in cima ai risultati di Esplora: la card e' la stessa
   della Home, ma qui deve essere larga quanto la lista invece dei 124px del
   carosello, come gia' fa la vista elenco (.wl-collections-list). */
.wl-xp-cammini { display: grid; gap: 10px; margin-bottom: 14px; }
.wl-xp-cammini-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font: 700 0.7rem var(--wl-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wl-ice);
}
.wl-xp-cammini-head svg { width: var(--wl-ic-xs); height: var(--wl-ic-xs); }
.wl-xp-cammini .wl-home-coll-card { flex: 0 0 auto; width: 100%; }
.wl-xp-cammini .wl-home-coll-card img { height: 128px; }
.wl-xp-cammini .wl-home-coll-copy { left: 12px; right: 12px; bottom: 10px; }
.wl-xp-cammini .wl-home-coll-copy strong { font: 700 0.94rem var(--wl-serif); white-space: normal; overflow: visible; }
.wl-xp-cammini .wl-home-coll-copy small { display: block; font: 400 0.64rem var(--wl-sans); opacity: 0.88; }
.wl-xp-cammini .wl-home-coll-meta { flex-wrap: wrap; gap: 6px; margin-top: 7px; font-size: 0.6rem; }
.wl-xp-cammini .wl-home-coll-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(5, 28, 50, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* 20/8 (richiesta utente): tolti da qui il banner "tu sei qui" (.wl-xp-here) e
   la pastiglia "Più vicino" (.wl-xp-nearest) sulla prima card. Con la
   posizione attiva l'elenco è già ordinato per distanza e ogni card porta i
   suoi km: erano due modi di ridire la stessa cosa. L'angolo alto della card
   resta alla coccarda qui sotto. */
.wl-f-card.wl-xp-card { position: relative; }

/* Coccarda "Scelto" sulle card (20/8): pastiglia assoluta nell'angolo alto a
   sinistra, in bronzo. Usata da card Esplora, Preferiti, Home ("Scelti da
   noi", "Vicino a te") e dal teaser: un solo stile, tutte le superfici.
   20/8 (richiesta utente): sulle card e' il solo glifo, senza la parola
   "Scelto" accanto — quindi un tondo, non piu' una pillola con del testo. La
   frase per esteso vive nel chip della scheda e, per chi non vede l'icona,
   nell'aria-label. Il glifo cresce a 14px: da solo deve reggere la lettura
   senza la stampella della parola. */
.wl-badge-scelto {
  position: absolute;
  top: 8px;
  left: var(--wl-badge-scelto-left, 8px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(185, 138, 82, 0.92);
  color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.wl-badge-scelto svg { width: 14px; height: 14px; }
/* La card di Preferiti ha in piu' la maniglia del riordino nella prima
   colonna, e il tondo le finiva addosso: da pillola bassa e larga passava
   sopra il grip di 3px, cioe' quanto basta perche' il dito prenda il badge
   invece della maniglia e il riordino non parta. Qui la coccarda scavalca la
   colonna della maniglia e va sull'angolo della foto, dove sta anche in
   Esplora: 1 di bordo + 12 di padding + 16 di grip + 10 di gap = 39, meno i
   4 di sporgenza a sinistra della foto. */
#favorites-list .wl-f-card { --wl-badge-scelto-left: 35px; }

.wl-cammino { min-height: 100dvh; padding-bottom: calc(96px + max(12px, env(safe-area-inset-bottom, 0px) - 14px)); }
.wl-cammino-body { gap: 18px; }
#cammino-sheet .wl-h2 { margin: 4px 0 10px; }
/* La riga della giornata non e' una tappa cliccabile del binario: e' una
   tratta dichiarata dalla fonte, quindi niente cursore a mano e niente stato
   :active. */
.wl-cammino-stage { cursor: default; }
.wl-cammino-stage .wl-trip-return-copy small { color: rgba(255, 255, 255, 0.72); }
/* Il medaglione della giornata porta l'escursionista al posto di un numero
   (15/8): i numeri sul binario sono quelli dei borghi, gli stessi dei pin
   sulla mappa, e due numerazioni diverse sulla stessa colonna si leggerebbero
   male. Stessa taglia e stesso vestito degli altri medaglioni, cambia solo
   cosa c'e' dentro. */
.wl-cammino-day svg { width: var(--wl-ic-md); height: var(--wl-ic-md); color: var(--wl-ice); }
/* Il binario del cammino e' quello degli itinerari in auto, comprese le
   azioni sulla card (visitato, naviga): nessuna geometria propria, eredita
   .wl-trip-tl e .wl-trip-stop.
   Unica aggiunta: l'attacco al blocco informativo qui sopra (15/8, richiesta
   utente: "la linea temporale deve partire dalle informazioni in alto").
   Stesso meccanismo del viaggio salvato: un tratto CONTINUO a se' (::after),
   non il prolungamento del binario tratteggiato, perche' non e' strada da
   percorrere ma la giuntura fra il riepilogo e il cammino. */
.wl-cammino-tl > .wl-trip-tl-row:first-child::after {
  content: "";
  position: absolute;
  top: -18px;
  left: calc(var(--wl-tl-rail) / 2 - 1px);
  height: calc(50% + 18px);
  width: 2px;
  background: rgba(255, 255, 255, 0.4);
}
.wl-cammino-actions {
  display: grid;
  gap: 10px;
  margin: 18px 0 8px;
  justify-items: stretch;
}
.wl-cammino-actions .wl-d-link { margin: 0; justify-content: center; }
.wl-cammino-actions .wl-wiz-hint { margin: 0; text-align: center; }

/* Modale meteo: stessa ricetta glass dei modali esistenti (.wl-modal-glass). */
#weather-backdrop .wl-modal .wl-field { margin: 14px 0 4px; }
#weather-backdrop .wl-modal-intro { margin-bottom: 4px; }

/* ============================================================
   Vista Esplora (ricostruita 16/7) — sola consultazione. Colonna a
   tutta altezza, la pagina non scorre mai: solo la lista risultati
   scorre internamente (regola di progetto, centinaia di luoghi).
   ============================================================ */
.wl-explore {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wl-explore .wl-f-head { flex: 0 0 auto; }
.wl-xp-regions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* padding-top a 0 (27/7): il gap verso l'header lo dà già .wl-f-head
     (12px), standardizzato con le altre viste. */
  padding: 0 20px 14px;
}
.wl-xp-region {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 60px;
  height: 60px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  /* Vetro scuro (18/7, segnalazione utente: il vetro chiaro 8% spariva su
     foto luminose come un cielo) — stessa ricetta dei riquadri scuri. */
  background: rgba(5, 28, 50, 0.4);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  color: white;
  cursor: pointer;
}
.wl-xp-region strong { font-size: 0.6rem; font-weight: 600; text-align: center; line-height: 1.1; }
.wl-xp-region .wl-shape { width: 26px; height: 26px; color: var(--wl-ice); }
.wl-xp-region .wl-shape-letter {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--wl-ice);
}
.wl-xp-region.active .wl-shape,
.wl-xp-region.active .wl-shape-letter { color: white; }
.wl-xp-region.active {
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  border-color: rgba(226, 101, 43, 0.45);
  color: white;
}
/* Filtro per particolarità: FAI, Borghi più belli, UNESCO e Oasi WWF,
   associati alla riga regioni sopra. Il filtro è indipendente e combinabile
   con regione e categoria, perché rappresenta un riconoscimento verificato
   e non la categoria primaria del luogo. */
.wl-xp-distinctions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 2px 20px 14px;
}
/* Logo a sinistra, etichetta a destra (11/8, richiesta utente: "rendi
   pillole diminuendole in altezza, ... con logo e a dx testo"): pillola
   orizzontale bassa, non più la colonna icona-sopra/testo-sotto condivisa
   con le tessere regione. */
.wl-xp-dist {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  /* Vetro scuro (18/7, stessa segnalazione delle tessere regione sopra). */
  background: rgba(5, 28, 50, 0.4);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  color: white;
  cursor: pointer;
}
.wl-xp-dist img { height: 20px; width: auto; border-radius: 4px; }
.wl-xp-dist svg { width: 20px; height: 20px; color: var(--wl-ice); }
.wl-xp-dist span { font-size: 0.66rem; font-weight: 600; color: var(--wl-ice); white-space: nowrap; }
.wl-xp-dist.active {
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  border-color: rgba(226, 101, 43, 0.45);
}
.wl-xp-dist.active span { color: white; }
.wl-xp-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.wl-xp-body .wl-f-listhead { flex: 0 0 auto; }
/* Ricerca + dropdown categorie (21/7): un'unica riga al posto della vecchia
   fila di chip tipologia, per fare posto alla ricerca senza aggiungere una
   riga alla pagina, già affollata di filtri (regione, particolarità). */
.wl-xp-searchrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.wl-xp-search { flex: 1; width: 100%; margin-bottom: 0; }
.wl-xp-search input { height: 40px; }
/* La X nativa di <input type=search> (WebKit/Blink) verrebbe disegnata
   sopra la nostra: nascosta per evitare la doppia icona. */
.wl-xp-search input::-webkit-search-cancel-button,
.wl-xp-search input::-webkit-search-decoration { appearance: none; -webkit-appearance: none; display: none; }
/* Pulsante "azzera" accanto all'input: appare solo quando c'è testo
   (home.js toglie/mette .hidden). La X nativa di <input type=search> è
   piccola e sparisce appena si lascia il campo; qui resta visibile e
   tap-friendly. Z-index sopra l'icona ricerca, per un tocco preciso. */
.wl-xp-clear {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wl-xp-clear:hover, .wl-xp-clear:focus-visible { background: rgba(255, 255, 255, 0.32); color: white; outline: none; }
.wl-xp-clear:active { transform: scale(0.92); }
.wl-xp-clear svg { width: 14px; height: 14px; pointer-events: none; }
/* Combo box categoria (11/8, richiesta utente: "la search bar larga a
   tutta pagina, il filtro dentro"): non più una tessera .wl-tag accanto
   alla ricerca, ma un trigger integrato nel campo stesso, con un
   separatore verticale sottile a marcare i due ruoli (testo libero |
   categoria) senza spezzare la barra in due elementi. */
.wl-xp-type-combo {
  position: relative;
  flex: 0 0 auto;
  margin-right: -13px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.wl-xp-type-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 13px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}
.wl-xp-type-trigger svg:first-child { width: 20px; height: 20px; }
.wl-xp-type-trigger.active { color: var(--wl-accent); }
.wl-xp-type-chevron { width: 15px !important; height: 15px !important; transition: transform 0.15s ease; }
.wl-xp-type-trigger[aria-expanded="true"] .wl-xp-type-chevron { transform: rotate(180deg); }
.wl-xp-type-list {
  position: absolute;
  top: calc(100% + 6px);
  left: auto;
  right: 0;
  min-width: 180px;
  max-height: min(320px, 60dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 60;
}
.wl-xp-type-list button.active {
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  color: white;
}
.wl-xp-type-list button.active svg { color: white; }
.wl-xp-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  /* Con un solo risultato lo spazio libero del grid si distribuiva su
     quell'unica riga (align-content:normal si comporta come stretch),
     gonfiando la card fino a riempire la lista e rivelando lo sfondo
     sotto (27/7, segnalazione utente). */
  align-content: start;
  gap: 10px;
  padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}
/* Niente maniglia di trascinamento in Esplora (a differenza dei Preferiti):
   3 colonne invece di 4, foto/testo/cuore. */
.wl-xp-card { grid-template-columns: 60px 1fr auto; }
/* Stesso motivo per i Visitati (28/7): niente maniglia (non si riordinano),
   card a 3 figli (foto/testo/spunta) invece dei 4-5 di Preferiti/Esplora.
   Senza questa regola la card eredita le 4 colonne di .wl-f-card pensate
   per la maniglia in prima posizione, e foto/testo/bottone finiscono nelle
   colonne sbagliate (bug reale, segnalato dall'utente). */
#trip-visited-list .wl-f-card { grid-template-columns: 60px 1fr auto; }
/* Bug reale (16/7, segnalato dall'utente): centinaia di card, ognuna con
   backdrop-filter, fanno crashare il compositor scorrendo su mobile,
   troppi livelli di blur sovrapposti da ricalcolare a ogni frame. In una
   lista di questa scala il blur non è sostenibile per card: da qui la
   scelta (28/7, estesa poi a tutte le liste) di spegnerlo del tutto nella
   base .wl-f-card, a favore dello sfondo .wl-photo-bg già sfocato una
   volta sola. .wl-xp-card non ha più nulla da aggiungere, rimossa. */
.wl-empty { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; text-align: center; padding: 24px 0; }

/* ============================================================
   Menu profilo nella tab bar (16/7): un solo posto in tutta l'app,
   si apre verso l'alto perché il suo bottone è ora in fondo.
   ============================================================ */
.wl-menu.wl-tab-menu {
  position: fixed;
  top: auto;
  bottom: 86px;
  right: 24px;
  left: auto;
  /* Vetro scuro come il resto del progetto, non il bianco di base di
     .wl-menu (richiesta utente 16/7): la barra da cui si apre è in vetro
     navy scuro (dal 12/8 e' l'unico materiale della barra, la vecchia
     variante chiara non era piu' raggiungibile da nessuna vista).
     27/7: stesso blur e stesso bordo della bottom bar (--wl-glass-blur),
     come tutte le altre tendine. Il velo di fondo resta pero' piu' denso
     di quello della barra (0.68 contro 0.28): un menu e' una lista di
     voci di testo che compare sopra contenuto arbitrario (foto, elenchi,
     form), mentre la barra e' cornice fissa sopra fondi prevedibili.
     Abbassarlo qui rifarebbe il problema gia' visto e documentato su
     .wl-wiz-variant-list, dove il pannello spariva nel velo scuro. */
  background: var(--wl-glass-menu-bg);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid var(--wl-glass-border);
}
@supports not (backdrop-filter: blur(1px)) {
  .wl-menu.wl-tab-menu { background: rgba(8, 25, 42, 0.94); }
}
.wl-tab-menu button { color: white; }
.wl-tab-menu button:hover { background: rgba(255, 255, 255, 0.12); }
.wl-menu-level {
  margin: 0 12px 4px;
  padding: 12px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.wl-menu-level-badge {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  border-radius: 999px;
  background: white;
  overflow: hidden;
}
.wl-menu-level-badge .wl-level-badge-glyph {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.wl-menu-level-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: white;
}
.wl-menu-level-points {
  margin-left: auto;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.68);
}
/* Varianti predisposte per i glifi badge utente. */
.wl-menu-level-badge--wayfarer {}
.wl-menu-level-badge--tracker {}
.wl-menu-level-badge--explorer {}
.wl-menu-level-badge--waymark {}
.wl-menu-level-badge--cartographer {}
.wl-menu-level-badge--guardian {}
.wl-menu-level-badge--pathfinder {}
.wl-menu-level-badge--guide {}
.wl-menu-level-badge--ambassador {}
.wl-menu-level-badge--legend {}
/* Firma + build in fondo al menu profilo (27/7, richiesta utente): deve
   essere leggibile ma restare in secondo piano rispetto alle voci del
   menu, quindi testo piccolo e opacità bassa; il filo di separazione
   sopra riprende quello già usato altrove nel progetto. */
.wl-menu-credit {
  margin: 6px 0 0;
  padding: 10px 12px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.66rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}
.wl-menu-credit-build { font-weight: 700; letter-spacing: 0.02em; }
/* Unico elemento toccabile della riga: colore ghiaccio come gli altri
   link del progetto, area di tocco allargata in verticale senza spostare
   il testo (padding + margine negativo). */
.wl-menu-credit-ig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin: 2px 0 -4px;
  padding: 4px 0;
  color: var(--wl-ice);
  text-decoration: none;
}
.wl-menu-credit-ig svg { width: 14px; height: 14px; }
.wl-menu-credit-ig:hover { color: white; }

.wl-wiz-map-tip {
  background: var(--wl-navy);
  color: white;
  border: none;
  font: 700 0.7rem var(--wl-sans);
  padding: 1px 6px;
  border-radius: 999px;
}
/* Pin di una tappa già visitata, sulla mappa d'insieme di un gruppo (26/7,
   richiesta utente): stesso spegnimento in grigio della card nell'elenco. */
.wl-wiz-map-tip.wl-step-visited {
  background: rgba(255, 255, 255, 0.45);
  color: rgba(5, 28, 50, 0.75);
}

/* Toast (16/7, portato da styles.css con la rimozione dell'esploratore
   classico): #toast vive fuori da qualunque vista scoped (sibling a fine
   body), quindi valori letterali invece di var(--wl-*): quelle variabili
   sono scoped su una lista fissa di contenitori, mai su :root (vedi in
   cima al file). 13/8: .toast e' stata aggiunta a quell'elenco per poter
   leggere il filtro condiviso del vetro. Il resto resta letterale.
   21/7, richiesta utente: spostato a destra e sopra la tab bar (prima in
   basso al centro), stesso vetro scuro sfumato del resto del progetto
   (.wl-menu scuro, i chip di Esplora) invece di un riquadro navy pieno —
   "unifichiamo aspetto", blur aumentato. Entra scivolando da fuori
   schermo a destra verso la sua posizione (mai da sotto come prima). */
.toast {
  position: fixed;
  right: 20px;
  left: auto;
  bottom: 92px; /* sopra la tab bar: 14px di margine + 62px di altezza + respiro */
  z-index: 2000;
  max-width: 260px;
  transform: translateX(140%);
  padding: 12px 18px;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  color: white;
  /* 14/8: stessa migrazione del modale qui accanto. Il filtro era gia' quello
     condiviso dal 13/8, velo e filo no: tinta piatta e bianco continuo a 0.3.
     Il velo resta della stessa densita' di prima (media 0.68), cambia il
     meccanismo. */
  background: linear-gradient(180deg, rgba(9, 32, 56, 0.62) 0%, rgba(4, 20, 38, 0.74) 100%) padding-box,
              var(--wl-glass-rim) border-box;
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid transparent;
  /* Il toast vive fuori da qualunque vista (sibling a fine body), quindi non
     eredita il font di nessuna: senza questa riga ricadeva sul serif di
     default del browser e usciva in Times New Roman, unico pezzo di
     interfaccia non in Nunito. Non si vedeva nei controlli: si vede solo
     guardandolo. */
  font-family: var(--wl-sans);
  font-size: 0.78rem;
  box-shadow: var(--wl-glass-edge-out), var(--wl-glass-lift);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.toast.show { opacity: 1; transform: translateX(0); }

/* Libreria itinerari multipli: il badge appartiene alla sezione Home,
   mentre lista e dettaglio condividono la vista #trip. */
.wl-home-trip-card { position: relative; }
/* 27/7, richiesta utente: badge "a cavallo" dell'angolo in alto a destra
   della card, come nei pattern usuali (notifica sopra un'icona), non più
   dentro il bordo. Il centro del badge coincide con l'angolo esatto della
   card (top:0 right:0 + translate 50%/-50%), meta' dentro e meta' fuori. */
.wl-home-trip-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: var(--wl-accent);
  color: white;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(5, 28, 50, 0.35);
}
.wl-trip-head-actions { display: flex; align-items: center; gap: 8px; }
.wl-trip-head-actions.hidden { display: none; }
.wl-trip-delete { color: white; }
.wl-trip-list { display: grid; gap: 12px; }
.wl-trip-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  border-radius: 18px;
  /* Materiale: sezione "Il vetro delle card" in cima al foglio, variante
     appoggiata (lo sfondo di questa vista e' gia' quello sfocato di Esplora).
     13/8: qui c'era la stessa tinta arancio delle liste, ora condivisa da li'. */
}
.wl-trip-card-open {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: white;
  text-align: left;
}
.wl-trip-card-open img { width: 92px; height: 92px; object-fit: cover; }
.wl-trip-card-copy { display: grid; gap: 5px; min-width: 0; padding: 12px; }
.wl-trip-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.94rem; }
.wl-trip-card-copy small { color: rgba(255, 255, 255, 0.74); font-size: 0.72rem; line-height: 1.3; }
.wl-trip-card-actions { display: grid; align-content: center; gap: 7px; padding: 8px; }
.wl-trip-card-actions .wl-icon-btn { width: 36px; height: 36px; }
.wl-trip-card-actions .wl-icon-btn svg { width: var(--wl-ic-md); height: var(--wl-ic-md); }
.wl-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.wl-modal-actions button {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  padding: 10px 14px;
  font: 700 0.82rem var(--wl-sans);
  cursor: pointer;
}
.wl-modal-cancel {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}
.wl-modal-danger {
  background: #a83f34;
  border-color: rgba(255, 180, 160, 0.72) !important;
  color: white;
}

/* ============================================================
   Contributi (26/7): segnalazioni degli utenti registrati + classifica.
   Stessa struttura a colonna del wizard (solo il corpo scorre, tab bar mai
   coperta) e stessa ricetta vetro di .wl-tag/.wl-icon-btn — nessuna nuova
   resa, solo composizione di classi già estese qui sopra a .wl-contribute.
   ============================================================ */
.wl-contribute {
  height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wl-contribute-toolbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Margine sotto 12px, non più 6px (27/7): stesso gap standard di tutte
     le altre viste sotto l'header. */
  margin: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)) 16px 12px;
  padding: 0 4px;
}
.wl-contribute-toolbar .wl-brand { grid-column: 2; justify-self: center; color: var(--wl-cream); }
.wl-contribute-toolbar .wl-brand .wl-mark { width: var(--wl-logo-mark-w); height: var(--wl-logo-mark-h); color: var(--wl-cream); }
.wl-contribute-toolbar .wl-brand .wl-wordmark-header { width: var(--wl-logo-word-w); height: var(--wl-logo-word-h); color: var(--wl-cream); }
.wl-contrib-back { grid-column: 1; }
.wl-contrib-back svg { transform: rotate(90deg); }

/* Due combo box affiancati su una riga sola (27/7: sostituiscono due righe
   di pillole — sezione Segnala/I miei contributi/Classifica e tipo Nuovo
   luogo/Posizione/Dati/Foto). Stesso pattern del combo "Filtra" nel
   risultato del wizard (.wl-wiz-variant-combo): trigger .wl-tag con
   icona+testo, pannello .wl-menu a comparsa sotto. */
.wl-contrib-selectors { flex: 0 0 auto; display: flex; gap: 8px; padding: 0 20px; margin-bottom: 10px; }
/* Stesso bug già noto in questo progetto (vedi .wl-wizard .wl-x-toolbar e
   #favorites .wl-f-head più sopra): ".wl-contribute > *:not(.wl-photo-bg)"
   mette ENTRAMBI .wl-contrib-selectors e .wl-contrib-body a z-index:1 — a
   parità vince l'ultimo nel DOM (.wl-contrib-body, che segue), e il pannello
   dei combo, che deve debordare sotto la riga, finiva sotto ai campi del
   form invece che sopra. Stessa specificità della regola generica (due
   classi) ma dichiarata dopo: vince lei. */
.wl-contribute .wl-contrib-selectors { z-index: 5; }
.wl-contrib-combo { position: relative; flex: 1; min-width: 0; }
.wl-contrib-combo.hidden { display: none; }
.wl-contrib-combo-trigger { width: 100%; justify-content: flex-start; cursor: pointer; }
.wl-contrib-combo-trigger span {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-contrib-combo-chevron { width: 15px !important; height: 15px !important; flex: 0 0 auto; transition: transform 0.15s ease; }
.wl-contrib-combo-trigger[aria-expanded="true"] .wl-contrib-combo-chevron { transform: rotate(180deg); }
.wl-contrib-combo-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; }
/* Stessa ricetta di .wl-wizard .wl-menu: pannello quasi opaco (non il
   vetro chiaro di base), altrimenti illeggibile sul velo scuro della vista. */
.wl-contribute .wl-menu {
  background: var(--wl-glass-menu-bg);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
@supports not (backdrop-filter: blur(1px)) {
  .wl-contribute .wl-menu { background: rgba(8, 25, 42, 0.94); }
}
.wl-contribute .wl-menu button { color: white; }
.wl-contribute .wl-menu button:hover { background: rgba(255, 255, 255, 0.12); }
.wl-contrib-combo-list button.active {
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  color: white;
}
.wl-contrib-combo-list button.active svg { color: white; opacity: 1; }

.wl-contrib-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 27/7, segnalazione utente: l'ultimo campo (nota) finiva nascosto sotto
     la tab bar/pulsante centrale flottante. Stesso margine di sicurezza già
     usato da .wl-wiz-body per lo stesso motivo (96px), qui più il notch. */
  padding: 4px 20px calc(84px + max(12px, env(safe-area-inset-bottom, 0px) - 14px));
}
.wl-contrib-field { margin-bottom: 14px; }
.wl-contrib-coords { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wl-contrib-label {
  display: block;
  margin: 0 0 6px;
  font: 600 0.76rem var(--wl-sans);
  color: rgba(255, 255, 255, 0.75);
}
.wl-contrib-note { margin-top: 4px; }

/* select/textarea dentro .wl-field: la regola condivisa in .wl-field
   styla solo <input> (nato per il form di accesso), qui serve lo stesso
   trattamento anche per gli altri due controlli. */
.wl-contrib-field select,
.wl-contribute .wl-field select {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 42px;
  border: 0;
  background: none;
  box-shadow: none;
  color: white;
  font: 400 16px/1.3 var(--wl-sans);
}
.wl-contrib-field select option,
.wl-contribute .wl-field select option { color: var(--wl-ink); }
.wl-contrib-field textarea,
.wl-contribute .wl-field textarea {
  flex: 1;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  background: none;
  box-shadow: none;
  resize: vertical;
  font: 400 15px/1.4 var(--wl-sans);
  color: white;
  caret-color: white;
}
/* Stesso perimetro azzurro indesiderato già neutralizzato su <input>
   (vedi commento più sopra) — <select>/<textarea> ne erano rimasti privi. */
.wl-contrib-field select:focus,
.wl-contribute .wl-field select:focus,
.wl-contrib-field textarea:focus,
.wl-contribute .wl-field textarea:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}
.wl-contrib-field textarea::placeholder,
.wl-contribute .wl-field textarea::placeholder { color: rgba(255, 255, 255, 0.75); }

.wl-contrib-place-results { display: flex; flex-direction: column; gap: 6px; margin: -6px 0 10px; }
.wl-contrib-place-results button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--wl-r-sm);
  background: rgba(255, 255, 255, 0.06);
  color: white;
  text-align: left;
  cursor: pointer;
}
.wl-contrib-place-results button strong { font: 600 0.86rem var(--wl-sans); }
.wl-contrib-place-results button small { color: rgba(255, 255, 255, 0.65); font-size: 0.72rem; }

/* "Mi trovo qui" (GPS) — stessa lettura di .wl-gps-btn (icona wl-ic-current)
   ma pillola con etichetta invece che cerchio icon-only: qui è un'azione
   esplicita dentro un form, non un interruttore persistente come in Home. */
.wl-contrib-gps-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font: 600 0.78rem var(--wl-sans);
  cursor: pointer;
}
.wl-contrib-gps-btn svg { width: 18px; height: 18px; color: var(--wl-ice); }

.wl-contrib-qr-hint {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  line-height: 1.45;
}
.wl-contrib-photo-picker {
  display: grid;
  place-items: center;
  height: 160px;
  margin-bottom: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: var(--wl-r-md);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font: 600 0.8rem var(--wl-sans);
  overflow: hidden;
  cursor: pointer;
}
.wl-contrib-photo-picker img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.wl-contrib-message {
  min-height: 18px;
  margin: 2px 0 12px;
  font-size: 0.78rem;
  color: #ffb4a8;
}

.wl-contrib-empty { padding: 28px 4px; color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; text-align: center; }
.wl-contrib-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--wl-r-md);
  background: rgba(255, 255, 255, 0.06);
}
.wl-contrib-item-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wl-contrib-item-main strong {
  font: 600 0.86rem var(--wl-sans);
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-contrib-item-main small { color: rgba(255, 255, 255, 0.65); font-size: 0.72rem; }
.wl-contrib-points { color: #a9e6c6 !important; }
.wl-contrib-status {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font: 700 0.62rem var(--wl-sans);
  white-space: nowrap;
}
.wl-contrib-status-pending { background: rgba(226, 180, 80, 0.25); color: #f0d29a; }
.wl-contrib-status-approved { background: rgba(120, 200, 160, 0.25); color: #a9e6c6; }
.wl-contrib-status-rejected { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.7); }

.wl-contrib-levels-hint { margin: 0 0 12px; color: rgba(255, 255, 255, 0.7); font-size: 0.82rem; }
.wl-contrib-rank-row {
  display: grid;
  grid-template-columns: 30px 34px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--wl-r-md);
  background: rgba(255, 255, 255, 0.06);
}
.wl-contrib-rank-row.is-mine {
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.5), rgba(5, 28, 50, 0.4));
  border-color: rgba(226, 101, 43, 0.45);
}
.wl-contrib-rank-num { font: 700 0.78rem var(--wl-sans); color: rgba(255, 255, 255, 0.7); }
.wl-contrib-rank-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: white;
  font-size: 1.05rem;
  object-fit: cover;
}
.wl-contrib-rank-name {
  font: 600 0.86rem var(--wl-sans);
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-contrib-rank-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.wl-contrib-rank-points { font: 700 0.92rem var(--wl-sans); color: white; }

/* Glifi dei livelli in classifica: gli SVG sono neri su fondo trasparente
   (potrace ha vettorizzato solo il tratto), quindi vanno invertiti sul
   pannello scuro. Filter invert è più semplice di riscrivere gli SVG con
   currentColor perché sono già tanti e statici. */
.wl-contrib-badge { display: inline-block; filter: invert(1); vertical-align: middle; }
.wl-contrib-rank-badge { flex: 0 0 auto; }

/* Card livello attuale sopra "I miei contributi": stesso vetro delle rank
   row, badge grande a sinistra e barra di progresso verso il prossimo tier. */
.wl-contrib-level-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: var(--wl-r-md);
  /* Materiale: sezione "Il vetro delle card" in cima al foglio. */
}
.wl-contrib-level-badge { width: 56px; height: 56px; }
.wl-contrib-level-info { display: grid; gap: 4px; min-width: 0; }
.wl-contrib-level-title { font: 700 0.98rem var(--wl-sans); color: white; }
.wl-contrib-level-points { font: 600 0.78rem var(--wl-sans); color: rgba(255, 255, 255, 0.8); }
.wl-contrib-level-progress {
  height: 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.wl-contrib-level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f0a37a, #e2652b);
  border-radius: inherit;
  transition: width .35s ease;
}
.wl-contrib-level-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.72);
}
.wl-contrib-level-next-badge { width: 22px; height: 22px; }

/* CTA "segnala una correzione/foto" nella scheda luogo: .wl-d-sheet è
   vetro scuro (rgba(5,28,50,.22), vedi riga ~719), non il vetro chiaro di
   .wl-tag di base — stessa ricetta pillola ma in variante scura, come
   .wl-favorites/.wl-explore .wl-tag qui sopra. */
.wl-d-contribute {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  gap: 8px;
  margin: 0;
}
/* 7/8: pulsanti dentro la mappa, vetro più trasparente del menu profilo
   (richiesta utente): stesso blur e bordo del progetto, ma velo ridotto
   rispetto a --wl-glass-menu-bg (0.62→0.8) così la mappa si intravede. */
.wl-d-contribute button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--wl-glass-border);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 62, 98, 0.34) 0%, rgba(5, 28, 50, 0.46) 100%);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  color: white;
  font: 600 0.74rem var(--wl-sans);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(14, 42, 71, 0.4);
}
.wl-d-contribute svg { width: 17px; height: 17px; color: var(--wl-ice); }
/* 6/8, dropdown "Segnala": trigger pillola identico agli altri bottoni. */
.wl-d-contrib-combo { position: relative; flex: 0 0 auto; }
.wl-d-contrib-chevron { width: 15px !important; height: 15px !important; transition: transform 0.15s ease; }
.wl-d-contrib-trigger[aria-expanded="true"] .wl-d-contrib-chevron { transform: rotate(180deg); }
.wl-d-contrib-list {
  position: absolute;
  /* 7/8: si apre verso l'alto, dentro la mappa, così la seconda voce resta
     interamente visibile sopra la fascia dei pulsanti. La classe base
     .wl-menu imposta top/right: li azzero per non far stirare il menu sia
     in altezza (top+bottom insieme) sia in larghezza (left+right insieme). */
  top: auto;
  right: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  z-index: 80;
}
/* 7/8: niente box del contenitore: solo le voci in vetro, come gli altri
   menu del progetto. Selettore con .wl-menu per battere sia la base
   .wl-menu sia la variante scura #detail .wl-menu. */
#detail .wl-d-contrib-list.wl-menu {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
/* 7/8: le voci diventano pillole compatte in vetro, proporzionate al testo
   e non più larghe a forza (la base .wl-menu button è display:flex;
   width:100% e le stirava lunghe quanto il min-width del contenitore).
   Stessa trasparenza "ridotta" del trigger. 13/8: il blur piu' leggero
   (6px) che aveva qui e' rientrato nel filtro condiviso del progetto. */
#detail .wl-d-contrib-list button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin: 0 auto 8px;
  padding: 8px 14px;
  border: 1px solid var(--wl-glass-border);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 62, 98, 0.3) 0%, rgba(5, 28, 50, 0.42) 100%);
  -webkit-backdrop-filter: var(--wl-glass-blur);
  backdrop-filter: var(--wl-glass-blur);
  white-space: nowrap;
}
#detail .wl-d-contrib-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#detail .wl-d-contrib-list button:last-child { margin-bottom: 0; }
#detail .wl-menu {
  background: rgba(8, 25, 42, 0.94);
  border-color: rgba(255, 255, 255, 0.16);
}
#detail .wl-menu button { color: white; }
#detail .wl-menu button:hover { background: rgba(255, 255, 255, 0.12); }
#detail .wl-menu button svg { color: var(--wl-ice); opacity: 1; }


/* Split button contributi nella mappa: stessa capsula dei navigatori, con glifi e testi. */
.wl-contrib-split { --wl-split-btn: 42px; max-width: calc(100% - 24px); padding-right: 2px; }
.wl-contrib-split-primary, .wl-contrib-split-alt { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: var(--wl-split-btn); padding: 0 12px; border: 0; background: none; color: inherit; font: 600 0.74rem var(--wl-sans); cursor: pointer; white-space: nowrap; }
.wl-contrib-split-primary { padding-left: 14px; }
.wl-contrib-split-alt { padding: 0 10px; }
.wl-contrib-split svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--wl-ice); }
.wl-contrib-split .wl-split-alts { max-width: 0; }
.wl-contrib-split.wl-split[data-split-alts="2"].is-open .wl-split-alts { max-width: 178px; }
.wl-contrib-split-primary:active, .wl-contrib-split-alt:active { transform: scale(0.96); }
@media (max-width: 390px) { .wl-contrib-split-primary { padding-right: 10px; } .wl-contrib-split-alt { padding: 0 8px; font-size: 0.7rem; } .wl-contrib-split.wl-split[data-split-alts="2"].is-open .wl-split-alts { max-width: 157px; } }
#detail .wl-contrib-split .wl-contrib-split-primary,
#detail .wl-contrib-split .wl-contrib-split-alt {
  height: var(--wl-split-btn);
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
#detail .wl-contrib-split .wl-contrib-split-primary { padding-left: 14px; }
#detail .wl-contrib-split .wl-contrib-split-alt { padding-left: 10px; padding-right: 10px; }
#detail .wl-contrib-split { gap: 0; }
#detail .wl-contrib-split .wl-split-toggle {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
/* ============================================================
   Pull-to-refresh (24/8, richiesta utente): l'indicatore vive fuori da
   tutte le viste, appeso al body (pull-refresh.js decide da solo se il
   gesto è ammesso, la vista non deve saperne niente). Un solo cerchio
   stile iOS/Android, familiare e senza bisogno di spiegazione.
   ============================================================ */
.wl-pull-indicator {
  position: fixed;
  left: 50%;
  top: max(10px, env(safe-area-inset-top, 0px));
  transform: translate(-50%, -44px);
  opacity: 0;
  z-index: 400;
  pointer-events: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(5, 28, 50, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: var(--wl-glass-blur, blur(10px));
  backdrop-filter: var(--wl-glass-blur, blur(10px));
}
.wl-pull-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}
.wl-pull-indicator.wl-pull-ready .wl-pull-spinner { border-top-color: var(--wl-accent, #e2652b); }
.wl-pull-indicator.wl-pull-spinning .wl-pull-spinner {
  animation: wl-pull-spin 0.7s linear infinite;
}
@keyframes wl-pull-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Ospite: lucchetti e foglio "serve un account" (4/9).
   Il recinto vive in guest-gate.js; qui c'è solo come si vede. Regola
   scelta con l'utente: la funzione riservata SI VEDE, con un lucchetto,
   e non sparisce. Nascosta non darebbe a chi guarda nessun motivo per
   registrarsi, e farebbe sembrare l'app più piccola di quello che è.
   ============================================================ */

/* Le due facce dell'interfaccia, una riga per ognuna: un elemento
   riservato in più domani non richiede altro CSS, gli basta la classe. */
body:not(.is-guest) .wl-guest-only { display: none !important; }
body.is-guest .wl-account-only { display: none !important; }

/* Il lucchetto lo inserisce guest-gate.js con lo sprite (#wl-ic-lock), non
   una background-image: così eredita il colore del comando su cui sta e
   resta leggibile in tutti e due i temi senza una seconda copia. */
.wl-lock-badge {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  opacity: 0.72;
}
.wl-home-tile .wl-lock-badge,
.wl-xp-type-trigger .wl-lock-badge {
  position: absolute;
  top: 6px;
  right: 6px;
}
.wl-xp-type-trigger.is-locked { position: relative; }
/* Nelle voci del menu profilo il lucchetto va in fondo alla riga, dove le
   altre voci tengono il proprio stato (la posizione ha già il suo). */
.wl-tab-menu button .wl-lock-badge { margin-left: auto; }
.wl-d-rating-vote .wl-lock-badge { margin-left: 6px; }
.wl-cammino-plan .wl-lock-badge { margin-left: 7px; vertical-align: -1px; }

/* Ingresso da ospite: sta FUORI dalla card (5/9). Dentro era la terza di
   tre azioni impilate a piena larghezza, con tre pesi scoordinati, e il
   fondo della card si leggeva come una pila invece che come una scelta.
   Qui dice quello che è: la card è per chi ha un account, questa è
   l'altra strada. Largo quanto il suo testo e non quanto la card, così
   non entra in gara con i due pulsanti pieni là dentro. */
.wl-guest-enter {
  position: relative;
  z-index: 2;
  display: block;
  /* `auto` in fondo, non in cima: il vuoto residuo si divide fra sopra la
     card e sotto questo pulsante, e card + ospite restano un blocco. */
  margin: 16px auto auto;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.94);
  font: 600 0.9rem "Nunito", sans-serif;
  cursor: pointer;
  text-shadow: 0 1px 8px rgba(5, 28, 50, 0.5);
}
.wl-guest-enter:hover { background: rgba(255, 255, 255, 0.16); }
.wl-guest-enter:active { transform: translateY(1px); }

/* Avviso sui filtri di Esplora: le tessere regione e le pillole distinzione
   sono contenitori ridisegnati ad ogni giro, un lucchetto appeso al loro
   angolo non apparterrebbe a nessuna delle tessere dentro. Il segnale è
   questa riga, che è anche il comando: toccarla apre il foglio. */
.wl-xp-locked {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 40px);
  margin: 0 20px 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: var(--wl-glass-blur, blur(10px));
  backdrop-filter: var(--wl-glass-blur, blur(10px));
  color: rgba(255, 255, 255, 0.92);
  font: 600 0.78rem "Nunito", sans-serif;
  text-align: left;
  cursor: pointer;
}
.wl-xp-locked svg { flex: 0 0 auto; width: 14px; height: 14px; opacity: 0.8; }

/* Foglio del recinto: stessa ricetta vetro degli altri modali della casa
   (.wl-modal-glass), qui solo il lucchetto grande in testa e la riga che
   rassicura sui preferiti già salvati. */
.wl-gate-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto 6px;
  display: block;
  color: var(--wl-ice, #cfe6f5);
}
.wl-gate-keep {
  margin: 0 0 14px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}
#gate-backdrop .wl-link { display: block; width: 100%; margin-top: 8px; }

/* ============================================================
   "Wanderlust è gratis": il benvenuto dell'ospite (5/9).
   UNA schermata, non un carosello: la ricerca sull'onboarding e' concorde
   nel dire che i caroselli di funzioni hanno impatto quasi nullo, e il
   messaggio qui e' comunque uno solo. Materiale: quello dei modali densi
   (.wl-modal-glass.wl-modal-opaque, lo stesso di Novita'), niente di nuovo
   da certificare. Qui sotto solo le due colonne e la casella.
   ============================================================ */
.wl-gintro { width: min(400px, 100%); text-align: left; }
.wl-gintro .wl-mark,
.wl-gintro h2,
.wl-gintro > .wl-modal-intro { text-align: center; }
.wl-gintro h2 { margin-bottom: 6px; }
.wl-gintro > .wl-modal-intro { margin-bottom: 16px; }

/* Due colonne dove c'e' spazio, due blocchi impilati dove non ce n'e'.
   L'ordine e' quello del racconto: prima cosa hai gia', poi cosa cambia. */
.wl-gintro-cols { display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 380px) {
  .wl-gintro-cols { grid-template-columns: 1fr 1fr; gap: 10px; }
}
/* Schermo basso: le colonne si affiancano comunque, anche sotto i 380px di
   larghezza. Impilate erano piu' comode da leggere, ma su 375x667 mandavano
   sotto la piega proprio la colonna dell'account, cioe' il motivo per cui
   questa schermata esiste. Una colonna stretta che si vede batte una
   colonna larga che non si vede. */
@media (max-height: 720px) {
  .wl-gintro-cols { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wl-gintro h2 { font-size: 1.25rem; }
  .wl-gintro > .wl-modal-intro { margin-bottom: 12px; font-size: 0.8rem; }
  .wl-gintro .wl-mark { margin-bottom: 6px; }
  .wl-gintro-col { padding: 10px 9px 11px; }
  .wl-gintro-col h3 { font-size: 0.82rem; }
  .wl-gintro-col li { font-size: 0.74rem; padding-left: 15px; }
}
.wl-gintro-col {
  margin: 0;
  padding: 12px 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}
/* La colonna dell'account porta il filo dell'accent, non un fondo pieno:
   e' l'invito, non un avviso. Nessuna delle due dice "a pagamento", perche'
   non lo e' nessuna delle due: la differenza e' cosa si puo' fare, non
   quanto costa. */
.wl-gintro-col--more {
  border-color: rgba(226, 101, 43, 0.42);
  background: linear-gradient(160deg, rgba(226, 101, 43, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
}
.wl-gintro-col h3 { margin-bottom: 9px; font-size: 0.9rem; }
.wl-gintro-col--more h3 { color: #ffb083; }
.wl-gintro-col ul { gap: 7px; }
.wl-gintro-col li {
  position: relative;
  padding-left: 17px;
  font-size: 0.79rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}
/* Spunta disegnata in CSS: due segmenti di bordo ruotati. Un glifo dello
   sprite qui dentro vorrebbe dire un <svg> per riga, otto nodi in piu' per
   una decorazione che non porta significato oltre "questo c'e'". */
.wl-gintro-col li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 5px;
  height: 9px;
  border: solid rgba(255, 255, 255, 0.62);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.wl-gintro-col--more li::before { border-color: var(--wl-accent); }

/* Il piede resta in vista mentre il contenuto scorre. `sticky` e non
   `fixed`: deve stare dentro il pannello, non nella pagina, e seguire i
   suoi bordi arrotondati. Il velo sotto serve perche' le righe della
   colonna gli scorrono dietro, e senza si leggerebbero due testi
   sovrapposti. I margini negativi lo allargano fino ai bordi interni del
   pannello, cosi' il velo copre tutta la larghezza e non lascia due
   spifferi ai lati. */
.wl-gintro-foot {
  position: sticky;
  bottom: -24px;
  margin: 0 -24px -24px;
  padding: 14px 24px 16px;
  /* Velo quasi pieno e sfocatura: misurato a 375x667, con un velo piu'
     gentile le righe della colonna si leggevano DIETRO al pulsante. In un
     conflitto fra materiale e leggibilita' vince la leggibilita'; la
     sfocatura restituisce un po' della profondita' che il velo toglie. */
  background: linear-gradient(180deg, rgba(6, 24, 43, 0) 0%, rgba(6, 24, 43, 0.94) 14%, rgba(6, 24, 43, 0.99) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.wl-gintro-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}
/* La casella nativa su fondo scuro esce bianca e squadrata in tutti i
   browser tranne quelli che la colorano di sistema: accent-color la mette
   in tinta con una riga sola, senza rifarla da zero con uno pseudo-elemento. */
.wl-gintro-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--wl-accent);
  cursor: pointer;
}
/* `.wl-link` di base e' azzurro scuro (#3f6f96), pensato per il fondo chiaro
   della casa: dentro questo modale scuro spariva. Qui e' bianco con il filo
   sotto, come i link della card di benvenuto.
   Resta un link e non un secondo pulsante pieno di proposito: il messaggio
   di questa schermata e' "e' tutto gratis, vai a guardare". Spingere la
   registrazione con lo stesso peso contraddirebbe la frase che si e' appena
   letta, e l'account e' offerto, non venduto. */
.wl-gintro #guest-intro-signup {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  color: white;
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 6px rgba(5, 28, 50, 0.4);
}