/* ==========================================================================
   quran.css — Qur'an classic reader, 604-page Mushaf, word study, tafsir,
   tajweed, hifz, practice, roots. Sixth load.
   Paper themes set --mushaf-paper-* inline per page; the app theme still
   governs chrome around the book.
   ========================================================================== */

/* ==========================================================================
   1. Surah list
   ========================================================================== */
.quran-search {
  margin-bottom: var(--space-2);
}

.surah-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 640px) {
  .surah-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.surah-tile-wrap {
  position: relative;
}
.surah-tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: start;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.surah-tile:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.surah-tile__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary-text);
  font-size: var(--fs-caption);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.surah-tile__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.surah-tile__name-en {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.surah-tile__meta {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.surah-tile__name-ar {
  font-family: var(--font-arabic);
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.surah-tile__play {
  position: absolute;
  inset-inline-end: var(--space-2);
  bottom: var(--space-2);
}
/* Keep tiles roomy enough that the overlay play button never hides meta. */
.surah-tile {
  padding-inline-end: calc(var(--space-8) + var(--space-2));
}

.quran-mushaf-toggle {
  align-self: flex-start;
}

/* Reader top bar: back/title start, quiet action group end — one row,
   never stacked. */
.quran-topbar {
  justify-content: space-between;
}
.quran-topbar__start {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.quran-topbar__start .view__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quran-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  margin-inline-start: auto;
  flex: none;
}
.quran-topbar__actions .quran-mushaf-toggle {
  align-self: center;
}

/* ==========================================================================
   2. Classic reader
   ========================================================================== */
.quran-reader__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1_5);
  text-align: center;
  padding-block: var(--space-2) var(--space-1);
}
.quran-reader__eyebrow {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.quran-reader__name-ar {
  font-family: var(--font-arabic);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-arabic);
  color: var(--color-text);
}
.quran-reader__name-en {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.quran-reader__toolbar {
  align-self: stretch;
}
.quran-reader__meta {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.quran-reader__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.quran-reader__toolbar--hifz {
  border-color: color-mix(in srgb, var(--cat-violet) 35%, transparent);
  background: color-mix(in srgb, var(--cat-violet) 6%, var(--color-surface));
}
.quran-reader__recite-progress {
  margin-inline-start: auto;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.quran-reader__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
.quran-reader__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
}

.quran-bismillah {
  font-family: var(--font-arabic);
  font-size: calc(var(--fs-arabic-card) * 0.95);
  line-height: var(--lh-arabic);
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--space-2) 0 var(--space-4);
}
.quran-bismillah--gold,
.bismillah--gold {
  color: var(--cat-gold-text);
}
.quran-bismillah--accent,
.bismillah--accent {
  color: var(--color-primary-text);
}

.ayah-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ayah-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.ayah-card:hover {
  box-shadow: var(--shadow-sm);
}
.ayah-card--reciting {
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  box-shadow: var(--ring-primary);
}
.ayah-card--focus {
  border-color: var(--color-primary);
  box-shadow: var(--ring-primary);
  animation: ayah-focus-glow var(--dur-celebrate) var(--ease-standard);
}
/* Programmatic scrolls (follow-along, deep-link focus) must never park a
   card under the fixed bottom nav / playerbar where taps get stolen by
   chrome — external report: a cloze word rendered untappable behind the
   nav's More button on a 420px viewport. */
.ayah-card {
  scroll-margin-top: calc(var(--topbar-height) + var(--space-4));
  scroll-margin-bottom: calc(var(--bottomnav-height) + var(--space-4));
}
body.has-player .ayah-card {
  scroll-margin-bottom: calc(var(--bottomnav-height) + var(--playerbar-height) + var(--space-4));
}

.ayah-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ayah-card__badge {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 26px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary-text);
  font-size: var(--fs-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ayah-card__actions {
  display: flex;
  align-items: center;
  gap: var(
    --space-1
  ); /* v4.1: the -6px hit-area pseudo-elements of four
     adjacent icon buttons OVERLAPPED by 12px with gap 0 — boundary taps
     landed on the wrong verse action. */
  margin-inline-start: auto;
}
.ayah-card__arabic {
  font-family: var(--font-arabic);
  font-size: var(--fs-arabic-card);
  line-height: var(--lh-arabic);
}
.ayah-card__translation {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-normal);
}
/* Word-by-word romanization under the Arabic (classic reader only),
   from the bundled morphology — secondary, italic, Latin only. */
.ayah-card__translit {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
}
/* (v5.2.0) Translation-compare second line: visually secondary, with an
   edition tag so two translations never blur together. */
.ayah-card__translation--compare {
  color: var(--color-text-secondary);
  border-inline-start: 3px solid var(--color-border-strong);
  padding-inline-start: var(--space-2);
}
.ayah-card__compare-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-primary-text);
  margin-inline-end: var(--space-1);
}
.ayah-study-divider {
  border: none;
  border-top: 1px dashed var(--color-border-strong);
  margin: var(--space-1) 0;
}

/* Tappable per-word spans */
.qword {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
/* (v5.2) vertical-only 44px-ish hit expansion: inline words must stay
   inline (padding would reflow the sacred layout), and horizontal
   expansion would steal taps from neighboring words. */
.qword::after {
  content: '';
  position: absolute;
  inset-block: -8px;
  inset-inline: 0;
}
.qword:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.qword--underline {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--color-primary-text) 45%, transparent);
  text-underline-offset: 6px;
}

/* Tajweed coloring — tokens mirror domain/tajweed.js's rule table.
 * (v4.5.2) STANDARD PALETTE + the two new rules. idgham-no-ghunnah and
 * izhar-shafawi keep their class (the spans still exist — the inspector
 * and the practice view rely on the rule ids) but are deliberately NOT
 * colored: the standard color-coded mushaf convention leaves both
 * unmarked, and the legend says so. */
.tajweed--hamzat_wasl {
  color: var(--tw-hamza-wasl);
}
.tajweed--lam_shamsiyyah {
  color: var(--tw-lam-shamsiyah);
}
.tajweed--ghunnah,
.tajweed--ikhfa,
.tajweed--iqlab,
.tajweed--idgham_ghunnah,
.tajweed--idgham_shafawi,
.tajweed--ikhfa_shafawi {
  color: var(--tw-ghunnah);
}
.tajweed--qalqalah {
  color: var(--tw-qalqalah);
}
.tajweed--tafkhim {
  color: var(--tw-tafkhim);
}
.tajweed--madd_2,
.tajweed--madd_iwad,
.tajweed--madd_badal,
.tajweed--madd_246 {
  color: var(--tw-madd-normal);
}
.tajweed--madd_munfasil,
.tajweed--madd_silah {
  color: var(--tw-madd-munfasil);
}
.tajweed--madd_muttasil {
  color: var(--tw-madd-muttasil);
}
.tajweed--madd_6 {
  color: var(--tw-madd-laazim);
}

/* Hifz cloze blanks */
.hifz-word-blank {
  display: inline-block;
  width: var(--hifz-w, 4ch);
  height: 1.1em;
  vertical-align: middle;
  border-radius: var(--radius-xs);
  border: 1.5px dashed color-mix(in srgb, var(--cat-violet) 55%, transparent);
  background: color-mix(in srgb, var(--cat-violet) 7%, transparent);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.hifz-word-blank:hover {
  border-color: var(--cat-violet-text);
  background: color-mix(in srgb, var(--cat-violet) 14%, transparent);
}
.hifz-ayah-blank {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px dashed color-mix(in srgb, var(--cat-violet) 55%, transparent);
  background: color-mix(in srgb, var(--cat-violet) 7%, transparent);
  cursor: pointer;
}
.hifz-ayah-blank__dots {
  font-size: var(--fs-md);
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
}
.hifz-ayah-blank__hint {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.hifz-due {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cat-violet) 12%, transparent);
  color: var(--cat-violet-text);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.panel--hifz {
  gap: var(--space-2);
}

/* ==========================================================================
   3. Mushaf reader (v4.4 "paper mushaf" — the 604-page book)
   --------------------------------------------------------------------------
   The page is composed like a printed Mushaf: an illuminated double frame
   with corner flourishes, margin medallions (the juz rosette and the surah
   cartouche) above the text, in-flow surah banners with a gilded Bismillah,
   Eastern ayah-end markers with the printed sajda mark ۩, a page-number
   medallion at the foot, and a paper vignette so the surface reads as
   PAPER. The calm green/gold language of the Azkar/Freezikr app family
   carries the surrounding chrome (topbar, nav, tray, sheet).
   ========================================================================== */

/* --- The illumination gold ------------------------------------------
   Gold leaf shifts with its paper: an antique, deeper gold reads on the
   light papers; the night papers need a soft, pale gilding. Scoped per
   paper via the wrap's data-mushaf-paper attribute. */
.mushaf-page-wrap {
  --mushaf-gold: #a8823a;
  --mushaf-gold-soft: rgba(168, 130, 58, 0.26);
  display: flex;
  justify-content: center;
}
.mushaf-page-wrap[data-mushaf-paper='night'],
.mushaf-page-wrap[data-mushaf-paper='amoled'],
.mushaf-page-wrap[data-mushaf-paper='royal-black'] {
  --mushaf-gold: #d4bd77;
  --mushaf-gold-soft: rgba(212, 189, 119, 0.24);
}
/* Print-edition frames: the Madinah mushaf rules its margins in green,
   the cream (Indo-Pak) print in a deep antique gold — the frame,
   corners, medallions and cartouche all follow --mushaf-gold. */
.mushaf-page-wrap[data-mushaf-paper='madinah'] {
  --mushaf-gold: #1e7a5a;
  --mushaf-gold-soft: rgba(30, 122, 90, 0.22);
}
.mushaf-page-wrap[data-mushaf-paper='cream'] {
  --mushaf-gold: #8f6b1d;
  --mushaf-gold-soft: rgba(143, 107, 29, 0.22);
}

/* --- The book (v4.5) ------------------------------------------------------
   One article when single-paging, two facing articles in a spread. The
   container is RTL BY DESIGN (a mushaf opens from the right), independent
   of the app's UI language: the FIRST child always lands on the physical
   right — the odd page — exactly like the printed book. */
.mushaf-book {
  direction: rtl;
  display: flex;
  justify-content: center;
  gap: clamp(var(--space-3), 3vw, var(--space-6));
  width: 100%;
}
.mushaf-book .mushaf-page {
  flex: 1 1 460px;
  min-width: 0;
}
/* A spread's two sheets share the flex row; on a single-page render the
   one article grows to the same 720px cap it always had. */
.mushaf-book--spread .mushaf-page {
  flex: 1 1 0;
}
/* The facing-page gutter: a soft inner shadow down each page's spine edge
   — the physical fold of an open book, not a border. */
.mushaf-book--spread .mushaf-page + .mushaf-page {
  box-shadow:
    var(--shadow-lg),
    inset -18px 0 28px -22px rgba(0, 0, 0, 0.45);
}
/* A still-loading facing page holds the sheet's place as quiet skeleton
   lines on paper — never a blank hole, never a layout jump when it lands. */
.mushaf-page--pending .mushaf-page__text {
  opacity: 0.55;
}

/* --- Topbar (windowed) ------------------------------------------------ */
.mushaf-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.mushaf-topbar__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.mushaf-topbar__title:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-alt));
  color: var(--color-primary-text);
}

/* --- The page ---------------------------------------------------------- */
.mushaf-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  padding: clamp(var(--space-5), 4.5vw, var(--space-7)) clamp(var(--space-4), 5.5vw, var(--space-7))
    clamp(var(--space-4), 4vw, var(--space-6));
  border-radius: var(--radius-lg);
  border: 1px solid var(--mushaf-paper-border, var(--color-border-strong));
  background: var(--mushaf-paper-bg, var(--color-surface));
  box-shadow: var(--shadow-lg);
  direction: rtl;
  overflow: hidden;
  /* The windowed→fullscreen morph rides the same node this transition
     guards; the one-shot --fs-in/--fs-out keyframes below are the
     ENTER/EXIT flourish on top of it. */
  transition:
    max-width var(--dur-slow) var(--ease-standard),
    border-radius var(--dur-slow) var(--ease-standard),
    box-shadow var(--dur-slow) var(--ease-standard);
}
.mushaf-page--flip-next {
  animation: mushafFlipFromNext var(--dur-slow) var(--ease-spring);
  will-change: transform;
}
.mushaf-page--flip-prev {
  animation: mushafFlipFromPrev var(--dur-slow) var(--ease-spring);
  will-change: transform;
}
/* The "page flip animation" preference (mushafPrefs.pageFlipAnimation):
     the reader emits this class when the pref is OFF — scoped to the FLIP
     keyframes only, so silencing page turns never silences the fullscreen
     bloom (a deliberate v4.4 refinement of the old blanket rule). */
.mushaf-page--no-anim.mushaf-page--flip-next,
.mushaf-page--no-anim.mushaf-page--flip-prev {
  animation: none;
  will-change: auto;
}
.mushaf-page--fs-in {
  animation: mushafFsIn var(--dur-celebrate) var(--ease-spring);
  will-change: transform, opacity;
}
.mushaf-page--fs-out {
  animation: mushafFsOut var(--dur-slow) var(--ease-standard);
  will-change: transform, opacity;
}

/* Paper vignette: the page surface itself. A printed page is never flat —
   the ink sits on fibers that darken toward the edges. Two overlapping
   radial washes at ~5% of the ink color read as paper without hiding a
   single ayah (pure decoration; pointer events pass straight through). */
.mushaf-page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 50% 40%,
      transparent 55%,
      color-mix(in srgb, var(--mushaf-paper-ink, var(--color-text)) 5%, transparent) 100%
    ),
    radial-gradient(
      70% 26% at 50% 0%,
      color-mix(in srgb, var(--mushaf-gold) 4%, transparent),
      transparent 70%
    );
}

/* --- The illuminated frame ----------------------------------------------
   A double rule (thick outer, hairline inner) inset from the page edge,
   with heavier L-bracket corners that carry a small gold diamond — the
   way Madani mushaf margins are ruled. Entirely decorative. */
.mushaf-page__frame {
  position: absolute;
  inset: clamp(9px, 2vw, 16px);
  pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--mushaf-gold) 62%, transparent);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 4px var(--mushaf-paper-bg, var(--color-surface)),
    inset 0 0 0 5px color-mix(in srgb, var(--mushaf-gold) 34%, transparent);
}
.mushaf-page__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--mushaf-gold);
}
.mushaf-page__corner--tl {
  top: -2px;
  left: -2px;
  border-block-end: none;
  border-inline-end: none;
  border-start-start-radius: 5px;
}
.mushaf-page__corner--tr {
  top: -2px;
  right: -2px;
  border-block-end: none;
  border-inline-start: none;
  border-start-end-radius: 5px;
}
.mushaf-page__corner--bl {
  bottom: -2px;
  left: -2px;
  border-block-start: none;
  border-inline-end: none;
  border-end-start-radius: 5px;
}
.mushaf-page__corner--br {
  bottom: -2px;
  right: -2px;
  border-block-start: none;
  border-inline-start: none;
  border-end-end-radius: 5px;
}
.mushaf-page__corner::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--mushaf-gold);
  transform: rotate(45deg);
  opacity: 0.85;
}
.mushaf-page__corner--tl::after {
  top: 5px;
  left: 5px;
}
.mushaf-page__corner--tr::after {
  top: 5px;
  right: 5px;
}
.mushaf-page__corner--bl::after {
  bottom: 5px;
  left: 5px;
}
.mushaf-page__corner--br::after {
  bottom: 5px;
  right: 5px;
}

/* --- Edition lattice band (print-edition ornament) ----------------------
   An original geometric diamond lattice ringing the page just outside
   the gold rule — the visual language of the Madinah green margins and
   the Indo-Pak cream prints, drawn from scratch in pure CSS (no copied
   artwork, no image assets). Only the three print-edition papers show
   it; every other paper keeps the clean gold rule. The pattern renders
   as a padding ring so it can never cover the text, and the whole band
   stays hidden where mask-composite is unsupported (graceful fallback
   to the plain frame, never a full-bleed fill). */
.mushaf-page__lattice {
  display: none;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .mushaf-page-wrap[data-mushaf-paper='madinah'] .mushaf-page__lattice,
  .mushaf-page-wrap[data-mushaf-paper='cream'] .mushaf-page__lattice,
  .mushaf-page-wrap[data-mushaf-paper='royal-black'] .mushaf-page__lattice {
    display: block;
    position: absolute;
    inset: -11px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--mushaf-gold) 55%, transparent);
    border-radius: 5px;
    background:
      repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--mushaf-gold) 42%, transparent) 0 1.5px,
        transparent 1.5px 7px
      ),
      repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--mushaf-gold) 42%, transparent) 0 1.5px,
        transparent 1.5px 7px
      );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}

/* --- Margin medallions (page head) --------------------------------------
   The juz number in a gold rosette pill, the running surah name in a
   hairline cartouche — the two-line running head of a printed mushaf.
   Decorative (aria-hidden): the in-flow banner repeats the name. */
.mushaf-page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-1) var(--space-3);
  margin-block-end: var(--space-2);
  border-block-end: 1px solid color-mix(in srgb, var(--mushaf-gold) 30%, transparent);
}
.mushaf-page__juz-medallion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--mushaf-gold) 55%, transparent);
  background: color-mix(in srgb, var(--mushaf-gold) 8%, transparent);
  color: color-mix(in srgb, var(--mushaf-gold) 72%, var(--mushaf-paper-ink, var(--color-text)));
  font-family: var(--font-arabic);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
}
.mushaf-page__juz-rosette {
  color: var(--mushaf-gold);
}
.mushaf-page__surah-cartouche {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px var(--space-4);
  border: 1px solid color-mix(in srgb, var(--mushaf-gold) 42%, transparent);
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--mushaf-gold) 58%, var(--mushaf-paper-ink, var(--color-text)));
  font-family: var(--font-arabic);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
}

/* --- The text column ------------------------------------------------------ */
.mushaf-page__text {
  font-family: var(--mushaf-font-family, var(--font-arabic));
  font-size: calc(1.65rem * var(--mushaf-font-scale, 1));
  line-height: calc(2.15 * var(--mushaf-line-scale, 1));
  color: var(--mushaf-paper-ink, var(--color-text));
  text-align: justify;
  text-align-last: center;
  word-spacing: 0.08em;
}

.mushaf-verses {
  display: inline;
}

.mushaf-ayah {
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
/* v4.1: a bookmarked ayah gets a soft primary wash under its ✦ flag —
   the class shipped in markup with no rule. */
.mushaf-ayah--bookmarked {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: var(--radius-xs);
}
.mushaf-ayah:hover {
  background: color-mix(in srgb, var(--mushaf-paper-ink, var(--color-text)) 8%, transparent);
}
.mushaf-ayah--reciting {
  background: color-mix(in srgb, var(--mushaf-gold) 14%, transparent);
  border-radius: var(--radius-xs);
}

.mushaf-ayah__marker {
  font-size: 0.75em;
  color: color-mix(in srgb, var(--mushaf-gold) 60%, var(--mushaf-paper-ink, var(--color-text)));
  white-space: nowrap;
  /* The marker glyph is the pointer path to the ayah detail (verse words
     resolve to word-taps by design) — expand its hitbox invisibly so the
     12px glyph taps like a 30px+ target without touching the paper. */
  padding: 0.45em 0.55em;
  margin: -0.45em -0.55em;
}
.mushaf-ayah__bookmark-flag {
  color: var(--cat-gold-text);
  font-size: 0.8em;
}
/* The printed sajda mark ۩ rides after the ayah-end marker at the fifteen
   places of prostration — always in the illumination gold. */
.mushaf-ayah__sajda {
  margin-inline-start: 2px;
  color: var(--mushaf-gold);
}

/* --- Madinah text rhythm ---------------------------------------------------
   The Madinah print justifies every line edge-to-edge with generous word
   spacing; its ayah-end numbers sit in ornate roundels. The roundel is an
   original CSS treatment (tinted pill ring behind the marker glyph — the
   marker's invisible 30px+ hitbox is untouched), and justification stays
   word-based: Arabic script must never be letter-spaced (it breaks joins). */
.mushaf-page-wrap[data-mushaf-paper='madinah'] .mushaf-page__text {
  text-align: justify;
  text-align-last: center;
  text-justify: inter-word;
  word-spacing: 0.13em;
}
.mushaf-page-wrap[data-mushaf-paper='madinah'] .mushaf-ayah__marker {
  /* Tight roundel: the tint paints only behind the glyphs (content-box)
     and the ring is an inward-offset outline — the marker's padded 30px+
     hitbox stays untouched, so only the number wears the circle. The
     inline-start margin is slightly relaxed so the ring never kisses the
     previous ayah's last letter. */
  background: color-mix(in srgb, var(--mushaf-gold) 13%, transparent);
  background-clip: content-box;
  outline: 1px solid color-mix(in srgb, var(--mushaf-gold) 50%, transparent);
  outline-offset: -0.4em;
  border-radius: var(--radius-pill);
  margin-inline-start: -0.4em;
}
.mushaf-page-wrap[data-mushaf-paper='madinah'] .mushaf-bismillah {
  font-size: 1.12em;
  font-weight: 700;
}

/* --- Cream edition markers ---------------------------------------------------
   Indo-Pak prints mark ayah ends in deep red. Fixed print red (the documented
   raw-hex exception for print — this red lives on the cream paper in both
   app themes, never on app surfaces). */
.mushaf-page-wrap[data-mushaf-paper='cream'] .mushaf-ayah__marker {
  /* Same tight-roundel technique as the Madinah edition, in print red. */
  color: #b3261e;
  background: color-mix(in srgb, #b3261e 9%, transparent);
  background-clip: content-box;
  outline: 1px solid color-mix(in srgb, #b3261e 45%, transparent);
  outline-offset: -0.4em;
  border-radius: var(--radius-pill);
  margin-inline-start: -0.4em;
}

/* --- Tajweed on dark papers ---------------------------------------------------
   The --tw-* hues are app-theme scoped, but mushaf paper is independent of
   the app theme — a black page open in light mode used to get the light
   hues on a dark ground (ghunnah green and qalqalah cyan washed out). Dark
   papers always take the lifted hues. Values mirror the dark-theme block
   in variables.css; keep them in lockstep. */
.mushaf-page-wrap[data-mushaf-paper='night'],
.mushaf-page-wrap[data-mushaf-paper='amoled'],
.mushaf-page-wrap[data-mushaf-paper='royal-black'] {
  --tw-hamza-wasl: #bdbdbd;
  --tw-lam-shamsiyah: #bdbdbd;
  --tw-ghunnah: #66bb6a;
  --tw-ikhfa: #66bb6a;
  --tw-iqlab: #66bb6a;
  --tw-idgham-ghunnah: #66bb6a;
  --tw-idgham-shafawi: #66bb6a;
  --tw-ikhfa-shafawi: #66bb6a;
  --tw-qalqalah: #4dd0e1;
  --tw-tafkhim: #64b5f6;
  --tw-madd-normal: #f8a8c5;
  --tw-madd-iwad: #f8a8c5;
  --tw-madd-badal: #f8a8c5;
  --tw-madd-arid: #f8a8c5;
  --tw-madd-munfasil: #ffa726;
  --tw-madd-silah: #ffa726;
  --tw-madd-muttasil: #f77fb0;
  --tw-madd-laazim: #ef5350;
}

/* --- In-flow surah banner --------------------------------------------------
   A new surah opens with an ornament-framed cartouche carrying its name,
   flanked by gold diamonds on fading hairlines. */
.mushaf-surah-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin: var(--space-2) 0;
  text-align: center;
  /* The banner is a recite button — reset the button chrome so the paper
     reads exactly as before, with a pointer + focus ring as the only tells. */
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.mushaf-surah-banner__flank {
  position: relative;
  display: inline-block;
  color: var(--mushaf-gold);
  font-size: 0.72em;
  line-height: 1;
}
/* The hairline rule that runs from each diamond out toward the frame.
   Symmetric fade so it reads identically on both sides of the cartouche;
   the page is always RTL, so the FIRST flank renders on the right and its
   rule extends rightward (inset-inline-end), the LAST extends leftward. */
.mushaf-surah-banner__flank::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(28px, 7vw, 72px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--mushaf-gold) 55%, transparent) 45%,
    color-mix(in srgb, var(--mushaf-gold) 55%, transparent) 55%,
    transparent
  );
}
.mushaf-surah-banner__flank:first-child::after {
  inset-inline-end: 100%;
}
.mushaf-surah-banner__flank:last-child::after {
  inset-inline-start: 100%;
}
.mushaf-surah-banner__frame {
  padding: calc(var(--space-1) / 2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--mushaf-gold) 58%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--mushaf-gold) 7%, transparent);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mushaf-gold) 12%, transparent);
}
.mushaf-surah-banner__name {
  font-family: var(--mushaf-font-family, var(--font-arabic));
  font-size: 1em;
  font-weight: 700;
  color: color-mix(in srgb, var(--mushaf-gold) 35%, var(--mushaf-paper-ink, var(--color-text)));
}
/* (v4.5) the informative line under the cartouche: "سورة الفاتحة · ٧ آيات",
   set small in the caption face so the calligraphic name stays the star. */
.mushaf-surah-banner__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

/* --- Print-edition surah panels ------------------------------------------
   The Madinah print opens each surah with a filled rectangular panel, the
   cream Indo-Pak print with a heavier gilded band, the black edition with
   a pale-gold outline on the dark page. Original CSS treatments in each
   edition's own accent — same markup, same recite affordance. */
.mushaf-page-wrap[data-mushaf-paper='madinah'] .mushaf-surah-banner__frame {
  padding: var(--space-1_5) var(--space-6);
  border: 1.5px solid color-mix(in srgb, var(--mushaf-gold) 72%, transparent);
  background: color-mix(in srgb, var(--mushaf-gold) 13%, transparent);
  box-shadow:
    inset 0 0 0 2px var(--mushaf-paper-bg, var(--color-surface)),
    inset 0 0 0 3px color-mix(in srgb, var(--mushaf-gold) 42%, transparent);
}
.mushaf-page-wrap[data-mushaf-paper='madinah'] .mushaf-surah-banner__name {
  font-size: 1.12em;
}
.mushaf-page-wrap[data-mushaf-paper='cream'] .mushaf-surah-banner__frame {
  padding: var(--space-1_5) var(--space-6);
  border: 1.5px solid color-mix(in srgb, var(--mushaf-gold) 75%, transparent);
  background: color-mix(in srgb, var(--mushaf-gold) 16%, transparent);
  box-shadow:
    inset 0 0 0 2px var(--mushaf-paper-bg, var(--color-surface)),
    inset 0 0 0 3px color-mix(in srgb, var(--mushaf-gold) 45%, transparent);
}
.mushaf-page-wrap[data-mushaf-paper='royal-black'] .mushaf-surah-banner__frame {
  padding: var(--space-1_5) var(--space-6);
  border: 1.5px solid color-mix(in srgb, var(--mushaf-gold) 80%, transparent);
  background: transparent;
  box-shadow:
    inset 0 0 0 2px var(--mushaf-paper-bg, var(--color-surface)),
    inset 0 0 0 3px color-mix(in srgb, var(--mushaf-gold) 35%, transparent);
}
.mushaf-surah-banner__meta {
  font-family: var(--font-arabic);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--mushaf-gold) 55%, var(--mushaf-paper-ink, var(--color-text)));
}
.mushaf-bismillah {
  text-align: center;
  margin: var(--space-3) 0;
}

/* --- Page-number medallion (page foot) --------------------------------------
   Concentric gold rings around the Eastern-Arabic page number — the
   colophon circle of a printed mushaf. */
.mushaf-page__footer {
  display: flex;
  justify-content: center;
  padding-top: var(--space-3);
  margin-block-start: var(--space-2);
}
.mushaf-page__number {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding-inline: var(--space-2);
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--mushaf-gold) 65%, transparent);
  box-shadow:
    inset 0 0 0 3px var(--mushaf-paper-bg, var(--color-surface)),
    inset 0 0 0 4px color-mix(in srgb, var(--mushaf-gold) 35%, transparent);
  color: color-mix(in srgb, var(--mushaf-gold) 55%, var(--mushaf-paper-ink, var(--color-text)));
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- TRUE fullscreen (v4.4) --------------------------------------------------
   The book claims the entire viewport — width AND height. Body-level chrome
   hiding lives in layout.css (body.is-mushaf-fullscreen, beside its sibling
   is-focus-mode); everything view-scoped is here. The "reading room" behind
   the book is a calm deep green in BOTH app themes — a book under its
   reading lamp, not a themed panel. */
.view--mushaf-fullscreen {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(140% 100% at 50% 18%, #203829, #101c13 72%);
}
.view--mushaf-fullscreen .mushaf-page-wrap {
  flex: 1;
  min-height: 0;
  align-items: stretch;
  width: 100%;
}
.view--mushaf-fullscreen .mushaf-book {
  flex: 1;
  min-height: 0;
  width: 100%;
  /* No max-width cap: TRUE fullscreen means the book claims the real
     viewport width AND height (the explicit contract of this mode). Line
     comfort on very wide screens comes from the text column's own
     viewport-scaled padding, exactly like a large-format printed mushaf. */
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* (v4.5) in fullscreen the spread reads as one wide leaf: facing pages
   split the viewport, joined by the spine shadow (no gap, no borders —
   the "reading room" backdrop frames the leaf as a whole). */
.view--mushaf-fullscreen .mushaf-book--spread {
  flex-direction: row;
  gap: 0;
}
.view--mushaf-fullscreen .mushaf-book--spread .mushaf-page + .mushaf-page {
  box-shadow: inset -18px 0 34px -24px rgba(0, 0, 0, 0.5);
}
.view--mushaf-fullscreen .mushaf-page {
  flex: 1;
  min-height: 0;
  max-width: none;
  width: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
/* In fullscreen the text column itself scrolls — the frame, medallions and
   page number stay pinned like the printed page while long pages flow. */
.view--mushaf-fullscreen .mushaf-page__text {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-7));
  overscroll-behavior: contain;
}

/* The floating control bar: translucent glass over the book, auto-fading
   after a few idle seconds (body.mushaf-fs-idle, armed by app/fullscreen.js)
   so NOTHING but the page stays on screen while reading. */
.mushaf-fs-controls {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - var(--space-6));
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(232, 227, 211, 0.16);
  background: color-mix(in srgb, #10201a 76%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-nav);
  transition:
    opacity var(--dur-slow) var(--ease-standard),
    transform var(--dur-slow) var(--ease-spring);
}
.mushaf-fs-controls .icon-btn {
  color: #e8e3d3;
}
.mushaf-fs-controls .icon-btn:hover {
  background: rgba(232, 227, 211, 0.14);
}
.mushaf-fs-controls .icon-btn--playing {
  color: #d4bd77;
  background: rgba(212, 189, 119, 0.16);
}
.mushaf-fs-controls__page,
.mushaf-fs-controls__ayah {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: #e8e3d3;
  padding-inline: var(--space-2);
  min-width: 72px;
  text-align: center;
  white-space: nowrap;
}
.mushaf-fs-controls__ayah {
  color: #d4bd77;
}
body.mushaf-fs-idle .mushaf-fs-controls,
body.mushaf-fs-idle .mushaf-fs-console,
body.mushaf-fs-idle .mushaf-fs-echo {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* Fullscreen console second row: the windowed recitation chips re-homed
   over the book. Horizontally scrollable so small phones keep every chip
   reachable; same glass treatment + idle auto-fade as the control bar. */
.mushaf-fs-console {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px) + 52px);
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - var(--space-6));
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(232, 227, 211, 0.16);
  background: color-mix(in srgb, #10201a 76%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-nav);
  overflow-x: auto;
  scrollbar-width: none;
  transition:
    opacity var(--dur-slow) var(--ease-standard),
    transform var(--dur-slow) var(--ease-spring);
}
.mushaf-fs-console::-webkit-scrollbar {
  display: none;
}
.mushaf-fs-console .icon-btn {
  color: #e8e3d3;
  flex: none;
}
.mushaf-fs-console .icon-btn:hover {
  background: rgba(232, 227, 211, 0.14);
}
.mushaf-fs-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--touch-target);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(232, 227, 211, 0.22);
  background: transparent;
  color: #e8e3d3;
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}
.mushaf-fs-chip--on {
  color: #d4bd77;
  border-color: rgba(212, 189, 119, 0.55);
  background: rgba(212, 189, 119, 0.16);
}
.mushaf-fs-echo {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px) + 104px);
  margin-inline: auto;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  padding: var(--space-1_5) var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #10201a 82%, transparent);
  border: 1px solid rgba(212, 189, 119, 0.45);
  color: #d4bd77;
  font-size: var(--fs-sm);
  z-index: var(--z-nav);
  transition:
    opacity var(--dur-slow) var(--ease-standard),
    transform var(--dur-slow) var(--ease-spring);
}

/* Multi-surah recitation picker + in-player voice picker rows. */
.mushaf-pick-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1_5);
  border-bottom: 1px solid var(--color-border);
}
.mushaf-pick-row:last-child {
  border-bottom: none;
}
.mushaf-pick-row__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-arabic);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reciter-pick .panel__subtext {
  margin-block: var(--space-3) var(--space-1);
}

/* --- (v4.5) Fullscreen edge tap zones ---------------------------------------
   The e-reader turn zones: a tap near the right edge turns BACK, near the
   left edge turns FORWARD (a physical Arabic book turns right-to-left).
   Narrow by design (frame + margin territory, not ayah text), transparent,
   and aria-hidden + tabindex -1 — the visible control bar and the arrow
   keys carry the keyboard path, so these stay pointer-only. Desktop gets
   a whisper of a chevron on hover so the affordance is discoverable. */
.mushaf-fs-taps {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  pointer-events: none;
  /* --z-raised: above the (static, unpositioned) page sheets inside the
     fullscreen view's own stacking context; the fixed control bar at
     --z-nav still floats above everything. */
  z-index: var(--z-raised);
}
.mushaf-fs-tap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(30px, 8vw, 90px);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: transparent;
  transition: color var(--dur-base) var(--ease-standard);
}
.mushaf-fs-tap--prev {
  /* physical: fixed book edges, not mirrored — the zones are positional
     (screen edges), while the chevrons inside already swap per RTL. */
  right: 0;
}
.mushaf-fs-tap--next {
  /* physical: see above. */
  left: 0;
}
@media (hover: hover) {
  .mushaf-fs-tap:hover {
    color: rgba(232, 227, 211, 0.5);
  }
}

/* --- Translation tray (v4.4) --------------------------------------------------
   The Mushaf-side home of the classic reader's inline translations: this
   page's ayahs under the paper — never ON it. */
.mushaf-tray {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.mushaf-tray__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  padding-block-end: var(--space-2);
}
.mushaf-tray__title svg {
  color: var(--color-primary-text);
}
.mushaf-tray__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}
.mushaf-tray__row:first-of-type {
  border-block-start: none;
}
.mushaf-tray__ref {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  padding-block-start: 2px;
}
.mushaf-tray__text {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.mushaf-tray__row--loading {
  grid-template-columns: 1fr;
}
.mushaf-tray__row--loading .sk {
  width: 100%;
}

/* --- Mushaf action sheet (v4.4) ------------------------------------------------
   The "everything this book does" drawer behind the ⋯ button: labeled rows
   in hairline-separated groups, replacing the old 7-button topbar. */
.mushaf-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mushaf-sheet__group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mushaf-sheet__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.mushaf-sheet__row + .mushaf-sheet__row {
  border-block-start: 1px solid var(--color-border);
}
.mushaf-sheet__row:hover {
  background: var(--color-surface-alt);
}
.mushaf-sheet__row:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus) inset;
}
.mushaf-sheet__row svg {
  flex-shrink: 0;
  color: var(--color-primary-text);
}
.mushaf-sheet__label {
  flex: 1;
}
.mushaf-sheet__row--toggle .switch {
  flex-shrink: 0;
}

.mushaf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.mushaf-nav__hint {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.mushaf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-9) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Jump drawer + khatma block + bookmarks modal */
.mushaf-jump {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mushaf-jump__heading {
  font-size: var(--fs-md);
  font-weight: 700;
}
.mushaf-jump__page-form {
  display: flex;
  gap: var(--space-2);
}
.mushaf-jump__page-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
}
.mushaf-jump__surah-list,
.mushaf-jump__juz-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 320px;
  overflow-y: auto;
}
.mushaf-jump__surah {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-align: start;
  font-size: var(--fs-sm);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.mushaf-jump__surah:hover {
  background: var(--color-surface-alt);
}
.mushaf-jump__surah-num {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-alt);
  font-size: var(--fs-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mushaf-jump__surah-name {
  flex: 1;
  font-weight: 500;
}
/* (v4.5) the ayah count rides at the row's end — the same informative
   line the classic reader's tiles carry, in the primary-tinted caption. */
.mushaf-jump__surah-count {
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text-secondary));
  white-space: nowrap;
}
.mushaf-jump__juz {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  text-align: start;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.mushaf-jump__juz:hover {
  background: var(--color-surface-alt);
}

.mushaf-khatma {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mushaf-khatma__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.mushaf-khatma__label {
  font-weight: 700;
}
.mushaf-khatma__sub {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.mushaf-khatma__bitwrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mushaf-khatma__bits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}
.mushaf-khatma__bit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}
.mushaf-khatma__bit b {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.mushaf-khatma__bit span {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.mushaf-khatma__verdict {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary-text);
}
.mushaf-khatma__verdict.celebrate {
  animation: celebrateBloom var(--dur-celebrate) var(--ease-spring);
}
.mushaf-khatma__history {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.mushaf-khatma__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mushaf-bookmarks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mushaf-folder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.mushaf-folder-chip-wrap {
  display: inline-flex;
  align-items: center;
}
.mushaf-bookmark-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.mushaf-bookmark-row:last-child {
  border-bottom: none;
}
.mushaf-bookmark-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mushaf-bookmark-row__ref {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.mushaf-bookmark-row__name {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.mushaf-bookmark-row__note {
  flex: 2;
  min-width: 120px;
}
/* (v4.1) was a lone 520px breakpoint 40px under the 560px one — folded
   into the shared small-phone step to keep the breakpoint set tight. */
@media (max-width: 560px) {
  .mushaf-bookmark-row {
    flex-wrap: wrap;
  }
  .mushaf-bookmark-row__note {
    flex: 1 1 100%;
  }
}

/* Ayah detail sheet */
.mushaf-ayah-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mushaf-ayah-detail__ref {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-primary-text);
}
.mushaf-ayah-detail__arabic {
  font-family: var(--font-arabic);
  font-size: var(--fs-arabic-card);
  line-height: var(--lh-arabic);
}
.mushaf-ayah-detail__translation {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.mushaf-ayah-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* (v4.5) the hifz parity row: the reader's spaced-repetition chips,
   one tap from the mushaf's ayah detail. */
.mushaf-ayah-detail__hifz {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--color-border);
}

/* --- (v4.5) Classic-reader immersive mode -----------------------------------
   Chrome away (body.is-reader-immersive in layout.css), column wide, one
   floating GLASS bar to leave — the reader-side sibling of the mushaf's
   fullscreen control bar, with the same auto-fade idle contract
   (body.reader-fs-idle, armed by the shared timer in app/fullscreen.js).
   The bar carries the mode's whole navigation contract (exit · prev/next
   surah · back to list · recitation + counter), so the mode is never a
   trap from any scroll depth. It rides above the playerbar (which stays
   on purpose for follow-along), clear of the reading line. */
.reader-immersive-exit {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - var(--space-6));
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-nav);
  transition:
    opacity var(--dur-slow) var(--ease-standard),
    transform var(--dur-slow) var(--ease-standard);
}
.reader-immersive-exit .icon-btn:hover {
  background: var(--color-surface-alt);
}
.reader-immersive-exit__label {
  /* the center "back to list" affordance is a real button (route push),
     styled as quiet text so the bar reads exit-first, not toolbar-y */
  border: none;
  background: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.reader-immersive-exit__label:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.reader-immersive-exit__count {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  padding-inline: var(--space-1);
}
/* Auto-fade on idle — same contract as the mushaf bar: gone from the
   reading line after 3s, summoned back by any pointer/key. The fade keeps
   a hover listener alive via the body class re-added on pointermove. */
body.reader-fs-idle .reader-immersive-exit,
body.reader-fs-idle .reader-immersive-console,
body.reader-fs-idle .reader-immersive-echo {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
/* While the playerbar is up (follow-along recitation), the glass bars
   lift clear of it instead of fighting for the same bottom space. */
body.has-player .reader-immersive-exit {
  bottom: calc(var(--space-4) + var(--playerbar-height) + env(safe-area-inset-bottom, 0px));
}
body.has-player .reader-immersive-console {
  bottom: calc(var(--space-4) + var(--playerbar-height) + env(safe-area-inset-bottom, 0px) + 52px);
}
body.has-player .reader-immersive-echo {
  bottom: calc(var(--space-4) + var(--playerbar-height) + env(safe-area-inset-bottom, 0px) + 104px);
}
@media (prefers-reduced-motion: reduce) {
  .reader-immersive-exit,
  body.reader-fs-idle .reader-immersive-exit {
    transition: none;
  }
}

/* Immersive console second row + echo banner: the windowed recitation
   chips re-homed over the reading column. Same glass treatment, same
   idle auto-fade, horizontally scrollable for small phones. */
.reader-immersive-console {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px) + 52px);
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - var(--space-6));
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-nav);
  overflow-x: auto;
  scrollbar-width: none;
  transition:
    opacity var(--dur-slow) var(--ease-standard),
    transform var(--dur-slow) var(--ease-standard);
}
.reader-immersive-console::-webkit-scrollbar {
  display: none;
}
.reader-immersive-console .icon-btn {
  flex: none;
}
.reader-immersive-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--touch-target);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}
.reader-immersive-chip--on {
  color: var(--color-primary-text);
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.reader-immersive-echo {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px) + 104px);
  margin-inline: auto;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  padding: var(--space-1_5) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  color: var(--color-primary-text);
  font-size: var(--fs-sm);
  z-index: var(--z-nav);
  transition:
    opacity var(--dur-slow) var(--ease-standard),
    transform var(--dur-slow) var(--ease-standard);
}

/* ==========================================================================
   4. Tafsir panel + tabs
   ========================================================================== */
.tafsir-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
}
.tafsir-tab {
  display: inline-flex;
  align-items: center;
  position: relative; /* ::after below expands the hit area to 44px */
  gap: var(--space-1);
  padding: var(--space-1_5) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  /* v4.1: raised to 40px visual; 2026-09 audit U2 adds the ::after hit
     expansion below so the effective touch target meets the 44px contract. */
  min-height: 40px;
  touch-action: manipulation;
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}
/* 2026-09 audit U2: 40px visual, 44px hit area via the .chip ::after pattern. */
.tafsir-tab::after {
  content: '';
  position: absolute;
  inset-block: -2px;
  inset-inline: -4px;
}
.tafsir-tab:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.tafsir-tab--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.tafsir-tab__cloud {
  opacity: 0.75;
}

.tafsir-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tafsir-panel__author {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-text-muted);
}
.tafsir-panel__content {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
.tafsir-panel__body {
  /* Arabic commentary renders RTL even in the EN UI (the text is Arabic).
     text-align: start follows `direction` — logical, not physical. */
  direction: rtl;
  text-align: start;
  font-size: var(--fs-base);
  line-height: var(--lh-arabic);
}
.tafsir-section-h {
  display: block;
  font-weight: 700;
  margin-block: var(--space-3);
  color: var(--color-primary-text);
}
.tafsir-panel__loading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tafsir-panel__remote {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

/* Tafsir compare: the second source sits under a hairline, with its own
   picker row (single-source chip + one chip per comparable edition). */
.tafsir-compare {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tafsir-compare__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1_5);
}
.tafsir-compare__label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-text-muted);
}
.tafsir-compare__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ==========================================================================
   5. Word study panel
   ========================================================================== */
.word-study {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.word-study__ref {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-primary-text);
}
.word-study__arabic {
  font-family: var(--font-arabic);
  font-size: var(--fs-xl);
  line-height: var(--lh-arabic);
}
.word-study__translit {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--color-text-secondary);
}
.word-study__gloss {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.word-study__grammar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.word-study__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
}
.word-study__affixes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
  align-items: center;
}
.word-study__affixes-label {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.word-study__root {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.word-study__root-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.word-study__root-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.word-study__root-count {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-inline-start: auto;
}
.word-study__root-text {
  font-family: var(--font-arabic);
  font-size: var(--fs-lg);
}
.word-study__root-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
}
.word-study__root-hint {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.word-study__root-browse,
.word-study__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.word-study__tajweed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.word-study__tajweed-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.word-study__tajweed-arabic {
  font-family: var(--font-arabic);
  font-size: var(--fs-lg);
  line-height: var(--lh-arabic);
}

/* Tajweed rule inspector rows (also used by the legend) */
.tajweed-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tajweed-legend__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.tajweed-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-top: 3px;
  flex-shrink: 0;
}
/* (v4.5.2) rules the standard chart leaves uncolored get an outline-only
   swatch — visually "known, deliberately not marked". */
.tajweed-legend__swatch--plain {
  background: transparent;
  border: 1.5px dashed var(--color-border-strong);
}
.tajweed-legend__family {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}
.tajweed-legend__family:first-child {
  border-block-start: none;
  padding-block-start: 0;
}
.tajweed-legend__family-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tajweed-legend__family-name {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.tajweed-legend__family-desc {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1) 22px;
}
.tajweed-legend__name {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.tajweed-legend__desc {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.wti-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.wti-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-top: 3px;
  flex-shrink: 0;
}
.wti-letters {
  font-family: var(--font-arabic);
  font-size: var(--fs-md);
}
.wti-name {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.wti-name-alt {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.wti-desc {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* ==========================================================================
   6. Mushaf display settings panel
   ========================================================================== */
.mushaf-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mushaf-settings__fonts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mushaf-settings__font {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: start;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.mushaf-settings__font:hover {
  border-color: var(--color-border-strong);
}
.mushaf-settings__font--active {
  border-color: var(--color-primary);
  box-shadow: var(--ring-primary);
}
.mushaf-settings__font-sample {
  font-size: var(--fs-lg);
  flex: 1;
}
.mushaf-settings__font-name {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.mushaf-settings__papers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.mushaf-settings__paper {
  position: relative;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
}
.mushaf-settings__paper--active {
  border-color: var(--color-text);
  box-shadow: var(--ring-primary);
}
.mushaf-settings__bismillah {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.mushaf-settings__bismillah-label {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.bismillah-sample {
  font-family: var(--font-arabic);
  font-size: var(--fs-md);
}
/* v4.1: the Bismillah style options are real buttons — they rendered as
   unstyled default <button>s before this rule existed. */
.mushaf-settings__bismillah-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-height: var(--touch-target);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.mushaf-settings__bismillah-chip--active {
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  box-shadow: var(--ring-primary);
}
/* Display settings: the underline toggle is a sub-option of word study,
   so it nests one level in — same switch, just a visual parent/child cue. */
.toggle-row--sub {
  margin-inline-start: var(--space-6);
}
/* Display settings: the two study entry points (drill + rules & colors)
   sit side by side as one group instead of a lone floating button. */
.mushaf-settings__study-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ==========================================================================
   7. Tajweed practice (drill mode)
   ========================================================================== */
.tajweed-practice {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.practice-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.practice-stats__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-variant-numeric: tabular-nums;
}
.practice-stats__item b {
  font-size: var(--fs-md);
}
.practice-stats__item span {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.practice-launch-btn {
  align-self: flex-start;
}
.practice-mixed-btn {
  align-self: stretch;
}
.practice-rule-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.practice-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: start;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.practice-rule:hover {
  border-color: var(--color-primary);
}
.practice-rule__swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
}
.practice-rule__name {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.practice-rule__acc {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.practice-rule__text {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.tajweed-practice--round {
  gap: var(--space-3);
}
.practice-round__rule {
  font-size: var(--fs-md);
  font-weight: 700;
}
.practice-round__ref {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.practice-ayah {
  font-family: var(--font-arabic);
  font-size: calc(var(--fs-arabic-card) * 0.9);
  line-height: var(--lh-arabic);
  text-align: center;
  direction: rtl;
}
.practice-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.practice-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.practice-result__headline {
  font-size: var(--fs-md);
  font-weight: 700;
}
.practice-result__legend {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
/* v4.1: a flawless drill gets the celebration tint — unstyled until now. */
.practice-result--perfect .practice-result__headline {
  color: var(--color-success-text);
}

/* Practice letters: default / selected / verdict states */
.pu {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
/* (v5.2) same vertical hit expansion as .qword above. */
.pu::after {
  content: '';
  position: absolute;
  inset-block: -8px;
  inset-inline: 0;
}
.pu:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.pu--selected {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-bottom: 2.5px solid var(--color-primary);
}
.pu--correct {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
  color: var(--color-success-text);
  border-bottom: 2.5px solid var(--color-success);
}
.pu--missed {
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
  color: var(--color-warning-text);
  border-bottom: 2.5px dashed var(--color-warning);
}
.pu--wrong {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  color: var(--color-danger-text);
  border-bottom: 2.5px solid var(--color-danger);
}
/* Legend swatches for the drill's verdict colors. (The inline .pu-dot
   copies inside .practice-ayah stay hidden — the rule below predates the
   legend and keeps it that way.) */
.pu-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}
.pu-dot--correct {
  background: var(--color-success);
}
.pu-dot--missed {
  background: var(--color-warning);
}
.pu-dot--wrong {
  background: var(--color-danger);
}
.practice-ayah .pu-dot {
  display: none;
}

/* ==========================================================================
   8. Roots browser
   ========================================================================== */
.roots-totals {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.roots-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  min-height: var(--touch-target);
}
.root-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
  transition:
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.root-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.root-tile__name {
  font-family: var(--font-arabic);
  font-size: var(--fs-lg);
}
.root-tile__meta {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.roots-partial-hint {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.root-detail__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.root-detail__name {
  font-family: var(--font-arabic);
  font-size: var(--fs-xl);
}
.root-detail__stats {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.root-forms {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.root-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.root-form__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.root-form__text {
  font-family: var(--font-arabic);
  font-size: var(--fs-md);
}
.root-form__refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
}
.root-ref {
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

/* Khatma plan form (modal) */
.khatma-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.khatma-plan__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.khatma-plan__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Tafsir body word mark (﴾…﴾ verse quotes inside commentary) */
.tafsir-word-mark {
  color: var(--color-primary-text);
  font-weight: 700;
}

/* Practice drill tappable word (pre-check default state) */
.practice-word {
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.practice-word:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* (v4.2) Classic-reader windowing: the "show N more verses" sentinels that
 * extend the ayah window in both directions. Centered, quiet, honest —
 * they read as part of the reading flow, not as an error state. */
.quran-window-load {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  margin-inline: auto;
  margin-block: var(--space-3);
}

/* ==========================================================================
   (v4.6.0) Tajweed rules & colors picker — the settings panel that lets
   the reader switch rules on/off and recolor each family.
   ========================================================================== */
.tajpick {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tajpick h2 {
  font-size: var(--fs-lg);
}
.tajpick__sample {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 1.9rem;
  line-height: 2.2;
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-alt) 45%, var(--color-surface));
  margin: 0;
}
.tajpick__family {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.tajpick__family-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tajpick__family-swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.tajpick__family-name {
  font-weight: 600;
  font-size: var(--fs-md);
}
.tajpick__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
}
.tajpick__swatch {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard);
}
/* (v5.2) 44px hit-area expansion without growing the color dot itself. */
.tajpick__swatch::after {
  content: '';
  position: absolute;
  inset: -6px;
}
.tajpick__swatch:hover {
  transform: scale(1.12);
}
.tajpick__swatch--active {
  border-color: var(--color-text);
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 4px var(--color-text);
}
.tajpick__swatch:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.tajpick__rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: none;
  text-align: start;
  cursor: pointer;
  min-height: 52px;
}
.tajpick__rule:hover {
  background: var(--color-surface-alt);
}
.tajpick__rule:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus) inset;
}
.tajpick__rule-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  flex-shrink: 0;
}
.tajpick__rule-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.tajpick__rule-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}
.tajpick__rule-desc {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.tajpick__rule--off .tajpick__rule-name {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-border-strong);
}
.tajpick__rule .switch {
  flex-shrink: 0;
}
.tajpick__reset {
  align-self: center;
}