/* VideoHub UI — fondamenta condivise: la tavolozza + le rifiniture valide su
   tutte le pagine. Caricato PRIMA dello <style> di ogni pagina, così una pagina
   può sempre avere l'ultima parola su un dettaglio suo. */

/* ===========================================================================
   LA TAVOLOZZA DEL SITO, IN UN POSTO SOLO.

   Prima ogni pagina si riscriveva i propri colori: cambiare l'accento in
   Amministrazione tingeva la home e lasciava rosse tutte le altre. Adesso i
   colori stanno qui, e l'accento scelto da Mario arriva da /tema.css — che
   il NAS scrive da solo leggendo la configurazione, e che ogni pagina carica
   subito dopo questo file.

   Quelli qui sotto sono i valori di scorta: servono quando la pagina si apre
   prima che /tema.css sia arrivato, o se qualcuno apre un file a mano.
   =========================================================================== */
:root {
  /* spazi di sicurezza del telefono (notch, isola dinamica, barra gesti) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* i due colori dell'identità — li riscrive /tema.css */
  --accent: #e63946;
  --accent2: #f4a261;

  /* i fondi e i testi — li riscrive /tema.css quando il tema è chiaro */
  --bg: #0b0d12;
  --bg-2: #12151d;
  --card: #171b25;
  --card2: #1e2430;
  --text: #eef1f6;
  --dim: #9aa3b2;
  --line: rgba(255, 255, 255, 0.09);

  /* i colori che dicono qualcosa: fatto, attenzione, premio */
  --ok: #2a9d8f;
  /* Il verde del "fatto" ha due mestieri e non li puo' fare con lo stesso tono.
     Come SCRITTA sta su un fondo scuro, e per staccare dev'essere chiaro. Come
     FONDO di un tasto ha sopra una scritta bianca, e per farla leggere dev'essere
     scuro. Le due cose si escludono: la prima chiede luminosita' alta, la seconda
     bassa, e nessun verde le soddisfa entrambe. Quindi sono due colori.
     Il chiaro sotto il bianco dava 3,3 su 1: si legge, ma male, e "Entra" nel
     gioco dei ragazzi e' proprio uno di quei tasti. */
  --ok-fondo: #1f7d72;
  --warn: #f4a261;
  --gold: #eab308;
  /* Il rosso dell'allarme: guasti, "siamo in onda", registrazione in corso.
     Ha un nome suo apposta — deve restare rosso anche se il sito diventa
     terracotta o blu, perché lì il colore non è stile, è un avviso. */
  --errore: #e63946;
  /* lo stesso rosso quando gli va SOPRA una scritta bianca: un filo piu'
     scuro, 5,4 su 1 invece di 4,2 (il tasto «Pulisci tutto» della Regia) */
  --errore-fondo: #c62f3b;
  --neutro: #3a4152; /* il grigio dei tasti che non sono "il tasto principale" */
  --fb: #1877f2; /* l'azzurro di Facebook: è il loro, non si tocca */

  /* I COLORI CHE PARLANO, scritti una volta sola.
     Fin qui ogni pagina se li scriveva addosso: #7adcce per il «fatto»,
     #ff9aa2 per il guasto, #123024 e #3a1c1c per le fasce verdi e rosse,
     #2a323d per i tasti neutri. Sono tutti tarati sul fondo scuro, e col tema
     chiaro sparivano: verde chiarissimo su scheda bianca, rosa su bianco,
     scritte scure dentro riquadri scuri. Adesso stanno qui, e /tema.css li
     ribalta insieme a tutto il resto. */
  --ok-testo: #7adcce;      /* la scritta «fatto» */
  --ok-sfondo: #123024;     /* la fascia verde attorno */
  --ok-bordo: #1f6b45;
  --errore-testo: #ff9aa2;  /* la scritta «guasto» */
  --errore-sfondo: #3a1c1c; /* la fascia rossa attorno */
  --errore-bordo: #7f1d1d;
  --avviso-sfondo: #3a3218; /* la fascia gialla del "guarda che..." */
  --avviso-bordo: #8a6d1f;
  --tasto-fondo: #2a323d;   /* i tasti disegnati a mano: tastiere, pastiglie */

  /* Il secondo colore della chiesa QUANDO FA DA SCRITTA. E' lo stesso colore,
     ma sul bianco del tema chiaro l'arancione arriva a 2 su 1 e non si legge:
     li' /tema.css lo scurisce quanto basta. Vale per i collegamenti e per ogni
     parola scritta di quel colore. */
  --accent2-testo: var(--accent2);

  /* LA FORMA, in una scala sola.
     Prima gli angoli arrotondati erano quindici misure diverse (4, 5, 6, 8, 9,
     10, 11, 12, 14, 16, 18, 20 px, piu' 99 e 999) messe a occhio. Quattro
     misure bastano, e messe in fila si riconoscono.

     I numeri non sono scelti a tavolino: sono quelli che il sito gia' usava di
     piu' (10px sui tasti, 14px sulle schede). Cosi' mettendo ordine non cambia
     l'aria della pagina, cambia solo che le misure diventano quattro. */
  --r-0: 6px;    /* cose minuscole: etichette, pastigliette, segni */
  --r-1: 10px;   /* tasti, campi, linguette */
  --r-2: 14px;   /* schede e riquadri */
  --r-3: 20px;   /* pannelli grandi e fogli che coprono la pagina */
  --r-tondo: 999px; /* pastiglie e cerchi */
  --radius: var(--r-2);   /* il vecchio nome, ancora usato da qualche pagina */
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* I LIVELLI (chi sta sopra a chi). Erano ventitre' numeri diversi nella sola
     home, da 1 a 1000, e 9999 nell'Angolo Bambini: cosi' non si sa mai chi
     vince, e infatti la barra dei Giochi finiva dietro quella comune. */
  --z-barra: 40;      /* le barre appiccicate in alto */
  --z-pannello: 60;   /* pannelli che scivolano dentro la pagina */
  --z-finestra: 80;   /* finestre che coprono tutto e si devono chiudere */
  --z-avviso: 100;    /* messaggini e "salta al contenuto": sopra a tutto */

  /* Due nomi per la stessa cosa. La home chiamava --text-dim e --card-hover
     quello che tutte le altre pagine chiamano --dim e --card2. Finché restano
     tutti e due nessuna pagina si rompe, e si possono unire con calma. */
  --card-hover: var(--card2);
  --text-dim: var(--dim);

  /* ===========================================================================
     IL COLORE DELLA CHIESA QUANDO FA DA FONDO A UNA SCRITTA BIANCA.

     Misurato: bianco su #e63946 da' 4,2 su 1. La soglia per leggere una scritta
     normale e' 4,5. Non e' un dettaglio da manuale: e' il tasto «Entra» di
     tutte e sette le schermate della password, e su un telefono al sole quel
     rosso mangia le lettere.

     E' lo stesso mestiere doppio del verde «fatto», che qui accanto ha gia' due
     colori (--ok e --ok-fondo): come SCRITTA il rosso deve essere acceso per
     staccare dal fondo scuro, come FONDO deve essere piu' cupo per far leggere
     il bianco sopra. Un colore solo non fa tutte e due le cose.

     Questo e' il valore di scorta. Quello vero lo calcola il NAS in /tema.css,
     scurendo il rosso scelto da Mario finche' non arriva a 4,5: cosi' vale
     anche se domani la chiesa diventa blu o terracotta. */
  --accent-fondo: #cf333f;   /* 5,0 su 1 col bianco */

  /* ===========================================================================
     LA SCALA DEGLI SPAZI.

     Gli spazi del sito erano trentadue misure diverse, da 2 a 40 pixel, messe
     a occhio una pagina per volta. L'occhio non conta i pixel, ma sente quando
     due schede vicine respirano in modo diverso: e' quello che fa dire «sembra
     fatto da mani diverse».

     Sei misure bastano, e sono quelle che il sito gia' usava di piu'. */
  --s-1: 4px;    /* il filo fra un'icona e la sua parola */
  --s-2: 8px;    /* dentro un tasto, fra le cose piccole */
  --s-3: 12px;   /* fra le righe di una scheda */
  --s-4: 16px;   /* dentro una scheda, ai bordi */
  --s-5: 24px;   /* fra una scheda e l'altra */
  --s-6: 32px;   /* fra una sezione e l'altra */

  /* LA SCALA DEI CARATTERI. Stessa storia: ventisei misure diverse. */
  /* 0,875rem = 14px, e non piu' 0,78 = 12,5px. E' il pavimento del testo: un
     ottantenne legge il grigio a 12 pixel come una riga da indovinare. Il
     contrasto del sito e' gia' a norma (7,6:1): il problema era la misura. */
  --t-0: 0.875rem;  /* etichette, note a margine — il piu' piccolo ammesso */
  --t-1: 0.88rem;  /* testo di servizio */
  --t-2: 1rem;     /* il testo da leggere */
  --t-3: 1.15rem;  /* titolo di scheda */
  --t-4: 1.4rem;   /* titolo di sezione */
  --t-5: 1.75rem;  /* titolo di pagina */

  /* QUANTO DEVE ESSERE GRANDE UNA COSA CHE SI TOCCA COL DITO.
     Quarantaquattro punti: e' la misura del polpastrello, ed e' quella che
     dicono sia Apple sia Google. Sotto, si sbaglia bersaglio. */
  --tocco: 44px;

  /* I vecchi nomi con la sigla vh-: prima erano colori fissi e per questo
     restavano rossi anche col sito terracotta. Ora seguono la tavolozza. */
  --vh-accent: var(--accent);
  --vh-accent2: var(--accent2);
  --vh-gold: var(--gold);
  --vh-green: var(--ok);
  --vh-radius: var(--radius);
  --vh-shadow: var(--shadow);
}

html { -webkit-text-size-adjust: 100%; }
/* IL CARATTERE DI SCORTA DEL SITO.
   Ogni pagina il suo carattere se lo scrive da sola, e quasi tutte scrivono
   questo. Alcune no (Post, Sfondi, Spiega il sito, il riquadro della
   password di Vista camera): li' il browser usava il suo di serie, il Times
   con le grazie, e sembravano pagine rimaste senza vestito.
   «:where» vuol dire «peso zero»: qualunque regola body di una pagina vince
   su questa, anche se nel file viene prima di ui.css. Quindi non cambia
   niente a chi un carattere suo ce l'ha gia'. */
:where(body) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip; /* mai scorrimento orizzontale della pagina (i riquadri interni scorrono comunque) */
  /* Lo spazio dell'orologio e della batteria sull'iPhone. Su tutto il resto
     --sat vale zero e non cambia niente. Le pagine che se ne occupano gia' da
     sole lo rimettono a zero nel loro foglio. */
  padding-top: var(--sat);
}

/* Controlli: ereditano sempre il carattere della pagina */
button, input, select, textarea { font: inherit; color: inherit; }

/* LA MISURA DI UN CAMPO COMPRENDE IL SUO BORDO.
   Senza questa riga, «larghezza 100%» vuol dire «100% PIÙ il riempimento e il
   bordo»: un campo dentro una scheda esce di ventisei pixel, e la pagina si
   lascia scorrere di lato. Trovato dallo strumento delle larghezze sulla
   pagina Sfondi, a tutte e tre le misure di telefono: la scritta del versetto
   e il riferimento sporgevano di dodici pixel oltre il bordo dello schermo.
   Vale per i campi e non per tutto il sito: cambiare la regola a ogni
   elemento, su ventitremila righe scritte quando la regola era un'altra,
   sposterebbe cose che oggi stanno a posto. */
button, input, select, textarea { box-sizing: border-box; }
button { cursor: pointer; }

/* Focus visibile e coerente ovunque (tastiera e accessibilità) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vh-accent) 80%, white);
  outline-offset: 2px;
  border-radius: var(--r-0);
}

::selection { background: color-mix(in srgb, var(--vh-accent) 32%, transparent); }

/* Barre di scorrimento sottili e discrete */
* { scrollbar-width: thin; scrollbar-color: rgba(128, 138, 155, 0.45) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128, 138, 155, 0.45); border-radius: var(--r-1); }
::-webkit-scrollbar-thumb:hover { background: rgba(128, 138, 155, 0.7); }

/* Icone del set VideoHub: seguono dimensione e colore del testo circostante */
.vh-ic {
  width: 1.06em;
  height: 1.06em;
  display: inline-block;
  vertical-align: -0.14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.vh-c-red { color: var(--vh-accent); }
.vh-c-gold { color: var(--vh-gold); }
.vh-c-orange { color: var(--vh-accent2); }
.vh-c-green { color: var(--vh-green); }
/* Dentro i bottoni colorati l'icona segue il colore del testo (mai rosso su rosso) */
/* [448] ...tranne il pallino della DIRETTA (🔴, .vh-live): li' il rosso non
   e' stile, e' il segnale «in onda». Diventato bianco (nero sulla carta),
   in «Culti e dirette» sembrava un puntino qualunque. Non sparisce nemmeno
   su un tasto rosso: il suo disegno (vh-live) ha un filo chiaro intorno. */
button .vh-c-red:not(.vh-live), .btn .vh-c-red:not(.vh-live), [class*="btn"] .vh-c-red:not(.vh-live) { color: inherit; }
.vh-ic.vh-live { color: var(--errore, #e63946); }

/* Barra superiore comune alle sezioni: stessa identità su ogni pagina */
.vh-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + var(--sat)) 14px 10px;
  background: var(--bg, #0b0d12); /* solida: niente contenuti che "trapelano" sotto la barra */
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
@supports (backdrop-filter: blur(1px)) {
  .vh-top {
    background-color: var(--bg, #0b0d12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
/* ===========================================================================
   IL VETRO (426). Mario: «si può anche mettere al sito un effetto tipo glass
   UI?». Si', con tre regole che vengono prima dell'effetto:

   1. SOLO SULLE COSE CHE GALLEGGIANO: le barre in cima e in fondo, le schede
      della home, i pezzi piccoli. MAI su una finestra che copre lo schermo e
      MAI sotto il testo da leggere (Bibbia, cantici): e' la regola scritta in
      index.html dopo l'elenco dei libri diventato trasparente sopra il
      capitolo, illeggibile e impossibile da chiudere.
   2. SEMPRE CON IL PIENO DI SCORTA: senza sfocatura (browser vecchi), con
      «riduci la trasparenza» chiesto al telefono, con «Effetti» spento in
      Accessibilita' o col contrasto alto, torna com'era: pieno.
   3. IL VETRO VERO NON E' SOLO SFOCATO: e' mezzo trasparente, sfocato, con
      un orlo sottile e un filo di luce sul bordo di sopra.

   Qui ci sono le misure (una volta sola, per tutto il sito) e la barra in
   cima di tutte le pagine; le schede della home stanno in index.html.

   (La barra in cima era «piena apposta» dalla 138: niente contenuti che
   trapelano sotto. Con la sfocatura quello che passa sotto e' colore, mai
   testo leggibile: la ragione di allora resta rispettata.)
   ======================================================================== */
:root {
  --vetro-sfoca: blur(18px) saturate(1.5);
  --vetro-orlo: color-mix(in srgb, var(--text, #eef1f6) 10%, transparent);
  --vetro-luce: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.fx:not(.acc-contrast) .vh-top {
    background-color: color-mix(in srgb, var(--bg, #0b0d12) 74%, transparent);
    backdrop-filter: var(--vetro-sfoca);
    -webkit-backdrop-filter: var(--vetro-sfoca);
    box-shadow: var(--vetro-luce);
  }
}
/* 428 — nel tema scuro la barra si vede vetro per la luce: velo chiaro e
   filo di luce sotto (v. le schede in index.html) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.fx:not(.acc-contrast):not(.light) .vh-top {
    background-color: color-mix(in srgb, var(--bg, #0b0d12) 62%, transparent);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border-bottom-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
  }
}
/* stesso selettore del vetro, e dopo: se no perde (v. le schede in index.html) */
@media (prefers-reduced-transparency: reduce) {
  body.fx:not(.acc-contrast):not(.light) .vh-top, body.fx:not(.acc-contrast) .vh-top, body .vh-top {
    background-color: var(--bg, #0b0d12); background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
.vh-top .vh-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-2);
  background: var(--card, #171b25);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}
.vh-top .vh-back:hover { background: var(--card2, var(--card-hover, #1e2430)); }
.vh-top h1 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}
.vh-top h1 .vh-ic { color: var(--accent); width: 1.25em; height: 1.25em; }
.vh-top .vh-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--dim, var(--text-dim, #9aa3b2));
}

/* Rispetta chi ha chiesto meno animazioni nel sistema */
/* [448] LE TRANSIZIONI A ZERO, NON A UN SOFFIO. Era «0.01ms», la ricetta che
   gira in rete: ma su «*» vuol dire che OGNI elemento prende una
   transizione su tutte le proprieta', anche quelli che non ne avevano
   nessuna. E quando cambia una cosa che si eredita (la grandezza del testo,
   il colore della barra di scorrimento) ne nasce una per ciascun elemento
   sotto. Misurato: aprire il Confronta sopra la mappa ne faceva nascere
   1.850, e con meno movimento ci voleva 1,9 secondi invece di 0,6. A zero
   (anche il ritardo) il browser non ne crea nessuna, e il risultato sullo
   schermo e' lo stesso: il salto subito. Nessuno nel sito aspetta la fine
   di una transizione («transitionend»); la mappa (Leaflet) se non arriva
   aspetta un quarto di secondo e va avanti da se'. Le animazioni restano a
   un soffio: chi aspetta «animationend» lo riceve. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ============ Accessibilità: valida su TUTTE le pagine ============
   Le scelte fatte nel pannello ♿ della home (salvate sul dispositivo)
   vengono applicate ovunque da vh-ui.js con queste classi sul body. */

/* Il carattere da lettura (Literata, licenza OFL): fatto per le pagine
   lunghe, le grazie aiutano l'occhio a non perdere la riga. Si sceglie
   dalle impostazioni della Bibbia (v. index.html, carattereLettura). */
/* 437: le maiuscole romane dei titoli delle tavole (i cartigli dei viaggi) */
@font-face {
  font-family: 'Marcellus';
  src: url('/fonts/marcellus.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
.font-lettura { font-family: 'Literata', 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: .005em; }
.font-dislessia { font-family: 'OpenDyslexic', 'Comic Sans MS', -apple-system, sans-serif; letter-spacing: .015em; word-spacing: .06em; }

/* Font ad alta leggibilità (dislessia) — OpenDyslexic, servito dal NAS */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/opendyslexic-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/opendyslexic-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/opendyslexic-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* [448] IL TESTO GRANDE CRESCE DALLA RADICE. Prima cresceva solo il body:
   tutto quello che nel sito e' misurato in «rem» (la scala dei caratteri
   --t-0 … --t-5, le etichette, i titoli delle schede) si misura sulla radice
   (html) e restava piccolo com'era. Adesso la classe va anche su <html>
   (la mette vh-ui.js, e la home in testa alla pagina, prima del disegno), e
   il body sta al 100% di quella: le due cose insieme non si moltiplicano.
   Se una pagina mettesse la classe solo sul body, resta la regola di prima. */
html.acc-big { font-size: 118%; }
html.acc-bigger { font-size: 138%; }
body.acc-big { font-size: 118%; }
body.acc-bigger { font-size: 138%; }
html.acc-big body.acc-big, html.acc-bigger body.acc-bigger,
html.acc-bigger body.acc-big, html.acc-big body.acc-bigger { font-size: 100%; }
body.acc-big main, body.acc-bigger main { line-height: 1.75; }

body.acc-dyslexic,
body.acc-dyslexic button, body.acc-dyslexic input,
body.acc-dyslexic select, body.acc-dyslexic textarea {
  font-family: 'OpenDyslexic', 'Comic Sans MS', -apple-system, sans-serif;
}
body.acc-dyslexic { letter-spacing: 0.015em; word-spacing: 0.06em; overflow-wrap: break-word; }
body.acc-dyslexic main, body.acc-dyslexic .card, body.acc-dyslexic p { line-height: 1.85; }

body.acc-contrast {
  --bg: #000; --bg-2: #0a0a0a; --card: #0b0b0b; --card2: #121212; --card-hover: #161616;
  --text: #fff; --text-dim: #eaeaea; --dim: #eaeaea; --line: #ffffff;
}
body.acc-contrast a { text-decoration: underline; }
body.acc-contrast .card, body.acc-contrast .vh-top .vh-back { border-width: 2px; }

/* [448] transizioni a zero anche qui, e per lo stesso motivo (v. sopra,
   «prefers-reduced-motion») */
body.acc-calm *, body.acc-calm *::before, body.acc-calm *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
/* [448] ...e anche la RADICE. La pagina scorre su <html>, che sta sopra il
   body e quindi fuori dalla regola qui sopra: un «html { scroll-behavior:
   smooth }» di una pagina faceva scivolare lo stesso i salti alle ancore
   (e il «torna su») a chi aveva chiesto meno movimento. */
html:has(body.acc-calm) { scroll-behavior: auto !important; }

/* Salta al contenuto (navigazione da tastiera) */
.vh-skip {
  position: fixed; top: -60px; left: 12px; z-index: 100;
  background: var(--vh-accent); color: #fff; font-weight: 700;
  padding: 10px 16px; border-radius: var(--r-1); text-decoration: none;
  transition: top 0.15s;
}
.vh-skip:focus-visible { top: 10px; }

/* Se il browser conosce color-mix() la barra in alto diventa "vetro smerigliato";
   altrimenti resta col colore pieno, invece di sparire. */
@supports (background-color: color-mix(in srgb, red 50%, blue)) {
  @media (min-width: 721px) {
    .vh-top { background-color: color-mix(in srgb, var(--bg, #0b0d12) 94%, transparent); }
  }
}

/* ===========================================================================
   LA SCHERMATA "METTI LA PASSWORD".

   Erano sette, tutte diverse: Giochi larga 870px col tasto piccolo a sinistra,
   Regia larga 295px col tasto in mezzo, Musica col tasto a tutta riga, Intercom
   col tasto verde mentre tutti gli altri l'avevano rosso, Pastori con il campo
   largo la meta' della sua scheda. È lo stesso gesto — scrivere una password —
   in sette vestiti.

   Qui la forma la decide un posto solo. Le pagine tengono il loro contenuto:
   basta che mettano la classe vh-auth sulla scheda del login.
   =========================================================================== */
.vh-auth {
  max-width: 380px;
  margin: 7vh auto 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 22px;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow);
}
.vh-auth > * { margin: 0; }
.vh-auth h2 { font-size: 1rem; }
/* anche le caselle da spuntare prendono il colore della chiesa: in Intercom
   restava il blu di serie del browser, un quarto colore in mezzo agli altri */
.vh-auth input[type="checkbox"], .vh-auth input[type="radio"] { accent-color: var(--accent); }

/* i campi occupano tutta la riga: in Pastori il campo era largo la meta' della
   scheda e appoggiato a sinistra, e sembrava rotto */
.vh-auth input:not([type="checkbox"]):not([type="radio"]),
.vh-auth select,
.vh-auth textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-2);
  padding: 12px 13px;
  font-size: 1rem;
}
/* :not(.switch) perche' la riga della casella da spuntare e' anch'essa una
   <label>, ma e' una frase da leggere: in maiuscoletto piccolo diventava
   illeggibile. Queste regole valgono per le etichette dei campi. */
.vh-auth label:not(.switch) {
  /* era 0,74rem = 11,8 pixel: sotto la soglia del leggibile su un telefono */
  font-size: var(--t-0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  display: block;
  margin-bottom: 5px;
}

/* IL tasto: uno per schermata, largo quanto la scheda, del colore della chiesa.
   Il dito ci arriva senza mirare, e su tutte le pagine e' lo stesso. */
.vh-auth button {
  width: 100%;
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--accent-fondo);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 20px;
  border-radius: var(--r-2);
  min-height: 46px;
}
.vh-auth button:hover { filter: brightness(1.08); }

/* il secondo tasto (impronta, volto) non deve gridare piu' del primo:
   in Admin era rosso pieno e si vedeva PIU' di "Entra" */
.vh-auth button.vh-2 {
  background: var(--card2);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 600;
}

/* Dentro una schermata di password si va in colonna, sempre. In Pastori il
   campo stava dentro una griglia a due colonne e finiva largo la meta' della
   scheda, appoggiato a sinistra: sembrava rotto, ed era solo la griglia. */
.vh-auth .row, .vh-auth .fila { display: block; }
.vh-auth .row > * + *, .vh-auth .fila > * + * { margin-top: 12px; }

/* le linguette (ATEM/OBS del Tally) restano affiancate */
.vh-auth .tabs { display: flex; gap: 8px; }
.vh-auth .tabs button { width: auto; flex: 1; background: var(--card2); color: var(--dim); border: 1px solid var(--line); }
.vh-auth .tabs button.on { background: var(--accent-fondo); color: #fff; border-color: var(--accent); }

/* le spiegazioni intorno */
.vh-auth .msg, .vh-auth .hint, .vh-auth .sub, .vh-auth p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--dim);
}
.vh-auth .msg.err, .vh-auth .hint.err { color: var(--errore-testo); }

@media (max-width: 560px) {
  .vh-auth { margin: 4vh 14px 0; padding: 18px; }
}

/* ===========================================================================
   PAROLA LUNGA SUL COMPUTER, PAROLA CORTA SUL TELEFONO.

   Sul telefono "Cerca nella Bibbia · Piani di lettura · Il mio diario ·
   Glossario biblico · Commento del capitolo" occupava tre righe. Accorciando
   il testo dove l'icona accanto dice gia' il resto — Cerca, Piani, Diario,
   Glossario, Commento — sta tutto su una riga sola e si capisce uguale.

   Sono due scritte nello stesso tasto: se ne vede una per volta. Chi legge
   con lo schermo grande, o con il lettore di schermo, ha la parola intera.
   =========================================================================== */
.vh-corto { display: none; }
@media (max-width: 560px) {
  .vh-lungo { display: none; }
  .vh-corto { display: inline; }
}

/* ===========================================================================
   GLI EFFETTI DI MOVIMENTO.

   Sono LEGGERI apposta: una pagina che entra salendo di dieci pixel, un foglio
   che compare crescendo di un soffio, l'intestazione che scorre un po' piu'
   piano del dito. Niente che faccia aspettare: tutto sotto il terzo di secondo.

   Si accendono a tre condizioni, e basta che ne manchi una perche' spariscano:
     1. il visitatore non li ha spenti     -> body.fx lo mette vh-ui.js
     2. il sistema non chiede meno moto    -> @media prefers-reduced-motion
     3. non e' acceso "Riduci animazioni"  -> body.acc-calm vince su tutto,
        perche' e' una scelta di accessibilita' e non un gusto.
   =========================================================================== */
/* ===========================================================================
   [448] LA SCALA DEI MOVIMENTI, DELLE OMBRE E DEL VELO.

   Nel sito c'erano trentadue durate diverse sotto il secondo e dieci curve,
   centosedici ombre diverse e cinque scuri diversi dietro i fogli: e' quello
   che fa sembrare un sito «montato a pezzi», anche se nessuno sa dire
   perche'. Qui ci sono le misure, una volta sola, come gia' per gli angoli
   (--r-*) e gli spazi (--s-*). Chi scrive un movimento nuovo prende queste.

   UN SOLO INTERRUTTORE: con «Riduci animazioni» acceso (body.acc-calm) o col
   telefono che chiede meno movimento, le durate valgono zero e lo
   spostamento pure. Non serve ricordarsene riga per riga.
   =========================================================================== */
:root {
  --vh-t-rapido: 160ms;   /* uscire, un tasto che risponde */
  --vh-t: 240ms;          /* entrare: un foglio, un riquadro */
  --vh-t-lento: 360ms;    /* le cose grandi che attraversano lo schermo */
  /* arriva svelta e si posa piano: e' la curva gia' piu' usata nel sito */
  --vh-curva: cubic-bezier(.2, .8, .2, 1);
  /* parte piano e se ne va svelta: chi esce non deve farsi aspettare */
  --vh-curva-uscita: cubic-bezier(.4, 0, 1, 1);
  --vh-sposta: 10px;      /* quanto sale un foglio mentre entra */

  /* le ombre, dalla piu' vicina alla piu' lontana dal foglio */
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .25);           /* un tasto appoggiato */
  --ombra-2: 0 6px 18px -6px rgba(0, 0, 0, .45);     /* un tondo che galleggia */
  --ombra-3: 0 14px 36px -12px rgba(0, 0, 0, .55);   /* una striscia, una scheda sollevata */
  --ombra-4: 0 24px 60px -20px rgba(0, 0, 0, .7);    /* un fumetto sopra tutto */
  /* Il velo: SOLO per quello che lascia vedere la pagina apposta (la guida,
     che indica i pezzi veri). Una finestra che copre lo schermo non e' mai
     trasparente: il suo fondo e' --bg. */
  --velo: rgba(4, 6, 10, .72);
  --velo-leggero: rgba(6, 8, 12, .55);
}
/* sul telefono lo schermo e' piccolo: la stessa strada si fa un po' prima */
@media (max-width: 720px) {
  :root { --vh-t: 220ms; --vh-t-lento: 300ms; }
}
/* sulla carta un'ombra nera pesa il doppio: stesse misure, tono caldo e leggero */
:root.light, :root.vista-carta, body.light, body.vista-carta {
  --ombra-1: 0 1px 2px rgba(58, 42, 28, .12);
  --ombra-2: 0 6px 18px -6px rgba(58, 42, 28, .22);
  --ombra-3: 0 14px 36px -12px rgba(58, 42, 28, .26);
  --ombra-4: 0 24px 60px -20px rgba(58, 42, 28, .34);
}
@media (prefers-reduced-motion: reduce) {
  :root { --vh-t-rapido: 0ms; --vh-t: 0ms; --vh-t-lento: 0ms; --vh-sposta: 0px; }
}
body.acc-calm { --vh-t-rapido: 0ms; --vh-t: 0ms; --vh-t-lento: 0ms; --vh-sposta: 0px; }

@media (prefers-reduced-motion: no-preference) {
  /* i fogli che coprono la pagina (Chiave, glossario, commento, pannelli) */
  /* [448] con la scala: meno corsa (era scala .94 e 22 pixel), stessa curva */
  body.fx .vh-foglio { animation: vhFoglio var(--vh-t) var(--vh-curva) both; }
  @keyframes vhFoglio {
    from { opacity: 0; transform: scale(.97) translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  /* [448] L'ENTRATA DI TUTTI I FOGLI, IN UN POSTO SOLO.
     Su una quarantina di fogli della home solo cinque entravano (quelli con
     .vh-foglio); gli altri — Accessibilita', Tutto, le lingue, la scheda
     «chi e'», la mappa — comparivano di colpo. Adesso la classe la mette
     vh-pannelli.js a ogni foglio che prende in carico, nell'istante in cui
     nasce. Solo opacita' e spostamento, che fa la scheda video. (L'uscita,
     uguale al contrario, la fa vh-pannelli.js.)
     «:where» = peso zero: un foglio che ha gia' un'entrata sua la tiene.

     [448] IL FOGLIO NON SFUMA: SFUMA QUELLO CHE HA DENTRO. Mario: «una
     finestra che copre lo schermo non deve MAI essere trasparente». Prima
     si accendeva il foglio intero partendo da opacita' 0, e per un quinto
     di secondo la pagina sotto si leggeva attraverso. Peggio: col telefono
     affaticato (la mappa grande aperta, il 3D o il gioco che si preparano)
     l'animazione aspettava il via del disegnatore anche per un secondo,
     ferma al suo primo fotogramma: il foglio c'era, copriva, e non si
     vedeva. Adesso il fondo pieno c'e' dal primo fotogramma, e a salire e
     accendersi sono i pezzi che ha dentro: l'accensione e' corta (meno di
     meta' del tempo), la salita va fino in fondo. Il via lo da'
     vh-pannelli.js nell'istante in cui il foglio nasce, senza aspettare il
     disegnatore (v. «avviaEntrata»). */
  :where(body.fx) :where(.vh-pan-entra) > :where(*) { animation: vhPanEntra var(--vh-t) var(--vh-curva) backwards; }
  @keyframes vhPanEntra {
    from { opacity: 0; translate: 0 var(--vh-sposta); }
    45% { opacity: 1; }
  }
  /* il riquadro dentro un foglio che entra gia' (.vh-foglio, il riquadro dei
     promemoria della home): un'entrata sola, non due una dentro l'altra.
     [448] Anche a entrata finita (.vh-pan-entrato): un riquadro che il
     programma rifa' a ogni tocco non rientra ogni volta. E se il riquadro e'
     proprio il contenuto del foglio, entra insieme agli altri pezzi. */
  body.fx .vh-pan-entra .vh-foglio, body.fx .vh-pan-entra .prom-box,
  body.fx .vh-pan-entrato .vh-foglio, body.fx .vh-pan-entrato .prom-box { animation: none; }
  body.fx .vh-pan-entra > .vh-foglio, body.fx .vh-pan-entra > .prom-box { animation: vhPanEntra var(--vh-t) var(--vh-curva) backwards; }

  /* IL TASTO CHE SI ABBASSA QUANDO LO PREMI. E' l'effetto piu' piccolo e il
     piu' importante: su un telefono non c'e' il passaggio del mouse, e senza
     questo non si capisce se il tocco e' andato a segno. */
  body.fx button:active, body.fx .btn:active, body.fx .copybtn:active,
  body.fx a.vh-back:active {
    transform: scale(.96);
    transition: transform .06s;
  }
  body.fx button, body.fx .btn, body.fx .copybtn, body.fx a.vh-back {
    /* [448] i tempi della scala qui sopra (erano gli stessi, scritti a mano) */
    transition: transform var(--vh-t-rapido) var(--vh-curva), background-color var(--vh-t-rapido), border-color var(--vh-t-rapido);
  }
  /* la barra in cima, quando la pagina non e' ancora scorsa, e' senza bordo:
     il bordo compare scorrendo, come un foglio che passa sotto un altro */
  body.fx .vh-top { transition: border-color .25s, box-shadow .25s; }
}

/* "Riduci animazioni" e' l'ultima parola: spegne anche questi. */
body.acc-calm .vh-foglio, body.acc-calm .vh-pan-entra, body.acc-calm .vh-pan-entra > * { animation: none !important; }

/* [448] (R1) LA TESTIMONIANZA APERTA E' UNA FINESTRA PIENA. «Continua a
   leggere →» apriva un foglio che copre tutto con un velo nero all'82% (la
   home sotto si leggeva, sfocata) e che si accendeva da trasparente con una
   sua animazione («tstIn»): col telefono affaticato restava a opacita' 0
   fino a un secondo e mezzo, a coprire la pagina senza farsi vedere. Era
   l'unico dei fogli della home rimasto fuori dalla regola dei veli pieni.
   Qui: il fondo del sito, niente accensione (a salire e accendersi e' il
   riquadro dentro, come negli altri fogli), e niente sfocatura, che dietro
   un fondo pieno costa e non si vede. Senza la sfocatura la fascia sotto il
   notch torna ferma in cima mentre il racconto scorre, e prende il colore
   della carta come quella della lettura. Il tocco fuori dal riquadro
   continua a chiudere (lo fa la pagina). «:root» davanti = vince sulla
   regola della home senza !important. (Il suo posto giusto e' la regola dei
   veli pieni in index.html: v. le richieste del 448.) */
:root #tst-ov {
  background: var(--bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: none;
}
:root #tst-ov::before { background: color-mix(in srgb, var(--bg) 78%, transparent); }
/* l'ombra nera a meta' era fatta per stare sul velo nero: sul fondo pieno,
   e sulla carta, faceva una macchia grigia sotto il riquadro */
:root #tst-ov .tst-foglio { box-shadow: var(--ombra-3); }

/* ===========================================================================
   IL DITO CI DEVE ARRIVARE.

   Una casella da spuntare disegnata dal browser e' 13 pixel: su un mouse va
   benissimo, su un telefono si sbaglia una volta su tre. E quando la scritta
   accanto non fa da tasto, l'unico bersaglio e' quel quadratino.

   Qui si fanno due cose per tutte le pagine: la casella diventa grande abbastanza
   e la riga che la contiene si tocca tutta.
   =========================================================================== */
input[type="checkbox"], input[type="radio"] {
  width: 21px;
  height: 21px;
  accent-color: var(--accent);
  flex: none;
}

/* La riga "casella + scritta": si tocca tutta, non solo il quadratino. */
label.switch, .switch {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  cursor: pointer;
}

/* ...E ANCHE QUANDO NESSUNO HA SCRITTO «switch» (384).
   La regola qui sopra vale se chi ha scritto la pagina si e' ricordato di
   mettere la classe. Aprendo le pagine della squadra una per una ne sono
   rimaste fuori sei — «Fammi vedere anche i turni gia' passati» nei Turni,
   tre nel pilota automatico dello Studio, una in Musica, una in Scaletta —
   righe alte 21 o 23 pixel: la scritta si tocca, ma solo se ci si prende bene.
   Questa le prende tutte, senza doversene ricordare.

   Solo l'altezza, di proposito: se l'etichetta e' «in linea» (com'e' di serie)
   min-height non fa niente e la pagina resta identica; se e' un blocco o una
   riga flessibile, cresce fino alla misura del dito. In nessun caso sposta
   qualcosa di lato. Chi ha un motivo per stare sotto misura scrive .vh-mini. */
label:not(.vh-mini):has(> input[type="checkbox"]),
label:not(.vh-mini):has(> input[type="radio"]) {
  align-items: center;
  min-height: var(--tocco);
  cursor: pointer;
}

/* ===========================================================================
   RIFINITURA COMUNE — le regole che valgono su tutte e ventitré le pagine.

   Sono nate da una misura, non da un gusto: uno strumento
   (strumenti/prova-design.mjs) ha aperto ogni pagina alla larghezza di un
   telefono e ha contato tre cose. Ha trovato 98 comandi piu' piccoli del dito,
   58 scritte sotto i 12 pixel e 20 scritte con troppo poco contrasto.

   Qui sotto si correggono quelle che tornano su OGNI pagina: una volta sola,
   nel posto giusto, invece di ventitre' volte.
   =========================================================================== */

/* IL TASTO «TORNA INDIETRO»: era 38×38 su nove pagine. Sei pixel sotto la
   misura del polpastrello, e sta nell'angolo in alto a sinistra, dove il
   pollice arriva peggio. */
.vh-top .vh-back { width: var(--tocco); height: var(--tocco); }

/* «Salta al contenuto»: lo usa chi naviga con la tastiera o col lettore di
   schermo. Era alto 38 e col bianco su rosso stava a 4,2 su 1. */
.vh-skip { padding: 12px 18px; min-height: var(--tocco); display: flex; align-items: center; background: var(--accent-fondo); }

/* IL DITO CI DEVE ARRIVARE, DAPPERTUTTO.

   Non e' una regola su tutti i tasti indiscriminatamente: dentro le strisce
   che scorrono di lato (le linguette, la barra in fondo) i comandi sono
   piccoli apposta e ingrandirli romperebbe la riga. Qui si alzano solo i
   comandi che stanno per conto loro.

   .vh-mini e' la via d'uscita: chi ha un motivo per stare sotto la misura lo
   dichiara, e si vede nel codice che e' una scelta e non una dimenticanza. */
button:not(.vh-mini), .btn:not(.vh-mini), a.btn:not(.vh-mini),
summary:not(.vh-mini), select:not(.vh-mini),
/* «input» senza specificare il tipo: elencare i tipi uno per uno sembrava piu'
   preciso, e invece lasciava fuori proprio i campi scritti come <input> e
   basta — che sono la maggioranza, perche' «testo» e' il tipo di serie e
   nessuno lo scrive. Il campo del codice in Giochi restava a 41 pixel per
   questo. Qui si prende ogni campo TRANNE quelli che una misura minima non la
   vogliono: caselle, pallini e cursori. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not(.vh-mini) {
  min-height: var(--tocco);
}

/* ...E CI DEVE ARRIVARE ANCHE DI LATO (384).
   L'altezza da sola non basta. Un tasto con la sola icona — il «?» accanto al
   titolo di una scheda, il «↻ ricarica», il «↶ annulla» — e' alto 44 e largo
   35: verticalmente il dito lo prende, di traverso no. Misurati aprendo le
   pagine davvero, a 390 px: quarantuno in Amministrazione (un «?» per ogni
   scheda), quattro in Attrezzatura, tre nel Cruscotto, ventiquattro chevron
   in Regia.
   La larghezza si mette QUI e non sui campi di testo: una casella deve poter
   cedere in una riga stretta (vedi la regola qui sotto, «LA CASELLA SI
   STRINGE, IL TASTO NO»), un tasto no. */
button:not(.vh-mini), .btn:not(.vh-mini), a.btn:not(.vh-mini),
summary:not(.vh-mini), select:not(.vh-mini) {
  min-width: var(--tocco);
}

/* LA CASELLA SI STRINGE, IL TASTO NO (375).
   Una casella di testo, di suo, non vuole mai essere piu' stretta di venti
   lettere: in una riga «casella + tasto» su un telefono da 360 pixel e' lei
   che si impunta e il tasto accanto paga — schiacciato fino a diventare un
   cerchio con la scritta fuori («Cerca» nelle prediche, 8 settembre 2026).
   Qui il minimo delle caselle torna a zero: in una riga stretta e' la casella
   a cedere, non il tasto. «:where» tiene la regola a peso zero, cosi' una
   pagina che vuole una casella larga («min-width: 180px») vince sempre. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])),
:where(select, textarea) { min-width: 0; }

/* [448] L'IPHONE NON DEVE INGRANDIRE LA PAGINA QUANDO SI TOCCA UNA CASELLA.
   Safari lo fa da solo con ogni casella scritta sotto i 16 pixel: la pagina
   salta di lato, e per tornare com'era bisogna allargare con due dita — cosa
   che una persona anziana non sa fare. La regola stava copiata pagina per
   pagina (nove pagine della squadra); qui vale per tutte, anche per quelle
   di domani. Solo col dito (pointer: coarse): col mouse una casella piu'
   piccola non da' fastidio a nessuno. «max»: chi e' gia' piu' grande resta
   com'e' (il testo grande del pannello ♿ non si rimpicciolisce).
   [448] (R3) IL PESO. La regola deve passare sopra le pagine che fanno le
   caselle piu' piccole, anche con una classe davanti: «input, select {
   font-size: .92rem }» (Camera, Scaletta), «form.pray textarea» (la
   preghiera e la testimonianza nella home, che restavano a 15,2 px perche'
   le tendine e le caselle lunghe pesavano meno). Per questo tutte e tre
   portano la stessa fila di :not: sulle tendine e sulle caselle lunghe i
   «type» non filtrano niente, danno solo lo stesso peso.
   IL CONTRARIO: «max» usa 1em, cioe' la misura di chi la contiene, non
   quella che la pagina aveva scelto. Una casella che la pagina vuole PIU'
   GRANDE di 16 con una classe (il codice d'invito di /entra a 21,6 px, il
   nome in /gioca) qui tornava a 16. Una casella cosi' si segna con
   data-grande e la regola la lascia com'e'. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([data-grande]),
  select:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([data-grande]),
  textarea:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([data-grande]) {
    font-size: max(16px, 1em);
  }
}

/* IL TITOLO DI UN RIQUADRO CHE SI APRE (<summary>) e' alto 44 per il dito, ma
   la scritta gli stava appiccicata in alto con il vuoto sotto: nove pixel
   fuori centro, misurati su ventisei riquadri (prova-tasti-testo, 375). Il
   centro in altezza senza perdere il triangolino: «align-content» sui
   blocchi lo capiscono i browser dal 2024; quelli vecchi lasciano com'era. */
summary:not(.vh-mini) { align-content: center; }

/* LA PAROLA CHE DA TELEFONO SPARISCE. Mario (375): «tutto cio' che puoi
   sostituire con icona per risparmiare da cellulare fallo, se da PC vuoi
   tenere il testo per maggiore chiarezza va bene». La convenzione e' quella
   nata per la barra del versetto: l'icona sta nel tasto, la parola sta in
   <span class="et"> e sotto i 620 pixel non si vede. Il tasto DEVE avere un
   «title» o un «aria-label» con la parola intera: chi tiene premuto e chi
   usa il lettore vocale la legge lo stesso. Per chi ha chiesto il testo
   grande o la versione semplice la parola resta: un tasto con la sola icona
   e' un indovinello. */
@media (max-width: 620px) {
  button .et, .btn .et, a[href] .et { display: none; }
  body.acc-big button .et, body.acc-bigger button .et, body.acc-simple button .et,
  body.acc-big .btn .et, body.acc-bigger .btn .et, body.acc-simple .btn .et,
  body.acc-big a[href] .et, body.acc-bigger a[href] .et, body.acc-simple a[href] .et { display: inline; }
}

/* Un link vestito da tasto (<a class="btn">) si comporta come un tasto: da
   «inline» l'imbottitura non spinge le righe intorno e finisce sopra il testo
   che lo precede. (Visto in Eventi, 7 settembre 2026.) */
a.btn:not(.vh-mini) { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }

/* Le linguette DENTRO una schermata di password (ATEM/OBS del Tally) non sono
   una striscia che scorre: sono due tasti grandi, e devono essere tasti. */
.vh-auth .tabs button { min-height: var(--tocco); }
/* dentro le strisce scorrevoli e le barre fitte comanda la pagina, non questa
   regola: li' i comandi si toccano lo stesso perche' sono affiancati e larghi */
nav.tabs button, .tabs button, .vh-strip button, .strip button,
.chip, .pill { min-height: 0; min-width: 0; }
/* La barra dei comandi del versetto (ascolta, condividi, immagine, chiave,
   appunto, preferiti) NON e' una striscia che scorre: e' la fila di tasti che
   si usa di piu' in tutto il sito. Stava a 31 pixel di altezza. */
.fila-azioni button, .fila-azioni a { min-height: var(--tocco); min-width: var(--tocco); }

/* IL PIU' PICCOLO CHE SI PUO' LEGGERE.
   Le etichette dei campi stavano a 11,5 pixel (in Camera a 10,6): su un
   telefono in mano, con la luce di lato, sono lettere che si indovinano. */
/* «.muted» e' la classe grigia della home, e mancava da questo elenco: era
   l'unica scritta piccola senza pavimento. */
label, .hint, .sub, .nota, .note, small, figcaption, .muted { font-size: max(var(--t-0), 13px); }

/* Il tasto «Entra» e ogni altro fondo rosso con la scritta bianca sopra: il
   rosso da fondo, non quello da scritta. */
.vh-auth button { background: var(--accent-fondo); }

/* IL TASTO «MANDA SU WHATSAPP».
   Il verde di WhatsApp (#25d366) e' chiaro: con la scritta bianca sopra sta a
   1,98 su 1, meno della meta' di quello che serve per leggere. Il tasto resta
   verde e si riconosce, ma di un verde scuro che col bianco sta a 5 su 1.
   Due classi di peso, «.btn.btn-wa»: cosi' vince sul fondo che ogni pagina
   da' al suo .btn, anche se lo scrive dopo questo file. */
.btn.btn-wa, .btn-wa { background: #1a7f4b; color: #fff; border-color: transparent; }

/* ===========================================================================
   LA VISTA CARTA ANCHE SULLE PAGINE PUBBLICHE.

   La Vista Carta e' la scelta di accessibilita' «chiara, come un giornale»
   del tasto ☀ della home. Prima valeva SOLO nella home: chi l'aveva scelta
   perche' sul nero legge male, al primo collegamento (Privacy, Mappa del
   sito, un evento, Gioca) si ritrovava sul fondo nero.

   Vale sulle pagine che lo dichiarano con «data-carta» su <html>: sono le
   pagine pubbliche, costruite coi colori del sito (--bg, --card, --text…) e
   quindi capaci di girare. La classe «vista-carta» la mette una riga in testa
   alla pagina, prima del primo disegno (niente lampo nero), e la tiene
   allineata vh-ui.js. La home non ha data-carta: ha la sua carta, piu' ricca,
   dentro index.html, e queste regole non la toccano.

   I colori sono gli stessi della home (index.html, «LA VISTA CARTA»): carta
   #f4ede3, crema #fffbf5, inchiostro #1c1612, terracotta #9a4518.
   =========================================================================== */
html[data-carta].vista-carta {
  --bg: #f4ede3; --bg-2: #ece2d1; --card: #fffbf5; --card2: #f6eee0;
  --text: #1c1612; --text-dim: #6b5e54; --dim: #6b5e54; --muted: #6b5e54;
  --line: #e4d8c8; --neutro: #cbbba6; --card-hover: #efe5d3;
  --accent: #9a4518; --accent2: #c46a3a; --accent2-testo: #8a441c;
  --ok: #0f6b60; --ok-testo: #0f6b60; --ok-sfondo: #e7f2ea; --ok-bordo: #b7d6c0;
  --errore: #a33223; --errore-testo: #a33223; --errore-sfondo: #f9ebe7; --errore-bordo: #e5c0b5;
  --warn: #9a6a18; --avviso-sfondo: #f7efdc; --avviso-bordo: #e3d0a4;
  --tasto-fondo: #efe6d6;
  --shadow: 0 12px 30px rgba(58, 42, 28, 0.12);
  --striscia-notte: #241e1a;
  color-scheme: light;
  background: var(--bg);
  color: var(--text);
}
html[data-carta].vista-carta body { background: var(--bg); color: var(--text); }
/* i titoli con le grazie, come nella home: e' meta' dell'identita' della carta */
html[data-carta].vista-carta :is(h1, h2, h3) {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
html[data-carta].vista-carta ::selection { background: rgba(154, 69, 24, 0.28); }
/* i campi: la scatola scura di serie su fondo carta sarebbe un buco nero */
html[data-carta].vista-carta :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  background: var(--card); color: var(--text); border-color: var(--line);
}
html[data-carta].vista-carta :is(input, textarea)::placeholder { color: var(--dim); opacity: 1; }

/* [448] LA CARTA ANCHE NELLE PAGINE DELLA SQUADRA CHE SI USANO CON LA LUCE
   (Amministrazione, Turni, Pastori, Musica, Cruscotto, Attrezzatura, Coda,
   Post, Sfondi, Avvisi, Squadra, Studio): anche loro hanno data-carta. Le
   pagine della DIRETTA (Regia, Tally, Grafiche, Proietta, Camera, Prompter,
   Gobbo, Monitor, Intercom, Scaletta, Bacheca) hanno data-sempre-scuro e
   restano scure: v. applyAcc in vh-ui.js.
   Aperte una per una sulla carta, telefono e computer, l'unica cosa comune
   che restava del tema scuro era il tasto «di contorno» grigio ardesia
   (.btn.grigio: Nuovo, Modifica, Duplica, Condividi nel Cruscotto e
   nell'Attrezzatura), scritto a mano #3a4152. Si leggeva, ma sulla carta
   era un mattone scuro in mezzo al crema. Qui prende il vestito del
   «secondo tasto» del sito (quello dell'impronta nei cancelli, .vh-2, e del
   grigio dello Studio): fondo --card2, filo --line, scritta d'inchiostro
   (16 su 1). */
html[data-carta].vista-carta .btn.grigio {
  background: var(--card2);
  color: var(--text);
  border: 1px solid var(--line);
}

/* ===========================================================================
   LA STRISCIA DELL'ORA DI NOTTE, SU ANDROID.

   Quando il telefono e' in tema scuro, Chrome su Android dipinge la striscia
   dell'ora (l'ora, la batteria) del SUO nero, e ignora il colore chiaro che la
   pagina gli chiede. Non e' un difetto del sito: la pagina lo chiede giusto
   (la diagnostica di Mario lo dimostra riga per riga) e il browser decide da
   solo. Il risultato pero' e' brutto: una lama nera sopra una pagina color
   carta, con uno stacco netto.

   Allora, invece di litigare col browser, il sito se ne fa una cornice: chiede
   per la striscia un colore scuro CALDO, intonato alla carta (che Chrome
   accetta volentieri, perche' e' scuro), e sotto la striscia mette una
   sfumatura che da quel colore scende nella carta. Lo stacco sparisce: la
   striscia sembra parte del disegno, come un'ombra in cima.

   Il prezzo, detto onesto: la sfumatura si prende 14 pixel in cima. Per non
   coprire niente — il logo delle sezioni, la barra della lettura, il tasto
   della lingua — si allarga --sat, lo spazio che il sito lascia gia' al notch
   degli iPhone: tutto quello che sa stare sotto il notch sa stare anche sotto
   la sfumatura, senza toccare una pagina.

   La classe la mette vh-ui.js (coloraBarraTelefono) SOLO se: Android, tema
   scuro del telefono, pagina chiara. Sugli iPhone la striscia segue gia' il
   colore della pagina, e sul computer non c'e' nessuna striscia.
   =========================================================================== */
html.striscia-notte {
  --striscia-notte: #1a1c22;   /* la Vista Carta lo riscrive col suo crepuscolo */
  --notte-h: 14px;
  --sat: calc(env(safe-area-inset-top, 0px) + var(--notte-h));
}
html.striscia-notte::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: var(--sat);
  /* prima la versione che capiscono tutti, poi quella piu' morbida: chi non
     conosce color-mix() tiene la prima, e la sfumatura c'e' comunque */
  background: linear-gradient(to bottom, var(--striscia-notte), transparent);
  background: linear-gradient(to bottom, var(--striscia-notte) 0,
    color-mix(in srgb, var(--striscia-notte) 40%, transparent) 55%, transparent 100%);
  pointer-events: none;
  z-index: 2147483647;
}

/* ===========================================================================
   [473] LE NOTE PERSONALI SUI CANTICI (vh-note.js): il bollino 📝 accanto al
   nome della parte, e il foglietto per scriverla.

   Il bollino e' piccolo DA VEDERE ma non da toccare: 44 pixel come ogni tasto
   (il dito ci deve arrivare anche sul leggio), senza fondo e con la matita
   sola quando la nota non c'e', cosi' non ruba l'occhio alle parole. Con la
   nota scritta diventa una pastiglia gialla col testo, che si legge da un
   metro: e' un promemoria da vedere mentre si suona.
   =========================================================================== */
.vh-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; vertical-align: middle; min-width: 0; max-width: 100%; }
.vh-nota-b {
  appearance: none; cursor: pointer; font: inherit; font-size: .9rem; line-height: 1.25;
  min-height: var(--tocco); min-width: var(--tocco); padding: 4px 8px; margin: 0;
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: transparent; color: var(--dim); border: 1px dashed var(--line); border-radius: var(--r-1);
  text-transform: none; letter-spacing: 0; font-weight: 700; text-align: left;
}
.vh-nota-b.piena { background: var(--card2); color: var(--text); border: 1px solid var(--warn); border-left-width: 4px; }
.vh-nota-b .vh-nota-t { overflow-wrap: anywhere; min-width: 0; }
.vh-nota-b .vh-nota-sq { font-size: .85em; }
.vh-nota-altri {
  display: inline-block; max-width: 100%; font-size: .85rem; line-height: 1.35; font-weight: 600; text-transform: none; letter-spacing: 0;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-1); padding: 6px 9px; overflow-wrap: anywhere;
}
.vh-nota-ov {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: calc(12px + var(--sat)) 12px calc(12px + var(--sab));
  background: rgba(0, 0, 0, .72);
}
.vh-nota-box {
  width: min(460px, 100%); max-height: 100%; overflow: auto; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-2); padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.vh-nota-testa { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.vh-nota-testa b { font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
.vh-nota-x { appearance: none; cursor: pointer; flex: none; background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-1); font-size: 1rem; }
.vh-nota-msg { color: var(--dim); font-size: .85rem; line-height: 1.5; margin: 6px 0 10px; }
.vh-nota-et { display: block; font-weight: 700; font-size: .9rem; }
.vh-nota-box input[type="text"] { width: 100%; margin-top: 6px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-1); padding: 10px 12px; font: inherit; }
.vh-nota-conta { color: var(--dim); font-size: .8rem; text-align: right; margin-top: 4px; }
.vh-nota-sp { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: .9rem; line-height: 1.4; }
.vh-nota-sp input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--ok); }
.vh-nota-sp small { color: var(--dim); }
.vh-nota-altre { margin-top: 10px; padding: 10px; background: var(--card2); border-radius: var(--r-1); font-size: .88rem; line-height: 1.45; }
.vh-nota-altre p { margin: 4px 0 0; overflow-wrap: anywhere; }
.vh-nota-err { color: var(--errore-testo); font-size: .85rem; min-height: 1em; margin: 8px 0 0; }
.vh-nota-tasti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vh-nota-btn {
  flex: 1 1 auto; margin: 0; appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem;
  padding: 10px 14px; border-radius: var(--r-1); background: var(--card2); color: var(--text); border: 1px solid var(--line);
}
.vh-nota-btn.ok { background: var(--ok-fondo); color: #fff; border-color: var(--ok-fondo); }

/* [482] IN STAMPA NON SI STAMPANO I TASTI CHE GALLEGGIANO. Il campanello in
   basso a destra (vh-campanello.js) e la fascia della rete scarsa
   (vh-rete.js) finivano sul cartello del Wi-Fi ospiti e sul foglio «Come si
   fa»: su un A4 appeso all'ingresso un tasto disegnato non serve a niente. */
@media print {
  #vh-camp-tasto, #vh-camp-strisce, #vh-rete-fascia, #vh-specchio-pill { display: none !important; }
}

/* [485] SOLO PER LA VOCE. Un pezzo che non si vede ma che il lettore di
   schermo (TalkBack, VoiceOver, NVDA) legge: il titolo «Home» della prima
   schermata, le zone da cui la pagina «parla» (VH.annuncia in vh-ui.js).
   Non «display: none»: quello lo nasconde anche alla voce. */
.vh-solo-voce {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
/* un titolo che riceve il fuoco dal programma (cambio di sezione): niente
   cornice per chi tocca col dito, la cornice solo per chi usa la tastiera */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }