/* Mushaf-first: horizontal tools, a quiet book, contextual explanation. */
/* Native renderer: centered concatenated glyphs, natural source order and width-only scaling.
   No justification, artificial blank rows, per-line fitting or viewport-height stretching. */
.reader-paper.mode-mushaf{max-width:1058px;margin-inline:auto}.reader-paper.mode-mushaf:not(.spread){max-width:520px}.mushaf-sheet{padding:20px 16px 16px;--native-scale:1;--native-font:25px;--native-leading:48px;border-radius:12px}.mushaf{display:flex;flex-direction:column;height:auto;min-height:calc(720px * var(--native-scale));font-size:calc(var(--native-font) * var(--native-scale));line-height:calc(var(--native-leading) * var(--native-scale));width:100%}.mushaf-line,.mushaf-line.centered{display:block;white-space:nowrap;text-align:center;text-align-last:center;align-self:auto;flex:none;line-height:inherit;font-size:inherit;width:100%;min-height:0;word-spacing:normal}.glyph-verse{display:inline;padding:0;border:0;border-radius:0;background:transparent;min-height:0;line-height:inherit;vertical-align:baseline;white-space:nowrap;font:inherit;color:inherit}.mushaf-metadata{display:flex;justify-content:space-between;gap:12px;direction:ltr;font-size:calc(11px * var(--native-scale));line-height:1.6;margin:0 4px 6px;color:var(--paper-ink)}.mushaf-metadata span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.mushaf .surah-heading{display:flex;align-items:center;justify-content:center;position:relative;margin:calc(4px * var(--native-scale)) 0 0;border:0;border-radius:0;height:auto;min-height:0;max-height:none;flex:none;width:100%;line-height:1.25}.surah-frame{font-family:QuranCommon;font-size:calc(45px * var(--native-scale));font-variant-ligatures:common-ligatures;line-height:1.3;color:#627c73;direction:ltr}.surah-name-ligature{position:absolute;font-family:SurahName;font-size:calc(35px * var(--native-scale));line-height:1.1;color:var(--paper-ink);direction:ltr}.mushaf .bismillah{font-family:QuranCommon;font-size:calc(28px * var(--native-scale));line-height:1.35;text-align:center;align-self:auto;margin:calc(1px * var(--native-scale)) 0;width:100%;flex:none}.printed-page{font-size:calc(13px * var(--native-scale));margin:8px 0 0;text-align:center;color:var(--paper-ink)}

.reader-heading{max-width:none;margin-bottom:16px}.reader-heading h1{font-size:25px}.reader-heading p{font-size:12px}
.reader-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0 18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.toolbar-primary,.toolbar-actions{display:flex;align-items:center;gap:8px;min-width:0}.toolbar-primary{flex:1}.toolbar-primary label{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted);min-width:0}.toolbar-primary select{max-width:260px;width:auto;min-width:120px;padding:10px 30px 10px 12px}.toolbar-actions button,.toolbar-primary button{font-size:11px;min-height:42px;padding:10px 14px}.reader-more{position:relative}.reader-more>summary{cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:24px;min-height:42px;padding:11px 16px;font-size:11px}.reader-more>summary::-webkit-details-marker{display:none}.reader-more[open]>summary{background:var(--surface)}.reader-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:12;width:230px;background:var(--bg);padding:10px;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px #0005;display:grid;gap:6px}.reader-menu button,.reader-menu a{text-align:start;justify-content:flex-start;width:100%;padding:11px 14px;font-size:12px}
.reader-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;direction:ltr;align-items:start}.reader-workspace.has-context{grid-template-columns:minmax(0,1fr) 348px}.reader-center{width:100%;max-width:1200px;margin-inline:auto;min-width:0}.reader-center>.mode-switch{justify-content:center;margin-bottom:16px}.reader-paper.mode-mushaf{gap:18px}.reader-paper.mode-mushaf:not(.spread){max-width:580px;margin-inline:auto}.reader-paper.mode-mushaf.spread{grid-template-columns:repeat(2,minmax(0,1fr))}.reader-hint{max-width:700px;margin:14px auto 0;text-align:center;font-size:10px;line-height:1.6}
#verse-context{position:sticky;top:20px;min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;max-height:calc(100dvh - 40px);display:flex;flex-direction:column;direction:ltr}#verse-context[hidden]{display:none}.context-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;border-bottom:1px solid var(--line);flex:none}.context-head .eyebrow{font-size:9px}.context-head h2{font-size:17px;margin:6px 0 0;line-height:1.4}.context-body{padding:22px;overflow:auto;overscroll-behavior:contain;min-height:0}.context-verse .arabic{font-size:25px;line-height:2.05;margin-top:0}.context-verse .translation{font-size:14px;line-height:1.9;margin:18px 0}.context-verse .source{font-size:10px;line-height:1.6}.context-body .row-actions{gap:6px}.context-body .row-actions button{font-size:10px;padding:9px 12px}.glyph-verse.is-selected{background:#1e9e9a25;border-radius:3px}.ayah.is-selected{box-shadow:inset 3px 0 var(--accent)}
.icon-button{display:inline-flex;align-items:center;justify-content:center;padding:0;width:44px;height:44px;min-width:44px;min-height:44px;line-height:1;flex-shrink:0}.icon-button .control-icon{display:block;margin:0;width:20px;height:20px}
html[dir=rtl] .reader-toolbar,html[dir=rtl] #verse-context,html[dir=rtl] .reader-center{direction:rtl}html[dir=rtl] .reader-workspace{direction:ltr}
.context-page-label{font-size:10px;color:var(--muted);margin:4px 0 0}.context-scope{display:flex;padding:12px 16px 6px;gap:6px;flex:none}.context-scope button{font-size:10px;padding:8px 11px;min-height:36px;flex:1}.context-scope button[aria-pressed=true]{background:var(--surface2);border-color:#4a716c}.context-tabs{display:flex;padding:0 16px;border-bottom:1px solid var(--line);flex:none;gap:16px}.context-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;font-size:12px;min-height:44px;padding:10px 4px;color:var(--muted)}.context-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}.context-footer{padding:12px 16px;border-top:1px solid var(--line);flex:none;background:var(--surface)}.context-footer .row-actions{margin:0;gap:6px;align-items:center}.context-footer button{padding:8px 11px;min-height:38px;font-size:10px}.context-more>summary{font-size:10px;padding:8px 10px;cursor:pointer}.context-more[open]{flex-basis:100%}.context-more .row-actions{padding-top:8px;flex-wrap:wrap}.context-more a{font-size:11px;padding:8px}.context-verse+.context-verse{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}.context-verse.current-verse .context-ref{border-color:var(--accent)}.context-ref{font-size:10px;min-height:32px;padding:4px 9px;margin-bottom:12px;direction:ltr}.context-commentary{font-size:14px;line-height:1.85;overflow-wrap:break-word}.context-commentary h2,.context-commentary h3,.context-commentary h4{font-size:16px;line-height:1.6}.context-commentary+.context-commentary{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.context-source-ref{font-size:12px;color:var(--accent);direction:ltr}.context-body .field{font-size:11px}.context-body .field select{font-size:12px}.context-body:focus{outline-offset:-4px}
@media(min-width:1700px){.reader-workspace[data-reading-mode=mushaf].has-context{grid-template-columns:minmax(0,1fr)}.reader-workspace[data-reading-mode=mushaf].has-context>.reader-center,.reader-workspace[data-reading-mode=mushaf].has-context>#verse-context{grid-column:1;grid-row:1}.reader-workspace[data-reading-mode=mushaf].has-context>#verse-context{width:348px;justify-self:end}}
.page-navigation{max-width:858px;margin-inline:auto}
body.is-reading main{padding-top:18px}body.is-reading .top{padding-top:14px;padding-bottom:14px}.reader-heading{min-height:44px;margin-bottom:10px}.reader-heading h1{font-size:22px}.reader-toolbar{padding-top:6px;padding-bottom:12px;margin-bottom:14px}.reader-center>.mode-switch{margin-bottom:12px}.reader-paper.mode-mushaf{max-width:858px}.reader-paper.mode-mushaf:not(.spread){max-width:420px}.toolbar-listen-label{margin-inline-start:6px}.context-grip{display:none}.context-head .eyebrow{letter-spacing:1.5px}.context-head h2{font-size:16px}
@media(max-width:1000px){.reader-workspace.has-context{grid-template-columns:minmax(0,1fr)}#verse-context{position:fixed;inset:auto 0 0;z-index:25;border-radius:24px 24px 0 0;max-height:58dvh;min-height:280px;box-shadow:0 -18px 60px #0005;padding-bottom:env(safe-area-inset-bottom);background:var(--bg)}.context-head{padding:16px 20px}.context-body{padding:20px}.reader-toolbar{gap:10px}.toolbar-actions{margin-inline-start:auto}}
@media(max-width:1000px){#verse-context{height:58dvh;max-height:58dvh}#verse-context.context-expanded{height:85dvh;max-height:85dvh}.context-grip{display:flex;align-items:center;justify-content:center;min-height:28px;height:28px;width:100%;padding:8px;border:0;border-radius:0;flex:none;touch-action:none}.context-grip span{display:block;width:34px;height:3px;border-radius:4px;background:var(--faint)}.context-head{padding-top:0}}
@media(max-width:580px){.reader-heading h1{font-size:19px}.reader-toolbar{margin-bottom:16px;padding:8px 0 14px}.toolbar-primary{width:100%;justify-content:space-between}.toolbar-primary select{max-width:205px}.toolbar-primary label>span{display:none}.toolbar-primary button{padding:10px 12px}.toolbar-actions{width:100%;justify-content:flex-end}.toolbar-actions>button:first-child{margin-inline-end:auto}.toolbar-actions button{font-size:10px;padding:9px 12px}.reader-menu{width:220px}.reader-center>.mode-switch{gap:4px}.reader-center>.mode-switch button{min-width:76px;font-size:11px}.reader-hint{font-size:9px}.context-verse .arabic{font-size:23px}}
@media(max-width:580px){body.is-reading .top{display:flex;gap:8px;padding:10px 14px;align-items:center}body.is-reading .top .brand>span{display:none}body.is-reading .top .brand img{width:30px;height:30px}body.is-reading .top nav{width:auto;flex:1;gap:0}body.is-reading .top nav a{min-width:52px;min-height:34px;font-size:10px;padding:7px 8px}body.is-reading .header-actions{gap:4px}body.is-reading .language-label select{min-width:78px;max-width:90px;padding-inline-start:8px;font-size:10px}body.is-reading #settings-button{padding:5px;min-width:32px;min-height:36px}body.is-reading main{padding-top:14px}.reader-heading{min-height:38px;margin-bottom:8px}.reader-heading h1{font-size:17px}.reader-heading p{font-size:10px}.reader-heading>button{font-size:9px;max-width:82px;padding:6px 8px}.reader-toolbar{flex-wrap:nowrap;gap:8px;margin-bottom:12px;padding:4px 0 10px}.toolbar-primary{flex:0;width:auto}.toolbar-primary label{display:none}.toolbar-primary button{padding:8px 10px;font-size:10px;white-space:nowrap}.toolbar-actions{flex:1;width:auto;gap:6px;justify-content:flex-end}.toolbar-actions>button:first-child{margin:0;width:40px;padding:8px}.toolbar-listen-label{display:none}.toolbar-actions button{font-size:10px;padding:8px 10px}.reader-more>summary{font-size:10px;padding:11px}.reader-center>.mode-switch{margin-bottom:10px}.reader-center>.mode-switch button{min-height:36px;padding:7px 12px;font-size:10px}.reader-heading .back-link{font-size:10px}}
.reader-toolbar>.mode-switch{margin:0;gap:4px;flex-shrink:0}.reader-toolbar>.mode-switch button{min-width:74px;min-height:38px;padding:8px 12px;font-size:11px}
@media(max-width:580px){.reader-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 8px;padding-bottom:12px;margin-bottom:14px}.reader-toolbar>.mode-switch{grid-row:2;grid-column:1/-1;justify-content:center}.reader-toolbar>.mode-switch button{font-size:10px;min-height:34px;padding:7px 12px}.toolbar-primary{grid-column:1;grid-row:1}.toolbar-actions{grid-column:2;grid-row:1}}