:root{color-scheme:light;--deep:#18332d;--gold:#b18b45;--pale:#f7f4eb;--line:#ded8c9;--ink:#21342c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4f5f1;color:var(--ink);font-family:Tajawal,system-ui,sans-serif}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.skip{position:absolute;top:-100px}.skip:focus{top:0;background:white;z-index:10;padding:1rem}.top{background:var(--deep);color:white;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px max(20px,calc((100vw - 1100px)/2));flex-wrap:wrap}.top a{color:white;text-decoration:none}.top nav{display:flex;gap:20px}.brand{font-weight:800;font-size:1.1rem}.layout{max-width:1100px;margin:auto;padding:24px 16px 50px}.intro{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:12px 0 24px}.intro h1{font-size:clamp(1.7rem,4vw,2.5rem);margin:8px 0}.intro small{color:#64766a}.intro p{margin:0;color:#627369}.back{color:var(--deep);font-weight:800}.controls,.search-panel,.reading,.bookmark-panel{border:1px solid var(--line);background:white;border-radius:18px;padding:20px;margin-bottom:18px;box-shadow:0 4px 20px #1b382913}.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}.controls label{display:grid;gap:6px;font-weight:700}.controls input,.controls select,.search-line input{border:1px solid #cfcfc7;border-radius:10px;padding:11px;min-width:0;width:100%;background:#fff;color:var(--ink)}button,.back{border:1px solid var(--gold);border-radius:10px;background:var(--deep);color:white;padding:12px 16px;text-align:center;text-decoration:none;font-weight:700}.back{background:transparent;color:var(--deep)}button:hover{filter:brightness(1.13)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.search-panel label{font-weight:800}.search-line{display:flex;gap:10px;margin-top:9px}.search-line input{flex:1}.note,.source{font-size:.85rem;color:#607166}.results{max-height:350px;overflow:auto;margin-top:12px}.result{display:block;width:100%;margin-bottom:7px;text-align:right;background:#f8f8f3;color:var(--ink);border-color:var(--line);line-height:1.8}.result small{display:block;color:#567}.reading{max-width:880px;margin-left:auto;margin-right:auto;padding:24px clamp(16px,4vw,50px);background:var(--pale)}.reading-head,.reading-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}.reading-head{border-bottom:1px solid var(--line);padding:0 0 15px}.reading-head strong{font-size:1.2rem}.reading-head span{color:#667}.verses{font-family:Amiri,serif;font-size:var(--quran-font,32px);line-height:2.65;text-align:justify;direction:rtl;min-height:240px;padding:24px 0;overflow-wrap:anywhere}.ayah{display:inline;cursor:pointer;border-radius:8px}.ayah:hover,.ayah:focus-visible{background:#ebdfbe}.ayah.selected{background:#ead9a2}.verse-number{font-size:.76em;color:#946c32;white-space:nowrap}.surah-heading{text-align:center;font-family:Tajawal,sans-serif;font-size:1.3rem;border-top:1px solid var(--line);padding:18px 0 4px;display:block}.ayah-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:15px}.ayah-tools button{font-family:Tajawal,sans-serif;font-size:.9rem}.reading-foot{border-top:1px solid var(--line);padding-top:18px}.status{color:#6a6a63}.status[hidden]{display:none}.bookmark-panel h2{margin:0 0 10px}.bookmark-row{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding:8px}.bookmark-row button{padding:7px 10px}.source{text-align:center;margin:30px auto}footer{text-align:center;background:var(--deep);color:#fff;padding:20px}@media(max-width:760px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.top{padding:14px 16px}.reading{padding:16px}.verses{line-height:2.45}.reading-foot button{padding:10px}.search-line{flex-direction:column}}@media(max-width:390px){.controls{grid-template-columns:1fr}.reading-head{align-items:flex-start;flex-direction:column}}
/* Reader refinements: mobile overflow, action bars and native hidden state */
[hidden]{display:none!important}.reading,.controls,.search-panel,.bookmark-panel{min-width:0}.ayah{overflow-wrap:break-word}.verse-number{font-family:Amiri,serif;unicode-bidi:isolate}.search-line button{flex-shrink:0}.reading-foot span{text-align:center;white-space:nowrap}.result{overflow-wrap:anywhere}@media(max-width:480px){.layout{padding:12px 10px 35px}.controls,.search-panel,.bookmark-panel{padding:14px}.reading{padding:14px 12px}.verses{font-size:min(var(--quran-font,32px),40px);text-align:right;line-height:2.5}.reading-foot{gap:7px}.reading-foot button{font-size:.88rem;padding:10px 7px;min-width:0;flex:1}.reading-foot span{font-size:.84rem}.ayah-tools button{flex:1 1 42%}.top nav{font-size:.9rem}}
/* Embedded audio player: non-sticky, compact on mobile */
.quran-audio{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px;margin-bottom:18px;box-shadow:0 4px 20px #1b382913}.qa-heading,.qa-options,.qa-actions,.qa-progress,.qa-foot{display:flex;align-items:center;gap:12px}.qa-heading{justify-content:space-between}.qa-heading strong{display:block;font-size:1.18rem}.qa-heading small{display:block;color:#627369;margin-top:3px}.qa-heading button{white-space:nowrap;background:transparent;color:var(--deep);padding:9px 12px}.qa-options{margin:16px 0;align-items:stretch}.qa-options label{flex:1;min-width:0;font-weight:700;display:grid;gap:6px}.qa-options select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;background:white}.qa-actions button{flex:1}.qa-progress{margin:14px 0}.qa-progress input{flex:1;min-width:0;accent-color:#27705b}.qa-progress span{font-variant-numeric:tabular-nums;min-width:37px}.qa-foot{justify-content:space-between;flex-wrap:wrap}.qa-foot label{display:flex;align-items:center;gap:8px}.qa-foot input{accent-color:#27705b}#qaStatus{font-size:.87rem;color:#57685d;margin-top:9px;min-height:1.2em}@media(max-width:540px){.quran-audio{padding:14px}.qa-heading{align-items:flex-start}.qa-options{flex-direction:column}.qa-actions{gap:6px}.qa-actions button{padding:10px 5px;font-size:.83rem}.qa-foot{align-items:flex-start;gap:12px}.qa-foot label{font-size:.87rem}}

.offline-panel{border:1px solid var(--line);border-radius:18px;background:white;padding:18px;margin-bottom:18px}.offline-actions{display:flex;gap:8px;flex-wrap:wrap}.offline-actions button{flex:1 1 180px}.sync-active{background:#eddca4;border-radius:6px;box-shadow:inset 0 -2px #ad8336}.qa-foot{margin-top:8px}@media(max-width:540px){.offline-panel{padding:14px}}

/* Mobile QA: prevent player controls and source text from pushing the viewport */
.quran-audio,.qa-options,.qa-progress,.qa-heading,.qa-foot{min-width:0;max-width:100%}.qa-heading>div{min-width:0}.qa-heading small{overflow-wrap:anywhere}.qa-progress input{min-width:0}.reading,.verses,.ayah{max-width:100%}@media(max-width:400px){.qa-heading{flex-wrap:wrap}.qa-heading button{min-height:44px}.qa-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.qa-actions button{min-width:0;white-space:normal;overflow-wrap:anywhere}}

/* Reader actions share a consistent icon, touch target and responsive layout. */
main .quran-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:0;max-width:100%;line-height:1.5;white-space:normal}
.quran-action-icon{display:block;width:18px;height:18px;flex:0 0 18px}
.quran-action-label{min-width:0;overflow-wrap:anywhere}
.controls>button{width:100%}
.qa-actions{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px}
.qa-actions button{width:100%;padding:10px 8px}
.offline-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.offline-actions button{width:100%}
.offline-actions #cancelOffline{grid-column:1/-1}
.reading-foot{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:9px}
.reading-foot button{width:100%}
.ayah-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bookmark-row>span{flex:1 1 100%}
.bookmark-row>button{flex:1 1 100px}
@media(max-width:600px){
 .controls>label{grid-column:1/-1}
 .controls{grid-template-columns:repeat(2,minmax(0,1fr))}
 .controls>button{padding:10px 7px;font-size:.87rem}
 .qa-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .qa-actions #qaPlay{grid-column:1/-1;grid-row:1;min-height:48px}
 .qa-heading{flex-wrap:wrap;gap:10px}
 .qa-heading>div{flex:1 1 180px}
 .qa-heading button{margin-inline-start:auto}
 .offline-actions{grid-template-columns:1fr}
 .offline-actions button{padding:10px}
 .ayah-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ayah-tools button{padding:9px 7px;font-size:.86rem}
 .reading-foot button{padding:10px 7px;font-size:.84rem;gap:5px}
 .search-line button{width:100%}
}
@media(max-width:350px){.reading-foot{grid-template-columns:1fr 1fr}.reading-foot #counter{grid-column:1/-1;grid-row:1}.controls>button{font-size:.8rem}.qa-actions button{font-size:.8rem}}

/* Quran action palette and responsive page navigation (2026-10-13). */
.layout :is(button,.back){background:#18332d;color:#fff;border:1.5px solid #b18b45;border-radius:12px;min-height:44px;box-shadow:0 2px 7px rgb(17 48 37 / 9%);transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.layout button:not(:disabled):hover{background:#285648;border-color:#d7b669;filter:none}
.layout button:disabled{opacity:.5;box-shadow:none}
.layout .results .result{background:#f7f4eb;color:#21342c;border-color:#c8aa70;text-align:start}
.layout .results .result:hover{background:#ede3cb;color:#173c33}
.layout .quran-audio .qa-heading button{background:#18332d;color:#fff;border-color:#b18b45}
.layout .quran-audio .qa-heading button:hover{background:#285648;color:#fff}

/* Keep hero copy RTL-aligned, but center the appropriately sized return link. */
.layout .intro.qmp3-unified-hero{flex-direction:column;align-items:stretch;justify-content:center;gap:20px;text-align:start}
.layout .intro.qmp3-unified-hero > div{width:100%;min-width:0}
.layout .intro.qmp3-unified-hero .back{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:9px;width:fit-content;max-width:100%;min-height:49px;padding:11px clamp(18px,4vw,32px);background:rgb(9 38 30 / 18%);border:2px solid #d8b663;border-radius:12px;color:#fff;font-weight:800;font-size:clamp(.94rem,2.7vw,1.05rem);line-height:1.5;text-decoration:none;text-align:center;box-shadow:0 4px 14px rgb(5 29 22 / 14%)}
.layout .intro.qmp3-unified-hero .back:hover{background:#d8b663;color:#18332d}
.layout .intro.qmp3-unified-hero .back .quran-action-label{white-space:normal;overflow-wrap:normal;word-break:normal}
.layout .intro.qmp3-unified-hero .back:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Never allow the current-page counter to collide with previous/next buttons. */
.reading-foot{grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);align-items:center;gap:12px}
.reading-foot #counter{min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:center}
.reading-foot button.quran-action{width:100%;min-width:0;max-width:100%;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px;line-height:1.4}
.reading-foot button .quran-action-label{min-width:0;white-space:normal;overflow-wrap:normal;word-break:normal;text-wrap:balance;text-align:center}
.reading-foot button .quran-action-icon{flex:0 0 18px}
@media(max-width:600px){
 .reading-foot{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"counter counter" "prev next";gap:10px 8px}
 .reading-foot #counter{grid-area:counter;justify-self:center;background:#efe9d9;border-radius:9px;padding:6px 14px;font-size:.9rem;color:#365247}
 .reading-foot #prev{grid-area:prev}
 .reading-foot #next{grid-area:next}
 .reading-foot button.quran-action{font-size:clamp(.83rem,3.4vw,1rem);padding:11px 8px}
}
@media(max-width:360px){
 .reading-foot button.quran-action{flex-direction:column;gap:4px;min-height:70px;padding:9px 5px}
 .reading-foot button .quran-action-label{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){.layout :is(button,.back){transition:none}}