/* Surah reader (#/surah/<n>): a calm, app-like reading page with a player bar.
   Colours come from the theme tokens in style.css, so light and dark both work. */

.qView{
  --qArSize:30px;
  --qTrSize:17px;
  --qQuran:"Amiri Quran",Amiri,"Traditional Arabic",serif;
  --qHi:var(--cream);
  --qHi:color-mix(in srgb,var(--gold) 15%,transparent);
  max-width:780px;margin:0 auto
}
html[data-theme=dark] .qView{--qHi:color-mix(in srgb,var(--emerald) 16%,transparent)}
@media (prefers-color-scheme:dark){html[data-theme=auto] .qView{--qHi:color-mix(in srgb,var(--emerald) 16%,transparent)}}
.qPage{padding:6px 0 24px}
html.qReading body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
@media (min-width:760px){html.qReading body{padding-bottom:104px}}

/* icons */
.qi{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.qi .fill{fill:currentColor;stroke:none}
.qIcon{position:relative;width:44px;height:44px;flex:none;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:inline-grid;place-items:center;cursor:pointer;padding:0;font:inherit;transition:background .15s,color .15s}
.qIcon:hover{background:var(--mint)}
.qAa span{font-family:Amiri,Georgia,serif;font-weight:700;font-size:19px;line-height:1;letter-spacing:-.02em}

/* top row */
.qTop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 14px}
.qBack{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:700;color:var(--emerald);text-decoration:none;margin-inline-start:-6px;padding-inline-end:8px}
.qBack:hover span{text-decoration:underline}
.qTopBtns{display:flex;gap:8px}

/* surah header card */
.qCard{position:relative;isolation:isolate;overflow:hidden;text-align:center;color:#fff;border-radius:28px;padding:22px 62px 24px;
  background:radial-gradient(80% 70% at 100% 0%,rgba(243,215,122,.22),transparent 60%),radial-gradient(60% 60% at 0% 100%,rgba(76,199,154,.18),transparent 60%),linear-gradient(160deg,#0f6b54,#04201b 78%);
  box-shadow:0 18px 44px rgba(4,32,27,.18)}
.qCard::before,.qCard::after{content:"";position:absolute;z-index:-1;width:220px;height:220px;opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='white' stroke-width='1.2'%3E%3Crect x='16' y='16' width='48' height='48'/%3E%3Crect x='16' y='16' width='48' height='48' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Ccircle cx='40' cy='40' r='10'/%3E%3C/svg%3E") center/contain no-repeat}
.qCard::before{left:-70px;bottom:-80px}
.qCard::after{right:-60px;top:-70px}
.qCardNav{position:absolute;top:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);text-decoration:none;transition:background .15s}
.qCardNav:hover{background:rgba(255,255,255,.22)}
.qCardNav.prev{inset-inline-start:14px}
.qCardNav.next{inset-inline-end:14px}
.qCardNo{margin:8px 0 0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--goldLight)}
.qName{margin:4px 0 12px;min-height:1.7em;font-family:var(--qQuran);font-size:clamp(36px,9vw,52px);line-height:1.95;color:#fff}
.qCard h1{margin:0;font-size:clamp(22px,5vw,28px);font-weight:800;letter-spacing:-.02em;color:#fff}
.qMean{margin:2px 0 12px;color:rgba(255,255,255,.78);font-size:15px}
.qMeta{display:inline-flex;align-items:center;gap:10px;margin:0;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13px;font-weight:700}
.qMeta i{width:4px;height:4px;border-radius:50%;background:var(--goldLight)}
.qCardBtns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:18px -40px 0}
.qPlayBig,.qGhostBtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}
.qPlayBig{border:0;background:#fff;color:#04201b;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.qPlayBig .qi{width:18px;height:18px}
.qPlayBig:hover{transform:translateY(-1px)}
.qGhostBtn{border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06)}
.qGhostBtn .qi{width:18px;height:18px}
.qGhostBtn:hover{background:rgba(255,255,255,.14)}

/* continue reading */
.qResume{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:12px 16px;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:700;cursor:pointer;text-align:start}
.qResume b{color:var(--emerald)}
.qResume .qi{margin-inline-start:auto;color:var(--muted)}
.qResume[hidden]{display:none}

/* bismillah */
.qBism{margin:26px 0 6px;text-align:center;font-family:var(--qQuran);font-size:calc(var(--qArSize) * 1.02);line-height:2;color:var(--ink)}

/* ayah-end marker: an eight-pointed rosette with the Arabic-Indic number */
.qEnd{position:relative;isolation:isolate;display:inline-grid;place-items:center;width:2.4em;height:2.4em;margin:0 .08em;vertical-align:middle;font-family:Amiri,"Traditional Arabic",serif;font-size:.5em;font-weight:700;line-height:1;color:var(--emerald);white-space:nowrap;-webkit-user-select:none;user-select:none}
.qEnd::before{content:"";position:absolute;inset:0;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='7' y='7' width='26' height='26' rx='1.5'/%3E%3Crect x='7' y='7' width='26' height='26' rx='1.5' transform='rotate(45 20 20)'/%3E%3Ccircle cx='20' cy='20' r='11.6' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='7' y='7' width='26' height='26' rx='1.5'/%3E%3Crect x='7' y='7' width='26' height='26' rx='1.5' transform='rotate(45 20 20)'/%3E%3Ccircle cx='20' cy='20' r='11.6' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat}
.qEnd::after{content:"";position:absolute;inset:23%;z-index:-1;border-radius:50%;background:transparent;transition:background .2s}
.isBm .qEnd{color:#fff}
.isBm .qEnd::after{background:var(--gold)}

/* verse by verse */
.qBody{min-height:60vh}
.qBody.isVerse{margin-inline:-10px}
.qV{position:relative;padding:22px 10px 12px;border-radius:18px;content-visibility:auto;contain-intrinsic-size:auto 240px;transition:background .35s}
.qV+.qV::before{content:"";position:absolute;top:0;left:10px;right:10px;height:1px;background:var(--border)}
.qV.isPlaying{background:var(--qHi)}
.qV.isPlaying::before,.qV.isPlaying+.qV::before{opacity:0}
.qAr{margin:0 0 12px;font-family:var(--qQuran);font-size:var(--qArSize);line-height:2.15;text-align:right;color:var(--ink);overflow-wrap:break-word}
.qTr{margin:0 0 4px;font-size:var(--qTrSize);line-height:1.68;color:var(--text2);text-align:start}
.qVFoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.qRef{flex:none;padding:4px 10px;border-radius:999px;background:var(--mint);color:var(--emerald);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;direction:ltr}
.qActs{display:flex;gap:2px}
.qAct{width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s,color .15s}
.qAct .qi{width:20px;height:20px}
.qAct:hover{background:var(--track);color:var(--text)}
.qAct.on{color:var(--gold)}
.qAct.on .qi{fill:currentColor}
.qV.isPlaying .qAct[data-act=play]{color:var(--emerald)}

/* reading mode: one flowing page of Arabic */
.qFlow{padding:6px 2px 10px;font-family:var(--qQuran);font-size:var(--qArSize);line-height:2.35;text-align:justify;color:var(--ink);overflow-wrap:break-word}
.qFa{border-radius:10px;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .3s;-webkit-tap-highlight-color:transparent}
.qFa:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.qFa.isPlaying{background:var(--qHi)}
@media (hover:hover){.qFa:hover{background:var(--track)}.qFa.isPlaying:hover{background:var(--qHi)}}
.qFa.flash,.qV.flash{animation:qFlash 1.8s}
@keyframes qFlash{0%,35%{background:var(--qHi)}}

/* loading */
.qSkel{padding-top:14px}
.qSk{display:grid;gap:12px;padding:22px 0;border-bottom:1px solid var(--border)}
.qSk i{display:block;height:16px;border-radius:9px;background:linear-gradient(90deg,var(--skel),var(--skel2),var(--skel));background-size:200% 100%;animation:shimmer 1.2s infinite}
.qSk .l1,.qSk .l2{height:30px;margin-left:auto}
.qSk .l1{width:94%}
.qSk .l2{width:58%}
.qSk .t1{width:96%}
.qSk .t2{width:66%}
.qBody .libFail{margin-top:20px}

/* previous / next surah */
.qEndNav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.qNext{display:flex;align-items:center;gap:10px;min-width:0;padding:14px;border-radius:18px;border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s}
.qNext:hover{border-color:var(--emerald)}
.qNext span{min-width:0}
.qNext small{display:block;color:var(--muted);font-size:12px;font-weight:600}
.qNext b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qNext .qi{color:var(--emerald)}
.qNext.next{grid-column:2;justify-content:flex-end;text-align:end}

/* player bar */
.qPlayer{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navBg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(0,0,0,.07);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}
.qProgT{height:3px;background:var(--track)}
.qProgT i{display:block;height:100%;background:var(--emerald);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.qPlIn{display:flex;align-items:center;gap:4px;padding:7px 8px}
.qPlayer .qIcon{border:0;background:transparent;border-radius:50%}
.qPlayer .qIcon:hover{background:var(--track)}
.qPlInfo{flex:1;min-width:0;padding:4px 6px;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.qPlInfo:hover{background:var(--track)}
.qPlInfo b,.qPlInfo small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qPlInfo b{font-size:14.5px;font-weight:800}
.qPlInfo #qPlRef{color:var(--emerald);font-weight:800;font-variant-numeric:tabular-nums}
.qPlInfo small{color:var(--muted);font-size:12px;font-weight:600}
.qCtl{display:flex;align-items:center;gap:2px}
.qPP{position:relative;width:52px;height:52px;flex:none;border:0;border-radius:50%;background:var(--solid);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 6px 18px rgba(4,32,27,.25);transition:transform .15s}
.qPP:active{transform:scale(.94)}
.qPP .qi{width:24px;height:24px}
.qPlayer.isLoading .qPP::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2.5px solid transparent;border-top-color:var(--gold);animation:qSpin .8s linear infinite}
@keyframes qSpin{to{transform:rotate(360deg)}}
.qRep em{display:none;position:absolute;right:5px;top:5px;min-width:15px;height:15px;place-items:center;border-radius:999px;background:var(--emerald);color:#fff;font-size:9.5px;font-style:normal;font-weight:900;line-height:1}
.qPlayer .qRep[data-rep=ayah],.qPlayer .qRep[data-rep=surah]{color:var(--emerald);background:var(--mint)}
.qRep[data-rep=ayah] em{display:grid}
html[data-theme=dark] .qPP{color:#fff}
@media (min-width:760px){
  .qPlayer{left:50%;right:auto;bottom:16px;width:min(720px,100% - 32px);transform:translateX(-50%);border:1px solid var(--border);border-radius:22px;box-shadow:0 18px 50px rgba(4,32,27,.18);padding-bottom:0}
  .qPlIn{padding:8px 12px;gap:8px}
}
@media (max-width:359px){.qPlayer #qSetOpen2{display:none}}

/* settings, bookmarks and ayah menu: a bottom sheet on phones, a dialog on wider screens */
.qSheet{width:100%;max-width:560px;max-height:min(88vh,760px);margin:auto auto 0;padding:0;border:0;border-radius:24px 24px 0 0;background:var(--surface);color:var(--text);box-shadow:0 -20px 60px rgba(0,0,0,.25);overflow:auto;overscroll-behavior:contain}
.qSheet[open]{animation:qUp .28s cubic-bezier(.2,.8,.2,1)}
.qSheet::backdrop{background:rgba(2,23,18,.5)}
@keyframes qUp{from{transform:translateY(40px);opacity:.4}}
@media (min-width:700px){.qSheet{max-width:460px;margin:auto;border-radius:24px}}
.qShHead{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 14px 10px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
.qShHead::before{content:"";position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:9px;background:var(--line2)}
@media (min-width:700px){.qShHead::before{display:none}}
.qShHead b{font-size:17px}
.qShHead .qIcon{border:0;background:var(--track);border-radius:50%;width:38px;height:38px}
.qShHead .qIcon .qi{width:18px;height:18px}
.qShBody{padding:4px 20px calc(22px + env(safe-area-inset-bottom))}
.qShBody section{padding:16px 0;border-bottom:1px solid var(--border)}
.qShBody section:last-child{border-bottom:0}
.qShBody h3{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html[lang=ar] .qShBody h3,html[lang=ar] .qCardNo{letter-spacing:0;text-transform:none;font-size:14px}
.qHint{margin:8px 0 0;color:var(--muted);font-size:13px}
.qSeg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--track)}
.qSeg button{flex:1;min-height:42px;padding:8px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.qSeg button[aria-checked=true]{background:var(--surface);color:var(--text);box-shadow:0 2px 8px var(--shade)}
.qSize{display:flex;align-items:center;gap:10px}
.qSize input{flex:1;min-width:0;accent-color:var(--emerald)}
.qSize .qIcon{border-radius:50%}
.qA{font-family:Amiri,Georgia,serif;font-weight:700;font-size:21px;line-height:1}
.qA.sm{font-size:14px}
.qTrSize{margin-top:14px}
.qTrSize[hidden]{display:none}
.qSmall{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.qPreview{margin:12px 0 0;padding:4px 12px;border-radius:14px;background:var(--bg);font-family:var(--qQuran);font-size:var(--qArSize);line-height:2;text-align:center;color:var(--ink);overflow-wrap:break-word}
.qRecs{display:grid;gap:6px}
.qRecs button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:transparent;color:var(--text);font:inherit;font-size:15px;font-weight:600;text-align:start;cursor:pointer}
.qRecs button i{width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--line2);transition:border .15s}
.qRecs button[aria-checked=true]{border-color:var(--emerald);background:var(--mint)}
.qRecs button[aria-checked=true] i{border:6px solid var(--emerald)}
.qMenu{padding-top:6px}
.qMenu button{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 4px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);font:inherit;font-size:15.5px;font-weight:600;text-align:start;cursor:pointer}
.qMenu button:last-child{border-bottom:0}
.qMenu .qi{color:var(--emerald)}
.qBmList{list-style:none;margin:0;padding:0}
.qBmList li{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.qBmList li:last-child{border-bottom:0}
.qBmList a{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 2px;color:var(--text);text-decoration:none}
.qBmList b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qBmNo{flex:none;min-width:58px;padding:4px 10px;border-radius:999px;background:var(--mint);color:var(--emerald);font-size:13px;font-weight:800;text-align:center;direction:ltr}
.qBmList .qIcon{border:0;background:transparent;border-radius:50%;color:var(--muted)}
.qEmpty{margin:0;padding:18px 0;color:var(--muted)}

/* toast */
.qToast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:70;max-width:calc(100% - 32px);padding:10px 18px;border-radius:999px;background:#0b3b31;color:#fff;font-size:14px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity .2s,transform .2s}
.qToast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:760px){.qToast{bottom:110px}}

/* Arabic interface: arrows point the other way; Qur'an and translations keep their own direction */
[dir=rtl] .qBack .qi,[dir=rtl] .qCardNav .qi,[dir=rtl] .qNext .qi,[dir=rtl] .qResume .qi{transform:scaleX(-1)}
[dir=rtl] .qBack{margin-inline-start:-6px}
[dir=rtl] .qTr{text-align:left}
[dir=rtl] .qPlInfo{text-align:right}
[dir=rtl] .qPlayer .qPlInfo{direction:rtl}

@media (max-width:420px){
  .qCard{padding:20px 54px 22px;border-radius:24px}
  .qCardNav{top:14px;width:36px;height:36px}
  .qCardNav.prev{inset-inline-start:10px}
  .qCardNav.next{inset-inline-end:10px}
  .qEndNav{gap:8px}
  .qNext{padding:12px 10px}
}
@media (prefers-reduced-motion:reduce){
  .qSheet[open],.qFa.flash,.qV.flash{animation:none}
  .qProgT i,.qV,.qFa{transition:none}
}