/* Current direction: no upper strip; source pages begin at the top. */
body.is-reading .reader-workspace[data-reading-mode=mushaf]>.reader-center,body.is-reading .reader-workspace[data-reading-mode=mushaf].tools-expanded>.reader-center{padding-top:0}
body.is-reading .schematic-footer,body.is-reading .schematic-footer.compact-book-dock{height:96px;min-height:96px;grid-template-columns:110px minmax(0,1fr) 110px;grid-template-rows:34px 54px;gap:4px 8px;padding-top:3px}
body.is-reading .schematic-footer .schematic-header{position:static;grid-column:1/-1;grid-row:1;z-index:auto;width:100%;height:34px;min-height:34px;gap:9px;border-bottom:1px solid var(--line)}
body.is-reading .schematic-footer .schematic-location strong{font-size:13px;line-height:1.2;font-weight:500}
body.is-reading .schematic-footer .schematic-page-status{font-size:11px;min-height:30px}
body.is-reading .schematic-footer .schematic-book{width:24px;min-width:24px}
body.is-reading .schematic-footer .schematic-header .icon-button{width:30px;min-width:30px;height:30px;min-height:30px;padding:5px}
body.is-reading .schematic-footer .schematic-header .icon-button[data-action=audio-toggle],body.is-reading .schematic-footer .schematic-header .icon-button[data-action=audio-options]{display:none}
body.is-reading .schematic-footer .next-page,body.is-reading .schematic-footer.compact-book-dock .next-page{grid-column:1;grid-row:2;justify-self:start}
body.is-reading .schematic-footer .previous-page,body.is-reading .schematic-footer.compact-book-dock .previous-page{grid-column:3;grid-row:2;justify-self:end}
body.is-reading .schematic-footer #reader-audio-slot,body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot{grid-column:2;grid-row:2;height:54px;min-height:54px}
body.is-reading .schematic-footer #reader-audio-slot #player,body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot #player{height:54px;min-height:54px}
body.is-reading .schematic-footer #player .player-center,body.is-reading .schematic-footer.compact-book-dock #player .player-center{height:54px;min-height:54px;gap:12px;flex-wrap:nowrap}
body.is-reading .schematic-footer #player .volume-control input{width:88px;max-width:88px;min-width:40px}
body.is-reading .schematic-footer #player .player-progress{width:116px;min-width:116px}
body.is-reading .schematic-footer #player .player-controls{gap:5px}
.word-sync-status{display:inline-flex;align-items:center;min-height:26px;max-width:240px;padding:3px 7px;border:0;background:transparent;color:var(--muted);font-size:10px;line-height:1.3;text-align:start;white-space:normal}
.word-sync-status[data-status=ready]{color:#ffe066}.word-sync-status[data-status=unsupported],.word-sync-status[data-status=error]{color:#ffd89a}
/* Restore the earlier explanation card, heading, top tabs and natural text. */
body.is-reading .reader-workspace[data-reading-mode=mushaf]>#verse-context{background:var(--surface);border:1px solid var(--line);border-radius:18px}
body.is-reading #verse-context .context-head{order:0;padding:20px;border-bottom:1px solid var(--line)}
body.is-reading #verse-context .context-head .eyebrow{display:block;font-size:9px;letter-spacing:1.5px}
body.is-reading #verse-context .context-head .context-page-label{display:block;font-size:10px;color:var(--muted);margin:4px 0 0}
body.is-reading #verse-context .context-head h2{color:var(--ink);font-size:17px;line-height:1.4;font-weight:600;margin:6px 0 0}
body.is-reading #verse-context .context-scope{order:1;padding:12px 16px 6px;gap:6px}
body.is-reading #verse-context .context-scope button{min-height:36px;padding:8px 11px;font-size:10px;border-radius:12px}
body.is-reading #verse-context .context-tabs{order:2;min-height:44px;padding:0 16px;border-top:0;border-bottom:1px solid var(--line);gap:16px}
body.is-reading #verse-context .context-tabs button{min-height:44px;padding:10px 4px;font-size:12px}
body.is-reading #verse-context .context-body{order:3;padding:22px;flex:1;min-height:0}
body.is-reading #verse-context .context-verse .arabic{font-size:25px;line-height:2.05;margin:0}
body.is-reading #verse-context .context-verse .translation{font-size:14px;line-height:1.9;margin:18px 0;padding:0;border:0}
body.is-reading #verse-context .context-footer{order:4;position:static;inset:auto;max-width:none;max-height:36%;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface);overflow:auto}
body.is-reading #verse-context .context-footer>.row-actions{display:flex;flex-wrap:wrap;gap:6px}
body.is-reading #verse-context .context-footer button,body.is-reading #verse-context .context-more>summary{width:auto;min-width:0;height:auto;min-height:38px;padding:8px 11px;font-size:10px;border:1px solid var(--line);background:transparent;border-radius:12px}
body.is-reading #verse-context .context-more[open]{flex-basis:100%}
body.is-reading #verse-context .context-more[open]>.row-actions{position:static;inset:auto;display:flex;flex-wrap:wrap;width:auto;max-height:none;overflow:visible;padding:8px 0 0;gap:6px;border:0;border-radius:0;background:transparent;box-shadow:none}
@media(max-width:1500px){body.is-reading .schematic-footer #player .player-center,body.is-reading .schematic-footer.compact-book-dock #player .player-center{gap:7px}body.is-reading .schematic-footer #player .volume-control input{width:64px;max-width:64px}body.is-reading .schematic-footer #player .player-progress{width:100px;min-width:100px}}
@media(max-width:1200px){body.is-reading .schematic-footer,body.is-reading .schematic-footer.compact-book-dock{height:134px;min-height:134px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:34px 30px 60px;gap:4px 8px}body.is-reading .schematic-footer .schematic-header{grid-column:1/-1;grid-row:1}body.is-reading .schematic-footer .next-page,body.is-reading .schematic-footer.compact-book-dock .next-page{grid-column:1;grid-row:2}body.is-reading .schematic-footer .previous-page,body.is-reading .schematic-footer.compact-book-dock .previous-page{grid-column:2;grid-row:2}body.is-reading .schematic-footer #reader-audio-slot,body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot{grid-column:1/-1;grid-row:3;height:60px;min-height:60px}body.is-reading .schematic-footer #reader-audio-slot #player,body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot #player{height:60px;min-height:60px}body.is-reading .schematic-footer #player .player-center,body.is-reading .schematic-footer.compact-book-dock #player .player-center{height:60px;min-height:60px;flex-wrap:wrap;gap:3px 6px}.word-sync-status{font-size:9px;max-width:140px}}
@media(max-width:699px){body.is-reading .reader-workspace[data-reading-mode=mushaf]>.reader-center,body.is-reading .reader-workspace[data-reading-mode=mushaf].tools-expanded>.reader-center{padding-top:0}body.is-reading .schematic-footer .schematic-location strong{font-size:11px}body.is-reading .schematic-footer .schematic-page-status{font-size:9px}.word-sync-status{max-width:90px;font-size:8px}body.is-reading .schematic-footer .schematic-header-actions .schematic-settings{display:none}body.is-reading #verse-context .context-head{padding:8px 10px}body.is-reading #verse-context .context-head .eyebrow{display:none}body.is-reading #verse-context .context-head h2{font-size:16px;margin:0}body.is-reading #verse-context .context-scope{padding:4px 8px;gap:4px}body.is-reading #verse-context .context-scope button{min-height:28px;font-size:10px;padding:5px 7px}body.is-reading #verse-context .context-tabs{min-height:28px}body.is-reading #verse-context .context-tabs button{min-height:28px;font-size:12px;padding:5px}body.is-reading #verse-context .context-body{padding:8px 10px}body.is-reading #verse-context .context-footer{padding:6px 10px}body.is-reading #verse-context .context-footer button,body.is-reading #verse-context .context-more>summary{min-height:28px;font-size:10px;padding:5px 7px}}
body.is-reading .schematic-footer.compact-book-dock{height:134px;min-height:134px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:34px 30px 60px;gap:4px 8px}body.is-reading .schematic-footer.compact-book-dock .schematic-header{grid-column:1/-1;grid-row:1}body.is-reading .schematic-footer.compact-book-dock .next-page,body.is-reading .schematic-footer.compact-book-dock .next-page{grid-column:1;grid-row:2}body.is-reading .schematic-footer.compact-book-dock .previous-page,body.is-reading .schematic-footer.compact-book-dock .previous-page{grid-column:2;grid-row:2}body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot,body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot{grid-column:1/-1;grid-row:3;height:60px;min-height:60px}body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot #player,body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot #player{height:60px;min-height:60px}body.is-reading .schematic-footer.compact-book-dock #player .player-center,body.is-reading .schematic-footer.compact-book-dock #player .player-center{height:60px;min-height:60px;flex-wrap:wrap;gap:3px 6px}.word-sync-status{font-size:9px;max-width:140px}
/* Remove the requested chapter/page/sync strip. Reuse its space without
   changing footer height, workspace size or a single Quran-page metric. */
body.is-reading .schematic-footer .schematic-header{display:none}
body.is-reading .schematic-footer{grid-template-rows:88px;gap:0 8px}
body.is-reading .schematic-footer .next-page,body.is-reading .schematic-footer .previous-page,body.is-reading .schematic-footer #reader-audio-slot{grid-row:1}
body.is-reading .schematic-footer #reader-audio-slot,body.is-reading .schematic-footer #reader-audio-slot #player,body.is-reading .schematic-footer #player .player-center{height:88px;min-height:88px}
body.is-reading .schematic-footer #player .player-center{gap:12px}
body.is-reading .schematic-footer #player .player-speed select{height:40px;min-height:40px;width:84px;min-width:84px;font-size:14px}
body.is-reading .schematic-footer #player .player-controls{gap:5px}
body.is-reading .schematic-footer #player .player-controls button{height:40px;min-height:40px;width:36px;min-width:36px;padding:7px}
body.is-reading .schematic-footer #player .player-controls [data-action=audio-toggle]{width:46px;min-width:46px;height:46px;min-height:46px;padding:10px}
body.is-reading .schematic-footer #player .player-controls [data-action=audio-stop]{width:32px;min-width:32px;padding:6px}
body.is-reading .schematic-footer #player .player-progress{width:126px;min-width:126px;height:36px}
body.is-reading .schematic-footer #player .player-times{font-size:13px;line-height:20px}
body.is-reading .schematic-footer #player .volume-control input{width:92px;max-width:92px;height:34px;min-height:34px}
body.is-reading .schematic-footer #player .volume-control .icon-button,body.is-reading .schematic-footer #player .player-more{height:40px;min-height:40px;width:36px;min-width:36px;padding:7px}
body.is-reading .schematic-footer .schematic-page-turn{min-height:44px;height:44px;font-size:13px}
#options-word-sync{font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:1500px){body.is-reading .schematic-footer #player .player-center{gap:8px}body.is-reading .schematic-footer #player .volume-control input{width:70px;max-width:70px}body.is-reading .schematic-footer #player .player-progress{width:108px;min-width:108px}}
body.is-reading .schematic-footer.compact-book-dock{grid-template-rows:40px 84px;gap:6px 8px}
body.is-reading .schematic-footer.compact-book-dock .next-page,body.is-reading .schematic-footer.compact-book-dock .previous-page{grid-row:1}
body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot{grid-row:2}
body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot,body.is-reading .schematic-footer.compact-book-dock #reader-audio-slot #player,body.is-reading .schematic-footer.compact-book-dock #player .player-center{height:84px;min-height:84px}
body.is-reading .schematic-footer.compact-book-dock #player .player-center{flex-wrap:wrap;gap:5px 8px}
@media(max-width:1200px){body.is-reading .schematic-footer{grid-template-rows:40px 84px;gap:6px 8px}body.is-reading .schematic-footer .next-page,body.is-reading .schematic-footer .previous-page{grid-row:1}body.is-reading .schematic-footer #reader-audio-slot{grid-row:2}body.is-reading .schematic-footer #reader-audio-slot,body.is-reading .schematic-footer #reader-audio-slot #player,body.is-reading .schematic-footer #player .player-center{height:84px;min-height:84px}body.is-reading .schematic-footer #player .player-center{flex-wrap:wrap;gap:5px 8px}}
/* Restore the former readability.css typography, not the smaller schematic skin. */
body.is-reading #verse-context .context-head{padding:24px;gap:16px}
body.is-reading #verse-context .context-head .eyebrow{font-size:12px}
body.is-reading #verse-context .context-head h2{font-size:24px;line-height:1.4}
body.is-reading #verse-context .context-head .context-page-label{font-size:14px;margin-top:6px}
body.is-reading #verse-context .context-body{padding:24px}
body.is-reading #verse-context .context-verse .arabic{font-size:30px;line-height:2}
body.is-reading #verse-context .context-verse .translation{font-size:18px;line-height:1.85}
body.is-reading #verse-context .context-commentary{font-size:18px;line-height:1.85}
body.is-reading #verse-context .context-commentary :is(h2,h3,h4){font-size:21px}
body.is-reading #verse-context .context-scope{padding:14px 18px 8px;gap:8px}
body.is-reading #verse-context .context-scope button{font-size:13px;min-height:42px;padding:10px 12px}
body.is-reading #verse-context .context-tabs{padding-inline:20px;gap:22px;min-height:48px}
body.is-reading #verse-context .context-tabs button{font-size:16px;min-height:48px}
body.is-reading #verse-context .context-footer{padding:14px 18px}
body.is-reading #verse-context .context-footer button,body.is-reading #verse-context .context-more>summary{font-size:13px;min-height:44px;padding:10px 12px}
body.is-reading #verse-context .context-more a{font-size:14px}
body.is-reading #verse-context .context-body .field,body.is-reading #verse-context .context-body .field select{font-size:15px}
body.is-reading #verse-context .context-ref,body.is-reading #verse-context .context-source-ref{font-size:14px}
body.is-reading #verse-context .context-body>.source{font-size:13px}
/* Permanently available tools; transliteration belongs to the explanation heading. */
body.is-reading #verse-context .context-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;gap:16px;direction:ltr}
body.is-reading #verse-context .context-heading{min-width:0}
body.is-reading #verse-context .context-transliteration{min-width:0;padding-block-start:0}
body.is-reading #verse-context .context-transliteration .check{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:14px;line-height:1.6;cursor:pointer}
body.is-reading #verse-context .context-transliteration input{flex:none;width:18px;height:18px;min-height:0;margin:2px 0 0;accent-color:var(--accent)}
body.is-reading #verse-context .context-transliteration .source{margin:7px 0 0;font-size:12px;line-height:1.65;color:var(--muted)}
@media(max-width:699px){body.is-reading #verse-context .context-head{max-height:60%;overflow:auto;gap:12px;flex-shrink:0}body.is-reading #verse-context .context-transliteration{padding-block-start:0}body.is-reading #verse-context .context-transliteration .check{font-size:12px}body.is-reading #verse-context .context-transliteration .source{font-size:11px;line-height:1.5}}

/* Permanent tools must not squeeze the bottom explanation/controls on phones.
   The upper Quran sheet and its grid cell keep their existing dimensions. */
@media(max-width:699px){
body.is-reading .reader-workspace[data-reading-mode=mushaf]>.reader-rail{grid-row:1}
body.is-reading .reader-workspace[data-reading-mode=mushaf]>#verse-context,body.is-reading .reader-workspace[data-reading-mode=mushaf].tools-expanded>#verse-context{grid-column:1/-1}
}
/* Center the PLAY button itself on the physical book, not an asymmetric group. */
body.is-reading .schematic-footer #player .player-center,body.is-reading .schematic-footer.compact-book-dock #player .player-center{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);width:100%;max-width:100%;gap:10px;align-items:center}
body.is-reading .schematic-footer #player .audio-before,body.is-reading .schematic-footer #player .audio-after{display:flex;flex-wrap:nowrap;min-width:0;align-items:center;gap:8px}
body.is-reading .schematic-footer #player .audio-before{grid-column:1;grid-row:1;justify-content:end}body.is-reading .schematic-footer #player .audio-before .volume-control{order:0}
body.is-reading .schematic-footer #player .audio-after{grid-column:3;grid-row:1;justify-content:start}
body.is-reading .schematic-footer #player .audio-play{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;width:46px;min-width:46px;height:46px;min-height:46px;padding:10px;border:0;border-radius:50%;background:var(--accent);color:#102824}
body.is-reading .schematic-footer #player .audio-play svg{display:block;width:22px;height:22px;margin:0;transform:none}
body.is-reading .schematic-footer #player .audio-play[data-playback=play] svg{transform:translateX(-1px)}
body.is-reading .schematic-footer.compact-book-dock #player .audio-before,body.is-reading .schematic-footer.compact-book-dock #player .audio-after{flex-wrap:wrap;align-content:center;gap:5px}
@media(max-width:1200px){body.is-reading .schematic-footer #player .audio-before,body.is-reading .schematic-footer #player .audio-after{flex-wrap:wrap;gap:5px}}
@media(max-width:580px){body.is-reading #verse-context .context-head{padding:12px}body.is-reading #verse-context .context-head h2{font-size:22px}body.is-reading #verse-context .context-head .context-page-label{font-size:12px}body.is-reading #verse-context .context-body{padding:14px}body.is-reading #verse-context .context-verse .arabic{font-size:28px}body.is-reading #verse-context .context-verse .translation{font-size:17px}body.is-reading #verse-context .context-tabs{padding-inline:12px;gap:14px}body.is-reading #verse-context .context-tabs button{font-size:15px;min-height:40px}body.is-reading #verse-context .context-scope{padding:6px 10px}body.is-reading #verse-context .context-scope button{font-size:12px;min-height:34px;padding:6px}body.is-reading #verse-context .context-footer{padding:6px 10px}body.is-reading #verse-context .context-footer button,body.is-reading #verse-context .context-more>summary{font-size:12px;min-height:34px;padding:6px}}