/* ==========================================================================
   TORÀ - il testo, le parashot, le haftarot
   ==========================================================================

   Il testo ebraico si compone con Taamey Frank CLM: e' lo stesso disegno
   Frank Rühl dei titoli del sito, ma ha i segni di cantillazione, che Frank
   Ruhl Libre non ha (zero su trentuno: controllato sul file). Per la lettura
   "come nel Sefer Tora'" si passa a Stam Sefarad CLM, la scrittura dei soferim.

   Le righe sono alte: sopra e sotto le lettere ci sono vocali e accenti, e con
   l'interlinea di un testo latino si toccherebbero fra una riga e l'altra.
   ========================================================================== */

@font-face {
    font-family: "Taamey Frank CLM";
    src: url("../fonts/tora/taamey-frank-clm.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0590-05FF, U+FB1D-FB4F, U+2009, U+25CC;
}

@font-face {
    font-family: "Taamey Frank CLM";
    src: url("../fonts/tora/taamey-frank-clm-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0590-05FF, U+FB1D-FB4F;
}

@font-face {
    font-family: "Stam Sefarad CLM";
    src: url("../fonts/tora/stam-sefarad-clm.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* anche gli spazi: con gli spazi di un altro carattere ogni riga del Sefer
       veniva un paio di pixel piu' alta, e le righe non tornavano con le altre */
    unicode-range: U+0020, U+2009, U+0590-05FF;
}

.tora {
    --tora-corpo: 1.6rem;
    --tora-ebraico: "Taamey Frank CLM", "Frank Ruhl Libre", "SBL Hebrew", "Ezra SIL", serif;
    --tora-stam: "Stam Sefarad CLM", "Taamey Frank CLM", serif;
    --tora-carta: #fffdf8;
    margin-block: 1rem 2rem;
    color: var(--ceb-ink);
}

.tora [lang="he"] {
    font-family: var(--tora-ebraico);
}

/* I titoli ebraici non hanno accenti: si compongono con il Frank Ruhl Libre
   dei titoli del sito, che ha righe normali. Il carattere dei te'amim ha righe
   altissime per fare posto agli accenti, e sotto un titolo lasciava un vuoto. */
.tora .tora-testa__he,
.tora .tora-libro__he,
.tora .tora-scheda__he,
.tora .tora-settimana [lang="he"],
.tora .tora-vicine [lang="he"],
.tora .tora-aliyot [lang="he"],
.tora .tora-aliyot ol {
    font-family: var(--ceb-font-head);
}

/* --- testata della parasha' --------------------------------------------- */

.tora-testa {
    text-align: center;
    padding-block: 1.25rem 1rem;
    border-bottom: 1px solid var(--ceb-line);
    margin-bottom: 1rem;
}

.tora-testa__he {
    font-size: clamp(2.6rem, 7vw, 4.2rem);
    line-height: 1.1;
    margin: 0;
    color: var(--ceb-navy);
    font-weight: 700;
}

.tora-testa__dove {
    margin: .35rem 0 0;
    color: var(--ceb-muted);
    font-size: 1rem;
    letter-spacing: .02em;
}

.tora-testa__quando {
    display: inline-block;
    margin: .75rem 0 0;
    padding: .2rem .8rem;
    border-radius: 999px;
    background: var(--ceb-gold-pale);
    color: var(--ceb-gold);
    font-weight: 600;
    font-size: .95rem;
}

/* --- comandi ------------------------------------------------------------ */

.tora-comandi {
    position: sticky;
    top: calc(var(--ceb-header-h, 96px) + .5rem);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: center;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-sm);
    backdrop-filter: blur(6px);
}

.tora-comandi[hidden] { display: none !important; }

.tora-comandi__gruppo {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.tora-btn {
    appearance: none;
    border: 1px solid var(--ceb-line-strong);
    background: var(--ceb-white);
    color: var(--ceb-navy);
    font: 600 .9rem/1 var(--ceb-font-body);
    padding: .5rem .8rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

.tora-btn:hover { border-color: var(--ceb-navy-soft); }

.tora-btn[aria-pressed="true"] {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: #fff;
}

.tora-btn--tondo {
    min-width: 2.6rem;
    font-family: var(--tora-ebraico);
    font-size: 1.05rem;
}

.tora-btn:focus-visible,
.tora-rito:focus-visible,
.tora a:focus-visible {
    outline: 3px solid var(--ceb-focus);
    outline-offset: 2px;
}

.tora-scelta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
    color: var(--ceb-muted);
    cursor: pointer;
    user-select: none;
}

/* --- elenco delle aliyot ------------------------------------------------ */

.tora-aliyot ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.tora-aliyot a {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--ceb-line);
    color: var(--ceb-blue);
    text-decoration: none;
    font-size: 1.05rem;
}

.tora-aliyot a:hover { background: var(--ceb-mese); }

/* In fondo alla fila, dopo il maftir, il passo alla haftara': in oro come il
   Focus, e con la scritta nel carattere dell'interfaccia, non dei titoli. */
.tora .tora-aliyot .tora-aliyot__haft a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 100%;
    font: 600 .9rem/1 var(--ceb-font-body);
    border-color: var(--ceb-gold-bright);
    color: var(--ceb-gold);
}

.tora .tora-aliyot .tora-aliyot__haft a:hover { background: var(--ceb-gold-pale); }

.tora-aliyot__haft svg { flex: none; }

/* --- il testo ----------------------------------------------------------- */

.tora-testo {
    font-size: var(--tora-corpo);
    line-height: 2.15;
    text-align: justify;
    text-justify: inter-word;
    background: var(--tora-carta);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    padding: clamp(1rem, 3.5vw, 2.25rem) clamp(1rem, 4vw, 2.75rem);
    margin-bottom: 1.5rem;
    word-spacing: .05em;
    font-feature-settings: "kern", "mark", "mkmk";
}

.tora-par {
    margin: 0 0 .9em;
    /* una nuova sezione (פתוחה) comincia a capo, come nel rotolo */
}

.tora-par:last-child { margin-bottom: 0; }

/* Dove si ferma un versetto quando ci si arriva (da un collegamento o uscendo
   dal focus): sotto l'intestazione del sito e sotto la barra dei comandi, che
   resta attaccata in cima. Sul telefono la barra va a capo su tre o quattro
   righe, quindi la sua altezza la misura il JavaScript (--tora-barra); senza
   JavaScript la barra non c'e'. Vale anche per gli emistichi dei cantici, che
   sono i versetti di Ha'azinu e del Canto del Mare, per l'inizio delle aliyot
   e per la haftara'. */
.tora {
    --tora-linea: calc(var(--ceb-header-h, 96px) + .5rem + var(--tora-barra, 3.3rem) + 1.2rem);
}

.tora-v,
.tora-seg,
.tora-al,
.tora-haftara { scroll-margin-top: var(--tora-linea); }

.tora-v:target,
.tora-seg:target {
    background: var(--ceb-gold-pale);
    box-shadow: 0 0 0 .15em var(--ceb-gold-pale);
    border-radius: 3px;
}
/* il numero del versetto, in lettere ebraiche */
.tora-n {
    font-family: var(--ceb-font-head);
    font-size: .52em;
    font-weight: 700;
    color: var(--ceb-gold);
    text-decoration: none;
    vertical-align: .55em;
    margin-inline-end: .18em;
    line-height: 1;
}

.tora-n:hover { color: var(--ceb-navy); }

/* il numero del capitolo */
.tora-cap {
    display: inline-block;
    font-family: var(--ceb-font-head);
    font-size: .62em;
    font-weight: 700;
    color: #fff;
    background: var(--ceb-navy);
    border-radius: 4px;
    padding: 0 .35em;
    margin-inline: .15em .3em;
    line-height: 1.5;
    vertical-align: .2em;
}

/* l'inizio di un'aliya' */
.tora-al {
    display: inline-block;
    font-size: .5em;
    font-weight: 700;
    color: var(--ceb-blue);
    border: 1px solid var(--ceb-mese-filo);
    background: var(--ceb-mese);
    border-radius: 999px;
    padding: 0 .55em;
    margin-inline: .15em .35em;
    vertical-align: .35em;
    line-height: 1.6;
}

/* senza aliyot sparisce la fila, ma non il passo alla haftara' */
.tora--senza-aliyot .tora-al,
.tora--senza-aliyot .tora-aliyot li:not(.tora-aliyot__haft) { display: none; }

/* la סתומה: uno spazio nella riga, di circa nove lettere */
.tora-setuma {
    display: inline-block;
    width: 3.2em;
}

/* lettere speciali */
.tg { font-size: 1.45em; line-height: 1; }              /* lettera grande */
.tp { font-size: .62em; }                              /* lettera piccola */
.ts { font-size: .7em; vertical-align: .6em; }         /* lettera sospesa */
.nr { color: var(--ceb-muted); margin-inline: .15em; } /* nun rovesciata */
.pq { color: var(--ceb-muted); }                       /* paseq */

/* ketiv e qere': si legge il qere', lo scritto e' accanto, piccolo */
.kq .k {
    font-size: .6em;
    color: var(--ceb-muted);
    vertical-align: .45em;
}

.kq .k:not(:empty)::before { content: "("; }
.kq .k:not(:empty)::after  { content: ")"; }
.kq .k:not(:empty) + .q:not(:empty) { margin-inline-start: .2em; }
.kq .q:not(:empty)::before { content: "["; color: var(--ceb-muted); font-size: .7em; }
.kq .q:not(:empty)::after  { content: "]"; color: var(--ceb-muted); font-size: .7em; }

/* il segno di nota */
.tora-segno {
    font-family: var(--ceb-font-body);
    font-size: .45em;
    font-weight: 700;
    vertical-align: .9em;
    color: var(--ceb-focus);
    text-decoration: none;
    margin-inline-start: .1em;
}

/* --- i cantici ---------------------------------------------------------- */

.tora-shira {
    display: grid;
    gap: .15em 2.5em;
    text-align: center;
    margin: 1em 0;
    padding: .75em 0;
    border-block: 1px dashed var(--ceb-line-strong);
}

/* I cantici a due colonne di emistichi, come nei Tanakh a stampa. Nel rotolo
   Ha'azinu ha settanta righe su due colonne e il Canto del Mare trenta righe
   "a mattoni" (אריח על גבי לבנה); ma la fonte divide il testo per emistichi,
   non per righe del rotolo. Invece di inventare le righe, si usa la
   disposizione della poesia a stampa. */
.tora-shira--haazinu,
.tora-shira--yam {
    grid-template-columns: 1fr 1fr;
}

.tora-shira .tora-seg { text-align: center; }

/* "אז ישיר משה..." apre il Canto del Mare su una riga intera, come nel rotolo */
.tora-shira--yam .tora-seg:first-child { grid-column: 1 / -1; }


@media (max-width: 640px) {
    .tora-shira--haazinu,
    .tora-shira--yam { grid-template-columns: 1fr; }
}

/* --- le tre modalita' di lettura --------------------------------------- */

/* Come nel Sefer Tora': la scrittura dei soferim, niente numeri ne' segni.
   Lo scritto (ketiv) prende il posto del letto (qere'). */
.tora--sefer .tora-testo {
    font-family: var(--tora-stam);
    line-height: 1.9;
    word-spacing: .12em;
}

.tora--sefer .tora-testo [lang="he"],
.tora--sefer .tora-testo { font-family: var(--tora-stam); }

.tora--sefer .tora-n,
.tora--sefer .tora-cap,
.tora--sefer .tora-segno,
.tora--sefer .pq,
.tora--sefer .kq .q { display: none; }

.tora--sefer .kq .k {
    font-size: 1em;
    color: inherit;
    vertical-align: baseline;
}

.tora--sefer .kq .k::before,
.tora--sefer .kq .k::after { content: none; }

/* Quando il letto finisce con un maqqef si lega alla parola seguente, ma nel
   rotolo i maqqef non si scrivono: qui lo scritto avrebbe la parola dopo
   attaccata, e ci vuole lo spazio. Quattro casi in tutto. */
.tora--sefer .kq .k[data-sep]::after { content: " "; }

.tora--sefer .tora-al { font-family: var(--ceb-font-body); }

.tora--vocali .pq { display: none; }

/* --- righe ferme fra i modi di lettura ---------------------------------- */

/* Negli altri due modi le righe restano quelle di "vocali e accenti": il
   JavaScript mette gli a capo dove li ha messi il browser, e ogni riga si
   allarga fino ai due margini, come nel rotolo. Le lettere dei soferim sono
   piu' larghe: si rimpiccioliscono quanto basta (--tora-scala) perche' ogni
   riga ci stia. Interlinea e stacco fra i paragrafi restano quelli misurati,
   altrimenti rimpicciolendo le lettere il testo salirebbe. */
.tora--righe .tora-testo {
    font-size: calc(var(--tora-corpo) * var(--tora-scala, 1));
    line-height: var(--tora-interlinea, 2.15);
}

.tora--righe .tora-par {
    text-align-last: justify;
    margin-bottom: var(--tora-stacco, .9em);
}

/* Gli a capo li decidono i <br>: il browser non ne aggiunge altri. Se una riga
   venisse un filo piu' lunga dello spazio, sporgerebbe di qualche pixel invece
   di andare a capo e sfasare tutte quelle dopo. La giustificazione resta. */
.tora--righe .tora-par,
.tora--righe .tora-seg { white-space: nowrap; }

.tora--righe .tora-par:last-child { margin-bottom: 0; }

.tora--righe .tora-al { font-size: calc(var(--tora-corpo) * .5); }

/* Nei cantici gli emistichi hanno i loro a capo ma restano centrati; gli
   stacchi si misurano sul corpo, non sulle lettere rimpicciolite, altrimenti le
   file si accorciano e il testo dopo il cantico sale. */
.tora--righe .tora-shira {
    gap: calc(var(--tora-corpo) * .15) calc(var(--tora-corpo) * 2.5);
    margin-block: var(--tora-corpo);
    padding-block: calc(var(--tora-corpo) * .75);
}

/* mentre si misura quanto e' lunga ogni riga, senza allargarla */
.tora--righe-misura .tora-par,
.tora--righe-misura .tora-seg {
    text-align: start;
    text-align-last: auto;
    white-space: nowrap;
}

/* In fondo all'ultima riga di un paragrafo, perche' non si allarghi fino al
   margine: occupa lo spazio che quella riga lascia libero in "vocali e accenti". */
.tora-riempi {
    display: inline-block;
    height: 0;
}

/* --- haftara' ----------------------------------------------------------- */

.tora-haftara { margin-top: 2.5rem; }

.tora-haftara__titolo,
.tora-note__titolo {
    font-family: var(--ceb-font-head);
    color: var(--ceb-navy);
    font-size: 1.6rem;
    text-align: center;
    margin: 0 0 1rem;
}

.tora-schede-riti {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-bottom: 1rem;
}

.tora-schede-riti[hidden] { display: none !important; }

.tora-rito {
    appearance: none;
    border: 1px solid var(--ceb-line-strong);
    background: var(--ceb-white);
    color: var(--ceb-navy);
    font: 600 .95rem/1 var(--ceb-font-body);
    padding: .55rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}

.tora-rito[aria-selected="true"] {
    background: var(--ceb-gold-pale);
    border-color: var(--ceb-gold-bright);
    color: var(--ceb-gold);
}

.tora-haft__rito {
    font-family: var(--ceb-font-body);
    font-size: 1.05rem;
    color: var(--ceb-navy);
    text-align: center;
    margin: 0 0 .25rem;
}

.tora-js .tora-haft__rito { display: none; } /* con le linguette il titolo e' gia' li' */

.tora-haft__bologna {
    font-weight: 400;
    color: var(--ceb-gold);
}

.tora-haft__rif,
.tora-haft__uguale {
    text-align: center;
    color: var(--ceb-muted);
    margin: 0 0 .75rem;
}

/* --- note, collegamenti, fonte ------------------------------------------ */

.tora-note {
    margin-top: 2rem;
    font-size: .95rem;
    color: var(--ceb-muted);
}

.tora-note__titolo { font-size: 1.25rem; }

.tora-note ol { padding-inline-start: 1.25rem; }
.tora-note li { margin-bottom: .5rem; }
.tora-note li:target { background: var(--ceb-gold-pale); }
.tora-note [lang="he"] { font-size: 1.25em; color: var(--ceb-ink); }
.tora-note__dove { font-weight: 700; }

.tora-vicine {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ceb-line);
    text-align: center;
}

.tora-vicine__commenti a {
    display: inline-block;
    padding: .65rem 1.2rem;
    border-radius: 999px;
    background: var(--ceb-navy);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.tora-vicine__commenti a:hover { background: var(--ceb-navy-soft); }

.tora-vicine__passi {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}

.tora-vicine__passi a {
    text-decoration: none;
    color: var(--ceb-blue);
}

.tora-vicine__passi [lang="he"] { font-size: 1.25em; }

.tora-vicine__cosa {
    display: block;
    font-size: .8rem;
    color: var(--ceb-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tora-vicine__succ { margin-inline-start: auto; text-align: end; }

.tora-torna { margin-top: 1rem; }

.tora-fonte {
    margin-top: 2rem;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--ceb-muted);
    border-top: 1px solid var(--ceb-line);
    padding-top: .75rem;
}

/* --- indici ------------------------------------------------------------- */

.tora-settimana {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .35rem .75rem;
    padding: .9rem 1.25rem;
    margin: 0 0 2rem;
    border-radius: var(--ceb-radius-lg);
    background: var(--ceb-navy);
    color: #fff;
    text-align: center;
}

.tora-settimana__quando {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ceb-gold-pale);
}

.tora-settimana__cosa { font-size: 1.25rem; font-weight: 600; }
.tora-settimana a { color: #fff; }
.tora-settimana [lang="he"] { font-size: 1.3em; }

.tora-libro { margin-bottom: 2.5rem; }

.tora-libro__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    border-bottom: 2px solid var(--ceb-gold-bright);
    padding-bottom: .4rem;
    margin-bottom: 1rem;
}

.tora-libro__testa--grande {
    flex-direction: column;
    align-items: center;
    border-bottom: 0;
    text-align: center;
}

.tora-libro__he {
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 0;
    color: var(--ceb-navy);
    font-weight: 700;
}

.tora-libro__testa--grande .tora-libro__he { font-size: clamp(3rem, 8vw, 4.5rem); }

.tora-libro__nome {
    margin: 0;
    font-family: var(--ceb-font-head);
    font-size: 1.25rem;
    color: var(--ceb-ink);
}

.tora-libro__conti {
    margin: 0;
    margin-inline-start: auto;
    color: var(--ceb-muted);
    font-size: .9rem;
}

.tora-libro__testa--grande .tora-libro__conti { margin-inline-start: 0; }

.tora-schede {
    display: grid;
    /* due per riga anche sul telefono: i nomi sono brevi, una scheda larga
       tutto lo schermo sprecava spazio e allungava la pagina */
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tora-scheda a,
.tora-scheda > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    height: 100%;
    padding: .8rem .5rem .7rem;
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    background: var(--ceb-white);
    text-decoration: none;
    color: var(--ceb-ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.tora-scheda a:hover {
    border-color: var(--ceb-gold-bright);
    box-shadow: var(--ceb-shadow-sm);
    transform: translateY(-1px);
}

.tora-scheda__he {
    font-size: 1.7rem;
    line-height: 1.3;
    color: var(--ceb-navy);
    font-weight: 700;
}

.tora-scheda__nome { font-weight: 600; font-size: .95rem; }
.tora-scheda__dove { font-size: .78rem; color: var(--ceb-muted); }

.tora-scheda.is-settimana a {
    border-color: var(--ceb-gold-bright);
    background: var(--ceb-gold-pale);
}

@media (prefers-reduced-motion: reduce) {
    .tora-scheda a { transition: none; }
    .tora-scheda a:hover { transform: none; }
}

/* --- focus: il testo a schermo intero ----------------------------------- */

/* Il bottone si distingue dagli altri: non cambia il modo di leggere, cambia
   quello che c'e' intorno. */
.tora-btn--focus {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-color: var(--ceb-gold-bright);
    color: var(--ceb-gold);
}

.tora-btn--focus:hover { border-color: var(--ceb-gold); }

.tora-btn--focus[aria-pressed="true"] {
    background: var(--ceb-gold-pale);
    border-color: var(--ceb-gold-bright);
    color: var(--ceb-gold);
}

.tora-btn__icona { flex: none; }

/* Sotto il velo la pagina non deve scorrere: si scorre solo il testo. */
html.tora-focus-attivo,
html.tora-focus-attivo body { overflow: hidden; }

/* Il velo. Copre tutto il sito, intestazione compresa (che sta a z-index 900,
   il pannello del menu a 2000). E' lo stesso elemento della parasha', non una
   copia: modalita' di lettura, grandezza e riti restano quelli scelti. */
.tora--focus {
    position: fixed;
    inset: 0;
    z-index: 5000;
    margin: 0;
    padding: 0 clamp(1rem, 5vw, 3rem) 5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--tora-carta);
}

/* Nello schermo intero del browser lo sfondo dietro l'elemento e' nero: lo si
   intona alla carta. (Il ::backdrop non eredita le variabili, quindi colore
   scritto per esteso.) */
.tora--focus::backdrop { background: #fffdf8; }

/* Restano il nome della parasha', i comandi, il passo alla haftara', il testo e
   la haftara'. */
.tora--focus .tora-testa__dove,
.tora--focus .tora-testa__quando,
.tora--focus .tora-aliyot li:not(.tora-aliyot__haft),
.tora--focus .tora-note,
.tora--focus .tora-vicine,
.tora--focus .tora-fonte,
.tora--focus .tora-segno { display: none; }

.tora--focus .tora-testa {
    margin: 0;
    padding-block: 1.25rem .25rem;
    border: 0;
}

.tora--focus .tora-testa__he { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* I comandi restano in cima mentre si scorre, attaccati al bordo. */
.tora--focus .tora-comandi {
    top: 0;
    max-width: 48rem;
    margin-inline: auto;
    border-top: 0;
    border-radius: 0 0 var(--ceb-radius-lg) var(--ceb-radius-lg);
    background: rgba(255, 253, 248, .96);
}

/* Una colonna di lettura, non tutta la larghezza dello schermo: righe troppo
   lunghe si seguono male. */
.tora--focus .tora-testo,
.tora--focus .tora-haftara {
    max-width: 48rem;
    margin-inline: auto;
}

.tora--focus .tora-testo {
    padding: 1rem 0 0;
    border: 0;
    background: transparent;
}

/* senza l'intestazione del sito, il versetto raggiunto si ferma sotto i comandi */
.tora--focus { --tora-linea: calc(var(--tora-barra, 4.3rem) + 1.2rem); }

.tora--focus .tora-aliyot ol { margin-top: .75rem; }

@media (prefers-reduced-motion: no-preference) {
    .tora--focus { animation: tora-focus-entra .2s ease-out; }
}

@keyframes tora-focus-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- focus: nascondere anche i comandi ---------------------------------- */

/* Il bottone che li nasconde c'e' solo nel focus, e si fa notare poco: niente
   bordo, niente scritta, il colore del testo secondario. */
.tora-btn--discreto { display: none; }

.tora--focus .tora-btn--discreto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: .45rem;
    border-color: transparent;
    background: transparent;
    color: var(--ceb-muted);
}

.tora--focus .tora-btn--discreto:hover {
    border-color: var(--ceb-line);
    color: var(--ceb-navy);
}

.tora--focus.tora--senza-comandi .tora-comandi { display: none !important; }

/* Quello che li rimette: un tondo piccolo e mezzo trasparente nell'angolo, che
   si fa pieno quando ci si passa sopra o ci si arriva con la tastiera. */
.tora-mostra { display: none; }

.tora--focus.tora--senza-comandi .tora-mostra {
    position: fixed;
    top: .75rem;
    right: .75rem;
    z-index: 5001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--ceb-line);
    border-radius: 999px;
    background: rgba(255, 253, 248, .92);
    color: var(--ceb-muted);
    opacity: .45;
    cursor: pointer;
    transition: opacity .15s, color .15s;
}

.tora--focus.tora--senza-comandi .tora-mostra:hover,
.tora--focus.tora--senza-comandi .tora-mostra:focus-visible {
    opacity: 1;
    color: var(--ceb-navy);
}

.tora-mostra:focus-visible {
    outline: 3px solid var(--ceb-focus);
    outline-offset: 2px;
}

/* Senza la barra il versetto raggiunto si ferma piu' in alto, ma non sotto il
   tondo dell'angolo. */
.tora--focus.tora--senza-comandi { --tora-linea: 3.5rem; }

@media (prefers-reduced-motion: reduce) {
    .tora-mostra { transition: none; }
}

@media print {
    .tora--focus { position: static; overflow: visible; padding: 0; }
    .tora-mostra, .tora-btn--discreto { display: none !important; }
}

/* --- stampa ------------------------------------------------------------- */

@media print {
    .tora-comandi, .tora-aliyot, .tora-schede-riti, .tora-vicine { display: none !important; }
    .tora-testo { border: 0; padding: 0; background: none; font-size: 15pt; }
    .tora-haft { display: block !important; }
    .tora-js .tora-haft__rito { display: block; }
}