/* Reserve independent bands, so no metadata covers Quran text or controls. */
#reader #viewport:focus,#reader #viewport:focus-visible{outline:none;box-shadow:none}
#reader #viewport{top:calc(env(safe-area-inset-top) + 88px - 2.5mm);bottom:calc(env(safe-area-inset-bottom) + 42px + 2.5mm)}
#focus-page-heading{position:absolute;top:calc(env(safe-area-inset-top) + 50px);left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));height:30px;max-width:700px;margin:auto;display:flex;align-items:center;justify-content:space-between;direction:ltr;pointer-events:none;line-height:0}
#focus-page-heading svg{display:block;height:100%;overflow:hidden;mix-blend-mode:darken}
.focus-original-heading{width:100%}.focus-opening-surah{width:82px}.focus-opening-juz{width:110px}
#focus-page-number{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 7px);width:46px;height:28px;pointer-events:none;font-family:Title,serif;font-size:22px;text-align:center;line-height:28px}
#focus-page-number[data-side=right]{right:max(18px,env(safe-area-inset-right));left:auto}
#focus-page-number[data-side=left]{left:max(18px,env(safe-area-inset-left));right:auto}
.focus-original-number{display:block;width:100%;height:100%;overflow:hidden;mix-blend-mode:darken}
body[data-theme=night] #focus-page-heading svg,body[data-theme=night] .focus-original-number{filter:grayscale(1) invert(1);mix-blend-mode:screen}
@media(max-height:500px){#focus-page-heading{top:calc(env(safe-area-inset-top) + 8px);left:max(58px,env(safe-area-inset-left));right:max(58px,env(safe-area-inset-right));height:28px}#reader #viewport{top:calc(env(safe-area-inset-top) + 44px - 2.5mm);bottom:calc(env(safe-area-inset-bottom) + 36px + 2.5mm)}}

#focus-page-number{display:flex;width:auto;align-items:center;gap:7px;direction:rtl}#focus-page-number[data-side=left]{flex-direction:row-reverse}.focus-original-number{width:46px;flex:none}.focus-hizb{font-family:DevotionQuran,serif;font-size:16px;white-space:nowrap;border:1px solid #b8b58b;border-radius:10px;padding:0 9px;color:var(--ink);line-height:24px}

/* Position the text 2.5mm higher with layout, avoiding a fractional compositing seam. */
#reader #viewport{transform:none}
#focus-page-number .focus-hizb{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:30px;height:auto;line-height:1.65;padding:2px 10px 5px;font-family:UI,serif;font-size:13px;border-radius:10px}

.focus-original-number.focus-opening-number{width:12px;margin-inline:17px}

/* Keep the original printed headings, without backdrop blending across the moving reader. */
#focus-page-heading,#focus-page-number{background:var(--paper);isolation:isolate}
body:not([data-theme=night]) #focus-page-heading svg,body:not([data-theme=night]) .focus-original-number{filter:url(#reader-paper-tone);mix-blend-mode:normal}