/* ============================================================
   Crisanto - foglio di stile del sito crisanto.ch
   Stessa palette dell'app Android. Un solo file per tutte le
   pagine: ogni pagina nuova richiama questo e non ridefinisce
   mai un colore per conto suo.

   Uso nelle pagine:
     <link rel="stylesheet" href="/crisanto.css">

   Struttura minima di una pagina:
     <header class="barra">...</header>
     <main class="contenuto">
       <div class="riquadro"> ...testo... </div>
     </main>
     <footer class="pieDiPagina">...</footer>
   ============================================================ */

:root {
  /* Scala Crisanto: dal piu chiaro al piu scuro.
     Regola di contrasto: dal gradino 40 in giu i colori non
     vanno usati per il testo su fondo chiaro, solo come sfondo
     o bordo. Il gradino 50 non regge il testo in nessun caso:
     usarlo solo come riempimento. */
  --crisanto-00: #F5F3EF;
  --crisanto-10: #EFEAE4;
  --crisanto-20: #E2DAD1;
  --crisanto-25: #D9CFC4;
  --crisanto-30: #CFC3B6;
  --crisanto-35: #C2B4A5;
  --crisanto-40: #B5A695;
  --crisanto-50: #978674;
  --crisanto-60: #7A6959;
  --crisanto-70: #5C4C40;
  --crisanto-80: #3D3028;

  /* Colori di stato */
  --crisanto-errore: #A34A3C;
  --crisanto-attenzione: #B8862F;
  --crisanto-conferma: #5F7350;

  /* Assegnazione per funzione - la stessa dell'app */
  --sfondo-pagina: var(--crisanto-40);
  --sfondo-riquadro: var(--crisanto-25);
  --sfondo-barra-alta: var(--crisanto-80);
  --sfondo-barra-bassa: var(--crisanto-60);
  --testo-principale: var(--crisanto-80);
  --testo-secondario: var(--crisanto-70);
  --testo-su-scuro: var(--crisanto-00);
  --bordo: var(--crisanto-70);
  --filetto: var(--crisanto-60);

  --raggio: 12px;
  --raggio-pillola: 999px;
  /* 44rem a 18px = circa 78 caratteri per riga: dentro l'intervallo in cui si
     legge bene (45-80). Era 40rem, e su desktop lasciava due fasce vuote larghe
     quanto il testo. Piu' larghi di cosi' l'occhio perde la riga tornando a
     capo — il problema opposto, meno visibile e peggiore. */
  --larghezza-testo: 44rem;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sfondo-pagina);
  color: var(--testo-principale);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.7;
}

/* ---------- Barra in alto ---------- */

.barra {
  background: var(--sfondo-barra-alta);
  color: var(--testo-su-scuro);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* ⚠️ VA A CAPO, non trabocca. Fra i 640 e i 992 px marchio, pillole e quattro
     voci di menu non stanno su una riga: senza questa riga uscirebbero dallo
     schermo e la pagina scorrerebbe di lato — il difetto che su un telefono
     girato si vede subito. Con `wrap` le pillole scendono su una riga loro. */
  flex-wrap: wrap;
}

.barra a { color: var(--testo-su-scuro); }

.barra .marchio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  text-decoration: none;
}

/* ⚠️ Il marchio ha il fondo CHIARO (gradino 00) e la barra e' scura: senza
   angoli arrotondati sembrerebbe un rettangolo bianco appiccicato sopra. Gli
   stessi 9px dell'icona nell'app, cosi' chi passa dal sito all'app riconosce
   la stessa cosa. Su telefono stretto scende a 32px ma non sparisce: e' il
   marchio, non una decorazione. */
.barra .marchio img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex: none;
}

.barra nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.barra nav a { text-decoration: none; padding: 0.25rem 0; }

.barra nav a:hover,
.barra nav a:focus-visible { text-decoration: underline; }

/* ---------- Contenuto ---------- */

.contenuto {
  max-width: var(--larghezza-testo);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* ⚠️ NON E' PIU' UN RIQUADRO, ed è deliberato (16.08.2026). Il testo sta
   direttamente sul fondo pagina, come nella schermata Guida dell'app: là i
   titoli e i paragrafi stanno sul gradino 40 e l'unico riquadro è la scheda
   «Perché Crisanto». Era l'ultima differenza fra le due superfici.
   ⚠️ DEROGA A DESIGN.md, registrata in DEROGHE.md: la regola dice che il testo
   lungo va dentro il riquadro (8.28:1 contro 5.36:1). Sul 40 il contrasto
   resta sopra la soglia WCAG AA, e la decisione è di Ivan: due superfici
   identiche valgono più di tre punti di contrasto in più su una sola.
   La classe resta perché limita la larghezza e tiene i margini. */
.riquadro {
  margin-bottom: 1.5rem;
}

/* ---------- Testo ---------- */

h1, h2, h3 {
  color: var(--testo-principale);
  line-height: 1.3;
  margin: 0 0 0.75rem;
  font-weight: 600;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; margin-top: 2rem; }
h3 { font-size: 1.15rem; margin-top: 1.5rem; }

p, li { color: var(--testo-principale); }

.secondario,
.riquadro small,
time { color: var(--testo-secondario); font-size: 0.9rem; }

a {
  color: var(--testo-secondario);
  text-underline-offset: 3px;
}

a:hover, a:focus-visible { color: var(--testo-principale); }

/* ⚠️ ECCEZIONE PER LE SUPERFICI SCURE, e non e' un dettaglio estetico: senza
   queste righe il menu SPARIVA al passaggio del mouse. La regola qui sopra
   porta i collegamenti al gradino 80 — che e' esattamente il fondo della barra
   in alto (e della lingua corrente nel selettore). Testo 80 su fondo 80: 1:1,
   invisibile. La specificita' e' identica (`a:hover` e `.barra a` valgono
   uguale), quindi vinceva l'ultima scritta, cioe' quella sbagliata.
   Colto da Ivan sul sito il 15.08.2026. */
.barra a:hover,
.barra a:focus-visible,
.pieDiPagina a:hover,
.pieDiPagina a:focus-visible,
.selettoreLingua .qui:hover,
.selettoreLingua .qui:focus-visible { color: var(--testo-su-scuro); }

/* ⚠️ L'INDICATORE NON PUO' ESSERE SOLO IL COLORE. Chi non distingue bene i
   colori — o guarda lo schermo al sole — deve vedere comunque dove si trova:
   sottolineatura al passaggio e al fuoco, piu' il contorno di sistema.
   Vale su tutte e tre le superfici, non solo dove ce n'era gia' una. */
.barra a:hover,
.barra a:focus-visible,
.pieDiPagina a:hover,
.pieDiPagina a:focus-visible,
.selettoreLingua a:hover,
.selettoreLingua a:focus-visible { text-decoration: underline; }

/* Premuto: uno scatto visibile, cosi' il tocco su telefono ha una risposta. */
.barra a:active,
.pieDiPagina a:active,
.selettoreLingua a:active { opacity: 0.75; }

hr {
  border: none;
  border-top: 1px solid var(--filetto);
  margin: 2rem 0;
}

/* ---------- Pulsanti ----------
   Stessa gerarchia dell'app: la forma distingue il ruolo,
   non solo il colore. Altezza minima 48px per il tocco. */

.pulsante,
.pulsanteSecondario,
.pulsanteDistruttivo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.6rem 1.5rem;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.pulsante {
  background: var(--crisanto-80);
  color: var(--testo-su-scuro);
  border: none;
  border-radius: var(--raggio-pillola);
}

.pulsanteSecondario {
  background: var(--crisanto-20);
  color: var(--testo-principale);
  border: 2px solid var(--bordo);
  border-radius: var(--raggio-pillola);
}

.pulsanteDistruttivo {
  background: var(--crisanto-20);
  color: var(--testo-principale);
  border: 2px solid var(--crisanto-errore);
  border-radius: 6px;
}

.pulsante:hover { background: var(--crisanto-70); }
.pulsanteSecondario:hover { background: var(--crisanto-25); }

:focus-visible { outline: 3px solid var(--crisanto-80); outline-offset: 2px; }

/* ⚠️ Sul fondo scuro il contorno scuro non si vede: sulla barra e sul pie' di
   pagina si usa quello chiaro. Un fuoco che non si vede e' una navigazione da
   tastiera che si perde. */
.barra a:focus-visible,
.pieDiPagina a:focus-visible,
.selettoreLingua .qui:focus-visible {
  outline: 3px solid var(--crisanto-00);
  outline-offset: 2px;
}

/* ---------- Avvisi ----------
   I colori di stato non reggono come testo: stanno nel bordo,
   il testo resta scuro. */

.avviso, .avvisoErrore, .avvisoConferma {
  background: var(--crisanto-20);
  color: var(--testo-principale);
  border-left: 5px solid var(--crisanto-attenzione);
  border-radius: 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.avvisoErrore { border-left-color: var(--crisanto-errore); }
.avvisoConferma { border-left-color: var(--crisanto-conferma); }

/* ---------- Moduli ---------- */

label { display: block; margin-bottom: 0.35rem; color: var(--testo-secondario); }

input, textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.85rem;
  font: inherit;
  color: var(--testo-principale);
  background: var(--crisanto-20);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

textarea { min-height: 8rem; }

/* ---------- Tabelle ---------- */

table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }

th, td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--filetto);
}

th { color: var(--testo-principale); font-weight: 600; }

/* ---------- Pie di pagina ---------- */

.pieDiPagina {
  background: var(--sfondo-barra-bassa);
  color: var(--testo-su-scuro);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
}

.pieDiPagina a { color: var(--testo-su-scuro); }

/* ---------- Le due pillole, NELL'INTESTAZIONE (11.09.2026) ----------
   «Copertura nazionale» e «Gratuita», subito dopo il marchio. Sono la carta
   d'identità del prodotto in quattro parole: si leggono prima di tutto.

   ⚠️ Il testo NON sta qui: sta in `pillole.conf`, una riga per lingua. Una
   riga vuota toglie la pillola — ed è il modo previsto di togliere «Gratuita»
   il giorno in cui non sarà più vero.

   ⛔ VIVONO SULLO SCURO DELLA BARRA (gradino 80), non sul chiaro della pagina:
   fondo gradino 70, bordo 60, testo 00. Contrasto #F5F3EF su #5C4C40 =
   **7,4:1**, sopra il 4,5 richiesto anche a corpo piccolo. La crocetta resta
   rossa e bianca: è l'unica cosa che quel disegno deve dire.
   ⚠️ Chi le rimettesse su un fondo chiaro rifà questi tre colori: una pillola
   chiara su fondo chiaro è la stessa famiglia di guasto delle icone crema su
   crema dell'11.09.2026. */
.pillola {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--raggio-pillola);
  background: var(--crisanto-70);
  border: 1px solid var(--crisanto-60);
  color: var(--testo-su-scuro);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  /* Non è un pulsante e non deve sembrarlo: nessun cursore a mano, nessun
     effetto al passaggio. Si legge e basta. */
}

.pillola svg { display: block; flex: 0 0 auto; }

/* ⛔ SI VEDONO SEMPRE, A OGNI LARGHEZZA (deciso da Ivan il 11.09.2026).
   ⚠️ Per mezza giornata erano nascoste sotto i 992 px «per non gonfiare la
   barra»: sbagliato, e la ragione è una sola — **crisanto.ch si guarda
   soprattutto dal telefono**, quindi nasconderle su telefono vuol dire
   nasconderle alla maggioranza di chi arriva. Lo spazio si fa in un altro
   modo: le pillole si stringono e, quando non ci stanno in riga, VANNO A CAPO.
   Nessun `display: none`, mai, su questo blocco. */
.barra .pillole {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

@media (min-width: 62rem) {
  /* Su schermo largo stanno sulla riga del marchio: `margin-right: auto`
     spinge il menu a destra e tiene marchio + pillole come un gruppo solo. */
  .barra .pillole { gap: 0.5rem; margin-right: auto; }
}

/* ---------- Condivisione (11.09.2026) ----------
   Sette pulsanti nel piè di pagina, in ogni pagina e in ogni lingua. Che cosa
   condividono lo dice `condivisione.conf`, non questo foglio.

   ⚠️ TONDI CHIARI SU FONDO SCURO, e non i colori dei marchi. I colori
   ufficiali — il blu di Facebook, il verde di WhatsApp — su un piede gradino 60
   farebbero sette macchie che litigano fra loro e col resto del sito. La forma
   del disegno basta a riconoscerli, ed è quella che l'occhio cerca. Sta scritto
   in `DESIGN.md`: la palette vale ovunque, anche dove la tentazione è forte. */
/* ⛔ BARRA FISSA IN FONDO ALLO SCHERMO (deciso da Ivan, 11.09.2026).
   ⚠️ Gli era stato sconsigliato su telefono — una fascia fissa ruba schermo a
   un pubblico che legge testi lunghi — e ha confermato di volerla. Sta scritto
   qui perché la prossima persona non la tolga credendo a una svista.

   ⚠️ DUE COSE CHE UNA BARRA FISSA ROMPE, E QUI NON ROMPE:
   1. **Copre la fine della pagina.** Il rimedio non è «tanto si scorre»: il
      `body` ha un `padding-bottom` alto quanto la barra (`--altezza-condividi`),
      così l'ultima riga della privacy resta leggibile sopra i pulsanti. Chi
      cambia l'altezza della barra cambia ANCHE quella variabile, o il testo
      torna sotto.
   2. **Perde il colore.** Essendo `fixed`, non eredita più il fondo del piede:
      se lo dichiara da sé (gradino 60, lo stesso), altrimenti si vedrebbe la
      pagina passarci sotto e le icone diventerebbero illeggibili.
   ⚠️ Resta DENTRO `<footer class="pieDiPagina">` nel documento, e non è un
   dettaglio: il colore delle icone lo danno regole `.pieDiPagina .social--…`
   (11.09.2026, sei icone invisibili). Spostarla fuori dal piede le rispegne. */
/* ⚠️ IL CONTO, perché non sia un numero a caso: riempimento 8+8, titolo 25,8
   (0,95rem con interlinea 1,7), suo margine 9,6, tondi 48, bordo 1 = 100,4 px.
   Qui se ne riservano 104: quattro di margine, perché un carattere di sistema
   diverso alza il titolo di un pixel o due e il testo tornerebbe sotto. */
:root { --altezza-condividi: 104px; }

.condividi {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--sfondo-barra-bassa);
  border-top: 1px solid var(--filetto);
}

/* Lo spazio che la barra si prende, restituito al testo. */
body { padding-bottom: var(--altezza-condividi); }

.condividiTitolo {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--testo-su-scuro);
}

/* `wrap` non è un dettaglio: sette tondi da 48px più gli spazi fanno ~384px,
   cioè più di uno schermo da 360. Senza, la riga uscirebbe dallo schermo e la
   pagina scorrerebbe di lato — il difetto che su un telefono si nota subito e
   non si capisce. Andando a capo, su 360px diventano due righe e basta. */
.condividiRiga {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* 48px: la stessa misura del selettore di lingua e dei pulsanti. Il pubblico è
   anziano e tocca con il pollice — un bersaglio piccolo si manca. */
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--raggio-pillola);
  background: var(--crisanto-00);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease-in-out, transform 0.1s ease-in-out;
}

/* ⛔ IL COLORE DEL DISEGNO SI SCRIVE QUI, E CON `.pieDiPagina` DAVANTI.
   ⚠️ Non è pignoleria di specificità: è il difetto dell'11.09.2026, che ha
   lasciato SEI icone su sette invisibili in rete. Il colore stava su `.social`
   (una classe), ma nel piede vive anche `.pieDiPagina a` (classe + tipo), più
   specifico, che dipinge ogni collegamento color crema — cioè esattamente il
   colore del tondo. Crema su crema: sette cerchi vuoti. Si vedeva solo «copia
   link», che è un `<button>` e quella regola non lo tocca.
   Chi tocca questo pezzo lascia `.pieDiPagina` davanti, o il difetto torna —
   e torna in silenzio, perché nel sorgente della pagina è tutto giusto.
   La guardia: `sito/verifica_condivisione.py`, che rifà il conto della cascata
   e confronta disegno e tondo. */
.pieDiPagina .social { color: var(--crisanto-80); }

/* ⚠️ I LOGHI NEL LORO COLORE UFFICIALE (scelta dell'11.09.2026, deroga in
   DEROGHE.md). Il tondo crema fa da cornice e li stacca dal piede gradino 60:
   i colori non toccano mai il fondo del sito, stanno dentro 48 px. La forma da
   sola non bastava — Ivan ha visto sette cerchi uguali e non ha riconosciuto
   niente, ed è la prova che a questa dimensione il colore È l'informazione.
   ⚠️ Busta e catenella NON sono marchi: restano nella palette. */
.pieDiPagina .social--facebook { color: #1877F2; }
.pieDiPagina .social--x        { color: #000000; }
.pieDiPagina .social--telegram { color: #26A5E4; }
.pieDiPagina .social--whatsapp { color: #25D366; }
.pieDiPagina .social--linkedin { color: #0A66C2; }
.pieDiPagina .social--email    { color: var(--crisanto-80); }
.pieDiPagina .social--copia    { color: var(--crisanto-80); }

/* ⚠️ Il piede sottolinea i suoi collegamenti al passaggio: qui no, perché sotto
   un disegno una riga non vuol dire niente. La risposta è il fondo che cambia
   — e il contorno di sistema resta, che è ciò su cui conta chi usa la tastiera. */
.pieDiPagina .social:hover,
.pieDiPagina .social:focus-visible { background: var(--crisanto-25); text-decoration: none; }

.social:active { transform: scale(0.94); }

.social svg { display: block; }

/* Il messaggio «Link copiato»: lo scrive `genera.py` già tradotto e parte
   nascosto. ⚠️ `role="status"` lo fa annunciare anche da chi non lo vede. */
/* ⚠️ SOPRA la barra, non dentro: se stesse nel flusso, comparendo alzerebbe la
   barra di una riga e la pagina ballerebbe sotto il dito nel momento esatto in
   cui l'utente ha premuto qualcosa. */
.condividiEsito {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin: 0;
  padding: 0.35rem 0.75rem;
  background: var(--crisanto-70);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--testo-su-scuro);
}

/* Il ripiego, se `[hidden]` non bastasse: senza, il messaggio si vedrebbe
   sempre, e direbbe «copiato» a chi non ha copiato niente. */
.condividiEsito[hidden] { display: none; }

/* ⛔ SU TELEFONO LA BARRA SI ABBASSA: e' li' che ruba di piu'.
   Via la scritta «Condividi Crisanto» — i sette disegni si spiegano da soli e
   la riga sopra costava 30 px su uno schermo alto 640. Tondi da 40 px (sopra i
   36 sotto cui il dito sbaglia) e spazi stretti: 7x40 + 6x5,6 = 314 px, dentro
   i 360 — **una riga sola, nessuno scorrimento laterale**.
   ⚠️ L'altezza dichiarata scende con loro: 40 + riempimento + bordo = 57 px. */
@media (max-width: 30rem) {
  :root { --altezza-condividi: 58px; }
  .condividi { padding: 0.35rem 0.5rem; }
  .condividiTitolo { display: none; }
  .condividiRiga { gap: 0.35rem; flex-wrap: nowrap; }
  .social { width: 40px; height: 40px; }
  .social svg { width: 21px; height: 21px; }
}


/* ---------- Schermi stretti ---------- */

@media (max-width: 40rem) {
  body { font-size: 17px; }
  .barra .marchio img { width: 32px; height: 32px; }
  /* Su telefono ogni millimetro e' testo: fra bordo dello schermo e prima
     lettera c'erano 16 + 20 = 36px per lato, cioe' un quinto di un telefono
     stretto speso in vuoto. Ora 10 + 16 = 26px. */
  .contenuto { padding: 1.25rem 0.625rem 2.5rem; }
  h1 { font-size: 1.6rem; }

  /* ---------- Intestazione compatta (28.08.2026) ----------
     ⚠️ IL MENU RESTA VISIBILE, ed e' una decisione presa CONTRO il menu a
     panino, con i numeri sul tavolo. Misurato a 360x640: la barra era alta
     176px e il video cominciava a 256 — cioe' gia' tutto dentro lo schermo
     senza scorrere; quello che veniva spinto giu' era il TESTO sotto il video.
     Il panino avrebbe portato la barra a 53px (123px guadagnati) al prezzo di
     nascondere le quattro voci dietro un'icona. Per un pubblico anziano quel
     prezzo e' alto: un'icona ☰ va prima riconosciuta e poi ricordata, e chi
     non la riconosce conclude che il sito non ha altre pagine.
     Qui si stringe soltanto: 176 -> 135px, il video sale da 256 a 215.
     Decisione di Ivan, 28.08.2026. Chi volesse rimetterlo, rimetta anche i
     numeri accanto. */
  .barra {
    padding: .55rem .75rem;
    gap: .35rem;
    /* La colonna resta: quattro voci italiane non stanno su una riga sola a
       345px, e mandarle in scorrimento orizzontale le renderebbe invisibili
       quanto il panino. */
    flex-direction: column;
    align-items: flex-start;
  }
  .barra .marchio { font-size: 1.1rem; gap: .5rem; }
  /* L'interlinea fra le due righe di voci era 1.25rem: da sola valeva 20px
     dei 41 recuperati. Le voci restano distanti fra loro sulla riga, dove
     serve al dito; si avvicinano solo in verticale. */
  .barra nav { gap: .35rem 1rem; }
  /* Le pillole si stringono invece di sparire: corpo 0,75rem (12 px reali),
     riempimento ridotto, crocetta a 14 px — sotto non si riconoscerebbe piu'.
     A 360 px le due misurano ~220 px in tutto, dentro i 345 utili: stanno su
     una riga loro, sotto il marchio, senza scorrimento laterale. */
  .pillola { font-size: .75rem; padding: .2rem .55rem; gap: .3rem; }
  .pillola svg { width: 14px; height: 14px; }
  /* ⚠️ Il selettore delle lingue NON si tocca: la sua altezza la fissa
     `min-height: 48px` sui collegamenti, non il riempimento. Stringere il
     riempimento non toglieva un pixel e lasciava una regola che non fa
     niente — e i 48px sono il minimo toccabile di DESIGN.md, che su utenza
     anziana non e' un numero negoziabile. */
}

/* ---------- Stampa ---------- */

@media print {
  body { background: #fff; color: #000; }
  .barra, .pieDiPagina { display: none; }
  /* Niente barra fissa su carta: niente spazio riservato in fondo. */
  body { padding-bottom: 0; }
  .riquadro { background: #fff; padding: 0; }
}

/* ---------- Selettore di lingua ----------
   Le quattro lingue scritte NELLA propria lingua, come nell'app: chi ha il
   telefono in tedesco cerca «Deutsch», non «Tedesco». Sta in alto perché il
   rilevamento automatico sbaglia spesso, e chi finisce nella lingua sbagliata
   deve poter rimediare senza cercare.
   Ogni voce e' alta 48px e larga: si tocca senza precisione. */

/* ⚠️ UNA RIGA SOLA, ANCHE SUL TELEFONO PIU' STRETTO. Con `flex-wrap: wrap` le
   quattro lingue andavano a capo sotto i 400px: due righe per un elemento di
   servizio, in cima a ogni pagina, che ruba spazio al contenuto. `nowrap` non
   basta da solo — serve che le voci stiano dentro: vedi la misura piu' sotto. */
.selettoreLingua {
  background: var(--crisanto-20);
  border-bottom: 1px solid var(--filetto);
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  justify-content: center;
}

/* ⚠️ TESTO PICCOLO, AREA DI TOCCO INTERA. Sono 13px contro i 18 del contenuto:
   e' un comando di servizio, non qualcosa da leggere. Ma `min-height: 48px`
   resta — DESIGN.md fissa 48px come minimo toccabile, e su utenza anziana un
   bersaglio piccolo si manca e si riprova, non si «impara a centrarlo».
   Il testo rimpicciolisce, il dito no. */
.selettoreLingua a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.25rem 0.55rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--raggio-pillola);
  color: var(--testo-principale);
  text-decoration: none;
}

.selettoreLingua a:hover,
.selettoreLingua a:focus-visible { background: var(--crisanto-30); }

/* La lingua corrente non e' un collegamento: e' dove sei. Resta riconoscibile
   anche a testo piccolo perche' NON si distingue solo per il colore: fondo
   pieno del gradino 80 (11.47:1 col testo 00) piu' il peso del carattere. */
.selettoreLingua .qui {
  background: var(--crisanto-80);
  color: var(--testo-su-scuro);
  font-weight: 600;
}

/* ⚠️ LA MISURA, per chi un domani volesse allargare di nuovo. Le quattro voci
   sono «Italiano Deutsch Français Rumantsch»: 33 caratteri. A 13px stanno in
   circa 190px di testo; con 4 x 18px di riempimento e 3 x 4px di spazio si
   arriva a ~265px, dentro i 300px utili di uno schermo da 320 — il piu'
   stretto ancora in circolazione. Sotto i 380px si stringe ancora un po',
   perche' il margine non sia teorico. Chi aumenta il corpo o il riempimento
   rimette le due righe: la somma va rifatta, non stimata a occhio. */
@media (max-width: 380px) {
  .selettoreLingua { gap: 0.15rem; padding: 0.35rem 0.25rem; }
  .selettoreLingua a { font-size: 0.75rem; padding: 0.25rem 0.35rem; }
}

/* ---------- Video ----------
   Rapporto 16:9 tenuto dal contenitore: su un telefono stretto il riquadro si
   rimpicciolisce mantenendo la forma, senza barra orizzontale e senza bande
   nere. Se il video non c'e', questo blocco non viene proprio scritto nella
   pagina: nessuno spazio vuoto da spiegare. */

/* ---------- Badge degli store ---------- */
/* ⚠️ STANNO SOPRA IL VIDEO E RESTANO VISIBILI SCORRENDO. Erano le due cose
   chieste: si vedono senza muovere niente all'apertura (sono in cima a
   `main`, dentro la prima schermata) e restano in vista scorrendo la Guida.
   `sticky` fa entrambe; `fixed` avrebbe coperto la pagina fin dal primo
   caricamento, che su un telefono e per un pubblico anziano e' peggio.
   Un browser che non conosce `sticky` li lascia semplicemente in cima: si
   perde il seguire lo scorrimento, non la visibilita'. */
.badgeStore {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 0 1rem;
  padding: 0.6rem 0 0.5rem;
  /* Fondo pieno, non trasparente: scorrendo, il testo della pagina passa
     SOTTO questa fascia e senza fondo si leggerebbe attraverso i badge. */
  background: var(--sfondo-pagina);
  border-bottom: 1px solid var(--filetto);
  text-align: center;
}

.badgeRiga {
  display: flex;
  justify-content: center;
  /* ⚠️ `flex-start` e NON `center` dall'11.09.2026: la dicitura «presto
     disponibile» sta ora sotto il SOLO badge non attivo, quindi le due colonne
     hanno altezze diverse e centrarle farebbe salire il badge senza dicitura.
     I due DISEGNI restano sulla stessa mediana lo stesso, perche' entrambi i
     riquadri `.badge` hanno la stessa altezza e centrano l'immagine dentro
     (vedi `.badge` qui sotto): l'allineamento e' calcolato, non a occhio. */
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;

  /* ⚠️ QUI SI PAREGGIANO I DUE BADGE, E IL NUMERO CHE CONTA E' UNO SOLO.
     `--badge-disegno` e' l'altezza del DISEGNO, non del riquadro: e' cio' che
     l'occhio confronta. Da quella si ricava l'altezza di ciascuna immagine. */
  --badge-disegno: 40px;
  /* Misurato sui file ufficiali il 07.09.2026: la tela del PNG Google e'
     646x250 ma il logo occupa 646x192 — 29 pixel trasparenti sopra e sotto.
     L'SVG Apple riempie il suo riquadro al 100%. A parita' di `height` il
     Google appariva percio' piu' piccolo del 23%, ed e' il difetto che si
     vedeva in homepage. */
  --badge-google-pieno: 0.768;
}

/* Una colonna per badge: l'immagine e, sotto, la dicitura se quel badge non e'
   ancora attivo. ⚠️ Lo stato e' PER BADGE: App Store attivo e Google Play no. */
.badgeVoce {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Il riquadro dei due badge e' alto UGUALE — quanto il piu' alto dei due, cioe'
   quello di Google col suo bordo trasparente — e l'immagine ci sta in mezzo.
   Cosi' i due disegni sono sulla stessa mediana e le due diciture partirebbero
   dalla stessa quota, senza numeri scritti a mano. */
.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--badge-disegno) / var(--badge-google-pieno));
}

.badge img {
  display: block;
  width: auto;
}

/* Apple: il disegno riempie il riquadro, quindi riquadro = disegno. */
.badge--apple img {
  height: var(--badge-disegno);
}

/* Google: il riquadro va ingrandito della parte trasparente, cosi' il DISEGNO
   dentro risulta alto quanto quello di Apple. Il vuoto e' simmetrico (29 sopra,
   29 sotto), quindi `align-items: center` basta ad allinearli: non serve
   nessun margine negativo da ritoccare a mano. */
.badge--google img {
  height: calc(var(--badge-disegno) / var(--badge-google-pieno));
}

/* Lo stato «presto disponibile»: si vede che c'e', si vede che non e' pronto.
   ⚠️ Non e' solo estetica — `pointer-events: none` toglie anche il cursore a
   mano, cosi' nessuno prova a cliccare un badge che non porta da nessuna
   parte. Quando `STORE_URL` viene riempito, `genera.py` scrive un `<a>` senza
   questa classe e lo stato sparisce da se'. */
.badge--presto {
  opacity: 0.55;
  filter: grayscale(100%);
  cursor: default;
  pointer-events: none;
}

/* Sta sotto il badge a cui si riferisce, dentro la sua colonna. */
.badgePresto {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--testo-secondario);
  letter-spacing: 0.02em;
}

@media (max-width: 30rem) {
  /* Su telefono si abbassa UN numero: il rapporto fra i due badge resta
     quello, perche' e' calcolato e non riscritto. */
  .badgeRiga { --badge-disegno: 32px; gap: 0.7rem; }
  .badgeStore { padding: 0.45rem 0 0.4rem; }
  .badgePresto { font-size: 0.82rem; }
}

.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.5rem;
  /* ⚠️ FONDO PAGINA, NON UN GRADINO DIVERSO (11.09.2026). Se per qualunque
     ragione resta una striscia scoperta attorno all'anteprima o attorno al
     player — un'immagine di rapporto diverso, un player che non riempie il
     riquadro, un arrotondamento di mezzo pixel — quella striscia deve
     CONFONDERSI con la pagina, non disegnare una cornice. Prima era il
     gradino 30, piu' chiaro del fondo: si vedeva come un bordo.
     ⚠️ Non ha effetto sulle bande nere DENTRO il player: quelle le disegna
     YouTube dentro il proprio fotogramma e nessuna regola di stile le
     raggiunge. Qui si copre solo cio' che sta FUORI dal video. */
  background: var(--sfondo-pagina);
  border-radius: var(--raggio);
  overflow: hidden;
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Il fondo che si vede nell'attimo fra il click e il primo fotogramma, e
     lungo qualunque bordo il player non copra: beige, mai il bianco o il nero
     di sistema. Il letterbox interno resta di YouTube. */
  background: var(--sfondo-pagina);
}

/* ---------- La facciata del video (28.08.2026) ----------
   Prima qui c'era l'iframe di YouTube, caricato all'apertura della pagina:
   circa 800 KB contro i ~10 KB di tutto il resto del sito. Ora si manda
   un'immagine nostra, e l'iframe nasce al click.
   ⚠️ L'immagine sta su crisanto.ch, non su i.ytimg.com: prenderla da Google
   avrebbe rimesso nel primo caricamento la richiesta che si stava togliendo.
   ⚠️ La facciata E' UN COLLEGAMENTO, non un div: senza JavaScript porta al
   video su youtube-nocookie.com invece di restare un'immagine ferma. */

.facciataVideo {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  /* Stesso fondo pagina del contenitore: se l'anteprima non arriva, o arriva
     con un rapporto diverso, si vede beige e non nero. */
  background: var(--sfondo-pagina);
  /* Il bordo di messa a fuoco della tastiera non deve finire tagliato dal
     ritaglio del contenitore: si tiene dentro. */
  outline-offset: -3px;
}

.facciataVideo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--sfondo-pagina);
}

/* Il pulsante: un disco scuro col triangolo, e SOTTO le parole.
   ⚠️ IL DISEGNO NON STA QUI. È un <svg> scritto DENTRO la pagina (`genera.py`,
   `blocco_video`), e la ragione è un difetto vero: fino al 28.08.2026 il disco
   era un `background: url(data:image/svg+xml,...)` su uno pseudo-elemento —
   corretto, e invisibile a Ivan, perché il suo browser serviva ancora il foglio
   di stile precedente. Un pulsante disegnato nel foglio di stile sparisce ogni
   volta che il foglio di stile non arriva; disegnato nella pagina arriva
   sempre, perché la pagina è `no-cache`. Qui restano solo misura e posizione.

   ⚠️ L'etichetta SI VEDE, non è nascosta ai soli lettori di schermo. Il pubblico
   è anziano: un triangolo da solo lo riconosce chi è cresciuto coi
   videoregistratori, e non tutti ci sono cresciuti. */

.facciataVideo .play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  /* Una velatura sull'immagine. Serve a due cose insieme: stacca il disco da
     una fotografia chiara e rende leggibile il testo bianco. La fotografia è
     un fermo immagine del video e non la scegliamo noi, quindi non si può
     contare sul fatto che sia scura. */
  background: rgba(61, 48, 40, .34);
  transition: background .15s ease-in-out;
}

/* Il disco: grande davvero. 96px sono oltre il doppio dei 44px minimi per il
   tocco — qui non è il bersaglio a essere in gioco (l'area cliccabile è tutta
   l'anteprima) ma il RICONOSCIMENTO a colpo d'occhio, che è il problema vero. */
.facciataVideo .disco {
  width: 96px;
  height: 96px;
  display: block;
  /* L'ombra stacca il disco anche quando finisce sopra una zona scura della
     fotografia, dove il bordo bianco da solo basterebbe appena. */
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55));
}

.facciataVideo .etichettaPlay {
  color: #FFF;
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .75);
}

.facciataVideo:hover .play,
.facciataVideo:focus-visible .play { background: rgba(61, 48, 40, .18); }

/* Su un telefono il riquadro è alto ~200px: il disco scende a 72px, che resta
   generoso e lascia respirare l'etichetta. Non si scende sotto: sotto i 64px
   il triangolo torna a essere un dettaglio invece che un invito. */
@media (max-width: 30rem) {
  .facciataVideo .disco { width: 72px; height: 72px; }
  .facciataVideo .etichettaPlay { font-size: 1rem; }
}

/* ---------- Riga «presto disponibile» ----------
   Il posto del pulsante di scaricamento, finche' l'app non e' pubblicata.
   E' volutamente NON un pulsante: un pulsante che non porta da nessuna parte
   si preme, e chi lo preme pensa che l'app sia rotta. */

.presto {
  display: block;
  background: var(--crisanto-20);
  border: 2px dashed var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem 1.25rem;
  text-align: center;
  color: var(--testo-principale);
  margin: 1.5rem 0;
}

/* ---------- Scheda «Perché Crisanto» ----------
   È la prima cosa che si vede nella Guida dell'app: un riquadro con il titolo
   centrato, il racconto allineato a sinistra e l'ultima riga centrata.
   ⚠️ Gradino 10 e non 25: dentro il riquadro di contenuto (già 25) un altro 25
   sarebbe invisibile. Il 10 resta nella scala e tiene il testo 80 a 10.4:1. */

/* Gradino 25, lo stesso della scheda nell'app: era stata schiarita al 10 solo
   perché stava dentro un altro 25, che ora non c'è più. */
.scheda {
  background: var(--sfondo-riquadro);
  border-radius: var(--raggio);
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 0 0 1.75rem;
}

.scheda h2 {
  margin-top: 0;
  text-align: center;
}

.scheda p { margin: 0 0 0.75rem; }
.scheda .chiusura { text-align: center; margin-bottom: 0; }

@media (max-width: 40rem) {
  .scheda { padding: 1.25rem 1rem 1rem; }
}