/* Khalwati R105 — المصحف الشريف: full-screen reader. */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('/khalwati-public-assets/v23/tajawal-arabic-500-normal.woff2') format('woff2')}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('/khalwati-public-assets/v23/tajawal-arabic-700-normal.woff2') format('woff2')}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url('/khalwati-public-assets/v23/tajawal-arabic-800-normal.woff2') format('woff2')}
@font-face{font-family:'KhalwatiAyah';src:url('/quran/tafsir/muyassar/fonts/uthmanic_hafs_v20.ttf') format('truetype');font-display:swap}
@font-face{font-family:'KhalwatiTafsir';src:url('/quran/tafsir/muyassar/fonts/uthman_tn1_ver20.ttf') format('truetype');font-display:swap}

:root{--mq-emerald:#0b4a37;--mq-emerald-2:#073a2b;--mq-gold:#b8913f;--mq-gold-soft:#e6d3a3;--mq-bg:#f4efe2;--mq-surface:#fffdf8;--mq-page:#fffcf3;--mq-ink:#1c3a30;--mq-muted:#6c7a72;--mq-line:#e3d8bd;color-scheme:light}
html[data-mq-theme="ivory"]{--mq-bg:#efe5cc;--mq-page:#f7edd4;--mq-surface:#fbf5e6}
html[data-mq-theme="night"]{--mq-bg:#0c1713;--mq-page:#13221c;--mq-surface:#16261f;--mq-ink:#ece5d2;--mq-muted:#a9b9b0;--mq-line:#2f4539;--mq-gold:#d4b66f;--mq-gold-soft:#4b4430;color-scheme:dark}

html,body{margin:0;height:100%;overflow:hidden;overflow:clip;overscroll-behavior:none;background:var(--mq-bg)}
body.mq-body{font-family:Tajawal,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--mq-ink);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
.mq-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--mq-gold);outline-offset:2px}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- the app fills the screen and never scrolls ---- */
.mq-app{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--mq-bg)}

/* top bar */
.mq-top{display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));background:linear-gradient(180deg,var(--mq-emerald),var(--mq-emerald-2));color:#fbf6e6;box-shadow:0 2px 10px rgba(0,0,0,.12);z-index:3}
.mq-home{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08)}
.mq-home img{width:30px;height:30px;border-radius:50%}
.mq-surah{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:4px 10px;border:0;border-radius:12px;background:rgba(255,255,255,.07);text-align:start}
.mq-surah span{max-width:100%;font-size:16px;font-weight:800;color:#f3dfa6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-surah span::after{content:" ▾";font-size:.75em;opacity:.8}
.mq-surah small{max-width:100%;font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-tools{flex:0 0 auto;display:flex;gap:4px}
.mq-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;height:46px;padding:0 6px;border:0;border-radius:12px;background:transparent;color:#fbf6e6}
.mq-tool span{font-size:11px;font-weight:700}
.mq-tool[aria-pressed="true"]{background:rgba(243,223,166,.18);color:#f3dfa6}
.mq-tool:active{background:rgba(255,255,255,.12)}

/* main: stage (+ tafsir) */
.mq-main{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0}
.mq-stage{position:relative;direction:ltr;overflow:hidden;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.mq-track{position:absolute;top:0;bottom:0;left:0;right:auto;width:300%;display:flex;direction:ltr;transform:translate3d(-33.3333%,0,0);will-change:transform;backface-visibility:hidden}
.mq-slot{flex:0 0 33.3333%;height:100%;display:flex;align-items:center;justify-content:center;gap:0;direction:ltr}
.mq-page{position:relative;flex:0 0 auto;width:var(--mq-w,300px);height:var(--mq-h,480px);background:var(--mq-page);border:1.5px solid var(--mq-gold);border-radius:6px;box-shadow:inset 0 0 0 3px var(--mq-page),inset 0 0 0 4px var(--mq-gold-soft),0 10px 28px rgba(24,48,38,.12);overflow:hidden}
.mq-page canvas{display:block;width:100%;height:100%}
.mq-page:not(.mq-ready){background:linear-gradient(100deg,var(--mq-page) 30%,color-mix(in srgb,var(--mq-gold-soft) 35%,var(--mq-page)) 50%,var(--mq-page) 70%) var(--mq-page);background-size:300% 100%;animation:mq-wait 1.4s linear infinite}
@keyframes mq-wait{to{background-position:-150% 0}}
.mq-spread .mq-page:first-child{border-radius:6px 0 0 6px;border-right-width:.5px}
.mq-spread .mq-page:last-child{border-radius:0 6px 6px 0;border-left-width:.5px}
html[data-mq-theme="night"] .mq-page canvas{filter:invert(1) hue-rotate(180deg) brightness(.93) contrast(.92)}

/* bottom bar */
.mq-bottom{display:flex;align-items:center;gap:10px;padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--mq-surface);border-top:1px solid var(--mq-line);z-index:3}
.mq-nav{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--mq-line);background:var(--mq-surface);color:var(--mq-emerald);font-size:20px;font-weight:800;display:grid;place-items:center}
html[data-mq-theme="night"] .mq-nav{color:var(--mq-gold)}
.mq-nav:disabled{opacity:.35}
.mq-nav:not(:disabled):active{background:var(--mq-gold-soft)}
.mq-scrub{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.mq-scrub input{width:100%;height:28px;margin:0;accent-color:var(--mq-gold);background:transparent}
.mq-bubble{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:10px;background:var(--mq-emerald);color:#f3dfa6;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.2);pointer-events:none}
.mq-pagelabel{flex:0 0 auto;min-width:40px;height:32px;padding:0 8px;border-radius:999px;border:1.5px solid var(--mq-gold);color:var(--mq-gold);font-weight:800;display:grid;place-items:center;font-size:15px}

/* ---- tafsir ---- */
.mq-tafsir{display:none;min-height:0;flex-direction:column;background:var(--mq-surface);color:var(--mq-ink)}
.mq-tafsir-on .mq-tafsir{display:flex}
.mq-t-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--mq-line)}
.mq-t-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.mq-t-title strong{font-size:16px;color:var(--mq-gold)}
.mq-t-title small{font-size:12px;color:var(--mq-muted)}
.mq-t-nav,.mq-t-close{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--mq-line);background:var(--mq-surface);font-size:18px;font-weight:800;color:var(--mq-emerald)}
html[data-mq-theme="night"] .mq-t-nav,html[data-mq-theme="night"] .mq-t-close{color:var(--mq-gold)}
.mq-t-close{font-size:22px}
.mq-t-list{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 14px 14px}
.mq-t-surah{margin:14px 0 6px;font-size:15px;color:var(--mq-gold);text-align:center}
.mq-t-card{padding:12px 0;border-bottom:1px solid var(--mq-line);scroll-margin-top:8px}
.mq-t-card.mq-t-focus{background:color-mix(in srgb,var(--mq-gold) 9%,transparent);border-radius:10px;padding-inline:8px}
.mq-t-ayah{display:flex;gap:10px;align-items:flex-start}
.mq-t-num{flex:0 0 auto;min-width:30px;height:30px;margin-top:6px;border-radius:50%;border:1.5px solid var(--mq-gold);color:var(--mq-gold);display:grid;place-items:center;font-size:13px;font-weight:800}
.mq-t-text{margin:0;font-family:KhalwatiAyah,'Amiri Quran',serif;font-size:23px;line-height:2.05;color:var(--mq-ink)}
.mq-t-body{margin:6px 0 4px;font-family:KhalwatiTafsir,'Amiri',serif;font-size:19px;line-height:2;color:var(--mq-ink);opacity:.92}
.mq-t-actions{display:flex;gap:8px}
.mq-t-actions button{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--mq-line);background:transparent;font-size:12px;color:var(--mq-muted)}
.mq-t-src{margin:0;padding:8px 14px calc(8px + env(safe-area-inset-bottom));font-size:11px;color:var(--mq-muted);border-top:1px solid var(--mq-line)}
.mq-t-src a{color:inherit}

/* phones: page on top, tafsir below it */
@media (max-width:999px){
 .mq-tafsir-on .mq-main{grid-template-rows:minmax(0,42fr) minmax(0,58fr)}
 .mq-tafsir-on .mq-tafsir{border-top:1px solid var(--mq-line);border-radius:18px 18px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.10)}
 .mq-tafsir-on .mq-bottom{display:none}
 .mq-t-src{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
}
/* computers / tablets in landscape: tafsir beside the page */
@media (min-width:1000px){
 .mq-tafsir-on .mq-main{grid-template-columns:minmax(0,1fr) minmax(360px,32vw)}
 .mq-tafsir-on .mq-tafsir{border-inline-start:1px solid var(--mq-line)}
 .mq-t-head{padding:12px 16px}
}

/* small phones: icons only */
@media (max-width:370px){.mq-tool{min-width:42px}.mq-tool span{font-size:10px}.mq-surah span{font-size:15px}}

/* ---- sheets (index, search, settings) ---- */
.mq-sheet{box-sizing:border-box;width:min(560px,100vw);max-width:100vw;max-height:82dvh;margin:auto;padding:0 16px 14px;border:0;border-radius:18px;background:var(--mq-surface);color:var(--mq-ink);box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;font-family:Tajawal,system-ui,sans-serif}
.mq-sheet[open]{display:flex;flex-direction:column}
.mq-sheet::backdrop{background:rgba(8,20,16,.42)}
@media (max-width:640px){.mq-sheet{margin:auto 0 0;width:100vw;border-radius:20px 20px 0 0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}}
.mq-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 0 8px}
.mq-sheet-head h2{margin:0;font-size:18px;color:var(--mq-gold)}
.mq-close{width:38px;height:38px;border-radius:50%;border:1px solid var(--mq-line);background:transparent;font-size:22px}
.mq-sheet h3{margin:14px 0 8px;font-size:14px;color:var(--mq-muted)}
.mq-sheet input[type=search]{box-sizing:border-box;width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--mq-line);background:var(--mq-bg);color:var(--mq-ink);font:inherit;font-size:16px;margin:6px 0 8px}
.mq-tabs,.mq-snav,.mq-themes{display:flex;gap:8px}
.mq-tabs button,.mq-snav button,.mq-themes button{flex:1 1 0;min-height:42px;border-radius:12px;border:1px solid var(--mq-line);background:transparent;font-weight:700}
.mq-tabs button[aria-pressed="true"],.mq-themes button[aria-pressed="true"]{background:var(--mq-emerald);color:#f3dfa6;border-color:var(--mq-emerald)}
.mq-snav{margin-top:8px}
.mq-list{flex:1 1 auto;min-height:120px;overflow:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px;color:var(--mq-muted)}
.mq-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:50px;padding:8px 12px;margin:0 0 6px;border-radius:12px;border:1px solid var(--mq-line);background:transparent;text-align:start;color:var(--mq-ink)}
.mq-row span{font-weight:700}
.mq-row small{color:var(--mq-muted);white-space:nowrap}
.mq-row.mq-on{border-color:var(--mq-gold);background:color-mix(in srgb,var(--mq-gold) 12%,transparent)}
.mq-hit{flex-direction:column;align-items:flex-start}
.mq-hit span{font-weight:500;line-height:1.8}
.mq-wide{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;border-radius:12px;border:1px solid var(--mq-line);background:transparent;font-weight:700;text-decoration:none;color:var(--mq-ink);box-sizing:border-box}
.mq-wide[aria-pressed="true"]{border-color:var(--mq-gold);color:var(--mq-gold)}
.mq-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;color:var(--mq-muted);font-size:13px}
.mq-chip{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--mq-line);background:transparent;font-size:13px}
.mq-credits{margin:14px 0 0;font-size:12px;color:var(--mq-muted);line-height:1.8}
.mq-credits a{color:inherit}
.mq-noscript{position:fixed;inset:auto 0 40% 0;text-align:center}
@media (prefers-reduced-motion:reduce){.mq-page:not(.mq-ready){animation:none}}

/* phone held sideways: page fills the width and scrolls; slimmer bars */
.mq-scrollmode .mq-slot{overflow-y:auto;overscroll-behavior:contain;align-items:flex-start;padding:10px 0 16px;-webkit-overflow-scrolling:touch}
.mq-scrollmode .mq-page{flex:0 0 auto}
@media (orientation:landscape) and (max-height:500px){
 .mq-top{padding-top:calc(3px + env(safe-area-inset-top));padding-bottom:3px}
 .mq-tool{height:38px}.mq-tool span{display:none}.mq-home{width:34px;height:34px}
 .mq-surah{flex-direction:row;align-items:center;gap:10px}
 .mq-bottom{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
 .mq-nav{width:38px;height:38px}
 .mq-tafsir-on .mq-main{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
 .mq-tafsir-on .mq-tafsir{border-top:0;border-radius:0;border-inline-start:1px solid var(--mq-line)}
 .mq-tafsir-on .mq-bottom{display:flex}
}

/* page slider: thin gold track, round thumb */
.mq-scrub input{-webkit-appearance:none;appearance:none;height:30px}
.mq-scrub input::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--mq-line)}
.mq-scrub input::-moz-range-track{height:6px;border-radius:999px;background:var(--mq-line)}
.mq-scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--mq-gold);border:3px solid var(--mq-surface);box-shadow:0 1px 6px rgba(0,0,0,.25)}
.mq-scrub input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--mq-gold);border:3px solid var(--mq-surface)}
.mq-sheet>*:not(.mq-list){flex-shrink:0}

/* verse highlight: an invisible copy of the page paints only the chosen / hovered verse */
.mq-hit-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mq-hit-svg path,.mq-hit-svg use{fill:transparent!important;stroke:none!important}
.mq-hit-svg .mq-hover path{fill:color-mix(in srgb,var(--mq-gold) 75%,transparent)!important}
.mq-hit-svg .mq-sel path{fill:var(--mq-gold)!important}
html[data-mq-theme="night"] .mq-hit-svg .mq-sel path{fill:#f0c766!important}
/* the bar for a chosen verse */
.mq-verse{position:absolute;inset-inline:10px;bottom:10px;z-index:4;display:flex;align-items:center;gap:6px;padding:8px;border-radius:16px;background:var(--mq-emerald);color:#fbf6e6;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.mq-verse[hidden]{display:none}
.mq-verse strong{flex:1 1 auto;min-width:0;padding-inline:6px;font-size:14px;color:#f3dfa6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-verse button{flex:0 0 auto;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fbf6e6;font-weight:700;font-size:13px}
.mq-verse button.mq-v-x{width:40px;padding:0;font-size:18px;background:transparent}
@media (min-width:700px){.mq-verse{inset-inline:auto;left:50%;transform:translateX(-50%);min-width:520px}}
/* colours (settings) */
.mq-colours{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mq-colours button{min-height:42px;border-radius:12px;border:1px solid var(--mq-line);background:transparent;font-weight:700}
.mq-colours button[aria-pressed="true"]{background:var(--mq-emerald);color:#f3dfa6;border-color:var(--mq-emerald)}
.mq-colours .mq-night-colour{grid-column:1/-1;background:#0c1713;color:#f3dfa6;border-color:#0c1713}
.mq-tools .mq-tool{min-width:50px}
@media (max-width:400px){.mq-tool{min-width:44px;padding:0 3px}.mq-tool span{font-size:10px}}
.mq-t-list,.mq-list{position:relative}
@media (max-width:520px){
 .mq-top{gap:6px;padding-inline:max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-left))}
 .mq-home{width:36px;height:36px}.mq-home img{width:28px;height:28px}
 .mq-tools{gap:0}
 .mq-tools .mq-tool{min-width:0;padding:0 6px}
 .mq-tool span{font-size:10.5px}
 .mq-surah{padding:4px 8px}.mq-surah span{font-size:15px}.mq-surah small{font-size:11px}
}
@media (max-width:350px){.mq-tool span{display:none}.mq-tools .mq-tool{padding:0 8px}}
.mq-surah{flex:1 1 0%!important;width:0;min-width:0!important;overflow:hidden}

/* zoom: only the page grows; a small button brings it back */
html{touch-action:manipulation}
.mq-scrollmode .mq-stage{touch-action:pan-y}
.mq-slot{transform-origin:0 0;will-change:auto}
.mq-zoomed .mq-slot:nth-child(2){will-change:transform}
.mq-unzoom{position:absolute;top:10px;inset-inline-start:10px;z-index:5;display:none;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:rgba(11,74,55,.92);color:#f3dfa6;font-weight:800;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.mq-zoomed .mq-unzoom{display:inline-flex}