.recording-layout { display:block; }
.recording-player { position:static; }
.recording-player > p:first-child { max-width:70ch; }
.scan-follow { min-width:0; scroll-margin-top:110px; }
.recording audio { display:none; }
.listen-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:16px 0; font:1rem/1.4 var(--sans); }
.listen-controls button, .scan-pages button { min-height:44px; padding:8px 14px; color:var(--ink); background:var(--paper); border:1px solid var(--rule); font:inherit; cursor:pointer; }
.scan-pages button:hover, .listen-controls button:hover, .listen-controls button[aria-pressed="true"] { background:var(--rule); }
.listen-controls button:active { background:var(--accent); color:var(--paper); }
.scan-pages button:focus-visible, .listen-controls button:focus-visible, .listen-seek:focus-visible, .scan-viewport:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.listen-controls button:disabled { opacity:.5; cursor:default; }
.listen-toggle { min-width:6rem; }
.seek-label { display:flex; align-items:center; gap:10px; flex:1 1 16rem; }
.listen-seek { width:100%; min-width:6rem; min-height:44px; accent-color:var(--accent); }
.listen-time { font-variant-numeric:tabular-nums; white-space:nowrap; }
.player-status { font:1rem/1.5 var(--sans); }
.player-status:empty { display:none; }
.scan-viewport { overflow:auto; max-width:54rem; margin:auto; border:1px solid var(--rule); }
.scan-whole { display:block; width:100%; height:auto; }
.is-following .scan-viewport { height:min(70vh,660px); cursor:grab; }
.is-following .scan-viewport:active { cursor:grabbing; }
.is-following .scan-whole { width:max(100%,900px); max-width:none; }
.scan-mark { fill:var(--accent); fill-opacity:.24; stroke:var(--accent); stroke-width:3; }
.scan-follow .caption { position:static; max-width:65ch; margin:18px auto; min-height:3em; font:1.15rem/1.5 var(--sans); color:var(--ink); }
.recording details { margin:18px 0; }
.recording summary { cursor:pointer; font:1rem/1.5 var(--sans); }
.recording summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media(max-width:600px) { .listen-controls { gap:8px; } .seek-label { flex-basis:100%; order:2; } .scan-follow .caption { font-size:1rem; } .is-following .scan-viewport { height:60vh; } }

.scan-pages { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:12px 0; font:1rem/1.5 var(--sans); }

/* Keep the requested sound, source and English together. */
.scan-follow { display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,.8fr);gap:0 24px;align-items:start }
.scan-follow>.listen-controls,.scan-follow>.player-status,.scan-follow>.scan-pages { grid-column:1/-1 }
.scan-viewport { width:100%;height:min(70vh,660px);overflow:auto }
.scan-whole { width:100%;height:100% }
.is-following .scan-whole { height:auto }
.scan-follow .caption { margin:0;align-self:center }
@media(max-width:600px) {
 .scan-follow { display:block }
 .scan-viewport,.is-following .scan-viewport { height:min(42svh,22rem) }
 .scan-follow .caption { margin:16px 0 }
}