/* Scritto dal NAS: sono i colori scelti in Amministrazione. */
:root {
  --tema: dark;
  --stile: ux;
  --accent: #e63946;
  --accent2: #f4a261;
  --accent-fondo: #d83642;
}

/* ---- vestito UI UX (scelto in Amministrazione) ---- */
/* ===========================================================================
   IL SECONDO VESTITO DEL SITO — «UI UX».

   Il sito ha due aspetti, e sono lo STESSO sito: stesse pagine, stessi tasti,
   stesse parole, nello stesso posto. Cambia come sono disegnati.

     Classico  — quello di sempre: piatto, sobrio, compatto.
     UI UX     — piu' aria fra le cose, forme piu' morbide, profondita' vera
                 (le schede stanno «sopra» il fondo, non accanto), titoli con
                 una gerarchia visibile, tasti a pastiglia, barra in fondo che
                 galleggia.

   Si passa dall'uno all'altro da Amministrazione con un clic, e vale per
   tutti: e' il NAS a decidere quale foglio servire, non il telefono.

   REGOLA DI QUESTO FILE: non sposta nulla di posto e non tocca il contenuto
   delle pagine. Riscrive solo la tavolozza e la forma dei mattoni comuni
   (schede, tasti, campi, barre, titoli). Cosi' un domani si puo' spegnere e
   il sito torna esattamente com'era, senza dover disfare niente.
   =========================================================================== */

:root {
  /* LE FORME. Piu' morbide: gli angoli passano da 6/10/14/20 a 10/14/20/28.
     Non e' un vezzo — un angolo piu' ampio fa sembrare la scheda un oggetto
     posato sulla pagina invece di un rettangolo disegnato sopra. */
  --r-0: 10px;
  --r-1: 14px;
  --r-2: 20px;
  --r-3: 28px;

  /* L'ARIA. Ogni misura cresce di un terzo: le schede respirano, e su un
     telefono la differenza fra «pieno» e «ordinato» e' quasi tutta qui. */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 16px;
  --s-4: 22px;
  --s-5: 32px;
  --s-6: 44px;

  /* LA PROFONDITA'. Tre livelli, non uno: piu' una cosa e' «sopra», piu'
     l'ombra e' larga e morbida. E' il segnale che dice all'occhio che cosa
     puo' toccare e che cosa sta dietro. */
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .18), 0 2px 8px -4px rgba(0, 0, 0, .28);
  --ombra-2: 0 2px 6px rgba(0, 0, 0, .20), 0 12px 28px -12px rgba(0, 0, 0, .45);
  --ombra-3: 0 8px 20px rgba(0, 0, 0, .28), 0 28px 60px -20px rgba(0, 0, 0, .60);
  --shadow: var(--ombra-2);

  /* LA LUCE SULLE SCHEDE: un filo di chiaro sul bordo alto, come su un oggetto
     illuminato dall'alto. Un pixel, e cambia tutto. */
  --luce-alta: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Col tema CHIARO le stesse ombre sporcherebbero: li' il NAS aggiunge in coda
   il foglio tema-ux-chiaro.css, che le alleggerisce. Non si puo' fare qui con
   una regola: il chiaro e lo scuro non sono un attributo della pagina, sono
   due fogli diversi scritti dal NAS. */

/* ---------------------------------------------------------------------------
   IL FONDO DELLA PAGINA.
   Non piatto: una luce appena accennata del colore della chiesa in alto, come
   se la pagina fosse illuminata da li'. Si nota solo se si toglie.
   --------------------------------------------------------------------------- */
body {
  background-image:
    radial-gradient(120% 55% at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
  background-attachment: fixed;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   I TITOLI. Nel classico h1, h2 e h3 si somigliano troppo e la pagina sembra
   un elenco unico. Qui hanno una scala vera e un po' di respiro sopra.
   --------------------------------------------------------------------------- */
body h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); letter-spacing: -0.022em; line-height: 1.18; }
body h2 { font-size: clamp(1.18rem, 1.05rem + 0.7vw, 1.5rem); letter-spacing: -0.016em; line-height: 1.25; }
body h3 { font-size: 1.06rem; letter-spacing: -0.008em; }
body h2, body h3 { margin-top: var(--s-5); }
body h1 + p, body h2 + p, body h3 + p { margin-top: var(--s-2); color: var(--dim); }
/* IL TITOLO DENTRO UNA SCHEDA NON PRENDE IL RESPIRO DEI TITOLI DI PAGINA.

   La riga qui sopra dà a ogni h2 e h3 trentadue pixel di spazio sopra: giusto
   per un titolo di sezione, che deve staccarsi da quello che c'è prima. Dentro
   una scheda è tutta un'altra cosa — lì sopra c'è solo il bordo della scheda,
   a tredici pixel, e i trentadue si sommano a quelli.

   L'elenco delle schede era incompleto: c'erano .card, .panel e .vh-auth ma
   NON .hcard, che è proprio la scheda della Home. Risultato: col vestito UI UX
   «Hai un piano in sospeso», «Lettura di oggi», «Stavi leggendo» avevano
   quarantacinque pixel di vuoto sopra il titolo, uno per scheda. Mario:
   «devi togliere lo spazio prima di ad esempio Lettura di oggi».

   La lezione, per la prossima volta: un elenco di eccezioni scritto a mano
   invecchia male. Qui adesso ci sono tutti i nomi che il sito usa per dire
   «scheda». */
body .card h2, body .card h3,
body .hcard h2, body .hcard h3,
body .panel h2, body .panel h3,
body .item h2, body .item h3,
body .box h2, body .box h3,
body .riquadro h2, body .riquadro h3,
body .vh-auth h2 { margin-top: 0; }
/* IL TITOLO DENTRO UNA BARRA NON CRESCE. La scala dei titoli vale per la
   pagina; dentro una barra appiccicata in alto un titolo piu' grande alza la
   barra, e la barra piu' alta copre quello che c'e' sotto. E' successo subito,
   nell'Angolo Bambini: «I tre amici nella fornace» finiva sotto l'intestazione. */
body .vh-top h1, body .top h1 { font-size: 1.05rem; margin-top: 0; }

/* ---------------------------------------------------------------------------
   LE SCHEDE. Nel classico sono semitrasparenti e piatte. Qui sono piene,
   posate sulla pagina, con un filo di luce sul bordo alto.
   --------------------------------------------------------------------------- */
body .card, body .panel, body .hcard, body .item, body .box, body .riquadro {
  border-radius: var(--r-2);
  box-shadow: var(--ombra-1), var(--luce-alta);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card) 100%, white 2%),
    var(--card));
}
body .card:hover, body .hcard:hover { box-shadow: var(--ombra-2), var(--luce-alta); }
@media (prefers-reduced-motion: no-preference) {
body.fx .card, body.fx .hcard { transition: box-shadow .22s cubic-bezier(.2, .8, .3, 1), transform .22s cubic-bezier(.2, .8, .3, 1); }
body.fx .hcard:hover { transform: translateY(-2px); }
}

/* ---------------------------------------------------------------------------
   I TASTI. A pastiglia, con un peso visibile: il principale ha il colore
   della chiesa e un'ombra propria, il secondario e' un contorno.
   Il bersaglio del dito resta quello deciso in ui.css: qui cambia il vestito,
   non la misura.
   --------------------------------------------------------------------------- */
body button, body .btn, body a.btn, body .copybtn {
  border-radius: var(--r-tondo);
  font-weight: 650;
  letter-spacing: -0.004em;
  padding-left: max(1.05em, 14px);
  padding-right: max(1.05em, 14px);
}
/* il tasto principale: quello con il colore della chiesa sotto */
body .btn.primary, body button.primary, body .vh-auth button:not(.vh-2), body .btn-primario {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-fondo) 100%, white 10%), var(--accent-fondo));
  border: 0;
  color: #fff;
  box-shadow: var(--ombra-1), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body .btn.primary:hover, body button.primary:hover, body .vh-auth button:not(.vh-2):hover { filter: brightness(1.06); }
/* i tasti «normali»: contorno, non blocco pieno */
body .btn.ghost, body .btn.grigio, body button.ghost, body .copybtn {
  background: color-mix(in srgb, var(--card2) 70%, transparent);
  border: 1px solid var(--line);
  box-shadow: none;
}
/* dentro le strisce e le barre in fondo i tasti restano com'erano: li' la
   pastiglia grande romperebbe la riga */
body nav.tabs button, body .tabs button, body .vh-strip button { border-radius: var(--r-1); padding-left: 8px; padding-right: 8px; }
/* La pastiglia stringe i tasti con la scritta corta (A−, A+): il testo e'
   piccolo e il riempimento laterale non basta piu' a fare 44.

   E QUEL «min-width: 44px» E' COSTATO UN TASTO TONDO (375, 8 settembre 2026).
   Un tasto dentro una riga flessibile ha, di serie, un minimo AUTOMATICO: mai
   piu' stretto del suo testo. Scrivendoci sopra «44 pixel» quel minimo
   sparisce, e se la riga e' stretta il tasto si lascia schiacciare fino a 44:
   il «Cerca» della ricerca nelle prediche, sul telefono di Mario, era un
   cerchio con la scritta che usciva a destra. Da qui in poi il tasto NON si
   lascia stringere (flex-shrink: 0): se la riga e' corta, a stringersi e' la
   casella accanto (v. ui.css, «min-width: 0» dei campi). «max-width: 100%»
   lascia che un tasto lungo da solo vada a capo invece di uscire dal foglio. */
body button, body .btn, body a.btn { min-width: var(--tocco); flex-shrink: 0; max-width: 100%; }
/* (le strisce decidono da sole se stringersi: la barra in fondo della home
   dice «flex: 0 0 auto» e scorre di lato — se qui si scrivesse «flex-shrink:
   1» le quattordici linguette finirebbero larghe venti pixel; misurato) */
body nav.tabs button, body .tabs button, body .vh-strip button { min-width: 0; }

/* ---------------------------------------------------------------------------
   I CAMPI DA COMPILARE. Nel classico sono buchi scuri col bordo sottile.
   Qui sono riquadri pieni, con un anello che si accende quando ci si scrive:
   e' il modo piu' semplice per far vedere DOVE si sta scrivendo.
   --------------------------------------------------------------------------- */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body select, body textarea {
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--bg-2) 80%, var(--card));
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  transition: border-color .16s, box-shadow .16s;
}
body input:focus, body select:focus, body textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  outline: none;
}

/* ---------------------------------------------------------------------------
   LA BARRA IN ALTO. Vetro vero: sfoca quello che ci passa sotto e si stacca
   dal contenuto con un filo, non con un muro.
   --------------------------------------------------------------------------- */
body .vh-top, body .top {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03), var(--ombra-1);
}
body .vh-top .vh-back, body .top a.back {
  border-radius: var(--r-tondo);
  box-shadow: var(--ombra-1);
}

/* ---------------------------------------------------------------------------
   LA BARRA IN FONDO (telefono): galleggia invece di essere incollata al bordo,
   e la scheda scelta si vede da una pastiglia piena, non da uno sfondo pallido.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
body nav.tabs {
    left: 10px; right: 10px; bottom: calc(8px + var(--sab));
    border-radius: var(--r-3);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow: var(--ombra-3);
    padding: 6px 6px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
  }
  /* La barra galleggia dieci pixel piu' in alto e ha l'ombra: sotto le serve
     un po' piu' di spazio, o l'ultima riga della pagina le finisce dietro. */
  body main { padding-bottom: calc(124px + var(--sab)); }
body nav.tabs button.active {
    background: color-mix(in srgb, var(--accent) 92%, black);
    color: #fff;
    box-shadow: var(--ombra-1);
  }
}

/* ---------------------------------------------------------------------------
   LE PASTIGLIE (stati, etichette, conteggi): piene e tonde, non riquadrini.
   --------------------------------------------------------------------------- */
body .pill, body .chip, body .tag, body .badge {
  border-radius: var(--r-tondo);
  padding: 4px 11px;
  font-weight: 650;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

/* ---------------------------------------------------------------------------
   I FOGLI CHE COPRONO LA PAGINA (Chiave, glossario, pannelli): angoli piu'
   ampi e l'ombra del terzo livello, cosi' si capisce che stanno «sopra».
   --------------------------------------------------------------------------- */
.vh-foglio, .ov, [id$="-ov"] > div {
  border-radius: var(--r-3);
  box-shadow: var(--ombra-3);
}

/* ---------------------------------------------------------------------------
   LE SEPARAZIONI. Nel classico ogni sezione e' divisa da una riga grigia.
   Qui la riga si assottiglia e il lavoro lo fa lo spazio: e' piu' pulito e si
   legge piu' in fretta.
   --------------------------------------------------------------------------- */
body hr, body .sep { border: 0; height: 1px; background: color-mix(in srgb, var(--line) 65%, transparent); margin: var(--s-5) 0; }

/* ---------------------------------------------------------------------------
   LE NOTE E LE SPIEGAZIONI: stesso testo, meno urlato.
   --------------------------------------------------------------------------- */
body .hint, body .sub, body .nota, body .note, body .muted, body .small { line-height: 1.62; }

/* ---------------------------------------------------------------------------
   IL COLLEGAMENTO: sottolineato sottile, che si accende al passaggio. Nel
   classico i collegamenti dentro un testo si distinguono solo dal colore, e
   chi non distingue bene i colori non li vede affatto.
   --------------------------------------------------------------------------- */
body main a:not(.btn):not(.vh-back):not(.card):not(.hcard) {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
body main a:not(.btn):not(.vh-back):hover { text-decoration-color: currentColor; }

/* ===========================================================================
   IL MOVIMENTO — solo nel vestito UI UX.

   Tre regole prima di tutte:
     1. si spegne se il telefono chiede meno moto (prefers-reduced-motion) e se
        il visitatore ha acceso «Riduci animazioni» (body.acc-calm). Sono due
        scelte di accessibilità, e vincono sempre;
     2. non si aspetta mai: niente sopra il terzo di secondo, e niente che
        ritardi un tocco;
     3. sul telefono il movimento è PIÙ CORTO che sul computer. Non per
        risparmiare: su uno schermo di sei pollici, tenuto in mano, un
        movimento lungo si legge come lentezza; su un monitor grande lo stesso
        movimento si legge come cura.

   Il movimento serve a dire una cosa sola: «questo è arrivato adesso». Se non
   dice quello, è un ritardo travestito da eleganza.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* LE COSE CHE COMPAIONO SCORRENDO.
     Partono un po' più in basso e trasparenti; quando entrano nello schermo si
     posano. Se il programma non le segna (JavaScript spento, o l'osservatore
     non c'è), restano visibili come sempre: mai il contrario. */
  body.moto .vh-appare {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .26s cubic-bezier(.2, .8, .3, 1), transform .26s cubic-bezier(.2, .8, .3, 1);
    will-change: opacity, transform;
  }
  body.moto .vh-appare.visto { opacity: 1; transform: none; }

  /* Sul computer e sul tablet: un filo più lungo, e con un accenno di scala.
     Qui l'occhio sta più lontano e il movimento breve non si vede nemmeno. */
  @media (min-width: 721px) and (pointer: fine) {
    body.moto .vh-appare {
      transform: translateY(18px) scale(.985);
      transition-duration: .42s;
    }
    /* a cascata: le schede vicine non arrivano tutte insieme, ma a un soffio
       di distanza. Sei gradini bastano — oltre, si aspetta. */
    body.moto .vh-appare:nth-child(2) { transition-delay: .045s; }
    body.moto .vh-appare:nth-child(3) { transition-delay: .09s; }
    body.moto .vh-appare:nth-child(4) { transition-delay: .135s; }
    body.moto .vh-appare:nth-child(5) { transition-delay: .18s; }
    body.moto .vh-appare:nth-child(6) { transition-delay: .225s; }
  }

  /* IL PASSAGGIO DA UNA SCHEDA ALL'ALTRA.
     Sul telefono la scheda nuova entra scorrendo di lato, come nelle app: il
     dito ha premuto in basso, la pagina risponde muovendosi. Sul computer non
     ha senso — lì il cambio è un dissolvenza breve, che non sposta lo sguardo. */
  body.moto main section.visible { animation: vhEntraScheda .3s cubic-bezier(.2, .8, .3, 1) both; }
  @keyframes vhEntraScheda {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
  }
  @media (min-width: 721px) and (pointer: fine) {
    body.moto main section.visible { animation: vhEntraSchermo .34s cubic-bezier(.2, .8, .3, 1) both; }
    @keyframes vhEntraSchermo {
      from { opacity: 0; transform: translateY(10px) scale(.995); }
      to   { opacity: 1; transform: none; }
    }
  }

  /* La barra in alto si «appoggia» quando la pagina è scorsa: prima è
     trasparente e senza ombra, poi prende corpo. Dice che sotto c'è altro. */
  body.moto .vh-top, body.moto .top, body.moto header.hero + nav.tabs {
    transition: background-color .25s, box-shadow .25s, border-color .25s;
  }
}

/* «Riduci animazioni» è l'ultima parola: spegne anche questi. */
body.acc-calm .vh-appare { opacity: 1 !important; transform: none !important; transition: none !important; }
body.acc-calm main section.visible { animation: none !important; }