/* ===========================================================================
   [512] ASPETTO E LETTURA — l'aspetto delle scelte nuove della Home
   (public/vh-aspetto.js): la riga «Carattere» e i tre gruppi del pannello,
   gli stili della pagina della Bibbia, il bollino del dito che gira pagina e
   il tasto «Fine anteprima». I colori della luce calda e del rosso e verde,
   e il carattere chiaro, stanno in ui.css (valgono su ogni pagina).
   Tutto comincia con «vh-asp» o «vh-stile»: niente classi con «colori-»
   (v. ui.css, la regola [class*="colori-"] della Home).
   Colori solo dalle variabili del sito: valgono col tema scuro, con quello
   chiaro, con la Vista Carta, con la festa e con la luce calda. Fondi pieni.
   =========================================================================== */

/* ---- la riga «Carattere» e le scelte a segmenti (Spenta · Riga · Finestra) ---- */
.vh-asp-car { border: 0; margin: 4px 0 2px; padding: 8px 0 4px; min-width: 0; }
.vh-asp-car legend { padding: 0; font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.vh-asp-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 6px; margin: 6px 0 4px; }
.vh-asp-seg label {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 0;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-1, 10px); background: var(--bg-2, var(--card2));
  color: var(--text); font-weight: 700; font-size: .95rem; line-height: 1.2; text-align: center; cursor: pointer;
  overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-tap-highlight-color: transparent;
}
/* col «Testo molto grande» «Dislessia» toccava i bordi del suo riquadro a 348 px */
html.acc-bigger .vh-asp-seg label { padding-left: 4px; padding-right: 4px; font-size: .88rem; }
/* il pallino del radio non si vede: e' il riquadro intero che si sceglie (il
   radio resta li', per la tastiera e per il lettore di schermo) */
.vh-asp-seg input, .vh-asp-stili input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.vh-asp-seg label:has(input:checked), .vh-asp-stili label:has(input:checked) {
  background: var(--accent-fondo); border-color: var(--accent-fondo); color: #fff;
}
.vh-asp-seg label:has(input:focus-visible), .vh-asp-stili label:has(input:focus-visible) {
  outline: 3px solid var(--accent2-testo); outline-offset: 2px;
}
.vh-asp-nota { margin: 4px 2px 6px; font-size: .82rem; line-height: 1.45; color: var(--text-dim, var(--dim)); }
.vh-asp-nota:empty { display: none; }
/* «I l 1 · b d · O 0» scritto col carattere chiaro (solo quando e' scelto) */
.vh-asp-atk { display: block; font-family: 'Atkinson Hyperlegible Next', sans-serif; font-size: 1.25rem; letter-spacing: .06em; color: var(--text); margin-bottom: 2px; }
/* [513] «Tutti i crediti» dopo il nome del carattere: piccolo come la
   nota, ma alto un dito (il margine negativo non sposta le righe) */
.vh-asp-crediti { display: inline-block; padding: 13px 2px; margin: -13px 0; white-space: nowrap; color: var(--accent2-testo, var(--accent2)); }

/* ---- il pannello sul telefono: meno cornice, piu' posto per le scelte.
   A 348 px fra il bordo dello schermo, il velo e il riquadro restavano 264
   pixel di scelte; con i gruppi dentro, 236: «Al tramonto» andava a capo a
   meta' parola. Il riquadro e la ✕ restano dove sono. ---- */
@media (max-width: 420px) {
  #acc-ov { padding-left: 8px !important; padding-right: 8px !important; }
  #acc-ov > div { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ---- i tre gruppi che si aprono ---- */
.vh-asp-gruppi { margin: 8px 0 6px; display: grid; gap: 8px; }
.vh-asp-gruppo { border: 1px solid var(--line); border-radius: var(--r-2, 14px); background: var(--bg-2, var(--card2)); min-width: 0; }
.vh-asp-gruppo > summary {
  list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; cursor: pointer;
  border-radius: var(--r-2, 14px); -webkit-tap-highlight-color: transparent;
}
.vh-asp-gruppo > summary::-webkit-details-marker { display: none; }
.vh-asp-gruppo > summary:focus-visible { outline: 3px solid var(--accent2-testo); outline-offset: 2px; }
.vh-asp-gruppo > summary > .vh-ic { flex: none; width: 24px; height: 24px; color: var(--accent2-testo); }
.vh-asp-gtit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vh-asp-gtit b { font-size: 1rem; }
.vh-asp-gtit small { font-size: .82rem; color: var(--text-dim, var(--dim)); overflow-wrap: anywhere; }
.vh-asp-gruppo > summary > .vh-asp-freccia { width: 20px; height: 20px; color: var(--text-dim, var(--dim)); transition: transform .15s; }
.vh-asp-gruppo[open] > summary > .vh-asp-freccia { transform: rotate(180deg); }
.vh-asp-gruppo[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-2, 14px) var(--r-2, 14px) 0 0; }
.vh-asp-dentro { padding: 6px 10px 12px; }
.vh-asp-dentro [hidden], .vh-asp-gruppi [hidden] { display: none !important; }
.vh-asp-parte { padding: 8px 0 10px; border-bottom: 1px dashed var(--line); }
.vh-asp-parte:last-of-type { border-bottom: 0; }
.vh-asp-etichetta { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-weight: 800; font-size: .98rem; }
.vh-asp-etichetta .vh-ic { flex: none; width: 20px; height: 20px; color: var(--accent2-testo); }
.vh-asp-sotto { margin: 10px 0 2px; font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim, var(--dim)); }
/* le caselle, come le altre del pannello (grandi e con la scritta accanto) */
.vh-asp-riga { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 1rem; }
/* la casella in alto, accanto al titolo (la regola comune di ui.css la mette
   in mezzo all'altezza, e con due righe di spiegazione finiva in fondo) */
label.vh-asp-riga:not(.vh-mini):has(> input[type="checkbox"]) { align-items: flex-start; }
.vh-asp-riga input[type="checkbox"] { transform: scale(1.5); margin: 4px 4px 0 3px; flex: none; }
.vh-asp-riga > span { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.vh-asp-riga small { font-size: .8rem; line-height: 1.45; margin-top: 3px; color: var(--text-dim, var(--dim)); }
.vh-asp-tasto {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; margin: 0; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-1, 10px); background: var(--card); color: var(--text);
  font: inherit; font-weight: 700; text-align: left; flex-shrink: 0;
}
.vh-asp-tasto .vh-ic { flex: none; width: 20px; height: 20px; }
.vh-asp-tasto > span { min-width: 0; overflow-wrap: anywhere; }
.vh-asp-tasto[aria-pressed="true"] { border-color: var(--accent2-testo); box-shadow: inset 0 0 0 1px var(--accent2-testo); }
.vh-asp-tasto:focus-visible { outline: 3px solid var(--accent2-testo); outline-offset: 2px; }
.vh-asp-dentro > .vh-asp-tasto { margin-top: 10px; width: 100%; }
.vh-asp-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vh-asp-anteprime { display: grid; gap: 6px; margin-top: 6px; }
.vh-asp-anteprime .vh-asp-tasto { width: 100%; }
.vh-asp-stato, .vh-asp-avviso {
  display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-1, 10px);
  font-size: .88rem; line-height: 1.45; border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.vh-asp-avviso { background: var(--avviso-sfondo, #3a3218); border-color: var(--avviso-bordo, #8a6d1f); }
.vh-asp-stato .vh-ic, .vh-asp-avviso .vh-ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent2-testo); }
.vh-asp-stato > span, .vh-asp-avviso > span { min-width: 0; }
.vh-asp-gruppi > .vh-asp-avviso { margin: 0; }
.vh-asp-msg { margin: 8px 2px 0; font-size: .88rem; color: var(--text-dim, var(--dim)); min-height: 0; }
.vh-asp-msg:empty { display: none; }
/* «Dalle … alle …» */
.vh-asp-orari { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 2px; }
.vh-asp-orari label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.vh-asp-orari input[type="time"] {
  min-height: 44px; padding: 6px 10px; font: inherit; font-size: 1.05rem; min-width: 7.5em;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-1, 10px);
}
/* l'esempio della luce calda: con i colori VERI della sera, anche di giorno */
.vh-asp-campione {
  margin: 4px 0 6px; padding: 10px 12px; border-radius: var(--r-1, 10px); font-size: .98rem; line-height: 1.55;
  background: var(--calda-bg); color: var(--calda-text); border: 1px solid var(--calda-line);
}
/* l'esempio del rosso e verde: con le variabili del sito, cosi' cambia subito */
.vh-asp-campioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.vh-asp-c-ok, .vh-asp-c-diretta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-tondo, 999px); font-weight: 800; font-size: .9rem; }
.vh-asp-c-ok { background: var(--ok-sfondo, #123024); color: var(--ok-testo, #7adcce); border: 1px solid var(--ok-bordo, #1f6b45); }
.vh-asp-c-ok .vh-ic { width: 16px; height: 16px; color: var(--ok, #2a9d8f); }
.vh-asp-c-diretta { background: var(--errore-sfondo, #3a1c1c); color: var(--errore-testo, #ff9aa2); border: 1px solid var(--errore-bordo, #7f1d1d); }
.vh-asp-pallino { width: 11px; height: 11px; border-radius: 50%; background: var(--errore, #e63946); flex: none; }
/* i cursori: alti 44 px, col nome sopra e quanto vale a destra */
.vh-asp-cur { margin: 6px 0 2px; }
.vh-asp-cur-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .92rem; }
.vh-asp-cur-testa label { font-weight: 700; }
.vh-asp-cur-testa output { color: var(--accent2-testo); font-weight: 700; font-variant-numeric: tabular-nums; }
.vh-asp-cur input[type="range"] { display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; background: none; border: 0; accent-color: var(--accent-fondo); cursor: pointer; }
.vh-asp-cur input[type="range"]:focus-visible { outline: 3px solid var(--accent2-testo); outline-offset: 2px; }
/* l'esempio di «Leggere comodo»: si vede subito come diventa il testo */
.vh-asp-esempio { margin: 6px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-1, 10px); background: var(--card); color: var(--text); font-size: 1.05rem; line-height: 1.6; overflow-wrap: break-word; }
.vh-asp-esempio p { margin: 0; }
/* gli stili della pagina: quattro riquadri, due per due */
.vh-asp-stili { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 2px; }
.vh-asp-stili label {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-1, 10px); background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; text-align: center; min-width: 0;
}
.vh-asp-stili .vh-ic { flex: none; width: 20px; height: 20px; }

/* la scorciatoia negli Strumenti della Bibbia («Aspetto e lettura») */
.vh-asp-scorciatoia { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 12px; text-align: left; justify-content: flex-start; }
.vh-asp-scorciatoia .vh-ic { flex: none; width: 20px; height: 20px; }
.vh-asp-scorciatoia > span { flex: 1 1 auto; min-width: 0; white-space: normal; }

/* ===========================================================================
   GLI STILI DELLA PAGINA DELLA BIBBIA (era «stili-lettura», 502)
     html.vh-stile-libro    una Bibbia stampata
     html.vh-stile-studio   un versetto per riga
     html.vh-stile-pagina   il capitolo su un foglio color carta
   «Classico» non ha classe. Si tocca solo l'aspetto di #bb-testo e dei suoi
   versetti (<span id="bb-v-N">). I colori dell'evidenziatore, il versetto
   scelto, quello che si ascolta: sono sfondi e bordi scritti sul versetto, e
   restano visibili in ogni stile. Il carattere chiaro e quello per la
   dislessia vincono sul nostro.
   =========================================================================== */
/* LIBRO */
html.vh-stile-libro #bb-testo { text-align: justify; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; line-height: 1.75; text-wrap: pretty; }
/* [532] ...anche quello per la dislessia scelto per tutto il sito
   (Impostazioni → Carattere → Dislessia, body.acc-dyslexic): prima vinceva
   solo quello scelto dentro la Bibbia, e con il «Libro» di serie chi legge
   con OpenDyslexic si ritrovava la Bibbia in Georgia */
html.vh-stile-libro body:not(.acc-dyslexic) #bb-testo:not(.font-dislessia):not(.font-lettura) {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
}
html.vh-stile-libro #bb-testo sup { font-size: .62em; font-weight: 600 !important; opacity: .85; margin-right: .1em; vertical-align: .55em; line-height: 0; }
html.vh-stile-libro #bb-testo > h3 { font-variant: small-caps; letter-spacing: .09em; text-align: center; font-weight: 600; font-size: 1.35em; margin: .2em 0 .9em !important; hyphens: manual; }
.vh-stile-cap { float: left; float: inline-start; font-size: 3.6em; line-height: .82; padding: .06em .09em 0 0; margin: 0; font-style: normal; font-weight: 700; color: var(--accent2-testo, inherit); }
/* il numero del versetto 1 e lo spazio dopo non si vedono accanto alla
   lettera grande (come nelle Bibbie stampate): se no si leggeva «T ¹ esto».
   Il lettore di schermo sente lo stesso il versetto intero, numero compreso
   (vh-aspetto.js gli da' come nome il testo di prima) */
html.vh-stile-libro #bb-testo [data-vh-stile-capv] > sup,
html.vh-stile-libro #bb-testo .vh-stile-capspazio { display: none; }
/* le Bibbie che si leggono da destra a sinistra (l'arabo, l'ebraico): niente
   testo giustificato e niente parole spezzate (e niente lettera grande, v.
   vh-aspetto.js) */
html.vh-stile-libro #bb-testo[data-vh-stile-rtl] { text-align: start; hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 900px) {
  html.vh-stile-libro #bb-testo { max-width: min(36em, 100%); margin-inline: auto; }
  /* [532] ...e quello che sta sotto il testo (i tasti del capitolo, «I luoghi
     di questo capitolo», le tavole) nella STESSA colonna: col Libro di serie
     la striscia dei luoghi restava larga sotto un testo stretto. 36em del
     testo: la misura del testo la scrive la pagina in --bb-fs (bbSize). */
  html.vh-stile-libro .bb-leggi > :is(.bb-nav, #bb-luoghi, #bb-tavole) { max-width: min(calc(36 * var(--bb-fs, 1rem)), 100%); margin-inline: auto; }
}
/* STUDIO: un versetto per riga, il numero in colonna */
html.vh-stile-studio #bb-testo { line-height: 1.6; }
html.vh-stile-studio #bb-testo > span[id^="bb-v-"] {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: .3em; align-items: baseline;
  padding: .7em .4em !important; border-radius: 0 !important; box-shadow: inset 0 -1px 0 var(--line);
  text-indent: -.27em; /* il versetto comincia con uno spazio fisso: la prima riga si allinea alle altre */
}
html.vh-stile-studio #bb-testo > span[id^="bb-v-"] > sup { text-indent: 0; text-align: right; font-size: .8em; align-self: baseline; padding-top: .1em; }
html.vh-stile-studio #bb-testo > h3 { margin-bottom: .4em !important; }
/* PAGINA: un foglio color carta (la sera, con la luce calda, color miele:
   le tre variabili le ridefinisce ui.css) */
html.vh-stile-pagina { --vh-stile-carta: #2b251d; --vh-stile-inchiostro: #eadfcb; --vh-stile-num: #f0b27a; }
html.vh-stile-pagina.vista-carta, html.vh-stile-pagina:has(body.light) { --vh-stile-carta: #fbf5e6; --vh-stile-inchiostro: #2a2118; --vh-stile-num: #8a441c; }
html.vh-stile-pagina #bb-testo:not([class*="colori-"]) {
  background: var(--vh-stile-carta); color: var(--vh-stile-inchiostro); padding: 22px 20px; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 26px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(120, 90, 50, .15);
}
html.vh-stile-pagina #bb-testo:not([class*="colori-"]) :is(sup, h3) { color: var(--vh-stile-num) !important; }
html.vh-stile-pagina #bb-testo[class*="colori-"] { box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 26px rgba(0, 0, 0, .22); }
html.vh-stile-pagina #bb-testo { line-height: 1.8; }
html.vh-stile-pagina #bb-testo:not(.font-dislessia):not(.font-lettura) { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; }
html.vh-stile-pagina body.acc-contrast #bb-testo:not([class*="colori-"]) { background: var(--bg); color: var(--text); box-shadow: none; border: 2px solid var(--text); }
@media (min-width: 900px) {
  html.vh-stile-pagina #bb-testo { max-width: min(44em, 100%); padding: 56px 72px; margin-block: 8px 24px; }
}
@media (max-width: 400px) {
  html.vh-stile-pagina #bb-testo:not([class*="colori-"]) { padding: 18px 14px; }
}

/* ===========================================================================
   IL BOLLINO DEL DITO CHE GIRA PAGINA: in basso al centro, sopra la barra in
   fondo del sito sul telefono (la sua altezza la scrive navMisura: --nav-alta),
   fondo PIENO col bordo, mai piu' largo dello schermo, non ferma i tocchi.
   =========================================================================== */
#vh-asp-segno {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px); padding: 10px 16px;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  font-weight: 800; font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: border-color .12s, color .12s;
}
#vh-asp-segno[hidden] { display: none; }
#vh-asp-segno span { overflow: hidden; text-overflow: ellipsis; }
#vh-asp-segno .vh-ic { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
/* abbastanza strada: se lasci adesso, si va. Lo dice il bordo (non solo il colore: anche piu' spesso) */
#vh-asp-segno.vh-asp-pronto { border: 2px solid var(--accent2-testo); color: var(--accent2-testo); }

/* ===========================================================================
   L'ANTEPRIMA DALTONICA: il tasto «Fine anteprima». Il filtro sta su <html>,
   quindi passa anche su questo tasto: per questo e' NERO e BIANCO (le matrici
   lasciano il nero nero e il bianco bianco). Pieno, alto 52 px, in fondo al
   centro, sopra a tutto.
   =========================================================================== */
/* centrato con left/right e margin auto, NON con left:50% e translate: cosi'
   il tasto aveva a disposizione meta' schermo e a 348 px andava a capo in
   quattro righe, tondo come una moneta (visto nella foto) */
#vh-asp-fine {
  position: fixed; z-index: 2147483000; left: 0; right: 0; margin: 0 auto; width: fit-content;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; min-height: 52px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 8px 20px; border-radius: 999px; border: 2px solid #fff; background: #000; color: #fff;
  box-shadow: 0 0 0 2px #000; font: inherit; font-weight: 800; cursor: pointer; text-align: left;
}
#vh-asp-fine .vh-ic { width: 22px; height: 22px; flex: none; }
#vh-asp-fine span { display: flex; flex-direction: column; min-width: 0; }
#vh-asp-fine small { font-weight: 400; font-size: .85rem; }
#vh-asp-fine:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* niente movimenti per chi li ha tolti */
@media (prefers-reduced-motion: reduce) { #vh-asp-segno, .vh-asp-gruppo > summary > .vh-asp-freccia { transition: none; } }
body.acc-calm #vh-asp-segno, body.acc-calm .vh-asp-gruppo > summary > .vh-asp-freccia { transition: none; }

/* sul telefono le schede stanno in fondo: il bollino (e «Fine anteprima»)
   sopra di loro (in fondo al foglio: vince sulle regole qui sopra). Sul computer le schede sono in cima, e --nav-alta non c'entra. */
@media (max-width: 720px) {
  #vh-asp-segno { bottom: calc(var(--nav-alta, 60px) + 16px + env(safe-area-inset-bottom, 0px)); }
  #vh-asp-fine { bottom: calc(var(--nav-alta, 60px) + 12px + env(safe-area-inset-bottom, 0px)); }
}