/* ===========================================================================
   Applicazione ospite — identità Costa
   Riferimento: Costa Visual Identity Guidelines 21/22
     Blu     #0071A3   PANTONE 7690 C
     Giallo  #F9B000   PANTONE 143 C
     Font    Poppins. Extra Light 200 con le parole chiave in Extra Bold 800
             nella stessa riga è la firma tipografica del marchio.
   La schermata di accesso ha stili propri, incorporati in accedi.php.
   =========================================================================== */

@font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;
  src:url('font/poppins-extralight.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/poppins-regular.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('font/poppins-semibold.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('font/poppins-extrabold.woff2') format('woff2')}

:root{
  --blu:#0071A3;
  --blu-scuro:#005580;
  --blu-chiaro:#008ABA;
  --blu-velo:#E8F2F7;
  --giallo:#F9B000;
  --giallo-testo:#3A2800;

  --acqua:#6DAAC9;
  --petrolio:#588D9C;
  --verde:#9ABF62;
  --sabbia:#E4B66A;
  --corallo:#E26768;
  --viola:#8A4787;

  --testo:#12242F;
  --testo-2:#5C7180;
  --linea:#E2E7EA;
  --sfondo:#F6F8F9;
  --carta:#FFFFFF;
  /* La carta scura: la usa la variante «righe scure» delle novita'. E' un blu
     di famiglia, non un grigio, e sta qui e non li' perche' un colore usato
     in un posto solo finisce per essere dimenticato quando cambia il marchio. */
  --carta-scura:#0B2334;

  --ombra:0 2px 10px -4px rgba(18,36,47,.14);
  --ombra-2:0 2px 12px -5px rgba(18,36,47,.18);
  --ui:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* Un elemento con l'attributo `hidden` deve sparire, punto. Senza questa
   riga qualunque regola con display:flex o display:block lo batte, perche'
   una classe pesa piu' di un attributo. E' successo quattro volte in questo
   progetto — .nf-r, .ev, .btn, .chk — e ogni volta e' costato mezz'ora a
   capire perche' un blocco nascosto da JavaScript restava li'. */
[hidden]{display:none !important}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--sfondo);color:var(--testo);font-family:var(--ui);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--blu);outline-offset:2px;border-radius:5px}

.device{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
  background:var(--sfondo)}

/* ---------------------------------------------------------- intestazione
   Logo Costa a sinistra, informazione temporale a destra.
   Il trattamento cromatico segue la fase del ciclo di vita. */
.top{color:#fff;padding:15px 20px 14px;flex:none;position:relative}
.top-durante{background:var(--blu)}
.top-prima{background:linear-gradient(155deg,#00354F,#0071A3)}
.top-dopo{background:linear-gradient(155deg,#0071A3,#B07A12)}

.toprow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.top-l{flex:none;padding-top:2px}
/* Il marchio si dimensiona sull'altezza, non sulla larghezza: cosi' regge
   sia una forma quadrata sia un logotipo lungo senza ritagli. Il tetto di
   larghezza evita che un marchio molto orizzontale schiacci l'informazione
   temporale a destra. */
.top-marchio{display:block;height:75px;width:auto;max-width:148px;opacity:.97;
  object-fit:contain;object-position:left center}
/* Il ripiego scritto, per quando il file del marchio non c'e' affatto: meglio
   il nome dell'evento in chiaro che un rettangolo vuoto. */
.top-marchio-t{display:block;font-size:15px;font-weight:800;letter-spacing:.04em;
  line-height:1.15;max-width:148px;opacity:.97}
.top-r{flex:1;min-width:0;text-align:right}
.top-r small{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;opacity:.68;margin-bottom:5px}
.top-v{display:block;font-size:27px;line-height:1;font-weight:200;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums}
.top-v em{font-style:normal;font-size:14px;font-weight:500;letter-spacing:.01em;
  margin-left:2px;opacity:.9}
.top-d{display:block;margin-top:6px;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;opacity:.74;font-weight:600}

.who{margin-top:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* ⚠⚠ L'avviso del fuso del telefono. Sta DENTRO la testata, sotto il nome:
   è lì che si guarda l'ora, ed è lì che va detto su quale orologio è. Fondo
   caldo e non rosso — non è un guasto, è una cosa da sapere — e compare solo
   quando i due fusi sono davvero diversi. */
.top-fuso{margin:6px 12px 0;padding:7px 10px;border-radius:9px;
  background:rgba(249,176,0,.16);border:1px solid rgba(249,176,0,.42);
  color:#FFE9BF;font-size:11.5px;line-height:1.4;font-weight:600}
.who-n{font-size:14px;font-weight:600}

/* striscia visibile solo quando lo staff sta provando una fase */
/* La fascia della fase di prova. Va a capo su piu' righe da quando puo'
   portare anche la nota sul programma: senza `flex-wrap` la nota schiacciava
   il commutatore in una colonna di tre parole per riga. */
.top-prova{margin:12px -20px -14px;padding:8px 20px;background:rgba(0,0,0,.28);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  display:flex;justify-content:space-between;gap:6px 10px;align-items:center;
  flex-wrap:wrap}
.top-prova b{color:var(--giallo)}
.top-prova a{text-decoration:underline;opacity:.85;font-weight:600;text-transform:none;
  letter-spacing:0}

/* ---------------------------------------------------------------- corpo */
.body{flex:1;padding:20px}
.eyebrow{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--testo-2);font-weight:800;margin:24px 0 11px}
.eyebrow:first-child{margin-top:0}

/* ------------------------------------------------------ scheda principale */
.hero{background:var(--carta);border-radius:16px;padding:18px;box-shadow:var(--ombra);
  display:flex;gap:15px}
.hero-main{flex:1;min-width:0}
/* ⚠ IL RIQUADRO DI CIO' CHE E' IN CORSO si distingue da quello di cio' che
   deve ancora cominciare: un filo giallo sul bordo sinistro, lo stesso giallo
   dell'ora. Serve a chi apre l'app di corsa e legge una parola sola. */
.hero.ora{box-shadow:var(--ombra),inset 4px 0 0 var(--giallo)}

/* ⚠ LA RIGA DEL CARTELLINO — E LO STILE STA QUI, NON NELLA PAGINA. Era dentro
   una chiusura di `home.php`, cioe' esisteva solo quando quella chiusura
   veniva eseguita: il giorno in cui la stessa riga e' servita anche nella fase
   «dopo», con una condizione diversa, si sarebbe disegnata **senza stile** —
   e una riga senza stile non da' errore, sembra una scelta. Un foglio di stile
   emesso dentro un `if` e' una regola che c'e' solo a volte. */
.cb-go{display:flex;gap:12px;align-items:center;margin:0 0 16px;padding:13px 14px;
  background:var(--carta);border-radius:14px;text-decoration:none;color:inherit;
  box-shadow:inset 3px 0 0 var(--blu)}
.cb-go-i{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:rgba(0,113,163,.10);color:var(--blu)}
.cb-go-i svg{width:19px;height:19px}
.cb-go-b{min-width:0}
.cb-go-b b{display:block;font-size:15px;line-height:1.25}
.cb-go-b span{display:block;font-size:12.5px;color:var(--testo-2);margin-top:1px}
.hero-when{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;
  background:var(--giallo);color:var(--giallo-testo);padding:3px 9px;border-radius:4px;
  font-variant-numeric:tabular-nums}
.hero-t{font-size:23px;line-height:1.16;letter-spacing:-.02em;font-weight:200;
  color:var(--testo);margin:10px 0}
.hero-t b,.hero-t strong{font-weight:800}
.hero-m{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:var(--testo-2)}
.hero-m b{color:var(--blu);font-weight:700}
.hero-d{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--testo-2)}

/* scala dei ponti: coordinata primaria a bordo */
.decks{width:34px;flex:none;display:flex;flex-direction:column;align-items:center;padding-top:3px}
.decks-l{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--testo-2);
  margin-bottom:6px;font-weight:800}
.deck{width:100%;height:8px;display:flex;align-items:center;justify-content:flex-end;
  border-right:2px solid var(--linea);padding-right:5px;position:relative}
.deck i{display:block;width:6px;height:1.5px;background:var(--linea);border-radius:1px}
.deck.on{border-right-color:var(--giallo)}
.deck.on i{width:14px;height:2.5px;background:var(--giallo)}
.deck.on::after{content:attr(data-n);position:absolute;right:calc(100% + 5px);top:50%;
  transform:translateY(-50%);font-size:11.5px;font-weight:800;color:var(--blu);
  font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- elenco attività */
.list{background:var(--carta);border-radius:16px;overflow:hidden;box-shadow:var(--ombra)}
.item{display:flex;gap:13px;padding:14px 16px;border-bottom:1px solid var(--linea);
  align-items:flex-start}
.item:last-child{border-bottom:none}
.item-h{flex:none;width:44px;font-size:12.5px;font-weight:800;color:var(--blu);
  font-variant-numeric:tabular-nums;padding-top:1px}
.item-b{flex:1;min-width:0}
.item-t{font-size:14px;font-weight:500;line-height:1.32;color:var(--testo)}
.item-m{font-size:12px;color:var(--testo-2);margin-top:3px}
.item-x{font-size:12.5px;color:var(--testo-2);margin-top:5px;line-height:1.5}
.item-d{flex:none;font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--blu);
  background:var(--blu-velo);border-radius:4px;padding:3px 7px;white-space:nowrap;text-align:center}
/* La zona del ponte sta sotto il numero e non accanto: la pastiglia deve
   restare stretta, e il numero e' cio' che si legge per primo. */
.item-z{display:block;font-size:9.5px;font-weight:600;letter-spacing:0;opacity:.82;margin-top:1px}
/* «A terra» non e' un ponte in meno: e' un'altra cosa, e ha un altro colore.
   Vuol dire scendere dalla nave, e col tender. */
.item-d.terra{color:#7A5F14;background:rgba(249,176,0,.16)}
.item-meet{font-size:12px;font-weight:600;color:#7A5F14;margin-top:3px}
/* ⚠ Lo stesso vestito del ritrovo, e non e' pigrizia: sono due righe che
   dicono la stessa specie di cosa — «attenzione, qui c'e' un dettaglio che
   cambia dove o quando devi essere» — e vestirle diverse vorrebbe dire
   insegnare a leggerne una sola. */
.item-tz{font-size:12px;font-weight:600;color:#7A5F14;margin-top:3px}
.sk-tz{display:block;font-size:12px;font-weight:600;color:#7A5F14;margin-top:4px}

/* La card toccabile. Resta una card, non diventa un bottone: cambia solo il
   fondo alla pressione, perche' l'unica cosa che deve dire e' «si puo'
   aprire». La freccia e' un segno, non il bersaglio — il bersaglio e' tutta
   la card. */
a.item{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
a.item:active{background:rgba(0,113,163,.06)}
.item-r{flex:none;display:flex;align-items:center;gap:8px;align-self:center}
.item-ch{flex:none;width:7px;height:7px;border-right:2px solid var(--testo-2);
  border-bottom:2px solid var(--testo-2);transform:rotate(-45deg);opacity:.45}
a.item:active .item-ch{opacity:.9}

/* ------------------------------------------------------- scheda attivita' */
.sk{background:var(--carta);border-radius:16px;box-shadow:var(--ombra);padding:18px}
.sk-quando{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sk-quando b{font-size:19px;font-weight:800;color:var(--blu);font-variant-numeric:tabular-nums}
.sk-quando span{font-size:12.5px;color:var(--testo-2)}
.sk-t{font-size:21px;font-weight:700;line-height:1.25;margin:7px 0 0;color:var(--testo);
  display:flex;align-items:flex-start;gap:9px}
.sk-ev{flex:none;color:var(--hl);margin-top:2px}
.sk-hl{display:inline-block;margin-top:9px;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--hl);border:1.5px solid var(--hl);
  border-radius:20px;padding:3px 10px}
.sk-b{margin-top:20px;padding-top:16px;border-top:1px solid var(--linea)}
.sk-et{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--testo-2);margin-bottom:7px}
.sk-luogo{font-size:16px;font-weight:650;color:var(--testo)}
/* La sede: su quale nave, o in quale citta'. Compare solo quando ce n'e'
   piu' di una — con una sola sarebbe la ripetizione dell'unica cosa che
   l'ospite non puo' sbagliare. */
.sk-sede{margin-top:3px;font-size:12.5px;font-weight:700;color:var(--testo-2);
  letter-spacing:.01em}
/* Il ponte porta alla pianta ed e' grande abbastanza da toccarsi: e' la cosa
   che si cerca cinque minuti prima dell'inizio. */
.sk-ponte{display:flex;align-items:center;gap:9px;margin-top:9px;padding:11px 13px;
  background:var(--blu-velo);border-radius:11px;color:var(--blu)}
.sk-ponte b{font-size:14px;font-weight:800}
.sk-ponte i{font-style:normal;font-size:13px;opacity:.85}
.sk-pianta{margin-left:auto;font-size:11.5px;font-weight:600;opacity:.8}
.sk-terra{display:inline-block;margin-top:9px;font-size:11px;font-weight:800;
  letter-spacing:.04em;color:#7A5F14;background:rgba(249,176,0,.16);
  border-radius:5px;padding:4px 9px}
.sk-r{margin-top:9px;font-size:13.5px;color:var(--testo)}
.sk-r b{color:#7A5F14}
.sk-i{margin-top:4px;font-size:13px;color:var(--testo-2)}
/* «Apri nelle mappe»: un collegamento che ESCE, e si vede che esce. Non ha
   l'aria di un pulsante dell'app perche' non lo e' — porta fuori, e la
   frasetta accanto lo dice invece di lasciarlo scoprire. */
.sk-map{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 13px;
  border:1px solid var(--linea);border-radius:10px;font-size:13.5px;font-weight:700;
  color:var(--blu);background:var(--carta)}
.sk-map:hover{border-color:var(--blu)}
.sk-map-o{font-size:11px;font-weight:500;color:var(--testo-2)}
.sk-d{font-size:14.5px;line-height:1.6;color:var(--testo)}
.sk-p{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--testo-2)}
.sk-p svg{flex:none;color:var(--blu)}

/* ------------------------------------------------- contenuti multimediali */
.item-mm{flex:none;display:inline-flex;color:var(--blu);opacity:.62}
.sk-c .sk-ct{font-size:15px;font-weight:650;color:var(--testo);margin-bottom:9px}
/* L'IMMAGINE SI ADATTA, MA NON SI INGRANDISCE MAI.
   Prima era `width:100%`, che non e' la stessa cosa: un'immagine piccola —
   un logo, uno schema, una foto ritagliata stretta — veniva tirata a forza
   fino alla larghezza della colonna e arrivava sfocata sul telefono. Una foto
   di 60 pixel diventava un quadrato di 338: cinque volte e mezzo.
   `max-width` la rimpicciolisce quando serve e la lascia stare quando non
   serve, che e' l'unico comportamento sensato per un contenuto caricato da
   qualcun altro, di cui non sappiamo la misura.

   Il tetto in altezza serve per il verso opposto: una foto verticale in un
   telefono occuperebbe due schermate e mezzo, e la didascalia sotto non la
   vedrebbe nessuno. A 72vh la foto sta dentro lo schermo con la sua riga di
   testo. */
.sk-img{display:block;max-width:100%;width:auto;height:auto;max-height:72vh;
  margin:0 auto;border-radius:11px;background:var(--sfondo)}
.sk-cap{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--testo-2)}

/* Testo formattato. Sono i tredici tag che il server lascia passare, e questa
   e' l'unica lista di stili che li riguarda: quello che si scrive in console
   non porta con se' nessun colore, nessuna dimensione e nessun carattere —
   l'aspetto lo decide qui l'app, che e' l'unico modo perche' un testo scritto
   in fretta la sera prima non sfondi la pagina sul telefono di un ospite. */
.sk-rt>*:first-child{margin-top:0}
.sk-rt>*:last-child{margin-bottom:0}
.sk-rt p{margin:0 0 .7em}
.sk-rt h3{font-size:15.5px;font-weight:700;line-height:1.35;margin:1.1em 0 .4em;
  color:var(--testo)}
.sk-rt h4{font-size:14px;font-weight:700;line-height:1.35;margin:1em 0 .3em;color:var(--testo)}
.sk-rt ul,.sk-rt ol{margin:0 0 .7em;padding-left:1.35em}
.sk-rt li{margin-bottom:.3em}
.sk-rt blockquote{margin:0 0 .7em;padding:2px 0 2px 12px;border-left:3px solid var(--linea);
  color:var(--testo-2)}
/* Un collegamento va visto senza toccarlo: sul telefono non c'e' il passaggio
   del mouse a dirlo. */
.sk-rt a{color:var(--blu);text-decoration:underline;text-underline-offset:2px;
  overflow-wrap:anywhere}
.sk-rt strong,.sk-rt b{font-weight:700;color:var(--testo)}

/* La facciata del video: finche' nessuno tocca, qui dentro c'e' solo la
   nostra immagine. L'iframe lo crea il JavaScript al primo tocco. */
.sk-v{position:relative;border-radius:11px;overflow:hidden;background:#0D1B24;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
/* Anche l'anteprima del video si monta, non si ritaglia: quasi tutti i poster
   sono gia' 16:9 e non cambia niente, ma quello storto non perde i bordi. */
.sk-vp{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:#0E1A22}
.sk-play{position:relative;width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px -4px rgba(0,0,0,.5)}
.sk-play span{display:block;width:0;height:0;margin-left:5px;
  border-left:19px solid var(--blu);border-top:12px solid transparent;
  border-bottom:12px solid transparent}
.sk-play:active{transform:scale(.94)}
.sk-vf{position:absolute;right:9px;bottom:8px;font-size:10px;font-weight:700;
  letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.5);padding:3px 7px;border-radius:4px}
.sk-v.on{display:block;aspect-ratio:16/9}
.sk-v.on iframe{width:100%;height:100%;border:0;display:block}
/* A schermo intero il riquadro non deve piu' essere 16:9 dentro la colonna:
   deve essere lo schermo. Senza queste due righe il video finisce a schermo
   intero ma resta grande come prima, in mezzo al nero. */
.sk-v:fullscreen,.sk-v:-webkit-full-screen{width:100%;height:100%;aspect-ratio:auto;
  border-radius:0;background:#000}
.sk-v:fullscreen iframe,.sk-v:-webkit-full-screen iframe{width:100%;height:100%}
.sk-vn{margin-top:7px;font-size:11.5px;color:var(--testo-2)}

/* ---------------------------------------------------------------- giorni */
.days{display:flex;gap:7px;overflow-x:auto;padding-bottom:16px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;min-width:54px;text-align:center;padding:9px 10px;border-radius:12px;
  background:var(--carta);border:1.5px solid transparent;box-shadow:var(--ombra)}
.day b{display:block;font-size:17px;font-weight:800;color:var(--testo);line-height:1.1;
  font-variant-numeric:tabular-nums}
.day span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--testo-2);
  font-weight:600}
.day.on{background:var(--blu);border-color:var(--blu)}
.day.on b,.day.on span{color:#fff}

/* ------------------------------------------------------- messaggi: elenco */
.ms-ok{background:#EAF4EE;border:1px solid #BFDCCC;color:#2E6B4F;border-radius:10px;
  padding:11px 14px;font-size:13px;margin-bottom:14px;font-weight:500}
.ms-list{display:flex;flex-direction:column;gap:10px}
.ms-row{--acc:var(--blu);display:flex;background:var(--carta);border-radius:14px;
  overflow:hidden;box-shadow:var(--ombra)}
.ms-row::before{content:'';width:4px;flex:none;background:var(--acc)}
/* ── LA PRIORITA' ALTA, che fino al 15 ottobre 2026 non si vedeva ─────────
   ⚠⚠ La colonna c'era, il modulo della console la offriva, la notifica la
      usava per il TTL — e dentro l'app un messaggio `high` era identico a
      tutti gli altri: il modello gli metteva addosso la classe `.pri`, che nel
      foglio **non esisteva**. Serve proprio a un annullamento, quindi doveva
      esistere.
   ⚠ Si vede da lontano ma non urla: barra piu' spessa, fondo appena tinto, e
     l'etichetta scritta accanto alla data. Un messaggio urgente che sembra una
     sirena viene chiuso senza leggerlo. */
.ms-row.pri{background:#FDF6F5;border:1px solid #F3D3D0}
/* ⚠ Il colore si scrive sulla barra e NON su `--acc`: la variabile la mette il
     modello riga per riga con uno `style=` in linea — il colore della
     tipologia del messaggio — e in linea vince sempre. Il risultato era una
     riga rosa con la barra gialla: visto guardando lo schermo, non il codice. */
.ms-row.pri::before{width:6px;background:var(--corallo)}
.ms-full.pri{border-left:6px solid var(--corallo);padding-left:12px}
.ms-pri-t{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;
          letter-spacing:.07em;text-transform:uppercase;color:#B03A3B}
.ms-main{flex:1;min-width:0;display:flex;gap:12px;padding:14px 10px 14px 13px}
.ms-ico{flex:none;width:34px;height:34px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;color:var(--acc);
  background:color-mix(in srgb, var(--acc) 13%, #fff)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ms-ico{background:var(--blu-velo)}
}
.ms-body{flex:1;min-width:0;display:flex;flex-direction:column}
.ms-kind{font-size:9px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
  color:var(--acc)}
.ms-t{font-size:14px;font-weight:600;line-height:1.3;color:var(--testo);margin-top:3px}
.ms-row.unread .ms-t{font-weight:800}
.ms-x{font-size:12px;color:var(--testo-2);margin-top:4px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-meta{display:flex;flex-wrap:wrap;gap:3px 9px;font-size:12px;color:var(--testo-2);
  margin-top:5px}
.ms-meta b{color:var(--testo);font-weight:600;font-variant-numeric:tabular-nums}
.ms-d{font-size:10.5px;color:var(--testo-2);margin-top:6px;font-variant-numeric:tabular-nums}
.ms-act{flex:none;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:0 9px;border-left:1px solid var(--linea)}
.ms-b{display:flex;align-items:center;justify-content:center;width:30px;height:28px;
  color:var(--testo-2);border-radius:7px}
.ms-b:hover{background:var(--sfondo);color:var(--blu)}
.ms-b.del:hover{color:var(--corallo)}
.ms-note{margin-top:18px;font-size:11.5px;color:var(--testo-2);text-align:center}

/* ------------------------------------------------------ messaggi: lettura */
.ms-back{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  color:var(--testo-2);margin-bottom:15px;padding:3px 0}
.ms-back:hover{color:var(--blu)}
.ms-full{--acc:var(--blu);background:var(--carta);border-radius:16px;overflow:hidden;
  box-shadow:var(--ombra-2)}
.ms-full-head{background:var(--acc);color:#fff;padding:16px 18px}
.ms-full-kind{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.22);
  padding:5px 12px 5px 9px;border-radius:999px}
.ms-full-ico{display:flex;line-height:0}
.ms-full-t{margin-top:11px;font-size:21px;line-height:1.2;font-weight:200;letter-spacing:-.02em}
.ms-full-t b,.ms-full-t strong{font-weight:800}
.ms-full-d{margin-top:7px;font-size:10.5px;opacity:.86;letter-spacing:.05em;
  font-variant-numeric:tabular-nums}
.ms-full-body{padding:16px 18px 18px}
.ms-fields{display:flex;flex-direction:column;gap:10px;padding-bottom:15px;
  border-bottom:1px solid var(--linea);margin-bottom:15px}
.ms-fields > div{display:flex;gap:12px;align-items:baseline}
.ms-fields dt{flex:none;width:70px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--testo-2);font-weight:800}
.ms-fields dd{flex:1;margin:0;font-size:14px;color:var(--testo);font-weight:500}
.ms-full-b{font-size:14px;line-height:1.62;color:#33474F}
.ms-cta{display:block;margin-top:18px;padding:13px;text-align:center;border-radius:10px;
  background:var(--acc);color:#fff;font-size:14px;font-weight:700}
.ms-cta:hover{filter:brightness(1.07)}
.ms-full-act{display:flex;gap:9px;margin-top:16px}
.ms-fb{flex:1;padding:11px;background:var(--carta);border:1.5px solid var(--linea);
  border-radius:10px;color:var(--testo-2);font-size:13px;font-weight:600}
.ms-fb:hover{border-color:var(--blu);color:var(--blu)}
.ms-fb.del:hover{border-color:var(--corallo);color:var(--corallo)}

/* --------------------------------------------------------------- profilo */
.pf-ok{background:#EAF4EE;border:1px solid #BFDCCC;color:#2E6B4F;border-radius:10px;
  padding:11px 14px;font-size:13px;margin-bottom:6px;font-weight:500}
.pf-card{background:var(--carta);border-radius:16px;padding:17px;box-shadow:var(--ombra)}
.pf-nome{font-size:18px;font-weight:800;letter-spacing:-.01em}
.pf-riga{font-size:12.5px;color:var(--testo-2);margin-top:3px}
.pf-segs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pf-seg{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  color:var(--blu);background:var(--blu-velo);padding:4px 9px;border-radius:4px}
.pf-hint{font-size:12px;color:var(--testo-2);margin:-4px 0 11px;line-height:1.5}
.pf-hint-in{margin:8px 0 0}
.pf-lang{display:flex;flex-direction:column;gap:7px}
.pf-l{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--carta);border:1.5px solid var(--linea);border-radius:11px;
  padding:11px 14px;box-shadow:var(--ombra);transition:border-color .15s,background .15s}
.pf-l:hover{border-color:var(--acqua)}
.pf-l.on{border-color:var(--blu);background:#F2F8FB}
.pf-l-f{flex:none;display:flex;align-items:center;line-height:0}
.pf-l-f .bnd{border-radius:2.5px;box-shadow:0 0 0 1px rgba(18,36,47,.12);display:block}
.pf-l-n{flex:1;font-size:14px;font-weight:500;color:var(--testo)}
.pf-l-c{flex:none;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--testo-2)}
.pf-l.on .pf-l-c{color:var(--blu)}
.pf-l-v{color:var(--blu);font-weight:800;font-size:15px}
.pf-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;
  letter-spacing:.16em;font-weight:700;color:var(--blu)}
.pf-b{width:100%;padding:12px;background:var(--giallo);color:var(--giallo-testo);
  border-radius:10px;font-size:14px;font-weight:700;text-align:center}
.pf-sw{display:flex;align-items:center;gap:11px;font-size:13.5px;cursor:pointer}
.pf-sw input{width:18px;height:18px;accent-color:var(--blu);flex:none}
.pf-esci{text-align:center;margin-top:28px;padding-bottom:6px}
.pf-esci a{color:var(--testo-2);font-size:13px;text-decoration:underline}

/* ------------------------------------------ installazione e notifiche */
.pwa-b{background:var(--carta);border-radius:14px;padding:15px 16px;margin-top:12px;
  box-shadow:var(--ombra)}
.pwa-t{font-size:14px;font-weight:700;margin-bottom:5px}
.pwa-h{font-size:12.5px;color:var(--testo-2);line-height:1.5}
.pwa-cta{width:100%;margin-top:12px;padding:12px;background:var(--blu);color:#fff;
  border-radius:10px;font-size:14px;font-weight:700}
.pwa-cta:hover{background:var(--blu-scuro)}
.pwa-ios{margin-top:10px;color:var(--testo-2)}
.pwa-warn{margin-top:9px;color:var(--corallo)}

/* avviso una tantum dopo l'accesso */
.nt-ask{background:var(--carta);border-left:4px solid var(--giallo);border-radius:14px;
  padding:15px 16px;margin-bottom:18px;box-shadow:var(--ombra)}
.nt-ask-t{font-size:14px;font-weight:700;color:var(--testo)}
.nt-ask-h{font-size:12.5px;color:var(--testo-2);margin-top:4px;line-height:1.5}
.nt-ask-r{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap;align-items:center}
.nt-b{padding:9px 18px;background:var(--blu);color:#fff;border-radius:8px;
  font-size:13px;font-weight:700}
.nt-l{color:var(--testo-2);font-size:12.5px;font-weight:500;text-decoration:underline;
  padding:6px 2px}
.nt-l.last{margin-left:auto}

/* ------------------------------------------------------------ stati vuoti */
.empty{background:var(--carta);border-radius:14px;padding:30px 20px;text-align:center;
  color:var(--testo-2);font-size:13.5px;box-shadow:var(--ombra)}
.entry{padding:70px 24px;text-align:center}
.entry-t{font-size:24px;font-weight:200;letter-spacing:-.02em;margin-bottom:10px}
.entry-t b{font-weight:800}
.entry-p{color:var(--testo-2);font-size:14px}

/* ------------------------------------------------------------ navigazione */
/* LO z-index NON E' UN ORNAMENTO, QUI: E' QUELLO CHE TIENE LA BARRA SOPRA.
   `position:sticky` da sola non basta. Senza uno z-index la barra vale zero, e
   QUALUNQUE cosa nel contenuto con uno z-index positivo le passa sopra: le
   fotografie delle novita' (`.cm-m img`, z-index 2) coprivano le voci del
   menu mentre si scorreva, e il pulsante del video (z-index 4) e il filo
   giallo delle fissate (z-index 4) avrebbero fatto lo stesso.
   Il numero e' 20 e non 5 perche' il massimo che gira nel foglio e' 4: serve
   margine per quello che verra'. C'e' una prova che lo verifica leggendo
   questo file, e non guarda il numero — guarda che sia il piu' alto. */
.nav{flex:none;display:flex;background:var(--carta);border-top:1px solid var(--linea);
  position:sticky;bottom:0;z-index:20}
.nav a{flex:1;padding:9px 2px 12px;text-align:center;font-size:9px;letter-spacing:.05em;
  text-transform:uppercase;font-weight:800;color:var(--testo-2);position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-i{display:block;margin:0 auto 4px;width:22px;height:22px}
.nav-i svg{width:100%;height:100%;display:block}
.nav a[aria-current="page"]{color:var(--blu)}
.nav a[aria-current="page"]::before{content:'';position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:28px;height:3px;background:var(--giallo);
  border-radius:0 0 3px 3px}
.badge{position:absolute;top:5px;left:50%;margin-left:9px;min-width:15px;height:15px;
  border-radius:8px;background:var(--corallo);color:#fff;font-size:9px;font-weight:800;
  line-height:15px;padding:0 4px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------- consenso */
.cs{padding:34px 4px 20px;max-width:440px;margin:0 auto}
.cs-t{font-size:24px;line-height:1.18;letter-spacing:-.02em;font-weight:200;color:var(--testo)}
.cs-t b{font-weight:800}
.cs-p{margin-top:9px;font-size:14px;color:var(--testo-2);line-height:1.55}
.cs-card{background:var(--carta);border-radius:16px;padding:18px;margin-top:20px;
  box-shadow:var(--ombra);font-size:13.5px;line-height:1.62;color:#33474F}
.cs-h{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--testo-2);margin-bottom:11px}
.cs-card p{margin-bottom:10px}
.cs-card p:last-child{margin-bottom:0}
.cs-n{color:var(--testo-2);font-style:italic;font-size:12.5px;padding-top:10px;
  border-top:1px solid var(--linea);margin-top:14px}
/* Le sette sezioni dell'informativa. Il titolino serve a rendere il testo
   scorribile: sette blocchi corti si leggono, un muro di dodici righe no. */
.cs-s{font-size:12.5px;font-weight:800;color:var(--testo);margin:16px 0 5px;
  letter-spacing:-.01em}
.cs-card h3:first-of-type{margin-top:14px}
.cs-tit{margin-top:16px;padding-top:12px;border-top:1px solid var(--linea);
  font-size:13px;line-height:1.5}
.cs-tit-l{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:800;color:var(--testo-2);margin-bottom:6px}
.cs-l{display:inline-block;margin-top:7px;color:var(--blu);font-weight:700;
  text-decoration:underline}
.cs-b{display:block;width:100%;margin-top:20px;padding:14px;background:var(--blu);
  color:#fff;border-radius:11px;font-size:15px;font-weight:700}
.cs-b:hover{background:var(--blu-scuro)}
/* Rilettura: stesso posto e stesso ingombro del pulsante, ma non e' un'azione
   — e' un ritorno. Se restasse blu sembrerebbe di accettare una seconda volta. */
.cs-b-q{background:transparent;color:var(--testo-2);border:1px solid var(--linea);
  text-align:center}
.cs-b-q:hover{background:var(--carta);color:var(--testo)}

/* ---------------------------------------------------------- pagina Altro */
.hub{background:var(--carta);border-radius:16px;overflow:hidden;box-shadow:var(--ombra)}
.hub-r{display:flex;align-items:center;gap:13px;padding:14px 16px;
  border-bottom:1px solid var(--linea);color:inherit}
.hub-r:last-child{border-bottom:none}
a.hub-r:hover{background:var(--sfondo)}
.hub-r.off{opacity:.62}
.hub-i{flex:none;width:36px;height:36px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;color:var(--c);
  background:color-mix(in srgb, var(--c) 13%, #fff)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .hub-i{background:var(--blu-velo)}
}
.hub-i svg{width:19px;height:19px}
.hub-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hub-t{font-size:14.5px;font-weight:600;color:var(--testo);line-height:1.28}
/* ⚠ ERA UNA RIGA SOLA CON I PUNTINI, e su un telefono da 390 px due voci su
   otto finivano tagliate a meta': «Avvisi dell'organizz…» e «Le cose da
   preparare, spuntate una al…» — dove «una alla volta» e' proprio la parte
   che spiega la cosa. In inglese uguale: «one tick at a ti…».
   ⚠ Trovato guardando la figura mentre scrivevo il manuale dell'ospite, non
   da una prova: una frase tagliata e' sintatticamente perfetta.
   Due righe, e poi i puntini: il tetto resta, la frase ci sta. */
.hub-h{font-size:12px;color:var(--testo-2);line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hub-a{flex:none;display:flex;color:var(--testo-2);opacity:.55}
.hub-a svg{width:17px;height:17px}
.hub-on{flex:none;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:800;color:#2E6B4F;background:#EAF4EE;padding:4px 9px;border-radius:4px}
.hub-soon{flex:none;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--testo-2);background:var(--sfondo);
  border:1px solid var(--linea);padding:4px 8px;border-radius:4px;white-space:nowrap}
.hub-out{text-align:center;margin-top:28px;padding-bottom:6px}
.hub-out a{color:var(--testo-2);font-size:13px;text-decoration:underline}

/* ---------------------------------------------------- mappa della nave */
.mp-t{font-size:22px;font-weight:200;letter-spacing:-.02em;margin-bottom:14px}
.mp-t b{font-weight:800}

/* selettore ponte */
.mp-decks{display:flex;gap:5px;overflow-x:auto;padding-bottom:14px;scrollbar-width:none}
.mp-decks::-webkit-scrollbar{display:none}
/* ⚠⚠ IL SELETTORE DELLA NAVE (10 ottobre 2026). Compare solo quando le navi
   sono piu' di una: con una sola sarebbe una riga in piu' da leggere su ogni
   telefono, tutti i giorni, per una scelta che non c'e'. */
.mp-ships{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.mp-s{padding:8px 14px;border-radius:20px;background:var(--carta);
  border:1.5px solid transparent;box-shadow:var(--ombra);text-decoration:none;
  font-size:13px;font-weight:700;color:var(--testo)}
.mp-s.on{background:var(--blu);border-color:var(--blu);color:#fff}
/* Nessun ponte: si dice, invece di lasciare un riquadro che sembra un
   caricamento che non finisce. */
.mp-none{margin:18px 0;color:var(--muto);font-size:14px;line-height:1.5}
.mp-d{flex:none;min-width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;border-radius:10px;background:var(--carta);
  border:1.5px solid transparent;box-shadow:var(--ombra)}
.mp-d b{font-size:14px;font-weight:800;color:var(--testo);font-variant-numeric:tabular-nums}
.mp-d.on{background:var(--blu);border-color:var(--blu)}
.mp-d.on b{color:#fff}

.mp-info{display:flex;flex-direction:column;gap:3px;margin-bottom:11px}
.mp-n{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--blu)}
.mp-l{font-size:12.5px;color:var(--testo-2);line-height:1.45}

/* riquadro di visualizzazione */
.mp-box{position:relative;height:340px;background:var(--carta);border-radius:16px;
  overflow:hidden;box-shadow:var(--ombra);touch-action:pan-y;cursor:grab;
  display:flex;align-items:center;justify-content:center}
.mp-box.zoom{cursor:grab;touch-action:none}
.mp-box:active{cursor:grabbing}
.mp-pan{transform-origin:center center;will-change:transform;line-height:0}
.mp-img{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.mp-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--testo-2);background:var(--carta);z-index:2}

/* comandi di ingrandimento */
.mp-zoom{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;
  flex-direction:column;gap:1px;background:var(--carta);border-radius:11px;
  overflow:hidden;box-shadow:0 3px 14px -4px rgba(18,36,47,.35)}
.mp-zoom button{width:40px;height:38px;display:flex;align-items:center;justify-content:center;
  color:var(--blu);border-bottom:1px solid var(--linea)}
.mp-zoom button:last-child{border-bottom:none}
.mp-zoom button:hover{background:var(--blu-velo)}
.mp-zoom button:active{background:var(--blu);color:#fff}
.mp-zoom svg{width:19px;height:19px}

.mp-hint{margin-top:12px;font-size:12px;color:var(--testo-2);text-align:center}
.mp-note{margin-top:8px;font-size:11px;color:var(--testo-2);opacity:.8;
  text-align:center;line-height:1.5}

@media (min-width:520px){ .mp-box{height:400px} }
.hero-deck{display:inline-flex;align-items:center;gap:4px;color:var(--blu)}
.hero-deck::after{content:'';width:5px;height:5px;border-right:1.6px solid var(--blu);
  border-bottom:1.6px solid var(--blu);transform:rotate(-45deg);opacity:.65;margin-left:1px}
.hero-deck i{font-style:normal;font-weight:600;opacity:.82}
/* ⚠ La pastiglia «a terra» non porta alla pianta dei ponti — a terra i ponti
   non ci sono — quindi non porta la freccia della pianta. Ma DAL 3 OTTOBRE, se
   il luogo ha le coordinate, porta alle mappe: allora un segno serve, ed e' un
   segno DIVERSO, perche' dice un'altra cosa — `.fuori`, si esce dall'app.
   Senza coordinate resta muta com'era: un segno che promette un collegamento
   inesistente e' peggio di nessun segno. */
.hero-deck.terra{color:#7A5F14}
/* ⚠ E il colore vale anche per il grassetto dentro. La riga sopra c'era da
   sempre, ma `.hero-m b` ridipingeva di blu proprio la parola «A terra»: la
   regola esisteva e non si vedeva, e la pastiglia restava del colore del
   ponte — cioe' del colore di una cosa che a terra non c'e'. Adesso «A terra»
   e «Ritrovo» sono della stessa tinta, come dicono la stessa cosa. */
.hero-deck.terra b{color:inherit}
.hero-deck.terra::after{display:none}
/* ⚠ `.fuori` si veste DA SOLO e non come `.terra.fuori`: una regola a tre
   pezzi la trova solo chi la cerca, e il setaccio delle classi composte del
   banco — che oggi guarda la console e domani guardera' anche qui — cerca
   «base + modificatore». */
/* ⚠ E un po' piu' alto degli altri: misurato, il bersaglio era 180x20 px, e
   venti pixel per un collegamento che porta fuori dall'app, su un telefono, in
   banchina, sono pochi. Cresce solo questo — la pastiglia del ponte resta
   com'e' da mesi, e cambiare in silenzio una cosa che sta gia' in campo e' un
   altro tipo di errore. */
.hero-deck.fuori{text-decoration:none;padding:5px 0}
.hero-deck.fuori i{opacity:.9}
.hero-fuori{display:inline-flex;align-items:center;opacity:.75;margin-left:1px}
.hero-fuori svg{width:12px;height:12px}
.hero-meet{color:#7A5F14;font-weight:600}

/* ⚠ IL TITOLO DEL RIQUADRO E' UN COLLEGAMENTO alla scheda dell'attivita'.
   Non deve SEMBRARE un collegamento — blu e sottolineato, un titolo di 23 px
   diventa un'insegna — ma deve avere un segno che si tocca: il gallone, lo
   stesso delle righe della giornata. */
.hero-a{color:inherit;text-decoration:none}
.hero-a:active{opacity:.72}
.hero-ch{display:inline-block;width:8px;height:8px;border-right:2px solid var(--blu);
  border-bottom:2px solid var(--blu);transform:rotate(-45deg);opacity:.6;
  margin:0 0 3px 9px;vertical-align:middle}

/* La vecchia regola .top-costa e' stata rimossa: il marchio in testata ora
   e' .top-marchio, definito piu' sopra. La firma Costa a pie' di pagina
   resta e usa .firma. */

/* firma istituzionale a piè di pagina */
.firma{display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:34px;padding-top:22px;border-top:1px solid var(--linea)}
.firma-l{font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--testo-2);font-weight:700}
.firma img{width:62px;height:auto;display:block;opacity:.9}

/* ------------------------------------------- fase 1: conto alla rovescia */
.cd{position:relative;overflow:hidden;background:linear-gradient(150deg,#00354F,#0071A3);
  border-radius:18px;padding:22px 18px;color:#fff;text-align:center}
.cd::after{content:'';position:absolute;right:-40px;bottom:-56px;width:150px;height:150px;
  border-radius:50%;background:rgba(249,176,0,.16)}
.cd-l,.cd-n,.cd-u,.cd-w{position:relative;z-index:1}
.cd-l{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.72;font-weight:700}
.cd-n{font-size:58px;font-weight:200;line-height:1;letter-spacing:-.04em;margin:8px 0 2px;
  font-variant-numeric:tabular-nums}
.cd-u{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--giallo)}
.cd-w{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);
  font-size:12.5px;opacity:.9}
.cd-w b{font-weight:700}
.cd-b{display:block;margin-top:13px;padding:12px;text-align:center;border-radius:10px;
  background:var(--blu-velo);color:var(--blu);font-size:13.5px;font-weight:700}

/* ------------------------------------------------ fase 3: ringraziamento */
.thx{position:relative;overflow:hidden;background:linear-gradient(150deg,#0071A3,#B07A12);
  border-radius:18px;padding:24px 18px;color:#fff}
.thx::after{content:'';position:absolute;left:-30px;top:-40px;width:130px;height:130px;
  border-radius:50%;background:rgba(255,255,255,.1)}
.thx-l,.thx-t,.thx-s{position:relative;z-index:1}
.thx-l{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.75;font-weight:700}
.thx-t{font-size:25px;font-weight:200;letter-spacing:-.025em;line-height:1.18;margin-top:9px}
.thx-t b{font-weight:800}
.thx-s{margin-top:16px;display:flex;gap:22px}
.thx-s b{display:block;font-size:23px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.thx-s span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.82;
  font-weight:600}

/* -------------------------------------- selettore di fase (collaudatori) */
.ph{background:var(--carta);border-radius:16px;padding:15px 16px;box-shadow:var(--ombra);
  border-left:4px solid var(--sabbia)}
.ph-h{font-size:12px;color:var(--testo-2);line-height:1.5;margin-bottom:12px}
.ph-r{display:flex;gap:7px}
.ph-b{flex:1;padding:10px 6px;text-align:center;border-radius:9px;
  border:1.5px solid var(--linea);font-size:12.5px;font-weight:600;color:var(--testo-2)}
.ph-b.on{background:var(--blu);border-color:var(--blu);color:#fff;font-weight:700}
.ph-x{display:block;margin-top:11px;text-align:center;font-size:12px;
  color:var(--testo-2);text-decoration:underline}


/* ------------------------------------------------------- informazioni
   Righe di stato con pallino, accordion nativo, blocco diagnostico.
   Nessuna dipendenza da script per restare leggibile senza rete. */
.nf-card{background:var(--carta);border-radius:16px;box-shadow:var(--ombra);overflow:hidden}
.nf-card-p{padding:16px 17px}
.nf-r{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--linea)}
.nf-r:last-child{border-bottom:none}
/* display:flex vince sull'attributo hidden: va dichiarato a mano */
.nf-r[hidden]{display:none}
.nf-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--linea)}
.nf-dot[data-s="ok"]{background:#4C9A6B}
.nf-dot[data-s="warn"]{background:var(--giallo)}
.nf-dot[data-s="off"]{background:var(--corallo)}
.nf-dot[data-s="wait"]{background:var(--linea)}
.nf-l{flex:1;font-size:13.5px;color:var(--testo)}
.nf-v{flex:none;font-size:12.5px;color:var(--testo-2);font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right}

.nf-act{display:block;width:100%;margin-top:11px;padding:12px;border-radius:11px;
  background:var(--carta);border:1.5px solid var(--linea);font-size:13.5px;
  font-weight:600;color:var(--testo);text-align:center}
.nf-act:hover{border-color:var(--blu);color:var(--blu)}
.nf-act:disabled{opacity:.5}
.nf-act-in{margin-top:12px}
.nf-note{margin-top:8px;font-size:11.5px;color:var(--testo-2);line-height:1.5}
.nf-hint{font-size:12.5px;color:var(--testo-2);line-height:1.55}
.nf-warn{margin-top:11px;font-size:12px;color:var(--corallo);line-height:1.5;
  padding-left:11px;border-left:2.5px solid var(--corallo)}

.nf-qs{display:flex;flex-direction:column;gap:8px}
.nf-q{background:var(--carta);border-radius:14px;box-shadow:var(--ombra);overflow:hidden}
.nf-q summary{padding:14px 16px;font-size:13.5px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.nf-q summary::-webkit-details-marker{display:none}
.nf-q summary::after{content:'';flex:none;width:8px;height:8px;margin-right:3px;
  border-right:2px solid var(--testo-2);border-bottom:2px solid var(--testo-2);
  transform:rotate(45deg);transition:transform .18s}
.nf-q[open] summary::after{transform:rotate(-135deg)}
.nf-a{padding:0 16px 16px;font-size:12.5px;color:var(--testo-2);line-height:1.6}
.nf-ul{margin:10px 0 0;padding-left:17px;display:flex;flex-direction:column;gap:7px}
.nf-msg{margin-top:9px;font-size:12px;color:var(--blu);line-height:1.5}

.nf-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  letter-spacing:.09em;font-weight:600;color:var(--testo);background:var(--sfondo);
  border:1px solid var(--linea);border-radius:9px;padding:11px;text-align:center;
  margin-top:11px;user-select:all}
.nf-code-big{font-size:19px;letter-spacing:.14em}
.nf-blob{display:none;width:100%;height:110px;margin-top:9px;font-size:11px;
  font-family:ui-monospace,monospace;border:1px solid var(--linea);border-radius:9px;padding:8px}

.nf-kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  font-size:12.5px;color:var(--testo-2);border-bottom:1px solid var(--linea)}
.nf-kv:last-child{border-bottom:none}
.nf-kv b{color:var(--testo);font-weight:600;text-align:right}
.nf-link{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:600;
  color:var(--blu);text-decoration:underline}


/* ---------------------------------------------------------- colophon */
/* Il marchio del prodotto, in cima al colophon. DUE VESTITI, e si sceglie in
   base a com'e' fatto il FILE, non a come piace la pagina.

   ⚠ `max-width` in percentuale e non in pixel: il logo e' orizzontale e su un
   telefono stretto un valore fisso lo farebbe uscire dallo schermo o restare
   ridicolo su uno largo. E `height:auto` perche' il file puo' cambiare
   proporzioni senza che questa riga debba saperlo. Vale per tutt'e due.

   1 · `.col-brand` — CON LA PIASTRELLA BIANCA.
   ⚠ Il fondo bianco arrotondato serve al logo, non al disegno: se il file ha
   il fondo bianco DENTRO I PIXEL, su un tema scuro finirebbe in un rettangolo
   bianco a spigoli vivi in mezzo alla pagina. Meglio dichiararlo.
   ⚠⚠ NON E' CODICE MORTO ANCHE SE OGGI NON LA USA NESSUNO: e' il vestito
   giusto per un marchio senza trasparenza, ed e' il caso piu' frequente
   quando un logo arriva da chi fa la grafica. Si torna qui cambiando una
   classe nel modello, senza riscrivere niente.

   2 · `.col-brand-trasp` — SENZA NIENTE DIETRO.
   Per un file con la trasparenza vera, come `logo.png`: il marchio si
   appoggia allo sfondo della pagina e segue il tema chiaro o scuro da solo.
   ⚠ Su un marchio opaco questa classe fa il danno che l'altra evita, ed e'
   per questo che le due restano separate invece di essere una con
   un'eccezione. */
.col-brand{display:flex;justify-content:center;margin:4px 0 22px}
.col-brand img{max-width:78%;height:auto;display:block;background:#fff;
  border-radius:12px;padding:6px 10px}
.col-brand-trasp{display:flex;justify-content:center;margin:4px 0 22px}
.col-brand-trasp img{max-width:78%;height:auto;display:block}
.col-hero{font-weight:200;font-size:26px;line-height:1.3;letter-spacing:-.02em;margin-bottom:12px}
.col-hero b{font-weight:800}
.col-sub{font-size:13px;color:var(--testo-2);line-height:1.6;max-width:34em}
.col-num{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.col-num div{background:var(--carta);padding:14px 8px;text-align:center}
.col-num b{display:block;font-weight:800;font-size:21px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.col-num span{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--testo-2);margin-top:5px;font-weight:600}
.col-p{background:var(--carta);border-radius:14px;box-shadow:var(--ombra);padding:2px 16px}
.col-p-r{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--linea);align-items:flex-start}
.col-p-r:last-child{border-bottom:none}
.col-p-r svg{width:19px;height:19px;flex:none;color:var(--blu);margin-top:1px}
.col-p-r b{display:block;font-weight:600;font-size:13.5px;margin-bottom:2px}
.col-p-r p{font-size:12.5px;color:var(--testo-2);line-height:1.55}
.col-au{background:var(--carta);border-radius:16px;box-shadow:var(--ombra);
  padding:21px 18px;text-align:center}
.col-au-m{max-height:44px;max-width:70%;margin:0 auto 14px;display:block}
.col-au h3{font-weight:800;font-size:18px;letter-spacing:-.015em}
.col-au-r{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blu);
  font-weight:700;margin-top:5px}
.col-au p{font-size:12.5px;color:var(--testo-2);line-height:1.65;margin:12px auto 0;max-width:30em}
.col-az{display:flex;gap:9px;margin-top:17px}
.col-az a{flex:1;border-radius:10px;padding:11px 8px;font-size:13px;font-weight:600;
  text-align:center;border:1.5px solid var(--linea);color:var(--testo)}
.col-az a.pri{background:var(--blu);border-color:var(--blu);color:#fff}
.col-qr{display:flex;gap:14px;align-items:center;margin-top:17px;padding-top:16px;
  border-top:1px solid var(--linea);text-align:left}
.col-qr-i{width:78px;height:78px;flex:none;border-radius:8px;overflow:hidden;line-height:0}
.col-qr-i svg{width:100%;height:100%;display:block}
.col-qr b{display:block;font-size:12.5px;font-weight:600;margin-bottom:3px}
.col-qr p{font-size:11.5px;color:var(--testo-2);line-height:1.5}
.col-qr code{font-size:12px;font-weight:600;color:var(--blu);word-break:break-all}
.col-tech{margin-top:24px;padding-top:18px;border-top:1px solid var(--linea)}

/* ===========================================================================
   Desktop
   ---------------------------------------------------------------------------
   L'applicazione resta mobile-first: qui sotto non si tocca nulla di quanto
   precede, si aggiunge soltanto il comportamento sopra una certa larghezza.

   Tutte le regole sono agganciate a `body > .device`, cioe' al solo guscio
   dell'applicazione vera. In mockup.html i telefoni sono annidati dentro
   .mk-frame, quindi non vengono raggiunti: il banco di lavoro del design
   continua a mostrare nove schermate affiancate come prima.

   La schermata di accesso ha stili propri incorporati ed e' esclusa.
   =========================================================================== */

/* --------------------------------------------------- scheda centrata */
@media (min-width: 720px) {

  body:not(.s-accesso) {
    background: linear-gradient(180deg, #E8EDF0, #DCE4E8 70%);
    padding: 30px 20px 44px;
    min-height: 100vh;
  }

  body:not(.s-accesso) > .device {
    max-width: 560px;
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 46px -22px rgba(18, 36, 47, .5),
                0 2px 8px -3px rgba(18, 36, 47, .16);
  }

  /* La barra non e' piu' appiccicata al fondo dello schermo ma chiude
     la scheda: su desktop non esiste il pollice che la cerca in basso. */
  body:not(.s-accesso) > .device > .nav { position: static; }

  body:not(.s-accesso) > .device > .body { padding: 24px 26px 30px; }
  body:not(.s-accesso) > .device > .top  { padding: 18px 26px 16px; }
}

/* ------------------------------------------- barra laterale e due colonne
   :has() serve a distinguere l'ospite autenticato, che ha la navigazione,
   dalle pagine che non ce l'hanno. Dove non e' supportato queste regole
   vengono ignorate in blocco e resta la scheda centrata: nessun danno. */
@media (min-width: 1080px) {

  body:not(.s-accesso) > .device:has(> .nav) {
    max-width: 1020px;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "nav top" "nav body";
  }

  body:not(.s-accesso) > .device:has(> .nav) > .top  { grid-area: top; }
  body:not(.s-accesso) > .device:has(> .nav) > .body { grid-area: body; padding: 28px 32px 38px; }

  body:not(.s-accesso) > .device:has(> .nav) > .nav {
    grid-area: nav;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 20px 0;
    background: var(--sfondo);
    border-top: none;
    border-right: 1px solid var(--linea);
  }

  body:not(.s-accesso) > .device:has(> .nav) > .nav a {
    flex: none;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    padding: 12px 20px;
    font-size: 10.5px;
    letter-spacing: .09em;
    overflow: visible;
  }

  body:not(.s-accesso) > .device:has(> .nav) > .nav .nav-i {
    margin: 0;
    width: 20px;
    height: 20px;
  }

  /* Il segno della pagina corrente passa da barretta in alto a filetto
     verticale sul bordo, che e' la convenzione delle barre laterali. */
  body:not(.s-accesso) > .device:has(> .nav) > .nav a[aria-current="page"]::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 26px;
    border-radius: 0 3px 3px 0;
  }

  body:not(.s-accesso) > .device:has(> .nav) > .nav .badge {
    position: static;
    margin: 0 0 0 auto;
  }

  /* Elenchi su due colonne: con lo spazio disponibile una colonna sola
     lascia mezza pagina vuota e allunga inutilmente lo scorrimento. */
  body:not(.s-accesso) > .device .list,
  body:not(.s-accesso) > .device .ms-list,
  body:not(.s-accesso) > .device .nf-qs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }

  body:not(.s-accesso) > .device .col-num { grid-template-columns: repeat(6, 1fr); }

  /* I selettori orizzontali non hanno piu' bisogno di scorrere. */
  body:not(.s-accesso) > .device .days,
  body:not(.s-accesso) > .device .mp-decks {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* La pianta della nave e' il contenuto che guadagna di piu' dallo spazio. */
  body:not(.s-accesso) > .device .mp-box { height: 520px; }
}

/* Schermi molto larghi: si allarga la colonna, non il testo. */
@media (min-width: 1400px) {
  body:not(.s-accesso) > .device:has(> .nav) { max-width: 1140px; }
}

/* Ambiente di prova. Sta sopra tutto, anche sopra la testata, perche' il suo
   scopo e' essere visto prima di qualunque altra cosa. */
.amb-g{background:#A8791F;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;text-align:center;padding:5px 12px;line-height:1.35}

/* ====================== EVIDENZE ======================
   Fino a ieri questa card non aveva un colore: orario, titolo, luogo, tutto
   grigio. Percio' il colore qui e' l'unica cosa colorata dello schermo, e
   funziona solo finche' resta raro.

   --hl   il colore pieno: va sul simbolo e sulla barra laterale, dove sopra
          non ci scrive nessuno e puo' essere acceso quanto vuole
   --hl-t la tinta di fondo, calcolata dal server con la stessa formula che
          l'anteprima in console usa in JavaScript

   Il calcolo sta nel PHP e non in color-mix() perche' questi sono i telefoni
   personali di cinquemila persone, non quello di chi sviluppa.

   Le righe del programma sono separate da un bordo inferiore, non incorniciate:
   percio' l'evidenza a sfondo pieno tinge la riga e le mette una barra a
   sinistra, invece di provare a colorare una cornice che non c'e'. */
.item-ev{display:inline-flex;align-items:center;color:var(--hl);margin-right:6px;
  vertical-align:-2px;line-height:0}
.item.hl .item-t{font-weight:700}
.item.hl-bg{background:var(--hl-t);box-shadow:inset 3px 0 0 var(--hl)}

.legenda{margin:16px 16px 4px;padding-top:13px;border-top:1px solid var(--linea)}
.legenda-t{font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--testo-2);font-weight:800;margin-bottom:7px}
.legenda-r{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--testo-2);padding:3px 0;line-height:1.4}
.legenda-r span{display:inline-flex;line-height:0;flex:none}
/* Voce senza simbolo: nella legenda si mostra come pastiglia di colore, che e'
   il segno che l'ospite ha davvero visto sulla card. */
.legenda-p{display:block;width:12px;height:12px;border-radius:3px;background:currentColor}


/* ==========================================================================
   TELEFONO GIRATO
   Il manifesto non blocca piu' l'orientamento — serviva per i video, che in
   verticale sono un francobollo fra due fasce nere, e faceva comodo anche a
   chi gira il telefono per avere il testo piu' grande. Il prezzo lo paga
   questo foglio: su uno schermo alto 390 px l'intestazione da 158 px si
   prendeva il quaranta per cento della pagina e restavano centosettanta pixel
   di contenuto, cioe' due righe e mezzo.
   Quindi, solo quando lo schermo e' basso e largo: l'intestazione si stringe,
   il marchio si rimpicciolisce e la colonna si allarga. Non e' una seconda
   interfaccia — sono nove righe che tolgono aria dove non serve. La misura
   e' sull'altezza e non sull'orientamento da solo, perche' un tablet in
   orizzontale ha spazio in abbondanza e non ha bisogno di niente di tutto
   questo.
   ========================================================================== */
@media (orientation:landscape) and (max-height:560px){
  /* La colonna si allarga: su 844 px di larghezza una striscia da 480 lascia
     due margini vuoti da 180, e il video ne guadagna quasi il doppio. */
  .device{max-width:720px}
  .top{padding:9px 20px 8px}
  .top-marchio{height:42px;max-width:104px}
  .top-v{font-size:21px}
  .top-r small{margin-bottom:2px}
  .top-d{margin-top:3px}
  .who{margin-top:8px;padding-top:7px}
  .body{padding:14px 20px}
  .eyebrow{margin:16px 0 8px}
  /* Il video prende tutta la colonna e non deve superare lo schermo in
     altezza, altrimenti per vederlo intero bisogna scorrere mentre parte. */
  .sk-v{max-height:74vh}
}


/* Sipario chiuso: la fascia che spiega perche' il programma non c'e'.
   Tono d'attesa, non d'errore — non e' un guasto, e' una cosa che arrivera'. */
.chiuso{background:var(--blu-velo);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.chiuso b{display:block;font-size:14.5px;font-weight:700;color:var(--blu-scuro);margin-bottom:4px}
.chiuso span{display:block;font-size:13px;line-height:1.5;color:var(--testo-2)}

/* ---------------------------------------------------- comunicazioni */
/* Il flusso. Non e' una casella di posta: niente pallini di non letto, niente
   mittente, niente data in grande. E' una vetrina, e le schede sono grandi
   perche' spesso ce ne sono tre o quattro in tutto — un elenco compatto di
   quattro righe sembrerebbe l'avanzo di qualcosa di piu' grande. */
.cm-h1{font-size:19px;font-weight:700;color:var(--testo);margin:0 0 14px}
.cm-l{display:flex;flex-direction:column;gap:11px;
      /* Le due misure che tengono in riga tutto l'elenco. Stanno qui, in un
         posto solo: cambiare l'altezza delle righe e' una riga di CSS. */
      --cm-h:156px;    /* l'altezza della riga */
      --cm-med:216px}  /* quanto si prende l'immagine */

/* ══════════════════════ LA RIGA DI UNA NOVITA' ══════════════════════
   Sono notizie, e a catturare l'attenzione e' la fotografia: quindi
   l'immagine si prende piu' di meta' riga. Tutte le righe hanno la stessa
   altezza e la stessa spartizione, in «Novita'» e in «Oggi».

   IL RIQUADRO E' SEMPRE PIENO, E NIENTE VIENE RITAGLIATO.
   Il fondo e' la stessa fotografia, ingrandita e sfocata; sopra ci sta la
   fotografia intera. Le due cose che sembravano incompatibili — «l'immagine
   riempie» e «l'immagine non si taglia» — stanno insieme cosi': il
   passepartout non e' piu' un grigio che cambia a ogni scheda, e' la foto
   stessa fuori fuoco. */
.cm-i{display:flex;height:var(--cm-h);background:var(--carta);border-radius:13px;
  box-shadow:var(--ombra);overflow:hidden;position:relative}
.cm-i:active{transform:scale(.995)}
/* Le fissate hanno un filo giallo sul lato. E' DISEGNATO SOPRA, non e' un
   bordo: un bordo si mangerebbe tre pixel e la riga fissata avrebbe una
   spartizione diversa dalle altre. */
.cm-i.pin::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--giallo);z-index:4}

/* ⚠⚠ IL SEGNO «NUOVA» (8 ottobre 2026). Una notifica scartata dalla schermata
   di blocco non lasciava nessuna traccia dentro l'app: il pallino sulla voce
   dice CHE c'e' qualcosa, questo dice QUALE.
   ⚠ Sta in ALTO A DESTRA e non a sinistra: a sinistra c'e' gia' il filo giallo
     delle fissate, e due segni sullo stesso lato si leggono come uno solo.
   ⚠ E `z-index:5`, sopra la fotografia e sopra il filo: su una locandina la
     scheda E' l'immagine, e sotto di lei il segno non si vedrebbe. */
.cm-i .cm-nuova{position:absolute;top:8px;right:8px;z-index:5;
  background:var(--corallo);color:#fff;border-radius:7px;padding:2px 7px;
  font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* Una riga che non porta da nessuna parte non fa finta di essere toccabile. */
.cm-i.fermo{cursor:default}
.cm-i.fermo:active{transform:none}

.cm-m{flex:0 0 var(--cm-med);width:var(--cm-med);position:relative;overflow:hidden;
  background:#0E2836}
/* Il fondo. `inset` negativo e la scala servono a coprire i bordi che la
   sfocatura schiarisce: senza, restava un alone chiaro tutto intorno. */
.cm-sf{position:absolute;inset:-14%;background-size:cover;background-position:center;
  filter:blur(16px) saturate(1.25) brightness(.82);transform:scale(1.12)}
/* La fotografia, intera. `width:auto` e `height:auto` non sono ridondanti:
   senza, una foto piu' piccola del riquadro verrebbe ingrandita per
   riempirlo, ed e' proprio la cosa da non fare all'immagine di qualcun altro. */
.cm-m img{position:relative;z-index:2;display:block;margin:0 auto;top:50%;
  transform:translateY(-50%);width:auto;height:auto;max-width:100%;max-height:100%}
/* Sul video il segno del play: dice che li' c'e' da guardare, non da leggere. */
.cm-m.vid::after{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;
  margin:-20px 0 0 -20px;border-radius:50%;background:rgba(255,255,255,.94);
  box-shadow:0 2px 9px rgba(0,0,0,.3);z-index:3}
.cm-m.vid::before{content:'';position:absolute;left:50%;top:50%;z-index:4;
  margin:-8px 0 0 -4px;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--blu)}

.cm-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:13px 14px}
/* SENZA IMMAGINE il testo si prende tutta la riga: titolo piu' grande e il
   sommario, che altrimenti non ci starebbe. */
.cm-i.senza .cm-b{padding:14px 16px}
.cm-i.senza .cm-t{font-size:17px;-webkit-line-clamp:2}

/* L'occhiello: e' questa riga a rendere ordinato un elenco fatto di pezzi
   diversi. Ogni scheda comincia allo stesso modo, alla stessa altezza. */
.cm-k{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--testo-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-t{margin-top:4px;font-size:15px;font-weight:700;line-height:1.27;color:var(--testo);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cm-d{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--testo-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* La riga in fondo, sempre nello stesso punto: e' li' che l'occhio va a
   cercare «e adesso?». */
.cm-p{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:10px;
  min-height:16px}
.cm-n{font-size:11px;color:var(--testo-2);font-variant-numeric:tabular-nums}
.cm-go{margin-left:auto;display:inline-flex;align-items:center;gap:3px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--blu)}
.cm-go svg{margin-top:-1px}

/* ══════════ LA SCHEDA LOCANDINA ══════════
   Non e' una variante d'aspetto: e' una singola comunicazione che ha dentro
   una LOCANDINA, cioe' un'immagine con il messaggio gia' disegnato dentro.
   Vale in tutte e tre le varianti, perche' non c'e' niente da adattare —
   sopra la fotografia non ci va nulla.

   L'ALTEZZA NON E' PIU' FISSA, ed e' l'unica regola del flusso che questa
   scheda rompe. La detta il rapporto dell'immagine, ed e' il solo modo
   perche' su ogni telefono la scheda sia ESATTAMENTE la fotografia — niente
   sfocato ai lati, niente ritaglio, nessuna deformazione — con qualunque
   rapporto arrivi il file. Dentro una riga alta 156 fissi una locandina non
   ci starebbe, e la scritta sarebbe illeggibile: cioe' l'unica cosa che
   questa scheda deve fare.

   L'eccezione e' voluta e va tenuta rara: se tutte le novita' diventano
   locandine, l'elenco torna a non avere nessun ritmo. */
.cm-l .cm-i.loc{height:auto;display:block;background:var(--carta-scura)}
/* La specificita' e' alta di proposito: la variante «a tutta immagine» piu'
   sotto sposta e ridimensiona lo stesso riquadro, e senza questo peso in piu'
   vincerebbe lei perche' viene scritta dopo. La locandina non si adatta alle
   varianti: e' sempre se stessa. */
.cm-l .cm-i.loc .cm-m{display:block;position:relative;width:100%;flex:none;height:auto}
.cm-l .cm-i.loc .cm-m img{position:static;display:block;transform:none;margin:0;
  width:100%;height:auto;max-width:none;max-height:none}
/* Il filo giallo delle fissate resta: tre pixel sul bordo, che non coprono
   nessuna scritta. E' l'unico segno che tocca l'immagine. */

/* ══════════ LA VARIANTE «RIGHE SCURE» ══════════
   Si accende dalla console. E' la risposta a «piu' immersivo, ma senza velo
   sopra la fotografia»: la spartizione resta IDENTICA a quella chiara — 216
   px di fotografia, il resto al testo, riga alta 156 — e cambia solo il
   colore del pannello, che diventa il blu di marca con il titolo bianco.

   SULLA FOTOGRAFIA NON CADE NIENTE. E' la differenza che conta rispetto ad
   «a tutta immagine»: li' il testo sta sopra l'immagine e il velo serve a
   farlo leggere, e quel velo l'immagine la paga. Qui il testo sta accanto,
   quindi non serve nessun velo e il contrasto del titolo non dipende da
   quale fotografia carica la segreteria.

   Il pannello e' tinta unita e non la fotografia sfocata: identico su ogni
   scheda, e non costa lavoro al telefono.

   Le schede senza immagine diventano scure anche loro — tutto il pannello,
   visto che non c'e' fotografia. Se restassero bianche, un elenco misto
   sembrerebbe rotto invece che vario. */
.cm-l.scure .cm-i{background:var(--carta-scura)}
.cm-l.scure .cm-k{color:rgba(255,255,255,.72)}
.cm-l.scure .cm-t{color:#fff}
.cm-l.scure .cm-d{color:rgba(255,255,255,.78)}
.cm-l.scure .cm-n{color:rgba(255,255,255,.72)}
/* Il richiamo diventa giallo: il blu su fondo scuro non si legge. */
.cm-l.scure .cm-go{color:var(--giallo)}

/* ══════════ LA VARIANTE «A TUTTA IMMAGINE» ══════════
   Si accende dalla console, non si tocca qui. Stessa riga, stesso alto,
   stessi elementi: cambia solo dove stanno. La fotografia si prende tutta la
   riga e il testo ci va sopra, con un velo scuro che parte da sinistra.

   LA FOTOGRAFIA SI APPOGGIA A DESTRA, e non e' un vezzo: il velo copre la
   meta' sinistra, e con l'immagine centrata il velo cadrebbe proprio sul
   soggetto. A destra la parte nitida resta scoperta, e a sinistra si vede il
   fondo sfocato — che e' comunque la stessa foto.

   Il ritaglio non c'e' nemmeno qui: la foto resta intera, e' il fondo a
   riempire. */
.cm-l.pieno .cm-m{position:absolute;inset:0;width:auto;flex:none;z-index:1}
.cm-l.pieno .cm-m img{margin:0 0 0 auto}
/* Il testo si appoggia in fondo, come su una locandina: sopra c'e' la
   fotografia, sotto quello che c'e' da sapere. */
.cm-l.pieno .cm-b{position:relative;z-index:2;width:100%;justify-content:flex-end}
.cm-l.pieno .cm-i:not(.senza) .cm-p{margin-top:8px}
/* Il velo. Va sotto al testo e sopra alla fotografia, e si ferma prima del
   bordo destro: l'immagine deve restare l'immagine. */
.cm-l.pieno .cm-i:not(.senza) .cm-b::before{content:'';position:absolute;inset:0;
  z-index:-1;background:linear-gradient(90deg,
    rgba(6,26,38,.93) 0%, rgba(6,26,38,.80) 44%, rgba(6,26,38,.14) 100%)}
.cm-l.pieno .cm-i:not(.senza) .cm-k{color:rgba(255,255,255,.74)}
.cm-l.pieno .cm-i:not(.senza) .cm-t{color:#fff;-webkit-line-clamp:2}
.cm-l.pieno .cm-i:not(.senza) .cm-n{color:rgba(255,255,255,.72)}
/* Il richiamo diventa giallo: il blu su fondo scuro non si legge. */
.cm-l.pieno .cm-i:not(.senza) .cm-go{color:var(--giallo)}
.cm-l.pieno .cm-i:not(.senza) .cm-b{padding:14px 16px}
/* Il segno del play sta al centro dell'immagine, che qui e' a destra. */
.cm-l.pieno .cm-m.vid::after{left:auto;right:64px;margin-left:0}
.cm-l.pieno .cm-m.vid::before{left:auto;right:79px;margin-left:0}
/* SENZA IMMAGINE resta la riga chiara: niente velo su niente. */

.cm-void{background:var(--carta);border-radius:13px;box-shadow:var(--ombra);
  padding:22px 18px;font-size:13.5px;line-height:1.55;color:var(--testo-2)}
/* In «Oggi» sono le stesse righe, con le stesse misure: l'ospite passa da una
   schermata all'altra e ritrova la stessa comunicazione uguale a sé stessa. */
.cm-home{margin-bottom:14px}

.top-prova-n{flex:1 0 100%;order:3;text-transform:none;letter-spacing:0;
  font-weight:400;font-size:11.5px;line-height:1.4;opacity:.88}
/* Una comunicazione senza titolo: il primo blocco non deve portarsi dietro il
   filo sopra, che li' separerebbe da niente. */
/* Una scheda che comincia direttamente da un blocco: il primo non si porta
   dietro il filo sopra, che li' separerebbe da niente. */
.sk-senza-t > .sk-b:first-child,
.sk-senza-t > .sk-c:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---------------------------------------------- il pulsante che porta fuori
   Grande e pieno, perche' e' l'unica cosa in una comunicazione che FA
   qualcosa invece di raccontarla. E sotto la scritta c'e' il dominio: chi
   tocca deve sapere dove sta andando prima di andarci, non dopo. */
/* Lo stacco sopra non e' decorazione: il pulsante e' l'unica cosa della
   scheda che FA qualcosa, e attaccato alla riga di testo che lo precede si
   legge come la sua ultima riga. Un dito di spazio e torna a essere un
   oggetto a se'. */
.sk-vai{display:block;margin-top:18px;background:var(--blu);color:#fff;border-radius:12px;
  padding:14px 16px;text-align:center;box-shadow:0 2px 10px rgba(0,113,163,.22)}
/* Se il pulsante e' l'unica cosa del blocco (una chiamata all'azione secca)
   il margine sopra separerebbe da niente. */
.sk-b > .sk-vai:first-child{margin-top:2px}
.sk-vai:active{transform:scale(.99)}
.sk-vai-t{display:block;font-size:15px;font-weight:700;line-height:1.3}
.sk-vai-d{display:inline-flex;align-items:center;gap:4px;margin-top:5px;
  font-size:11.5px;opacity:.85;word-break:break-all}
/* Una scheda che non porta da nessuna parte non fa finta di essere toccabile. */
.cm-i.fermo{cursor:default}
.cm-i.fermo:active{transform:none}
/* NESSUNA SCHEDA E' UN CASO A PARTE.
   Una comunicazione di sola fotografia aveva avuto per un giro la finestra
   che si prendeva tutta la scheda: l'altezza esterna restava quella, ma il
   passepartout diventava piu' alto che sulle altre — e il passepartout deve
   essere identico ovunque, altrimenti l'occhio se ne accorge anche quando il
   rettangolo esterno combacia.
   Quindi: stessa finestra, stessa fascia, su tutte. Se la fascia non ha
   niente da dire resta vuota, ed e' il prezzo dell'omogeneita'. */

/* ── «CI SARÒ» ────────────────────────────────────────────────────────────
   Il pulsante è grande e pieno perché è l'unica cosa che si tocca in questa
   scheda; la riga sotto dice che non è una prenotazione, e sta SOTTO e non
   dentro il pulsante: una parola sola — «Prenota» — prometterebbe un posto
   che nessuno garantisce, e una promessa più precisa del codice è un difetto.

   Quando si è già iscritti il pulsante cambia natura: non è più un invito, è
   uno stato. Verde, con la spunta, e accanto «tocca per disdire» — perché uno
   stato che si può cambiare deve dire come. */
.is-f{margin:0}
.is-b{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;
  border:0;border-radius:26px;background:var(--blu);color:#fff;font:inherit;font-size:15px;
  font-weight:650;cursor:pointer}
.is-b.si{background:#E8F3ED;color:#215F45;box-shadow:inset 0 0 0 1.5px #8FC4A9}
.is-b svg{flex:none}
.is-x{display:inline-block;margin-left:10px;font-size:12.5px;color:var(--testo-2)}
.is-h{margin-top:9px;font-size:12.5px;color:var(--testo-2);line-height:1.4}
.is-msg{margin-bottom:11px;padding:9px 12px;border-radius:9px;font-size:13.5px;
  background:#E8F3ED;color:#215F45}
.is-msg.av{background:#FBF3E2;color:#6E5310}

/* ── I TRASFERIMENTI A SPOLA: si sceglie un'ora ──────────────────────────
   ⚠ Un pulsante per orario, alti 48px: si toccano con il pollice, in banchina,
     con il telefono in una mano sola. I 44px consigliati sono un minimo, non
     un obiettivo.
   ⚠ La propria partenza resta un pulsante e non sparisce: chi ha gia' scelto
     deve vedere DOVE e', non un buco nell'elenco. */
.sk-slot-h{margin:8px 0 2px}

/* ── L'ATTIVITA' ANNULLATA, che resta a chi c'era ─────────────────────────
   ⚠ Non rosso pieno: nell'app il rosso non e' mai stato uno stato, e su una
     riga piena di testo diventa illeggibile. Fondo rosa tenue, barra rossa a
     sinistra, titolo barrato, e LA PAROLA SCRITTA — che si legge anche da chi
     il rosso non lo distingue. */
.item.item-ann{background:#FDF3F2;box-shadow:inset 3px 0 0 var(--corallo)}
.item.item-ann .item-t{text-decoration:line-through;color:var(--testo-2)}
.item-mia{margin-top:2px;font-size:12.5px;font-weight:700;color:#5F7D2E}
.item-ann-t{margin-top:2px;font-size:11.5px;font-weight:800;letter-spacing:.07em;
            text-transform:uppercase;color:#B03A3B}
/* La stessa cosa nella scheda, dove c'e' spazio per dire anche il perche'. */
.sk-ann{margin:10px 0;padding:10px 14px;border-radius:10px;background:#FDF3F2;
        border:1px solid #F3D3D0}
.sk-ann b{display:block;color:#B03A3B;text-transform:uppercase;letter-spacing:.07em;font-size:12px}
.sk-slot{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.sk-sl{display:flex;align-items:center;justify-content:space-between;gap:10px;
       min-height:48px;padding:8px 14px;border:1px solid var(--linea);border-radius:10px;
       background:#fff;font:inherit;cursor:pointer;text-align:left;width:100%}
.sk-sl-o{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.sk-sl-p{font-size:13px;color:var(--testo-2)}
.sk-sl.mio{border-color:var(--verde);background:#F2F7EA}
.sk-sl.mio .sk-sl-p{color:#5F7D2E;font-weight:600}
/* ⚠ Una corsa esaurita si vede e non si tocca: toglierla dall'elenco
     farebbe sembrare che quell'ora non esista, e chi la cercava penserebbe
     di aver sbagliato pagina. */
.sk-sl[disabled]{opacity:.5;cursor:default}

/* ── CHI HA GIÀ UN POSTO VEDE IL SUO ORARIO, NON TREDICI ──────────────────
   ⚠⚠ 17 ottobre 2026. L'elenco completo è la pagina di chi deve ancora
      scegliere; chi ha scelto ha una domanda sola — «a che ora parto io?» —
      e gliela facevamo cercare in mezzo alle altre dodici.

   ⚠ Il riquadro verde è lo stesso verde della propria partenza nell'elenco e
     della riga «Parti alle 08:20» nel calendario: tre posti, un colore, una
     cosa sola. Un quarto verde vorrebbe dire una quarta cosa.

   ⚠ I due comandi stanno in RIGA finché sono chiusi e prendono tutta la
     larghezza quando si aprono — `flex-basis:100%` su `[open]`. Senza, il
     pannello aperto resterebbe schiacciato nella sua colonna. */
.sk-sp{margin:10px 0}
.sk-sp-mio{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:12px 14px;border:1px solid var(--verde);border-radius:12px;background:#F2F7EA}
.sk-sp-o{flex:1 1 100%;margin:0;font-size:20px;font-weight:800;color:#41611B;
  font-variant-numeric:tabular-nums}
.sk-sp-h{flex:1 1 100%;margin:0;font-size:12.5px;color:var(--testo-2)}
.sk-sp-mio>details{flex:0 1 auto;min-width:0}
.sk-sp-mio>details[open]{flex-basis:100%}

/* ⚠ IL TRIANGOLINO È DISEGNATO COL BORDO e non scritto: un carattere dentro
     `content` è testo fuori dal catalogo, e su un telefono che non ha quel
     glifo diventa un quadratino. Due bordi ruotati si vedono dappertutto. */
.sk-orari-s,.sk-dis-s{display:flex;align-items:center;gap:10px;min-height:46px;
  padding:8px 16px;border-radius:26px;font-size:14.5px;font-weight:650;cursor:pointer;
  list-style:none}
/* ⚠ Le due righe del comando stanno in colonna e non affiancate: «Scegli
     l'orario della navetta» è lungo, e su un telefono stretto finiva a capo
     con l'ora appiccicata al fianco. Il triangolino resta fuori dalla colonna,
     se no va a finire su una terza riga. */
.sk-orari-n{display:flex;flex-direction:column;gap:1px;min-width:0}
.sk-orari-s::-webkit-details-marker,.sk-dis-s::-webkit-details-marker{display:none}
.sk-orari-s::after,.sk-dis-s::after{content:'';flex:none;width:8px;height:8px;
  margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px)}
details[open]>.sk-orari-s::after,details[open]>.sk-dis-s::after{
  transform:rotate(-135deg) translate(-2px,-2px)}
.sk-orari-s{background:var(--carta);color:var(--testo);
  box-shadow:inset 0 0 0 1.5px var(--linea)}
.sk-orari-h{font-size:12.5px;font-weight:500;color:var(--testo-2)}
/* ⚠ Chi NON ha ancora un orario vede un invito pieno e non un comando
     discreto: è la cosa che deve fare, e se non la fa resta a terra. */
.sk-sp:not(.sk-sp-mio)>.sk-orari>.sk-orari-s{background:var(--blu);color:#fff;
  box-shadow:none}
.sk-sp:not(.sk-sp-mio) .sk-orari-h{color:#D7ECF5}

/* ── LA RINUNCIA, CON LA CONFERMA IN LINEA ────────────────────────────────
   ⚠⚠ Il comando che toglie il posto NON sembra un pulsante importante: è
      scritto piccolo, in grigio, e si apre in una domanda. Il rosso arriva
      solo sul «sì», cioè quando la persona ha già capito che cosa sta per
      fare. Un pulsante rosso sempre acceso accanto al proprio orario sarebbe
      un invito a toccarlo. */
.sk-dis{margin:0}
.sk-dis-s{background:none;color:var(--testo-2);font-weight:500;font-size:13.5px;
  padding:0 12px;min-height:44px}
.sk-dis-c{margin-top:6px;padding:10px 12px;border-radius:10px;
  background:#FBF3E2}
.sk-dis-q{margin:0;font-size:13.5px;line-height:1.45;color:#6E5310}
.sk-dis-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sk-dis-si,.sk-dis-no{min-height:46px;padding:0 18px;border:0;border-radius:26px;
  font:inherit;font-size:14.5px;font-weight:650;cursor:pointer}
.sk-dis-si{background:#B03A3B;color:#fff}
.sk-dis-no{background:var(--carta);color:var(--testo);
  box-shadow:inset 0 0 0 1.5px var(--linea)}
/* ── «SALVA»: LA STELLA ────────────────────────────────────────────────────
   Sta in cima alla scheda, a destra del «torna indietro»: il pollice destro
   ci arriva senza spostare la mano, e a sinistra verrebbe premuta per errore
   da chi cercava «indietro».

   ⚠ È ALTA 44 px, non 30. Su un telefono in movimento un bersaglio sotto i
   32 px si sbaglia — e qui sbagliare vuol dire togliere una cosa che
   qualcuno aveva salvato, senza accorgersene. */
.sk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sv-f{margin:0;flex:none}
.sv-b{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  border:none;border-radius:999px;background:var(--carta);color:var(--testo-2);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--linea);-webkit-tap-highlight-color:transparent}
.sv-b svg{flex:none}
/* Accesa: la stella si RIEMPIE, e non cambia soltanto colore. Il colore da
   solo non basta — è la stessa regola dei sei tipi di attività — e una
   stella piena si riconosce anche con la coda dell'occhio. */
.sv-b.on{background:#FBF3E2;color:#6E5310;box-shadow:inset 0 0 0 1.5px #E4C68A}
.sv-b.on svg path{fill:currentColor}
.sv-msg{margin-bottom:11px;padding:9px 12px;border-radius:9px;font-size:13.5px;
  background:#FBF3E2;color:#6E5310}

/* «Le mie cose» */
.sv-void{background:var(--carta);border-radius:14px;padding:18px 16px;
  box-shadow:var(--ombra);font-size:14px;line-height:1.55;color:var(--testo-2)}
.sv-void b{color:var(--testo);font-size:15px}
.sv-void p + p{margin-top:8px}
/* Il giorno sopra l'ora, dove l'elenco attraversa i cinque giorni. */
.item-g{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--testo-2);margin-bottom:1px}

/* ── PRIMA DI PARTIRE: la lista di preparazione ───────────────────────────
   Ogni voce è un modulo suo, e tutto il riquadro è il bersaglio: un
   quadratino di venti pixel su un telefono in movimento si sbaglia, e qui
   sbagliare vuol dire spuntare la voce accanto. */
.pr-top{background:var(--carta);border-radius:14px;padding:14px 16px;box-shadow:var(--ombra);
  margin-bottom:12px}
.pr-n{font-size:13px;font-weight:700;color:var(--testo-2);margin-bottom:8px}
.pr-bar{height:8px;border-radius:999px;background:#E7EDF0;overflow:hidden}
.pr-bar i{display:block;height:100%;background:var(--blu);border-radius:999px;
  transition:width .25s}
.pr-ok{margin-top:9px;font-size:13.5px;font-weight:700;color:#215F45}
.pr-l{background:var(--carta);border-radius:16px;overflow:hidden;box-shadow:var(--ombra)}
.pr-i{margin:0;border-bottom:1px solid var(--linea)}
.pr-i:last-child{border-bottom:none}
.pr-b{display:flex;width:100%;gap:12px;align-items:flex-start;text-align:left;
  background:none;border:none;font:inherit;padding:14px 16px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.pr-k{flex:none;width:24px;height:24px;margin-top:1px;border-radius:7px;
  box-shadow:inset 0 0 0 2px var(--linea);color:#fff;display:flex;align-items:center;
  justify-content:center}
.pr-k svg{width:15px;height:15px}
/* Fatta: il quadratino si riempie E il testo si smorza. Due segni per la
   stessa cosa, perché il colore da solo non porta mai un'informazione. */
.pr-i.on .pr-k{background:var(--blu);box-shadow:inset 0 0 0 2px var(--blu)}
/* ⚠ NIENTE RIGA SOPRA IL TESTO. Era la scelta ovvia — «fatto» si barra — ed
   è stata tolta guardando la figura: su un titolo in grassetto la riga ci
   passa in mezzo e la voce diventa faticosa da rileggere, che è esattamente
   quello che si fa quando si torna sulla lista per controllare. Il quadrato
   pieno e il testo smorzato sono già due segni. */
.pr-i.on .pr-t b{color:var(--testo-2);font-weight:600}
.pr-t{display:block;min-width:0}
.pr-t b{display:block;font-size:14.5px;font-weight:650;line-height:1.35;color:var(--testo)}
.pr-t span{display:block;font-size:12.5px;line-height:1.45;color:var(--testo-2);margin-top:3px}
.pr-h{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--testo-2)}

/* ═══ LA GALLERIA DEL DOPO E I MATERIALI ═══════════════════════════════════
   ⚠ LE REGOLE STANNO QUI E NON DENTRO IL MODELLO. È la lezione di `.cb-go`:
   uno stile scritto dentro una closure o dentro una pagina si può riusare
   altrove, e allora quel pezzo esce senza vestito. Qui in più c'è una ragione
   in più — la griglia è la parte che decide se la pagina si legge su un
   telefono, e un giorno qualcuno vorrà cambiarne le misure senza leggere PHP. */

/* Le linguette delle tre viste. Non un `select`: sono due o tre, e vedere
   quale si sta guardando conta più che risparmiare spazio. */
.gl-tab{display:flex;gap:8px;margin:2px 0 12px;flex-wrap:wrap}
.gl-t{display:inline-flex;gap:7px;align-items:baseline;padding:8px 13px;border-radius:999px;
  background:var(--carta);color:var(--testo-2);text-decoration:none;font-size:13.5px;
  font-weight:600;box-shadow:var(--ombra)}
.gl-t b{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.75}
.gl-t.on{background:var(--blu);color:#fff}
.gl-t.on b{opacity:.85}

/* Le giornate scorrono invece di andare a capo: il codice non sa quanti giorni
   durerà il prossimo evento, e una riga che scorre regge anche a dieci. */
.gl-gg{display:flex;gap:7px;overflow-x:auto;margin:0 0 14px;padding-bottom:3px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.gl-gg::-webkit-scrollbar{display:none}
.gl-g{flex:0 0 auto;padding:6px 12px;border-radius:999px;background:var(--carta);
  border:1px solid var(--linea);color:var(--testo-2);text-decoration:none;
  font-size:12.5px;white-space:nowrap}
.gl-g.on{background:var(--blu-velo);border-color:var(--blu-chiaro);color:var(--blu-scuro);
  font-weight:600}
.gl-lu{font-weight:400;opacity:.75}

/* ⚠ LA GRIGLIA SI RIEMPIE DA SOLA, e la misura è un MINIMO, non un numero di
   colonne. `auto-fill` con `minmax(108px, 1fr)` dà tre colonne su un telefono
   da 360 px, quattro su uno da 430 e sette su un portatile, senza una sola
   media query e senza sapere niente dello schermo. Fissare «tre colonne»
   avrebbe voluto dire quadratini da 130 px su un desktop da 1400. */
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  gap:6px;margin:0 0 18px}
.gl-f{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:var(--linea);text-decoration:none}
/* `aspect-ratio` sul contenitore e `cover` sull'immagine: la griglia resta
   allineata comunque siano tagliate le fotografie — orizzontali, verticali,
   quadrate. Senza, una verticale in mezzo a dieci orizzontali sfonda la riga. */
.gl-f img{width:100%;height:100%;object-fit:cover;display:block}
.gl-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 6px;
  font-size:11px;line-height:1.3;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-save{margin:-6px 0 18px}

/* I materiali: una riga per documento, con il segno del file davanti. */
.md-r{display:flex;gap:12px;align-items:center;padding:13px 14px;background:var(--carta);
  border-radius:14px;text-decoration:none;color:inherit;box-shadow:var(--ombra)}
.md-i{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:rgba(0,113,163,.10);color:var(--blu)}
.md-b{min-width:0;flex:1}
.md-b b{display:block;font-size:15px;line-height:1.25}
.md-b span{display:block;font-size:12.5px;color:var(--testo-2);margin-top:1px}
/* ⚠ Il dominio si scrive, e si vede che è un'altra cosa dal resto della riga:
   chi tocca deve sapere che esce dall'app prima di uscirne. */
.md-out{font-size:11.5px;color:var(--testo-2);opacity:.85}

/* ═══ IL VESTITO DELLE DUE FASI ESTREME — il vestito «diario di bordo» ══════
   ⚠ TUTTO E' LEGATO A `body.v-diario`: dal 1 settembre il vestito si sceglie
   dalla console, e il «classico» — l'aspetto che l'app aveva prima — e' quello
   di base, cioe' **non ha nessuna regola qui**. Un vestito che si ottiene
   togliendo regole invece di aggiungerne e' un vestito che non si puo' rompere.
   L'app è un quaderno che si riempie: PRIMA è la copertina chiusa, DURANTE è
   la pagina di lavoro (invariata, apposta: nei cinque giorni si apre di corsa
   in corridoio e lì il vestito conta meno della velocità di lettura), DOPO è
   il volume rilegato.

   ⚠ IL CONTRASTO E' MISURATO, NON SCELTO A OCCHIO. Il fondo scuro è la
   schermata che l'ospite vede per TRE MESI, ed è anche quella che si legge
   peggio in pieno sole su una banchina: è il prezzo dichiarato di questa
   proposta, e si paga qui.

       bianco #FFF su #00293D   15,2:1
       grigio #B8C7D0 su #00293D 8,8:1     ← nessun grigio sotto 8:1
       giallo #F9B000 su #00293D 8,1:1
       testo  #12242F su #F7F1E6 14,2:1
       bruno  #5F5238 su #F7F1E6  6,8:1    ← etichette piccole maiuscole
   (AA vuole 4,5:1 per il testo normale. Qui il minimo è 6,8.) */

/* ⚠ IL FONDO VA SU `.device`, NON SUL `body` — ed è la trappola del 28 agosto
   in una forma nuova. `.device` porta già `background:var(--sfondo)`, quindi un
   fondo scritto solo sul `body` resterebbe coperto. E soprattutto: su desktop
   (≥720 px) il `body` NON è lo schermo, è **la cornice attorno alla scheda**
   centrata — dipingerlo di blu notte annerirebbe tutta la finestra invece della
   sola app. Il `body` si tocca solo sotto i 720 px, dove scheda e pagina sono
   la stessa cosa e senza di lui sotto l'ultima riga ricompare il grigio. */

/* ── LA COPERTINA (fase PRIMA) ───────────────────────────────────────── */
body.v-diario.f-prima>.device{background:#00293D;color:#fff}
@media (max-width:719px){body.v-diario.f-prima{background:#00293D}}
body.v-diario.f-prima .top-prima{background:#00293D}
/* La testata perde il filo chiaro: sul fondo dello stesso colore separerebbe
   due cose che sono una sola. */
body.v-diario.f-prima>.device .who{border-top-color:rgba(255,255,255,.14)}

.cop{padding:26px 2px 20px}
.cop-ed{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--giallo)}
/* ⚠ Extra Light a 88 px: è la firma tipografica Costa usata per quello che sa
   fare. Lo stesso numero in grassetto sarebbe un cartello autostradale. */
.cop-n{display:block;font-size:88px;font-weight:200;line-height:.9;letter-spacing:-.05em;
  margin:12px 0 0;font-variant-numeric:tabular-nums}
.cop-u{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#B8C7D0}
.cop-w{display:block;margin-top:20px;padding-top:14px;font-size:11.5px;line-height:1.6;
  color:#B8C7D0;border-top:1px solid rgba(255,255,255,.16)}
.cop-hint{margin-top:12px;font-size:12.5px;line-height:1.55;color:#B8C7D0}

/* Sulla copertina le schede diventano carta scura: lo stesso disegno, un altro
   materiale. ⚠ Non un riquadro bianco su fondo scuro, che sarebbe un buco. */
body.v-diario.f-prima .eyebrow,
.eyebrow.chiara{color:#8FA6B3}
body.v-diario.f-prima .card,
body.v-diario.f-prima .cm-card,
.list.scura{background:rgba(255,255,255,.06);box-shadow:none;
  border:1px solid rgba(255,255,255,.09)}
.list.scura .item{border-top-color:rgba(255,255,255,.09)}
.list.scura .item-t{color:#fff}
.list.scura .item-m,.list.scura .item-h{color:#B8C7D0}
body.v-diario.f-prima .cm-card b,body.v-diario.f-prima .cm-card .cm-t{color:#fff}
body.v-diario.f-prima .cm-card span,body.v-diario.f-prima .cm-card .cm-m{color:#B8C7D0}
/* Tutti i pulsanti larghi della copertina, non solo quello del programma: la
   riga «Tutte le novita'» esce dalla chiusura delle comunicazioni, che non sa
   niente della fase. */
body.v-diario.f-prima .cd-b,.cd-b.chiaro{background:rgba(255,255,255,.09);color:#fff;
  border:1px solid rgba(255,255,255,.14)}

/* ── IL VOLUME (fase DOPO) ───────────────────────────────────────────── */
body.v-diario.f-dopo>.device{background:#F7F1E6}
@media (max-width:719px){body.v-diario.f-dopo{background:#F7F1E6}}
body.v-diario.f-dopo .top-dopo{background:linear-gradient(155deg,#8A5A0F,#B07A12)}

.vol{padding:6px 2px 18px}
.vol-l{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:#8A5A0F}
.vol-t{font-size:29px;font-weight:200;letter-spacing:-.025em;line-height:1.15;
  margin:9px 0 0;color:var(--testo)}
.vol-n{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.vol-n b{display:block;font-size:31px;font-weight:800;line-height:1;color:#8A5A0F;
  font-variant-numeric:tabular-nums}
.vol-n span{display:block;font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:#5F5238;font-weight:700;margin-top:4px}

/* Le schede del volume: carta bianca su crema, con il filo caldo invece del blu. */
body.v-diario.f-dopo .cb-go{box-shadow:inset 3px 0 0 #B07A12}
body.v-diario.f-dopo .cb-go-i{background:rgba(176,122,18,.13);color:#8A5A0F}
body.v-diario.f-dopo .empty{background:rgba(176,122,18,.07);color:#5F5238}

/* ⚠ E LA BARRA LATERALE DEL DESKTOP VA VESTITA ANCHE LEI. Sotto i 720 px la
   barra sta in fondo ed è chroma dell'applicazione, bianca in tutte le fasi:
   giusto così, è il telaio. Sopra i 720 px diventa una COLONNA DENTRO LA
   SCHEDA, e lì una colonna chiara accanto a una copertina blu notte taglia la
   scheda in due — misurato guardando, non dedotto. */
@media (min-width: 720px) {
  body.v-diario.f-prima > .device:has(> .nav) > .nav{background:rgba(255,255,255,.05);
    border-right-color:rgba(255,255,255,.10)}
  body.v-diario.f-prima > .device:has(> .nav) > .nav a{color:#B8C7D0}
  body.v-diario.f-prima > .device:has(> .nav) > .nav a[aria-current="page"]{color:#fff}
  body.v-diario.f-dopo  > .device:has(> .nav) > .nav{background:rgba(176,122,18,.06);
    border-right-color:rgba(176,122,18,.16)}
  body.v-diario.f-dopo  > .device:has(> .nav) > .nav a[aria-current="page"]{color:#8A5A0F}
}

/* ⚠⚠ «Devi scegliere l'orario della navetta» sulla riga del calendario.
   Nasce il 16 ottobre 2026: una persona che scorre il proprio programma e
   vede «Transfer per il Palacrociere» pensa di essere a posto — la riga c'e'
   perche' il trasferimento e' nel suo programma, non perche' lei abbia un
   posto sopra. La differenza fra le due cose si paga in banchina.
   ⚠ Giallo e non rosso: non e' un guasto, e' una cosa da fare. In quest'app
     il rosso e' l'annullamento, e usarlo anche qui toglierebbe forza a
     tutt'e due. */
.item-devi{margin-top:2px;font-size:12.5px;font-weight:700;color:#8A5B00}
.item-devi::before{content:"⚠ ";font-weight:400}
/* Nel riquadro del prossimo appuntamento, che e' su fondo scuro. */
.hero-st:empty{display:none}
.hero-st{margin:6px 0 2px}
/* ⚠ Nel riquadro il fondo e' scuro: lo stesso bruno di la' sparirebbe.
     Si usa il giallo dell'app — quello della fascia «adesso» — cosi' chi
     l'ha visto una volta riconosce la forma. */
.hero-st .item-devi{font-size:13.5px;color:var(--giallo)}
.hero-st .item-mia{font-size:13.5px;color:#B7DE7E}

/* ═══ OGGI NON E' UNA GIORNATA DI QUESTO OSPITE (7 ottobre 2026) ════════════
   ⚠⚠ E SI CHIAMA `.gio-off` E NON `.fuori`: `.fuori` IN QUESTO FOGLIO C'E'
   GIA', e vuol dire un'altra cosa — «questo collegamento porta fuori
   dall'app» (`.hero-deck.fuori`, `.hero-fuori`). La prima versione lo
   riusava: due significati sulla stessa classe, nello stesso foglio, e il
   giorno in cui qualcuno ritocca l'uno si rompe l'altro. E' la stessa
   collisione del prefisso `cb_` nei cataloghi.

   ⚠ Non e' un `.empty` con un testo diverso: un vuoto si legge come «non c'e'
   niente», e qui invece c'e' una cosa da dire e una da fare. Quindi un
   riquadro con un titolo, una riga e — quando c'e' una giornata davanti — un
   pulsante che ci porta. */
/* ⚠ LE VARIABILI SONO QUELLE VERE DI `guest.css` — `--carta`, `--testo-2`,
   `--blu`, `--ombra`. La prima versione di questo blocco usava `--soft` e
   `--blu` senza controllare: la seconda non esisteva nel foglio dell'ospite
   (c'e' in quello della console) e avrebbe dato un fondo trasparente **senza
   un errore e senza un avviso**. E' il difetto del 28 agosto, le barre della
   regia, rifatto in un altro file. */
.gio-off{background:var(--carta);border-radius:14px;padding:26px 20px;text-align:center;
  box-shadow:var(--ombra)}
.gio-off-t{font-size:16.5px;font-weight:650;line-height:1.3;margin-bottom:8px}
.gio-off-p{margin:0;font-size:13.5px;line-height:1.6;color:var(--testo-2)}
/* ⚠ Il pulsante c'e' solo nel ramo «hai ancora una giornata»: in quello
   «finito» non ci sarebbe niente da aprire, e un pulsante che porta a una
   pagina vuota e' peggio di nessun pulsante. */
.gio-off-b{display:inline-block;margin-top:16px;padding:11px 20px;border-radius:10px;
  background:var(--blu);color:#fff;font-size:14px;font-weight:600;text-decoration:none}