/* [507] EVIDENZIA E ANNOTA I VERSETTI — l'aspetto.
   Era laboratorio/evidenzia-versetti/client.css; adesso la Home lo carica con
   un <link> (e il custode dell'offline lo tiene, public/sw.js), cosi' i colori
   ci sono dal primo capitolo disegnato.
   Tutto comincia con «vh-evidenzia»: non tocca niente del sito. I fondi, i
   testi e le righe sono le variabili del sito (valgono col tema scuro, con
   quello chiaro, con la Vista Carta e col contrasto forte); i valori dopo la
   virgola sono solo la scorta se una variabile mancasse.

   I QUATTRO COLORI DELL'EVIDENZIATORE sono gli unici scritti a mano (un
   evidenziatore giallo e' giallo con ogni tema). Sul versetto non si usano
   pieni: il 32% del colore mescolato col fondo della scheda (o col fondo
   della pagina della Bibbia, se la persona ha scelto «Carta», «Nero
   pieno»…), cosi' il testo si legge sempre; e sotto una riga piena di 3
   pixel, piu' decisa, mescolata col colore del testo (piu' scura sui temi
   chiari, piu' chiara su quelli scuri).
   La selezione del sito invece e' l'arancio della chiesa (--accent2) al
   22%, SENZA riga: il giallo con la sua riga non si confonde con lei.

   La finestra «I miei evidenziati» copre lo schermo: fondo PIENO
   (var(--bg)), mai trasparente. Il riquadro dei colori e' piccolo, sotto
   la barra dei versetti, anche lui col fondo pieno (var(--card)). Tutti i
   tasti sono alti almeno 44 px. Il tasto «Evidenzia» nella barra dei
   versetti e' del sito (index.html, «#bb-selbar»): qui non c'e'. */

.vh-evidenzia-c1, .vh-evidenzia-t1, .vh-evidenzia-b1 { --vh-evidenzia-h: #f5d000; }
.vh-evidenzia-c2, .vh-evidenzia-t2, .vh-evidenzia-b2 { --vh-evidenzia-h: #2fbf71; }
.vh-evidenzia-c3, .vh-evidenzia-t3, .vh-evidenzia-b3 { --vh-evidenzia-h: #3aa8f5; }
.vh-evidenzia-c4, .vh-evidenzia-t4, .vh-evidenzia-b4 { --vh-evidenzia-h: #ff6fae; }

/* ---- la vecchia copia dell'esperimento, se il NAS la tiene ancora ----
   L'aggiornamento automatico del NAS non cancella i file tolti: finche'
   l'immagine non si ricostruisce, la cartella «evidenzia-versetti» resta in
   /app/laboratorio e un telefono che la ha ancora accesa (o un NAS dove era
   «acceso per tutti») la carica. Il suo codice non sa che adesso c'e' questo:
   metterebbe un secondo «Evidenzia» nella barra, una seconda lista negli
   Strumenti e le note della chiave vecchia sotto il capitolo. Qui la sua copia
   si nasconde: restano i tasti e i colori del sito. (vh-evidenzia.js, «IL RITIRO
   DELL'ESPERIMENTO», spegne anche il suo interruttore.) Si puo' togliere
   quando la cartella non c'e' piu' sul NAS. */
#lab-evidenzia-versetti-sel, #lab-evidenzia-versetti-pop, #lab-evidenzia-versetti-note,
#lab-evidenzia-versetti-strumenti, #lab-evidenzia-versetti-elenco { display: none !important; }

/* ---- i versetti colorati (solo le nostre classi sugli <span id="bb-v-N">) ---- */
#bb-testo .vh-evidenzia-c1, #bb-testo .vh-evidenzia-c2,
#bb-testo .vh-evidenzia-c3, #bb-testo .vh-evidenzia-c4 {
  background: color-mix(in srgb, var(--vh-evidenzia-h) 32%, var(--card, #171b25));
  border-bottom: 3px solid color-mix(in srgb, var(--vh-evidenzia-h) 78%, var(--text, #eef1f6));
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* la pagina della Bibbia coi colori suoi («Carta», «Bianco», «Nero pieno»…):
   si mescola col SUO fondo e col SUO inchiostro */
#bb-testo[class*="colori-"] .vh-evidenzia-c1, #bb-testo[class*="colori-"] .vh-evidenzia-c2,
#bb-testo[class*="colori-"] .vh-evidenzia-c3, #bb-testo[class*="colori-"] .vh-evidenzia-c4 {
  background: color-mix(in srgb, var(--vh-evidenzia-h) 32%, var(--lt-bg, #fff));
  border-bottom-color: color-mix(in srgb, var(--vh-evidenzia-h) 78%, var(--lt-fg, #111));
}
/* il versetto con la nota: un anellino dopo il testo (non e' testo: non
   finisce nel versetto copiato) */
#bb-testo .vh-evidenzia-nota::after {
  content: ''; display: inline-block; width: .5em; height: .5em; margin-left: .3em;
  border: 2px solid currentColor; border-radius: 50%; vertical-align: .3em; opacity: .75;
}
/* solo la nota, senza colore: una riga a puntini */
#bb-testo .vh-evidenzia-nota:not(.vh-evidenzia-c1):not(.vh-evidenzia-c2):not(.vh-evidenzia-c3):not(.vh-evidenzia-c4) {
  border-bottom: 2px dotted var(--dim, #9aa3b2);
}

/* «hidden» vale sempre, anche sopra un display:flex scritto qui sotto */
.vh-evidenzia-pop [hidden], .vh-evidenzia-elenco [hidden],
.vh-evidenzia-note[hidden], .vh-evidenzia-note [hidden] { display: none !important; }
.vh-evidenzia-pop .vh-ic, .vh-evidenzia-elenco .vh-ic,
.vh-evidenzia-note .vh-ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* la voce per il lettore di schermo: non si vede */
.vh-evidenzia-solo-voce {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- i tasti, in comune ---- */
.vh-evidenzia-pop button, .vh-evidenzia-elenco button, .vh-evidenzia-note button {
  min-height: 44px; font: inherit; cursor: pointer; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1px solid var(--line, #2a3040); border-radius: var(--r-1, 10px);
  background: var(--card2, #1e2430); color: var(--text, #eef1f6); padding: 8px 14px; font-weight: 600;
}
.vh-evidenzia-pop button:focus-visible, .vh-evidenzia-elenco button:focus-visible,
.vh-evidenzia-note button:focus-visible,
.vh-evidenzia-pop textarea:focus-visible {
  outline: 3px solid var(--accent2-testo, #f4a261); outline-offset: 2px;
}

/* ---- il riquadro dei colori, sotto la barra ---- */
.vh-evidenzia-pop {
  position: fixed; z-index: 1000; box-sizing: border-box;
  background: var(--card, #171b25); color: var(--text, #eef1f6);
  border: 1px solid var(--line, #2a3040); border-radius: var(--r-2, 14px);
  box-shadow: var(--ombra-3, 0 14px 36px -12px #000);
  padding: 12px 14px; overflow-y: auto; overscroll-behavior: contain; line-height: 1.45; font-size: 1rem;
}
.vh-evidenzia-pop p { margin: 0 0 6px; }
.vh-evidenzia-rif { font-size: 1.05rem; }
.vh-evidenzia-tinte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; }
.vh-evidenzia-pop .vh-evidenzia-togli { padding: 8px 10px; }
.vh-evidenzia-pop .vh-evidenzia-tinta {
  width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%;
  background: var(--vh-evidenzia-h); border: 2px solid var(--line, #2a3040);
  color: #111; /* la spunta, scura su tutti e quattro i colori (sono chiari) */
}
.vh-evidenzia-tinta .vh-ic { opacity: 0; width: 22px; height: 22px; }
.vh-evidenzia-pop .vh-evidenzia-tinta[aria-pressed="true"] {
  border-color: var(--card, #171b25); box-shadow: 0 0 0 3px var(--text, #eef1f6);
}
.vh-evidenzia-tinta[aria-pressed="true"] .vh-ic { opacity: 1; }
.vh-evidenzia-pop .vh-evidenzia-scrivi { width: 100%; justify-content: center; }
.vh-evidenzia-nota-box { margin-top: 4px; }
.vh-evidenzia-nota-box label { display: block; font-weight: 600; margin: 0 0 4px; }
.vh-evidenzia-pop textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 88px; resize: vertical;
  font: inherit; font-size: 1rem; line-height: 1.45; padding: 8px 10px;
  background: var(--bg, #0b0d12); color: var(--text, #eef1f6);
  border: 1px solid var(--line, #2a3040); border-radius: var(--r-1, 10px);
}
.vh-evidenzia-nota-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.vh-evidenzia-conta { font-size: .85rem; color: var(--dim, #9aa3b2); }
.vh-evidenzia-pop .vh-evidenzia-salva {
  background: var(--accent-fondo, #c62f3c); border-color: var(--accent-fondo, #c62f3c); color: #fff;
}
.vh-evidenzia-msg { font-size: .92rem; color: var(--text, #eef1f6); }
.vh-evidenzia-msg:empty { display: none; }
.vh-evidenzia-piccolo { font-size: .88rem; color: var(--dim, #9aa3b2); display: flex; align-items: center; gap: 6px; }
.vh-evidenzia-avviso {
  font-size: .92rem; padding: 8px 10px; border-radius: var(--r-1, 10px);
  background: var(--avviso-sfondo, #3a2f12); border: 1px solid var(--avviso-bordo, #806320); color: var(--text, #eef1f6);
}

/* ---- le note sotto il capitolo ---- */
.vh-evidenzia-note {
  margin: 14px 0 0; box-sizing: border-box; max-width: 100%;
  background: var(--card, #171b25); color: var(--text, #eef1f6);
  border: 1px solid var(--line, #2a3040); border-radius: var(--r-2, 14px); padding: 12px 14px; line-height: 1.5;
}
.vh-evidenzia-note h3 { font-size: 1.05rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.vh-evidenzia-note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vh-evidenzia-note .vh-evidenzia-nota-v {
  width: 100%; text-align: left; align-items: baseline; gap: 10px; font-weight: 400;
  border-left: 6px solid var(--vh-evidenzia-h, var(--dim, #9aa3b2));
}
.vh-evidenzia-nota-v b { flex: none; }
.vh-evidenzia-nota-v span { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.vh-evidenzia-note .vh-evidenzia-piccolo { margin: 8px 0 0; }

/* ---- negli Strumenti della Bibbia: il conto accanto al nome ---- */
.vh-evidenzia-quanti { color: var(--dim, #9aa3b2); font-variant-numeric: tabular-nums; }
.vh-evidenzia-quanti:empty { display: none; }

/* ---- la finestra «I miei evidenziati»: a tutto schermo, fondo pieno ---- */
.vh-evidenzia-elenco {
  position: fixed; inset: 0; z-index: 2147482100;
  background: var(--bg, #0b0d12); color: var(--text, #eef1f6);
  display: flex; flex-direction: column; line-height: 1.45;
}
.vh-evidenzia-testa {
  flex: none; display: flex; align-items: center; gap: 10px; background: var(--bg, #0b0d12);
  padding: calc(8px + var(--sat, 0px)) 12px 8px; border-bottom: 1px solid var(--line, #2a3040);
}
.vh-evidenzia-testa h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.vh-evidenzia-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.vh-evidenzia-dentro {
  max-width: 760px; margin: 0 auto; box-sizing: border-box;
  padding: 12px 16px calc(24px + var(--sab, 0px));
}
.vh-evidenzia-dentro > p { margin: 0 0 10px; }
.vh-evidenzia-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.vh-evidenzia-elenco .vh-evidenzia-filtro { border-radius: 999px; padding: 6px 14px; font-weight: 500; }
.vh-evidenzia-elenco .vh-evidenzia-filtro[aria-pressed="true"] {
  background: var(--ok-sfondo, #123024); border-color: var(--ok-bordo, #1f6b45); color: var(--ok-testo, #7adcce); font-weight: 700;
}
.vh-evidenzia-n { font-variant-numeric: tabular-nums; opacity: .8; }
.vh-evidenzia-pallino {
  display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  background: var(--vh-evidenzia-h); border: 1px solid var(--line, #2a3040);
}
.vh-evidenzia-pallino.vh-evidenzia-b0 { background: transparent; border: 2px dotted var(--dim, #9aa3b2); }
.vh-evidenzia-righe { list-style: none; margin: 0; padding: 0; }
.vh-evidenzia-riga {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line, #2a3040);
}
.vh-evidenzia-riga-testo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vh-evidenzia-colore, .vh-evidenzia-riga-nota { color: var(--dim, #9aa3b2); }
.vh-evidenzia-vuoto { color: var(--dim, #9aa3b2); margin: 14px 0; }
.vh-evidenzia-piede { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vh-evidenzia-piede .vh-evidenzia-msg { margin: 0; flex: 1 1 200px; }