/* COMPONENTI E IMPAGINATO — questo file NON si tocca per motivi grafici.
   I colori, i caratteri, i raggi e le ombre stanno in tema/tokens.css; le
   forme che un evento vuole cambiare davvero stanno in tema/override.css,
   caricato dopo questo. Vedi docs/SKIN.md. */
*{box-sizing:border-box}
html,body{margin:0;background:var(--sfondo)}
body{font-family:var(--font-testo);
  color:var(--testo);line-height:1.55;font-size:15.5px}
h1,h2,h3{font-family:var(--font-titoli)}
#phone{max-width:560px;margin:0 auto;background:var(--superficie);min-height:100vh;position:relative;
  box-shadow:var(--ombra-pagina)}
button,input{appearance:none;-webkit-appearance:none;font-family:inherit}
/* demo bar */
#demobar{background:var(--card);color:var(--testo-soft);font-size:11.5px;padding:6px 14px;display:flex;gap:8px;
  align-items:center;flex-wrap:nowrap;overflow-x:auto;border-bottom:1px solid var(--bordo);scrollbar-width:none}
#demobar::-webkit-scrollbar{display:none}
#demobar b{color:var(--testo);letter-spacing:.5px;flex:0 0 auto}
#demobar button{background:none;border:1px solid var(--bordo);color:var(--testo-soft);border-radius:999px;
  padding:2px 10px;font-size:11px;cursor:pointer;flex:0 0 auto}
#demobar button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-testo);font-weight:700}
/* header */
header{background:var(--superficie);color:var(--testo);padding:14px 16px 12px;border-bottom:1px solid var(--bordo)}
header .row{display:flex;align-items:center;gap:10px}
/* il logo sa restringersi: col tasto Cerca scritto per esteso l'intestazione a
   360-375 px non ci starebbe, e il pezzo che cede e' il logo, non il tasto */
header .logomark{height:38px;width:auto;max-width:100%;object-fit:contain;object-position:left;
  flex:0 1 auto;display:block}
.avatar{display:flex;align-items:center;justify-content:flex-start;flex:0 1 auto;min-width:0;
  background:none;border:none;padding:0;margin:0;cursor:pointer;outline:none}
.avatar:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
header h1{display:none}
.titles{flex:1;min-width:0}
header .sub{display:none}
.langs{display:flex;gap:3px;flex:0 0 auto}
.langs button{display:flex;align-items:center;justify-content:center;gap:4px;font-family:inherit;font-size:11px;
  font-weight:700;padding:8px 7px;border-radius:8px;border:none;background:none;opacity:.5;color:var(--testo);cursor:pointer}
.langs button:disabled{cursor:default}
.langs .on{background:var(--brand);color:var(--brand-testo);opacity:1}
.langs .lbl{display:none}
.flag{width:18px;height:12px;border-radius:2.5px;overflow:hidden;flex:0 0 auto;
  outline:1px solid var(--bordo);outline-offset:-1px;display:block}
@media(min-width:480px){
  .langs button{padding:4px 9px 4px 6px}
  .langs .lbl{display:inline}
  .flag{width:16px;height:11px}
}
/* Il tasto Cerca e' colorato e ha la parola scritta accanto alla lente: e' la
   scorciatoia piu' utile e la piu' ignorata, e grigio fra elementi grigi non lo
   provava nessuno (Andrea, 8/9/2026). Sotto i 360 px resta la sola lente, ma il
   colore no. */
#searchbtn{position:relative;background:var(--brand);border:1px solid var(--brand);color:var(--brand-testo);
  font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.2px;
  min-width:44px;height:44px;border-radius:13px;padding:0 12px;gap:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#searchbtn .slbl{display:none}
@media(min-width:360px){ #searchbtn .slbl{display:inline} }
/* il pallino delle novita' e' rosso: sul tasto nel colore del brand spariva */
#searchbtn .dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
  background:var(--allarme);border:2px solid var(--superficie);display:none}
/* il fumetto della prima apertura: dice a cosa serve il Cerca, poi sparisce per sempre */
#cercatip{display:none;margin:8px 0 2px;background:var(--brand);color:var(--brand-testo);
  border-radius:12px;padding:9px 13px;font-size:13px;font-weight:600;line-height:1.35;
  cursor:pointer;position:relative}
#cercatip.on{display:block}
#cercatip::before{content:"";position:absolute;top:-6px;right:16px;width:12px;height:12px;
  background:var(--brand);transform:rotate(45deg);border-radius:2px}
#searchbtn.has-news .dot{display:block}
/* search overlay */
#searchov{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:900;display:none}
#searchov.open{display:block}
#searchbox{max-width:560px;margin:0 auto;background:var(--superficie);padding:14px;min-height:40vh;
  border-radius:0 0 24px 24px;max-height:85vh;overflow-y:auto;border-bottom:1px solid var(--bordo)}
#searchbox input{width:100%;font-size:16px;padding:12px 14px;border:2px solid var(--brand);
  border-radius:12px;outline:none;background:var(--card);color:var(--testo)}
.sres{background:var(--card);border:1px solid var(--bordo);border-radius:12px;padding:10px 14px;margin-top:10px;cursor:pointer}
.sres b{display:block;font-size:14.5px;color:var(--testo)}
.sres span{font-size:12.5px;color:var(--testo-soft);font-weight:500}
.snull{text-align:center;color:var(--testo-soft);font-size:13.5px;font-weight:500;padding:18px 0}
/* main */
main{padding:14px 14px calc(var(--nav-h) + 20px)}
.tab{display:none}
.tab.on{display:block}
.card{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:18px;margin-bottom:16px;
  box-shadow:0 6px 20px rgba(20,30,20,.07)}
.card h2{font-size:19px;margin:0 0 8px;color:var(--testo);font-weight:700}
.card h3{font-size:16.5px;margin:0 0 6px;color:var(--testo);font-weight:700;display:flex;align-items:center;gap:8px}
.card p{margin:0 0 8px;font-size:15.5px;color:color-mix(in srgb, var(--testo) 82%, transparent)}
.card p:last-child{margin-bottom:0}
/* Il QR del ritiro pacco, prima scheda di Info. Solo il corpo si centra: la
   testata resta allineata come le altre schede di Info, con l'icona e il
   chevron. Il fondo dell'immagine resta bianco anche con una veste scura, il
   margine chiaro serve allo scanner, non e' decorazione. */
.qrcorpo{text-align:center}
/* 16px non e' un capriccio: sotto i 16 iPhone ingrandisce la pagina appena si
   tocca il campo, e la scheda salta via da sola mentre si incolla. */
.qrincolla{margin-top:14px}
.qrincolla input{width:100%;font-size:16px;padding:12px 14px;border:1.5px solid var(--bordo);
  border-radius:12px;background:var(--card-alt);color:var(--testo);text-align:center}
.qrincolla input:focus{outline:none;border-color:var(--brand)}
/* Un messaggio d'errore col colore del testo secondario, letto al sole in fila
   al banco, non si legge- qui si tiene il corpo piccolo ma il colore pieno. */
.qrincolla .qrerr{color:var(--testo);font-weight:600}
.qrcorpo .btnrow{justify-content:center}
.qrnum{font-family:var(--font-titoli);font-size:34px;font-weight:800;color:var(--testo);margin:4px 0 10px;letter-spacing:.5px}
.qrimg{display:block;max-width:100%;height:auto;margin:0 auto 12px;image-rendering:pixelated;background:#fff;border-radius:8px}
.rslider{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;margin:2px -2px 14px;padding:2px 2px 6px;
  scrollbar-width:none}
.rslider::-webkit-scrollbar{display:none}
.rslide{flex:0 0 auto;width:104px;scroll-snap-align:start;cursor:pointer}
.rslide-img{position:relative;width:104px;height:142px;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg, var(--col)26, var(--col)59);
  box-shadow:0 4px 14px rgba(20,30,20,.16),0 1px 3px rgba(20,30,20,.1)}
.rslide-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.rslide-num{position:absolute;top:6px;left:6px;width:19px;height:19px;border-radius:50%;
  background:color-mix(in srgb, var(--testo) 55%, transparent);color:#fff;font-size:10.5px;font-weight:800;font-family:var(--font-titoli);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);z-index:1}
/* La fascia si adatta al testo invece di tagliarlo. Con `height:40%` fissa, un
   nome di percorso lungo traboccava sopra la fascia e finiva bianco sul chiaro
   della foto o del gradiente, cioe' illeggibile. Adesso il 40% e' il minimo e
   la fascia cresce se serve; `max-height` la ferma prima che si mangi tutta
   l'immagine, e il nome si tronca alla terza riga invece di uscire. */
.rslide-band{position:absolute;left:0;right:0;bottom:0;min-height:40%;max-height:72%;background:var(--col);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:5px 8px}
.rslide-band b{color:#fff;font-size:11.5px;font-weight:800;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rslide-band span{color:rgba(255,255,255,.85);font-size:10px;font-weight:600}
.muted{color:var(--testo-soft);font-size:14px;font-weight:500}
.btn{display:inline-block;background:var(--brand);color:var(--brand-testo);text-decoration:none;font-weight:700;
  font-size:14px;padding:10px 18px;border-radius:999px;border:none;cursor:pointer}
.btn.sec{background:transparent;color:var(--accento);border:1.5px solid var(--accento)}
.btn.small{font-size:12.5px;padding:9px 15px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.pending{display:inline-block;background:var(--card-alt);border:1px dashed var(--bordo);
  color:var(--testo-soft);font-size:12.5px;font-weight:700;border-radius:999px;padding:8px 16px}
/* hero — verde scuro con bagliori, l'unico elemento volutamente "scuro" della pagina */
.hero{position:relative;overflow:hidden;color:#fff;border:1px solid rgba(255,255,255,.1);
  background:var(--hero-fondo)}
.hero::before,.hero::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;
  filter:blur(60px);opacity:.35;pointer-events:none}
.hero::before{background:var(--brand-chiaro);top:-70px;right:-60px}
.hero::after{background:var(--accento);bottom:-80px;left:-60px;opacity:.28}
.hero>*{position:relative}
.hero h2{color:#fff;font-size:22px;font-weight:700;margin:0 0 4px}
.hero p{color:rgba(255,255,255,.82)}
.kicker{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--accento);font-weight:700;margin-bottom:6px}
.hero .kicker{color:var(--brand-chiaro)}
#countdown{display:flex;gap:10px;margin:12px 0 4px}
#countdown div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:10px 0;text-align:center;flex:1}
#countdown b{display:block;font-size:26px;font-family:var(--font-titoli);font-variant-numeric:tabular-nums;color:#fff}
#countdown span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:.8;color:#fff}
/* checklist */
#cklist{display:flex;flex-direction:column;gap:10px}
.chk{padding:13px;border:1.5px solid var(--bordo);border-radius:var(--raggio);background:var(--card-alt);cursor:pointer;
  transition:background .15s,border-color .15s}
.chk.done{background:color-mix(in srgb, var(--brand) 8%, transparent);border-color:color-mix(in srgb, var(--brand) 40%, transparent)}
.chk .top{display:flex;align-items:center;gap:12px}
.chk-box{position:relative;width:30px;height:30px;flex:0 0 auto}
.chk-box input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chk-box .mark{position:absolute;inset:0;border-radius:9px;border:2px solid var(--bordo);background:var(--superficie);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  transition:background .15s,border-color .15s;box-shadow:0 1px 3px rgba(20,30,20,.08)}
.chk-box .mark::after{content:'';position:absolute;width:8px;height:14px;border:solid #fff;
  border-width:0 2.5px 2.5px 0;transform:rotate(40deg) translate(-1px,-1px);opacity:0;transition:opacity .1s}
.chk input:checked ~ .mark{background:var(--brand);border-color:var(--brand)}
.chk input:checked ~ .mark::after{opacity:1}
.chk.done label.chk-label,.chk.done .chk-label{text-decoration:line-through;color:var(--testo-soft)}
.chk-label{font-size:16px;font-weight:700;flex:1;color:var(--testo);line-height:1.35}
.chk .det{font-size:14px;color:var(--testo-soft);font-weight:500;margin:9px 0 0 42px}
.chk.done .det{opacity:.6}
.chk .det a{color:var(--accento);font-weight:700}
/* avvisi */
.avvisi{background:var(--card-alt);border:1.5px solid color-mix(in srgb, var(--accento) 40%, transparent);border-radius:var(--raggio);padding:12px 16px;margin-bottom:12px}
.avvisi h3{margin:0 0 6px;font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:var(--accento);font-weight:700}
.avvisi p{margin:0 0 7px;font-size:15px;color:var(--testo)}
.avvisi p:last-child{margin-bottom:0}
/* meteo */
#meteotab{width:100%;border-collapse:collapse;font-size:12px}
#meteotab th,#meteotab td{border:1px solid var(--bordo);padding:5px 4px;text-align:center;color:var(--testo)}
#meteotab th{background:var(--card-alt);font-size:11px;font-weight:700;color:var(--testo-soft)}
#meteotab td .wi{font-size:17px;display:block}
#meteotab td .tt{color:var(--testo-soft);font-weight:600}
#meteotab .loc{text-align:left;font-weight:700;font-size:11.5px;white-space:nowrap}
.meteowrap{overflow-x:auto}
#meteogps,#gpsmeteo{background:var(--card-alt);border-radius:12px;padding:10px 14px;font-size:14px;margin-top:10px;display:none}
/* finestra del live tracking WHIP: stessa scatola della mappa alloggi */
#whipwrap{border-radius:var(--raggio);overflow:hidden;border:1px solid var(--bordo);height:520px;background:var(--card-alt)}
/* la stessa scatola, quando la mappa non c'e' ancora */
.attesa{display:flex;align-items:flex-start;gap:9px;background:var(--card-alt);border:1px dashed var(--bordo);
  border-radius:16px;padding:14px;font-size:14.5px;color:var(--testo-soft);font-weight:500}
.attesa svg{flex:0 0 auto;margin-top:2px;color:var(--accento)}
#whipwrap iframe{width:100%;height:100%;border:0}
.sunset{background:linear-gradient(90deg,color-mix(in srgb, var(--accento) 18%, transparent),color-mix(in srgb, var(--accento) 6%, transparent));border-radius:12px;
  padding:8px 14px;font-size:13.5px;font-weight:500;margin-top:10px;color:var(--accento-scuro)}
/* installa in home */
#installcard{background:linear-gradient(135deg,var(--card-alt),var(--card));border:1.5px solid var(--brand)}
#installcard h3{display:flex;align-items:center;gap:8px}
@media(min-width:900px){#installcard{display:none !important}}
#iosmodal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1500;display:none;align-items:flex-end;justify-content:center}
#iosmodal .box{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio) 18px 0 0;padding:22px 20px 30px;max-width:560px;width:100%}
#iosmodal h3{margin:0 0 10px;color:var(--testo)}
#iosmodal .step{display:flex;gap:12px;align-items:center;padding:9px 0;font-size:14.5px;color:color-mix(in srgb, var(--testo) 85%, transparent)}
#iosmodal .n{background:var(--brand);color:var(--brand-testo);width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto;font-size:12px}
/* stato "in arrivo" della sequenza del dopo: niente casella, voce attenuata */
.chk.wait{cursor:default;opacity:.75}
/* voce senza spunta: stessa scatola, nessuna casella e nessun rientro */
.chk.plain{cursor:default;margin-top:10px}
.chk.plain .det{margin-left:0}
/* card di richiamo a un altro evento della serie */
.cross{border:1.5px solid var(--oro)}
.chk-wait{width:30px;height:30px;flex:0 0 auto;border-radius:9px;border:2px dashed var(--bordo);
  display:flex;align-items:center;justify-content:center;color:var(--testo-soft)}
.chk-badge{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--evidenza-scuro);background:var(--evidenza);border-radius:999px;padding:3px 9px;flex:0 0 auto}

/* link feedback in fondo alla pagina + modale */
.linklike{background:none;border:none;padding:4px;color:var(--testo-soft);font-size:11.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
#fbmodal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1500;display:none;align-items:flex-end;justify-content:center}
#fbmodal .box{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio) 18px 0 0;padding:22px 20px 30px;max-width:560px;width:100%}
#fbmodal h3{margin:0 0 6px;color:var(--testo);display:flex;align-items:center;gap:8px}
#fbmodal textarea,#fbmodal input{width:100%;border:1.5px solid var(--bordo);border-radius:12px;background:var(--card-alt);
  padding:11px 13px;font-size:15px;color:var(--testo);margin-top:10px;resize:vertical}
#fbmodal textarea:focus,#fbmodal input:focus{outline:none;border-color:var(--brand)}
#fbmodal .btn{border:none;cursor:pointer;font-size:14.5px}

/* gate */
#gate{position:fixed;inset:0;background:var(--superficie);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
#gate .box{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:28px 24px;max-width:380px;width:100%;text-align:center}
#gate .logomark{height:120px;width:auto;margin:0 auto 14px;display:block}
#gate h2{margin:0 0 6px;color:var(--testo);font-size:26px}
#gate p{font-size:13.5px;color:var(--testo-soft);font-weight:500;margin:0 0 14px}
#gate input{width:100%;font-size:17px;padding:12px;border:2px solid var(--bordo);border-radius:12px;text-align:center;
  text-transform:uppercase;letter-spacing:2px;outline:none;background:var(--card-alt);color:var(--testo)}
#gate input:focus{border-color:var(--brand)}
#gate .err{color:var(--allarme);font-size:12.5px;min-height:18px;margin:6px 0}
#gate button{width:100%}
/* big buttons (durante) — dischi icona = quick actions */
.bigbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bigbtn{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:16px 12px;text-align:center;
  cursor:pointer;text-decoration:none;color:var(--testo);box-shadow:0 6px 16px rgba(20,30,20,.06);min-height:auto;
  display:block}
.bigbtn .e{font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;
  width:52px;height:52px;border-radius:50%;background:color-mix(in srgb, var(--accento) 12%, transparent);border:1.5px solid var(--accento)}
.bigbtn b{font-size:14px;font-weight:700;letter-spacing:normal;text-transform:none;margin-top:0}
.bigbtn.primary{grid-column:1/-1;background:var(--card-forte);border-color:color-mix(in srgb, var(--brand) 35%, transparent);color:var(--testo);padding:20px 12px}
.bigbtn.primary .e{font-size:34px;background:var(--brand);border:none;color:var(--brand-testo);box-shadow:0 0 18px color-mix(in srgb, var(--brand) 40%, transparent)}
.bigbtn.primary b{font-size:16px}
.bigbtn.alert{background:color-mix(in srgb, var(--allarme) 6%, transparent);border-color:color-mix(in srgb, var(--allarme) 30%, transparent);color:var(--testo)}
.bigbtn.alert .e{background:color-mix(in srgb, var(--allarme) 14%, transparent);border-color:var(--allarme);color:var(--allarme)}
/* percorsi — i tre tasti restano in fila anche sul telefono stretto: la scelta
   si vede tutta insieme e km, dislivello e livello si confrontano a colpo
   d'occhio, senza scorrere. Tutto il resto (descrizione, fondo, meteo, servizi)
   sta dentro la vista percorso, dove c'e' spazio per leggerlo. */
.rhint{font-size:14px;color:var(--testo-soft);font-weight:500;margin:0 0 10px;padding:0 2px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.rcard{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;overflow:hidden;
  background:var(--card);border:1px solid var(--bordo);border-top:4px solid var(--col);border-radius:var(--raggio);
  font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rcard:active{transform:scale(.985)}
.rcard-photo{display:flex;align-items:center;justify-content:center;height:78px;color:var(--col)}
.rcard-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.rcard-body{display:flex;flex-direction:column;gap:1px;padding:9px 9px 11px}
.rcard-nome{font-family:var(--font-titoli);font-size:14px;font-weight:700;line-height:1.15;
  color:var(--col);margin-bottom:4px}
.rcard-num{font-size:13px;font-weight:700;color:var(--testo);font-variant-numeric:tabular-nums}
.rcard-liv{margin-top:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--testo-soft)}
@media (max-width:340px){
  .rcard-nome{font-size:13px}
  .rcard-num{font-size:12px}
  .rcard-photo{height:66px}
}
.rnote{font-size:14px;color:var(--testo-soft);font-weight:500;padding-left:16px;margin:4px 0}
/* z-index:0 chiude ogni mappa nel suo contesto: i controlli interni di Leaflet
   hanno z-index 1000 e senza questo recinto trapassano i pannelli a schermo
   intero (il +/- della minimappa affiorava dentro la vista percorso, z 950,
   e resterebbe in agguato anche sotto la ricerca, z 900) */
#minimap,#gpsmap{position:relative;z-index:0;height:340px;border-radius:var(--raggio);background:var(--card-alt)}
#rv-map{position:relative;z-index:0}
/* vista percorso a schermo intero: mappa + altimetria dentro l'app, con la via d'uscita sempre visibile */
#routeview{position:fixed;inset:0;z-index:950;background:var(--sfondo);display:none;flex-direction:column}
#routeview.open{display:flex}
#rv-top{flex:0 0 auto;display:flex;align-items:center;gap:10px;background:var(--superficie);
  border-bottom:1px solid var(--bordo);padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top))}
#rv-back{display:flex;align-items:center;gap:5px;flex:0 0 auto;font-family:inherit;font-size:14px;font-weight:700;
  color:var(--brand);background:var(--card-alt);border:1px solid var(--bordo);border-radius:999px;
  padding:9px 15px 9px 12px;cursor:pointer}
#rv-back:active{background:var(--card-forte)}
#rv-titles{flex:1;min-width:0}
#rv-titles b{display:block;font-family:var(--font-titoli);font-size:16px;line-height:1.2;
  color:var(--rv-col,var(--brand));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Su schermo stretto il nome del percorso va a capo invece di essere tagliato.
   Il pulsante a destra non si restringe (flex:0 0 auto) e con l'etichetta di
   una piattaforma esterna — "Ride with GPS" invece di "GPX" — al titolo
   restavano un centinaio di pixel, cioe' due parole su un nome che ne ha sei. */
@media (max-width: 520px){
  #rv-titles b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    line-height:1.15;font-size:15px}
}
#rv-titles span{font-size:12px;font-weight:600;color:var(--testo-soft)}
#rv-gpx{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--accento);text-decoration:none;
  border:1px solid var(--bordo);border-radius:999px;padding:8px 12px}
/* la barra in alto resta ferma, tutto il resto scorre: mappa, altimetria e
   servizi dello stesso percorso in un posto solo, e la via d'uscita non
   scompare mai anche quando si e' in fondo alla lista */
#rv-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--superficie);padding-bottom:calc(24px + env(safe-area-inset-bottom))}
#rv-map{height:46vh;min-height:200px;background:var(--card-alt)}
/* i filtri comandano mappa, altimetria e lista insieme, quindi restano
   raggiungibili anche mentre si scorre la lista */
#rv-filters{position:sticky;top:0;z-index:3;display:flex;gap:6px;padding:9px 10px;overflow-x:auto;
  scrollbar-width:none;background:var(--superficie);border-bottom:1px solid var(--bordo)}
#rv-filters::-webkit-scrollbar{display:none}
/* pan-y: il dito che scorre la pagina scorre, il dito che va di traverso
   sfoglia il profilo */
#rv-profwrap{position:relative;height:172px;touch-action:pan-y}
#rv-prof{display:block;width:100%;height:100%}
#rv-pins{position:absolute;inset:0;pointer-events:none}
.rvpin{position:absolute;transform:translate(-50%,-50%);width:23px;height:23px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;
  border:1.5px solid #fff;box-shadow:0 1px 3px rgba(20,30,20,.35);padding:0}
.rvpin.t-a{background:var(--poi-acqua);color:#fff}
.rvpin.t-m{background:var(--accento);color:#fff}
.rvpin.t-d{background:var(--poi-dormire);color:#fff}
.rvpin.t-b{background:var(--poi-meccanico);color:#fff}
.rvpin.t-c{background:var(--testo);color:#fff}
.rvpin.t-p{background:var(--allarme);color:#fff}
.rvpin.sel{outline:2.5px solid var(--evidenza-scuro);outline-offset:1px}
/* il numero sul segno — profilo o mappa, e' lo stesso badge: dice quanti punti
   sta rappresentando. UNA regola sola, cosi' non possono divergere.
   Il testo non e' --evidenza-scuro puro ma scurito ancora: quel token e' fatto
   per stare SU un fondo chiaro, e sopra --evidenza a corpo 10,5 in grassetto
   il contrasto scende sotto la soglia leggibile. Cosi' segue comunque la
   tavolozza dell'evento invece di restare il marrone del demo. */
.rvpin .n,.rvmk .n{position:absolute;top:-6px;right:-7px;min-width:16px;height:16px;padding:0 3px;border-radius:9px;
  background:var(--evidenza);color:color-mix(in srgb, var(--evidenza-scuro) 55%, #000);border:1.5px solid #fff;font-size:10.5px;font-weight:800;
  font-style:normal;line-height:13px;text-align:center}
/* stesso discorso per il tooltip del profilo, nella vista percorso e nel Live */
/* z-index 5: la barra dei filtri e' sticky a 3 e senza questo il fumetto le
   finiva sotto. .sotto = fumetto ribaltato sotto il punto, per i punti alti
   del profilo dove sopra non c'e' spazio. */
#rv-tip,#lv-tip{position:absolute;z-index:5;pointer-events:none;display:none;max-width:62%;background:color-mix(in srgb, var(--testo) 94%, transparent);color:#fff;
  font-size:12px;font-weight:600;line-height:1.35;padding:5px 9px;border-radius:9px;transform:translate(-50%,-136%)}
#rv-tip.sotto,#lv-tip.sotto{transform:translate(-50%,36%)}
#rv-foot{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:2px 12px 9px;font-size:11.5px;
  font-weight:600;color:var(--testo-soft)}
#rv-foot b{color:var(--testo);font-weight:700}
/* descrizione, fondo e temperature del percorso: stanno fra il profilo e la
   lista servizi, cioe' dopo aver visto dove si va e prima di sapere dove si
   mangia e si dorme */
#rv-desc{padding:0 12px}
.rvblock{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:14px;margin:12px 0 0}
.rvblock h3{font-family:var(--font-titoli);font-size:15px;margin:0 0 8px;color:var(--testo)}
.rvblock p{margin:0 0 9px;font-size:15px;line-height:1.55;color:color-mix(in srgb, var(--testo) 82%, transparent)}
.rvblock p:last-child{margin-bottom:0}
.rvalto{display:flex;align-items:flex-start;gap:8px;background:var(--card-alt);border-radius:12px;
  padding:9px 11px;margin-bottom:11px;font-size:14px;font-weight:600;color:var(--testo);line-height:1.35}
.rvalto svg{flex:0 0 auto;margin-top:1px;color:var(--rv-col,var(--brand))}
.rvmeteo{width:100%;border-collapse:collapse;font-size:14px}
.rvmeteo th{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--testo-soft);
  text-align:right;padding:0 0 5px}
.rvmeteo th:first-child{text-align:left}
.rvmeteo td{border-top:1px solid var(--bordo);padding:7px 0;vertical-align:baseline}
.rvmeteo td:first-child{line-height:1.25}
.rvmeteo b{font-weight:700;color:var(--testo)}
.rvq{display:block;font-size:12px;font-weight:600;color:var(--testo-soft)}
.rvmax,.rvmin{text-align:right;width:56px;font-weight:800;font-variant-numeric:tabular-nums}
.rvmax{color:var(--allarme)}
.rvmin{color:var(--poi-acqua)}
.rvnota{margin-top:11px!important;font-weight:500}
.rvfonte{font-size:12px!important;color:var(--testo-soft)!important;line-height:1.4!important;margin-top:9px!important}
/* segni sulla mappa: stessa forma e stessi colori delle icone sul profilo */
.rvmk{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  border:1.5px solid #fff;box-shadow:0 1px 3px rgba(20,30,20,.4)}
.rvmk.t-a{background:var(--poi-acqua);color:#fff}
.rvmk.t-m{background:var(--accento);color:#fff}
.rvmk.t-d{background:var(--poi-dormire);color:#fff}
.rvmk.t-b{background:var(--poi-meccanico);color:#fff}
.rvmk.t-c{background:var(--testo);color:#fff}
.rvmk.t-p{background:var(--allarme);color:#fff}
.rvpop b{font-size:14px}
.rvpop .km{color:var(--testo-soft);font-weight:600;font-size:12.5px}
.rvpop .det{display:block;color:var(--testo-soft);font-weight:600;font-size:12.5px;margin-top:2px}
.rvpop .poibook{display:inline-block;margin-top:7px}
.rvpop .poitel{display:inline-block;margin-top:5px}
.rvpop .poimaps{margin-top:6px}
.rvpop.gruppo{max-height:210px;overflow-y:auto}
.rvpop .tit{display:block;margin-bottom:5px}
.rvpop .voce{padding:5px 0;border-top:1px solid var(--bordo)}
.rvpop .voce b{font-size:13.5px}
/* altimetria dentro il Live: stessi mattoni della vista percorso, ma dentro una card */
#lv-profwrap{position:relative;height:150px;margin-top:8px;touch-action:pan-y;
  background:var(--card-alt);border:1px solid var(--bordo);border-radius:14px;overflow:hidden}
#lv-prof{display:block;width:100%;height:100%}
#lv-pins{position:absolute;inset:0;pointer-events:none}
#lv-foot{display:flex;flex-wrap:wrap;gap:4px 10px;padding:7px 2px 0;font-size:12px;font-weight:600;color:var(--testo-soft)}
#lv-foot b{color:var(--testo);font-weight:700}
#lv-vista .on{background:var(--brand);border-color:var(--brand);color:var(--brand-testo)}
/* lista servizi dentro la vista percorso */
#rv-listwrap{padding:12px 12px 0}
#rv-listwrap h3{font-family:var(--font-titoli);font-size:15px;margin:0 0 4px}
#rv-listintro{font-size:12.5px;color:var(--testo-soft);font-weight:500;margin:0 0 8px}
/* .poilist nasceva per la vecchia card nella pagina che scorreva da sola: qui
   dentro #rv-scroll il suo max-height creava uno scroll dentro lo scroll e il
   dito ci restava intrappolato. Scorre tutto la pagina, la lista no. */
#rv-list{max-height:none;overflow-y:visible}
/* telefono girato: mappa e profilo si accorciano per restare visibili insieme */
@media(max-height:560px){
  #rv-profwrap{height:118px}
  #rv-map{height:62vh;min-height:150px}
  #rv-top{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:6px}
  #rv-foot{padding-bottom:5px}
}
/* pills percorso / filtri poi (già .btn.sec.small nel markup, qui solo lo stato attivo) */
.rpill.on{background:var(--pill-color,var(--brand));border-color:var(--pill-color,var(--brand));color:#fff}
.pfil.on{background:var(--brand);border-color:var(--brand);color:var(--brand-testo)}
/* info */
.icard .head{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.icard .head:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:12px}
.icard .head .e{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;background:color-mix(in srgb, var(--accento) 14%, transparent);color:var(--accento)}
/* Il colore dell'icona segue la posizione del tema (1°, 2°, 3°...), non il suo
   nome: cosi' vale per qualunque evento e in qualunque lingua. Prima era legato
   alle parole esatte dei temi del Trentino, quindi in inglese non funzionava. */
.icard[data-tema-i="1"] .head .e{background:color-mix(in srgb, var(--brand) 14%, transparent);color:var(--brand)}
.icard[data-tema-i="2"] .head .e{background:color-mix(in srgb, var(--evidenza) 16%, transparent);color:var(--evidenza-scuro)}
.icard[data-tema-i="3"] .head .e{background:color-mix(in srgb, var(--allarme) 14%, transparent);color:var(--allarme)}
.icard[data-tema-i="4"] .head .e{background:color-mix(in srgb, var(--brand-chiaro) 14%, transparent);color:var(--brand-chiaro)}
.icard .head h3{flex:1;margin:0}
/* Le schede nascono chiuse: si legge il titolo, si tocca per aprire. La freccia
   dice che sotto c'e' altro, ed e' disegnata in CSS per non toccare lo sprite. */
.icard .chev{width:9px;height:9px;flex:0 0 auto;margin-right:5px;position:relative;top:-3px;
  border-right:2px solid var(--testo-soft);border-bottom:2px solid var(--testo-soft);
  transform:rotate(45deg);transition:transform .15s,top .15s}
.icard.open .chev{transform:rotate(-135deg);top:2px}
.icard .body{display:none;margin-top:8px}
.icard.open .body{display:block}
/* la tabella oraria dentro una scheda (campo `orari` in evento/info.js) */
.orari{margin-top:12px}
.ogiorno + .ogiorno{margin-top:16px}
.ogiorno h4{margin:0 0 4px;font-family:var(--font-titoli);font-size:12.5px;
  text-transform:uppercase;letter-spacing:1.2px;color:var(--accento);font-weight:700}
.orow{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--bordo)}
.ora{font-weight:800;font-variant-numeric:tabular-nums}
@media (max-width:360px){.orow{grid-template-columns:92px 1fr;gap:8px}}
.itheme{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--accento);
  margin:26px 2px 10px;font-weight:800}
.itheme:first-of-type{margin-top:4px}
.itheme:not(:first-of-type){padding-top:18px;border-top:1px solid var(--bordo)}
/* Stesso peso della ricerca in testata (#searchbox input): bordo 2px sul colore
   del brand e la lente dentro il campo. E' la funzione piu' usata della scheda,
   e con un bordo grigio da 1,5px si leggeva come un campo qualsiasi. */
#infosearchbox{position:relative;margin-bottom:12px}
#infosearchbox svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--testo-soft);pointer-events:none}
#infosearch{width:100%;font-size:16px;padding:12px 14px 12px 40px;border:2px solid var(--brand);
  border-radius:12px;outline:none;background:var(--card);color:var(--testo)}
mark{background:color-mix(in srgb, var(--evidenza) 35%, transparent);color:var(--testo);border-radius:3px;padding:0 1px}
/* dormire */
/* L'altezza non e' estetica. Sotto una certa altezza del proprio viewport
   Stay22 disegna mappa e hotel ma NON la traccia GPX, senza nessun errore:
   sembra che il GPX sia sbagliato mentre invece il riquadro e' basso. Misurato
   il 26/8/2026 su iPhone con quattro iframe identici — a 420px la linea non
   c'e', a 520px c'e'. 560 tiene un margine. Prima di abbassarla, rifare la
   prova: si rompe una cosa che non da' nessun segnale. */
/* L'altezza segue lo schermo perche' dentro l'iframe ci stanno mappa, filtri e
   schede degli hotel tutti insieme: a 560px fissi, da telefono, e' un riquadro
   affollato che si chiude per andare a cercare altrove — visto succedere dal
   vivo alla Germany/Austria 2026. 78vh su un telefono in piedi vale 600-700px,
   e il tetto a 720 lascia comunque vedere che sotto la pagina continua.
   Il minimo di 560px NON si abbassa, per la ragione qui sopra. */
#stay22wrap{position:relative;border-radius:var(--raggio);overflow:hidden;border:1px solid var(--bordo);
  height:max(560px, min(78dvh, 720px));background:var(--card-alt)}
.avantih{font-size:13px;font-weight:700;margin:14px 0 6px;color:var(--testo-soft);
  text-transform:uppercase;letter-spacing:.06em}
#stay22wrap iframe{width:100%;height:100%;border:0}
/* live — i quattro tasti "cosa ti serve adesso"
   Grandi, in fila, con l'icona sopra la parola: si premono con il pollice, da
   fermi sul ciglio della strada, con i guanti e con lo schermo bagnato. Sotto
   i 340px di schermo passano in colonna, perche' quattro etichette su una riga
   sola andrebbero a capo dentro il tasto. */
.needrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 0}
.needbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.15;text-align:center;
  padding:15px 6px;min-height:82px;border-radius:14px;cursor:pointer;
  border:1px solid var(--bordo);background:var(--card-alt);color:var(--testo)}
.needbtn svg{display:block}
.needbtn.on{background:var(--brand);border-color:var(--brand);color:var(--brand-testo)}
#needout{margin-top:12px}
#needout .poirow+.poirow{margin-top:2px}
@media (max-width:340px){ .needrow{grid-template-columns:1fr} .needbtn{flex-direction:row;min-height:0} }
/* I tre restano su una riga: il nome di un luogo lungo mandava "+100 km" a
   capo da solo, e tre chip su due righe non si leggono piu' come una scelta. */
/* Restando su una riga sola, sotto i ~360px i tre chip sono piu' larghi della
   card: senza questo a scorrere di lato era la PAGINA INTERA. Scorre la riga,
   dentro il suo riquadro, e il resto della scheda resta fermo. */
#stayavanti{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
#stayavanti::-webkit-scrollbar{display:none}
#stayavanti .stayjump{white-space:nowrap;flex:0 0 auto}
#stayavanti .stayjump.on{background:var(--brand);border-color:var(--brand);color:var(--brand-testo)}

/* live */
.codebox{background:var(--card-alt);border:2px dashed var(--accento);border-radius:12px;text-align:center;
  padding:14px;font-size:26px;font-weight:800;letter-spacing:2px;color:var(--accento-scuro);margin:10px 0}
#gpsinfo{background:var(--card-alt);border-radius:14px;padding:10px 14px;font-size:15.5px;margin-top:10px;display:none;color:var(--testo)}
#gpsahead{background:var(--card-alt);border-radius:14px;padding:10px 14px;font-size:15.5px;margin-top:8px;display:none;color:var(--testo)}
#gpsahead b{color:var(--accento)}
/* servizi lungo il percorso */
.poilist{max-height:460px;overflow-y:auto;border:1px solid var(--bordo);border-radius:16px;padding:4px 12px;background:var(--card)}
.poirow{padding:8px 0;border-bottom:1px solid var(--bordo);font-size:14.5px;display:flex;gap:8px;align-items:center;color:var(--testo)}
.poirow:last-child{border-bottom:none}
.poitel{color:var(--poi-meccanico);font-weight:700;white-space:nowrap}
.poikm{color:var(--testo-soft);font-size:11.5px;flex:0 0 50px;font-weight:700}
.poiico{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;background:var(--card-alt)}
.poiico.t-a{background:color-mix(in srgb, var(--brand) 16%, transparent);color:var(--brand)}
.poiico.t-m{background:color-mix(in srgb, var(--evidenza) 16%, transparent);color:var(--evidenza-scuro)}
.poiico.t-d{background:color-mix(in srgb, var(--accento) 16%, transparent);color:var(--accento)}
.poiico.t-b{background:color-mix(in srgb, var(--poi-meccanico) 14%, transparent);color:var(--poi-meccanico)}
.poiico.t-w{background:color-mix(in srgb, var(--allarme) 18%, transparent);color:var(--allarme)}
.poiico.t-p{background:color-mix(in srgb, var(--allarme) 18%, transparent);color:var(--allarme)}
.poibook{margin-left:auto;background:var(--accento);color:#fff;border-radius:999px;padding:3px 11px;
  font-size:11.5px;text-decoration:none;font-weight:700;flex:0 0 auto}
/* "Cerca su Maps" — discreto, perche' non e' l'informazione ma il modo di
   completarla: il nome e il "tra quanti km" restano i due pezzi in nero, il
   link e' un contorno grigio che segue sulla stessa riga e va a capo da solo
   quando non ci sta. Alto 28px perche' lo si preme con i guanti. */
.poimaps{display:inline-flex;align-items:center;gap:5px;margin-top:6px;min-height:28px;
  color:var(--testo-soft);font-size:12px;font-weight:700;text-decoration:none;
  border:1px solid var(--bordo);border-radius:999px;padding:3px 10px;background:var(--superficie)}
.poimaps svg{display:block;flex:0 0 auto}
.poirow .poimaps{margin-top:5px}
/* lista raggruppata per chilometro: una riga per km con le sole icone e il
   numero di punti per tipo, piu' i nomi di citta' e paesi. Duecento righe tutte
   uguali non si leggevano; i nomi dei singoli punti si vedono toccandoli sulla
   mappa o sull'altimetria (Andrea, 19/8). */
.kmgrp{border-bottom:1px solid var(--bordo)}
.kmgrp:last-child{border-bottom:none}
.kmhead{display:flex;align-items:center;gap:10px;padding:9px 0}
.kmgrp.citta .kmhead{padding-bottom:4px}
/* la riga del punto pericoloso: sfondo rosso tenue e testo per esteso, va letta */
.kmgrp.pericolo{background:color-mix(in srgb, var(--allarme) 7%, transparent);border-radius:12px;
  padding:0 10px;margin:6px 0;border-bottom:none}
.kmgrp.pericolo .kmnome{color:var(--allarme-scuro)}
.peritesto{font-size:13.5px;line-height:1.45;color:var(--testo);padding:0 0 10px}
.kmnome{font-size:15px;font-weight:700;color:var(--testo);flex:1;min-width:0}
.kmbad{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:1;min-width:0}
.kmbad.sotto{flex:none;padding:0 0 10px 50px}
.poib{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 9px;
  font-size:12.5px;font-weight:800;background:var(--card-alt);color:var(--testo)}
.poib i{font-style:normal;font-variant-numeric:tabular-nums}
.poib.t-a{background:color-mix(in srgb, var(--brand) 16%, transparent);color:var(--brand)}
.poib.t-m{background:color-mix(in srgb, var(--evidenza) 28%, transparent);color:var(--evidenza-scuro)}
.poib.t-d{background:color-mix(in srgb, var(--accento) 16%, transparent);color:var(--accento)}
.poib.t-b{background:color-mix(in srgb, var(--poi-meccanico) 14%, transparent);color:var(--poi-meccanico)}

/* sponsor */
.sponsor{margin-top:18px}
.sponsor h3{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--testo-soft);text-align:center;margin:0 0 10px;font-weight:700}
.sprow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sp{background:var(--testo);border:1px solid var(--testo);border-radius:12px;padding:10px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px;min-width:110px;text-decoration:none}
.sp b{display:block;font-size:13px;color:#fff}
.sp-logo{width:92px;height:38px;object-fit:contain;object-position:center;display:block}
.sp span{font-size:10.5px;color:rgba(255,255,255,.55)}
/* Con il logo la tessera diventa chiara: il fondo scuro serve al nome scritto
   in bianco, ma mangia i loghi con l'inchiostro nero. Queste due righe stanno
   DOPO `.sp span` di proposito — hanno la stessa specificita', quindi a
   deciderle e' l'ordine, e messe prima il ruolo restava bianco su bianco. */
.sp-img{background:#fff;border-color:var(--bordo)}
.sp-img span{color:var(--testo-soft)}
.legend{text-align:center;font-size:11.5px;color:var(--testo-soft);margin:16px 0 4px}
/* `hidden` e' un attributo, e il browser lo rende con una regola display:none
   sua, che QUALUNQUE regola display di questo foglio batte — non per
   specificita', ma perche' le regole dell'autore vincono su quelle del
   browser. Senza questa riga, `elemento.hidden = true` non nasconde niente e
   non lo segnala nessuno. */
[hidden]{display:none !important}

/* avviso sulla misurazione d'uso — sta SOPRA la nav, non sopra il contenuto.
   Non e' un banner di consenso: nessun pulsante che accetta, solo una X che lo
   toglie di mezzo per sempre. `bottom` parte dall'altezza della nav piu' la
   tacca del telefono, altrimenti su iPhone finisce sotto la barra di sistema. */
#usoavviso{position:fixed;left:0;right:0;z-index:690;display:flex;justify-content:center;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));pointer-events:none}
#usoavviso .in{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;
  /* Il fondo largo non e' decorazione: il tasto tondo del Live sporge 22px
     sopra la barra e passerebbe sopra il testo. Cosi' gli passa sotto. */
  width:100%;max-width:560px;padding:10px 14px 32px;
  background:var(--card-alt);border-top:1px solid var(--bordo);
  font-size:11.5px;line-height:1.45;color:var(--testo-soft)}
#usoavviso p{margin:0}
#usoavviso a{color:var(--brand);font-weight:600;text-decoration:underline;white-space:nowrap}
#usoavviso button{flex:none;background:none;border:none;cursor:pointer;padding:2px 4px;
  color:var(--testo-soft);line-height:1;font-size:15px;font-family:inherit}
#usoavviso button:hover{color:var(--testo)}

/* nav */
nav{position:fixed;bottom:0;left:0;right:0;z-index:700;display:flex;justify-content:center;pointer-events:none}
nav .in{pointer-events:auto;display:flex;width:100%;max-width:560px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--bordo);height:var(--nav-h);padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--testo-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:600}
nav button .e{font-size:20px}
nav button.on{color:var(--brand)}
nav button.on .e{transform:scale(1.12)}
nav button.fab{position:relative;justify-content:flex-end;padding-bottom:10px}
nav button.fab .e{position:absolute;top:-22px;width:56px;height:56px;border-radius:20px;font-size:22px;
  background:var(--brand);color:var(--brand-testo);border:4px solid var(--superficie);
  box-shadow:0 3px 8px rgba(20,30,20,.14),0 8px 22px color-mix(in srgb, var(--brand) 35%, transparent);
  transform:none;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s}
nav button.fab.on .e{transform:none;box-shadow:0 3px 8px rgba(20,30,20,.14),0 10px 26px color-mix(in srgb, var(--brand) 50%, transparent)}
nav button.fab{color:var(--brand);font-weight:700}
.leaflet-container{font-family:inherit}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--card);color:var(--testo)}
/* ---------- desktop (le tracce si studiano da PC) — full-screen, no frame boxato ---------- */
@media(min-width:900px){
  html,body{background:var(--superficie)}
  #phone{max-width:none;width:100%;box-shadow:none;display:grid;grid-template-columns:260px 1fr;grid-template-rows:auto auto 1fr}
  #demobar{grid-column:1/-1}
  header{grid-column:1/-1;padding:16px 32px 14px}
  header h1{font-size:20px}
  nav{position:static;grid-column:1;grid-row:3;display:block;align-self:stretch;background:var(--superficie);border-right:1px solid var(--bordo)}
  nav .in{flex-direction:column;height:auto;max-width:none;border-top:none;padding:16px 0;position:sticky;top:74px;background:none;backdrop-filter:none}
  nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:13px 24px;font-size:14.5px;width:100%;border-right:3px solid transparent}
  nav button .e{font-size:20px}
  nav button.on{background:color-mix(in srgb, var(--brand) 10%, transparent);border-right-color:var(--brand)}
  nav button.fab{position:static;justify-content:flex-start;padding:13px 24px}
  nav button.fab .e{position:static;width:auto;height:auto;border-radius:0;background:none;color:inherit;
    border:none;box-shadow:none;font-size:20px}
  main{grid-column:2;grid-row:3;padding:28px 40px 48px;max-width:1400px}
  /* Da PC la barra di navigazione e' la colonna di sinistra, non una barra in
     basso: l'avviso si attacca al fondo della colonna del contenuto, se no
     galleggia in mezzo alla pagina a 66px dal bordo. */
  #usoavviso{bottom:0;left:260px;justify-content:flex-start}
  #usoavviso .in{max-width:none;padding:10px 40px;font-size:12px}
  #tab-home,#tab-dormire,#tab-live{max-width:800px}
  #searchbox{max-width:700px}
  #tab-percorso.on{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:stretch}
  #tab-percorso.on>.card{margin-bottom:0}
  /* Da PC la pagina Percorsi resta una colonna sola, larga come una pagina che
     si legge (non 1.400 px stirati), e la mappa si accorcia: cosi' intro, mappa
     e i tre tasti stanno insieme senza dover scorrere per scoprire che ci sono
     dei tasti. */
  #tab-percorso.on{display:block;max-width:860px}
  #tab-percorso.on>.card{margin-bottom:16px}
  #minimap{height:420px}
  .rgrid{gap:14px}
  .rcard-photo{height:126px}
  .rcard-body{padding:13px 15px 15px}
  .rcard-nome{font-size:17px;margin-bottom:6px}
  .rcard-num{font-size:15px}
  .rcard-liv{font-size:12px}
  #rv-desc{padding:0 12px;max-width:800px}
  #infolist{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:stretch}
  #infolist .icard{margin-bottom:0;align-self:start} /* chiusa e' bassa: non si stira sulla vicina aperta */
  #infolist .itheme, #infolist .snull{grid-column:1/-1}
  .bigbtns{grid-template-columns:repeat(4,1fr);max-width:900px}
  #gpsmap{height:560px}
  #stay22wrap{height:max(600px, min(78dvh, 780px))}
  #whipwrap{height:700px}
  #countdown{max-width:420px}
}


/* ---------- mappe incorporate a schermo pieno ----------
   Il pulsante sta DENTRO il riquadro, cosi' resta raggiungibile anche quando
   il riquadro copre lo schermo. 100dvh e non 100vh perche' su iOS la barra
   degli indirizzi mangia gli ultimi pixel e il pulsante finirebbe sotto.
   Con una mappa aperta si blocca lo scorrimento della pagina dietro. */
#stay22wrap, #whipwrap { position: relative; }
.fsbtn{position:absolute;left:10px;bottom:46px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bordo);background:var(--superficie);color:var(--testo);
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.fsbtn svg{display:block}
.mappapiena{position:fixed !important;inset:0;width:100vw;height:100dvh !important;
  z-index:1400;border-radius:0 !important;border:0 !important}
.mappapiena .fsbtn{left:14px;bottom:calc(46px + env(safe-area-inset-bottom))}
/* A sinistra e sollevato dal fondo di proposito: a destra copriva i comandi
   di zoom di Stay22, in basso a sinistra la loro riga di attribuzione. */
body.conmappapiena{overflow:hidden}

/* Il suggerimento che compare e sparisce da solo. Lo usa il tasto che salva la
   guida sul telefono: su iPhone apre il foglio di condivisione, e questo dice
   cosa cercarci dentro — la voce sta sotto la fila delle app, e senza una
   riga che lo dica la gente chiude il foglio senza aver capito.
   `pointer-events:none` perche' non deve mai rubare un tocco, e sta sopra la
   barra in basso (z-index 700) ma sotto il cancello. */
#sugg{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  transform:translateX(-50%) translateY(10px);max-width:min(92vw,420px);z-index:800;
  pointer-events:none;background:#1b1b1b;color:#fff;padding:12px 16px;border-radius:12px;
  font-size:15px;line-height:1.35;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0;transition:opacity .25s ease,transform .25s ease}
#sugg.visibile{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:900px){ #sugg{bottom:32px} }