/* A small pair of controls, kept separate from Quran page-turning tools. */
.app-navigation{position:sticky;top:0;z-index:30;display:flex;justify-content:flex-start;align-items:center;flex-shrink:0;min-height:68px;padding:calc(10px + env(safe-area-inset-top)) 0 10px;pointer-events:none}
.app-navigation[hidden]{display:none!important}
.app-navigation-controls{display:inline-flex;align-items:center;direction:rtl;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:0 4px 18px #0002,inset 0 1px 0 #ffffff06;pointer-events:auto}
.app-navigation-controls a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:0;border-radius:999px;color:var(--gold-bright);text-decoration:none;font-family:ArabicUI,Tahoma,Arial,sans-serif;font-size:.875rem;line-height:1.5;touch-action:manipulation;transition:background .18s,color .18s,transform .18s}
.app-navigation-back{padding:10px 17px 10px 14px}.app-navigation-home{width:46px;padding:10px}
.app-navigation-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.app-navigation-divider{height:20px;width:1px;flex-shrink:0;background:var(--line);margin-inline:3px}
.app-navigation-controls a:active{transform:scale(.95);background:var(--appearance-tint)}
.app-navigation-controls a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(hover:hover){.app-navigation-controls a:hover{background:var(--appearance-tint);color:var(--gold)}}
@supports(backdrop-filter:blur(12px)){.app-navigation-controls{background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
:root[data-theme=light] .app-navigation-controls{box-shadow:0 4px 18px #2549350c,inset 0 1px 0 #fff9}
html:has(.app-navigation:not([hidden])){scroll-padding-top:calc(78px + env(safe-area-inset-top))}
body.mushaf-focus .app-navigation{display:none}
html:has(body.mushaf-focus .app-navigation){scroll-padding-top:0}
@media(max-width:360px){.app-navigation-back{padding-inline:13px}.app-navigation-controls a{gap:7px}}
@media(prefers-reduced-motion:reduce){.app-navigation-controls a{transition:none}}
@media print{.app-navigation{display:none!important}}