/* [513] LA SCRIVANIA DI STUDIO — l'aspetto (era
   laboratorio/scrivania-studio/client.css). Tutto comincia con «vh-studio».
   Sul computer lo Studio sta nella colonna #bb-lato, che ha gia' il suo
   riquadro in index.html (430: da 1200 px, appiccicata in alto, col suo
   scorrimento): qui c'e' solo quello che sta DENTRO. Sul telefono il foglio
   «studio-ov», a tutto schermo col fondo PIENO (var(--bg)), mai trasparente.
   I colori sono le variabili del sito: valgono nel tema scuro, in quello
   chiaro, nella Vista Carta e con la luce calda. */

.vh-studio-vista *{box-sizing:border-box}
.vh-studio-vista [hidden]{display:none !important}
.vh-studio-vista .vh-ic,.vh-studio-foglio .vh-ic{width:1.15em;height:1.15em;flex:0 0 auto}
.vh-studio-titolo{margin:0 0 10px;font-size:1rem;display:flex;align-items:center;gap:8px;line-height:1.35;overflow-wrap:anywhere}

/* LE SCHEDE: cinque tasti, l'icona sopra la parola. Con il testo normale
   stanno in una riga sola anche a 348 px (le parole sono corte apposta:
   Commento, Chiave, Greco o Ebraico, Note, Metodo; il nome lungo sta nel
   «title»): ognuna e' larga quanto la sua parola (flex «auto»), e «Commento»
   prende piu' posto di «Note» (con le colonne tutte uguali si tagliava a
   «Comm…», visto nelle foto).
   [513] CON IL TESTO GRANDE (impostazione di accessibilita' del sito,
   vh_acc big/bigger) la riga non ci sta piu': prima le schede si
   stringevano con i puntini («Comme…», «Chia…», «Gre…», «N…», «Meto…» a 348
   px, visto da chi ha rivisto) e il tasto «non si stringe» (CLAUDE.md, 375).
   Adesso la riga VA A CAPO: tre schede sopra e due sotto, ognuna per intero
   (flex-wrap; niente «overflow: hidden» ne' «text-overflow»). */
.vh-studio-schede{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px}
.vh-studio-scheda{flex:1 1 auto;min-height:52px;padding:6px 6px 5px;border:1px solid var(--line,#2a3040);border-radius:var(--r-1,10px);
  background:var(--card2,#1e2430);color:var(--text,#eef1f6);font:inherit;font-size:.8rem;font-weight:600;line-height:1.15;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0}
.vh-studio-scheda span{max-width:100%;text-align:center;overflow-wrap:anywhere}
.vh-studio-scheda .vh-ic{width:1.3em;height:1.3em}
.vh-studio-scheda[aria-selected="true"]{border-color:var(--accent2,#f4a261);box-shadow:inset 0 -3px 0 var(--accent2,#f4a261);background:var(--card,#171b25)}

.vh-studio-tasto,.vh-studio-chiudi,.vh-studio-vai{
  min-height:44px;padding:8px 14px;border:1px solid var(--line,#2a3040);border-radius:var(--r-1,10px);
  background:var(--card2,#1e2430);color:var(--text,#eef1f6);font:inherit;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;text-align:left}
.vh-studio-tasto:disabled{opacity:.55;cursor:default}
.vh-studio-tasto.-attivo{border-color:var(--accent2,#f4a261);box-shadow:inset 0 -3px 0 var(--accent2,#f4a261)}
.vh-studio-scheda:focus-visible,.vh-studio-tasto:focus-visible,.vh-studio-chiudi:focus-visible,
.vh-studio-vai:focus-visible,.vh-studio-vista textarea:focus-visible,.vh-studio-vista summary:focus-visible{outline:3px solid var(--accent2-testo,#f4a261);outline-offset:2px}
.vh-studio-scelta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.vh-studio-scelta .vh-studio-tasto{flex:1 1 auto}
.vh-studio-muto{color:var(--dim,#9aa3b2);font-size:.92rem;margin:6px 0;line-height:1.5}
.vh-studio-fonte{color:var(--dim,#9aa3b2);font-size:.78rem;margin:12px 0 2px;line-height:1.5}
.vh-studio-sommario{border-left:3px solid var(--accent2,#f4a261);padding:4px 12px;margin:0 0 8px;background:var(--bg-2,transparent);border-radius:0 var(--r-1,10px) var(--r-1,10px) 0}
.vh-studio-sommario p{margin:4px 0;font-size:.92rem;line-height:1.6}
.vh-studio-sez{border-top:1px solid var(--line,#2a3040);padding:6px 0}
.vh-studio-sez > summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
/* il segno che si apre: con «display:flex» il triangolino del browser sparisce
   (visto nelle foto: «Vita eterna» sembrava una scritta e basta). Una freccina
   disegnata col bordo, che gira quando la parte e' aperta */
.vh-studio-sez > summary::-webkit-details-marker{display:none}
.vh-studio-sez > summary::before{content:'';width:.45em;height:.45em;flex:0 0 auto;margin:0 4px 0 2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.vh-studio-sez[open] > summary::before{transform:rotate(45deg)}
@media (prefers-reduced-motion: reduce){ .vh-studio-sez > summary::before{transition:none} }
.vh-studio-sez.-qui{border-left:4px solid var(--accent2,#f4a261);padding-left:10px;background:var(--bg-2,transparent)}
.vh-studio-qui{font-size:.8rem;font-weight:700;color:var(--accent2-testo,#f4a261)}
.vh-studio-sez p{margin:4px 0 8px;overflow-wrap:anywhere;line-height:1.65}
.vh-studio-compl{overflow-wrap:anywhere;line-height:1.7}
.vh-studio-vista h4{margin:14px 0 6px;font-size:1rem}
.vh-studio-voce{border-top:1px solid var(--line,#2a3040);padding:8px 0}
.vh-studio-voce > div{margin-top:6px;overflow-wrap:anywhere;line-height:1.6}
.vh-studio-nota{border-top:1px dashed var(--line,#2a3040);padding:8px 0}
.vh-studio-nota small{color:var(--dim,#9aa3b2)}
.vh-studio-nota p{margin:4px 0;white-space:pre-line;overflow-wrap:anywhere}
.vh-studio-vista textarea{width:100%;min-height:96px;margin:6px 0;padding:10px;font:inherit;
  background:var(--bg-2,var(--bg,#11141c));color:var(--text,#eef1f6);border:1px solid var(--line,#2a3040);border-radius:var(--r-1,10px);resize:vertical}
.vh-studio-vista label{display:block;font-weight:700;margin-top:10px}
.vh-studio-passo{border:1px solid var(--line,#2a3040);border-radius:var(--r-2,14px);padding:4px 12px 10px;margin:0 0 12px}
.vh-studio-passo h4{margin:8px 0 2px}
.vh-studio-passo label{font-weight:500;color:var(--dim,#9aa3b2)}
.vh-studio-esito{color:var(--ok-testo,var(--accent2-testo,#7bd88f));font-weight:600;margin:6px 0}
.vh-studio-errore{color:var(--errore-testo,#ff9b9b);margin:6px 0}

/* IL TASTO «STUDIA» nella barra dei versetti (index.html, #bb-studia-sel):
   sul computer largo lo Studio e' gia' a destra, e il tasto non serve */
@media (min-width:1200px){ #bb-studia-sel{display:none !important} }
/* [513] COL TESTO GRANDE sul telefono la barra dei versetti non contiene
   piu' tutto, e «Studia» e' l'unica porta dello Studio: con la parola dentro
   (ci stava solo per 17-50 px) si vedeva un pezzetto, e bisognava accorgersi
   che la riga scorre. Qui resta la sola icona (i libri), col nome nel «title»
   e nell'«aria-label»: a 348 px col testo grande si vede intera. (Gli altri
   tasti della barra tengono le parole: «Evidenzia» e' misurato intero, v.
   prova-evidenzia.) */
@media (max-width:620px){
  body.acc-big #bb-selbar #bb-studia-sel .et,
  body.acc-bigger #bb-selbar #bb-studia-sel .et{display:none}
}

/* IL FOGLIO DEL TELEFONO: fondo PIENO. La quota la da' il guardiano dei fogli
   (vh-pannelli.js, perche' l'id finisce in «-ov»); questa e' la scorta */
.vh-studio-foglio{position:fixed;inset:0;z-index:99990;background:var(--bg,#0d1017);color:var(--text,#eef1f6);
  display:flex;flex-direction:column;overflow:hidden;line-height:1.5;box-sizing:border-box}
.vh-studio-testa{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(8px + var(--sat,0px)) 16px 8px;border-bottom:1px solid var(--line,#2a3040);background:var(--card,#171b25)}
.vh-studio-testa h2{margin:0;font-size:1.05rem;min-width:0;display:flex;align-items:center;gap:8px;line-height:1.3;overflow-wrap:anywhere}
/* nel foglio il riferimento e' gia' nella testa: il titolo della vista non si ripete */
.vh-studio-foglio .vh-studio-titolo{display:none}
.vh-studio-chiudi{flex:0 0 auto}
.vh-studio-dentro{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 12px calc(24px + var(--sab,0px))}
.vh-studio-dentro .vh-studio-vista{max-width:760px;margin:0 auto}
@media (min-width:420px){ .vh-studio-dentro{padding-left:16px;padding-right:16px} }