/* lettore-libro.css — gli stili del lettore interattivo delle pagine dei libri (22/10/2026), con js/lettore-libro.js.
   Nella pagina: <section class="lettura-section" id="ascolta"> … <div class="lettore" data-lettore="/data/letture/<libro>.json"></div>
   Il colore dell'accento si cambia per libro con --accento sul .lettore (predefinito: ruggine). */
.lettura-section { padding: 90px 24px; background: var(--paper-2); text-align: center; }
.lettura-section .section-intro { margin-top: -30px; }
.lettore { --accento: #8e421e; --filo: #dcd4c2; max-width: 760px; margin: 0 auto; text-align: left; }
.lettore-brani { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.lettore-scheda { font: inherit; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left; cursor: pointer; color: var(--ink); background: #fffdf8; border: 1px solid var(--filo); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s; }
.lettore-scheda:hover { border-color: var(--accento); }
.lettore-scheda[aria-selected="true"] { border-color: var(--accento); box-shadow: inset 0 -3px 0 var(--accento); }
.lettore-scheda-titolo { font-family: var(--serif); font-size: 16px; line-height: 1.25; }
.lettore-scheda-durata { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lettore-carta { background: #fffdf8; border: 1px solid var(--filo); border-radius: var(--radius); padding: 26px 30px 18px; box-shadow: 0 18px 40px #0b211c14; }
.lettore-capitolo { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #82612d; }
.lettore-titolo { margin: 0 0 6px; font-size: 26px; }
.lettore-pagina { height: 300px; overflow-y: auto; scroll-behavior: smooth; padding-right: 6px; border-bottom: 1px solid var(--filo);
    -webkit-mask-image: linear-gradient(transparent, #000 1.4rem, #000 calc(100% - 2.6rem), transparent); mask-image: linear-gradient(transparent, #000 1.4rem, #000 calc(100% - 2.6rem), transparent); }
.lettore-testo { padding: 18px 0 150px; font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.75; color: #2b2a24; }
.lettore-testo p { margin: 0 0 1em; }
.lettore .frase { cursor: pointer; border-radius: 3px; transition: color .25s, background-color .25s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lettore .frase:hover { background: #8e421e12; }
.lettore .frase.attiva { color: var(--accento); }
.lettore .parola { text-decoration: underline transparent; text-decoration-thickness: .08em; text-underline-offset: .22em; transition: text-decoration-color .12s; }
.lettore .parola.attiva { text-decoration-color: currentColor; }
.lettore-tempo { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lettore-tempo span:last-child { text-align: right; }
.lettore-barra { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; --pct: 0%; }
.lettore-barra::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(var(--accento), var(--accento)) 0 / var(--pct) 100% no-repeat, var(--filo); }
.lettore-barra::-moz-range-track { height: 3px; border-radius: 2px; background: var(--filo); }
.lettore-barra::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--accento); }
.lettore-barra::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accento); border: 0; margin-top: -6px; }
.lettore-barra::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--accento); border: 0; }
.lettore-comandi { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.lettore-comandi button { font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; position: relative; }
.lettore-comandi button:hover { background: #8e421e12; }
.lettore button:focus-visible, .lettore .frase:focus-visible, .lettore-barra:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.lettore-comandi svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lettore-comandi .salto small { position: absolute; font-size: 9px; font-weight: 700; top: 50%; left: 50%; transform: translate(-50%, -38%); }
.lettore-comandi .play { width: 58px; height: 58px; color: #fff; background: var(--accento); }
.lettore-comandi .play:hover { background: #73351a; }
.lettore-comandi .play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.lettore-piede { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.lettore-velocita { font: 700 13px/1 var(--sans); color: var(--ink); background: none; border: 1px solid var(--filo); border-radius: 14px; padding: 6px 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.lettore-nota { margin: 0; font-size: 12px; color: var(--muted); }
.lettore-errore::before { content: "Il lettore non si è caricato: riprova più tardi."; color: var(--muted); }
@media (max-width: 700px) { .lettore-brani { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .lettura-section { padding: 60px 16px; }
    .lettore-carta { padding: 20px 18px 14px; }
    .lettore-titolo { font-size: 22px; }
    .lettore-pagina { height: 260px; }
    .lettore-testo { font-size: 17px; }
    .lettore-comandi { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .lettore-pagina { scroll-behavior: auto; } .lettore .frase, .lettore .parola { transition: none; } }