/* Optional read-aloud controls share existing typography, colors, and focus rules. */
.reader-tools>.listen{margin:0;border:1px solid var(--line);border-radius:5px;background:var(--paper);max-width:950px}
.listen>summary{min-height:44px;padding:.55rem .85rem;font-size:var(--type-small);font-weight:600;align-content:center;color:var(--accent)}
.listen-panel{padding:0 1rem 1rem;max-width:var(--measure)}
.listen [data-listen-controls]{border:0;padding:0;margin:0;min-width:0}
.listen-buttons{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.listen-buttons button{min-height:44px;min-width:5rem;max-width:100%}
.listen [aria-disabled=true]{cursor:not-allowed;border-style:dashed}
.listen-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1rem}
.listen-options>*{min-width:0}
.listen-options select{max-width:100%}
.listen-more{margin-top:1rem}
.listen-more>summary{min-height:44px;align-content:center}
.listen-more .checklabel{font-weight:400;margin-top:.7rem}
.listen-status{margin:.75rem 0 0;min-height:1.6em}
@media(max-width:600px){.listen-options{grid-template-columns:1fr}.listen-panel{padding:0 .85rem .85rem}}
@media(forced-colors:active){.reader-tools>.listen,.listen-buttons button{border-color:ButtonText}}
@media print{.listen{display:none!important}}

.listen-settings>summary{min-height:44px;align-content:center;font-size:var(--type-small)}
.listen-options{margin-top:.7rem}
.listen-status{min-height:0}

/* Compact transport controls stay comfortable to tap on phones. */
.listen .listen-buttons{display:grid;grid-template-columns:minmax(44px,1fr) minmax(max-content,1.2fr) minmax(44px,1fr);gap:.5rem;max-width:21rem;margin:.8rem 0 .35rem}
.listen .listen-buttons button{min-width:0;min-height:44px;grid-column:auto;padding:.4rem .65rem}
.listen .listen-buttons [data-listen-play]{white-space:nowrap}
.listen .listen-secondary-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;grid-column:1/-1}
.listen .listen-skip-icon{position:relative;display:inline-block;width:32px;height:32px;vertical-align:middle}
.listen .listen-skip-icon svg{display:block;width:100%;height:100%}
.listen [data-listen-forward] svg{transform:scaleX(-1)}
.listen .listen-skip-icon>span{position:absolute;inset:0;display:grid;place-items:center;padding-top:3px;font-size:12px;font-weight:700}
.listen .listen-skip-note{font-size:max(12px,.7rem);margin:.15rem 0 .7rem;color:var(--muted);line-height:1.4}
.listen .listen-sound-help{font-size:max(12px,.72rem);line-height:1.45;margin:.4rem 0 0}
.listen .listen-sound-help>summary{font-size:inherit;font-weight:400;min-height:30px;align-content:center}
.listen .listen-sound-help p{font-size:inherit;line-height:inherit;margin:.3rem 0}

.listen .listen-timeline{max-width:21rem;margin:.8rem 0 .4rem}
.listen-timeline label{font-size:var(--type-small);font-weight:400;margin:0}
.listen .listen-timeline input[type=range]{display:block;width:100%;min-height:44px;padding:0;margin:.4rem 0;accent-color:var(--accent);cursor:pointer}
.listen-timeline input[type=range]:disabled{cursor:not-allowed}
.listen .listen-times{display:flex;justify-content:space-between;gap:.6rem;font-size:max(12px,.8rem);line-height:1.4;font-variant-numeric:tabular-nums;color:var(--muted)}
.listen-times output{font:inherit}.listen-times [data-listen-duration]{text-align:end}
@media(forced-colors:active){.listen .listen-timeline input[type=range]{accent-color:Highlight}}