/* Playback stays inside the left sidebar, clear of verses and illustrations. */
.surah-play-controls .translation-voice-shortcut{min-height:44px;padding:9px 13px;border:1px solid #dbe3d5;border-radius:7px;background:#f5f7f2;color:#50614f;font-size:14px;line-height:1.4}
.surah-play-controls .translation-voice-shortcut[aria-pressed="true"]{background:#edf2e7;border-color:#cddac5}
#try-translation-voice{margin:8px 0 0 8px}#try-translation-voice:disabled{opacity:.55;cursor:default}
.english-narration-choice{margin:18px 0;max-width:680px}.english-narration-choice label{display:block;margin-bottom:8px;font-size:19px;font-weight:700}.english-narration-choice select{box-sizing:border-box;max-width:100%;width:100%;min-height:48px;padding:10px;border:1px solid #cddac5;border-radius:7px;background:#fff;color:#193f36;font:inherit;font-size:17px}.english-narration-choice p{margin:8px 0;font-size:16px;line-height:1.6;color:#596d64}
.recitation-dock[hidden],.recitation-slideshow[hidden]{display:none}
.recitation-dock{position:fixed;z-index:5;bottom:16px;left:max(16px,calc((100vw - 1850px)/2 + 16px));width:268px;max-height:calc(100dvh - 32px);overflow-y:auto;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:12px;margin:0;padding:14px;border:1px solid #dfdccb;border-radius:12px;background:#fffef9;color:var(--ink);box-shadow:0 4px 18px #10282020}
.dock-actions{grid-column:1/-1;display:flex;gap:8px}.dock-actions button{flex:1;min-width:0}
.recitation-dock button,.slide-transport button{flex-shrink:0;min-height:44px;padding:9px 15px;border:1px solid #d7e1d2;border-radius:8px;background:#eef3eb;color:#4b6253;font-size:16px;font-weight:600}
.recitation-dock .dock-actions button{padding:9px 6px;font-size:15px;white-space:nowrap}
.recitation-dock #dock-stop,.slide-transport button:nth-child(2){background:#f5f1e8;color:#756345;border-color:#e5dccb}
.recitation-dock .dock-art{padding:0;border:0;overflow:hidden;width:48px;height:56px;background:#f4f1e7}
.dock-art img{width:100%;height:100%;object-fit:cover;display:block}
.dock-copy{min-width:0}.dock-copy strong{display:block;font-size:15px;line-height:1.5}.dock-copy small{display:block;overflow-wrap:anywhere;font-size:12px;line-height:1.5;color:var(--muted);margin-top:5px}
.recitation-dock .dock-return{grid-column:1/-1;font-size:13px;padding:6px;background:transparent;border:0;color:var(--gold)}
#dock-progress{display:block;width:100%;height:3px;margin-top:7px;border:0;border-radius:4px;accent-color:#b3c6a7}#dock-progress::-webkit-progress-bar{background:#eaf0e5;border-radius:4px}#dock-progress::-webkit-progress-value{background:#b3c6a7;border-radius:4px}
.recitation-active .arabic .word.selected:not(.reciting-word){background:transparent;box-shadow:none;border-bottom-color:transparent}
.arabic .word.reciting-word{background:#edf2e7!important;border-bottom-color:transparent!important;box-shadow:none!important;color:inherit}
.shared-listening-options{margin-top:18px}.shared-listening-options .word-follow-control{font-size:15px;color:var(--ink)}
.highlight-help{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}.highlight-help button{min-height:40px;padding:8px 12px;border:1px solid #e5dccb;border-radius:7px;background:#faf7ef;color:#756345;font-size:14px}.highlight-help button:disabled{opacity:.55;cursor:wait}
#playback-details{display:block;width:100%;min-height:160px;margin:0 0 16px;padding:10px;border:1px solid #e5dccb;border-radius:7px;background:#fffef9;color:var(--ink);font:13px/1.5 monospace;resize:vertical}#playback-details[hidden]{display:none}
.recitation-slideshow{margin:28px 0 40px;padding:18px;border:1px solid #e5dccb;border-radius:14px;background:#fcfaf5;scroll-margin:28px}
.slide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:15px}.slide-heading label{font-size:13px;color:var(--muted);cursor:pointer}.slide-heading input{accent-color:#55705a;vertical-align:middle}
.recitation-slide-stage{display:flex;align-items:center;gap:10px;min-width:0}.slide-enlarge{display:block;position:relative;padding:0;flex:1;min-width:0;overflow:hidden;border-radius:8px;background:#e9e3d5;cursor:zoom-in}
.slide-enlarge img{display:block;width:100%;height:clamp(190px,24vw,350px);object-fit:cover}.slide-enlarge span{position:absolute;bottom:10px;right:10px;padding:5px 10px;background:#fffef3eb;border-radius:5px;font-size:12px}
.slide-arrow{flex:0 0 36px;width:36px;min-height:50px;background:#f1ead9;border:1px solid #e3d7b9;border-radius:7px;color:#756345;font:32px/1 Georgia,serif;padding:0}
.slide-copy h2{font:28px/1.3 var(--serif);margin:7px 0 10px}.slide-copy p{font-size:17px;line-height:1.65;margin:9px 0}.slide-copy .eyebrow{font-size:12px;margin-top:18px}.slide-copy small{font-size:12px;color:#766c57;display:block}.slide-transport{display:flex;flex-wrap:wrap;gap:10px;margin-top:17px}
.slide-transport button:disabled,.slide-arrow:disabled{opacity:.4;cursor:default}
.recitation-gallery{width:min(1100px,94vw);max-width:none;max-height:92dvh;padding:25px;border:1px solid #ded6c6;border-radius:15px;background:#fffef9;color:var(--ink)}.recitation-gallery::backdrop{background:#102820c9}
.recitation-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}.recitation-gallery-head h2{font:30px/1.3 var(--serif);margin:0}.recitation-gallery-head button{min-width:44px;min-height:44px}
#recitation-gallery-image{width:calc(100% - 92px);min-width:0;max-height:60dvh;object-fit:contain;border-radius:6px}#recitation-gallery-caption{font-size:17px;line-height:1.6}
@media(min-width:1550px){.recitation-dock{width:298px}}
@media(max-width:1150px){.recitation-dock{width:233px}}
@media(max-width:960px){.recitation-dock{width:218px}}
@media(max-width:680px){.recitation-dock{position:static;width:100%;max-height:none;overflow:visible;gap:10px;padding:12px;margin:0 0 18px}.recitation-dock button{font-size:15px;padding:8px 10px}.recitation-slideshow{padding:12px}.slide-arrow{flex-basis:28px;width:28px}.recitation-slide-stage{gap:6px}.slide-copy h2{font-size:24px}.slide-copy p{font-size:16px}.recitation-gallery{padding:16px}.recitation-gallery-head h2{font-size:24px}#recitation-gallery-image{width:calc(100% - 68px)}}
@media(prefers-reduced-motion:reduce){.arabic .word{transition:none}}