/* ===========================
   تطبيق القرآن الكريم — Styles
   =========================== */

/* ============================================================
   KFGQPC Uthmanic Hafs — official Madinah Mushaf font
   ============================================================
   Self-hosted under /fonts/. Font property of the King Fahd Glorious
   Quran Printing Complex (KFGQPC), provided for non-commercial
   Islamic use. Used in pages mode (.mp-text) for authentic Mushaf
   typography; falls back to Amiri Quran elsewhere.

   font-display:swap → Amiri Quran shows immediately while uthmanic
   loads, so the first paint is never blocked. */
@font-face {
  font-family: "UthmanicHafs";
  src: url("../fonts/uthmanic-hafs.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Light (default) */
  --bg: #f7f5ef;
  --surface: #ffffff;
  --surface-2: #f0ece1;
  --text: #1a1a1a;
  --text-muted: #6b6b6b;
  --accent: #0b3d2e;
  --accent-2: #c8a45e;
  --gold-ink: #9a7a30;        /* Wave 27.19 — darker gold for as-text/icon use; #c8a45e was 2.35:1 on white */
  --accent-soft: rgba(11, 61, 46, 0.08);
  --border: rgba(0, 0, 0, 0.08);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --radius: 14px;
  --radius-lg: 22px;
  --quran-size: 30px;
  --quran-line: 2.2;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

[data-theme="dark"] {
  --bg: #0d1411;
  --surface: #131c18;
  --surface-2: #1a2520;
  --text: #ecebe5;
  --text-muted: #8d9088;
  --accent: #4ca088;
  --accent-2: #d4b06e;
  --gold-ink: var(--accent-2);  /* dark theme gold already reads (~6:1) */
  --accent-soft: rgba(76, 160, 136, 0.12);
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* قرطاسي (sepia) theme removed in Wave 27.14 — migrated to light (see applyTheme). */

/* Wave 16 / G1 — Mushaf cover theme. Deep forest green that wraps the
   cream Mushaf page like a printed Quran's leather cover, with cyan/
   turquoise as the interactive accent (matches Tmkeen's app style). */
[data-theme="mushaf"] {
  --bg: #0a2e22;             /* deep forest cover */
  --surface: #0f3a2c;         /* slightly lighter for cards */
  --surface-2: #15473a;       /* hover / pressed state */
  --text: #f0e6c8;            /* warm cream text on green */
  --text-muted: #a8b5a8;
  --accent: #4ecdc4;          /* turquoise — primary interactive */
  --accent-2: #d4af37;        /* gold — ornamental highlights */
  --gold-ink: var(--accent-2);  /* mushaf theme gold already reads (~6:1) */
  --accent-soft: rgba(78, 205, 196, 0.12);
  --border: rgba(255, 255, 255, 0.10);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
}

[data-font="sm"] { --quran-size: 24px; --quran-line: 2.0; }
[data-font="md"] { --quran-size: 30px; --quran-line: 2.2; }
[data-font="lg"] { --quran-size: 36px; --quran-line: 2.4; }
[data-font="xl"] { --quran-size: 44px; --quran-line: 2.6; }

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  overflow: hidden;
  /* Stop iOS rubber-band so pull-down doesn't drag the whole shell. */
  overscroll-behavior: none;
  /* Skip the synthetic 300ms double-tap zoom on iOS Safari. */
  touch-action: manipulation;
  transition: background-color 0.25s ease, color 0.25s ease;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select {
  font-family: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

/* ===== Layout ===== */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(12px + var(--safe-top)) 14px 12px;
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 92%, black) 100%);
  color: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
  position: relative;
  z-index: 5;
}

.topbar-title {
  margin: 0;
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.2px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.icon-btn:active { transform: scale(0.92); }
.topbar .icon-btn:hover { background: rgba(255,255,255,0.1); }

/* Always-visible language switch (top bar) — a compact pill showing a globe +
   the OTHER language's own name, so a Russian reader spots the switch at once. */
.lang-toggle {
  width: auto;
  gap: 5px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.topbar .lang-toggle:hover { background: rgba(255,255,255,0.26); }

/* First-launch language gate */
.lang-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, black) 100%);
}
.lang-gate[hidden] { display: none; }
.lang-gate-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: 22px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}
.lang-gate-emoji { font-size: 46px; line-height: 1; }
.lang-gate-title { margin: 14px 0 4px; font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.35; }
.lang-gate-title span { display: block; font-size: 18px; font-weight: 700; opacity: 0.85; }
.lang-gate-sub { margin: 0 0 22px; font-size: 14px; color: var(--text-dim, var(--text)); opacity: 0.75; }
.lang-gate-btn {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 15px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.lang-gate-btn:active { transform: scale(0.98); }
.lang-gate-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Offline downloads list (per reciter edition + mushaf pages) */
.offline-list { display: flex; flex-direction: column; gap: 8px; }
.offl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2);
}
.offl-row.is-active { border-color: var(--accent); }
.offl-meta { display: flex; flex-direction: column; min-width: 0; }
.offl-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.offl-sub { font-size: 12px; color: var(--text-dim, var(--text)); opacity: 0.7; }
.offl-btn {
  flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: transform 0.1s ease, opacity 0.15s ease;
}
.offl-btn:active { transform: scale(0.95); }
.offl-btn.is-done { background: transparent; color: var(--accent); }
.offl-prog { display: flex; align-items: center; gap: 10px; }
.offl-pct { font-size: 14px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.offl-cancel {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer;
}

.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(80px + var(--safe-bottom));
}

.bottom-nav {
  position: sticky;
  bottom: 0;
  display: grid;
  /* Wave 27.19 — 3 items now (السور / المفضلة / الإعدادات) after the Wave 27.14
     nav trim; was repeat(4,1fr) which left an empty 4th column. */
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(8px + var(--safe-bottom));
  box-shadow: 0 -4px 16px rgba(0,0,0,0.04);
  z-index: 4;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  border-radius: 10px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-item.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.nav-item:active { transform: scale(0.96); }

/* ===== Home / Surahs list ===== */

.hero {
  margin: 28px 14px 18px;
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, var(--accent-2)) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero::after {
  content: "";
  position: absolute;
  top: -40px;
  left: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.hero-label {
  font-size: 13px;
  opacity: 0.85;
}

.hero-hijri {
  font-size: 12px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.hero-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
}

.hero-sub {
  font-size: 13px;
  opacity: 0.85;
}

.hero-action {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Verse of the day card — sits between the hero and the surah list. */
/* Reading marker card (علامة القراءة) — a deliberate place the user set. */
.readmark-card {
  margin: 0 14px 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.readmark-card:active { transform: scale(0.99); }
.readmark-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.readmark-icon { font-size: 20px; flex: none; }
.readmark-text { min-width: 0; }
.readmark-label { font-size: 12px; color: var(--text-muted); }
.readmark-where { font-size: 15px; font-weight: 700; color: var(--text); }
.readmark-go { flex: none; font-size: 14px; font-weight: 700; color: var(--accent); }

.votd-card {
  margin: 0 14px 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: start;
  width: calc(100% - 28px);
}

.votd-card:hover { background: var(--surface-2); }
.votd-card:active { transform: scale(0.99); }
.votd-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.votd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.votd-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
}

.votd-loc {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.votd-text {
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: 22px;
  line-height: 1.9;
  color: var(--text);
  text-align: center;
}

.votd-action {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 6px;
  padding: 0 14px 14px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 2;
}

.tab {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.tab.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* Home view switcher (Surahs / Juz) — segmented control on the home page. */
.home-view-switch {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin: 0 14px 14px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 14px;
}

.home-view-tab {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border-radius: 10px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.home-view-tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Visually-hidden skip-to-content link — appears on keyboard focus only. */
.skip-link {
  position: absolute;
  inset-inline-start: 8px;
  top: -100px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: calc(8px + var(--safe-top));
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Wave 27.19 — keyboard focus visibility for the core interactive controls.
   Most relied only on :hover/:active, so keyboard focus was invisible (WCAG 2.4.7).
   :focus-visible keeps mouse/touch taps outline-free. */
.nav-item:focus-visible,
.tab:focus-visible,
.home-view-tab:focus-visible,
.memo-btn:focus-visible,
.verse-action:focus-visible,
.surah-item:focus-visible,
.seg-control button:focus-visible,
.mp-surah-tab:focus-visible,
.page-nav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Topbar buttons sit on the green bar — white outline reads there. */
.topbar .icon-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.surah-list {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.surah-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: background-color 0.15s ease, transform 0.1s ease;
  text-align: start;
  width: 100%;
}

.surah-item:active { transform: scale(0.99); background: var(--surface-2); }

/* Bookmark card: two-button layout (open + delete) inside a single card. */
.bookmark-card {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background-color 0.15s ease;
}
.bookmark-card:hover { background: var(--surface-2); }

.bookmark-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  text-align: start;
  min-width: 0;
}

.bookmark-delete {
  width: 48px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  border-inline-start: 1px solid var(--border);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.bookmark-delete:hover { color: #c0392b; background: rgba(192, 57, 43, 0.08); }
.bookmark-delete:active { transform: scale(0.92); }

.surah-number {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: #4a2f0e;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Lotus 16-petal — small gold petals around an ivory centre with a thin
   inner gold ring. Drawn as a CSS background so every screen that renders
   .surah-number picks it up without touching JS. */
.surah-number::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50 50)'%3E%3Cg fill='%23c8a45e' stroke='%237c5a20' stroke-width='0.5'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3Cg transform='rotate(22.5)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(45)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(67.5)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(90)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(112.5)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(135)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(157.5)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(202.5)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(225)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(247.5)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(270)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(292.5)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(315)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3Cg transform='rotate(337.5)'%3E%3Ccircle cx='0' cy='-42' r='8'/%3E%3C/g%3E%3C/g%3E%3Ccircle r='32' fill='%23fbf6e7' stroke='%237c5a20' stroke-width='0.8'/%3E%3Ccircle r='28' fill='none' stroke='%23c8a45e' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.surah-number span { position: relative; z-index: 1; }

.surah-info {
  flex: 1;
  min-width: 0;
}

.surah-name-ar {
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: 22px;
  /* Was 1.2 + 2px margin — Amiri Quran glyphs have diacritics that hang
     below the baseline (kasra, sukun), so a tight line-height crashed
     them into the meta row below. 1.5 + 6px gives enough breathing room. */
  line-height: 1.5;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.surah-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  line-height: 1.6;
}

/* Bullet separator between adjacent meta chips. Works whether the inner
   spans wrap to a new line or not, because the ::before is part of the chip. */
.surah-meta span + span::before {
  content: "•";
  margin: 0 6px;
  opacity: 0.5;
}

/* The English transliteration used to float on the far-left of the card,
   visually disconnected. We now render it as one of the meta chips inside
   the surah-info block, so the name + meta + translit all read together. */
.surah-name-en {
  font-family: "Tajawal", sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  direction: ltr;
  /* Inline inside .surah-meta — no margin/text-align overrides needed. */
}

/* ===== Surah reader ===== */

.reader-header {
  margin: 16px 14px 22px;
  padding: 22px 18px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.reader-header-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, var(--accent-soft) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, var(--accent-soft) 0%, transparent 50%);
  pointer-events: none;
}

.reader-header-content { position: relative; }

.reader-surah-name {
  font-family: "Amiri Quran", serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

.reader-surah-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.basmala {
  font-family: "Amiri Quran", serif;
  font-size: 28px;
  color: var(--text);
  margin: 18px 14px 22px;
  text-align: center;
  padding: 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Wave 27.9.E — .notice + .notice-action removed. These styled the
   "Salsabil missing for surahs 1-9" callout + switch-to-Kuliev button,
   both deleted in Wave 27.6 when the missing surahs were added. */

.verses {
  padding: 0 16px 30px;
}

.verse-block {
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: var(--quran-size);
  line-height: var(--quran-line);
  color: var(--text);
  text-align: justify;
  text-align-last: center;
  margin-bottom: 18px;
  padding: 12px 4px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
  /* Native browser virtualization: skip rendering verses that scroll out of
     view. Browser still knows their size via the placeholder below.
     Drops Al-Baqara from 4400 DOM-rendered nodes to ~30 at a time on Chrome,
     boosting scroll FPS without writing any JS observer. */
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

.verse-block.active {
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.verse-text {
  /* Allow ayah-end markers to flow inline with text */
}

/* Wave 27.24 — bilingual UI hardening: Qur'anic Arabic must ALWAYS lay out RTL,
   even when the UI language is Russian (html dir=ltr). .mp-line already sets
   direction:rtl explicitly; these cover cards mode, the sync page render,
   the basmala, the verse sheet, the standalone page reader (Wave 27.27:
   .page-verses), the home verse-of-the-day, and search snippets. */
.verse-text, .mp-text, .basmala, .vs-verse, .mushaf-ayah,
.page-verses, .votd-text, .search-result-snippet {
  direction: rtl;
}

/* ============================================================
   Wave 27.27 — LTR (Russian UI) overrides. The Mushaf leaf itself
   (.mp-line / .mp-page-header / flip physics / hizb cartouche) is
   direction-proof by design and needs nothing here.
   ============================================================ */

/* Selects: draw the chevron on the trailing (right) edge in LTR — the
   base rule pins it physically left, which lands under the option text. */
html[dir="ltr"] .select {
  background-position: right 14px center;
}

/* Arabic-only tafsir bodies keep RTL layout inside the LTR page. */
html[dir="ltr"] .verse-tafsir,
html[dir="ltr"] #vsTafsirText {
  direction: rtl;
  text-align: right;
}

/* Mushaf-theme compact player: row-reverse was an RTL-specific inversion;
   in LTR it puts prev/next opposite their arrow icons. */
html[dir="ltr"] [data-theme="mushaf"] .audio-player .player-meta-row,
html[dir="ltr"] [data-theme="mushaf"] .audio-player .player-controls-row {
  flex-direction: row;
}

/* Standalone page reader nav: keep the physical arrangement of the RTL
   mushaf (the chevrons were drawn for those sides; prev/next are mushaf-order). */
html[dir="ltr"] .page-nav {
  flex-direction: row-reverse;
}

/* Memo-mode hint: keep the badge over the END of the RTL first line
   (physical left), not over its opening words. */
html[dir="ltr"] .verses.memo-mode .verse-block:not(.revealed)::before {
  inset-inline-end: auto;
  left: 12px;
}
html[lang="ru"] .verses.memo-mode .verse-block:not(.revealed)::before {
  content: "Нажмите, чтобы открыть";
}

/* Russian UI font: Tajawal ships no Cyrillic — let the system family own
   whole strings so digits/Latin don't render in a different face. Quranic
   fonts (Amiri/Uthmanic/v1 pages) are untouched. */
html[lang="ru"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Rosette ayah-marker: 8 gold petals around an ivory centre, with the verse
   number drawn on top. Sized at 1.3em so it matches the Quranic text body
   weight — earlier 0.4em nested font-size made the whole marker only ~20px,
   barely visible next to 30px Arabic glyphs. */
.ayah-marker {
  display: inline-block;
  position: relative;
  width: 1.3em;
  height: 1.3em;
  margin: 0 0.12em;
  vertical-align: middle;
  cursor: pointer;
  line-height: 1;
}

.ayah-marker svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Filter adds a touch of warmth so petals don't look flat under dark theme. */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05));
}

.ayah-marker span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  font-family: "Tajawal", sans-serif;
  /* Lotus design has a large ivory centre (~64% of badge), so a slightly
     bigger number reads comfortably. Dark-brown for contrast on ivory. */
  font-size: 0.42em;
  font-weight: 700;
  color: #4a2f0e;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.verse-translation {
  font-family: "Tajawal", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-top: 12px;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--accent-2);
  background: var(--surface-2);
  border-radius: 8px;
  text-align: start;
}

.verse-translation[dir="ltr"] { text-align: left; }

.verse-tafsir {
  font-family: "Tajawal", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  margin-top: 10px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 8px;
}

.verse-tafsir::before {
  content: "تفسير";
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.verse-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
  font-family: "Tajawal", sans-serif;
}

.verse-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Min touch target: 44px tall (WCAG 2.2). Vertical padding gives ~44px box. */
  padding: 12px 12px;
  min-height: 44px;
  font-size: 12px;
  color: var(--text-muted);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.verse-action:active { transform: scale(0.94); }
.verse-action:hover { background: var(--accent-soft); color: var(--accent); }
.verse-action.bookmarked { color: var(--gold-ink); }

/* Wave 27.14 — "استماع" is the primary action: filled pill so it reads first;
   the rest stay subtle. Gives the verse row a clear visual hierarchy. */
.verse-action.primary {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding-inline: 18px;
}
.verse-action.primary svg { width: 16px; height: 16px; }
.verse-action.primary:hover { background: var(--accent); color: #fff; filter: brightness(1.12); }

/* Secondary actions become icon-only (the name lives in aria-label) so all 5
   actions fit one row on a 375px screen and "استماع" clearly leads. The bare
   text node is collapsed with font-size:0; the SVG keeps its explicit px size.
   — Wave 27.14 */
.verse-action:not(.primary) { font-size: 0; gap: 0; padding-inline: 11px; }
.verse-action:not(.primary) svg { width: 18px; height: 18px; }

/* ===== Audio player ===== */

.audio-player {
  position: absolute;
  bottom: calc(74px + var(--safe-bottom));
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 5;
}

.player-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-time {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-width: 32px;
  text-align: center;
}

.player-progress {
  flex: 1;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.player-progress::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
}

.player-progress-fill {
  position: absolute;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  width: 0;
  pointer-events: none;
}

.player-progress-fill::after {
  content: "";
  position: absolute;
  inset-inline-end: -5px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.player-progress:hover .player-progress-fill::after,
.player-progress:focus-visible .player-progress-fill::after { opacity: 1; }

.player-progress:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.player-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.player-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  transition: background-color 0.15s ease;
}

.player-btn.small { width: 36px; height: 36px; }

.player-btn:hover { background: var(--accent-soft); }
.player-btn:active { transform: scale(0.92); }

.player-btn.play {
  background: var(--accent);
  color: #fff;
  width: 56px;
  height: 56px;
}

.player-btn.play:hover { background: color-mix(in srgb, var(--accent) 88%, white); }

.player-info {
  flex: 1;
  min-width: 0;
}

.player-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.player-chip:hover { color: var(--accent); border-color: var(--accent); }
.player-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.player-chip:active { transform: scale(0.94); }

/* ===== Modal / Settings ===== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
/* Wave 27.4 — fallback for browsers without backdrop-filter (older Firefox,
   Android System WebView <8): use a stronger solid backdrop. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-backdrop { background: rgba(0, 0, 0, 0.7); }
  .onboarding { background: rgba(0, 0, 0, 0.78); }
}

.modal-sheet {
  position: relative;
  width: 100%;
  max-width: 720px;
  /* Wave 27.4 — dvh fallback so iOS Safari URL-bar collapse doesn't push the
     modal bottom under the home-indicator safe area. */
  max-height: 88vh;
  max-height: min(88vh, 88dvh);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.modal-body {
  padding: 16px;
}

/* Verse sheet (tafsir/translation on long-press) appears as a CENTERED
   dialog in the middle of the screen, not a bottom sheet. Scoped to
   #verseSheet so every other modal keeps its bottom-sheet behaviour. */
#verseSheet {
  align-items: center;
  padding: 16px;
}
#verseSheet .modal-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  max-height: min(80vh, 80dvh);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: vsPop 0.22s ease;
}
@keyframes vsPop {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ===== Share sheet ===== */

.share-preview {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.share-preview canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.share-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.share-action:hover { color: var(--accent); border-color: var(--accent); }
.share-action:active { transform: scale(0.96); }

.share-action.primary {
  grid-column: 1 / -1;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.share-action.primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); color: #fff; }

.settings-section {
  margin-bottom: 22px;
}

.settings-section label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

/* Small italicized hint shown under a settings control to explain
   non-obvious behavior — currently used to tell the user that
   tajweed coloring only renders in lawh/cards reader modes. */
.settings-note {
  margin: 8px 4px 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
}

.seg-control {
  display: flex;
  gap: 6px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 12px;
}

.seg-control button {
  flex: 1;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 9px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.seg-control button.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.select {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* Logical: chevron sits on the end edge in both RTL and LTR. */
  background-position: left 14px center;
  padding-inline-end: 38px;
}

.select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ===== Search ===== */

.search-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.15s ease;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  background: var(--accent);
  color: #fff;
}

.search-bar input {
  flex: 1;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 15px;
  color: #fff;
}

.search-bar input::placeholder { color: rgba(255,255,255,0.7); }
.search-bar input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

.search-result {
  display: block;
  padding: 14px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  width: 100%;
  text-align: start;
}

.search-result-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.search-result-snippet {
  font-family: "Amiri Quran", serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

.search-result mark {
  background: var(--accent-2);
  color: #1a1100; /* dark on gold — #fff failed WCAG AA (~2.4:1) */
  padding: 0 4px;
  border-radius: 4px;
}

/* ===== Empty / Loading states ===== */

.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

.empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--accent);
}

.empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.empty-text {
  font-size: 14px;
  line-height: 1.6;
}

/* Retry button in the reader/page load-error state. */
.retry-btn {
  margin-top: 18px;
  padding: 10px 26px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
[data-theme="mushaf"] .retry-btn { color: #0a2e22; }
.retry-btn:active { transform: scale(0.97); }

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 30px auto;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Toast ===== */

.toast {
  position: fixed;
  bottom: calc(100px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  animation: toastIn 0.2s ease;
}

.toast-btn {
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.toast-btn:active { transform: scale(0.94); }

/* ===== Onboarding ===== */
.onboarding {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 500;
  animation: fadeIn 0.2s ease;
}

.onboarding-card {
  max-width: 380px;
  width: 100%;
  background: var(--surface);
  border-radius: 24px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.onboarding-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 14px;
}

.onboarding-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
}

.onboarding-text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px;
}

.onboarding-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.onboarding-dots span.active {
  background: var(--accent);
  transform: scale(1.3);
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.onboarding-skip {
  padding: 10px 18px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 44px;
}

.onboarding-next {
  flex: 1;
  padding: 12px 24px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.15s ease;
}

.onboarding-next:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
.onboarding-next:active { transform: scale(0.97); }

.storage-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text);
}

.storage-info #cacheSize {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.storage-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.storage-buttons .select {
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
  background-image: none;
  padding-inline-end: 12px;
}

.storage-buttons .select.danger {
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.3);
}
.storage-buttons .select.danger:hover {
  background: rgba(192, 57, 43, 0.08);
}

/* ===== Mushaf pages — grid + reader ===== */

/* 604 small cards in a tight grid. content-visibility lets the browser skip
   rendering off-screen rows so the long list scrolls smoothly. */
.pages-grid {
  display: grid;
  /* minmax(0, 1fr) — NOT 1fr. Cards use content-visibility:auto with
     contain-intrinsic-size 90px, so off-screen cards report a 90px intrinsic
     width; plain `1fr` (= minmax(auto,1fr)) then makes each column min 90px,
     so 4×90 + gaps + padding = 412px overflows narrow (<412px) phones and the
     leftmost column gets clipped on the left (RTL). minmax(0,…) lets columns
     shrink to fit the viewport. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px;
}

.page-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 6px;
  padding: 10px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background-color 0.15s ease, transform 0.1s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 90px;
}
.page-card:hover { background: var(--surface-2); }
.page-card:active { transform: scale(0.96); }

.page-card .surah-number {
  width: 40px;
  height: 40px;
}

.page-card-label {
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 380px) { .pages-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) { .pages-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 768px) { .pages-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ===== Page reader (verses flow continuously like a printed mushaf) ===== */

.page-header {
  margin: 16px 14px 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.page-header-num {
  font-size: 13px;
  color: var(--text-muted);
}

.page-surah-divider {
  margin: 22px 14px 14px;
  padding: 12px 16px;
  text-align: center;
  background: var(--accent-soft);
  border-radius: 10px;
}
.page-surah-name {
  font-family: "Amiri Quran", serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

.page-verses {
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: var(--quran-size);
  line-height: var(--quran-line);
  color: var(--text);
  text-align: justify;
  text-align-last: center;
  padding: 8px 16px 16px;
  /* The page reader inlines all verses in one flowing block (no per-verse
     cards), so it reads like a physical mushaf rather than a list. */
}

.page-verse {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.page-verse:hover { background: var(--accent-soft); }

.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 14px 30px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.page-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border-radius: 8px;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  min-height: 44px;
}
.page-nav-btn:hover:not(:disabled) { background: var(--accent-soft); }
.page-nav-btn:active:not(:disabled) { transform: scale(0.96); }
.page-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.page-nav-current {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ===== PWA install + about footer ===== */
.install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.install-btn:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
.install-btn:active { transform: scale(0.98); }

.install-hint {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border-inline-start: 3px solid var(--accent);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}

.about-section {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Wrap: the row now has 4 items (Privacy · Terms · Contact · Version) and in
     Russian the words are long ("Конфиденциальность"), which overflowed/clipped
     the settings modal on a phone width when the row couldn't break. */
  flex-wrap: wrap;
  gap: 6px 10px;
  padding-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.about-link {
  color: var(--text-muted);
  text-decoration: underline;
  /* Theme-aware underline (was a fixed near-black rgba, invisible on the dark /
     mushaf themes). */
  text-decoration-color: color-mix(in srgb, var(--text-muted) 45%, transparent);
  text-underline-offset: 3px;
}
.about-link:hover { color: var(--accent); }
.about-dot { opacity: 0.5; }

@keyframes toastIn {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* Reciters / Last-read screen CSS removed in Wave 27.20 — both screens retired
   (nav entries removed in 27.14, screens deleted from render() in 27.19).
   Reciter selection lives in the Settings القارئ dropdown. */

/* ===== Misc ===== */
[hidden] { display: none !important; }

/* Wave 27.20 — print: the app is overflow:hidden with fixed chrome, so printing
   a verse/page otherwise yields a blank or dark-chromed page. Strip the chrome
   and force light ink-on-paper. */
@media print {
  html, body { overflow: visible !important; height: auto !important; background: #fff !important; }
  .topbar, .bottom-nav, .audio-player, .memo-toolbar, .mp-surah-tabs,
  .mp-ornament-row, .mp-toolbar, .mp-nav, .skip-link, .verse-actions { display: none !important; }
  .content { padding: 0 !important; overflow: visible !important; }
  .verse-block, .verse-translation, .verse-tafsir, .mp-leaf, .mp-text {
    color: #000 !important; background: #fff !important; break-inside: avoid; box-shadow: none !important;
  }
}

@media (min-width: 768px) {
  .app { box-shadow: var(--shadow-lg); }
  .audio-player { left: 50%; right: auto; width: calc(100% - 20px); transform: translateX(-50%); max-width: 700px; }
}

/* Respect users who turn off motion at the OS level — vestibular safety. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton { animation: none !important; }
  .spinner { animation-duration: 0.001ms !important; }
}

/* ============================================================
   Wave 8 — Memorization mode
   ============================================================ */

/* Streak badge + daily goal progress on the home hero. White-on-accent so
   they pop against the green gradient. */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}

.goal-progress {
  margin-top: 12px;
}

.goal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  opacity: 0.9;
}

.goal-label { font-weight: 600; }
.goal-count { font-weight: 700; font-variant-numeric: tabular-nums; }

.goal-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  overflow: hidden;
}

.goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fff, var(--accent-2));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Memorization toolbar — small row of toggles below the reader header.
   Mirrors the player-chip visual language so the three new modes feel
   like first-class controls. */
.memo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 14px 14px;
  padding: 0;
}

.memo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.memo-btn:hover { color: var(--accent); border-color: var(--accent); }
.memo-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.memo-btn:active { transform: scale(0.96); }

/* Wave 27.14 — collapsible "أدوات الحفظ" group: hidden until its trigger opens
   it, then it takes its own full-width row under the toolbar (flex-basis:100%
   forces the wrap in the wrapping .memo-toolbar). Keeps the default reader
   uncluttered while keeping memo/test/range one tap away. */
.memo-tools-group { display: none; }
.memo-tools-group.open {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
}

/* Inline range picker — appears between the toolbar and the verses. */
.range-picker {
  margin: 0 14px 14px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.range-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.range-row select {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.range-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.range-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  min-height: 36px;
}

.range-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.range-btn:active { transform: scale(0.96); }

/* Memo mode — blur every verse-text until the user taps to reveal it.
   8px is enough to make the script unreadable while letting the user feel
   the line/word shapes for a hint. */
.verses.memo-mode .verse-text {
  filter: blur(8px);
  cursor: pointer;
  transition: filter 0.3s ease;
  user-select: none;
}

.verses.memo-mode .verse-block.revealed .verse-text {
  filter: none;
}

/* "Tap to reveal" hint sits on the .verse-block (parent of the blurred text)
   so the filter doesn't bleed into the badge. Positioned absolutely in the
   top-left corner so it doesn't push the layout around. */
.verses.memo-mode .verse-block {
  position: relative;
}

.verses.memo-mode .verse-block:not(.revealed)::before {
  content: "اضغط لكشف";
  position: absolute;
  top: 8px;
  inset-inline-end: 12px;
  z-index: 2;
  padding: 4px 12px;
  font-family: "Tajawal", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  pointer-events: none;
}

/* Test mode — same blur but the prompt comes from showQuizPrompt() instead
   of a CSS overlay. We keep the verse blurred while a quiz is active. */
.verses.test-mode .verse-block.quiz-target .verse-text {
  filter: blur(10px);
  user-select: none;
}

.verses.test-mode .verse-block.quiz-revealed .verse-text {
  filter: none;
}

.quiz-overlay {
  margin: 0 4px 18px;
  padding: 16px;
  background: var(--accent-soft);
  border: 2px dashed var(--accent);
  border-radius: 12px;
  text-align: center;
}

.quiz-question {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}

.quiz-reveal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.15s ease, transform 0.1s ease;
  min-height: 44px;
}

.quiz-reveal:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
.quiz-reveal:active { transform: scale(0.96); }

.quiz-grade-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.quiz-grade-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.quiz-grade-btn {
  padding: 12px 8px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  min-height: 48px;
}

.quiz-grade-btn.easy   { border-color: #4ca088; color: #4ca088; }
.quiz-grade-btn.medium { border-color: var(--gold-ink); color: var(--gold-ink); }
.quiz-grade-btn.hard   { border-color: #c0392b; color: #c0392b; }

.quiz-grade-btn:hover  { color: #fff; }
.quiz-grade-btn.easy:hover   { background: #4ca088; }
.quiz-grade-btn.medium:hover { background: #c8a45e; }
.quiz-grade-btn.hard:hover   { background: #c0392b; }
.quiz-grade-btn:active { transform: scale(0.95); }

/* ============================================================
   Wave 9 — Tajweed rule coloring
   ============================================================ */

/* Standard tajweed colors used across most mushaf-coloring conventions
   (الكويت / مدينة منوّرة palettes). The colors are tuned for ivory/sepia/dark
   backgrounds — each rule has enough contrast on all three themes. */
.tj { /* base — most rules just override color */ }

/* === Mudood (elongation) — green family === */
.tj-madda_normal       { color: #2e7d32; } /* مد طبيعي — natural 2 harakat */
.tj-madda_permissible  { color: #66bb6a; } /* مد جائز منفصل — 4-5 harakat */
.tj-madda_necessary    { color: #1b5e20; font-weight: 700; } /* مد لازم — 6 harakat */
.tj-madda_obligatory   { color: #388e3c; } /* مد واجب متصل — 4-5 harakat */
.tj-madda_6            { color: #1b5e20; font-weight: 700; } /* 6-harakat madd */

/* === Nun + tanween rules === */
.tj-ghunnah            { color: #c62828; } /* غُنّة — nasal vowel */
.tj-ikhafa             { color: #6a1b9a; } /* إخفاء */
.tj-ikhafa_shafawi     { color: #4527a0; } /* إخفاء شفوي */
.tj-iqlab              { color: #d81b60; } /* إقلاب */
.tj-idgham_ghunnah     { color: #7b1fa2; } /* إدغام بغنّة */
.tj-idgham_wo_ghunnah  { color: #5e35b1; } /* إدغام بلا غنّة */
.tj-idgham_shafawi     { color: #6a1b9a; } /* إدغام شفوي */
.tj-idgham_mutajanisayn { color: #8e24aa; } /* إدغام المتجانسين */
.tj-idgham_mutaqaribayn { color: #8e24aa; } /* إدغام المتقاربين */

/* === Letter-quality rules === */
.tj-qalaqah            { color: #ef6c00; font-weight: 700; } /* قلقلة */
.tj-laam_shamsiyah     { color: #757575; } /* اللام الشمسية — sun letter */
.tj-silent             { color: #9e9e9e; } /* الحروف الساكنة */
.tj-ham_wasl           { color: #9e9e9e; } /* همزة الوصل */

/* Dark theme: shift to lighter variants for legibility on dark backgrounds. */
[data-theme="dark"] .tj-madda_normal      { color: #66bb6a; }
[data-theme="dark"] .tj-madda_permissible { color: #81c784; }
[data-theme="dark"] .tj-madda_necessary   { color: #a5d6a7; font-weight: 700; }
[data-theme="dark"] .tj-madda_obligatory  { color: #81c784; }
[data-theme="dark"] .tj-madda_6           { color: #a5d6a7; font-weight: 700; }
[data-theme="dark"] .tj-ghunnah           { color: #ef9a9a; }
[data-theme="dark"] .tj-ikhafa            { color: #ce93d8; }
[data-theme="dark"] .tj-ikhafa_shafawi    { color: #b39ddb; }
[data-theme="dark"] .tj-iqlab             { color: #f48fb1; }
[data-theme="dark"] .tj-idgham_ghunnah    { color: #ce93d8; }
[data-theme="dark"] .tj-idgham_wo_ghunnah { color: #b39ddb; }
[data-theme="dark"] .tj-idgham_shafawi    { color: #ce93d8; }
[data-theme="dark"] .tj-idgham_mutajanisayn { color: #ce93d8; }
[data-theme="dark"] .tj-idgham_mutaqaribayn { color: #ce93d8; }
[data-theme="dark"] .tj-qalaqah           { color: #ffb74d; font-weight: 700; }
[data-theme="dark"] .tj-laam_shamsiyah    { color: #bdbdbd; }
[data-theme="dark"] .tj-silent            { color: #9e9e9e; }
[data-theme="dark"] .tj-ham_wasl          { color: #9e9e9e; }

/* Tajweed legend in settings — small color swatches next to rule names. */
.tajweed-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-top: 12px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 12px;
}

.tajweed-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
}

.tj-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.tj-swatch.tj-madda_normal      { background: #2e7d32; }
.tj-swatch.tj-madda_permissible { background: #66bb6a; }
.tj-swatch.tj-madda_necessary   { background: #1b5e20; }
.tj-swatch.tj-madda_obligatory  { background: #388e3c; }
.tj-swatch.tj-ghunnah           { background: #c62828; }
.tj-swatch.tj-ikhafa            { background: #6a1b9a; }
.tj-swatch.tj-ikhafa_shafawi    { background: #4527a0; }
.tj-swatch.tj-iqlab             { background: #d81b60; }
.tj-swatch.tj-idgham_ghunnah    { background: #7b1fa2; }
.tj-swatch.tj-idgham_wo_ghunnah { background: #5e35b1; }
.tj-swatch.tj-idgham_shafawi    { background: #6a1b9a; }
.tj-swatch.tj-qalaqah           { background: #ef6c00; }
.tj-swatch.tj-laam_shamsiyah    { background: #757575; }
.tj-swatch.tj-silent            { background: #9e9e9e; }
.tj-swatch.tj-ham_wasl          { background: #9e9e9e; }

/* ============================================================
   Wave 11 — Notes, highlights, import/export
   ============================================================ */

/* Verse highlights — colored left-border accent + soft background tint. Five
   color choices that map to common highlighter colors. Kept subtle so the
   text remains the focus. */
.verse-block[data-highlight] {
  border-inline-start: 4px solid;
  padding-inline-start: 12px;
}

.verse-block[data-highlight="yellow"] { border-color: #f1c40f; background: rgba(241, 196, 15, 0.10); }
.verse-block[data-highlight="green"]  { border-color: #27ae60; background: rgba(39, 174, 96, 0.10); }
.verse-block[data-highlight="blue"]   { border-color: #2980b9; background: rgba(41, 128, 185, 0.10); }
.verse-block[data-highlight="pink"]   { border-color: #e91e63; background: rgba(233, 30, 99, 0.10); }
.verse-block[data-highlight="red"]    { border-color: #c0392b; background: rgba(192, 57, 43, 0.10); }

[data-theme="dark"] .verse-block[data-highlight="yellow"] { background: rgba(241, 196, 15, 0.20); }
[data-theme="dark"] .verse-block[data-highlight="green"]  { background: rgba(39, 174, 96, 0.20); }
[data-theme="dark"] .verse-block[data-highlight="blue"]   { background: rgba(41, 128, 185, 0.20); }
[data-theme="dark"] .verse-block[data-highlight="pink"]   { background: rgba(233, 30, 99, 0.20); }
[data-theme="dark"] .verse-block[data-highlight="red"]    { background: rgba(192, 57, 43, 0.20); }

.verse-action.highlighted { color: var(--gold-ink); }

/* Inline color picker that pops out next to the highlight button. */
.highlight-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-inline-start: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  animation: fadeIn 0.15s ease;
}

.hl-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: transform 0.1s ease, border-color 0.15s ease;
  cursor: pointer;
}

.hl-swatch.hl-yellow { background: #f1c40f; }
.hl-swatch.hl-green  { background: #27ae60; }
.hl-swatch.hl-blue   { background: #2980b9; }
.hl-swatch.hl-pink   { background: #e91e63; }
.hl-swatch.hl-red    { background: #c0392b; }

.hl-swatch:hover, .hl-swatch.active {
  border-color: var(--text);
  transform: scale(1.1);
}

.hl-clear {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-muted);
  border: 1px dashed var(--border);
}

.hl-clear:hover { color: #c0392b; border-color: #c0392b; }

/* Bookmark note + note-edit button. The note appears inside the bookmark
   card under the meta row. */
.bookmark-note {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  font-family: "Tajawal", sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
  border-inline-start: 3px solid var(--accent-2);
}

.bookmark-note-btn {
  width: 44px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  border-inline-start: 1px solid var(--border);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.bookmark-note-btn:hover { color: var(--accent); background: var(--accent-soft); }
.bookmark-note-btn:active { transform: scale(0.92); }

/* ============================================================
   Wave 13 — Mushaf reader mode + verse action sheet
   ============================================================ */

/* .mushaf-ayah is SHARED with pages mode — the sync/colored page render emits
   .mushaf-ayah spans and `.mp-text .mushaf-ayah.active` styles the active verse.
   (The لوح-only .mushaf-text / .mushaf-block / .mushaf-trans-* CSS was removed in
   Wave 27.22 along with the dead render branch; the mode was retired in 27.16.) */
.mushaf-ayah {
  cursor: pointer;
  border-radius: 6px;
  padding: 0 1px;
  transition: background-color 0.15s ease;
}

.mushaf-ayah:hover { background: var(--accent-soft); }
.mushaf-ayah.active {
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* Pages mode shares the inline span styling — active highlight pulses
   gently so the currently-playing verse is obvious without distracting. */
.mp-text .mushaf-ayah.active {
  animation: mpAyahPulse 1.6s ease-in-out infinite;
}

@keyframes mpAyahPulse {
  0%, 100% { background: var(--accent-soft); }
  50%      { background: color-mix(in srgb, var(--accent-2) 30%, transparent); }
}

/* Highlights in mushaf mode = background tint of the inline span only.
   Same color tokens as the card-mode `data-highlight` rules. */
.mushaf-ayah[data-highlight="yellow"] { background: rgba(241, 196, 15, 0.20); }
.mushaf-ayah[data-highlight="green"]  { background: rgba(39, 174, 96, 0.20); }
.mushaf-ayah[data-highlight="blue"]   { background: rgba(41, 128, 185, 0.20); }
.mushaf-ayah[data-highlight="pink"]   { background: rgba(233, 30, 99, 0.20); }
.mushaf-ayah[data-highlight="red"]    { background: rgba(192, 57, 43, 0.20); }

/* (لوح-only memo-blur + end-of-surah .mushaf-block / .mushaf-trans-* CSS removed
   in Wave 27.22 with the dead render branch — mode retired in 27.16.) */

/* === Verse action sheet === */

.vs-verse {
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: 24px;
  line-height: 1.9;
  color: var(--text);
  text-align: center;
  padding: 14px 12px;
  background: var(--surface-2);
  border-radius: 12px;
  margin-bottom: 18px;
}

.vs-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.vs-empty {
  text-align: center;
  padding: 22px 12px;
  color: var(--muted, #888);
  font-size: 15px;
  line-height: 1.7;
}

.vs-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  min-height: 64px;
}

.vs-action:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.vs-action:active { transform: scale(0.96); }
.vs-action.active { color: var(--gold-ink); border-color: var(--accent-2); }

.vs-section {
  margin-bottom: 14px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: 12px;
  border-inline-start: 3px solid var(--accent-2);
}

.vs-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

.vs-section-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  font-family: "Tajawal", sans-serif;
}

.vs-quick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.vs-quick-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.vs-quick-row > span {
  white-space: nowrap;
}

.vs-quick-row .select {
  padding: 10px 12px;
  font-size: 13px;
}

/* ============================================================
   Wave 14 — Pages mode (3D flipped mushaf)
   ============================================================ */

/* The book container provides the perspective context for the leaf
   rotation. The leaf itself flips on its right (RTL start) edge so the
   movement mirrors a real Arabic mushaf — turning a page reveals the
   one underneath, not from the wrong side. */
.verses.pages-mode {
  padding: 0 12px 20px;
  perspective: 1800px;
  /* Fill the reader viewport so the leaf can stretch to the full height —
     otherwise short/transition pages leave a large empty gap under the page
     number. Flex column: surah-tabs sit at the top, the book grows to fill. */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.mp-book {
  position: relative;
  margin: 14px auto 18px;
  max-width: 720px;
  width: 100%;
  /* Grow to fill the reader height (see .verses.pages-mode). The min-height
     stays as a floor for very short viewports. The leaf inside stretches to
     100% of this so every page fills the screen. */
  flex: 1 1 auto;
  min-height: 60vh;
}

/* ============================================================
   Wave 15 — Authentic Madinah Mushaf styling (Phase A)
   ============================================================
   Fixed cream paper + multi-layer gold border + cartouche surah header
   + circular gold page-number footer. Tries to match the
   مصحف المدينة النبوية ا visual identity regardless of the user's theme.
*/

:root {
  --mushaf-paper: #f7eed2;      /* cream paper */
  --mushaf-paper-edge: #e8dab5; /* slightly darker for inner border */
  --mushaf-gold: #b8893a;       /* warm gold */
  --mushaf-gold-light: #d4a957; /* lighter accent */
  --mushaf-ink: #1a1100;        /* deep ink */
}

[data-theme="dark"] {
  --mushaf-paper: #1f1b14;      /* deep parchment */
  --mushaf-paper-edge: #2a2519;
  --mushaf-gold: #d4a957;
  --mushaf-gold-light: #e8c578;
  --mushaf-ink: #f5e8c8;
}

/* ============================================================
   Wave 27.32 — Mushaf design skins (pages mode). Each overrides the
   --mushaf-* variables (+ a border / header detail) so the whole leaf
   reskins coherently — text glyphs (v1 Madinah font) are untouched.
   `data-mushaf` on <html> is set by applyMushafStyle(); when the user
   hasn't picked one it auto-follows the app theme (classic / night).
   Placed AFTER the theme blocks so an explicit skin always wins.
   ============================================================ */
/* 1 — مدني مُذهّب: cream + double gold rule frame (King Fahd Madinah look). */
[data-mushaf="madinah"] {
  --mushaf-paper: #f6edd6; --mushaf-paper-edge: #e8dab5;
  --mushaf-gold: #b1852f; --mushaf-gold-light: #d4a957; --mushaf-ink: #241a08;
}
[data-mushaf="madinah"] .mp-leaf { border: 5px double var(--mushaf-gold); }

/* 2 — عثماني: navy frame + inner gold rule (Ottoman tezhip: gold on lapis). */
[data-mushaf="ottoman"] {
  --mushaf-paper: #f3e9d0; --mushaf-paper-edge: #e6d9b8;
  --mushaf-gold: #c8a24a; --mushaf-gold-light: #e0be6a; --mushaf-ink: #241d0e;
}
[data-mushaf="ottoman"] .mp-leaf { border: 7px solid #16244e; }

/* 3 — المصحف الأزرق: indigo paper, GOLD ink text (the famous Blue Qur'an). */
[data-mushaf="blue"] {
  --mushaf-paper: #172a55; --mushaf-paper-edge: #1f376b;
  --mushaf-gold: #d8b566; --mushaf-gold-light: #ecca80; --mushaf-ink: #d8b566;
}
[data-mushaf="blue"] .mp-leaf { border: 1px solid var(--mushaf-gold); }
[data-mushaf="blue"] .mp-leaf::before { opacity: 0; }
[data-mushaf="blue"] .mp-page-juz,
[data-mushaf="blue"] .mp-page-surah { color: var(--mushaf-gold); }

/* Ottoman + Blue get a fine inner gold rule just inside the frame (illumination). */
[data-mushaf="ottoman"] .mp-leaf::after,
[data-mushaf="blue"] .mp-leaf::after {
  display: block; content: ""; position: absolute; inset: 0;
  border: 1.4px solid var(--mushaf-gold); border-radius: inherit;
  pointer-events: none; z-index: 2;
}

/* 4 — مغربي أندلسي: parchment + single brown rule (earthy Maghribi). */
[data-mushaf="maghribi"] {
  --mushaf-paper: #e7dabc; --mushaf-paper-edge: #d8c496;
  --mushaf-gold: #b8893a; --mushaf-gold-light: #cfa04a; --mushaf-ink: #3a2c1a;
}
[data-mushaf="maghribi"] .mp-leaf { border: 1.5px solid #8a5a2a; }

/* 5 — حديث: clean white, hairline frame, no paper grain (digital-native). */
[data-mushaf="modern"] {
  --mushaf-paper: #ffffff; --mushaf-paper-edge: #f0f0f0;
  --mushaf-gold: #9aa0a6; --mushaf-gold-light: #b8bcc2; --mushaf-ink: #1e1e1e;
}
[data-mushaf="modern"] .mp-leaf {
  border: 1px solid #e6e6e6;
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
}
[data-mushaf="modern"] .mp-leaf::before { opacity: 0; }
[data-mushaf="modern"] .mp-page-juz,
[data-mushaf="modern"] .mp-page-surah { color: #666; }

/* ── Wave 27.32.2 — extra COLOUR options (beyond the 5 edition skins).
   Tinted paper + matching frame; --mushaf-gold carries the accent so the
   footer bubble / dividers / margin markers stay in-palette. ── */
[data-mushaf="emerald"] {
  --mushaf-paper: #eaf1e6; --mushaf-paper-edge: #d7e4d0;
  --mushaf-gold: #1f7a4d; --mushaf-gold-light: #2f9a63; --mushaf-ink: #17301f;
}
[data-mushaf="emerald"] .mp-leaf { border: 3px solid #1f7a4d; }

[data-mushaf="purple"] {
  --mushaf-paper: #f2ecf7; --mushaf-paper-edge: #e3d6ef;
  --mushaf-gold: #7a4a9e; --mushaf-gold-light: #9a6ab5; --mushaf-ink: #33234a;
}
[data-mushaf="purple"] .mp-leaf { border: 3px solid #7a4a9e; }

[data-mushaf="rose"] {
  --mushaf-paper: #f9ece9; --mushaf-paper-edge: #f0d9d3;
  --mushaf-gold: #b5566b; --mushaf-gold-light: #cc7386; --mushaf-ink: #4a2530;
}
[data-mushaf="rose"] .mp-leaf { border: 2.5px solid #b5566b; }

[data-mushaf="turquoise"] {
  --mushaf-paper: #e6f4f2; --mushaf-paper-edge: #cfe8e4;
  --mushaf-gold: #1f8a8a; --mushaf-gold-light: #2fa5a5; --mushaf-ink: #163333;
}
[data-mushaf="turquoise"] .mp-leaf { border: 2.5px solid #1f8a8a; }

[data-mushaf="charcoal"] {
  --mushaf-paper: #26292e; --mushaf-paper-edge: #31353b;
  --mushaf-gold: #b8a05a; --mushaf-gold-light: #d0b972; --mushaf-ink: #e2e4e8;
}
[data-mushaf="charcoal"] .mp-leaf { border: 1px solid #4a4f57; }
[data-mushaf="charcoal"] .mp-page-juz,
[data-mushaf="charcoal"] .mp-page-surah { color: var(--mushaf-gold); }

/* The swatch grid in Settings — mini "pages" the user taps to switch. */
.mushaf-style-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.mushaf-swatch {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.mushaf-swatch-page {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
/* Ring (not border) marks the active swatch — the decorative inline borders on
   the green/sepia/modern swatches would otherwise fight a border-based marker. */
.mushaf-swatch[aria-checked="true"] .mushaf-swatch-page {
  box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(0,0,0,0.22);
  transform: translateY(-2px);
}
.mushaf-swatch-lines {
  position: absolute;
  inset: 20% 16% auto 16%;
  height: 3px;
  border-radius: 2px;
  box-shadow: 0 6px 0 0 currentColor, 0 12px 0 0 currentColor, 0 18px 0 0 currentColor;
  background: currentColor;
  opacity: 0.75;
}
.mushaf-swatch-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
}
.mushaf-swatch[aria-checked="true"] .mushaf-swatch-label { color: var(--text); }

/* Wave 16 / G2 — Madinah-style ornate border palette. */
:root {
  --mushaf-border-green: #1d6a4d;     /* main border green */
  --mushaf-border-red:   #b53737;     /* accent red */
  --mushaf-border-teal:  #2a8a7a;     /* turquoise inner band */
  --mushaf-border-cream: #f3e7c4;     /* spacer cream */
}

/* ============================================================
   Wave 23 — Minimal Tmkeen-style leaf (replaces ornate border)
   ============================================================
   Was: multi-layer ornate border (green/cream/gold/cream/teal/cream/red
        /cream/green via 11 stacked inset box-shadows) + 4 corner stars
        + heavy paper-grain noise.
   Now: cream paper + a single drop-shadow that floats the page off the
        dark margin. No inset border layers. No corner stars. The noise
        overlay is softened to a faint warmth wash.
   The new look matches design #2 (المعاصر البسيط / Tmkeen) — printed
   Mushaf cleanliness without the Madinah ornate gold frame. Applied
   globally to ALL themes (light/sepia/dark/mushaf). Dark mode gets a
   stronger shadow so the cream paper stays visually anchored against
   the dark background. */
.mp-leaf {
  position: relative;
  touch-action: pan-y;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.04) 0%, transparent 55%),
    var(--mushaf-paper);
  border-radius: 3px;
  /* Single soft drop-shadow — floats the page off the dark margin
     without the heavy multi-layer frame. Dark themes get a stronger
     fall-off via the theme overrides below. */
  box-shadow:
    0 14px 40px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.35) inset;
  /* Padding is wider (32px sides instead of 22px) because we no longer
     need to clear an 18px inset border. The text column gains breathing
     room while still leaving margin for the side hizb cartouche. The
     per-line auto-fit (fitMpLines) adapts to the new width naturally. */
  padding: 36px 32px 44px;
  /* Fill the book (which fills the reader height) so the page occupies the
     whole screen; .mp-page-content + the distributed lines then spread to the
     full height instead of leaving a gap under the page number. */
  min-height: 100%;
  /* Flex column so .mp-page-content can fill the leaf and the page-number
     footer anchors to the bottom edge on every page (see Wave: consistent
     page-number position). */
  display: flex;
  flex-direction: column;
  transform-origin: right center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  color: var(--mushaf-ink);
}

/* Dark theme: cream paper sits on a much darker background, so the
   default drop-shadow disappears. Add a stronger fall-off + subtle gold
   ring so the page still reads as "a leaf on a desk." */
[data-theme="dark"] .mp-leaf,
[data-theme="mushaf"] .mp-leaf {
  box-shadow:
    0 10px 36px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(184,137,58,0.15);
}

/* Paper-grain noise overlay — softened to a faint warmth wash
   (was opacity 0.7, now 0.35). The texture still hints at paper
   without competing with the minimal design language. */
.mp-leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5' /%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.15 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: inherit;
  opacity: 0.35;
  mix-blend-mode: multiply;
}

/* Corner star medallions REMOVED for the Tmkeen-minimal look — they
   were 8-point Madinah stars in each of the 4 corners, paired with the
   ornate border. Without the border they read as orphaned ornaments
   that clash with the minimal aesthetic. The ::after selector stays
   as a no-op so existing immersive overrides don't error. */
.mp-leaf::after {
  display: none;
}

.mp-page-content {
  position: relative;
  z-index: 1;
  min-height: 55vh;
  /* Fill the leaf and lay out header / text / footer as a column so the text
     block can flex-grow to the full height and the footer anchors at the
     bottom. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Tmkeen split header — two-column flex with juz name on the right
   (RTL start) and surah name on the left (RTL end), separated by a
   thin gold underline. Replaces the centered gold cartouche pill +
   ornament side lines from the Madinah-classic design. */
.mp-page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  direction: rtl;
  margin: 0 0 14px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(184,137,58,0.4);
  /* These three were used by the old design and are no longer needed
     but kept explicit so any cached/old stylesheet still has them. */
  background: none;
  text-align: initial;
}

/* The old gold-thread side rules (::before and ::after) are unwanted
   in the split layout — clear them so they don't paint stray bars. */
.mp-page-header::before,
.mp-page-header::after {
  content: none;
  display: none;
}

/* The wrapper span (`.mp-page-header-inner`) used to be a gold-bordered
   pill containing the centered surah + page number. In the split layout
   we don't render this wrapper at all from JS — but the rule has to
   stay non-disruptive if any cached HTML still has it. */
.mp-page-header-inner {
  display: contents;
}

.mp-page-juz,
.mp-page-surah {
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #5e4a1f;
  white-space: nowrap;
}

/* Dark + mushaf themes shift the header text to the gold accent so it
   stays legible against the darker paper / darker margins. */
[data-theme="dark"] .mp-page-juz,
[data-theme="dark"] .mp-page-surah,
[data-theme="mushaf"] .mp-page-juz,
[data-theme="mushaf"] .mp-page-surah {
  color: var(--mushaf-gold);
}

/* The page-number is no longer rendered inside the header (it lives in
   the footer bubble only). The .mp-page-num rule stays defined so any
   cached HTML still has consistent styling, but it's effectively unused. */
.mp-page-num {
  font-family: "Tajawal", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--mushaf-gold);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* The center divider dot from the old "surah • page" pill is gone in
   the split layout. Hide it so any cached HTML still has it but it
   doesn't paint a stray dot in the new layout. */
.mp-page-divider {
  display: none;
}

.mp-basmala {
  margin: 12px 24px 22px;
  padding: 16px 20px;
  border: 1px solid var(--mushaf-gold);
  border-radius: 4px;
  background: rgba(184,137,58,0.04);
  font-size: 26px;
  color: var(--mushaf-ink);
  text-align: center;
}

.mp-text {
  /* UthmanicHafs first (authentic Mushaf), Amiri Quran as graceful fallback. */
  font-family: "UthmanicHafs", "Amiri Quran", "Amiri", serif;
  font-size: calc(var(--quran-size) + 4px);
  line-height: calc(var(--quran-line) + 0.3);
  color: var(--mushaf-ink);
  text-align: justify;
  text-align-last: center;
  padding: 4px 12px;
  /* Tighten word-spacing slightly — UthmanicHafs has wide intrinsic
     spacing; this brings it closer to the printed Mushaf rhythm. */
  word-spacing: -0.05em;
  /* Positioning anchor for the side hizb cartouche (which is generated
     inline before the verse text and promoted to position: absolute). */
  position: relative;
}

/* === Phase E: exact 15-line Mushaf layout ===
   When the Quran.com word data arrives, mp-text gets `mp-line-mode`
   and switches from continuous flow to one .mp-line per line of the
   printed Mushaf. Each line stretches to fill width via space-between,
   matching the published Madinah layout exactly. */

.mp-text.mp-line-mode {
  text-align: initial;
  text-align-last: initial;
  padding: 8px 0;
  /* Font scales with viewport so the v1 lines fit inside the slimmed
     border. Tested at 360px and 412px widths against pages with long
     lines (Al-Baqara page 6, Aal-i-Imran page 50). */
  font-size: clamp(16px, 5.2vw, 24px);
  line-height: 2.1;
  /* Grow to fill the page and distribute the (~15) lines evenly over the full
     height — the last line reaches the bottom, the page number sits just below
     it, and no empty gap is left under the number. Matches how a printed
     Mushaf page fills the page. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Short / landscape / split-screen / zoomed viewports can't fit ~15 lines at
   the clamped size. Drop the "fill the height" behaviour so the leaf sizes to
   its content and the reader scrolls, instead of space-between flinging the
   last lines + the page number outside the cream frame onto the dark margin. */
@media (max-height: 700px) {
  .verses.pages-mode .mp-book { flex: 0 0 auto; }
  .verses.pages-mode .mp-leaf { min-height: 0; }
  .mp-page-content { flex: 0 0 auto; }
  .mp-text.mp-line-mode { flex: 0 0 auto; justify-content: flex-start; }
  /* Landscape / short viewport: the ~15-line leaf is taller than the screen.
     Make the reader itself scroll (it was overflow:visible + unscrollable, so
     the bottom lines + page number were clipped off-screen with no way to reach
     them). A little bottom room keeps the page number off the very edge. The
     horizontal swipe-to-flip still works — its handler yields to vertical drags. */
  .verses.pages-mode { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .verses.pages-mode .mp-book { padding-bottom: 12px; }
}

.mp-line {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  direction: rtl;
  width: 100%;
  padding: 0 2px;
  line-height: 2;
  white-space: nowrap;
  /* No overflow:hidden — when the per-page font's exact column width
     is wider than the leaf interior, we let the line render to its
     natural width. The inset border is non-blocking visually (border
     sits behind the text), so a small bleed past the gold thread is
     acceptable vs. clipping mid-word. */
  overflow: visible;
}

.mp-word {
  display: inline-block;
  cursor: pointer;
  padding: 0 1px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

/* No per-word :hover background. The v1 per-page PUA glyphs carry side
   bearings, so a tight background box sits visibly offset from the ink — and
   on touch the :hover state sticks after a tap, leaving a stray misaligned box
   on the last-tapped word (user-reported on page 128). The active verse is
   shown via the JS-drawn .mp-ayah-highlight line overlay instead, which spans
   whole words and hides the per-glyph offset (see Wave 22 note above).
   — Wave 27.13 */

.mp-word.ayah-end {
  display: inline-block;
  margin: 0 0.05em;
}

.mp-word[data-highlight="yellow"] { background: rgba(241, 196, 15, 0.20); }
.mp-word[data-highlight="green"]  { background: rgba(39, 174, 96, 0.20); }
.mp-word[data-highlight="blue"]   { background: rgba(41, 128, 185, 0.20); }
.mp-word[data-highlight="pink"]   { background: rgba(233, 30, 99, 0.20); }
.mp-word[data-highlight="red"]    { background: rgba(192, 57, 43, 0.20); }

/* Wave 22 — Active verse highlight: continuous overlay per line.
   Instead of per-word backgrounds (which left visible gaps in the
   flex space-between layout), JS draws an absolutely-positioned
   .mp-ayah-highlight rectangle inside each .mp-line that contains
   the active verse, spanning from the verse's first word to its
   last word on that line. The rectangle sits behind the text, so
   the cream paper + the highlight + the v1 PUA glyphs stack as
   paper → highlight → letters. Multi-line ayahs get one rectangle
   per line; an ayah sharing a line with another verse only tints
   its own portion. The verse-end rosette is excluded so the gold
   marker keeps its visual identity. */
.mp-line { position: relative; }
.mp-ayah-highlight {
  position: absolute;
  top: 2px;
  height: calc(100% - 4px);
  background: rgba(46, 125, 50, 0.18);
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s ease;
}
.mp-line > .mp-word,
.mp-line > .mp-margin-marker,
.mp-line > .mp-sajda {
  position: relative;
  z-index: 1;
}

/* Spacing-only fix for the opening pages (al-Fatiha + al-Baqarah start):
   those pages run one short ayah per line, and the regular flex
   space-between then flings the few words to the page edges with huge
   inter-word gaps. .mp-leaf--centerlines (added to pages 1-2 in app.js)
   centres each line with a natural word gap instead, and lifts the
   juz/hizb margin markers out of the centred flow to the start margin.
   No ornament — purely the word-spacing fix. Ordinary pages keep their
   authentic full-width justification. */
.mp-leaf--centerlines .mp-line:not(.mp-surah-divider) {
  justify-content: center;
  gap: 0.22em;
}
.mp-leaf--centerlines .mp-line > .mp-margin-marker:not(.mp-hizb-marker),
.mp-leaf--centerlines .mp-line > .mp-sajda {
  position: absolute;
  inset-inline-start: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.mp-basmala {
  font-family: "UthmanicHafs", "Amiri Quran", serif;
}

/* === Inline surah divider + basmala (mid-page surah transition) ===
   When two surahs share a page (e.g. Maryam ends + Ta-Ha begins on
   page 312), the API leaves the surah-name + basmala lines empty.
   We inject them as .mp-surah-divider and .mp-basmala-line so the
   transition reads exactly like the printed Madinah Mushaf. They
   also fire at the top of every page where a new surah starts. */
.mp-surah-divider {
  /* Override the flex+space-between of the regular .mp-line — the
     panel needs to center as a single decorative unit. */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: nowrap !important;
  padding: 4px 6px !important;
  line-height: 1.4 !important;
}

/* Wave 25 — Saudi-app-style divider (Madinah-authentic).
   ٣ أعمدة: آياتها N | سُورَةُ X | مكية/مدنية
   - Background: cream (#faf3dc) — يطابق الورقه
   - Border: 2px solid green (#1d6a4d) — أخضر مدني
   - Inset shadow: cream + gold ring → bord مزدوج بصرياً
   - ✦ نجوم خضراء على الجانبين (absolute)
   The name is rendered in Amiri Quran 19px green; the sides in Tajawal
   11px brown — matching the printed Mushaf's typography hierarchy. */
.mp-divider-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  /* Wave 27.34 — use the mushaf palette so the surah-name band recolours with
     the active design (was hardcoded cream/green/gold → never changed). */
  background: var(--mushaf-paper);
  border: 2px solid var(--mushaf-gold);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px var(--mushaf-paper),
    inset 0 0 0 3px var(--mushaf-gold);
  position: relative;
  width: 95%;
  max-width: 95%;
  box-sizing: border-box;
}

/* ✦ نجوم خضراء على الجانبين تحاكي تصميم المصحف الفعلي. */
.mp-divider-frame::before,
.mp-divider-frame::after {
  content: "✦";
  color: var(--mushaf-gold);
  font-size: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Amiri Quran", "Amiri", serif;
  z-index: 2;
}
.mp-divider-frame::before { right: 4px; }
.mp-divider-frame::after  { left: 4px; }

/* Side info (آياتها N | مكية/مدنية) — Tajawal الـ secondary metadata */
.mp-divider-side {
  font-family: "Tajawal", sans-serif;
  font-size: 11px;
  /* Same darkened antique gold as the name — 11px needs the extra contrast. */
  color: color-mix(in srgb, var(--mushaf-gold), var(--mushaf-ink) 50%);
  font-weight: 600;
  min-width: 70px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mp-divider-side-right { text-align: right; padding-right: 16px; }
.mp-divider-side-left  { text-align: left;  padding-left: 16px; }

.mp-divider-name {
  font-family: "Amiri Quran", "UthmanicHafs", serif;
  font-weight: 700;
  font-size: 19px;
  /* Darkened antique gold (gold blended toward ink) — the pure --mushaf-gold
     on --mushaf-paper was ~2.7:1 (fails WCAG). This keeps the gold character
     while clearing AA, and adapts to every skin (blue sets ink=gold, etc.). */
  color: color-mix(in srgb, var(--mushaf-gold), var(--mushaf-ink) 50%);
  letter-spacing: 0.02em;
  text-align: center;
  flex: 1;
  white-space: nowrap;
}

/* Wave 25 — Theme overrides for the Madinah-style divider.
   Dark + mushaf themes: لازم نضمن إن الـ contrast صح ضد الورقه الداكنه.
   Sepia: نلون الإطار بدرجه بنيه دافئه أكتر بدل الأخضر. */
[data-theme="dark"] .mp-divider-frame,
[data-theme="mushaf"] .mp-divider-frame {
  background: var(--mushaf-paper);
  border-color: var(--mushaf-gold);
  box-shadow:
    inset 0 0 0 2px var(--mushaf-paper),
    inset 0 0 0 3px var(--mushaf-gold);
}
[data-theme="dark"] .mp-divider-name,
[data-theme="mushaf"] .mp-divider-name {
  color: var(--mushaf-gold);
}
[data-theme="dark"] .mp-divider-frame::before,
[data-theme="dark"] .mp-divider-frame::after,
[data-theme="mushaf"] .mp-divider-frame::before,
[data-theme="mushaf"] .mp-divider-frame::after {
  color: var(--mushaf-gold);
}
[data-theme="dark"] .mp-divider-side,
[data-theme="mushaf"] .mp-divider-side {
  color: var(--mushaf-gold);
  opacity: 0.85;
}
/* (sepia divider overrides removed in Wave 27.20 — theme retired in 27.14) */

.mp-basmala-line {
  /* Same line-grid baseline so it occupies one Mushaf line slot. */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-family: "UthmanicHafs", "Amiri Quran", serif;
  font-size: 0.92em;
  color: var(--mushaf-ink);
  padding: 0 0 !important;
  line-height: 1.6 !important;
}

/* === Sajda + Juz + Hizb margin markers (Wave 15 / Phase D) === */

/* Inline sajda glyph appended to the verse text. Subtle but clear,
   uses the gold accent so it reads as a Mushaf-style mark rather
   than just an Arabic character. */
.mp-sajda {
  display: inline-block;
  margin: 0 0.15em;
  padding: 0 0.18em;
  color: var(--mushaf-gold);
  font-size: 0.85em;
  vertical-align: 0.05em;
  border-bottom: 1.5px dotted var(--mushaf-gold);
  letter-spacing: 0;
  font-feature-settings: normal;
}

/* Margin markers — juz and hizb. Both render as small badges that hug
   the right edge (RTL start) of the page. They sit on the line where
   the new juz/hizb begins. Different visual weight: juz is bigger /
   bolder, hizb is smaller / lighter. */
.mp-margin-marker {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 8px;
  font-family: "Tajawal", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
  border-radius: 999px;
  white-space: nowrap;
  font-feature-settings: "tnum";
}

.mp-juz-marker {
  background: var(--mushaf-gold);
  color: var(--mushaf-paper);
  border: 1px solid var(--mushaf-gold);
  box-shadow: 0 1px 3px rgba(184,137,58,0.3);
}

/* Hizb cartouche — vertical decorative ornament sitting OUTSIDE the
   leaf's right padding, in the margin between the leaf and the screen
   edge (matching how the printed Madinah Mushaf engraves the hizb
   marker in the outer margin). The marker is generated inline at the
   verse-start position, so its vertical position auto-aligns with the
   line where the new hizb begins; promoting it to position: absolute
   keeps that vertical anchor while pushing it horizontally OUT of the
   page area.

   CRITICAL: the selectors below match (or exceed) the specificity of
   `.mp-line > .mp-margin-marker` (lines ~2607-2611) which sets
   `position: relative`. Without the higher-specificity selectors here,
   the relative rule wins the cascade and the cartouche stays trapped
   inside the line flow. This was the bug shipped in commit 22c18ca. */
.mp-line > .mp-hizb-marker,
.mp-text > .mp-hizb-marker,
.mp-hizb-marker {
  position: absolute;
  /* With the new Tmkeen padding of 32px on the left + a 4px buffer +
     the cartouche's own 28px width, we want the cartouche's right edge
     ~4px outside the leaf's outer edge. So:
       left (cartouche left edge from line start) = -(32 + 4 + 28) = -64
     The cartouche then occupies [-64, -36] from the line's left edge;
     the leaf's outer edge is at -32; the cartouche sits 4px past it. */
  left: -64px;
  /* Reset the pill defaults from .mp-margin-marker. */
  margin: 0;
  padding: 0;
  border-radius: 2px;
  background: linear-gradient(135deg,
    #f3e2a8 0%,
    #d4a957 45%,
    #b8893a 70%,
    #8b6420 100%);
  border: 1px solid #6b4a0e;
  width: 28px;
  height: 64px;
  /* Vertical hexagonal cartouche silhouette — same shape used in the
     printed Mushaf's margin ornament for hizb starts. */
  clip-path: polygon(
    50% 0%, 88% 18%, 100% 50%, 88% 82%,
    50% 100%, 12% 82%, 0% 50%, 12% 18%
  );
  /* Vertical Arabic text inside the cartouche. */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Amiri Quran", "UthmanicHafs", serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #4a2f0a;
  text-shadow: 0 1px 0 rgba(255,240,200,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Don't intercept taps — the page should still respond to immersive
     toggle even if the user lands on the cartouche. */
  pointer-events: none;
  z-index: 5;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  transition: opacity 0.18s ease;
}

/* Hide the side cartouche in immersive mode along with the rest of the
   chrome — tapping the leaf should collapse everything to just the page
   text on the cream paper. */
body.mp-immersive .mp-hizb-marker {
  display: none !important;
}

/* Sajda also gets a hover/tap tooltip behaviour (uses native title for
   accessibility — no extra JS). */

/* Tmkeen minimal page-number footer — plain centered Arabic numeral
   below the verses. No gold border, no circle, no shadow. Replaces the
   circular gold bubble from the Madinah-classic design.
   Stays in normal flow (instead of absolute) so it can't collide with
   long surahs like Aal-i-Imran p.50 (9+ verses filling the leaf). */
.mp-page-footer {
  display: grid;
  place-items: center;
  /* Fixed gap after the last line so the page number sits the SAME distance
     below the text on every page (consistent gap). Any unused page height
     falls BELOW the number instead of stretching the gap above it. */
  margin: 26px auto 10px;
  padding-top: 0;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: 14px;
  font-weight: 700;
  color: #5e4a1f;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  opacity: 1;
  box-shadow: none;
}

/* Dark + mushaf themes lift the page-number color into the gold accent
   so it reads against the darker paper. */
[data-theme="dark"] .mp-page-footer,
[data-theme="mushaf"] .mp-page-footer {
  color: var(--mushaf-gold);
}

/* Focus / distraction-free reading — hide the leaf header (juz + surah) and
   the page-number footer so only the ayat text remains on the page. */
body.mp-focus .mp-page-header,
body.mp-focus .mp-page-footer { display: none; }

/* Focus style "حافة لحافة + خط أكبر": strip the ornate frame and let the text
   run edge-to-edge on plain paper, which (via the fit-to-width sizing) makes it
   noticeably larger. A raised base clamp lets sparse pages grow too. */
body.mp-focus .mp-leaf {
  border: none !important;
  box-shadow: none !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
body.mp-focus .mp-leaf::before,
body.mp-focus .mp-leaf::after { display: none !important; content: none !important; }
body.mp-focus.mp-immersive .verses.pages-mode { padding-left: 2px; padding-right: 2px; }
body.mp-focus .mp-text.mp-line-mode { font-size: clamp(19px, 6.6vw, 32px); }

/* Mushaf page zoom — CSS `zoom` reflows the leaf bigger (text stays crisp) and
   the reader container pans in both axes to reach the enlarged page. */
body.mp-zoomed .mp-book { zoom: var(--mushaf-zoom, 1); }
body.mp-zoomed .verses.pages-mode { overflow: auto; -webkit-overflow-scrolling: touch; }
.mp-zoom-btn { font-size: 22px; font-weight: 700; line-height: 1; }

/* === 3D flip animations === */

@keyframes mpFlipFwd {
  0%   { transform: rotateY(0deg); box-shadow: 0 8px 28px rgba(0,0,0,0.10); }
  50%  { transform: rotateY(-90deg) scale(0.94); box-shadow: 0 24px 56px rgba(0,0,0,0.28); }
  100% { transform: rotateY(-180deg) scale(1); box-shadow: 0 8px 28px rgba(0,0,0,0.10); opacity: 0; }
}

@keyframes mpFlipBack {
  0%   { transform: rotateY(0deg); box-shadow: 0 8px 28px rgba(0,0,0,0.10); }
  50%  { transform: rotateY(90deg) scale(0.94); box-shadow: 0 24px 56px rgba(0,0,0,0.28); }
  100% { transform: rotateY(180deg) scale(1); box-shadow: 0 8px 28px rgba(0,0,0,0.10); opacity: 0; }
}

.mp-leaf.mp-flip-fwd {
  animation: mpFlipFwd 0.42s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  transform-origin: left center;
}

.mp-leaf.mp-flip-back {
  animation: mpFlipBack 0.42s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  transform-origin: right center;
}

/* Navigation row — same look as the standalone page reader for
   consistency. Uses the same .page-nav-btn we already have. */
.mp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 14px 30px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.mp-nav-current {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Wave 16 / G3 — surah tabs above the leaf.
   3 chips: previous surah | current surah (highlighted) | next surah.
   Mirrors Tmkeen's top-of-page tab row. */
.mp-surah-tabs {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
  margin: 0 14px 12px;
  padding: 0;
}

.mp-surah-tab {
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: clamp(11px, 3.2vw, 14px); /* fit "سورة آل عمران" on 375px */
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.mp-surah-tab:hover { color: var(--accent); border-color: var(--accent); }

.mp-surah-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  font-size: clamp(13px, 3.6vw, 16px);
}

.mp-surah-tab.spacer {
  background: transparent;
  border: none;
  cursor: default;
}

/* Ornament selector — 7 stars under the leaf. Middle is the
   currently-visible page; the others jump ±N pages. Disabled at
   the surah edge (the flipPage edge-rollover still works for
   adjacent pages). */
.mp-ornament-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin: 8px 24px;
  padding: 8px 12px;
}

.mp-ornament {
  flex: 1;
  display: grid;
  place-items: center;
  height: 32px;
  color: var(--accent-2);
  opacity: 0.45;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  background: transparent;
}

.mp-ornament:not(:disabled):hover {
  opacity: 1;
  color: var(--accent);
  transform: scale(1.15);
}

.mp-ornament:not(:disabled):active { transform: scale(0.95); }

.mp-ornament.current {
  opacity: 1;
  color: var(--accent);
  transform: scale(1.3);
}

.mp-ornament:disabled { opacity: 0.2; cursor: default; }

/* Hide the reader-header card in pages mode — the surah tabs above
   the leaf already communicate the current surah, and the cartouche
   inside the leaf has the full name + page number. */
.verses.pages-mode ~ .reader-header,
body:has(.verses.pages-mode) .reader-header {
  display: none;
}

/* === Hide the sync per-ayah render until line-mode arrives ===
   renderReader runs in two phases for pages mode:
     1. Sync: writes per-ayah HTML into .mp-text (KFGQPC continuous
        text, no 15-line layout). This intermediate state looks like
        Lawh mode for the few hundred ms before the line-mode swap.
     2. Async: enhanceWithLineLayout fetches Quran.com line data +
        the v1 page font, then replaces .mp-text contents with the
        15-line layout and adds the .mp-line-mode class.
   Without this rule users briefly saw a Lawh-style "loading" screen
   that visibly bled past the ornate border before the real Mushaf
   layout settled. Hide phase-1 content; show phase-2 instantly.
   Also hide when data-font-ok="0" — that signals the v1 font failed,
   so line-mode is rendered with KFGQPC fallback (which has the same
   "looks like lawh" visual problem). We'd rather show a loader than
   broken layout. The safety net at 8 seconds reveals it anyway. */
.verses.pages-mode .mp-text:not(.mp-line-mode):not([data-fallback="1"]),
.verses.pages-mode .mp-text[data-font-ok="0"]:not([data-fallback="1"]) {
  visibility: hidden;
}

/* === data-fallback page render — rare v1-font-failure safety net ===
   Pages mode is the authentic v1 Mushaf. If the v1 line layout never arrives
   (offline + uncached font), the 8s safety net reveals the synchronous
   UthmanicHafs render via [data-fallback]. The default .mp-text metrics are
   tuned for v1 glyphs and leave that fallback sparse + taller than the leaf, so
   here we make it read like a dense page and let the frame grow to contain it
   instead of spilling past the border (incl. immersive). v1 pages are untouched
   (they carry .mp-line-mode, never [data-fallback]). (Also backed the reverted
   colored-pages experiment, Waves 27.15-17 → 27.18.) */
.mp-text[data-fallback="1"] {
  font-size: calc(var(--quran-size) - 4px);
  line-height: 1.9;
  word-spacing: -0.06em;
  padding: 8px 14px;
}
.verses.pages-mode .mp-book:has(.mp-text[data-fallback="1"]),
.verses.pages-mode .mp-leaf:has(.mp-text[data-fallback="1"]) {
  height: auto;
}
.verses.pages-mode .mp-leaf:has(.mp-text[data-fallback="1"]) {
  min-height: 100%;
}
body.mp-immersive .mp-book:has(.mp-text[data-fallback="1"]) {
  height: auto;
  min-height: calc(100vh - var(--mp-immersive-pad));
  min-height: calc(100dvh - var(--mp-immersive-pad));
}

/* Small Mushaf-themed loader that sits where the text WOULD render
   while the v1 font + Quran.com data are still loading. Better
   than a blank leaf — the user knows something is happening. */
.mp-text-loader {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--mushaf-gold);
  font-family: "Amiri Quran", "UthmanicHafs", serif;
  font-size: 14px;
  opacity: 0.7;
}
.verses.pages-mode .mp-page-content { position: relative; }
.verses.pages-mode .mp-page-content:not(:has(.mp-text.mp-line-mode))
                 :not(:has(.mp-text[data-fallback="1"])) .mp-text-loader,
.verses.pages-mode .mp-page-content:has(.mp-text[data-font-ok="0"])
                 :not(:has(.mp-text[data-fallback="1"])) .mp-text-loader {
  display: flex;
}
.mp-text-loader::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--mushaf-gold);
  border-top-color: transparent;
  animation: mpLoaderSpin 0.8s linear infinite;
}
@keyframes mpLoaderSpin { to { transform: rotate(360deg); } }

/* ============================================================
   Wave 17 — Immersive Mushaf-pages mode
   ============================================================
   When `body.mp-immersive` is set, we hide every piece of chrome
   so the cream leaf fills (almost) the whole viewport. The user
   tapped to opt in; a second tap on the leaf restores controls.
   The leaf keeps a small dark-green frame around it (option ب
   the user picked) so it still reads as "a page on a desk"
   rather than full-bleed wallpaper.
*/

body.mp-immersive .topbar,
body.mp-immersive .bottom-nav,
body.mp-immersive .memo-toolbar,
body.mp-immersive .mp-surah-tabs,
body.mp-immersive .mp-ornament-row,
body.mp-immersive .mp-toolbar,
body.mp-immersive .mp-nav,
body.mp-immersive .audio-player {
  display: none !important;
}

/* The reader's main content area normally reserves space for the
   bottom-nav via padding-bottom; in immersive there's no bottom-nav,
   so reclaim that space. */
body.mp-immersive .content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The pages-mode container fills the viewport. dvh (dynamic viewport
   height) tracks the real visible height as URL bars show/hide on
   mobile; fall back to vh on older browsers. The dark-green margin
   gives the "page on a desk" framing. */
body.mp-immersive .verses.pages-mode {
  /* Bounded to the viewport + scrollable: a page whose 15 long lines exceed
     the safe-area-reduced height (e.g. Baqarah p.49 on an iPhone with the
     home-indicator inset) would otherwise clip its last line + page number
     off the bottom with no way to reach them. Now it scrolls instead. */
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(8px + env(safe-area-inset-top, 0px))
           10px
           calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}

body.mp-immersive .mp-book {
  /* mp-book keeps its 720px ceiling so tablets don't show a cartoonishly
     wide leaf; on phones the viewport is < 720 so the leaf fills width.
     min-height fills the available viewport (minus padding + safe-area);
     height is left auto so a too-tall page can grow and the container above
     scrolls, instead of clipping the overflow. */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  --mp-immersive-pad: calc(16px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--mp-immersive-pad));
  min-height: calc(100dvh - var(--mp-immersive-pad));
}

body.mp-immersive .mp-leaf {
  /* flex:1 0 auto — fill mp-book on short pages, grow past it on tall ones
     (paired with the scrollable container above). */
  min-height: 0;
  height: auto;
  flex: 1 0 auto;
}

/* In immersive the leaf is much bigger than in normal mode, and the
   fixed 52×52px corner star ornaments end up intersecting words and
   the page header. Hide them — the multi-layer ornate border already
   provides plenty of corner decoration. */
body.mp-immersive .mp-leaf::after {
  display: none;
}

/* The mushaf theme has its own dark-green background; make sure the
   leaf's outer frame matches whatever theme is active. */
body.mp-immersive[data-theme="mushaf"] .verses.pages-mode,
body.mp-immersive .verses.pages-mode {
  background: var(--bg);
}

/* Smooth chrome reveal/hide when toggling. */
.topbar, .bottom-nav, .mp-surah-tabs, .mp-ornament-row,
.mp-toolbar, .mp-nav, .memo-toolbar, .audio-player {
  transition: opacity 0.18s ease;
}

/* Wave 16 / G1 — Mushaf-style bottom toolbar. Sits between the leaf
   and the page-nav; mirrors Tmkeen's crescent + bookmark + juz label. */
.mp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 14px 6px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mp-toolbar-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.mp-toolbar-btn:hover { background: var(--accent); color: var(--bg); }
.mp-toolbar-btn:active { transform: scale(0.92); }

.mp-toolbar-juz {
  flex: 1;
  text-align: center;
  font-family: "Amiri", serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-ink);
  letter-spacing: 0.3px;
}

/* === Mushaf theme overrides for the reader stack === */

/* When the user is on the 'مصحف' theme, the topbar darkens to match
   the leather-cover look and the bottom toolbar gets the gold pill
   treatment (Tmkeen). The cream leaf stays the same — its colour is
   pinned via --mushaf-paper which is NOT theme-tracked. */
[data-theme="mushaf"] .topbar {
  background: linear-gradient(180deg, #0a2e22 0%, #061f17 100%);
}

[data-theme="mushaf"] .bottom-nav {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

[data-theme="mushaf"] .mp-toolbar {
  background: linear-gradient(180deg, #0e3a2e 0%, #0a2e22 100%);
  border: 1px solid var(--accent-2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}

[data-theme="mushaf"] .mp-toolbar-juz {
  color: var(--accent-2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

[data-theme="mushaf"] .mp-nav {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="mushaf"] .page-nav-btn {
  color: var(--accent);
}

[data-theme="mushaf"] .memo-toolbar .memo-btn {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="mushaf"] .memo-toolbar .memo-btn.active {
  background: var(--accent);
  color: #0a2e22;
  border-color: var(--accent);
}

/* Wave 27.19 — mushaf theme's --accent is turquoise (#4ecdc4); white text on it
   is only ~1.93:1 (fails WCAG). Every filled-accent button gets dark ink instead,
   mirroring .memo-btn.active above (#0a2e22 on accent ≈ 7.6:1). */
[data-theme="mushaf"] .verse-action.primary,
[data-theme="mushaf"] .verse-action.primary:hover,
[data-theme="mushaf"] .tab.active,
[data-theme="mushaf"] .seg-control button.active,
[data-theme="mushaf"] .install-btn,
[data-theme="mushaf"] .toast-btn,
[data-theme="mushaf"] .onboarding-next,
[data-theme="mushaf"] .range-btn.primary,
[data-theme="mushaf"] .quiz-reveal,
[data-theme="mushaf"] .bookmark-popover-cta,
[data-theme="mushaf"] .share-action.primary,
[data-theme="mushaf"] .kh-btn,
[data-theme="mushaf"] .adh-tab.active,
[data-theme="mushaf"] .tas-phrase.active,
[data-theme="mushaf"] .tas-tap,
[data-theme="mushaf"] .skip-link {
  color: #0a2e22;
}

/* The turquoise accent also backs the full-width search bar; its white text +
   placeholder + icons were ~1.9:1. Dark ink on the light turquoise reads. */
[data-theme="mushaf"] .search-bar,
[data-theme="mushaf"] .search-bar input { color: #0a2e22; }
[data-theme="mushaf"] .search-bar input { background: rgba(0, 0, 0, 0.10); }
[data-theme="mushaf"] .search-bar input::placeholder { color: rgba(10, 46, 34, 0.6); }
[data-theme="mushaf"] .search-bar input:focus-visible { outline-color: #0a2e22; }

/* Surah header card on the home screen / reader. */
[data-theme="mushaf"] .hero {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--accent-2);
}

[data-theme="mushaf"] .reader-header {
  background: var(--surface);
  border-color: var(--accent-2);
}

[data-theme="mushaf"] .reader-surah-name {
  color: var(--accent-2);
}

/* Wave 16 / G4 — compact audio pill in the Mushaf theme.
   Tmkeen-style: a small rounded pill at the bottom showing prev /
   play / next + reciter name. We collapse the existing three-row
   player into a single tight row, hide the progress bar / time chips,
   and recolor everything to fit on the dark green wrapper. */
[data-theme="mushaf"] .audio-player {
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, black) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, black);
  border-radius: 999px;
  padding: 6px 14px;
  gap: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.15) inset;
  /* Pull it closer to the bottom because we no longer have a tall
     three-row layout. */
  bottom: calc(82px + var(--safe-bottom));
  max-width: 360px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

[data-theme="mushaf"] .audio-player .player-progress-row,
[data-theme="mushaf"] .audio-player .player-meta-row .player-chip {
  display: none;
}

[data-theme="mushaf"] .audio-player .player-meta-row {
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}

[data-theme="mushaf"] .audio-player .player-info {
  text-align: center;
  color: #0a2e22;
}
[data-theme="mushaf"] .audio-player .player-title,
[data-theme="mushaf"] .audio-player .player-sub {
  color: #0a2e22;
  font-size: 11px;
  font-weight: 700;
  text-shadow: none;
}

[data-theme="mushaf"] .audio-player .player-controls-row {
  flex-direction: row-reverse;
  gap: 6px;
}

[data-theme="mushaf"] .audio-player .player-btn {
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.18);
  color: #fff;
  border: none;
}
[data-theme="mushaf"] .audio-player .player-btn.play {
  background: var(--accent-2);
  color: #0a2e22;
  width: 42px; height: 42px;
}
[data-theme="mushaf"] .audio-player .player-btn.small {
  background: rgba(0,0,0,0.18);
  width: 28px; height: 28px;
}

/* === Bookmark popover (Tmkeen-style) === */

.bookmark-popover-sheet {
  max-width: 460px;
  margin: 0 auto;
  border-radius: 22px;
  max-height: 70vh;
}

.bookmark-popover-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.bookmark-popover-empty {
  text-align: center;
  padding: 28px 18px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.bookmark-popover-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: background-color 0.15s ease, transform 0.1s ease;
  text-align: start;
  width: 100%;
}

.bookmark-popover-item:hover { background: var(--accent-soft); }
.bookmark-popover-item:active { transform: scale(0.99); }

.bp-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 700;
}

.bp-info { flex: 1; min-width: 0; }

.bp-title {
  font-family: "Amiri", serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.bookmark-popover-cta {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.bookmark-popover-cta:hover { background: color-mix(in srgb, var(--accent) 85%, white); }
.bookmark-popover-cta:active { transform: scale(0.97); }

/* Tablet: two-page spread side-by-side. The right page is the current
   (RTL start), the left is the next. Phase 4 will wire this. */
@media (min-width: 1024px) {
  .verses.pages-mode {
    perspective: 2400px;
  }
  .mp-book {
    max-width: 1100px;
  }
}

/* Respect reduced motion users — kill the flip animation entirely. */
@media (prefers-reduced-motion: reduce) {
  .mp-leaf.mp-flip-fwd,
  .mp-leaf.mp-flip-back {
    animation: none !important;
  }
}

/* ============================================================
   Library (المكتبة) — companion tools & reference content
   ============================================================ */
.lib-entry {
  display: flex; align-items: center; gap: 14px;
  margin: 0 14px 16px; padding: 15px 18px; width: calc(100% - 28px);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  cursor: pointer; text-align: start; color: var(--text);
  transition: transform 0.1s ease;
}
.lib-entry:active { transform: scale(0.99); }
.lib-entry-icon { font-size: 28px; line-height: 1; }
.lib-entry-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lib-entry-title { font-weight: 700; font-size: 17px; color: var(--accent); }
.lib-entry-sub { font-size: 13px; opacity: 0.65; }
.lib-entry-arrow { font-size: 24px; color: var(--accent-2); }

.lib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 14px 40px; }
.lib-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 18px 16px; min-height: 126px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; text-align: start; color: var(--text);
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.lib-card:not(.lib-card-soon):active { transform: scale(0.98); }
.lib-card:not(.lib-card-soon):hover { border-color: var(--accent-2); }
.lib-card-icon { font-size: 30px; line-height: 1; margin-bottom: 4px; }
.lib-card-title { font-weight: 700; font-size: 15px; color: var(--accent); }
.lib-card-sub { font-size: 12px; opacity: 0.62; line-height: 1.5; }
.lib-card-soon { opacity: 0.6; cursor: default; }
.lib-soon {
  position: absolute; inset-inline-end: 10px; top: 10px;
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}

.lib-section { padding: 12px 14px 40px; }
.lib-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--accent); font-weight: 700; font-size: 15px;
  padding: 6px 4px; margin-bottom: 10px; cursor: pointer;
}

.kh-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 18px; text-align: center; color: var(--text); }
.kh-intro { font-size: 15px; margin-bottom: 16px; opacity: 0.8; }
.kh-presets { display: flex; gap: 10px; justify-content: center; }
.kh-preset {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 8px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  color: var(--accent); font-size: 24px; font-weight: 800; cursor: pointer; transition: transform 0.1s ease;
}
.kh-preset span { font-size: 12px; font-weight: 600; opacity: 0.7; }
.kh-preset:active { transform: scale(0.97); }
.kh-day { font-size: 20px; font-weight: 800; color: var(--accent); margin-bottom: 12px; }
.kh-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 8px; }
.kh-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width 0.4s ease; }
.kh-pct { font-size: 13px; opacity: 0.7; margin-bottom: 14px; }
.kh-portion { font-size: 15px; font-weight: 600; margin-bottom: 18px; }
.kh-btn { width: 100%; padding: 15px; border: none; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.kh-btn:active { transform: scale(0.99); }
.kh-btn + .kh-btn { margin-top: 10px; }
.kh-mark { background: none; border: 1.5px solid var(--accent); color: var(--accent); }
.kh-behind { font-size: 13px; font-weight: 600; color: #b45309; background: rgba(180, 83, 9, 0.1); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 14px; }
.kh-done-today { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.kh-cancel { display: block; margin: 14px auto 0; background: none; border: none; color: var(--text); opacity: 0.5; font-size: 13px; cursor: pointer; text-decoration: underline; }
.kh-done { font-size: 18px; font-weight: 700; color: var(--accent); line-height: 1.6; margin-bottom: 10px; }

/* ---- المكتبة › الكتب (Books) ---- */
.bk-loading { text-align: center; color: var(--text); opacity: 0.6; padding: 30px 0; font-size: 14px; }
.bk-sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-sec { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 10px; color: var(--text); cursor: pointer; text-align: center; }
.bk-sec:active { transform: scale(0.98); }
.bk-sec-icon { font-size: 26px; }
.bk-sec-name { font-size: 14px; font-weight: 700; }
.bk-sec-count { font-size: 11px; opacity: 0.55; }
.bk-list { display: flex; flex-direction: column; gap: 10px; }
.bk-item { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; color: var(--text); cursor: pointer; text-align: start; width: 100%; }
.bk-item:active { transform: scale(0.99); }
.bk-cover { width: 52px; height: 72px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: var(--surface-2); }
.bk-cover-ph { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.bk-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.bk-author { font-size: 12px; opacity: 0.7; }
.bk-sub { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.bk-type { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; background: var(--accent); color: #fff; border-radius: 5px; padding: 1px 6px; }
.bk-pages { font-size: 11px; opacity: 0.55; }
.bk-reader { display: flex; flex-direction: column; align-items: center; }
/* Reader toolbar: zoom −/+ and download. */
.bk-toolbar { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 10px; flex-wrap: wrap; }
.bk-tool { height: 38px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.bk-tool:active { transform: scale(0.95); }
.bk-tool[disabled] { opacity: 0.55; cursor: default; }
.bk-tool.bk-dl { font-size: 14px; font-weight: 600; }
.bk-zoomval { font-size: 14px; font-weight: 600; min-width: 52px; text-align: center; color: var(--text); }
/* block + text-align:center (not flex-center) so a zoomed-wider canvas can be
   scrolled to from the start edge; overflow:auto pans it. */
.bk-pdf-wrap { width: 100%; overflow: auto; text-align: center; background: var(--surface-2); border-radius: var(--radius); padding: 8px; }
.bk-canvas { height: auto; display: inline-block; box-shadow: 0 1px 6px rgba(0,0,0,0.15); border-radius: 2px; }
.bk-epub { width: 100%; background: var(--surface); border-radius: var(--radius); }
.bk-pager { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 0 4px; }
.bk-nav { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.bk-nav:active { transform: scale(0.95); }
.bk-pageno { font-size: 14px; font-weight: 600; min-width: 90px; text-align: center; color: var(--text); }

/* Page-turn animation (Books). Forward (next) slides in from the left in RTL
   reading; back slides in from the right. A short fade keeps it soft, not
   distracting. Respects reduced-motion. */
@keyframes bkTurnNext { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bkTurnPrev { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
.bk-canvas.bk-turn-next { animation: bkTurnNext 0.30s ease-out; }
.bk-canvas.bk-turn-prev { animation: bkTurnPrev 0.30s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .bk-canvas.bk-turn-next, .bk-canvas.bk-turn-prev { animation-duration: 0.001s; }
}

.tas-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; text-align: center; color: var(--text); }
.tas-phrases { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.tas-phrase { padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font-family: "Amiri Quran", "Amiri", serif; font-size: 15px; cursor: pointer; }
.tas-phrase.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tas-count { font-size: 70px; font-weight: 800; color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tas-total { font-size: 13px; opacity: 0.6; margin-bottom: 16px; }
.tas-tap {
  width: 176px; height: 176px; border-radius: 50%; margin: 0 auto 20px; display: block; border: none;
  background: radial-gradient(circle at 40% 35%, var(--accent-2), var(--accent));
  color: #fff; font-family: "Amiri Quran", "Amiri", serif; font-size: 22px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.4); transition: transform 0.08s ease;
}
.tas-tap:active { transform: scale(0.95); }
.tas-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tas-targets { display: flex; gap: 8px; }
.tas-target { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-weight: 700; cursor: pointer; }
.tas-target.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.tas-reset { background: none; border: none; color: var(--text); opacity: 0.5; font-size: 14px; cursor: pointer; }
.tas-flash { animation: tasFlash 0.5s ease; }
@keyframes tasFlash { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ============================================================
   Library content sections — Names · Adhkar · Ruqyah · Hisn
   ============================================================ */
.lib-intro { margin: 4px 14px 14px; padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13.5px; line-height: 1.95; color: var(--text); opacity: 0.92; }
.lib-hint { margin: 0 14px 12px; font-size: 12px; opacity: 0.6; text-align: center; }
.lib-empty { margin: 48px 14px; text-align: center; opacity: 0.7; }
.lib-reset { display: block; margin: 20px auto 44px; padding: 9px 24px; background: transparent; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 13px; cursor: pointer; opacity: 0.75; }
.lib-reset:hover { border-color: var(--accent-2); opacity: 1; }

/* أسماء الله الحسنى — grid */
.nm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 14px 44px; }
.nm-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 12px 13px; text-align: center; overflow: hidden; }
.nm-num { position: absolute; top: 7px; inset-inline-start: 10px; font-size: 11px; opacity: 0.4; }
.nm-name { direction: rtl; font-family: "UthmanicHafs", "Amiri Quran", serif; font-size: 25px; font-weight: 700; color: var(--gold-ink); line-height: 1.7; margin-top: 2px; }
.nm-translit { font-size: 11.5px; letter-spacing: 0.02em; opacity: 0.6; margin-top: 3px; }
.nm-mean { font-size: 12.5px; line-height: 1.65; margin-top: 7px; color: var(--text); opacity: 0.88; }

/* الأذكار — tabs */
.adh-tabs { display: flex; gap: 6px; padding: 4px 14px 12px; position: sticky; top: 0; z-index: 3; background: var(--bg); }
.adh-tab { flex: 1; padding: 9px 4px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; opacity: 0.72; }
.adh-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); opacity: 1; }

/* dhikr / ruqyah cards */
.adh-list { padding: 0 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.adh-card, .ruq-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; transition: opacity 0.2s ease, border-color 0.2s ease; }
.adh-card { cursor: pointer; -webkit-user-select: none; user-select: none; }
.adh-card:active { transform: scale(0.995); }
.adh-card.done { opacity: 0.5; border-color: var(--accent); }
.adh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 6px; }
.adh-count { font-size: 13px; font-weight: 700; color: var(--gold-ink); background: var(--surface-2); padding: 2px 11px; border-radius: 999px; }
.adh-check { color: var(--accent); font-weight: 800; font-size: 17px; margin-inline-start: auto; }
.adh-text { direction: rtl; text-align: center; font-family: "UthmanicHafs", "Amiri Quran", "Amiri", serif; font-size: 21px; line-height: 2.25; color: var(--text); }
/* الاستعاذة / البسملة كمقدّمة — أصغر وأخفت ومفصولة عن نص الذكر بخط منقّط */
.adh-preamble { direction: rtl; text-align: center; font-family: "UthmanicHafs", "Amiri Quran", "Amiri", serif; font-size: 15px; line-height: 2; color: var(--text-muted); opacity: 0.7; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.adh-ru { direction: ltr; text-align: left; font-size: 13px; line-height: 1.7; margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--border); opacity: 0.82; }
.adh-ref { font-size: 11.5px; opacity: 0.55; margin-top: 10px; direction: rtl; text-align: right; }
/* فضل الذكر — highlighted virtue line */
.adh-fadl { direction: rtl; text-align: right; font-size: 13px; line-height: 1.85; margin-top: 11px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, transparent); border-inline-start: 3px solid var(--accent); }
.adh-fadl-lbl { font-weight: 700; color: var(--accent); }
/* When-to-say hint + session progress */
.adh-time-hint { padding: 0 14px 8px; font-size: 12.5px; color: var(--text-muted); direction: rtl; text-align: right; }
.adh-progress { padding: 0 14px 12px; direction: rtl; }
.adh-progress-txt { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; text-align: right; }
.adh-progress-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.adh-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.35s ease; }

/* حصن المسلم — accordion */
.hisn-list { padding: 8px 14px 44px; display: flex; flex-direction: column; gap: 8px; }
.hisn-cat { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.hisn-cat.open { border-color: var(--accent-2); }
.hisn-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: transparent; border: 0; cursor: pointer; color: var(--text); font-size: 15px; font-weight: 700; text-align: start; }
.hisn-arrow { opacity: 0.5; font-size: 12px; flex-shrink: 0; }
.hisn-body { padding: 0 15px 10px; display: flex; flex-direction: column; gap: 10px; }
.hisn-item { border-top: 1px solid var(--border); padding-top: 13px; }
.hisn-item .adh-ref { margin-top: 9px; }