/* ظلّ — the Quran page. Shares style.css; only what the mushaf needs lives here. */
/* the juz names, Ahmed Elgharib's fonts used unchanged (his terms: credit, no renaming or editing) */
@font-face { font-family: "Ajzaa Hafs"; font-display: block; src: url("../fonts/ajzaa/Elgharib-Ajzaa ALQuran Naskh.ttf") format("truetype"); }
@font-face { font-family: "Ajzaa Warsh"; font-display: block; src: url("../fonts/ajzaa/Elgharib-QCF4 Ajzaa-Warsh.ttf") format("truetype"); }
@font-face { font-family: "Hafs"; font-display: block; src: url(../fonts/kfgqpc-hafs.woff2) format("woff2"); }

body.quran { background:
  radial-gradient(40vw 40vw at 92% 14%, color-mix(in oklab, var(--gold) 15%, transparent), transparent 70%),
  radial-gradient(36vw 36vw at 6% 86%, rgb(90 110 200 / .13), transparent 70%),
  var(--bg); background-attachment: fixed; }
.quran main { min-height: 100vh; padding: clamp(96px, 14vh, 130px) 0 clamp(60px, 10vh, 100px); }
.quran main:focus { outline: none; }

/* ---------- index ---------- */
.q-hero { width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; text-align: center; }
.q-hero h1 { margin: 0; color: var(--ink); }
.q-hero h1 .t { height: clamp(56px, 9vw, 104px); }
.q-hero > p { margin: 14px auto 0; max-width: 44ch; color: var(--muted); font-size: clamp(1rem, .95rem + .3vw, 1.12rem); }

.q-cont { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: clamp(26px, 4vh, 36px) auto 0; max-width: 520px;
  padding: 16px 18px; border-radius: var(--r-lg); text-align: start;
  background: linear-gradient(160deg, rgb(var(--hi) / .06), rgb(var(--hi) / .015) 60%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px color-mix(in oklab, var(--gold) 35%, transparent);
  transition: box-shadow .35s, transform .35s var(--ease); }
.q-cont:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px var(--gold); }
.q-cont-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.q-cont-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.q-cont-t { display: grid; gap: 2px; min-width: 0; }
.q-cont-t small { font-size: .8rem; color: var(--gold); }
.q-cont-t b { font: 500 1.15rem/1.4 var(--ui); color: var(--ink); }
.q-cont-t span { font-size: .84rem; color: var(--faint); }
.q-go { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .3s, color .3s; }
.q-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.q-cont:hover .q-go, .q-jump:hover .q-go { background: var(--gold); color: var(--gold-ink); box-shadow: none; }

.q-marks { margin: 22px auto 0; max-width: 620px; }
.q-marks h3 { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: .86rem; font-weight: 500; color: var(--gold); }
.q-marks h3 svg { width: 15px; height: 15px; fill: currentColor; }
.q-marks > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.q-index { width: min(100% - 2 * var(--gutter), 1080px); margin: clamp(46px, 8vh, 72px) auto 0; }
.q-index-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.q-count { margin: 0; font-size: .88rem; color: var(--faint); }
.q-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.q-grid .wide { grid-column: 1 / -1; }
.q-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md);
  background: linear-gradient(160deg, rgb(var(--hi) / .045), rgb(var(--hi) / .01) 60%); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .08);
  transition: box-shadow .3s, background .3s; }
.q-item:hover { background: linear-gradient(160deg, rgb(var(--hi) / .07), rgb(var(--hi) / .02) 60%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent); }
.q-item-t { display: grid; gap: 1px; min-width: 0; }
.q-item-t b { font: 500 1.05rem/1.5 var(--ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-item-t small { font-size: .8rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-pg { font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.q-num { position: relative; width: 40px; height: 40px; display: grid; place-items: center; flex: none; color: var(--gold); }
.q-num svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .7; transition: transform .5s var(--ease), opacity .3s; }
.q-num b { position: relative; font: 500 .82rem/1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.q-item:hover .q-num svg { transform: rotate(45deg); opacity: 1; }
.q-empty { padding: 30px; text-align: center; color: var(--faint); }

/* ---------- the page ---------- */
.q-read { --q-step: 0; width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; }
.q-bar { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 10px; font-size: .92rem; }
.q-bar-s { font-weight: 500; color: var(--gold-2); }
.q-bar-j { color: var(--faint); }
.q-page { position: relative; padding: clamp(22px, 4vw, 44px) clamp(18px, 4.4vw, 48px) clamp(16px, 2.5vw, 26px); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -36px rgb(0 0 0 / .55); }
/* a fine double rule inside the page, as round a printed mushaf page */
.q-page::before { content: ""; position: absolute; inset: 9px; border-radius: calc(var(--r-xl) - 9px); pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 26%, transparent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in oklab, var(--gold) 12%, transparent); }
.q-page-in { position: relative; font-family: "Hafs", var(--text); color: var(--ink);
  font-size: calc(clamp(1.32rem, 1.05rem + 1.2vw, 1.85rem) * (1 + var(--q-step) * .1)); line-height: 2.15; }
.q-text { margin: 0; text-align: justify; text-align-last: center; word-spacing: .04em; }
.q-page:not(.opening) .q-text { text-align-last: auto; }
.q-v { transition: color .3s; }
.q-rub { font-style: normal; color: var(--gold); }
.q-v.sj { text-decoration: underline 1px color-mix(in oklab, var(--gold) 60%, transparent); text-underline-offset: .45em; }

/* the head of a surah: its name in a long frame with shaped ends, and the basmala under it */
.q-sura { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: .4em 0 .2em; padding: 8px 14px; border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 45%, transparent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in oklab, var(--gold) 18%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold) 9%, transparent), transparent); }
.q-sura:first-child { margin-top: 0; }
.q-sura h2 { margin: 0; color: var(--gold-2); line-height: 0; }
.q-sura h2 .t { height: clamp(30px, 4.2vw, 42px); }
.q-sura-end { height: 10px; background:
  radial-gradient(circle at center, var(--gold) 0 2.2px, transparent 2.6px) center / 10px 10px no-repeat,
  linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat; opacity: .5; }
.q-basmala { margin: .1em 0 .1em; text-align: center; }
.q-page-no { display: flex; justify-content: center; margin-top: 14px; }
.q-page-no span { min-width: 38px; height: 26px; padding-inline: 8px; display: grid; place-items: center; border-radius: 8px; font: 500 .8rem/1 var(--ui);
  color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); font-variant-numeric: tabular-nums; }

.q-tools { display: flex; justify-content: center; gap: 6px; margin: 16px 0 0; }
.q-tools .icon-btn { width: auto; min-width: 40px; padding-inline: 10px; border-radius: 10px; font: 500 .9rem/1 var(--ui); box-shadow: inset 0 0 0 1px var(--line); }
.q-tools .icon-btn.on { color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold); }
.q-tools .icon-btn.on svg { fill: currentColor; }

/* the page dock */
.q-dock { gap: 4px; }
.q-dock button { gap: 4px; }
.q-dock button[disabled] { opacity: .35; pointer-events: none; }
.q-where { display: flex; align-items: center; gap: 6px; padding-inline: 8px; font-size: .86rem; color: var(--faint); }
.q-where input { width: 58px; height: 34px; border-radius: 9px; text-align: center; font: 500 .95rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .05);
  border: 0; box-shadow: inset 0 0 0 1px var(--line); -moz-appearance: textfield; appearance: textfield; }
.q-where input::-webkit-inner-spin-button, .q-where input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.q-where input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold); }
@media (max-width: 520px) { .q-dock button span { display: none; } .q-dock button { padding-inline: 12px; } }

/* turning pages: the next page slides in from the left, the previous from the right */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; }
[data-flip="fwd"]::view-transition-old(root) { animation: qOutR .38s cubic-bezier(.4, 0, .2, 1) both; }
[data-flip="fwd"]::view-transition-new(root) { animation: qInL .38s cubic-bezier(.2, 0, 0, 1) both; }
[data-flip="back"]::view-transition-old(root) { animation: qOutL .38s cubic-bezier(.4, 0, .2, 1) both; }
[data-flip="back"]::view-transition-new(root) { animation: qInR .38s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes qOutR { to { opacity: 0; transform: translateX(28px); } }
@keyframes qInL { from { opacity: 0; transform: translateX(-28px); } }
@keyframes qOutL { to { opacity: 0; transform: translateX(-28px); } }
@keyframes qInR { from { opacity: 0; transform: translateX(28px); } }

/* light themes: dark edges instead of light ones */
:root[data-tone="light"] .q-page, :root[data-tone="light"] .q-cont { box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 0 0 1px rgb(0 0 0 / .09), 0 24px 50px -36px rgb(30 40 35 / .35); }
:root[data-tone="light"] .q-item { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }

/* the way back to the adhkar: a little ring of beads, the word hides on phones */
.q-adhkar { flex-direction: row; }
.q-adhkar svg { width: 18px; height: 18px; stroke-width: 3.2; }
.q-where small { white-space: nowrap; }

/* the calligraphic surah names are taller and busier than a plain title: a little more room */
.q-sura h2 .t.q-name { height: clamp(50px, 7.4vw, 72px); margin-block: -6px; }
.q-sura { padding-block: 6px; }

/* ---------- the printed page: fifteen lines in the page's own QCF4 font ---------- */
.q-lines { --qs: 30px; font-size: var(--qs); color: var(--ink); transition: opacity .3s; }
.q-lines.loading { opacity: 0; }
.ql { height: calc(var(--qs) * 1.68); display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.ql > span { display: inline-block; line-height: 1; }
/* once measured, every full line runs from edge to edge as in the printed mushaf */
.q-lines.fit .ql > span { display: block; width: 100%; text-align: justify; text-align-last: justify; }
.q-lines.fit .ql.short > span, .opening .q-lines.fit .ql > span { text-align: center; text-align-last: center; }
.q-head .q-sura { width: 100%; margin: 0; padding-block: 0; height: calc(var(--qs) * 1.42); }
.q-head .q-sura h2 .t.q-name { height: calc(var(--qs) * 1.5); margin-block: 0; }
.q-basmala > span { font-family: "Hafs", var(--text); font-size: .82em; }
.q-fail { margin: 40px 0; text-align: center; font: 1rem/1.8 var(--ui); color: var(--muted); }
.opening .q-lines { padding-block: 4%; }
.q-lines.fit .q-basmala > span { display: inline-block; width: auto; text-align: center; text-align-last: center; }
.q-head .q-sura { height: calc(var(--qs) * 1.48); overflow: visible; }
.q-head .q-sura h2 .t.q-name { height: calc(var(--qs) * 2.1); margin-block: calc(var(--qs) * -.32); }
.q-basmala > span { font-size: 1.18em; }

/* ---------- the surah band ---------- */
.q-head .q-sura { position: relative; display: block; width: 100%; height: calc(var(--qs) * 1.5); margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.q-band { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.q-band path { vector-effect: non-scaling-stroke; }
.q-band .b-out { fill: color-mix(in oklab, var(--gold) 6%, transparent); stroke: color-mix(in oklab, var(--gold) 55%, transparent); stroke-width: 1.2; }
.q-band .b-in { fill: none; stroke: color-mix(in oklab, var(--gold) 28%, transparent); stroke-width: 1; }
.q-band .b-line { stroke: color-mix(in oklab, var(--gold) 30%, transparent); stroke-width: 1; }
.q-band .b-lz { fill: var(--bg); stroke: color-mix(in oklab, var(--gold) 55%, transparent); stroke-width: 1; }
.q-band .b-lz.on { fill: color-mix(in oklab, var(--gold) 60%, transparent); stroke: none; }
.q-band .b-tip { fill: color-mix(in oklab, var(--gold) 70%, transparent); }
.q-band .b-cart { fill: color-mix(in oklab, var(--gold) 10%, var(--bg)); stroke: color-mix(in oklab, var(--gold) 65%, transparent); stroke-width: 1.2; }
.q-band .b-cart-in { fill: none; stroke: color-mix(in oklab, var(--gold) 25%, transparent); stroke-width: 1; }
/* the name sits in the cartouche, a little larger than the band so the calligraphy breathes */
.q-head .q-sura h2 { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--gold-2); line-height: 0; }
.q-head .q-sura h2 .t.q-name { height: 118%; margin: 0; transform: translateY(-4%); }
.q-head .q-sura { height: calc(var(--qs) * 1.6); }
.q-head .q-sura h2 .t.q-name { height: 150%; transform: translateY(-6%); }
.q-head .q-sura h2 .t.q-name { height: 138%; transform: translateY(9%); }
.q-head .q-sura h2 .t.q-name { height: 112%; transform: translateY(4%); }

/* ---------- verses found by search ---------- */
.q-verses { margin-top: 28px; }
.q-verses-h { display: flex; align-items: baseline; gap: 10px; margin: 0 4px 12px; font: 500 1rem/1.4 var(--ui); color: var(--gold-2); }
.q-verses-h small { font-size: .82rem; font-weight: 400; color: var(--faint); }
.q-verses ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.q-hit { display: grid; gap: 6px; padding: 14px 18px; border-radius: var(--r-md);
  background: linear-gradient(160deg, rgb(var(--hi) / .045), rgb(var(--hi) / .01) 60%); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .08); transition: box-shadow .3s; }
.q-hit:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent); }
.q-hit-ref { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--gold); }
.q-hit-ref small { color: var(--faint); }
.q-hit-t { margin: 0; font: 1.35rem/2 "Hafs", var(--text); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.q-none { margin: 30px 0; }
/* the opening pages: smaller words, centred in a little more space, the band kept to the text's width */
.opening .q-lines { padding-block: 9% 7%; }
.opening .q-head { width: 86%; margin-inline: auto; }

/* ---------- touching a verse ---------- */
.q-lines .w { font-weight: inherit; cursor: pointer; border-radius: .18em; transition: background .25s, color .25s; -webkit-tap-highlight-color: transparent; }
.q-lines .w:hover { color: var(--gold-2); }
.q-lines .w.sel { background: color-mix(in oklab, var(--gold) 16%, transparent); color: var(--gold-2); }
.q-lines .w.play { background: color-mix(in oklab, var(--gold) 22%, transparent); color: var(--gold-2); }
.q-lines .w.found { animation: qFound 2.6s ease-out; }
@keyframes qFound { 0%, 40% { background: color-mix(in oklab, var(--gold) 34%, transparent); } 100% { background: transparent; } }
.q-hint { margin: 10px 0 0; text-align: center; font-size: .8rem; color: var(--faint); }

/* the verse panel: rises from the bottom, glass like the cards */
.q-ayah { position: fixed; z-index: 35; inset-inline: 0; bottom: 0; display: grid; justify-items: center; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.q-ayah[hidden] { display: none; }
.q-ayah-in { pointer-events: auto; width: min(100%, 640px); max-height: min(56vh, 520px); overflow: auto; padding: 16px 20px 20px; border-radius: 18px;
  background: rgb(var(--glass) / .86); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px var(--line-2), 0 -20px 50px -24px rgb(0 0 0 / .6);
  animation: qUp .38s var(--ease); }
@keyframes qUp { from { transform: translateY(24px); opacity: 0; } }
.q-ayah header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.q-ayah h2 { margin: 0; font: 500 1.02rem/1.5 var(--ui); color: var(--gold-2); }
.q-ayah-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.q-act { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 12px; border-radius: 10px; font-size: .86rem; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s, box-shadow .25s, color .25s; }
.q-act:hover { background: rgb(var(--hi) / .05); color: var(--gold-2); }
.q-act.on { color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold); }
.q-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.q-act svg .f, .q-play svg .f { fill: currentColor; stroke: none; }
.q-act.on svg { fill: currentColor; }
.q-ayah h3 { margin: 0 0 6px; font: 500 .82rem/1.4 var(--ui); color: var(--gold); }
.q-tafsir p { margin: 0; font: 1.12rem/2.05 var(--prose); color: var(--ink); }
.q-tafsir b { font-weight: 700; color: var(--gold-2); }
.q-tafsir .q-group { margin-bottom: 4px; font: .8rem/1.5 var(--ui); color: var(--faint); }
.q-wait { color: var(--faint) !important; font-size: .95rem !important; }
.ayah-open .q-dock { opacity: 0; pointer-events: none; }

/* the play button in the dock */
.q-play { width: 42px; padding: 0 !important; justify-content: center; border-radius: 12px !important; color: var(--gold-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 45%, transparent); }
.q-play svg { width: 18px; height: 18px; }
.q-play.on { background: var(--gold); color: var(--gold-ink); box-shadow: none; }

/* ---------- the khatma ---------- */
.q-khatma { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 14px auto 0; max-width: 620px; padding: 18px 20px; border-radius: var(--r-lg); text-align: start;
  background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px rgb(var(--hi) / .09); }
.q-khatma.none { display: block; text-align: center; }
.q-khatma h2 { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 500 1.08rem/1.5 var(--ui); color: var(--ink); }
.q-khatma.none h2 { justify-content: center; }
.q-khatma h2 small { font-size: .8rem; font-weight: 400; color: var(--faint); }
.q-khatma p { margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.q-k-days { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.q-k-ring { position: relative; width: 70px; height: 70px; display: grid; place-items: center; }
.q-k-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.q-k-ring circle { fill: none; stroke-width: 3; }
.q-k-ring .bg { stroke: var(--line-2); }
.q-k-ring .fg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.q-k-ring b { font: 600 1.05rem/1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.q-k-ring b small { font-size: .7rem; font-weight: 400; color: var(--faint); }
.q-k-bar { height: 4px; margin-top: 10px; border-radius: 4px; background: rgb(var(--hi) / .08); overflow: hidden; }
.q-k-bar i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.q-khatma .q-k-all { font-size: .8rem; color: var(--faint); }
.q-k-go { display: grid; gap: 6px; justify-items: center; }
.q-k-go .btn { height: 40px; padding-inline: 16px; font-size: .9rem; }
.q-k-stop { font-size: .76rem; color: var(--faint); }
.q-k-stop:hover { color: var(--ink); }
.q-k-done { color: var(--gold-2) !important; margin: 8px 0 12px !important; }
@media (max-width: 560px) {
  .q-khatma:not(.none) { grid-template-columns: auto 1fr; }
  .q-k-go { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
}
/* the font's boxes are very tall: tint only a band through the middle of the words */
.q-lines .w.sel, .q-lines .w.play { --t: color-mix(in oklab, var(--gold) 20%, transparent);
  background: linear-gradient(transparent 22%, var(--t) 22%, var(--t) 80%, transparent 80%); border-radius: 0; }
.q-lines .w.play { --t: color-mix(in oklab, var(--gold) 26%, transparent); }
@keyframes qFound { 0%, 40% { background: linear-gradient(transparent 22%, color-mix(in oklab, var(--gold) 34%, transparent) 22% 80%, transparent 80%); } 100% { background: transparent; } }

/* =================== the reading page, refined =================== */
.q-page { padding-top: clamp(14px, 2.4vw, 22px); }
/* the margin above the text, as in the printed mushaf: surah, hizb, juz */
.q-top { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  margin: 0 0 clamp(10px, 1.6vw, 16px); padding: 0 0 9px; font: 500 .82rem/1.4 var(--ui); color: var(--muted);
  border-bottom: 1px solid color-mix(in oklab, var(--gold) 18%, transparent); }
.q-top-s { color: var(--gold-2); }
.q-top-h { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-weight: 400; }
.q-top-h i { font-style: normal; color: var(--gold); font-size: 1.05em; }
.q-top-j { text-align: end; padding-inline-end: 34px; }
/* a ribbon hangs from the top corner of the page: outlined, and filled once the page is marked */
.q-ribbon { position: absolute; top: -1px; inset-inline-end: clamp(14px, 3vw, 30px); z-index: 2; width: 22px; height: 38px; padding: 0; color: color-mix(in oklab, var(--gold) 70%, transparent); transition: transform .35s var(--ease), color .3s; transform-origin: top; }
.q-ribbon svg { width: 100%; height: 100%; display: block; fill: color-mix(in oklab, var(--gold) 8%, transparent); stroke: currentColor; stroke-width: 1.2; }
.q-ribbon:hover { transform: scaleY(1.08); color: var(--gold-2); }
.q-ribbon.on { color: var(--gold); }
.q-ribbon.on svg { fill: var(--gold); stroke: none; }
/* the page number in an octagon between two fine rules */
.q-page-no { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: clamp(10px, 1.6vw, 16px); }
.q-page-no > i { height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold) 35%, transparent)); }
.q-page-no > i:last-child { transform: scaleX(-1); }
.q-page-no span { position: relative; width: 38px; height: 38px; min-width: 0; padding: 0; display: grid; place-items: center; box-shadow: none; border-radius: 0; }
.q-page-no span svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in oklab, var(--gold) 55%, transparent); stroke-width: 1; }
.q-page-no span svg path + path { stroke: color-mix(in oklab, var(--gold) 25%, transparent); }
.q-page-no b { position: relative; font: 500 .78rem/1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.q-hint { margin-top: 14px; opacity: .8; }

/* =================== the page dock: arrows at the ends, where you are in the middle =================== */
.q-dock { position: fixed; z-index: 25; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(100% - 24px, 420px); display: grid; grid-template-columns: 44px 1fr 44px 44px; align-items: center; gap: 6px; padding: 6px;
  border-radius: 16px; background: rgb(var(--glass) / .8); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px var(--line-2), 0 16px 34px -18px rgb(0 0 0 / .7);
  transition: opacity .3s, transform .4s var(--ease); }
.q-dock button { height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); transition: background .2s, color .2s; }
.q-dock button:hover { background: rgb(var(--hi) / .06); color: var(--gold-2); }
.q-dock button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.q-dock button[disabled] { opacity: .3; pointer-events: none; }
.q-dock .q-where { display: grid; gap: 5px; padding: 2px 6px; min-width: 0; }
.q-where label { display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: .78rem; color: var(--faint); white-space: nowrap; }
.q-where input { width: 3.4em; height: 26px; padding: 0; border: 0; border-radius: 7px; text-align: center; font: 600 1rem var(--ui); color: var(--ink);
  background: transparent; box-shadow: none; transition: background .2s, box-shadow .2s; }
.q-where input:hover { background: rgb(var(--hi) / .05); }
.q-where input:focus { outline: none; background: rgb(var(--hi) / .06); box-shadow: inset 0 0 0 1px var(--gold); }
/* a thin line of the whole mushaf, with the juz marked on it */
.q-track { position: relative; height: 3px; border-radius: 3px; background: rgb(var(--hi) / .09); }
.q-track i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--gold); }
.q-track b { position: absolute; top: -1px; width: 1px; height: 5px; background: rgb(var(--hi) / .22); }
.q-dock .q-play { width: 44px; border-radius: 12px !important; color: var(--gold-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 45%, transparent); }
.q-dock .q-play svg { width: 18px; height: 18px; }
.q-dock .q-play.on { background: var(--gold); color: var(--gold-ink); box-shadow: none; }
.ayah-open .q-dock { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }

/* =================== the verse panel =================== */
.q-ayah-in { width: min(100%, 560px); padding: 10px 18px 20px; border-radius: 20px; animation: qUp .42s cubic-bezier(.2, .9, .3, 1); }
.q-ayah.closing .q-ayah-in { animation: qDown .24s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes qUp { from { transform: translateY(32px) scale(.98); opacity: 0; } }
@keyframes qDown { to { transform: translateY(28px); opacity: 0; } }
.q-grip { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: rgb(var(--hi) / .18); }
.q-ayah header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.q-ayah-no { position: relative; width: 46px; height: 46px; display: grid; place-items: center; color: var(--gold); }
.q-ayah-no svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: color-mix(in oklab, var(--gold) 8%, transparent); stroke: currentColor; stroke-width: 1.1; }
.q-ayah-no svg path + path { fill: none; stroke-opacity: .4; }
.q-ayah-no b { position: relative; font: 600 .95rem/1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.q-ayah h2 { display: grid; gap: 2px; margin: 0; font: 600 1.08rem/1.35 var(--ui); color: var(--gold-2); }
.q-ayah h2 small { font-size: .78rem; font-weight: 400; color: var(--faint); }
.q-x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); transition: background .2s, color .2s; }
.q-x:hover { background: rgb(var(--hi) / .07); color: var(--ink); }
.q-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* the three things you can do, as one segmented row */
.q-ayah-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 14px 0 16px; padding: 3px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.q-act { justify-content: center; height: 40px; border-radius: 9px; box-shadow: none; position: relative; }
.q-act + .q-act::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 1px; background: var(--line-2); }
.q-act:hover { background: rgb(var(--hi) / .06); }
.q-act.on { box-shadow: none; background: color-mix(in oklab, var(--gold) 14%, transparent); }
/* the tafsir, set off by a fine rule on its side */
.q-tafsir-box h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 500 .8rem/1.4 var(--ui); color: var(--gold); }
.q-tafsir-box h3 i { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--gold) 35%, transparent), transparent); }
.q-tafsir-box h3 i:first-child { flex: 0 0 14px; }
.q-tafsir { padding-inline-start: 14px; border-inline-start: 2px solid color-mix(in oklab, var(--gold) 30%, transparent); }
.q-tafsir p { font-size: 1.1rem; line-height: 2.05; }
@media (min-width: 900px) { .q-grip { display: none; } .q-ayah-in { padding-top: 18px; } }
/* the chosen verse: its words take the theme colour over the faintest tint */
.q-lines .w.sel, .q-lines .w.play { --t: color-mix(in oklab, var(--gold) 9%, transparent); color: var(--gold); }
.q-lines .w.play { --t: color-mix(in oklab, var(--gold) 13%, transparent); }

/* =================== the verse window, in the middle of the screen =================== */
.q-ayah { inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); pointer-events: auto; }
.q-ayah-bg { position: absolute; inset: 0; background: rgb(0 0 0 / .38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: qFade .3s ease both; }
:root[data-tone="light"] .q-ayah-bg { background: rgb(40 35 25 / .22); }
.q-ayah-in { position: relative; width: min(100%, 540px); max-height: min(86vh, 760px); display: flex; flex-direction: column; overflow: hidden;
  padding: 18px 20px 0; border-radius: 22px; background: rgb(var(--glass) / .92);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px var(--line-2), 0 40px 90px -30px rgb(0 0 0 / .75);
  animation: qPop .34s cubic-bezier(.2, .9, .3, 1.05) both; }
.q-ayah.closing .q-ayah-in { animation: qPopOut .2s cubic-bezier(.4, 0, 1, 1) forwards; }
.q-ayah.closing .q-ayah-bg { animation: qFadeOut .22s ease forwards; }
@keyframes qPop { from { transform: translateY(10px) scale(.96); opacity: 0; } }
@keyframes qPopOut { to { transform: scale(.97); opacity: 0; } }
@keyframes qFade { from { opacity: 0; } }
@keyframes qFadeOut { to { opacity: 0; } }
.q-grip { display: none; }
.q-ayah header { flex: none; }
/* the verse itself, set in the Uthmani text inside a fine frame */
.q-ayah-text { flex: none; margin: 16px 0 0; max-height: 30vh; overflow: auto; padding: 14px 16px; border-radius: 14px; text-align: center;
  font: clamp(1.3rem, 1.15rem + .7vw, 1.6rem)/2.1 "Hafs", var(--text); color: var(--ink);
  background: color-mix(in oklab, var(--gold) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 22%, transparent); }
.q-ayah-text.wait { min-height: 3.4em; }
.q-ayah-acts { flex: none; margin: 14px 0 0; }
/* only the tafsir scrolls, so the verse and the buttons stay in place */
.q-tafsir-box { flex: 1; min-height: 0; overflow: auto; margin: 0 -20px; padding: 16px 20px 22px; overscroll-behavior: contain; }
.q-tafsir-box::-webkit-scrollbar { width: 6px; }
.q-tafsir-box::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
@media (max-width: 520px) {
  .q-ayah { padding-inline: 12px; }
  .q-ayah-in { padding: 14px 16px 0; border-radius: 18px; max-height: 88vh; }
  .q-tafsir-box { margin: 0 -16px; padding: 14px 16px 18px; }
  .q-ayah-text { max-height: 26vh; }
}
@media (prefers-reduced-motion: reduce) { .q-ayah-in, .q-ayah-bg { animation: none; } }
.q-ayah-text, .q-tafsir-box { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.q-ayah-text::-webkit-scrollbar { width: 5px; } .q-ayah-text::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
.q-ayah-text::-webkit-scrollbar-track, .q-tafsir-box::-webkit-scrollbar-track { background: transparent; }

/* =================================================================================================
   THE VERSE WINDOW, dressed: a lit medallion, the verse in a framed panel with lozenge corners,
   four actions, and the tafsirs under sliding tabs. Each part rises in turn as the window opens.
   ================================================================================================= */
.q-ayah-in { width: min(100%, 580px); padding: 20px 22px 0; border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in oklab, rgb(var(--glass)) 92%, var(--gold) 8%), rgb(var(--glass) / .95) 38%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px color-mix(in oklab, var(--gold) 22%, transparent), 0 50px 100px -40px rgb(0 0 0 / .8); }
/* a fine inner rule, like the page's own frame */
.q-ayah-in::before { content: ""; position: absolute; inset: 7px; border-radius: 18px; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 12%, transparent); }
.q-ayah-glow { position: absolute; inset: -40% -20% auto; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--gold) 22%, transparent), transparent 70%); opacity: .55; animation: qGlow 6s ease-in-out infinite alternate; }
@keyframes qGlow { to { opacity: .3; transform: translateY(6%) scale(1.04); } }
.q-in { position: relative; animation: qRise .5s cubic-bezier(.2, .9, .3, 1) both; }
.q-ayah-in > .q-in:nth-of-type(1) { animation-delay: .04s; }
.q-ayah-verse.q-in { animation-delay: .1s; }
.q-ayah-acts.q-in { animation-delay: .16s; }
.q-tf-tabs.q-in { animation-delay: .21s; }
.q-tafsir-box.q-in { animation-delay: .26s; }
@keyframes qRise { from { opacity: 0; transform: translateY(10px); } }
/* the medallion turns slowly once, and glows */
.q-ayah-no { width: 52px; height: 52px; filter: drop-shadow(0 0 12px color-mix(in oklab, var(--gold) 30%, transparent)); }
.q-ayah-no svg { animation: qTurn 1.1s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes qTurn { from { transform: rotate(-45deg) scale(.7); opacity: 0; } }
.q-ayah-no b { font-size: 1.02rem; }
.q-ayah h2 { font-size: 1.14rem; }
/* the verse panel */
.q-ayah-verse { flex: none; position: relative; margin: 16px 0 0; padding: 18px 20px; border-radius: 16px;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in oklab, var(--gold) 11%, transparent), color-mix(in oklab, var(--gold) 4%, transparent) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 28%, transparent), inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in oklab, var(--gold) 10%, transparent); }
.q-ayah-verse .c { position: absolute; width: 9px; height: 9px; background: color-mix(in oklab, var(--gold) 70%, transparent); transform: rotate(45deg); }
.q-ayah-verse .c1 { top: -4px; inset-inline-start: 18px; } .q-ayah-verse .c2 { top: -4px; inset-inline-end: 18px; }
.q-ayah-verse .c3 { bottom: -4px; inset-inline-start: 18px; } .q-ayah-verse .c4 { bottom: -4px; inset-inline-end: 18px; }
.q-ayah-text { margin: 0; padding: 0; max-height: 28vh; background: none; box-shadow: none; border-radius: 0;
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); line-height: 2.15; color: var(--ink); text-shadow: 0 0 22px color-mix(in oklab, var(--gold) 18%, transparent); }
/* four actions, segmented */
.q-ayah-acts { grid-template-columns: repeat(4, 1fr); margin: 16px 0 0; }
.q-act { flex-direction: column; gap: 3px; height: 54px; font-size: .78rem; }
.q-act svg { width: 18px; height: 18px; }
/* the tafsir tabs, with a sliding thumb */
.q-tf-tabs { position: relative; flex: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 0 0; padding-bottom: 8px; border-bottom: 1px solid color-mix(in oklab, var(--gold) 16%, transparent); }
.q-tf-tabs button { position: relative; z-index: 1; height: 34px; border-radius: 9px; font: 500 .84rem/1 var(--ui); color: var(--muted); transition: color .3s; }
.q-tf-tabs button[aria-selected="true"] { color: var(--gold-ink); }
.q-tf-tabs button:hover:not([aria-selected="true"]) { color: var(--gold-2); }
.q-tf-thumb { position: absolute; top: 0; height: 34px; border-radius: 9px; background: var(--gold); transition: inset-inline-start .45s cubic-bezier(.3, 1.3, .5, 1), width .45s; }
.q-tafsir { transition: opacity .25s; }
.q-tafsir.fade { opacity: .25; }
.q-tafsir p + p { margin-top: .6em; }
.q-tf-src { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed color-mix(in oklab, var(--gold) 18%, transparent); font: .74rem/1.6 var(--ui); color: var(--faint); }
.q-tafsir-box h3 { display: none; }
@media (max-width: 520px) { .q-tf-tabs button { font-size: .76rem; } .q-act { height: 50px; } }

/* =================================================================================================
   THE STAGE: the page in the middle, panels either side on wide screens
   ================================================================================================= */
.q-read { width: min(100% - 2 * var(--gutter), 760px); }
.q-stage { position: relative; }
.q-side { display: none; }
@media (min-width: 1180px) {
  .q-read { width: min(100% - 2 * var(--gutter), 1240px); }
  .q-stage { display: grid; grid-template-columns: 220px minmax(0, 760px) 220px; justify-content: center; gap: 34px; align-items: start; }
  .q-stage > .q-page { grid-column: 2; grid-row: 1; }
  .q-side { display: grid; gap: 14px; position: sticky; top: 100px; grid-row: 1; animation: qRise .7s .15s cubic-bezier(.2, .9, .3, 1) both; }
  .q-side-r { grid-column: 1; }
  .q-side-l { grid-column: 3; }
  .q-riwaya.mini { display: none; }
}
.q-side h3 { margin: 6px 4px 0; font: 500 .74rem/1.4 var(--ui); color: var(--gold); letter-spacing: .02em; }
.q-side > div, .q-side > a, .q-side > button, .q-sura-card { border-radius: 16px; }
/* the narration switch: two cards (big), a pill (mini, above the page), or a pair under the index title */
.q-riwaya { display: grid; gap: 8px; }
.q-riwaya button { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; text-align: start;
  background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .09); transition: box-shadow .3s, background .3s, transform .3s var(--ease); }
.q-riwaya button:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 50%, transparent); }
.q-riwaya b { grid-column: 2; font: 600 .95rem/1.4 var(--ui); color: var(--ink); }
.q-riwaya small { grid-column: 2; font-size: .72rem; color: var(--faint); }
.q-rw-dot { grid-row: 1 / 3; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .3s; position: relative; }
.q-riwaya button[aria-checked="true"] { background: linear-gradient(160deg, color-mix(in oklab, var(--gold) 16%, transparent), color-mix(in oklab, var(--gold) 4%, transparent)); box-shadow: inset 0 0 0 1px var(--gold); }
.q-riwaya button[aria-checked="true"] .q-rw-dot { box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 0 0 4px rgb(var(--glass)), inset 0 0 0 9px var(--gold); }
.q-riwaya button[aria-checked="true"] b { color: var(--gold-2); }
.q-riwaya.mini, .q-riwaya.hero { grid-template-columns: 1fr 1fr; margin: 0 auto 14px; max-width: 520px; }
.q-riwaya.hero { margin: 20px auto 0; }
.q-riwaya.mini button, .q-riwaya.hero button { padding: 9px 12px; }
.q-riwaya.mini small { display: none; }
/* the surah card */
.q-sura-card { display: grid; justify-items: center; gap: 4px; padding: 16px 14px 18px; text-align: center;
  background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .09); }
.q-sc-name { width: 100%; color: var(--gold-2); }
.q-sc-name .t { height: 46px; width: 100%; }
.q-sc-name .t svg { width: 100%; }
.q-sura-card p { margin: 0; font-size: .78rem; color: var(--faint); }
.q-sc-ring { position: relative; width: 76px; height: 76px; margin-top: 8px; display: grid; place-items: center; }
.q-sc-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.q-sc-ring circle { fill: none; stroke-width: 2.5; }
.q-sc-ring .bg { stroke: var(--line-2); } .q-sc-ring .fg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.q-sc-ring span { display: grid; justify-items: center; line-height: 1.2; }
.q-sc-ring b { font: 600 .95rem var(--ui); color: var(--ink); } .q-sc-ring small { font-size: .62rem; color: var(--faint); }
.q-side-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding-inline: 14px; font: 500 .86rem var(--ui); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s, color .25s, box-shadow .25s; }
.q-side-btn:hover { background: rgb(var(--hi) / .05); color: var(--gold-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent); }
.q-side-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.q-side-btn svg .f { fill: currentColor; stroke: none; }
/* now reciting, and today's portion */
.q-now, .q-side-k { display: grid; gap: 6px; padding: 14px; background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .09); }
.q-now[hidden] { display: none; }
.q-now { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 45%, transparent); animation: qRise .4s both; }
.q-now h3, .q-side-k h3 { margin: 0; }
.q-now-ref { margin: 0; font: 600 .92rem/1.5 var(--ui); color: var(--gold-2); }
.q-now-by, .q-side-k p { margin: 0; font-size: .76rem; color: var(--faint); }
.q-now-bar { display: block; height: 3px; border-radius: 3px; background: rgb(var(--hi) / .08); overflow: hidden; }
.q-now-bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: inherit; transition: width .3s linear; }
.q-now .q-side-btn { height: 36px; margin-top: 4px; }
/* the thirty juz, each filled as far as the khatma has read it */
.q-juz-map { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.q-juz-map a { --r: 0; display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px; font: 500 .68rem/1 var(--ui); color: var(--muted);
  background: linear-gradient(to top, color-mix(in oklab, var(--gold) 26%, transparent) calc(var(--r) * 100%), rgb(var(--hi) / .04) calc(var(--r) * 100%));
  box-shadow: inset 0 0 0 1px rgb(var(--hi) / .07); transition: box-shadow .25s, color .25s, transform .25s var(--ease); }
.q-juz-map a:hover { color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-1px); }
.q-juz-map a.is-cur { color: var(--gold-ink); background: var(--gold); box-shadow: 0 0 14px -2px color-mix(in oklab, var(--gold) 60%, transparent); }

/* =================================================================================================
   LIFE AROUND THE PAGE
   ================================================================================================= */
/* the reading lamp: a soft light behind the page, its colour following the hour */
.q-stage::before { content: ""; position: absolute; inset: -60px -10% 10%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 45% at 50% 40%, rgb(var(--lamp, 200 210 200) / .14), transparent 75%); animation: qLamp 9s ease-in-out infinite alternate; }
@keyframes qLamp { to { opacity: .7; transform: scale(1.04); } }
/* the margin marks, beside their lines */
.q-margin { position: absolute; inset-inline-start: -30px; transform: translateY(-50%); font: 1.3rem/1 "Hafs", var(--text); color: var(--gold); opacity: .85; animation: qRise .6s .3s both; }
@media (max-width: 860px) { .q-margin { inset-inline-start: 4px; font-size: 1rem; opacity: .6; } }
/* the lines come in like ink as the page opens */
.q-lines:not(.loading) .ql { animation: qInk .55s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes qInk { from { opacity: 0; filter: blur(2px); transform: translateY(4px); } }
/* the verse being recited stays still: a steady tint, no pulse */
.q-lines .w.play { animation: none; }
@keyframes qBreathe { 50% { --t: color-mix(in oklab, var(--gold) 22%, transparent); color: var(--gold-2); } }
/* the first and last pages give a little at the edge */
.q-page.bump { animation: qBump .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes qBump { 30% { transform: translateX(-10px); } 60% { transform: translateX(5px); } }
/* turning a page: the leaf lifts and turns, rather than sliding flat */
[data-flip="fwd"]::view-transition-old(root) { animation: qLeafOutF .42s cubic-bezier(.4, 0, .2, 1) both; transform-origin: right center; }
[data-flip="fwd"]::view-transition-new(root) { animation: qLeafInF .42s cubic-bezier(.2, 0, 0, 1) both; transform-origin: left center; }
[data-flip="back"]::view-transition-old(root) { animation: qLeafOutB .42s cubic-bezier(.4, 0, .2, 1) both; transform-origin: left center; }
[data-flip="back"]::view-transition-new(root) { animation: qLeafInB .42s cubic-bezier(.2, 0, 0, 1) both; transform-origin: right center; }
@keyframes qLeafOutF { to { opacity: 0; transform: perspective(1600px) rotateY(-12deg) translateX(40px); } }
@keyframes qLeafInF { from { opacity: 0; transform: perspective(1600px) rotateY(8deg) translateX(-30px); } }
@keyframes qLeafOutB { to { opacity: 0; transform: perspective(1600px) rotateY(12deg) translateX(-40px); } }
@keyframes qLeafInB { from { opacity: 0; transform: perspective(1600px) rotateY(-8deg) translateX(30px); } }
/* the khatma's read pages along the line of the mushaf */
.q-track u { position: absolute; inset-block: -1px; border-radius: 2px; background: color-mix(in oklab, var(--gold) 45%, transparent); }
.q-track i { z-index: 1; }
/* motes of light drifting slowly behind everything on the Quran page */
.q-motes { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.q-motes i { position: absolute; bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: rgb(var(--lamp, 200 210 200) / .5); filter: blur(1px);
  opacity: 0; animation: qMote var(--d) linear var(--w) infinite; }
@keyframes qMote { 10% { opacity: .5; } 90% { opacity: .35; } to { opacity: 0; transform: translate(var(--x), -105vh); } }
@media (prefers-reduced-motion: reduce) { .q-motes, .q-stage::before { animation: none; } .q-lines .ql, .q-in, .q-side { animation: none !important; } }

.q-l-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--muted); }
.q-l-chips { display: flex; gap: 3px; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.q-l-chips button { min-width: 38px; height: 28px; padding-inline: 8px; border-radius: 7px; font-size: .78rem; color: var(--muted); transition: background .2s, color .2s; }
.q-l-chips button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
/* Warsh: one font for the whole mushaf, set a little looser */
.riwaya-warsh .q-lines .ql { height: calc(var(--qs) * 1.9); }
.riwaya-warsh .q-lines .w { font-weight: normal; }
/* the page edges and margin marks may reach past the screen on phones: keep the page from scrolling sideways */
.quran main { overflow-x: clip; }

/* =================================================================================================
   TIDY: the index shows the surahs under the title; what is yours sits in one quiet row
   ================================================================================================= */
.q-hero > p { margin-top: 10px; font-size: .98rem; }
.q-dash { width: min(100% - 2 * var(--gutter), 1080px); margin: clamp(22px, 3.5vh, 32px) auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.q-dash-sep { width: 1px; height: 26px; background: var(--line-2); margin-inline: 4px; }
.q-chip { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding-inline: 12px 14px; border-radius: 13px; text-align: start; color: var(--ink);
  background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .09);
  transition: box-shadow .3s, background .3s; }
.q-chip:hover, .q-chip[aria-expanded="true"] { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent); }
.q-chip[aria-expanded="true"] { background: color-mix(in oklab, var(--gold) 10%, transparent); }
.q-chip > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.q-chip span { display: grid; line-height: 1.25; font: 600 .86rem var(--ui); white-space: nowrap; }
.q-chip small { font-size: .68rem; font-weight: 400; color: var(--faint); }
.q-mini-ring circle { fill: none; stroke: var(--line-2); stroke-width: 2.4; }
.q-mini-ring .fg { stroke: var(--gold); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
/* what a chip opens unfolds just under the row */
.q-pop { width: min(100% - 2 * var(--gutter), 640px); margin: 12px auto 0; animation: qRise .35s cubic-bezier(.2, .9, .3, 1) both; }
.q-pop[hidden] { display: none; }
.q-pop .q-khatma { margin: 0; max-width: none; }
.q-pop-marks { padding: 16px 18px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .09); }
.q-pop-marks h2 { margin: 0 0 10px; font: 600 1rem var(--ui); color: var(--ink); }
.q-pop-marks div { display: flex; flex-wrap: wrap; gap: 6px; }
.q-index { margin-top: clamp(26px, 4vh, 40px); }

/* the narration: one small two-part pill wherever it appears */
.q-riwaya.pill { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 3px; border-radius: 13px; box-shadow: inset 0 0 0 1px var(--line-2); background: rgb(var(--hi) / .03); }
.q-riwaya.pill button { display: grid; grid-template-columns: none; justify-items: center; gap: 0; height: 40px; min-width: 92px; padding: 3px 12px; border-radius: 10px; background: none; box-shadow: none; transition: background .3s, color .3s; }
.q-riwaya.pill button:hover { background: rgb(var(--hi) / .05); box-shadow: none; }
.q-riwaya.pill b { grid-column: auto; font: 600 .9rem/1.2 var(--ui); color: var(--muted); }
.q-riwaya.pill small { grid-column: auto; font-size: .64rem; color: var(--faint); }
.q-riwaya.pill button[aria-checked="true"] { background: var(--gold); box-shadow: none; }
.q-riwaya.pill button[aria-checked="true"] b, .q-riwaya.pill button[aria-checked="true"] small { color: var(--gold-ink); }
.q-riwaya.pill button[aria-checked="true"] small { opacity: .75; }
.q-riwaya .q-rw-dot { display: none; }
.q-mini-bar { display: flex; justify-content: center; margin: 0 0 14px; }
@media (min-width: 1180px) { .q-mini-bar { display: none; } }
.q-side .q-riwaya.pill { display: grid; width: 100%; }

/* =================================================================================================
   TIDY: each side of the page is one card, its parts divided by fine rules
   ================================================================================================= */
.q-side { gap: 0; }
.q-panel { display: grid; gap: 10px; padding: 16px; border-radius: 18px;
  background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), inset 0 0 0 1px rgb(var(--hi) / .09); }
.q-panel hr { width: 100%; height: 1px; margin: 4px 0; border: 0; background: var(--line); }
.q-panel h3 { margin: 0; }
.q-panel .q-now { padding: 0; background: none; box-shadow: none; animation: none; display: grid; gap: 6px; }
.q-panel .q-now[hidden] { display: none; }
.q-sc { display: grid; justify-items: center; gap: 6px; text-align: center; }
.q-sc-name { width: 100%; color: var(--gold-2); }
.q-sc-name .t { height: 50px; width: 100%; }
.q-sc-name .t svg { width: 100%; }
.q-sc p { margin: 0; font-size: .76rem; color: var(--faint); }
.q-sc-bar { width: 100%; height: 4px; border-radius: 4px; background: rgb(var(--hi) / .08); overflow: hidden; }
.q-sc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.q-sc small { font-size: .7rem; color: var(--faint); }
.q-select select { width: 100%; height: 40px; padding: 0 12px; border-radius: 11px; border: 0; font: 500 .86rem var(--ui); color: var(--ink);
  background: rgb(var(--hi) / .04); box-shadow: inset 0 0 0 1px var(--line-2); appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(-45deg, transparent 50%, var(--muted) 50%);
  background-size: 5px 5px; background-repeat: no-repeat; background-position: 14px 52%, 19px 52%; }
.q-select select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold); }
.q-sleep { display: grid; gap: 6px; font-size: .74rem; color: var(--faint); }
.q-sleep div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.q-sleep button { height: 28px; border-radius: 7px; font-size: .74rem; color: var(--muted); transition: background .2s, color .2s; }
.q-sleep button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
.q-k-line { margin: 0; font-size: .8rem; color: var(--muted); }
.q-k-line b { color: var(--ink); font-size: .95rem; }
.q-panel .q-side-btn { border-radius: 12px; }
.q-side-k, .q-sura-card { display: none; }

@media (max-width: 640px) { .q-dash-sep { display: none; } .q-dash .q-riwaya.pill { flex-basis: 100%; max-width: 260px; margin-inline: auto; } }

/* ---------- «قرأتُ هذه الصفحة» ---------- */
.q-readbtn { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: min(100%, 420px); margin: 16px auto 0; padding: 10px 16px 10px 12px; border-radius: 16px; text-align: start;
  background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 30%, transparent);
  transition: box-shadow .35s, background .4s, transform .4s var(--ease); }
.q-readbtn:hover { box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-1px); }
.q-rb-ic { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--gold);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--gold) 50%, transparent); transition: background .4s, color .4s, box-shadow .4s; }
.q-rb-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .5s .05s cubic-bezier(.4, 0, .2, 1); }
.q-readbtn:hover .q-rb-ic svg { stroke-dashoffset: 14; }
.q-rb-t { display: grid; gap: 1px; }
.q-rb-t b { font: 600 .98rem/1.35 var(--ui); color: var(--ink); }
.q-rb-t small { font-size: .76rem; color: var(--faint); }
/* once read: the box fills, the tick draws itself */
.q-readbtn.on { background: linear-gradient(160deg, color-mix(in oklab, var(--gold) 16%, transparent), color-mix(in oklab, var(--gold) 5%, transparent)); box-shadow: inset 0 0 0 1px var(--gold); }
.q-readbtn.on .q-rb-ic { background: var(--gold); color: var(--gold-ink); box-shadow: none; }
.q-readbtn.on .q-rb-ic svg { stroke-dashoffset: 0; }
.q-readbtn.on .q-rb-t b { color: var(--gold-2); }

/* ---------- the reciter list, in the site's own look ---------- */
.q-dd { position: relative; }
.q-dd-btn { width: 100%; height: 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 0 10px; border-radius: 12px; text-align: start;
  background: rgb(var(--hi) / .04); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s; }
.q-dd-btn:hover, .q-dd-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--gold); }
.q-dd-btn b { font: 500 .86rem var(--ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-dd-ic svg, .q-dd-chev { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; }
.q-dd-chev { stroke: var(--muted); transition: transform .3s var(--ease); }
.q-dd-btn[aria-expanded="true"] .q-dd-chev { transform: rotate(180deg); }
.q-dd-list { position: absolute; z-index: 5; inset-inline: 0; top: calc(100% + 6px); margin: 0; padding: 5px; list-style: none; border-radius: 14px;
  background: rgb(var(--glass) / .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -18px rgb(0 0 0 / .7); animation: qRise .25s cubic-bezier(.2, .9, .3, 1) both; }
.q-dd-list[hidden] { display: none; }
.q-dd-list li { position: relative; padding: 9px 30px 9px 12px; border-radius: 9px; font-size: .86rem; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.q-dd-list li:hover, .q-dd-list li:focus-visible { background: rgb(var(--hi) / .06); color: var(--ink); outline: none; }
.q-dd-list li[aria-selected="true"] { color: var(--gold-2); }
.q-dd-list li[aria-selected="true"]::before { content: ""; position: absolute; inset-inline-start: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; transform: rotate(45deg); background: var(--gold); }
.q-dd { z-index: 20; }
.q-dd-list { z-index: 30; background: color-mix(in oklab, var(--surface) 96%, var(--gold) 4%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.q-panel { isolation: isolate; }
.q-panel > .q-dd { position: relative; }


.q-resume { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; width: min(100% - 2 * var(--gutter), 760px); margin: clamp(22px, 3.5vh, 32px) auto 0px; padding: clamp(18px, 3vw, 26px) clamp(20px, 3.5vw, 30px); border-radius: 24px; background: var(--deep); color: var(--fg); box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent) inset, 0 20px 44px -30px rgb(0 0 0 / .8); transition: transform .5s var(--ease), box-shadow .4s; }
.q-resume:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 30%, transparent) inset, 0 28px 56px -30px rgb(0 0 0 / .9); }
.q-resume-sky { position: absolute; inset: 0px; z-index: -1; }
.q-resume-sky svg { display: block; width: 100%; height: 100%; }
.q-resume-sky::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(to left, color-mix(in oklab, var(--deep) 80%, transparent) 0%, color-mix(in oklab, var(--deep) 35%, transparent) 55%, transparent 85%); }
.q-resume-sky .sky { animation: 34s ease-in-out 0s infinite alternate none running skyDrift; }
.q-resume-sky .dots { animation: 46s ease-in-out 0s infinite alternate none running dotsDrift; }
.q-resume-sky .bigs path { transform-box: fill-box; transform-origin: center center; animation: 26s linear 0s infinite normal none running petalsTurn; }
.q-resume-sky .bigs path:nth-child(2n) { animation-direction: reverse; animation-duration: 34s; }
.q-resume-sky .meteor { opacity: 0; animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: meteor; animation-timeline: auto; animation-range: normal; animation-delay: var(--md, 0s); }
.q-resume-t { display: grid; justify-items: start; gap: 4px; min-width: 0px; }
.q-resume-t small { font: .82rem var(--ui); color: color-mix(in oklab, var(--fg) 70%, transparent); }
.q-resume-name { width: min(100%, 300px); color: var(--fg); }
.q-resume-name .t { display: block; height: clamp(54px, 7vw, 72px); width: 100%; }
.q-resume-name .t svg { width: 100%; height: 100%; }
.q-resume-meta { font: 500 .9rem var(--ui); color: color-mix(in oklab, var(--fg) 82%, transparent); }
.q-resume-bar { width: min(100%, 260px); height: 3px; margin-top: 6px; border-radius: 3px; background: color-mix(in oklab, var(--fg) 16%, transparent); overflow: hidden; }
.q-resume-bar i { display: block; height: 100%; border-radius: inherit; background: var(--fg); }
.q-resume-go { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 30%, transparent); transition: background .35s, color .35s, transform .5s var(--ease); }
.q-resume-go svg { width: 20px; height: 20px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.q-resume:hover .q-resume-go { background: var(--fg); color: var(--deep); transform: translateX(-3px); }
.q-sheen { position: absolute; inset: 0px; z-index: 2; pointer-events: none; border-radius: inherit; transform: translateX(110%); background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.1) 48%, rgba(255, 255, 255, 0.035) 54%, transparent 64%); }
:root[data-tone="light"] .q-sheen { background: linear-gradient(105deg, transparent 36%, rgba(0, 0, 0, 0.035) 42%, rgba(255, 255, 255, 0.55) 48%, rgba(0, 0, 0, 0.03) 55%, transparent 62%); }
.q-resume:hover .q-sheen { transform: translateX(-110%); transition: transform 1.2s var(--ease-io); }
.q-item { position: relative; overflow: hidden; isolation: isolate; transition: box-shadow .3s, background .3s, transform .45s var(--ease); }
.q-item.is-makki { --rv: #b39a74; }
.q-item.is-madani { --rv: #6fa596; }
:root[data-tone="light"] .q-item.is-makki { --rv: #8a6a3c; }
:root[data-tone="light"] .q-item.is-madani { --rv: #3d7a68; }
.q-item.is-makki, .q-item.is-madani { --gold: var(--rv); }
.q-item::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--rv, var(--gold)) 13%, transparent), transparent 60%); opacity: 0.7; transition: opacity 0.4s; }
.q-item:hover { transform: translateY(-2px); }
.q-item:hover::before { opacity: 1; }
.q-num svg { stroke-opacity: 0.9; }
.q-item:hover .q-num b { color: var(--rv, var(--ink)); }
.q-grid li { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; animation-play-state: running; animation-name: qRise; animation-timeline: auto; animation-range: normal; animation-delay: calc(var(--k, 0) * 18ms); }
@media (prefers-reduced-motion: reduce) {
  .q-resume-sky .sky, .q-resume-sky .dots, .q-resume-sky .bigs path, .q-resume-sky .meteor, .q-grid li { animation: auto ease 0s 1 normal none running none; }
  .q-sheen { display: none; }
}
@media (max-width: 560px) {
  .q-resume { grid-template-columns: 1fr; }
  .q-resume-go { display: none; }
}
.q-scard { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; align-items: center; gap: 8px 12px; padding: 14px 16px 12px; border-radius: 18px; color: var(--ink); background: linear-gradient(180deg, rgb(var(--hi) / .04), rgb(var(--hi) / .012)); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .08); transition: box-shadow .4s, background .4s, transform .5s var(--ease); }
.q-scard.is-makki { --rv: #b9a079; }
.q-scard.is-madani { --rv: #74ab9b; }
:root[data-tone="light"] .q-scard.is-makki { --rv: #8a6a3c; }
:root[data-tone="light"] .q-scard.is-madani { --rv: #3d7a68; }
:root[data-tone="light"] .q-scard { box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px inset; background: var(--surface); }
.q-scard:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgb(var(--hi) / .065), rgb(var(--hi) / .02)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rv) 55%, transparent), 0 16px 30px -22px rgb(0 0 0 / .7); }
.q-sn { position: relative; grid-row: 1; width: 38px; height: 38px; display: grid; place-items: center; color: var(--rv); }
.q-sn svg { position: absolute; inset: 0px; width: 100%; height: 100%; fill: color-mix(in oklab, var(--rv) 8%, transparent); stroke: currentcolor; stroke-width: 1.1; stroke-opacity: 0.75; transition: transform .9s var(--ease), fill .4s; }
.q-sn b { position: relative; font: 600 .78rem/1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.q-scard:hover .q-sn svg { transform: rotate(45deg); fill: color-mix(in oklab, var(--rv) 18%, transparent); }
.q-cal { grid-row: 1; justify-self: center; width: min(100%, 230px); color: var(--ink); transition: transform .5s var(--ease), color .4s; }
.q-cal .t { display: block; height: 46px; width: 100%; }
.q-cal .t svg { width: 100%; height: 100%; }
.q-scard:hover .q-cal { transform: translateY(-2px); color: var(--gold-2); }
.q-rule { grid-area: 2 / 1 / auto / -1; justify-self: center; width: 100%; height: 1px; background: linear-gradient(to left, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent); position: relative; }
.q-rule::after { content: ""; position: absolute; inset: 0px; margin: auto; width: 0px; height: 1px; background: var(--rv); transition: width .7s var(--ease); }
.q-scard:hover .q-rule::after { width: 70%; }
.q-meta { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: .76rem var(--ui); color: var(--faint); font-variant-numeric: tabular-nums; }
.q-meta em { font-style: normal; color: var(--rv); }
.q-meta span:last-child { margin-inline-start: auto; }
.q-grid:has(.q-scard) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .q-scard, .q-sn svg, .q-cal, .q-rule::after { transition: none; }
}
@media (max-width: 520px) {
  .q-grid:has(.q-scard) { grid-template-columns: 1fr 1fr; gap: 8px; }
  .q-scard { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 12px 10px 10px; }
  .q-sn { width: 30px; height: 30px; }
  .q-cal { grid-row: 2; }
  .q-rule { grid-row: 3; }
  .q-meta { grid-row: 4; }
  .q-cal .t { height: 36px; }
  .q-meta span:nth-child(2) { display: none; }
}
.q-ldlg { position: fixed; z-index: 46; inset: 0px; display: grid; place-items: center; padding: 16px; }
.q-ldlg[hidden] { display: none; }
.q-ld-bg { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px); animation: 0.3s ease 0s 1 normal both running qFade; }
.q-ld-box { position: relative; width: min(100%, 440px); display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: rgb(var(--glass) / .94); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -20px rgb(0 0 0 / .6); animation: 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) 0s 1 normal both running qPop; }
.q-ld-box header { display: flex; align-items: center; justify-content: space-between; }
.q-ld-box h2 { margin: 0px; font: 700 1.2rem var(--ui); color: var(--ink); }
.q-ld-pick { display: grid; grid-template-columns: 34px 1fr 92px; align-items: center; gap: 8px; }
.q-ld-pick > span { font: 600 .9rem var(--ui); color: var(--gold-2); }
.q-ld-pick select, .q-ld-pick input { width: 100%; height: 42px; padding-inline: 10px; border: 0px; border-radius: 12px; font: 500 .92rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px var(--line-2); appearance: none; }
.q-ld-pick select { padding-inline-end: 32px; background-repeat: no-repeat; background-position: left 12px center; background-size: 12px auto; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 9l6 6 6-6%27 fill=%27none%27 stroke=%27%238c8c8c%27 stroke-width=%272.2%27 stroke-linecap=%27round%27/%3E%3C/svg%3E"); }
.q-ld-pick select:focus, .q-ld-pick input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--gold); }
.q-ld-pick option { color: rgb(17, 17, 17); }
.q-ld-pick label { display: grid; gap: 2px; }
.q-ld-pick label small { font-size: 0.66rem; color: var(--faint); }
.q-ld-pick input { text-align: center; font-variant-numeric: tabular-nums; }
.q-ld-pick input::-webkit-inner-spin-button { appearance: none; }
.q-ld-box .q-l-row { flex-wrap: wrap; }
.q-ld-go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 13px; font: 600 .95rem var(--ui); color: var(--gold-ink); background: var(--gold); transition: transform .3s var(--ease); }
.q-ld-go:hover { transform: translateY(-1px); }
.q-ld-go svg { width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 1.8; }
.q-ld-go svg .f { fill: currentcolor; stroke: none; }
.q-follow { position: fixed; z-index: 27; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 14px 16px; border-radius: 999px; font: 600 .84rem var(--ui); color: var(--gold-ink); background: var(--gold); box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 30px -10px; animation: 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) 0s 1 normal both running qRise; }
.q-follow[hidden] { display: none; }
.q-follow svg { width: 15px; height: 15px; fill: none; stroke: currentcolor; stroke-width: 1.8; }
.q-follow svg .f { fill: currentcolor; stroke: none; }
.q-jcard { --rv: var(--gold); }
.q-jn { display: block; text-align: center; direction: ltr; unicode-bidi: isolate; font: 34px / 1.35 "Ajzaa Hafs"; color: var(--ink); white-space: nowrap; overflow: hidden; }
.riwaya-warsh .q-jn { font-family: "Ajzaa Warsh"; }
.q-rule i { position: absolute; inset-block: -1px; inset-inline-start: 0px; height: 3px; border-radius: 3px; background: var(--rv); opacity: 0.8; }
.q-jcard .q-meta em { color: var(--muted); }
@media (max-width: 520px) {
  .q-jn { font-size: 28px; }
}
.q-mini-bar { flex-wrap: wrap; align-items: center; gap: 8px; }
.q-side-open { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding-inline: 14px; border-radius: 13px; font: 500 .84rem var(--ui); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); background: rgb(var(--hi) / .03); transition: color 0.25s, background 0.25s; }
.q-side-open:hover, .q-side-open[aria-expanded="true"] { color: var(--ink); background: rgb(var(--hi) / .06); }
.q-side-open svg { width: 17px; height: 17px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1180px) {
  .q-side-open, .q-side-scrim { display: none; }
}
@media (max-width: 1179px) {
  .q-side-scrim { position: fixed; inset: 0px; z-index: 58; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(3px); animation: 0.3s ease 0s 1 normal both running qFade; }
  :root[data-tone="light"] .q-side-scrim { background: rgba(40, 35, 25, 0.2); }
  .q-side.is-open { display: block; position: fixed; z-index: 59; inset: auto 0px 0px; margin-inline: auto; width: min(100% - 24px, 420px); max-height: min(80vh, 640px); overflow: auto; overscroll-behavior: contain; padding-bottom: calc(12px + env(safe-area-inset-bottom)); animation: 0.5s cubic-bezier(0.2, 1.1, 0.3, 1) 0s 1 normal both running qSheetUp; }
  .q-side.is-open .q-panel { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), 0 -18px 50px rgb(0 0 0 / .35); }
}
@keyframes qSheetUp { 
  0% { transform: translateY(40px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .q-side.is-open, .q-side-scrim { animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 1179px) {
  .q-mini-bar { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 380px); margin-inline: auto; }
  .q-mini-bar .q-riwaya.pill { grid-column: 1 / -1; justify-self: center; }
  .q-side-open { justify-content: center; padding-inline: 10px; }
}
.q-wird { display: grid; gap: 8px; }
.q-wird-done { display: flex; align-items: center; gap: 10px; margin: 0px; }
.q-wird-done svg { flex: 0 0 auto; width: 30px; height: 30px; padding: 6px; border-radius: 50%; fill: none; stroke: var(--gold-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; background: var(--gold); }
.q-wird-done span { display: grid; gap: 2px; }
.q-wird-done b { font: 600 .9rem var(--ui); color: var(--ink); }
.q-wird-done small { font-size: 0.74rem; color: var(--faint); }
.q-wird-next { height: 38px; }
.q-sheet-play { display: flex; align-items: center; gap: 14px; }
.q-sheet-play .q-play { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); transition: transform .5s var(--spring, ease); }
.q-sheet-play .q-play:active { transform: scale(0.92); }
.q-sheet-play .q-play svg { width: 22px; height: 22px; fill: currentcolor; stroke: none; }
.q-sheet-play p { display: grid; gap: 2px; margin: 0px; }
.q-sheet-play b { font: 600 1rem var(--ui); color: var(--ink); }
.q-sheet-play small { font-size: 0.78rem; color: var(--faint); }
.q-panel .q-now { margin-top: 4px; }
.q-track { height: 6px; margin-block: 4px; cursor: pointer; touch-action: none; }
.q-track::before { content: ""; position: absolute; inset: -10px 0px; }
.q-track.drag { height: 8px; }
.q-track-tip { position: absolute; bottom: 14px; transform: translateX(50%); white-space: nowrap; padding: 5px 10px; border-radius: 9px; font: 500 .76rem var(--ui); color: var(--ink); background: var(--surface-3); box-shadow: rgba(0, 0, 0, 0.3) 0px 6px 18px; pointer-events: none; }
.q-ayah-text .vw { border-radius: 6px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.q-ayah-text .vw:hover { background: rgb(var(--hi) / .07); }
.q-ayah-text .vw.on { color: var(--gold-ink); background: var(--gold); }
.q-word-hint { margin: -4px 0px 0px; text-align: center; font: .74rem var(--ui); color: var(--faint); }
.q-word-hint[hidden] { display: none; }
.q-paper { margin-top: 6px; }
.q-paper summary { cursor: pointer; list-style: none; font: 500 .8rem var(--ui); color: var(--muted); padding: 6px 0px; }
.q-paper summary::-webkit-details-marker { display: none; }
.q-paper summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-end: 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 0.8rem; }
.q-paper[open] summary::before { content: "–"; }
.q-paper form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding-top: 6px; animation: cRise .45s var(--spring, ease) both; }
.q-paper label { display: grid; gap: 4px; font-size: 0.74rem; color: var(--faint); }
.q-paper input { width: 76px; height: 38px; border: 0px; border-radius: 10px; text-align: center; font: 600 .95rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px var(--line-2); }
.q-paper input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold); }
.q-paper .btn { height: 38px; }
.q-khatma .q-paper { grid-column: 1 / -1; }
.calm { width: min(100% - 2 * var(--gutter), 760px); margin: clamp(30px, 6vh, 64px) auto 120px; display: grid; gap: 18px; }
.calm::before { content: ""; position: fixed; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(70% 50% at 50% 18%, rgb(var(--hi) / .06), transparent 70%), radial-gradient(50% 40% at 80% 90%, rgb(var(--hi) / .03), transparent 70%); }
.calm-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font: 500 .84rem var(--ui); color: var(--faint); }
.calm-back svg { width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 1.8; transform: scaleX(-1); }
.calm-back:hover { color: var(--ink); }
.calm-head { text-align: center; display: grid; gap: 6px; }
.calm-head h1 { margin: 0px; font: 400 clamp(2rem, 1.5rem + 2vw, 2.8rem)/1.4 var(--text); color: var(--ink); }
.calm-head p { margin: 0px; font: .92rem/1.8 var(--prose); color: var(--muted); }
.calm-player { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 22px; background: rgb(var(--hi) / .035); box-shadow: inset 0 0 0 1px var(--line); }
.calm-play { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); transition: transform .5s var(--spring, ease); }
.calm-play:active { transform: scale(0.92); }
.calm-play svg { width: 24px; height: 24px; fill: currentcolor; stroke: none; }
.calm-now { flex: 1 1 0%; display: grid; gap: 10px; min-width: 0px; }
.calm-now b { font: 500 1rem var(--ui); color: var(--ink); }
.calm-bar { height: 3px; border-radius: 3px; background: rgb(var(--hi) / .08); overflow: hidden; }
.calm-bar i { display: block; height: 100%; width: 0px; background: var(--gold); transition: width 0.3s linear; }
.calm h2 { margin: 14px 4px 0px; font: 500 .8rem var(--ui); color: var(--faint); }
.calm-readers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.calm-readers button { display: grid; gap: 2px; padding: 14px; border-radius: 16px; text-align: start; box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, box-shadow .25s, transform .5s var(--spring, ease); }
.calm-readers button:hover { background: rgb(var(--hi) / .04); }
.calm-readers button:active { transform: scale(0.97); }
.calm-readers button[aria-pressed="true"] { background: rgb(var(--hi) / .06); box-shadow: inset 0 0 0 1px var(--gold); }
.calm-readers b { font: 500 .92rem var(--ui); color: var(--ink); }
.calm-readers small { font-size: 0.72rem; color: var(--faint); }
.calm-suras { list-style: none; margin: 0px; padding: 0px; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; overscroll-behavior: contain; }
.calm-suras button { width: 100%; display: flex; align-items: center; gap: 8px; height: 42px; padding-inline: 12px; border-radius: 12px; font: 500 .86rem var(--ui); color: var(--muted); transition: background 0.2s, color 0.2s; }
.calm-suras button:hover { background: rgb(var(--hi) / .05); color: var(--ink); }
.calm-suras button[aria-current="true"] { background: var(--gold); color: var(--gold-ink); }
.calm-suras small { font-size: 0.7rem; opacity: 0.6; min-width: 22px; }
.q-dock .q-where label { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font-size: 0.76rem; }
.q-where-s { justify-self: start; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.q-where-j { justify-self: end; color: var(--faint); }
.q-where-p { display: inline-flex; align-items: baseline; gap: 2px; color: var(--faint); }
.q-where-p input { width: 2.8em; height: 24px; font-size: 1rem; }
.q-dock .q-track { height: 4px; margin-block: 3px 1px; background: rgb(var(--hi) / .1); }
.q-dock .q-track b { top: 0px; height: 4px; width: 1px; background: rgb(var(--hi) / .14); }
.q-dock .q-track > i::after { content: ""; position: absolute; inset-inline-end: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 3px rgb(var(--glass) / .9); }
.q-dock .q-track.drag > i::after { width: 14px; height: 14px; margin-top: -7px; inset-inline-end: -7px; }
.q-dock .q-turn:hover { background: rgb(var(--hi) / .07); }
.q-ay-step { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-ay-step button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 12px; font: 500 .84rem var(--ui); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transition: background 0.2s, color 0.2s; }
.q-ay-step button:hover { background: rgb(var(--hi) / .05); color: var(--ink); }
.q-ay-step button[disabled] { opacity: 0.35; pointer-events: none; }
.q-ay-step svg { width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.q-track-tip { bottom: 18px; z-index: 5; }
.q-ayah-in.qv { width: min(100%, 520px); padding: 10px 20px 0px; border-radius: 22px; gap: 0px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -40px rgb(0 0 0 / .75); }
.q-ayah-in.qv::before { display: none; }
:root[data-tone="light"] .q-ayah-in.qv { background: rgb(255, 255, 255); }
.qv-head { flex: 0 0 auto; display: grid; grid-template-columns: 36px 1fr 36px 36px; align-items: center; gap: 4px; padding-bottom: 6px; }
.qv-head h2 { margin: 0px; display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap; font: 600 1rem var(--ui); color: var(--ink); }
.qv-head h2 b { font-weight: 600; color: var(--gold-2); }
.qv-head h2 small { flex-basis: 100%; text-align: center; font: 400 .72rem var(--ui); color: var(--faint); }
.qv-nav, .qv-x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: none; box-shadow: none; transition: background 0.2s, color 0.2s; }
.qv-nav:hover, .qv-x:hover { background: rgb(var(--hi) / .06); color: var(--ink); }
.qv-nav[disabled] { opacity: 0.25; pointer-events: none; }
.qv-nav svg, .qv-x svg { width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qv-x { justify-self: end; }
.qv-text.q-ayah-text { flex: 0 0 auto; margin: 8px 0px 0px; padding: 4px 2px; max-height: 32vh; overflow: auto; text-align: center; font: 1.75rem/2.15 Hafs, var(--text); color: var(--ink); background: none; box-shadow: none; border-radius: 0px; }
.qv-text .vw { padding: 0px 0.06em; }
.qv-text:not(.can-word) .vw { cursor: default; }
.qv-text:not(.can-word) .vw:hover { background: none; }
.qv-acts { flex: 0 0 auto; display: flex; justify-content: center; gap: 10px; margin: 14px 0px 16px; }
.qv-act { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, transform .45s var(--spring, ease); }
.qv-act:hover { color: var(--ink); background: rgb(var(--hi) / .05); }
.qv-act:active { transform: scale(0.9); }
.qv-act.main { color: var(--gold-ink); background: var(--gold); box-shadow: none; }
.qv-act.on { color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold); }
.qv-act svg { width: 17px; height: 17px; fill: none; stroke: currentcolor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.qv-act.main svg, .qv-act.on svg { fill: currentcolor; }
.qv-tf { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; margin: 0px -20px; border-top: 1px solid var(--line); background: rgb(var(--hi) / .018); }
.qv-tabs.q-tf-tabs { margin: 0px; padding: 0px 12px; display: flex; justify-content: center; gap: 2px; border: 0px; }
.qv-tabs.q-tf-tabs button { height: 40px; padding-inline: 12px; border-radius: 0px; background: none; font: 500 .8rem var(--ui); color: var(--faint); }
.qv-tabs.q-tf-tabs button[aria-selected="true"] { color: var(--ink); }
.qv-tabs .q-tf-thumb { top: auto; bottom: 6px; height: 2px; border-radius: 2px; background: var(--gold-2); }
.qv-box.q-tafsir-box { margin: 0px; padding: 4px 22px 22px; }
.qv-box .q-tafsir { padding: 0px; border: 0px; }
.qv-box .q-tafsir p { font: 1.06rem/2 var(--prose); color: color-mix(in oklab, var(--ink) 86%, var(--bg)); text-align: justify; }
.qv-box .q-tf-src { margin-top: 12px; font-size: 0.7rem; color: var(--faint); }
@media (max-width: 520px) {
  .q-ayah-in.qv { padding: 8px 14px 0px; }
  .qv-tf { margin: 0px -14px; }
  .qv-text.q-ayah-text { font-size: 1.5rem; }
  .qv-tabs.q-tf-tabs button { padding-inline: 8px; font-size: 0.76rem; }
}
.q-ayah header.qv-head { display: grid; grid-template-columns: 36px 1fr 36px; gap: 6px; padding-inline: 40px 0px; position: relative; }
.q-ayah header.qv-head .qv-x { position: absolute; inset-inline-end: -8px; top: 0px; border-radius: 50%; }
.q-ayah header.qv-head { padding-inline: 0px 34px; }
@media (max-width: 1179px) {
  .q-mini-bar .q-riwaya.pill { display: none; }
  .q-mini-bar { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
  .q-side-open { height: 40px; font-size: 0.8rem; border-radius: 12px; }
}
@media (max-width: 560px) {
  .q-read { width: calc(100% - 12px); }
  .q-mini-bar { width: calc(100% - 4px); }
  .q-page { padding: 10px 9px 12px; border-radius: 18px; }
  .q-hint { font-size: 0.74rem; margin-top: 10px; }
  /* (the search used to fold into a single icon here to make room for the row of buttons that have
     since moved into the settings window; it keeps its field now, and fills what the others leave) */
  #nav .nav-pill { position: relative; }
  #nav .logo .t { display: none; }
}
.q-panel .q-sheet-play .q-play { border-radius: 50% !important; }
@media (max-width: 1179px) {
  .q-side.is-open .q-panel { position: relative; padding-top: 22px; border-radius: 22px 22px 18px 18px; }
  .q-side.is-open .q-panel::before { content: ""; position: absolute; top: 8px; inset-inline: 0px; margin-inline: auto; width: 38px; height: 4px; border-radius: 4px; background: rgb(var(--hi) / .22); }
  .q-side.is-open { transition: transform .35s var(--spring, ease); }
  .q-side.is-open.pulling { transition: none; }
}
@media (max-width: 560px) {
  .q-read { margin-top: -14px; }
}
.q-side.is-open { animation-fill-mode: backwards !important; }
.calm-now b { display: grid; gap: 2px; }
.calm-now b small { font: 400 .78rem var(--ui); color: var(--faint); }
@media (max-width: 560px) {
  .calm { width: calc(100% - 24px); margin-top: 20px; gap: 14px; }
  .calm-readers { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; scroll-snap-type: x; }
  .calm-readers::-webkit-scrollbar { display: none; }
  .calm-readers button { flex: 0 0 auto; scroll-snap-align: start; padding: 10px 14px; border-radius: 14px; }
  .calm-readers b { white-space: nowrap; font-size: 0.86rem; }
  .calm-suras { grid-template-columns: repeat(3, 1fr); max-height: none; }
  .calm-suras button { height: 40px; padding-inline: 8px; font-size: 0.8rem; }
}
.calm { display: flex; flex-direction: column; }
.calm > * { flex: 0 0 auto; }
.calm-back { align-self: flex-start; }
body.quran { background: var(--bg) !important; }
.calm::before, .q-item::before { display: none !important; }
.q-cont, .q-item, .q-item:hover, .q-page, .q-hit, .q-khatma, .q-ayah-in, .q-ayah-verse, .q-riwaya button, .q-sura-card, .q-chip, .q-panel, .q-readbtn, .q-scard, .q-scard:hover, .q-now, .q-side-k, .q-pop-marks { background: var(--surface) !important; }
.q-riwaya button[aria-checked="true"], .q-readbtn.on { background: var(--gold) !important; }
.q-readbtn.on, .q-readbtn.on * { color: var(--gold-ink); }
.q-stage::before { display: none !important; }
.q-page { view-transition-name: leaf; }
[data-flip]::view-transition-old(root), [data-flip]::view-transition-new(root), [data-flip]::view-transition-old(page), [data-flip]::view-transition-new(page) { animation: auto ease 0s 1 normal none running none !important; }
[data-flip="fwd"]::view-transition-old(leaf) { animation: 0.26s cubic-bezier(0.4, 0, 1, 1) 0s 1 normal both running lfOutF; }
[data-flip="fwd"]::view-transition-new(leaf) { animation: 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) 0s 1 normal both running lfInF; }
[data-flip="back"]::view-transition-old(leaf) { animation: 0.26s cubic-bezier(0.4, 0, 1, 1) 0s 1 normal both running lfOutB; }
[data-flip="back"]::view-transition-new(leaf) { animation: 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) 0s 1 normal both running lfInB; }
@keyframes lfOutF { 
  100% { opacity: 0; transform: translateX(48px); }
}
@keyframes lfInF { 
  0% { opacity: 0; transform: translateX(-48px); }
}
@keyframes lfOutB { 
  100% { opacity: 0; transform: translateX(-48px); }
}
@keyframes lfInB { 
  0% { opacity: 0; transform: translateX(48px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-flip]::view-transition-old(leaf), [data-flip]::view-transition-new(leaf) { animation: auto ease 0s 1 normal none running none !important; }
}
.q-lines .w { transition: color 0.45s, background-color 0.45s; }
@media (prefers-reduced-motion: no-preference) {
  .q-scard { animation: chipIn .55s var(--spring, ease) both; }
}
@media (min-width: 1180px) {
  .q-stage { grid-template-columns: 236px minmax(0px, 760px) 236px !important; gap: 30px !important; }
}
.q-panel { padding: 18px 16px; border-radius: 22px; gap: 12px; box-shadow: inset 0 0 0 1px var(--line-2) !important; }
.q-panel hr { margin: 2px 0px; background: var(--line); }
.q-panel h3 { display: flex; align-items: center; gap: 7px; font: 600 .76rem var(--ui); color: var(--muted); letter-spacing: 0.01em; }
.q-panel h3::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; background: color-mix(in oklab, var(--gold) 60%, var(--surface)); mask: var(--star) center / contain no-repeat; }
.q-sheet-play { gap: 12px; align-items: center; }
.q-sheet-play .q-play { width: 50px !important; height: 50px !important; }
.q-sheet-play p { min-width: 0px; }
.q-sheet-play b { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-sheet-play small { font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-panel .q-riwaya.pill { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); }
.q-panel .q-riwaya.pill button { height: 44px; border-radius: 11px; }
.q-sleep div { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.q-sleep button { border-radius: 9px; height: 30px; }
.q-dd-btn { height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2) !important; }
.q-dd-btn b { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-sc-name .t { height: 44px; }
.q-sc-bar { height: 3px; }
.q-sc p, .q-sc small { font-size: 0.72rem; }
.q-panel .q-side-btn { height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); background: none; }
.q-panel .q-side-btn:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 60%, transparent); }
.q-juz-map { gap: 5px; }
.q-juz-map a { border-radius: 50%; font-size: 0.66rem; box-shadow: inset 0 0 0 1px var(--line); }
.q-juz-map a.is-cur { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 3px color-mix(in oklab, var(--gold) 18%, transparent); }
.q-wird .q-side-btn { height: 40px; font-size: 0.82rem; }
.q-lines.fit .ql.short > span, .opening .q-lines.fit .ql > span, .q-lines:not(.fit) .ql > span { word-spacing: 0.32em; }
.q-page-no span { width: auto; height: auto; padding: 0px 4px; }
.q-page-no span svg { display: none; }
.q-page-no b { font: 500 .9rem/1 var(--ui); color: var(--muted); }
.q-page-no > i { position: relative; overflow: visible; }
.q-page-no > i::after { content: ""; position: absolute; top: 50%; inset-inline-end: -1px; width: 8px; height: 8px; margin-top: -4px; background: color-mix(in oklab, var(--gold) 55%, var(--surface)); mask: var(--star) center / contain no-repeat; }
[data-flip="swap"]::view-transition-old(root), [data-flip="swap"]::view-transition-new(root), [data-flip="swap"]::view-transition-old(page), [data-flip="swap"]::view-transition-new(page) { animation: auto ease 0s 1 normal none running none !important; }
[data-flip="swap"]::view-transition-old(leaf) { animation: 0.28s ease-in 0s 1 normal both running swapOut !important; }
[data-flip="swap"]::view-transition-new(leaf) { animation: 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) 0s 1 normal both running swapIn !important; }
@keyframes swapOut { 
  100% { opacity: 0; }
}
@keyframes swapIn { 
  0% { opacity: 0; transform: scale(0.985); }
}
.q-riwaya.pill { position: relative; isolation: isolate; }
.q-riwaya.pill::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 10px; background: var(--gold); transition: translate .55s var(--spring); }
.q-riwaya.pill:has([data-riwaya="warsh"][aria-checked="true"])::before { translate: -100%; }
.q-riwaya.pill button, .q-riwaya.pill button[aria-checked="true"] { position: relative; background: none !important; }
.q-riwaya.pill button b, .q-riwaya.pill button small { transition: color 0.35s; }
.q-riwaya.pill button[aria-checked="true"] b, .q-riwaya.pill button[aria-checked="true"] small { color: var(--gold-ink); }
.q-sleep div { position: relative; isolation: isolate; }
.q-sleep div::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(25% - 3.75px); border-radius: 8px; background: var(--gold); transition: translate .55s var(--spring); }
.q-sleep div:has(button:nth-child(2)[aria-pressed="true"])::before { translate: calc(-100% - 3px); }
.q-sleep div:has(button:nth-child(3)[aria-pressed="true"])::before { translate: calc(-200% - 6px); }
.q-sleep div:has(button:nth-child(4)[aria-pressed="true"])::before { translate: calc(-300% - 9px); }
.q-sleep button, .q-sleep button[aria-pressed="true"] { transition: color 0.35s; background: none !important; }
.q-sleep button[aria-pressed="true"] { color: var(--gold-ink); }
@media (prefers-reduced-motion: no-preference) {
  .q-dd-list:not([hidden]) { animation: listOpen .4s var(--spring) both; transform-origin: center top; }
  .q-dd-list:not([hidden]) li { animation: chipIn .4s var(--spring) both; }
  .q-dd-list:not([hidden]) li:nth-child(2) { animation-delay: 0.03s; }
  .q-dd-list:not([hidden]) li:nth-child(3) { animation-delay: 0.06s; }
  .q-dd-list:not([hidden]) li:nth-child(4) { animation-delay: 0.09s; }
  .q-dd-list:not([hidden]) li:nth-child(n+5) { animation-delay: 0.12s; }
  .q-pop:not([hidden]) { animation: dropIn .45s var(--spring) both; transform-origin: center top; }
  .q-dd-chev { transition: rotate .45s var(--spring); }
  .q-dd-btn[aria-expanded="true"] .q-dd-chev { rotate: 180deg; }
  .q-dd-list li[aria-selected="true"] { animation: chipIn .4s var(--spring) both; }
}
@keyframes listOpen { 
  0% { opacity: 0; transform: translateY(-6px) scaleY(0.92); }
}
@media (prefers-reduced-motion: no-preference) {
  .q-ayah-in.qv { animation: 0.6s cubic-bezier(0.2, 1.1, 0.3, 1) 0s 1 normal both running sheetRise !important; }
  .q-ayah .q-ayah-bg { animation: 0.35s ease 0s 1 normal both running qFade; }
  .q-hit, #qVerses li { animation: chipIn .5s var(--spring, ease) both; }
  #qVerses li:nth-child(2) .q-hit { animation-delay: 0.04s; }
  #qVerses li:nth-child(3) .q-hit { animation-delay: 0.08s; }
  #qVerses li:nth-child(n+4) .q-hit { animation-delay: 0.12s; }
  .q-tafsir p { animation: 0.5s ease 0s 1 normal both running tfIn; }
  .q-readbtn { transition: background .4s ease, box-shadow .4s ease, transform .5s var(--spring); }
  .q-readbtn:active { transform: scale(0.98); }
  .q-chip, .q-scard, .q-jcard { transition: transform .45s var(--spring), background .25s, box-shadow .25s; }
  .q-scard:active, .q-jcard:active { transform: scale(0.97); }
}
@keyframes sheetRise { 
  0% { opacity: 0; transform: translateY(26px) scale(0.98); }
}
.qv-tabs.q-tf-tabs { padding-bottom: 6px; }
.qv-tabs.q-tf-tabs button { height: 38px; line-height: 1; }
.qv-tabs .q-tf-thumb { border-radius: 3px; transform: scaleX(0.42); transform-origin: center center; top: auto !important; bottom: 2px !important; height: 3px !important; transition: inset-inline-start .5s var(--spring), width .5s var(--spring) !important; }
@media (max-width: 560px) {
  .q-read { width: calc(100% - 16px); }
  .q-page { padding: 12px 14px; border-radius: 20px; }
  .q-page::before { inset: 5px; border-radius: 16px; }
  .q-top { padding-inline: 4px 30px; padding-bottom: 8px; margin-bottom: 4px; font-size: 0.8rem; }
  .q-top .q-top-s, .q-top > :first-child { font-weight: 600; }
  .q-top-h { font-size: 0.74rem; }
  .q-lines .ql { height: calc(var(--qs) * 1.74); }
  .q-page-no { margin-top: 8px; }
  .q-page-no b { font-size: 0.82rem; }
  .q-hint { margin-top: 8px; }
}
@media (max-width: 380px) {
  .q-page { padding-inline: 12px; }
  .q-top { font-size: 0.76rem; padding-inline-end: 28px; }
}
.q-page { overflow: visible; box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -36px rgb(0 0 0 / .55) !important; }
:root[data-tone="light"] .q-page { box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -36px rgb(0 0 0 / .18) !important; }
.q-page::before { display: none !important; }
.q-top { border-bottom-color: var(--line); color: var(--faint); }
.q-top-s { color: var(--ink); }
.q-top-h i { color: var(--muted); }
.q-band { display: grid; grid-template-columns: 1fr clamp(170px, 40%, 330px) 1fr; align-items: center; gap: clamp(6px, 1.2vw, 12px); }
.q-band > i { height: 1px; background: linear-gradient(to right, transparent, color-mix(in oklab, var(--gold) 34%, transparent)); transform-origin: left center; animation: 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s 1 normal both running qsRule; }
.q-band > i:first-child { transform-origin: right center; }
.q-band > i:last-child { background: linear-gradient(to left, transparent, color-mix(in oklab, var(--gold) 34%, transparent)); }
.q-band > b { --cut: 9px; position: relative; height: 92%; background: color-mix(in oklab, var(--gold) 40%, var(--surface)); clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
.q-band > b > s { position: absolute; inset: 1px; background: color-mix(in oklab, var(--gold) 5%, var(--surface)); clip-path: polygon(calc(var(--cut) - .5px) 0, calc(100% - var(--cut) + .5px) 0, 100% calc(var(--cut) - .5px), 100% calc(100% - var(--cut) + .5px), calc(100% - var(--cut) + .5px) 100%, calc(var(--cut) - .5px) 100%, 0 calc(100% - var(--cut) + .5px), 0 calc(var(--cut) - .5px)); }
.q-band > b::before, .q-band > b::after { content: ""; position: absolute; z-index: 1; top: 50%; left: 13px; width: 8px; height: 8px; margin-top: -4px; rotate: 45deg; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent); background: radial-gradient(circle, color-mix(in oklab, var(--gold) 70%, transparent) 0 1.4px, transparent 1.8px); }
.q-band > b::after { left: auto; right: 13px; }
.q-band > i { position: relative; }
.q-band > i::after { content: ""; position: absolute; top: -1px; width: 3px; height: 3px; border-radius: 50%; background: color-mix(in oklab, var(--gold) 40%, transparent); }
.q-band > i:first-child::after { left: 0px; }
.q-band > i:last-child::after { right: 0px; }
.q-head .q-sura h2 { color: var(--ink); z-index: 1; }
.q-head .q-sura h2 .t.q-name { max-width: calc(-56px + clamp(170px, 40%, 330px)); height: 80% !important; transform: translateY(-1%) !important; }
@keyframes qsRule { 
  0% { transform: scaleX(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .q-band > i { animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 560px) {
  .q-band { grid-template-columns: 1fr 52% 1fr; gap: 5px; }
  .q-band > b { --cut: 7px; }
  .q-band > b::before, .q-band > b::after { width: 7px; height: 7px; margin-top: -3.5px; left: 10px; }
  .q-band > b::after { left: auto; right: 10px; }
  .q-head .q-sura h2 .t.q-name { max-width: calc(52% - 44px); }
}
.q-page-no > i::after { width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; mask: none; background: color-mix(in oklab, var(--gold) 40%, transparent); }
@media (max-width: 560px) {
  .q-top { gap: 6px; font-size: 0.72rem; }
  .q-top > * { white-space: nowrap; min-width: 0px; overflow: hidden; text-overflow: ellipsis; }
  .q-top-h { font-size: 0.68rem; }
}
.q-j-n { display: none; }
@media (max-width: 560px) {
  .q-j-w { display: none; }
  .q-j-n { display: inline; }
  .q-top > * { overflow: visible; text-overflow: clip; }
}

/* Meccan and Medinan: one balanced pair, the same lightness and softness in each theme, so neither
   shouts: a dusky rose for Meccan, a lapis blue for Medinan (green and orange were dropped) */
.q-item.is-makki, .q-scard.is-makki { --rv: oklch(.8 .07 12); }
.q-item.is-madani, .q-scard.is-madani { --rv: oklch(.8 .07 250); }
:root[data-tone="light"] .q-item.is-makki, :root[data-tone="light"] .q-scard.is-makki { --rv: oklch(.5 .1 12); }
:root[data-tone="light"] .q-item.is-madani, :root[data-tone="light"] .q-scard.is-madani { --rv: oklch(.5 .1 250); }

/* =================================================================================================
   THE SURAH CARDS, WITH DEPTH AND LIFE: a soft light in the surah's colour follows the pointer (or the
   finger) across the card, the star and the name sit at different depths and drift apart with it, the
   card rises on its shadow, and below the fold the cards flow up row by row as they come into view.
   ================================================================================================= */
.q-scard { --mx: 50%; --my: 0%; --px: 0; --py: 0; isolation: isolate; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgb(var(--hi) / .05), 0 14px 26px -22px rgb(0 0 0 / .85) !important;
  transition: transform .6s var(--spring, cubic-bezier(.2, .9, .3, 1.2)), box-shadow .45s ease !important; }
.q-scard::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in oklab, var(--rv, var(--gold)) 24%, transparent), transparent 70%);
  transition: opacity .5s ease; }
.q-scard:hover { transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rv, var(--gold)) 45%, transparent), inset 0 1px 0 rgb(var(--hi) / .07), 0 28px 40px -26px rgb(0 0 0 / .95) !important; }
.q-scard:hover::after, .q-scard:active::after { opacity: 1; }
:root[data-tone="light"] .q-scard { box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 24px -20px rgb(0 0 0 / .22) !important; }
:root[data-tone="light"] .q-scard:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rv, var(--gold)) 45%, transparent), 0 24px 36px -24px rgb(0 0 0 / .3) !important; }
/* two depths: the star comes forward with the pointer, the name leans the other way */
.q-scard .q-sn { translate: calc(var(--px) * 5px) calc(var(--py) * 4px); transition: translate .8s cubic-bezier(.2, .8, .2, 1); }
.q-scard .q-cal { translate: calc(var(--px) * -3px) calc(var(--py) * -2px); transition: translate .8s cubic-bezier(.2, .8, .2, 1), transform .5s var(--ease), color .4s; }
.q-scard .q-sn svg { transition: transform .9s var(--ease), fill .4s, filter .5s; }
.q-scard:hover .q-sn svg { filter: drop-shadow(0 4px 8px color-mix(in oklab, var(--rv, var(--gold)) 45%, transparent)); }
.q-scard .q-cal .t svg { transition: filter .5s; }
.q-scard:hover .q-cal .t svg { filter: drop-shadow(0 8px 10px rgb(0 0 0 / .6)); }
:root[data-tone="light"] .q-scard:hover .q-cal .t svg { filter: drop-shadow(0 6px 8px rgb(0 0 0 / .14)); }
/* flowing in */
.q-grid li { transition: opacity .6s ease var(--fd, 0ms), translate .9s cubic-bezier(.2, .9, .25, 1) var(--fd, 0ms); }
.q-grid li.q-wait { opacity: 0; translate: 0 26px; }
@media (prefers-reduced-motion: reduce) {
  .q-scard .q-sn, .q-scard .q-cal { translate: none; }
  .q-grid li.q-wait { opacity: 1; translate: none; }
}
/* on a phone: the star above, the name larger in the middle, and all three details on one centred line */
@media (max-width: 520px) {
  .q-grid:has(.q-scard) { gap: 10px; }
  .q-scard { padding: 14px 8px 11px; gap: 7px; border-radius: 16px; }
  .q-scard .q-sn { width: 30px; height: 30px; }
  .q-scard .q-cal { width: 100%; }
  .q-scard .q-cal .t { height: 42px; }
  .q-scard .q-rule { width: 64%; }
  .q-scard .q-meta { justify-content: center; flex-wrap: wrap; gap: 0; font-size: .7rem; }
  .q-scard .q-meta > * { margin: 0 !important; }
  .q-scard .q-meta span:nth-child(2) { display: inline; }
  .q-scard .q-meta > * + *::before { content: "·"; margin-inline: 6px; opacity: .55; color: var(--faint); }
  .q-scard:active { transform: scale(.97); }
}
/* the name stays perfectly still and sharp under the pointer: no drift, no lift, no shadow filter on
   it (moving or filtering the calligraphy re-renders it soft and the drifting felt dizzy); the card
   itself no longer rises either. The depth now comes from the light, the shadow and the edge alone. */
.q-scard, .q-scard:hover { transform: none !important; }
.q-scard .q-cal, .q-scard:hover .q-cal { translate: none !important; transform: none !important; }
.q-scard .q-sn { translate: none !important; }
.q-scard:hover .q-cal .t svg, :root[data-tone="light"] .q-scard:hover .q-cal .t svg { filter: none !important; }
@media (max-width: 520px) { .q-scard:active { transform: scale(.97) !important; } }

/* =================================================================================================
   THE READING DOCK, practical and calm: the two page arrows sit either side of where you are (surah,
   page, juz), with the line of the whole mushaf beneath to drag along; listening is its own round
   button at the end, set apart by a hairline. One edge, one surface.
   ================================================================================================= */
.q-dock { width: min(100% - 20px, 460px); grid-template-columns: 40px 1fr 40px auto; gap: 4px; padding: 6px 6px 6px 8px; border-radius: 20px; background: rgb(var(--glass) / .94);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 22px 44px -22px rgb(0 0 0 / .85); }
:root[data-tone="light"] .q-dock { box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 36px -22px rgb(0 0 0 / .25); }
.q-dock #qPrev { order: 1; } .q-dock .q-where { order: 2; } .q-dock #qNext { order: 3; } .q-dock .q-play { order: 4; }
/* the arrows: round, quiet, nudging the way they turn */
.q-dock .q-turn { width: 40px; height: 40px; border-radius: 50%; color: var(--muted); }
.q-dock .q-turn:hover { background: rgb(var(--hi) / .07); color: var(--ink); }
.q-dock .q-turn svg { width: 18px; height: 18px; transition: translate .45s var(--spring, cubic-bezier(.2, .9, .3, 1.3)); }
.q-dock #qPrev:hover svg { translate: 2px 0; }
.q-dock #qNext:hover svg { translate: -2px 0; }
.q-dock .q-turn:active { background: rgb(var(--hi) / .11); }
/* where you are: the surah in the ink colour, the page number large and plainly editable, the juz quiet */
.q-dock .q-where { gap: 6px; padding: 2px 4px 0; }
.q-dock .q-where label { gap: 6px; font-size: .74rem; }
.q-where-s { color: var(--ink); font-weight: 600; }
.q-where-j { color: var(--faint); }
.q-where-p { color: var(--faint); }
.q-where-p input { width: 2.9em; height: 26px; font: 700 1.02rem var(--ui); color: var(--ink); border-radius: 8px;
  box-shadow: inset 0 -1px 0 var(--line-2); transition: background .2s, box-shadow .2s; }
.q-where-p input:hover { background: rgb(var(--hi) / .06); box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--gold) 60%, transparent); }
/* the line of the mushaf: a fine rail, the part already passed in the light colour, a clear handle;
   the thirty juz marks appear only while you reach for the line or drag it */
.q-dock .q-track { height: 3px; margin-block: 2px 4px; border-radius: 3px; background: rgb(var(--hi) / .1); }
.q-dock .q-track > i { background: color-mix(in oklab, var(--gold) 80%, transparent); }
.q-dock .q-track b { top: -2px; height: 7px; width: 1px; opacity: 0; background: rgb(var(--hi) / .3); transition: opacity .3s; }
.q-dock .q-track:hover b, .q-dock .q-track.drag b { opacity: 1; }
.q-dock .q-track u { opacity: .55; }
.q-dock .q-track > i::after { width: 12px; height: 12px; margin-top: -6px; inset-inline-end: -6px; background: var(--ink);
  box-shadow: 0 0 0 3px rgb(var(--glass) / .95), 0 2px 6px rgb(0 0 0 / .4); transition: scale .35s var(--spring, ease); }
.q-dock .q-track:hover > i::after { scale: 1.15; }
.q-dock .q-track.drag > i::after { width: 12px; height: 12px; margin-top: -6px; inset-inline-end: -6px; scale: 1.35; }
/* listening: a full round button of its own, apart from the page controls */
.q-dock .q-play { position: relative; width: 44px; height: 44px; margin-inline-start: 6px; border-radius: 50% !important;
  background: var(--ink); color: var(--bg); box-shadow: none; transition: background .25s, color .25s, scale .4s var(--spring, ease); }
.q-dock .q-play::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: -7px; width: 1px; background: var(--line-2); }
.q-dock .q-play:hover { background: var(--gold-2); color: var(--bg); }
.q-dock .q-play:active { scale: .92; }
.q-dock .q-play.on { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.q-dock .q-play svg { width: 18px; height: 18px; }
@media (max-width: 520px) {
  .q-dock { grid-template-columns: 36px 1fr 36px auto; padding: 5px 5px 5px 6px; border-radius: 18px; }
  .q-dock .q-turn { width: 36px; height: 36px; }
  .q-dock .q-play { width: 42px; height: 42px; margin-inline-start: 4px; }
  .q-dock .q-where label { font-size: .7rem; gap: 4px; }
}
/* the page number's hint of being editable: a short straight line under it, not a curved edge */
.q-where-p input { box-shadow: none !important; background: linear-gradient(var(--line-2), var(--line-2)) center bottom / 60% 1px no-repeat; }
.q-where-p input:hover { background: linear-gradient(color-mix(in oklab, var(--gold) 60%, transparent), color-mix(in oklab, var(--gold) 60%, transparent)) center bottom / 70% 1px no-repeat, rgb(var(--hi) / .06); }
.q-where-p input:focus { background: rgb(var(--hi) / .07); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 70%, transparent) !important; }

/* =================================================================================================
   THE DOCK, DEEPER: a raised surface (a soft light along its top, two shadows beneath), a line that
   thickens under the hand and shows where a click would land, a tip naming page, surah and juz, the
   page number rolling in the way the page turned, and a play button that sits up like a pressed stone.
   ================================================================================================= */
.q-dock { border-radius: 22px; padding: 7px 7px 7px 9px;
  background: linear-gradient(180deg, rgb(var(--hi) / .07), rgb(var(--hi) / .015) 60%), rgb(var(--glass) / .95);
  box-shadow: inset 0 1px 0 rgb(var(--hi) / .09), inset 0 0 0 1px var(--line-2), 0 3px 8px rgb(0 0 0 / .35), 0 26px 50px -22px rgb(0 0 0 / .9); }
:root[data-tone="light"] .q-dock { background: linear-gradient(180deg, #fff, rgb(var(--glass) / .96));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--line-2), 0 2px 6px rgb(0 0 0 / .06), 0 22px 44px -22px rgb(0 0 0 / .28); }

/* the line: thicker under the hand, a faint mark where a click would land */
.q-dock .q-track { transition: height .3s var(--spring, ease), margin .3s; }
.q-dock .q-track:hover, .q-dock .q-track.drag { height: 6px; margin-block: 1px 3px; }
.q-dock .q-track > i { background: linear-gradient(to left, color-mix(in oklab, var(--gold) 45%, transparent), var(--gold)); transition: width .25s ease; }
.q-dock .q-track.drag > i { transition: none; }
.q-dock .q-track::after { content: ""; position: absolute; top: -4px; bottom: -4px; inset-inline-start: var(--hx, 0); width: 2px; margin-inline-start: -1px; border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 55%, transparent); opacity: 0; transition: opacity .2s; pointer-events: none; }
.q-dock .q-track.peek:hover::after { opacity: 1; }
.q-dock .q-track.drag::after { opacity: 0; }
/* the tip above it: a small raised label */
.q-dock .q-track-tip { bottom: 20px; padding: 6px 11px; border-radius: 10px; font: 500 .74rem var(--ui); color: var(--muted);
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 22px -10px rgb(0 0 0 / .7); pointer-events: none; }
.q-dock .q-track-tip .tp { color: var(--ink); font-weight: 700; }
/* above the whole dock, clear of the surah and page */
.q-dock .q-track-tip { bottom: 50px; }
:root[data-tone="light"] .q-dock .q-track-tip { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 22px -12px rgb(0 0 0 / .25); }

/* the page number and surah roll in the way the page turned */
.q-dock[data-dir="fwd"] .q-where-p input, .q-dock[data-dir="fwd"] .q-where-s { animation: numFwd .45s cubic-bezier(.2, .9, .3, 1) both; }
.q-dock[data-dir="back"] .q-where-p input, .q-dock[data-dir="back"] .q-where-s { animation: numBack .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes numFwd { from { opacity: 0; translate: 0 9px; } }
@keyframes numBack { from { opacity: 0; translate: 0 -9px; } }

/* the arrows give under the finger */
.q-dock .q-turn { transition: background .2s, color .2s, scale .35s var(--spring, ease); }
.q-dock .q-turn:active { scale: .88; }

/* the play button: raised, with a soft light on its upper side */
.q-dock .q-play { background: radial-gradient(120% 120% at 35% 25%, color-mix(in oklab, var(--ink) 100%, #fff 10%), color-mix(in oklab, var(--ink) 82%, var(--bg)));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 4px 10px -3px rgb(0 0 0 / .55); transition: translate .35s var(--spring, ease), box-shadow .3s, scale .35s var(--spring, ease); }
.q-dock .q-play:hover { translate: 0 -1px; background: radial-gradient(120% 120% at 35% 25%, #fff, color-mix(in oklab, var(--ink) 88%, var(--bg)));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 8px 16px -5px rgb(0 0 0 / .6); }
:root[data-tone="light"] .q-dock .q-play { background: radial-gradient(120% 120% at 35% 25%, #3a3a3e, var(--ink)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 5px 12px -4px rgb(0 0 0 / .35); }
.q-dock .q-play.on { background: none; translate: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (prefers-reduced-motion: reduce) { .q-dock .q-where-p input, .q-dock .q-where-s { animation: none !important; } }

/* =================================================================================================
   ONE SCREEN: while reading, the page and the panels beside it are all there is (no footer, no
   scrolling); the page is sized in quran.js to end above the bottom edge. Turning, listening, the
   page number and «قرأتُ الصفحة» live in the page's own foot, under its last line.
   ================================================================================================= */
html:has(body.q-reading), body.q-reading { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.q-reading .foot, body.q-reading .q-hint { display: none; }
body.q-reading main { height: 100dvh; min-height: 0; padding: 82px 0 0; box-sizing: border-box; }
body.q-reading .q-read { margin-top: 0; }
body.q-reading .q-mini-bar { margin-bottom: 10px; }
.q-page { --q-gap: 12px; width: 100%; margin-inline: auto; justify-self: center; }
/* every pixel of height goes to the words: a tighter margin round the text, and lines set a little closer */
body.q-reading .q-page { padding-top: clamp(10px, 1.6vw, 16px); padding-bottom: clamp(8px, 1.2vw, 12px); }
body.q-reading .q-top { margin-bottom: clamp(4px, .8vw, 8px); }
@media (min-width: 561px) { body.q-reading .q-lines .ql { height: calc(var(--qs) * 1.6); } }
.q-follow { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* the foot of the page: turning and listening on one side, the page number in the middle,
   the reading mark and the next page on the other */
.q-foot { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  margin-top: clamp(6px, 1vw, 10px); padding-top: clamp(6px, 1vw, 9px); border-top: 1px solid var(--line); }
.q-foot-s, .q-foot-e { display: flex; align-items: center; gap: 4px; min-width: 0; }
.q-foot-e { justify-content: flex-end; }
.q-foot .q-turn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--muted);
  transition: background .2s, color .2s, scale .35s var(--spring, ease); }
.q-foot .q-turn:hover { background: rgb(var(--hi) / .07); color: var(--ink); }
.q-foot .q-turn:active { scale: .88; }
.q-foot .q-turn[disabled] { opacity: .25; pointer-events: none; }
.q-foot .q-turn svg, .q-foot .q-play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.q-foot .q-turn svg { transition: translate .45s var(--spring, ease); }
.q-foot #qPrev:hover svg { translate: 2px 0; }
.q-foot #qNext:hover svg { translate: -2px 0; }
.q-foot .q-play { width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0 !important; border-radius: 50% !important; color: var(--ink); background: none;
  box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s, color .25s, box-shadow .25s, scale .35s var(--spring, ease); }
.q-foot .q-play svg { width: 15px; height: 15px; }
.q-foot .q-play:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 60%, transparent); }
.q-foot .q-play:active { scale: .9; }
.q-foot .q-play.on { background: var(--ink); color: var(--bg); box-shadow: none; }

/* the page number, with the count of the whole mushaf under it; it opens the box for going elsewhere */
.q-pno { display: grid; justify-items: center; gap: 2px; min-width: 66px; padding: 4px 12px; border-radius: 12px; line-height: 1.1; transition: background .2s; }
.q-pno b { font: 600 1rem var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.q-pno small { font: 400 .64rem var(--ui); color: var(--faint); }
.q-pno:hover, .q-pno[aria-expanded="true"] { background: rgb(var(--hi) / .06); }
.q-foot[data-dir="fwd"] .q-pno b { animation: numFwd .45s cubic-bezier(.2, .9, .3, 1) both; }
.q-foot[data-dir="back"] .q-pno b { animation: numBack .45s cubic-bezier(.2, .9, .3, 1) both; }

/* «قرأتُ الصفحة»: a small pill with a round mark; once pressed the mark fills and the words change */
.q-foot .q-readbtn { display: inline-flex; align-items: center; gap: 7px; width: auto; height: 34px; margin: 0; padding: 0 12px 0 6px; padding-inline: 6px 12px; border-radius: 999px;
  background: none !important; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); font: 500 .78rem var(--ui); white-space: nowrap; transform: none;
  transition: box-shadow .3s, color .3s, background .3s; }
.q-foot .q-readbtn:hover { transform: none; color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 45%, transparent); }
.q-foot .q-rb-ic { width: 22px; height: 22px; flex: none; border-radius: 50%; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.q-foot .q-rb-ic svg { width: 13px; height: 13px; stroke-width: 2.6; }
.q-foot .q-rb-t { display: block; }
.q-foot .q-readbtn.on { background: color-mix(in oklab, var(--ink) 8%, transparent) !important; color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 30%, transparent); }
.q-foot .q-readbtn.on .q-rb-t { color: var(--ink); }
.q-foot .q-readbtn.on .q-rb-ic { background: var(--ink); color: var(--bg); box-shadow: none; }

/* the box for going to another page: the number to type, and the line of the mushaf to drag along */
.q-jump { position: absolute; z-index: 6; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; width: min(340px, calc(100vw - 32px));
  display: grid; gap: 14px; padding: 14px 16px 12px; border-radius: 16px; background: var(--surface-2, var(--surface));
  box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -20px rgb(0 0 0 / .8); animation: qRise .3s cubic-bezier(.2, .9, .3, 1) both; }
:root[data-tone="light"] .q-jump { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -20px rgb(0 0 0 / .25); }
.q-jump[hidden] { display: none; }
.q-jump-no { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 .84rem var(--ui); color: var(--muted); }
.q-jump-no input { width: 4.4em; height: 36px; padding: 0; border: 0; border-radius: 10px; text-align: center; font: 600 1rem var(--ui); color: var(--ink);
  background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px var(--line-2); }
.q-jump-no input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
.q-jump .q-track { height: 4px; margin: 6px 0 0; border-radius: 4px; background: rgb(var(--hi) / .1); }
.q-jump .q-track > i { background: var(--ink); }
.q-jump .q-track > i::after { content: ""; position: absolute; inset-inline-end: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 3px var(--surface-2, var(--surface)); }
.q-jump .q-track b { top: -2px; width: 1px; height: 8px; background: rgb(var(--hi) / .22); }
.q-jump .q-track u { opacity: .5; }
.q-jump .q-track-tip { bottom: 16px; padding: 5px 10px; border-radius: 9px; font: 500 .74rem var(--ui); color: var(--muted); background: var(--surface-3, var(--surface));
  box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 22px -10px rgb(0 0 0 / .7); }
.q-jump .q-track-tip .tp { color: var(--ink); font-weight: 700; }
.q-jump-ends { display: flex; justify-content: space-between; gap: 8px; margin: 0; font: .66rem var(--ui); color: var(--faint); }
.q-jump-ends span:nth-child(2) { opacity: .8; }

/* on a phone the width is what limits the words: the page reaches nearer the screen's edges, and the
   foot lets its middle take what room is left so the reading mark never runs into the page number */
@media (max-width: 560px) {
  body.q-reading .q-read { width: calc(100% - 8px); }
  body.q-reading .q-page { padding-inline: 8px; border-radius: 16px; }
  .q-foot { grid-template-columns: auto 1fr auto; }
  .q-pno { justify-self: center; }
}
@media (max-width: 380px) {
  .q-foot { gap: 4px; }
  .q-foot .q-turn, .q-foot .q-play { width: 34px; height: 34px; }
  .q-foot .q-readbtn { padding-inline: 5px 9px; gap: 5px; font-size: .72rem; }
  .q-pno { min-width: 54px; padding-inline: 8px; }
}

/* the lines are written in, right to left as they are read, one after another down the page;
   sharp all the way (no blur), and quick enough that the page is never left waiting half-drawn */
.q-lines:not(.loading) .ql { animation: qLineIn .46s cubic-bezier(.3, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes qLineIn { from { opacity: 0; clip-path: inset(-60% 0 -60% 100%); } 40% { opacity: 1; } to { clip-path: inset(-60% 0 -60% 0); } }
@media (prefers-reduced-motion: reduce) { .q-lines:not(.loading) .ql { animation: none !important; } }

/* =================================================================================================
   THE LEAF (5 Nov 2026): the reading page as a printed mushaf holds it. The text sits inside a fine
   double frame whose corners are cut in a concave arc; the surah heading is one long band closed at
   each end in an ogee point with the name in a pointed panel; the basmala is the Madinah hand; the
   page stands upright on a wide screen and, on a phone, its lines open out to fill the screen. The
   page rests in a still light from above: no motes, no coloured glow.
   ================================================================================================= */
body.quran { --leaf: var(--surface);
  background: radial-gradient(80vmax 50vmax at 50% -12%, rgb(var(--lamp, 200 200 205) / .07), transparent 70%), var(--bg) !important; background-attachment: fixed !important; }
/* the white theme is the site's own white, as on every other page: no cream */
:root[data-tone="light"] body.quran { --leaf: var(--surface);
  background: var(--bg) !important; }
.q-motes { display: none !important; }
body.quran .q-page { background: var(--leaf) !important; }
:root[data-tone="light"] body.quran .q-page { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07), 0 1px 2px rgb(0 0 0 / .04), 0 22px 44px -30px rgb(40 36 28 / .28) !important; }

/* the frame round the text: two rules, the corners cut in a concave arc */
.q-lines { position: relative; }
.q-frame, .q-frame::before { --fr: calc(var(--qs) * .46); position: absolute; pointer-events: none; box-sizing: border-box;
  border: 1px solid var(--fc); background-origin: border-box; background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 0 0, transparent calc(var(--fr) - .6px), var(--fc) calc(var(--fr) - .5px) calc(var(--fr) + .5px), transparent calc(var(--fr) + .6px)),
    radial-gradient(circle at 100% 0, transparent calc(var(--fr) - .6px), var(--fc) calc(var(--fr) - .5px) calc(var(--fr) + .5px), transparent calc(var(--fr) + .6px)),
    radial-gradient(circle at 0 100%, transparent calc(var(--fr) - .6px), var(--fc) calc(var(--fr) - .5px) calc(var(--fr) + .5px), transparent calc(var(--fr) + .6px)),
    radial-gradient(circle at 100% 100%, transparent calc(var(--fr) - .6px), var(--fc) calc(var(--fr) - .5px) calc(var(--fr) + .5px), transparent calc(var(--fr) + .6px));
  background-size: calc(var(--fr) + 2px) calc(var(--fr) + 2px);
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  -webkit-mask: radial-gradient(circle at 0 0, transparent calc(var(--fr) - .6px), #000 calc(var(--fr) - .5px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent calc(var(--fr) - .6px), #000 calc(var(--fr) - .5px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--fr) - .6px), #000 calc(var(--fr) - .5px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--fr) - .6px), #000 calc(var(--fr) - .5px)) 100% 100% / 51% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent calc(var(--fr) - .6px), #000 calc(var(--fr) - .5px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent calc(var(--fr) - .6px), #000 calc(var(--fr) - .5px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--fr) - .6px), #000 calc(var(--fr) - .5px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--fr) - .6px), #000 calc(var(--fr) - .5px)) 100% 100% / 51% 51% no-repeat; }
.q-frame { --fc: color-mix(in oklab, var(--ink) 30%, transparent); inset: calc(var(--qs) * -.5) calc(var(--qs) * -.42); transition: opacity .4s; }
.q-frame::before { --fc: color-mix(in oklab, var(--ink) 15%, transparent); --fr: calc(var(--qs) * .46 - 4px); content: ""; inset: 3px; }
.q-lines.loading .q-frame { opacity: 0; }
body.q-reading .q-page { padding-inline: clamp(16px, 3vw, 30px); }
body.q-reading .q-top { margin-bottom: clamp(12px, 1.8vw, 18px); }
.q-foot { margin-top: clamp(14px, 2vw, 20px) !important; border-top: 0 !important; }
@media (max-width: 560px) {
  body.q-reading .q-page { padding-inline: 13px; }
  .q-frame { inset: calc(var(--qs) * -.42) -8px; }
}

/* on a phone the lines open out to the foot of the screen (the height comes from quran.js) */
body.quran .q-lines[style*="--qlh"] .ql { height: var(--qlh); }

/* the basmala, from the first page's font, as large as the words of the page */
.q-basmala > span[aria-hidden] { font-family: inherit !important; font-size: 1em !important; }
.q-bsm { display: inline-block; font-size: 1.22em; line-height: 1; word-spacing: .1em; color: var(--ink); }
.riwaya-warsh .q-basmala > span[aria-hidden] { font-family: "Hafs", var(--text) !important; }

/* the surah band: ogee ends, two rules with a vine between them, the name in a pointed panel */
.q-head .q-sura { height: calc(var(--qs) * 1.66) !important; }
.q-band.q-bd { --bc: color-mix(in oklab, var(--ink) 46%, transparent); --bc2: color-mix(in oklab, var(--ink) 22%, transparent);
  display: flex; align-items: stretch; gap: 0; grid-template-columns: none; }
.q-bd svg { display: block; height: 100%; flex: none; overflow: visible; }
.q-bd svg path, .q-bd svg circle { vector-effect: non-scaling-stroke; }
.q-bd-cap { width: calc(var(--qs) * .75); }
.q-bd-cap:first-child { scale: -1 1; }
.q-bd-cap .o { fill: none; stroke: var(--bc); stroke-width: 1; }
.q-bd-cap .n { fill: none; stroke: var(--bc2); stroke-width: 1; }
.q-bd circle { fill: var(--bc); }
.q-bd-cart { width: calc(var(--qs) * 7.5); }
.q-bd-cart .ro { stroke: var(--bc); stroke-width: 1; }
.q-bd-cart .ri { stroke: var(--bc2); stroke-width: 1; }
.q-bd-cart .p { fill: var(--leaf, var(--surface)); stroke: var(--bc); stroke-width: 1.1; }
.q-bd-cart .n { fill: color-mix(in oklab, var(--ink) 5%, transparent); stroke: var(--bc2); stroke-width: 1; }
.q-band.q-bd > i { position: relative; flex: 1; height: auto; min-width: 0; background: none; animation: none; border-block: 1px solid var(--bc); }
.q-band.q-bd > i::before { content: ""; position: absolute; inset: calc(var(--qs) * .1125 - 1px) 0; border-block: 1px solid var(--bc2); }
.q-band.q-bd > i::after { content: ""; position: absolute; inset: calc(var(--qs) * .26) 0; width: auto; height: auto; border-radius: 0; background: var(--bc2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath d='M0 12C8 4 16 4 24 12S40 20 48 12' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M12 7c2-3.2 5.2-3.8 7.4-3.3C18.3 6.4 15.2 7.6 12 7zM36 17c-2 3.2-5.2 3.8-7.4 3.3C29.7 17.6 32.8 16.4 36 17z'/%3E%3C/svg%3E") center / auto 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath d='M0 12C8 4 16 4 24 12S40 20 48 12' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M12 7c2-3.2 5.2-3.8 7.4-3.3C18.3 6.4 15.2 7.6 12 7zM36 17c-2 3.2-5.2 3.8-7.4 3.3C29.7 17.6 32.8 16.4 36 17z'/%3E%3C/svg%3E") center / auto 100% repeat-x; }
.q-head .q-sura h2 { color: var(--ink); }
.q-head .q-sura h2 .t.q-name { max-width: calc(var(--qs) * 5.6) !important; height: 84% !important; transform: translateY(3%) !important; }
.q-bd-cap { width: calc(var(--qs) * .83); }
.q-bd-cart { width: calc(var(--qs) * 8.3); }
.q-band.q-bd > i::before { inset: calc(var(--qs) * .124 - 1px) 0; }
.q-band.q-bd > i::after { inset: calc(var(--qs) * .3) 0; }

/* ---------- the panels beside the page ---------- */
.q-pn { gap: 12px !important; }
.q-pn h3 { justify-content: space-between; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.q-pn h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.q-pn h3 small { font: 400 .68rem var(--ui); color: var(--faint); margin-inline-start: auto; }
.q-pn .q-sc { gap: 5px; }
.q-pn .q-sc-name .t { height: 46px; }
.q-pn .q-sc small { display: flex; justify-content: space-between; width: 100%; }
/* (the surah list under the name; its look is set further down) */
.q-pn .q-sheet-play { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.q-pn .q-sheet-play .q-play { width: 48px !important; height: 48px !important; }
.q-pn .q-dd-btn { height: 48px; grid-template-columns: minmax(0, 1fr) auto; padding: 0 12px; }
.q-pn .q-dd-btn p { display: grid; gap: 1px; margin: 0; min-width: 0; line-height: 1.3; }
.q-pn .q-dd-btn small { font: 400 .66rem var(--ui); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-pn .q-dd-btn b { font-size: .84rem; }
.q-pn .q-now { padding: 10px 12px !important; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line) !important; }
.q-pn .q-now-ref { margin: 0; font: 500 .8rem var(--ui); color: var(--ink); }
.q-pn .q-sleep > span { font-size: .7rem; }
.q-pn .q-sleep button { font-size: .66rem; padding: 0 2px; white-space: nowrap; }
.q-pn .q-side-btn { height: 42px !important; font-size: .8rem; }
/* the khatma beside the page */
.q-wird-lead { margin: 0; font-size: .78rem; line-height: 1.7; color: var(--muted); }
.q-wird-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.q-wird-days button { display: grid; justify-items: center; gap: 0; padding: 8px 0 7px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, box-shadow .2s; }
.q-wird-days button:hover { background: rgb(var(--hi) / .06); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 45%, transparent); }
.q-wird-days b { font: 600 1rem/1.2 var(--ui); color: var(--ink); }
.q-wird-days small { font-size: .64rem; color: var(--faint); }
.q-wird-card { display: flex; align-items: center; gap: 12px; }
.q-wird-ring { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; color: var(--ink); }
.q-wird-ring > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.q-wird-ring circle { fill: none; stroke-width: 3; }
.q-wird-ring .bg { stroke: var(--line-2); }
.q-wird-ring .fg { stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.q-wird-ring b { font: 600 .9rem/1 var(--ui); font-variant-numeric: tabular-nums; }
.q-wird-ring b small { font-size: .62rem; font-weight: 400; color: var(--faint); }
.q-wird-ring > svg:not(:first-child) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.q-wird-card p { display: grid; gap: 2px; margin: 0; min-width: 0; }
.q-wird-card b { font: 600 .9rem var(--ui); color: var(--ink); }
.q-wird-card small { font-size: .72rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-wird-next.is-here { opacity: .6; }
.q-wird-all { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 2px 0 0; font-size: .68rem; color: var(--faint); }
.q-wird-due { margin: 0; font-size: .7rem; color: var(--muted); }
.q-wird-end { justify-self: center; font-size: .68rem; color: var(--faint); padding: 2px 6px; }
.q-wird-end:hover { color: var(--ink); }
.q-wird .q-paper summary { font-size: .7rem; }
/* the khatma window on the index, in the same words as the panel */
.q-khatma.q-kw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 560px; padding: 20px; text-align: start; }
.q-khatma.q-kw.none { text-align: center; }
.q-kw h2 { justify-content: space-between; }
.q-kw.none h2 { justify-content: center; }
.q-kw .q-wird-days { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.q-kw .q-wird-days b { font-size: 1.1rem; }
.q-kw .q-wird-card { gap: 14px; }
.q-kw .q-wird-ring { width: 60px; height: 60px; }
.q-kw .q-wird-card p { flex: 1; }
.q-kw .q-wird-card b { font-size: .98rem; }
.q-kw .q-wird-card .btn { flex: none; height: 42px; padding-inline: 18px; font-size: .9rem; }
.q-kw .q-wird-all { font-size: .74rem; }
.q-kw-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.q-kw-foot .q-paper { flex: 1; min-width: 0; }
.q-kw-foot .q-wird-end { flex: none; }
@media (max-width: 520px) {
  .q-kw .q-wird-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .q-kw .q-wird-card { flex-wrap: wrap; }
  .q-kw .q-wird-card .btn { flex-basis: 100%; }
  .q-kw-foot { flex-direction: column; align-items: stretch; }
}
@media (max-width: 1179px) { .q-pn .q-juz-map { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; } }
.q-juz-map a.is-full { color: var(--bg); background: color-mix(in oklab, var(--ink) 70%, transparent) !important; }
@media (prefers-reduced-motion: reduce) { .q-frame, .q-wird-ring .fg { transition: none !important; } }

/* ---------- second pass (5 Nov): larger words on one screen, a smaller basmala, a larger name,
   the panels narrower and nearer the page, the recitation in one block ---------- */
.q-bsm { font-size: 1em; }
.q-head .q-sura { height: calc(var(--qs) * 1.82) !important; }
.q-head .q-sura h2 .t.q-name { max-width: calc(var(--qs) * 6.8) !important; height: 96% !important; transform: translateY(4%) !important; }
.q-bd-cap { width: calc(var(--qs) * .9); }
.q-bd-cart { width: calc(var(--qs) * 9.4); }
.q-band.q-bd > i::before { inset: calc(var(--qs) * .136 - 1px) 0; }
.q-band.q-bd > i::after { inset: calc(var(--qs) * .34) 0; }
/* every pixel of height to the words: tighter lines on wide screens, less room above and below */
@media (min-width: 561px) { body.q-reading .q-lines .ql { height: calc(var(--qs) * 1.52); } }
body.q-reading .q-page { padding-top: 10px; padding-bottom: 6px; }
body.q-reading .q-top { margin-bottom: 10px; }
.q-foot { margin-top: 10px !important; padding-top: 2px !important; }
.opening .q-lines { padding-block: 3% 2% !important; }
body.q-reading main { padding-top: 76px; }
@media (max-width: 560px) {
  body.q-reading .q-page { padding-inline: 10px; }
  .q-frame { inset: calc(var(--qs) * -.4) -6px; }
}
/* the foot keeps the turns, the page number and «قرأتُ الصفحة»; listening lives in the panel */
.q-foot-s:empty { display: none; }

/* the panels: narrower, nearer the page, smaller type */
@media (min-width: 1180px) {
  /* the panels stand right against the leaf, whatever width the leaf takes */
  .q-stage { display: flex !important; justify-content: center; align-items: flex-start; gap: 18px !important; }
  .q-stage > .q-side-r { order: 1; flex: 0 0 212px; }
  .q-stage > .q-page { order: 2; flex: 0 1 760px; min-width: 0; margin-inline: 0 !important; }
  .q-stage > .q-side-l { order: 3; flex: 0 0 212px; }
  .q-side { top: 88px; }
}
.q-pn { padding: 14px 12px !important; gap: 10px !important; border-radius: 18px !important; }
.q-pn h3 { font-size: .7rem; padding-top: 10px; margin-top: 2px; }
.q-pn .q-sc-name .t { height: 38px; }
.q-pn .q-sc p, .q-pn .q-sc small { font-size: .68rem; }
/* «اذهب إلى سورة»: a list under the surah's name, with its words above it so it cannot be taken for the page turn */
.q-sc-go { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; margin-top: 6px; width: 100%; text-align: start; }
.q-sc-go > span { font: 400 .68rem var(--ui); color: var(--faint); }
.q-rc { display: grid; gap: 8px; }
.q-pn .q-rc .q-sheet-play { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; }
.q-pn .q-rc .q-sheet-play .q-play { width: 42px !important; height: 42px !important; }
.q-pn .q-rc .q-sheet-play .q-play svg { width: 17px; height: 17px; }
.q-rc .q-sheet-play p { display: grid; gap: 1px; margin: 0; min-width: 0; }
.q-rc .q-sheet-play b { font: 600 .82rem/1.35 var(--ui); color: var(--ink); white-space: normal; }
.q-rc .q-sheet-play small { font-size: .68rem; color: var(--faint); white-space: normal; }
.q-rc .q-now-bar[hidden] { display: none; }
.q-rc .q-now-by { font-size: .66rem; color: var(--muted); }
.q-rc .q-now-by[hidden] { display: none; }
.q-pn .q-rc .q-dd-btn { height: auto; min-height: 38px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 6px 10px; gap: 7px; border-radius: 11px; }
.q-pn .q-rc .q-dd-btn b { font: 500 .76rem/1.35 var(--ui); white-space: normal; overflow: visible; text-overflow: clip; }
.q-pn .q-rc .q-dd-ic svg, .q-pn .q-rc .q-dd-chev { width: 15px; height: 15px; }
.q-pn .q-dd-list { padding: 4px; max-height: 50vh; overflow: auto; }
.q-pn .q-dd-list li { padding: 7px 26px 7px 10px; font-size: .76rem; line-height: 1.35; }
.q-pn .q-dd-list li[aria-selected="true"]::before { inset-inline-start: 9px; width: 6px; height: 6px; margin-top: -3px; }
.q-rc .q-sleep { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.q-rc .q-sleep > span { font-size: .68rem; color: var(--faint); }
.q-rc .q-sleep div { padding: 2px; border-radius: 10px; }
.q-rc .q-sleep button { height: 26px; font-size: .64rem !important; }
.q-rc .q-sleep div::before { top: 2px; bottom: 2px; inset-inline-start: 2px; width: calc(25% - 2.5px); border-radius: 8px; }
.q-rc .q-sleep div:has(button:nth-child(2)[aria-pressed="true"])::before { translate: calc(-100% - 2px); }
.q-rc .q-sleep div:has(button:nth-child(3)[aria-pressed="true"])::before { translate: calc(-200% - 4px); }
.q-rc .q-sleep div:has(button:nth-child(4)[aria-pressed="true"])::before { translate: calc(-300% - 6px); }
.q-rc-range { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 10px; font: 500 .72rem var(--ui); color: var(--muted); transition: background .2s, color .2s; }
.q-rc-range:hover { background: rgb(var(--hi) / .06); color: var(--ink); }
.q-rc-range svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.q-pn .q-riwaya.pill button { height: 38px !important; }
.q-pn .q-riwaya.pill b { font-size: .8rem; }
.q-pn .q-riwaya.pill small { font-size: .6rem; }
.q-pn .q-wird-lead { font-size: .72rem; }
.q-pn .q-wird-days b { font-size: .9rem; }
.q-pn .q-wird-days button { padding: 6px 0 5px; border-radius: 10px; }
.q-pn .q-wird-ring { width: 46px; height: 46px; }
.q-pn .q-wird-card b { font-size: .82rem; }
.q-pn .q-side-btn { height: 36px !important; font-size: .74rem; border-radius: 10px !important; }
.q-pn .q-juz-map { gap: 4px; }
.q-pn .q-juz-map a { font-size: .62rem; }

/* ---------- the lists (reader, surah): slow, soft and calm ---------- */
.q-sc-go .q-dd-btn { height: 38px; min-height: 0; grid-template-columns: minmax(0, 1fr) auto; padding: 0 12px; border-radius: 11px; }
.q-sc-go .q-dd-btn b { font: 500 .8rem var(--ui); }
.q-dd-list { max-height: min(46vh, 320px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -18px rgb(0 0 0 / .65); }
:root[data-tone="light"] .q-dd-list { box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 34px -18px rgb(0 0 0 / .25); }
.q-dd-suras li { display: flex; align-items: center; gap: 10px; }
.q-dd-suras li i { flex: none; width: 2.1em; font: 500 .66rem var(--ui); font-style: normal; color: var(--faint); text-align: center; font-variant-numeric: tabular-nums; }
.q-dd-suras li[aria-selected="true"] i { color: var(--gold-2); }
.q-dd-suras li[aria-selected="true"]::before { display: none; }
.q-dd-list li { transition: background .35s ease, color .35s ease; }
@media (prefers-reduced-motion: no-preference) {
  .q-dd-list:not([hidden]) { animation: ddIn .62s cubic-bezier(.22, 1, .36, 1) both; transform-origin: center top; }
  .q-dd-list:not([hidden]).is-closing { animation: ddOut .32s cubic-bezier(.4, 0, .6, 1) both; }
  .q-dd-list:not([hidden]) li, .q-dd-list li[aria-selected="true"] { animation: none; }
  .q-dd-list:not(.q-dd-suras):not([hidden]) li { animation: ddItem .6s cubic-bezier(.22, 1, .36, 1) both; }
  .q-dd-list:not(.q-dd-suras):not([hidden]) li:nth-child(2) { animation-delay: .05s; }
  .q-dd-list:not(.q-dd-suras):not([hidden]) li:nth-child(3) { animation-delay: .1s; }
  .q-dd-list:not(.q-dd-suras):not([hidden]) li:nth-child(4) { animation-delay: .15s; }
  .q-dd-list:not(.q-dd-suras):not([hidden]) li:nth-child(n+5) { animation-delay: .2s; }
  .q-dd-chev { transition: rotate .6s cubic-bezier(.22, 1, .36, 1); }
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes ddOut { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes ddItem { from { opacity: 0; transform: translateY(-4px); } }
.q-dd:has(.q-dd-list:not([hidden])) { z-index: 40; }

/* ---------- «اذهب إلى سورة»: the button in the panel, and the window of all the surahs ---------- */
.q-sc-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border-radius: 11px; text-align: start;
  box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); transition: background .35s ease, box-shadow .35s ease; }
.q-sc-open:hover { background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 45%, transparent); }
.q-sc-open b { font: 500 .82rem var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-sc-open svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; }
.q-sd[hidden] { display: none; }
.q-sd { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; justify-items: center; }
.q-sd-bg { position: absolute; inset: 0; background: rgb(0 0 0 / .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
:root[data-tone="light"] .q-sd-bg { background: rgb(40 36 28 / .28); }
.q-sd-box { position: relative; display: flex; flex-direction: column; width: min(100%, 460px); height: min(86dvh, 720px); border-radius: 22px 22px 0 0; overflow: hidden;
  background: var(--surface-2, var(--surface)); box-shadow: inset 0 0 0 1px var(--line-2), 0 -20px 60px -20px rgb(0 0 0 / .7); padding-bottom: env(safe-area-inset-bottom); }
.q-sd-box header { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px 12px; }
.q-sd-box h2 { margin: 0; font: 600 1rem var(--ui); color: var(--ink); }
.q-sd-box .q-x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: background .25s, color .25s; }
.q-sd-box .q-x:hover { background: rgb(var(--hi) / .07); color: var(--ink); }
.q-sd-box .q-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.q-sd-find { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; margin: 4px 14px 8px; padding: 0 14px; border-radius: 12px; background: rgb(var(--hi) / .04); box-shadow: inset 0 0 0 1px var(--line-2); }
.q-sd-find:focus-within { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 55%, transparent); }
.q-sd-find svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; }
.q-sd-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 400 .92rem var(--ui); outline: none; }
.q-sd-find input::placeholder { color: var(--faint); }
.q-sd-list { flex: 1; min-height: 0; margin: 0; padding: 0 8px 14px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.q-sd-list li[hidden] { display: none; }
.q-sd-list a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; grid-template-areas: "n b e" "n s e"; align-items: center; column-gap: 10px; padding: 9px 10px; border-radius: 12px; transition: background .3s ease; }
.q-sd-list a:hover, .q-sd-list a:focus-visible { background: rgb(var(--hi) / .06); outline: none; }
.q-sd-list i { grid-area: n; justify-self: center; font: 500 .74rem var(--ui); font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }
.q-sd-list b { grid-area: b; font: 500 .98rem var(--ui); color: var(--ink); }
.q-sd-list small { grid-area: s; font-size: .7rem; color: var(--faint); }
.q-sd-list em { grid-area: e; font: 400 .7rem var(--ui); font-style: normal; color: var(--faint); }
.q-sd-list a[aria-current="true"] { background: rgb(var(--hi) / .07); box-shadow: inset 0 0 0 1px var(--line-2); }
.q-sd-list a[aria-current="true"] i { color: var(--ink); }
.q-sd-none { margin: 0; padding: 30px 16px; text-align: center; font-size: .86rem; color: var(--faint); }
.q-sd-none[hidden] { display: none; }
@media (min-width: 700px) { .q-sd { align-items: center; } .q-sd-box { border-radius: 20px; height: min(80dvh, 680px); padding-bottom: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .q-sd:not([hidden]) .q-sd-bg { animation: sdFade .5s ease both; }
  .q-sd:not([hidden]) .q-sd-box { animation: sdRise .65s cubic-bezier(.22, 1, .36, 1) both; }
  .q-sd.closing .q-sd-bg { animation: sdFadeOut .3s ease both; }
  .q-sd.closing .q-sd-box { animation: sdDown .3s cubic-bezier(.4, 0, .6, 1) both; }
}
@keyframes sdFade { from { opacity: 0; } }
@keyframes sdFadeOut { to { opacity: 0; } }
@keyframes sdRise { from { opacity: 0; transform: translateY(40px); } }
@keyframes sdDown { to { opacity: 0; transform: translateY(24px); } }

/* nothing climbs on its way in here either: the cards and panels only fade */
@media (prefers-reduced-motion: no-preference) {
  .q-grid li.q-wait { translate: none; transition: opacity .5s ease; }
  .q-side, .q-in { animation: none !important; }
  .q-lines:not(.loading) .ql { animation: none !important; }
  @keyframes qFadeIn { from { opacity: 0; } }
  .q-lines:not(.loading) { animation: qFadeIn .3s ease both; }
}

/* the Quran page, new edges: a sheet with the pages of the book stacked beneath it, and a frame of two
   quiet rules with soft round corners (the cut, concave corners and the bright outline are gone) */
body.quran .q-page {
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 1px rgb(var(--hi) / .07),
    inset 0 1px 0 rgb(var(--hi) / .06),
    0 1px 0 0 var(--bg), 0 4px 0 -1px color-mix(in oklab, var(--leaf, var(--surface)) 82%, var(--ink) 4%), 0 4px 0 0 rgb(var(--hi) / .06),
    0 8px 0 -3px color-mix(in oklab, var(--leaf, var(--surface)) 70%, transparent), 0 8px 0 -2px rgb(var(--hi) / .04),
    0 34px 60px -34px rgb(0 0 0 / .75) !important;
}
:root[data-tone="light"] body.quran .q-page {
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / .07),
    0 4px 0 -1px #f1f1f3, 0 4px 0 0 rgb(0 0 0 / .07),
    0 8px 0 -3px #ebebee, 0 8px 0 -2px rgb(0 0 0 / .05),
    0 26px 44px -30px rgb(0 0 0 / .22) !important;
}
.q-frame, .q-frame::before { background-image: none !important; -webkit-mask: none !important; mask: none !important; }
.q-frame { --fc: color-mix(in oklab, var(--ink) 18%, transparent); border-radius: 16px; }
.q-frame::before { --fc: color-mix(in oklab, var(--ink) 9%, transparent); inset: 4px; border-radius: 12px; }
body.quran .q-page { outline: 0; }

/* the Quran page border, third form: a band between two rules, a chain of lozenges running along it and
   an eight-pointed knot in each corner, as the printed mushafs draw it (replaces the plain double rule) */
.q-frame { --qb: 11px; inset: calc(var(--qs) * -.5 - 7px) calc(var(--qs) * -.42 - 7px); border-style: solid !important; border-color: transparent !important; border-width: var(--qb) !important; border-radius: 0 !important;
  border-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22none%22%20stroke%3D%22rgba(255%2C255%2C255%2C.34)%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M.5%20.5h47v47H.5zM15.5%2015.5h17v17h-17z%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M16%208h2.6M29.4%208H32M24%203l5.4%205-5.4%205-5.4-5zM16%2040h2.6M29.4%2040H32M24%2035l5.4%205-5.4%205-5.4-5zM8%2016v2.6M8%2029.4V32M3%2024l5-5.4%205%205.4-5%205.4zM40%2016v2.6M40%2029.4V32M35%2024l5-5.4%205%205.4-5%205.4z%22%2F%3E%3Cpath%20d%3D%22M24%205.6l2.4%202.4-2.4%202.4-2.4-2.4zM24%2037.6l2.4%202.4-2.4%202.4-2.4-2.4zM5.6%2024l2.4-2.4%202.4%202.4-2.4%202.4zM37.6%2024l2.4-2.4%202.4%202.4-2.4%202.4z%22%20fill%3D%22rgba(255%2C255%2C255%2C.3)%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%204h8v8h-8zM8%202.3l5.7%205.7-5.7%205.7-5.7-5.7zM36%204h8v8h-8zM40%202.3l5.7%205.7-5.7%205.7-5.7-5.7zM4%2036h8v8h-8zM8%2034.3l5.7%205.7-5.7%205.7-5.7-5.7zM36%2036h8v8h-8zM40%2034.3l5.7%205.7-5.7%205.7-5.7-5.7z%22%2F%3E%3Cpath%20d%3D%22M8%206.4a1.6%201.6%200%201%201%200%203.2%201.6%201.6%200%201%201%200-3.2zM40%206.4a1.6%201.6%200%201%201%200%203.2%201.6%201.6%200%201%201%200-3.2zM8%2038.4a1.6%201.6%200%201%201%200%203.2%201.6%201.6%200%201%201%200-3.2zM40%2038.4a1.6%201.6%200%201%201%200%203.2%201.6%201.6%200%201%201%200-3.2z%22%20fill%3D%22rgba(255%2C255%2C255%2C.3)%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") 16 round; }
:root[data-tone="light"] .q-frame { border-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22none%22%20stroke%3D%22rgba(20%2C20%2C24%2C.32)%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M.5%20.5h47v47H.5zM15.5%2015.5h17v17h-17z%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M16%208h2.6M29.4%208H32M24%203l5.4%205-5.4%205-5.4-5zM16%2040h2.6M29.4%2040H32M24%2035l5.4%205-5.4%205-5.4-5zM8%2016v2.6M8%2029.4V32M3%2024l5-5.4%205%205.4-5%205.4zM40%2016v2.6M40%2029.4V32M35%2024l5-5.4%205%205.4-5%205.4z%22%2F%3E%3Cpath%20d%3D%22M24%205.6l2.4%202.4-2.4%202.4-2.4-2.4zM24%2037.6l2.4%202.4-2.4%202.4-2.4-2.4zM5.6%2024l2.4-2.4%202.4%202.4-2.4%202.4zM37.6%2024l2.4-2.4%202.4%202.4-2.4%202.4z%22%20fill%3D%22rgba(20%2C20%2C24%2C.28)%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%204h8v8h-8zM8%202.3l5.7%205.7-5.7%205.7-5.7-5.7zM36%204h8v8h-8zM40%202.3l5.7%205.7-5.7%205.7-5.7-5.7zM4%2036h8v8h-8zM8%2034.3l5.7%205.7-5.7%205.7-5.7-5.7zM36%2036h8v8h-8zM40%2034.3l5.7%205.7-5.7%205.7-5.7-5.7z%22%2F%3E%3Cpath%20d%3D%22M8%206.4a1.6%201.6%200%201%201%200%203.2%201.6%201.6%200%201%201%200-3.2zM40%206.4a1.6%201.6%200%201%201%200%203.2%201.6%201.6%200%201%201%200-3.2zM8%2038.4a1.6%201.6%200%201%201%200%203.2%201.6%201.6%200%201%201%200-3.2zM40%2038.4a1.6%201.6%200%201%201%200%203.2%201.6%201.6%200%201%201%200-3.2z%22%20fill%3D%22rgba(20%2C20%2C24%2C.28)%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") 16 round; }
.q-frame::before { display: none !important; }
@media (max-width: 560px) { .q-frame { --qb: 8px; inset: calc(var(--qs) * -.4 - 4px) -10px; } }

/* the frame round the text: one quiet line, nothing more */
.q-frame, :root[data-tone="light"] .q-frame { border-image: none !important; border-width: 1px !important; border-color: color-mix(in oklab, var(--ink) 22%, transparent) !important; border-radius: 14px !important; inset: calc(var(--qs) * -.5) calc(var(--qs) * -.42); }
@media (max-width: 560px) { .q-frame { inset: calc(var(--qs) * -.4) -8px; } }
.q-frame { display: none !important; }   /* one line only: the page edge */

/* =================================================================================================
   RIBBONS: five coloured bookmarks, each lying on one verse, each with the reader's own name for it
   ================================================================================================= */
.rib, .rib-chip, .q-lines .w.ribbed, .qv-act[data-act="mark"].on, .rib-names label { --c: var(--rc); }
:root[data-tone="light"] :is(.rib, .rib-chip, .q-lines .w.ribbed, .qv-act[data-act="mark"].on, .rib-names label) { --c: var(--rcl); }

/* the mark button takes the colour of the ribbon lying on this verse */
.qv-act[data-act="mark"].on { color: var(--c); background: color-mix(in oklab, var(--c) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 45%, transparent) inset; }
.qv-act[data-act="mark"].on svg { fill: currentColor; }

/* the ribbons open under the actions, like the ribbons hanging out of a closed book */
.qv-rib { display: grid; gap: 10px; padding: 4px 18px 16px; animation: ribOpen .5s cubic-bezier(.34, 1.4, .64, 1) both; transform-origin: 50% 0; }
.qv-rib[hidden] { display: none; }
@keyframes ribOpen { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.rib-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rib { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 0 2px 8px; border-radius: 14px; color: var(--muted); transition: background .3s, color .3s; animation: ribDrop .55s cubic-bezier(.34, 1.4, .64, 1) both; }
.rib:nth-child(2) { animation-delay: .04s; } .rib:nth-child(3) { animation-delay: .08s; } .rib:nth-child(4) { animation-delay: .12s; } .rib:nth-child(5) { animation-delay: .16s; }
@keyframes ribDrop { from { opacity: 0; transform: translateY(-14px); } }
.rib svg { width: 26px; height: 38px; margin-bottom: 2px; fill: color-mix(in oklab, var(--c) 30%, transparent); stroke: var(--c); stroke-width: 1.4; stroke-linejoin: round; transform-origin: 50% 0; transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), fill .3s; }
.rib:hover { background: rgb(var(--hi) / .04); color: var(--ink); }
.rib:hover svg { transform: translateY(3px); }
.rib b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .76rem var(--ui); color: var(--ink); }
.rib small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .66rem var(--ui); color: var(--faint); }
.rib.here { background: color-mix(in oklab, var(--c) 11%, transparent); }
.rib.here svg { fill: var(--c); transform: translateY(5px); }
.rib.here small { color: var(--c); font-weight: 600; }
.rib-edit { justify-self: center; min-height: 36px; padding-inline: 14px; border-radius: 999px; color: var(--muted); font: 500 .8rem var(--ui); transition: background .25s, color .25s; }
.rib-edit:hover { color: var(--ink); background: rgb(var(--hi) / .05); }
.rib-names { display: grid; gap: 6px; animation: ribOpen .45s cubic-bezier(.34, 1.4, .64, 1) both; }
.rib-names label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 14px 6px; border-radius: 999px; background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; }
.rib-names label:focus-within { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--c) 60%, transparent) inset; }
.rib-names i { flex: none; width: 10px; height: 14px; background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.rib-names input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; color: var(--ink); font: 400 .88rem var(--ui); outline: none; }
.rib-names input::placeholder { color: var(--faint); }

/* on the page: the verse a ribbon lies on is tinted softly in its colour */
.q-lines .w.ribbed { background: color-mix(in oklab, var(--c) 16%, transparent); box-shadow: 0 -2px 0 color-mix(in oklab, var(--c) 16%, transparent), 0 2px 0 color-mix(in oklab, var(--c) 16%, transparent); }

/* in the list of marks */
.rib-chip { display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 45%, transparent) inset !important; }
.rib-chip i { flex: none; width: 9px; height: 13px; background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }

@media (max-width: 560px) { .qv-rib { padding-inline: 12px; } .rib svg { width: 22px; height: 32px; } .rib b { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .qv-rib, .rib, .rib-names { animation: none; } }
.q-lines .w.ribbed { box-shadow: none; border-radius: 0; background: linear-gradient(transparent 60%, color-mix(in oklab, var(--c) 30%, transparent) 60%, color-mix(in oklab, var(--c) 30%, transparent) 84%, transparent 84%); }

/* the ribbon tint runs along the whole verse as one band: each word reaches into the gap beside it, in an opaque mix so overlaps do not darken */
.q-lines { isolation: isolate; }
.q-lines .w.ribbed { position: relative; background: none !important; }
.q-lines .w.ribbed::after { content: ""; position: absolute; z-index: -1; inset-inline: -.32em; top: 60%; bottom: 16%; background: color-mix(in oklab, var(--c) 30%, var(--leaf, var(--bg))); pointer-events: none; }
.rib.ask { background: color-mix(in oklab, var(--c) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 50%, transparent) inset; }
.rib.ask small { color: var(--c); font-weight: 600; white-space: normal; }

/* the ribbons' panel scrolls on its own inside the verse window (finger, wheel, keys), never cut off at the bottom */
.qv-rib { flex: 0 1 auto; min-height: 0; max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
/* a ribbon's name is read whole: it breaks onto a second line instead of ending in dots */
.rib b, .rib small { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.35; overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 560px) { .rib-row { gap: 3px; } .rib { padding-inline: 0; } .rib b { font-size: .64rem; letter-spacing: -.01em; } .rib small { font-size: .6rem; } }

/* =================================================================================================
   RIBBONS on the page, second form: one band per line under the verse (drawn by paintRibbons from the
   first word to the last), so wide justified spaces never break it; it gives off a soft light of its colour.
   ================================================================================================= */
.q-lines .ql { position: relative; isolation: isolate; }
.q-lines .w.ribbed::after { display: none; }
.rb-band { position: absolute; z-index: -1; border-radius: 4px; pointer-events: none;
  background: color-mix(in oklab, var(--rc) 36%, var(--leaf, var(--bg)));
  box-shadow: 0 0 10px color-mix(in oklab, var(--rc) 24%, transparent), 0 0 2px color-mix(in oklab, var(--rc) 35%, transparent); }
:root[data-tone="light"] .rb-band { background: color-mix(in oklab, var(--rcl) 22%, var(--leaf, var(--bg))); box-shadow: 0 0 10px color-mix(in oklab, var(--rcl) 22%, transparent); }

/* =================================================================================================
   VERSE WINDOW, third form: roomier (wider, more air round the verse and the tafsir), and its actions
   named, each in a colour of its own, so what each one does is read at a glance.
   ================================================================================================= */
.q-ayah-in.qv { width: min(100%, 760px); max-height: min(92vh, 920px); padding: 14px 26px 0; border-radius: 26px; }
.qv-head { padding-bottom: 4px; }
.qv-head h2 { font-size: 1.08rem; }
.qv-text.q-ayah-text { margin: 12px 0 0; padding: 8px 8px 4px; max-height: 40vh; font-size: 1.95rem; line-height: 2.3; }
.qv-acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0 18px; }
.qv-act { --a: #8fa3b8; position: relative; width: auto; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 16px; color: var(--a); background: color-mix(in oklab, var(--a) 10%, transparent); box-shadow: none; transition: background .3s, transform .45s var(--spring, ease); }
.qv-act:hover { color: var(--a); background: color-mix(in oklab, var(--a) 18%, transparent); }
.qv-act:active { transform: scale(.95); }
.qv-act svg { width: 19px; height: 19px; }
.qv-act .qv-lab { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 4px; font: 500 .74rem var(--ui); color: var(--ink); }
.qv-act[data-act="play"] { --a: #5cb6f2; } .qv-act[data-act="from"] { --a: #5fcf9a; } .qv-act[data-act="range"] { --a: #b08cf5; } .qv-act[data-act="copy"] { --a: #ff9466; } .qv-act[data-act="mark"] { --a: #f2789a; }
:root[data-tone="light"] .qv-act[data-act="play"] { --a: #1f74b8; } :root[data-tone="light"] .qv-act[data-act="from"] { --a: #1d8a5a; } :root[data-tone="light"] .qv-act[data-act="range"] { --a: #6b46c4; } :root[data-tone="light"] .qv-act[data-act="copy"] { --a: #c4561f; } :root[data-tone="light"] .qv-act[data-act="mark"] { --a: #c43a62; }
.qv-act.main { color: var(--a); background: color-mix(in oklab, var(--a) 20%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--a) 40%, transparent) inset; }
.qv-act.main svg { fill: currentColor; }
.qv-act[data-act="mark"].on { --a: var(--c); background: color-mix(in oklab, var(--c) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 45%, transparent) inset; }
.qv-tf { margin-inline: -26px; }
.qv-tabs.q-tf-tabs { gap: 4px; padding: 8px 16px 6px; }
.qv-tabs.q-tf-tabs button { height: 34px; padding-inline: 14px; border-radius: 999px; transition: background .3s, color .3s; }
.qv-tabs.q-tf-tabs button[aria-selected="true"] { color: var(--ink); background: rgb(var(--hi) / .08); }
.qv-tabs .q-tf-thumb { display: none; }
.qv-box.q-tafsir-box { padding: 8px 30px 30px; }
.qv-box .q-tafsir p { font-size: 1.1rem; line-height: 2.1; }
@media (max-width: 560px) {
  .q-ayah-in.qv { padding: 10px 16px 0; }
  .qv-tf { margin-inline: -16px; }
  .qv-text.q-ayah-text { font-size: 1.55rem; }
  .qv-acts { gap: 6px; }
  .qv-act { height: 56px; border-radius: 14px; }
  .qv-act .qv-lab { font-size: .64rem; }
  .qv-box.q-tafsir-box { padding: 6px 18px 24px; }
}
/* the band lies under the whole height of the words, edge to edge with the verse: no letter is half on it
   (that read as letters eaten away), no glow, square-cut ends */
.rb-band { border-radius: 2px; box-shadow: none !important; background: color-mix(in oklab, var(--rc) 26%, var(--leaf, var(--bg))); }
:root[data-tone="light"] .rb-band { background: color-mix(in oklab, var(--rcl) 16%, var(--leaf, var(--bg))); }
/* one layer of ribbons under all the lines (see paintRibbons) */
.q-lines { position: relative; }
.q-lines .ql { isolation: auto; z-index: 1; }
.rb-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rb-band { background: color-mix(in oklab, var(--rc) 34%, var(--leaf, var(--bg))); }
:root[data-tone="light"] .rb-band { background: color-mix(in oklab, var(--rcl) 22%, var(--leaf, var(--bg))); }

/* =================================================================================================
   THE MUSHAF PAGE, its frame and its surah headings, new form. Colour by the surah's kind: warm apricot
   for a Makki surah, sea-green for a Madani one. Flat colour only; no glow.
   ================================================================================================= */
.is-mk { --sc: #9fb2f2; } .is-md { --sc: #6cc7b4; }   /* Makki: a calm periwinkle (no orange) */
:root[data-tone="light"] .is-mk { --sc: #4558b8; } :root[data-tone="light"] .is-md { --sc: #18806e; }

/* the heading: [kind] ——◆ ( name ) ◆—— [verses] */
.q-head .q-sura .q-band, .q-head .q-sura .q-bd { display: none !important; }
.q-band2 { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding-inline: 2px; }
.q-band2 .sh-side { flex: none; display: inline-flex; align-items: center; height: calc(var(--qs) * .78); padding-inline: calc(var(--qs) * .42); border-radius: 999px;
  font: 600 calc(var(--qs) * .42)/1 var(--ui); color: var(--sc); background: color-mix(in oklab, var(--sc) 12%, transparent); white-space: nowrap; }
.q-band2 .sh-rule { position: relative; flex: 1 1 0; min-width: 8px; height: 5px; border-block: 1px solid color-mix(in oklab, var(--sc) 55%, transparent); }
.q-band2 .sh-rule:nth-of-type(1) { -webkit-mask: linear-gradient(to right, #000 45%, transparent); mask: linear-gradient(to right, #000 45%, transparent); }
.q-band2 .sh-rule:nth-of-type(3) { -webkit-mask: linear-gradient(to left, #000 45%, transparent); mask: linear-gradient(to left, #000 45%, transparent); }
.q-band2 .sh-rule::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; transform: rotate(45deg); background: var(--sc); }
.q-band2 .sh-rule:nth-of-type(1)::after { left: -3px; }
.q-band2 .sh-rule:nth-of-type(3)::after { right: -3px; }
.q-band2 .sh-gap { flex: none; align-self: stretch; width: calc(var(--qs) * 6.6); margin-block: calc(var(--qs) * .14); border-radius: 999px;
  background: color-mix(in oklab, var(--sc) 9%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--sc) 40%, transparent) inset; }
.q-head .q-sura h2 { color: var(--ink) !important; }
@media (max-width: 560px) { .q-band2 { gap: 5px; } .q-band2 .sh-gap { width: calc(var(--qs) * 6.2); } }

/* the page: its one edge takes the surah's colour faintly, four small corner marks hold the leaf like the
   corners of a bound page, and a fine line along the foot shows how far into the mushaf this page is */
.q-page.q-pg2 { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 26%, var(--line-2)), 0 30px 60px -36px rgb(0 0 0 / .55) !important; }
.pg-corner { position: absolute; z-index: 2; width: 18px; height: 18px; pointer-events: none; border: 0 solid var(--sc); opacity: .85; }
.pg-corner.a { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 10px; }
.pg-corner.b { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 10px; }
.pg-corner.c { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 10px; }
.pg-corner.d { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 10px; }
.pg-where { position: absolute; z-index: 2; bottom: 9px; left: 40px; right: 40px; height: 2px; border-radius: 2px; background: rgb(var(--hi) / .07); pointer-events: none; }
.pg-where::before { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: calc(var(--pp) * 100%); border-radius: inherit; background: color-mix(in oklab, var(--sc) 70%, transparent); transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.pg-where::after { content: ""; position: absolute; top: 50%; right: calc(var(--pp) * 100%); width: 6px; height: 6px; margin: -3px -3px 0 0; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 560px) { .pg-corner { width: 14px; height: 14px; } .pg-corner.a, .pg-corner.b { top: 6px; } .pg-corner.c, .pg-corner.d { bottom: 6px; } .pg-corner.a, .pg-corner.c { right: 6px; } .pg-corner.b, .pg-corner.d { left: 6px; } .pg-where { left: 30px; right: 30px; bottom: 7px; } }
@media (prefers-reduced-motion: reduce) { .pg-where::before { transition: none; } }

/* Hafs in the QCF v2 page fonts: each line spreads its words edge to edge (the font's wide space glyph is
   not used); the last line of a surah stands in the middle with a narrow gap between its words */
.q-lines.v2.fit .ql:not(.q-head):not(.q-basmala) > span { display: flex; justify-content: space-between; align-items: baseline; word-spacing: 0; }
.q-lines.v2.fit .ql.short > span, .opening .q-lines.v2.fit .ql > span { justify-content: center; gap: .16em; }

/* crisp words on phones: the page is not a frosted layer (backdrop-filter put the whole leaf, words and all,
   on a layer of its own that phones draw soft), and the lines come in by fading only, never through a blur */
.q-page { backdrop-filter: none; -webkit-backdrop-filter: none; }
@keyframes qInk { from { opacity: 0; transform: translateY(4px); } }

/* =================================================================================================
   THE MUSHAF PAGE in the site's own hand (10 Nov, after the owner disliked the corner brackets and the
   fine rules): the page is made like an adhkar sheet. One flat leaf, one quiet edge that takes the
   surah's colour faintly, and the site's small eight-point star set in the middle of its top edge.
   The surah heading is a small plate like the chapter's title plate; the page number is a pill; the
   box for going elsewhere is a practical sheet. No corners, no rules, no ticks, no glow, no gold.
   Colour by the surah's kind (--sc): apricot for Makki, sea-green for Madani.
   ================================================================================================= */
.pg-where, .pg-corner { display: none !important; }
.q-page.q-pg2 { overflow: visible; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 24%, var(--line-2)), 0 30px 60px -36px rgb(0 0 0 / .55) !important; }
:root[data-tone="light"] .q-page.q-pg2 { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 26%, var(--line-2)), 0 24px 50px -36px rgb(0 0 0 / .18) !important; }
.pg-star { position: absolute; z-index: 3; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; pointer-events: none;
  background: color-mix(in oklab, var(--sc) 80%, var(--ink)); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat;
  transition: rotate .9s var(--spring, ease); }
@media (hover: hover) { .q-page.q-pg2:hover .pg-star { rotate: 45deg; } }
@media (prefers-reduced-motion: no-preference) { .pg-star { animation: pgStarIn 1.1s .1s var(--spring, ease) both; } }
@keyframes pgStarIn { from { rotate: -90deg; opacity: 0; } }
@media (max-width: 560px) { .pg-star { width: 15px; height: 15px; top: -7.5px; margin-left: -7.5px; } }

/* the surah heading: a plate like the chapter's title plate */
.q-head .q-sura .q-band, .q-head .q-sura .q-bd, .q-head .q-sura .q-band2, .q-head .q-sura .q-band4 { display: none !important; }
.q-band5 { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.q-band5 .hp { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(100%, calc(var(--qs) * 15)); height: calc(100% - var(--qs) * .2);
  padding-inline: calc(var(--qs) * .62); border-radius: calc(var(--qs) * .5);
  background: color-mix(in oklab, var(--sc) 9%, var(--leaf, var(--surface))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 42%, transparent); }
.q-band5 .hp::before { content: ""; position: absolute; top: calc(var(--qs) * -.22); left: 50%; width: calc(var(--qs) * .44); height: calc(var(--qs) * .44); margin-left: calc(var(--qs) * -.22);
  background: color-mix(in oklab, var(--sc) 80%, var(--ink)); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.q-band5 .hp-m { font: 500 calc(var(--qs) * .4)/1 var(--ui); color: color-mix(in oklab, var(--sc) 85%, var(--ink)); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .q-band5 .hp { animation: plateIn5 .7s var(--spring, ease) both; } .q-band5 .hp::before { animation: pgStarIn 1.1s .15s var(--spring, ease) both; } }
@keyframes plateIn5 { from { opacity: 0; transform: scale(.97); } }
.q-head .q-sura h2 { z-index: 1; color: var(--ink) !important; }
/* the name: larger and drawn whole (no shifting transform), so it is sharp */
.q-head .q-sura h2 .t.q-name { height: 76% !important; max-width: calc(var(--qs) * 6.4) !important; transform: none !important; margin: 0 !important; }
.q-head .q-sura h2 .t.q-name svg { overflow: visible; }

/* RIBBONS, third form (after the v2 page fonts, whose letters reach far above and below their word box):
   a soft wash of the ribbon's colour behind the whole height of the line, a little wider than the verse,
   with a fine line of the colour along its foot; rounded, flat, under the words */
.rb-band { border-radius: 7px; background: color-mix(in oklab, var(--rc) 13%, transparent) !important;
  box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--rc) 80%, transparent) !important; }
:root[data-tone="light"] .rb-band { background: color-mix(in oklab, var(--rcl) 10%, transparent) !important;
  box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--rcl) 75%, transparent) !important; }

/* the page number: one pill in the surah's colour */
.q-pno { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 38px; padding: 0 16px; border-radius: 999px;
  background: color-mix(in oklab, var(--sc) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 34%, transparent);
  transition: background .3s, box-shadow .3s, scale .35s var(--spring, ease); }
.q-pno::before, .q-pno::after, .q-pno b::before, .q-pno b::after { display: none !important; content: none !important; }
.q-pno b { font: 700 1rem/1 var(--ui); color: var(--ink); }
.q-pno small { font: 400 .7rem/1 var(--ui); color: var(--muted); }
.q-pno:hover, .q-pno[aria-expanded="true"] { background: color-mix(in oklab, var(--sc) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 60%, transparent); }
.q-pno[aria-expanded="true"] b { color: color-mix(in oklab, var(--sc) 80%, var(--ink)); }
.q-pno:active { scale: .95; }

/* going to another page: the same box as before (the title, the number, the line of the mushaf, its two
   ends), only cleaner. A calm sheet; the number in a round field; a smooth line with no ticks whose fill
   and knob take the surah's colour; nothing else is coloured */
.q-jump.qj2 { left: 0; right: 0; translate: none; width: auto; bottom: calc(100% + 10px); display: grid; gap: 14px; padding: 16px 18px 12px; border-radius: 20px;
  background: var(--surface-2, var(--surface)); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -24px rgb(0 0 0 / .8); }
:root[data-tone="light"] .q-jump.qj2 { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -22px rgb(0 0 0 / .22); }
.q-jump.qj2[hidden] { display: none; }
.q-jump.qj2::before, .q-jump.qj2::after { display: none !important; content: none !important; }
.qj-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: text; }
.qj-t { font: 600 .9rem var(--ui); color: var(--ink); }
.qj-no { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding-inline: 14px; border-radius: 999px;
  background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s; }
.qj-no:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--sc) 75%, transparent); }
.qj-no input { width: 2.6em; height: auto; padding: 0; border: 0; background: none !important; box-shadow: none !important; text-align: center; font: 700 1.05rem/1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.qj-no input:focus { outline: none; }
.qj-no small { font: 400 .72rem var(--ui); color: var(--faint); }
.q-jump.qj2 .q-track { height: 6px; margin: 6px 2px 0; border-radius: 6px; background: rgb(var(--hi) / .08); }
.q-jump.qj2 .q-track > i { border-radius: inherit; background: color-mix(in oklab, var(--sc) 55%, transparent); }
.q-jump.qj2 .q-track > i::after { inset-inline-end: -8px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--sc);
  box-shadow: 0 0 0 4px var(--surface-2, var(--surface)); transition: scale .3s var(--spring, ease); }
:root[data-tone="light"] .q-jump.qj2 .q-track > i::after { box-shadow: 0 0 0 4px #fff; }
.q-jump.qj2 .q-track.drag > i::after, .q-jump.qj2 .q-track:hover > i::after { scale: 1.15; }
.q-jump.qj2 .q-track b { display: none; }
.q-jump.qj2 .q-track u { opacity: .4; }
.q-jump.qj2 .q-track-tip .tp { color: var(--ink); }
.q-jump-ends.qj-ends { display: flex !important; justify-content: space-between; gap: 8px; margin: 0; font: .68rem var(--ui); color: var(--faint); }
.qj-ends span:nth-child(2) { opacity: .8; }
@media (max-width: 560px) { .q-jump.qj2 { padding: 14px 14px 10px; border-radius: 18px; } .qj-ends span:nth-child(2) { display: none; } }

/* (fix) the last line of a surah really does stand in the middle: the rule above lost to the general
   «spread edge to edge» rule, which names more classes, so every surah's closing line was stretched */
.q-lines.v2.fit .ql.short:not(.q-head):not(.q-basmala) > span { justify-content: center; gap: .16em; }
/* the two opening pages, as in the printed mushaf: a narrower column in the middle of the leaf, each of its
   lines spread across that column only, at the size of an ordinary page's words */
.opening .q-lines.v2.fit .ql:not(.q-head):not(.q-basmala) > span { width: var(--open-w, 70%); margin-inline: auto; justify-content: space-between; gap: 0; }
.opening .q-lines.v2.fit .ql.short:not(.q-head):not(.q-basmala) > span { justify-content: center; gap: .16em; }