/* AUTO-GENERATED bundle. Do not edit. */

/* ===== base.css ===== */
/* src/styles/base.css — design tokens, reset, typography, chrome. */

:root {
  /* Paper themes (overridden by [data-theme="..."]) */
  --mushaf-paper: #fbf6e9;
  --mushaf-ink: #14211d;
  --bg: #f4f1ea;
  --surface: #ffffff;
  --surface-2: #f7f4ec;
  --text: #1c1b19;
  --text-muted: #6b665c;
  --border: #e3ddcf;
  --primary: #1f6f5c;
  --primary-ink: #0f3d33;
  --accent: #b0822a;
  --danger: #b3261e;
  --warn: #c77700;
  --ok: #2e7d32;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.08);
  --radius: 12px;
  --header-h: 56px;

  color-scheme: light;
}

[data-theme="dark"] {
  --mushaf-paper: #14171a;
  --mushaf-ink: #e9e3d2;
  --bg: #0e1012;
  --surface: #171a1d;
  --surface-2: #1d2125;
  --text: #ece7dd;
  --text-muted: #9aa0a6;
  --border: #2a2e33;
  --primary: #4dbfa0;
  --primary-ink: #bff0dd;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

[data-theme="sepia"] {
  --mushaf-paper: #f3e8d0;
  --mushaf-ink: #3a2c18;
  --bg: #efe4ca;
  --surface: #f7eed8;
  --surface-2: #ecd9b6;
  --text: #3a2c18;
  --text-muted: #7a6440;
  --border: #d8c39a;
}

[data-theme="contrast"] {
  --mushaf-paper: #ffffff;
  --mushaf-ink: #000000;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --text: #000000;
  --text-muted: #333333;
  --border: #000000;
  --primary: #000000;
  --primary-ink: #000000;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Readex Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Arial, "Noto Sans Arabic", sans-serif;
  line-height: 1.6;
  direction: rtl;
}
h1,
h2,
h3 {
  line-height: 1.3;
  font-weight: 700;
}
a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Quran Surah 1/2 are color-icon fonts rather than Arabic Unicode fonts.
   Keep readable Arabic text in place until the matching title glyph is ready. */
.surah-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.8em;
  min-block-size: 1em;
  vertical-align: middle;
  line-height: 1;
}
.surah-title__glyphs {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  white-space: nowrap;
}
.surah-title__glyph {
  display: block;
  font-size: 1.25em;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.surah-title--ready .surah-title__glyphs {
  display: inline-flex;
}
.surah-title--ready .surah-title__fallback {
  display: none;
}
img {
  max-width: 100%;
  height: auto;
}
button {
  font-family: inherit;
}
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ===== layout.css ===== */
/* src/styles/layout.css — app chrome, header, containers, reader layout. */

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border);
}
.app-header__brand {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--primary-ink);
  white-space: nowrap;
}
.app-header__spacer {
  flex: 1;
}
.app-header nav {
  display: flex;
  gap: 4px;
}
.app-header nav a,
.app-header nav button {
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.95rem;
  cursor: pointer;
}
.app-header nav a[aria-current="page"],
.app-header nav a:hover {
  background: var(--surface-2);
  text-decoration: none;
}

/* Persistent application dock. The compact icon-over-label layout is used on
   wide screens; the familiar header remains the mobile navigation. */
.app-dock {
  display: none;
}

@media (min-width: 920px) {
  .app-header {
    display: none;
  }

  .app-dock {
    position: fixed;
    inset-inline-start: 22px;
    top: 50dvh;
    z-index: 110;
    display: flex;
    width: 56px;
    flex-direction: column;
    gap: 22px;
    transform: translateY(-50%);
  }

  .app-dock__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--glass-border-soft, var(--border));
    border-radius: 52px;
    background: var(--glass-bg-strong, var(--surface));
    -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate, 1.5));
    backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate, 1.5));
    box-shadow: var(--glass-shadow, var(--shadow));
  }

  .app-dock__item {
    width: 46px;
    min-height: 70px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    padding: 7px 4px;
    border: 0;
    border-radius: 34px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      color var(--dur-fast, 0.16s) ease,
      background var(--dur-fast, 0.16s) ease,
      transform var(--dur-fast, 0.16s) var(--spring, ease);
  }

  /* Keep labels compact enough to fit within the 56px icon rail. */
  .app-dock__item span {
    white-space: nowrap;
    overflow: visible;
  }

  .app-dock__item:hover,
  .app-dock__item.is-active,
  .app-dock__item[aria-expanded="true"] {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    text-decoration: none;
  }

  .app-dock__item:active {
    transform: scale(0.92);
  }

  .app-dock__item:focus-visible {
    outline-offset: 1px;
  }

  .app-dock__icon {
    width: 25px;
    height: 25px;
    stroke-width: 1.8;
  }

  .app-dock__reader-tools {
    display: none;
  }

  body.quran-page .app-dock__reader-tools {
    display: grid;
  }

  .app-dock__reader-tools[hidden] {
    display: none !important;
  }

  body:not(.quran-page) main {
    min-height: 100dvh;
    padding-inline-start: 92px;
  }
}

main {
  min-height: calc(100vh - var(--header-h));
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
}
.container--narrow {
  max-width: 760px;
}

.reader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 8px 64px;
}

.reader-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
}
.reader-toolbar .seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.reader-toolbar .seg button {
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
}
.reader-toolbar .seg button[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
}
.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.92rem;
}
.btn:hover {
  background: var(--surface-2);
}
.btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Mushaf spread + single containers */
.mushaf-stage {
  width: 100%;
  display: flex;
  justify-content: center;
}
.mushaf-spread {
  display: flex;
  gap: var(--spread-gap, 18px);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.mushaf-spread .spread-slot {
  flex: 0 1 auto;
}
.reader[data-layout="single"] .mushaf-stage {
  justify-content: center;
}

.reader-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 900px;
  margin-top: 8px;
}

/* Drawer (surah/juz/hizb) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 80;
}
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: min(86vw, 380px);
  background: var(--surface);
  z-index: 90;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.drawer__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer__body {
  overflow: auto;
  padding: 8px;
}
.drawer .index-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
}
.drawer .index-row:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.drawer .index-row__num {
  color: var(--text-muted);
  font-size: 0.85rem;
  min-width: 26px;
}
.drawer .index-row__name {
  font-weight: 600;
}
.drawer .index-row__surah {
  font-size: 1.3rem;
}

/* The Quran landing reuses index rows outside the drawer. Give the 114
   color-title cards their own responsive grid instead of inheriting no layout. */
.quran-landing .drawer__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  max-width: 1120px;
  margin: 18px auto 0;
}
.quran-landing .index-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  grid-template-areas:
    "num surah"
    "num translation";
  align-items: center;
  column-gap: 10px;
  min-block-size: 132px;
  padding: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.quran-landing .index-row:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  text-decoration: none;
}
.quran-landing .index-row__num {
  grid-area: num;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
}
.quran-landing .index-row__surah {
  grid-area: surah;
  justify-self: start;
  font-size: clamp(3.2rem, 5vw, 4.4rem);
}
.quran-landing .index-row__translation {
  grid-area: translation;
  align-self: start;
  color: var(--text-muted);
  direction: ltr;
  font-size: 0.82rem;
  line-height: 1.25;
}
@media (max-width: 480px) {
  .quran-landing .drawer__body {
    grid-template-columns: 1fr;
  }
}

/* Panels (tafsir, translation, tilawah) */
.panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
}
.panel {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  max-height: 85vh;
  background: var(--surface);
  z-index: 101;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.panel__body {
  overflow: auto;
  padding: 16px;
}

/* Breadcrumbs */
.crumbs {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 8px 4px;
}
.crumbs a {
  color: var(--text-muted);
}
.crumbs span {
  margin: 0 6px;
  opacity: 0.6;
}

/* ===== qcf4.css ===== */
/* AUTO-GENERATED by tools/convert-fonts.mjs. Do not edit by hand. */
/* QCF4 Mushaf fonts: font-display:block so private-use glyphs never */
/* flash as tofu before the font loads. */

@font-face {
  font-family: "QCF4_Hafs_01_W";
  src: url("/fonts/QCF4_Hafs_01_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_01_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_02_W";
  src: url("/fonts/QCF4_Hafs_02_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_02_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_03_W";
  src: url("/fonts/QCF4_Hafs_03_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_03_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_04_W";
  src: url("/fonts/QCF4_Hafs_04_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_04_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_05_W";
  src: url("/fonts/QCF4_Hafs_05_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_05_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_06_W";
  src: url("/fonts/QCF4_Hafs_06_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_06_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_07_W";
  src: url("/fonts/QCF4_Hafs_07_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_07_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_08_W";
  src: url("/fonts/QCF4_Hafs_08_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_08_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_09_W";
  src: url("/fonts/QCF4_Hafs_09_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_09_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_10_W";
  src: url("/fonts/QCF4_Hafs_10_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_10_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_11_W";
  src: url("/fonts/QCF4_Hafs_11_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_11_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_12_W";
  src: url("/fonts/QCF4_Hafs_12_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_12_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_13_W";
  src: url("/fonts/QCF4_Hafs_13_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_13_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_14_W";
  src: url("/fonts/QCF4_Hafs_14_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_14_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_15_W";
  src: url("/fonts/QCF4_Hafs_15_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_15_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_16_W";
  src: url("/fonts/QCF4_Hafs_16_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_16_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_17_W";
  src: url("/fonts/QCF4_Hafs_17_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_17_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_18_W";
  src: url("/fonts/QCF4_Hafs_18_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_18_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_19_W";
  src: url("/fonts/QCF4_Hafs_19_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_19_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_20_W";
  src: url("/fonts/QCF4_Hafs_20_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_20_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_21_W";
  src: url("/fonts/QCF4_Hafs_21_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_21_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_22_W";
  src: url("/fonts/QCF4_Hafs_22_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_22_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_23_W";
  src: url("/fonts/QCF4_Hafs_23_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_23_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_24_W";
  src: url("/fonts/QCF4_Hafs_24_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_24_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_25_W";
  src: url("/fonts/QCF4_Hafs_25_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_25_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_26_W";
  src: url("/fonts/QCF4_Hafs_26_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_26_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_27_W";
  src: url("/fonts/QCF4_Hafs_27_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_27_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_28_W";
  src: url("/fonts/QCF4_Hafs_28_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_28_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_29_W";
  src: url("/fonts/QCF4_Hafs_29_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_29_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_30_W";
  src: url("/fonts/QCF4_Hafs_30_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_30_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_31_W";
  src: url("/fonts/QCF4_Hafs_31_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_31_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_32_W";
  src: url("/fonts/QCF4_Hafs_32_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_32_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_33_W";
  src: url("/fonts/QCF4_Hafs_33_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_33_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_34_W";
  src: url("/fonts/QCF4_Hafs_34_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_34_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_35_W";
  src: url("/fonts/QCF4_Hafs_35_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_35_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_36_W";
  src: url("/fonts/QCF4_Hafs_36_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_36_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_37_W";
  src: url("/fonts/QCF4_Hafs_37_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_37_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_38_W";
  src: url("/fonts/QCF4_Hafs_38_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_38_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_39_W";
  src: url("/fonts/QCF4_Hafs_39_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_39_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_40_W";
  src: url("/fonts/QCF4_Hafs_40_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_40_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_41_W";
  src: url("/fonts/QCF4_Hafs_41_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_41_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_42_W";
  src: url("/fonts/QCF4_Hafs_42_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_42_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_43_W";
  src: url("/fonts/QCF4_Hafs_43_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_43_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_44_W";
  src: url("/fonts/QCF4_Hafs_44_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_44_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_45_W";
  src: url("/fonts/QCF4_Hafs_45_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_45_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_46_W";
  src: url("/fonts/QCF4_Hafs_46_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_46_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_Hafs_47_W";
  src: url("/fonts/QCF4_Hafs_47_W.woff2") format("woff2"),
       url("/fonts/QCF4_Hafs_47_W.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "QCF4_QBSML";
  src: url("/fonts/QCF4_QBSML.woff2") format("woff2"),
       url("/fonts/QCF4_QBSML.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

/* UI fonts: font-display:swap. */
@font-face {
  font-family: "Readex Pro";
  src: url("/fonts/Readex.woff2") format("woff2"),
       url("/fonts/Readex.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "SurahName";
  src: url("/fonts/surahName.woff2") format("woff2"),
       url("/fonts/surahName.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "GQA Ayah";
  src: url("/fonts/GQAayah.woff2") format("woff2"),
       url("/fonts/GQAayah.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Quran Surah 1";
  src: url("/fonts/QuranSurah1-mLKO5.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Quran Surah 2";
  src: url("/fonts/QuranSurah2-7Bov4.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}


/* ===== mushaf.css ===== */
/* src/styles/mushaf.css — QCF4 page visual rules, word targets, text section. */

.qcf-page {
  position: relative;
  aspect-ratio: 1120 / 1792;
  /* Default static size (pre-JS): fit roughly within viewport height. */
  width: var(--page-width, min(100%, calc((100vh - 200px) * 0.625)));
  max-width: 100%;
  background: var(--mushaf-paper);
  border-radius: 6px;
  box-shadow: var(--shadow);
  overflow: hidden;
  container-type: inline-size;
}

.qcf-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.qcf-paper {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.quran-svg-page {
  display: block;
  aspect-ratio: var(--svg-page-aspect, 1120 / 1792);
}
.quran-svg-page__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--mushaf-paper);
}
.quran-svg-page[data-svg-state="loading"] .quran-svg-page__img {
  opacity: 0.72;
}
.quran-svg-page__error {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: var(--text);
  background: color-mix(in srgb, var(--mushaf-paper) 92%, var(--danger));
}
.quran-svg-page__error p {
  margin: 0;
  font-size: clamp(0.82rem, 1.2cqw, 1.05rem);
}
.quran-svg-page .qcf-paper--hit-overlay {
  z-index: 3;
}
.quran-svg-page > .qcf-page,
.quran-svg-page > .qcf-page::after,
.quran-svg-page > .qcf-page .qcf-paper {
  background: transparent;
}
.quran-svg-page > .qcf-page {
  /* Hafs word targets are an interaction layer, never a second page in the
     flex layout. Filling the native SVG canvas keeps hit areas aligned while
     preventing the fixed-ratio QCF wrapper from shrinking either spread leaf. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: inherit;
  box-shadow: none;
}
.quran-svg-page > .qcf-page::after {
  display: none;
}
.quran-svg-page__hits {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.quran-svg-page__ayah-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}
.quran-svg-page__ayah-hit:hover,
.quran-svg-page__ayah-hit:focus-visible {
  fill: color-mix(in srgb, var(--primary) 13%, transparent);
  stroke: color-mix(in srgb, var(--primary) 55%, transparent);
  stroke-width: 2;
}
.quran-svg-page .qcf-paper--hit-overlay .qcf-line::before,
.quran-svg-page .qcf-paper--hit-overlay .qcf-line::after {
  display: none;
}
.quran-svg-page .qcf-paper--hit-overlay .qword-glyph {
  opacity: 0;
}
.quran-svg-page .qcf-paper--hit-overlay .qword:hover .qword-glyph,
.quran-svg-page .qcf-paper--hit-overlay .qword.is-selected .qword-glyph,
.quran-svg-page .qcf-paper--hit-overlay .qword.is-reciting .qword-glyph {
  opacity: 0;
}

.riwayah-select {
  display: inline-flex;
  align-items: center;
}
.riwayah-select select {
  min-width: 88px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 30px 7px 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.qcf-line {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);
  display: flex;
  direction: rtl;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
}

/* The glyph is rendered at the page-fit font size (set by qcf4-fit.js). */
.qcf-line .qword-glyph {
  font-size: var(--qcf-font-size, 64px);
  line-height: 1;
}

/* Surah header + bismillah decorative lines use their own scale. */
.qcf-line--surah {
  z-index: 2;
}
.qcf-line--surah .qword-glyph {
  font-size: calc(var(--qcf-font-size, 64px) * 1.08);
}

/* Decorative surah-name frame (iOS-polished ornamental panel behind the glyph).
   The QCF4_QBSML glyph encodes "سورة <name>"; we frame it like a Mushaf header. */
.qcf-line--surah {
  position: absolute;
}
.qcf-line--surah::before {
  content: "";
  position: absolute;
  inset: 12% 14%;
  border-radius: 999px / 60%;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--mushaf-paper)), var(--mushaf-paper));
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 0 0 2px color-mix(in srgb, #fff 30%, transparent);
  z-index: 0;
}
.qcf-line--surah::after {
  /* ornamental side flourishes */
  content: "";
  position: absolute;
  top: 50%;
  inset: 12% 14%;
  transform: translateY(-50%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent 22%, transparent 78%, color-mix(in srgb, var(--accent) 40%, transparent));
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.qcf-line--surah .qword {
  position: relative;
  z-index: 1;
}
.qcf-line--basmala .qword-glyph {
  font-size: calc(var(--qcf-font-size, 64px) * 0.96);
}

.qword {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--mushaf-ink);
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 4px;
  transition: background-color 0.12s ease;
}
.qword + .qword {
  margin-inline-start: 0.12em;
}
.qword:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.qword:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.qword.is-selected {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
}
.qword.is-reciting {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  outline: 2px solid var(--accent);
}
.qword--end .qword-glyph {
  font-size: calc(var(--qcf-font-size, 64px) * 0.62);
  color: color-mix(in srgb, var(--mushaf-ink) 78%, var(--accent));
}

/* Recitation scoring markers (never modify Quran text — only background/underline) */
.qword.score-correct {
  background: color-mix(in srgb, var(--ok) 26%, transparent);
  box-shadow: inset 0 -0.12em 0 var(--ok);
}
.qword.score-wrong {
  background: color-mix(in srgb, var(--danger) 26%, transparent);
  box-shadow: inset 0 -0.12em 0 var(--danger);
}
.qword.score-missing {
  outline: 2px dashed var(--warn);
  outline-offset: 1px;
  background: color-mix(in srgb, var(--warn) 16%, transparent);
}

/* Extra heard words appear only in the score panel, never inside the line. */
.score-extra-marker {
  display: inline-block;
  min-width: 1em;
  height: 1.2em;
  margin-inline-start: 0.2em;
  background: color-mix(in srgb, #ff8a00 30%, transparent);
  border: 1px dashed #ff8a00;
  border-radius: 4px;
  vertical-align: middle;
}

/* Below-Mushaf real Unicode text section ("نص الصفحة"). */
.page-text {
  width: 100%;
  max-width: 820px;
  margin: 18px auto 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.page-text__title {
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: var(--primary-ink);
}
.page-ayah {
  margin: 8px 0;
  font-size: 1.5rem;
  line-height: 2.1;
  text-align: justify;
  color: var(--text);
  font-family: "Noto Naskh Arabic", "Readex Pro", serif;
}
.page-ayah__link {
  color: inherit;
}
.page-ayah__ref {
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
  padding-inline-end: 4px;
}
.page-ayah__surah {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---- Surah text in reflowed QCF4 glyphs ----
   A QCF4 glyph is a page-specific PUA codepoint, not a Unicode Arabic letter.
   The static builder keeps the Unicode ayah as an accessible fallback, then
   swaps in the Flutter-equivalent glyph run only after its exact fonts load. */
.surah-text {
  max-width: 920px;
  margin: 18px auto 8px;
  padding: 10px 14px;
  background: var(--mushaf-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.surah-ayahs {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.surah-ayah {
  margin: 0;
}
.surah-ayah__link {
  display: block;
  border-radius: 8px;
  color: var(--mushaf-ink);
  padding: 5px 7px;
}
.surah-ayah__link:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  text-decoration: none;
}
.surah-ayah__link:focus-visible {
  outline-offset: 1px;
}
.surah-ayah-text {
  color: var(--text);
  font-family: "Noto Naskh Arabic", "Readex Pro", serif;
  font-size: 1.25rem;
  line-height: 2;
}
.surah-ayah-text__ref {
  color: var(--accent);
  font-weight: 700;
}
/* Keep the fallback visible until initSurahQcf4 has confirmed the exact PUA
   fonts. `unicode-bidi:isolate` prevents surrounding UI text from affecting
   the RLO/PDF used inside each run. */
.surah-qcf4 {
  display: none;
  color: var(--mushaf-ink);
  direction: rtl;
  unicode-bidi: isolate;
  font-size: clamp(1.8rem, 4.5vw, 2.75rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: normal;
  line-height: 1.55;
  text-align: start;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
.surah-text--qcf4.surah-qcf4--ready .surah-qcf4 {
  display: block;
}
.surah-text--qcf4.surah-qcf4--ready .surah-ayah-text {
  display: none;
}
.surah-qcf4__glyph {
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  white-space: normal;
}

/* Reflowed QCF4 text outside the fixed-layout Mushaf. The Unicode fallback
   remains readable until every page-specific font used by the ayah is ready. */
.qcf-text {
  direction: rtl;
  unicode-bidi: isolate;
}
.qcf-text__glyphs {
  display: none;
  direction: rtl;
  unicode-bidi: isolate;
}
.qcf-text--ready .qcf-text__glyphs {
  display: inline;
}
.qcf-text--ready .qcf-text__fallback {
  display: none;
}
.qcf-text__glyph {
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  white-space: normal;
}

/* ---- Immersive open-book (spread mode) ---- */
/* The Mushaf stage reserves a toolbar band so Quran lines never sit under the
   controls while the book still fills the viewport below the header. */
.reader[data-layout="spread"] .mushaf-stage {
  height: calc(100dvh - var(--header-h));
  min-height: 520px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding: 72px 0 28px;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 84%, #ffffff), var(--bg)),
    linear-gradient(90deg, rgba(20, 33, 29, 0.08), transparent 18%, transparent 82%, rgba(20, 33, 29, 0.08));
}
.reader[data-layout="spread"] {
  position: relative;
  min-height: calc(100dvh - var(--header-h));
  gap: 0;
  padding: 0;
}
.reader[data-layout="spread"] .reader-toolbar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  max-width: 94vw;
}
.reader[data-layout="spread"] .crumbs,
.reader[data-layout="spread"] .surah-chips {
  display: none;
}
.reader[data-layout="spread"] .reader-footer {
  max-width: 620px;
  margin: 14px auto 0;
}

/* Real-book spine (center gutter shadow) between the two pages. */
.reader[data-layout="spread"] .mushaf-spread {
  position: relative;
  --spread-gap: 0px;
  width: auto;
  max-width: calc(100vw - 116px);
  align-items: center;
  isolation: isolate;
  filter: drop-shadow(0 24px 34px rgba(20, 33, 29, 0.2));
}
.reader[data-layout="spread"] .mushaf-spread::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 50%;
  width: clamp(34px, 4.2vw, 72px);
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 26%,
    rgba(0, 0, 0, 0.34) 50%,
    rgba(0, 0, 0, 0.08) 74%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: multiply;
}
.reader[data-layout="spread"] .mushaf-spread::after {
  content: "";
  position: absolute;
  top: 1.4%;
  bottom: 1.4%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.68);
  z-index: 6;
  pointer-events: none;
}

.reader[data-layout="spread"] .spread-slot {
  flex: 0 0 auto;
}

/* Page-edge shadows: outer edges darker (the closed edge of the book). */
.reader[data-layout="spread"] .spread-slot:first-child .qcf-page {
  border-radius: 4px 14px 14px 4px;
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.72) inset,
    -9px 0 22px rgba(0, 0, 0, 0.2),
    0 24px 60px -20px rgba(20, 33, 29, 0.4);
}
.reader[data-layout="spread"] .spread-slot:last-child .qcf-page {
  border-radius: 14px 4px 4px 14px;
  box-shadow:
    -1px 0 0 rgba(255, 255, 255, 0.72) inset,
    9px 0 22px rgba(0, 0, 0, 0.2),
    0 24px 60px -20px rgba(20, 33, 29, 0.4);
}
.reader[data-layout="spread"] .spread-slot:first-child .qcf-page::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.13), transparent 12%),
    linear-gradient(270deg, rgba(255, 255, 255, 0.34), transparent 18%);
}
.reader[data-layout="spread"] .spread-slot:last-child .qcf-page::after {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.13), transparent 12%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.34), transparent 18%);
}

/* Flat reading removes the artificial spine/outer-edge treatment while
   retaining a quiet paper boundary for orientation. */
.reader[data-presentation="flat"] .mushaf-spread {
  filter: none;
}
.reader[data-presentation="flat"] .mushaf-spread::before,
.reader[data-presentation="flat"] .mushaf-spread::after,
.reader[data-presentation="flat"] .spread-slot .qcf-page::after {
  display: none;
}
.reader[data-presentation="flat"] .spread-slot .qcf-page,
.reader[data-presentation="flat"] .qcf-page {
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
}

/* Big side page-turn buttons (overlay) for the book feel. */
.book-nav {
  display: none;
}
.reader[data-layout="spread"] .book-nav {
  display: grid;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 24;
  width: 46px;
  height: 64px;
  place-items: center;
  border-radius: 16px;
  font-size: 1.5rem;
  color: var(--text);
  cursor: pointer;
}
.book-nav--prev {
  left: 10px;
}
.book-nav--next {
  right: 10px;
}
@media (max-width: 919px) {
  .reader[data-layout="spread"] .book-nav {
    display: none;
  }
}
.book-nav--prev {
  left: 10px;
}
.book-nav--next {
  right: 10px;
}
/* Floating word-audio mini-control */
.aq-audio-ctrl {
  position: fixed;
  inset-inline-end: 14px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  gap: 8px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: var(--shadow);
}

@media (max-width: 919px) {
  .book-nav {
    display: none;
  }
}
.aq-audio-ctrl[hidden] {
  display: none;
}
.aq-audio-ctrl .btn {
  padding: 6px 12px;
  font-size: 0.85rem;
}

/* ---- Full-screen reader controls ----
   Reader choices stay out of the global dock and open in this focused glass
   flyout. This keeps the dock compact while retaining every Mushaf option. */
body.quran-page .app-header {
  display: none;
}

body.quran-page main {
  min-height: 100dvh;
}

body.quran-page .reader {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  padding: 0;
  gap: 0;
}

body.quran-page .reader .crumbs {
  display: none;
}

body.quran-page .reader[data-layout="spread"] .mushaf-stage,
body.quran-page .reader[data-layout="single"] .mushaf-stage {
  height: 100dvh;
  min-height: 0;
  padding: 16px 24px;
  margin: 0;
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  border-radius: 0;
}

body.quran-page .reader[data-layout] .mushaf-spread {
  width: auto;
  max-width: calc(100vw - 32px);
}

body.quran-page .reader[data-route="quran-page"] .reader-toolbar {
  position: fixed;
  inset-inline-start: 144px;
  top: 50dvh;
  z-index: 120;
  width: min(312px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--glass-border, var(--border));
  border-radius: 26px;
  background: var(--glass-bg-strong, var(--surface));
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  box-shadow:
    0 22px 56px rgba(20, 33, 29, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  transform: translate(16px, -50%) scale(0.94);
  transform-origin: right center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 260ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
    opacity 180ms ease,
    visibility 180ms ease;
}

body.quran-page .reader[data-route="quran-page"][data-tools-open="true"] .reader-toolbar {
  transform: translate(0, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: readerToolsZoomIn 260ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

body.quran-page .reader-toolbar {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
body.quran-page .reader-tool-group,
body.quran-page .reader-page-nav,
body.quran-page .reader-zoom {
  display: grid;
  gap: 6px;
}
body.quran-page .reader-tool-group {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
body.quran-page .reader-tool-group .btn {
  width: auto;
}
body.quran-page .reader-zoom {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
body.quran-page .reader-zoom output {
  min-width: 4.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body.quran-page .reader-zoom__reset {
  grid-column: 1 / -1;
}
body.quran-page .reader-page-nav {
  grid-template-columns: 1fr auto;
  align-items: center;
}
body.quran-page .reader-page-nav label {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.quran-page .reader-page-nav input[type="number"] {
  width: 5.5em;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
body.quran-page .reader-page-nav input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--primary);
}
body.quran-page .reader-toolbar .reader-tool-group .seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.quran-page .reader-toolbar .reader-tool-group .seg button {
  width: 100%;
}
body.quran-page .reader[data-zoomed="true"] .mushaf-stage {
  overflow-x: auto;
}

@keyframes readerToolsZoomIn {
  from { opacity: 0; transform: translate(22px, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}

body.quran-page .reader-toolbar .btn,
body.quran-page .reader-toolbar .riwayah-select,
body.quran-page .reader-toolbar .riwayah-select select,
body.quran-page .reader-toolbar .seg,
body.quran-page .reader-toolbar .seg button {
  width: 100%;
  min-width: 0;
}

body.quran-page .reader-toolbar .btn,
body.quran-page .reader-toolbar .riwayah-select select,
body.quran-page .reader-toolbar .seg button {
  min-height: 46px;
  padding: 9px 12px;
  font-size: 0.94rem;
}

body.quran-page .reader-toolbar .riwayah-select select,
body.quran-page .reader-toolbar .btn {
  border-radius: 14px;
}

body.quran-page .reader-toolbar .seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
}

body.quran-page .reader-toolbar .seg button {
  min-height: 42px;
  padding: 6px 4px;
  border-radius: 12px;
}

body.quran-page .reader-toolbar [data-bookmark][aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000));
  border-color: transparent;
}

body.quran-page .reader-side-toggle {
  position: fixed;
  top: 34%;
  z-index: 75;
  display: grid;
  width: 48px;
  height: 64px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--glass-border-soft, var(--border));
  border-radius: 16px;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
}

body.quran-page .reader-side-toggle--tools {
  inset-inline-start: 12px;
}

body.quran-page .reader-side-toggle--index {
  inset-inline-end: 12px;
}

body.quran-page .reader-side-toggle:hover,
body.quran-page .reader-side-toggle:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
}

body.quran-page .drawer {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

@media (min-width: 920px) {
  body.quran-page .app-dock {
    display: none;
  }

  body.quran-page .reader-side-toggle {
    display: grid;
  }

  body.quran-page .book-nav--next {
    right: 142px;
  }
}

@media (max-width: 919px) {
  body.quran-page .reader[data-route="quran-page"] .reader-toolbar {
    inset-inline-start: 12px;
    transform: translate(16px, -50%) scale(0.94);
    transform-origin: right center;
  }

  body.quran-page .reader[data-route="quran-page"][data-tools-open="true"] .reader-toolbar {
    transform: translate(0, -50%) scale(1);
  }

  body.quran-page .reader-side-toggle {
    top: 30%;
    width: 44px;
    height: 56px;
  }

  body.quran-page .reader-side-toggle--tools {
    inset-inline-start: 8px;
  }

  body.quran-page .reader-side-toggle--index {
    inset-inline-end: 8px;
  }
}

/* ===== ayah.css ===== */
/* src/styles/ayah.css — insight-backed ayah page (§7) + Mushaf strip. */

/* ---- Mushaf strip (§7.2) ---- */
.ayah-strip {
  margin: 12px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ayah-strip__fallback {
  font-family: var(--quran-font, "Amiri", serif);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  line-height: 2;
  text-align: center;
  margin: 0;
  padding: 22px 16px;
  background: var(--mushaf-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
/* Once JS enhances, each line is a short QCF band (full width, shallow). */
.ayah-strip--ready .ayah-strip__fallback {
  display: none;
}
.ayah-strip--ready {
  cursor: pointer;
}
.ayah-strip .qcf-page {
  aspect-ratio: 1120 / 360;
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.ayah-strip .qcf-page::after {
  display: none;
}
.qword--dim {
  opacity: 0.35;
}

/* ---- Ayah page sections (§7.1) ---- */
.ayah-page__h1 {
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  line-height: 1.5;
  text-align: center;
  margin: 8px 0 4px;
}
.ayah-page__h1 .ayah-page__verse {
  font-family: var(--quran-font, "Amiri", serif);
}
.ayah-page__h1 .ayah-page__verse.qcf-text {
  display: inline;
  font-family: inherit;
}
.ayah-card {
  margin: 18px 0;
  padding: 18px;
  background: var(--mushaf-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ayah-card__text {
  margin: 0;
  color: var(--mushaf-ink);
  font-family: var(--quran-font, "Amiri", serif);
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  line-height: 1.8;
  text-align: center;
}
.ayah-card__ref {
  margin: 12px 0 0;
  color: var(--text-muted);
}
.ayah-meta-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 6px 0 18px;
}
.ayah-meta-card .chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
}
.ayah-meta-card .chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.ayah-section {
  margin: 28px 0;
}
.ayah-section__title {
  font-size: 1.4rem;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
}
.ayah-mukhtasar {
  font-size: 1.12rem;
  line-height: 2;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

/* Scholar quotes (aqwal) */
.ayah-aqwal {
  display: grid;
  gap: 12px;
}
.ayah-aqwal__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.ayah-aqwal__quote {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text);
}
.ayah-aqwal__attr {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}
.ayah-aqwal__topic {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
  margin-inline-start: 6px;
}

/* Detailed commentary (wafi) */
.ayah-wafi__section {
  margin: 0 0 18px;
}
.ayah-wafi__h3 {
  font-size: 1.15rem;
  margin: 0 0 8px;
  color: var(--text);
}
.ayah-wafi__body {
  line-height: 2;
  color: var(--text);
  margin: 0;
}
.ayah-wafi__list {
  margin: 0;
  padding-inline-start: 20px;
  line-height: 2;
}

/* Inline reference superscripts: [b:ID] -> numbered links */
.ref-mark {
  font-size: 0.7em;
  vertical-align: super;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  margin-inline-start: 1px;
}
.ref-mark:hover {
  text-decoration: underline;
}

/* FAQ */
.ayah-faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.ayah-faq__item summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.ayah-faq__item summary::-webkit-details-marker {
  display: none;
}
.ayah-faq__item summary::before {
  content: "❔ ";
}
.ayah-faq__answer {
  padding: 0 16px 14px;
  line-height: 1.9;
  color: var(--text-muted);
}

/* References list */
.ayah-refs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ayah-refs li {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px dashed var(--border);
}
.ayah-refs .ayah-refs__num {
  display: inline-block;
  min-width: 1.6em;
  color: var(--accent);
  font-weight: 600;
}

/* Related ayahs */
.ayah-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ayah-related a {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
}
.ayah-related a:hover {
  border-color: var(--accent);
}

/* Prev/next + sibling ayahs nav */
.ayah-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 26px 0 8px;
}
.ayah-nav a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.ayah-siblings {
  margin: 18px 0 30px;
}
.ayah-siblings__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ayah-siblings__list a {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
}
.ayah-siblings__list a.is-current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ayah-methodology-link {
  display: block;
  margin: 8px 0 30px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

@media print {
  .ayah-strip--ready {
    cursor: default;
  }
}

/* ===== search.css ===== */
/* src/styles/search.css — Quran search result cards and Surah-match rail. */

.search-surah-matches {
  margin: 16px 0 12px;
}
.search-surah-matches__label {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}
.search-surah-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 3px 2px 9px;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}
.search-surah-chips::-webkit-scrollbar {
  display: none;
}
.search-surah-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  scroll-snap-align: start;
  white-space: nowrap;
}
.search-surah-chip__index {
  display: inline-grid;
  width: 1.55em;
  height: 1.55em;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary-ink);
  font-size: 0.8em;
  font-weight: 800;
}
.quran-search-results {
  display: grid;
  gap: 8px;
}
/* The generic clip row reserves a 40px audio-play column. Quran results do
   not have that control, so they need their own full-width content layout. */
.clip-row--quran {
  display: block;
  padding: 13px 15px;
  color: var(--text);
}
.clip-row--quran:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  text-decoration: none;
}
.quran-search-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quran-search-result__title {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--primary-ink);
  font-weight: 700;
}
.quran-search-result__ref {
  color: var(--accent);
  white-space: nowrap;
}
.quran-search-result__page {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}
.quran-search-result__ayah {
  display: -webkit-box;
  margin: 9px 0 0;
  overflow: hidden;
  color: var(--text);
  font-family: "Noto Naskh Arabic", "Readex Pro", serif;
  font-size: 1.18rem;
  line-height: 1.9;
  text-align: start;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* ===== player.css ===== */
/* src/styles/player.css — global Mazameer/Quran audio player. */

.aq-player {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 120;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
}
.aq-player__art {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
}
.aq-player__meta {
  min-width: 0;
}
.aq-player__title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aq-player__sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aq-player__ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.aq-player__ctrl button {
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
}
.aq-player__progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  accent-color: var(--primary);
}
.aq-player[hidden] {
  display: none;
}

/* ===== tajweed.css ===== */
/* src/styles/tajweed.css — AI recording / recitation practice UI. */

.tilawah {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tilawah__ayah {
  font-size: 1.9rem;
  line-height: 2.2;
  text-align: justify;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.tilawah__score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.tilawah__score-pct {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
}
.rec-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  margin-inline-end: 6px;
}
.rec-dot--live {
  background: var(--danger);
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
.privacy-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 10px;
}
.word-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  direction: rtl;
}
.word-list .w {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 1.1rem;
  background: var(--surface-2);
}
.word-list .w.correct {
  color: var(--ok);
  border-bottom: 2px solid var(--ok);
}
.word-list .w.wrong {
  color: var(--danger);
  border-bottom: 2px solid var(--danger);
}
.word-list .w.missing {
  color: var(--warn);
  text-decoration: line-through;
}
.word-list .w.extra {
  color: #ff8a00;
  border: 1px dashed #ff8a00;
}

/* ===== mazameer.css ===== */
/* src/styles/mazameer.css — Mazameer catalog UI. */

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
}
.card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--surface-2);
}
.card__body {
  padding: 8px 10px;
}
.card__title {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card__sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.card__era {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.75;
  margin: 0;
}

/* Reader card: same base card, with a rank badge slot + avatar wrapper that
   doesn't break the flex layout (display:contents keeps children direct). */
.reader-card {
  scroll-snap-align: start;
}
.avatar-wrap {
  display: contents;
}
.reader-card__rank {
  position: absolute;
  inset-inline-start: 8px;
  inset-block-start: 8px;
  z-index: 2;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

/* Monogram avatar: deterministic initials + hue, used whenever a reciter has
   no portrait (the common case — see src/mazameer/avatar.js). */
.avatar-mono {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    150deg,
    hsl(var(--mono-h) 62% 44%),
    hsl(calc(var(--mono-h) + 28) 70% 30%)
  );
  color: #fff;
  position: relative;
  overflow: hidden;
}
.avatar-mono::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 55%);
}
.avatar-mono span {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: clamp(1.1rem, 5vw, 1.9rem);
  font-family: "Cairo", "Tajawal", sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.reciter-hero__img.avatar-mono span {
  font-size: 2.2rem;
}
.clips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clip-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.clip-row__play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}
.clip-row__title {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clip-row__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.search-tabs {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  margin: 8px 0;
}
.search-tabs button {
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.search-tabs button[aria-selected="true"] {
  background: var(--primary);
  color: #fff;
}
.reciter-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 18px;
  border-radius: 22px;
}
.reciter-hero__img {
  width: 120px;
  height: 120px;
  border-radius: 18px;
  object-fit: cover;
  flex: 0 0 auto;
}
.stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 8px 0;
}
.stat b {
  display: block;
  font-size: 1.2rem;
  color: var(--primary-ink);
}
.empty-state {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
}

/* ---- Mazameer hero (home + search) ---- */
.mazameer-page .maz-hero {
  border-radius: 26px;
  padding: 22px 20px 24px;
  margin: 12px 0 22px;
  text-align: center;
}
.maz-hero h1 {
  margin: 0 0 4px;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
}
.maz-hero__tagline {
  color: var(--text-muted);
  margin: 0 0 10px;
}
.maz-hero .stats-row {
  justify-content: center;
}
.maz-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 14px auto 0;
}
.maz-search__icon {
  position: absolute;
  inset-inline-start: 16px;
  color: var(--text-muted);
  pointer-events: none;
  font-size: 1.1rem;
}
.maz-search input[type="search"] {
  padding-inline-start: 42px;
  border-radius: 999px;
}
.maz-search .btn {
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- Section headers with "see all" link ---- */
.maz-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.maz-section-head h2 {
  margin-bottom: 0;
}
.maz-see-all {
  font-size: 0.9rem;
  color: var(--primary-ink);
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Trending / spotlight horizontal rail ---- */
.maz-spotlight {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  margin-bottom: 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.maz-spotlight .card {
  flex: 0 0 150px;
  width: 150px;
}
.maz-spotlight::-webkit-scrollbar {
  height: 6px;
}
.maz-spotlight::-webkit-scrollbar-thumb {
  background: var(--glass-border-soft, var(--border));
  border-radius: 999px;
}

/* ---- A-Z index bar (search page) ---- */
.maz-index-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 18px;
}
.chip--letter {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
}
.chip--toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.chip--toggle input {
  accent-color: var(--primary);
}

/* ---- Alphabetical letter groups (search page full list) ---- */
.maz-letter-group {
  margin: 18px 0;
  scroll-margin-top: calc(var(--header-h, 56px) + 12px);
}
.maz-letter-group__h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  margin: 0 0 10px;
}
.maz-letter-group__badge {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, #000));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 35%, transparent);
}
.maz-letter-group__count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ===== book.css ===== */
/* src/styles/book.css — كتاب «قال الله» (/book/). Uses the site design tokens
   from base.css; literary reading surface + researcher drill-down. */

/* Tafseer prose font — matches the mobile app, which renders tafseer body text
   in Scheherazade New (Flutter AppFontFamily.tafseerBody). Shipped as TTF
   (browsers render TTF; woff2 conversion tool was unavailable at build). */
@font-face {
  font-family: "Scheherazade New";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/ScheherazadeNew-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Scheherazade New";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/ScheherazadeNew-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Scheherazade New";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/ScheherazadeNew-Bold.ttf") format("truetype");
}

/* Prose surfaces use the tafseer body font; UI chrome (badges, takhrij meta,
   nav) stays on the inherited Readex Pro. Scheherazade New has a small
   x-height, so size/line-height are bumped vs the generic body. */
.book-story,
.book-qawl__canon,
.book-witq {
  font-family: "Scheherazade New", "Amiri", "Noto Naskh Arabic", serif;
}

/* Inline Quran quotes inside tafseer prose (the source's {…} fences). Rendered
   as distinct Quran text (naskh + accent), mirroring the mobile app's colored
   ayah treatment for embedded quotes. */
.book-ayah-inline {
  color: var(--primary);
  font-family: var(--quran-font, "Amiri", "Noto Naskh Arabic", serif);
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .book-ayah-inline {
    color: var(--accent);
  }
}

/* Header ayah rendered in real QCF4 glyphs (reusing .qcf-text from mushaf.css). */
.book-ayah {
  display: block;
  text-align: center;
  margin: 22px 0;
  padding: 18px 14px;
  border-block: 1px double var(--accent);
  color: var(--primary);
}
.book-ayah .qcf-text__fallback,
.book-ayah .qcf-text__glyphs {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.9;
}

.book-cover {
  text-align: center;
  padding: 48px 16px 28px;
}
.book-cover h1 {
  font-size: 44px;
  color: var(--accent);
  margin: 0 0 8px;
}
.book-cover .book-tagline {
  color: var(--text-muted);
  font-size: 17px;
}
.book-pilot-note {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 14.5px;
  color: var(--text-muted);
  margin-top: 12px;
}

.book-story {
  font-size: 19px;
  line-height: 2.15;
}
.book-story p {
  text-align: justify;
  margin: 0 0 1.15em;
}
.book-s[data-book-cites] {
  cursor: pointer;
  border-bottom: 1px dotted var(--accent);
  transition: background 0.15s;
}
.book-s[data-book-cites]:hover,
.book-s[data-book-cites]:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}
.book-s--wasl {
  color: var(--text-muted);
}

.book-qawl {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  margin: 12px 0;
}
.book-qawl__canon {
  font-size: 18px;
  line-height: 2;
}
.book-qawl__takhrij {
  color: var(--text-muted);
  font-size: 15.5px;
  margin-top: 6px;
}
.book-qawl__takhrij b {
  color: var(--accent);
}
.book-badge {
  display: inline-block;
  font-size: 12.5px;
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 9px;
  margin-inline-start: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.book-qawl__wits summary {
  cursor: pointer;
  color: var(--primary);
  font-size: 15.5px;
}
.book-witq {
  background: var(--surface-2);
  border-radius: calc(var(--radius) - 4px);
  padding: 8px 12px;
  margin: 6px 0;
  font-size: 16px;
  line-height: 1.95;
}
.book-witq__src {
  color: var(--text-muted);
  font-size: 13.5px;
}

/* researcher mode */
.book-research {
  display: none;
}
body.book-research-mode .book-research {
  display: block;
}
body.book-research-mode .book-story,
body.book-research-mode .book-story-hint {
  display: none;
}
.book-cov {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 10px 0;
}
.book-cov td,
.book-cov th {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: right;
}

/* drill-down bottom panel */
.book-panel {
  position: fixed;
  inset: auto 0 0 0;
  max-height: 72vh;
  overflow: auto;
  background: var(--surface);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow);
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  z-index: 60;
  display: none;
}
.book-panel.is-open {
  display: block;
}
.book-panel__close {
  float: left;
  background: none;
  border: 0;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
}

.book-toc a {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 8px 0;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
}
.book-toc a:hover {
  border-color: var(--accent);
}
.book-toc .book-toc__preview {
  color: var(--primary);
}
.book-toc .book-toc__count {
  color: var(--text-muted);
  font-size: 13.5px;
}

.book-tree ul {
  list-style: none;
  padding-inline-start: 20px;
}
.book-tree li {
  margin: 4px 0;
}
.book-tree summary {
  cursor: pointer;
}
.book-tree .book-tree__count {
  color: var(--text-muted);
  font-size: 13.5px;
}

.book-story-hint {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 14.5px;
  color: var(--text-muted);
}

/* ===== glass.css ===== */
/* src/styles/glass.css — iOS 26 "Liquid Glass" design system.
   Translucent materials with backdrop blur + saturate, specular edge highlights,
   and depth. Applied to header, toolbar, panels, player, cards, chips, buttons.
   Respects prefers-reduced-motion (see motion.css). */

:root {
  /* Glass material tokens (light/paper theme) */
  --glass-bg: color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--surface) 78%, transparent);
  --glass-blur: 22px;
  --glass-saturate: 1.8;
  --glass-border: color-mix(in srgb, #ffffff 55%, transparent);
  --glass-border-soft: color-mix(in srgb, #ffffff 28%, transparent);
  --glass-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 60%, transparent) inset,
    0 8px 30px rgba(20, 33, 29, 0.12);
  --glass-highlight:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 42%, transparent) 0%,
      color-mix(in srgb, #ffffff 0%, transparent) 38%,
      color-mix(in srgb, #ffffff 0%, transparent) 100%
    );
  --specular:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 35%);
  --ring: color-mix(in srgb, var(--primary) 30%, transparent);
}

[data-theme="dark"] {
  --glass-bg: color-mix(in srgb, var(--surface) 52%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--surface) 68%, transparent);
  --glass-border: color-mix(in srgb, #ffffff 16%, transparent);
  --glass-border-soft: color-mix(in srgb, #ffffff 8%, transparent);
  --glass-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) inset,
    0 10px 34px rgba(0, 0, 0, 0.5);
  --glass-highlight:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 40%);
  --specular: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 40%);
}

/* Base glass material. Layered: translucent fill + specular top edge + ring. */
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border-soft);
  isolation: isolate;
}
/* Specular highlight sheen on top edge + inner ring. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
  opacity: 0.9;
}
/* Hairline bright border ring (liquid glass edge). */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-border);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
.glass > * {
  position: relative;
  z-index: 1;
}

/* ---- Header ---- */
.app-header {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-border-soft);
  box-shadow: 0 1px 0 var(--glass-border) inset, 0 6px 20px rgba(20, 33, 29, 0.06);
}
.app-header__brand {
  background: linear-gradient(135deg, var(--primary-ink), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Glass nav buttons + segmented control */
.app-header nav a,
.app-header nav button {
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-header nav a:hover {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  text-decoration: none;
}
.app-header nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}

.reader-toolbar .seg {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
}
.reader-toolbar .seg button {
  transition: background 0.18s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s ease;
}
.reader-toolbar .seg button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000));
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 45%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

/* Buttons: glass pill with press zoom (motion.css adds :active scale). */
.btn {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
}
.btn:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
}
.btn--primary {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #000));
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 40%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.btn--primary:hover {
  filter: brightness(1.05);
}

/* ---- Mushaf paper: subtle glass tray holding the page ---- */
.mushaf-stage {
  padding: 14px 6px;
  border-radius: 22px;
  margin: 4px 0;
}
.mushaf-spread {
  --spread-gap: 18px;
}
.qcf-page {
  border-radius: 14px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.5) inset,
    0 24px 60px -20px rgba(20, 33, 29, 0.35),
    0 8px 24px rgba(20, 33, 29, 0.16);
}
.reader-footer .btn[aria-disabled="true"] {
  opacity: 0.45;
}

/* Surah chips on a page */
.surah-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 820px;
  margin: 10px auto;
}
.chip {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--primary-ink);
  font-size: 0.9rem;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease;
}
.chip:hover {
  background: var(--glass-bg-strong);
  text-decoration: none;
}
.chip small {
  color: var(--text-muted);
}

/* ---- Bottom-sheet panels (glass) ---- */
.panel {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(30px) saturate(2);
  backdrop-filter: blur(30px) saturate(2);
  border: 1px solid var(--glass-border);
  box-shadow: 0 -10px 40px rgba(20, 33, 29, 0.22), 0 1px 0 var(--glass-border) inset;
}
.panel__bar {
  border-bottom: 1px solid var(--glass-border-soft);
}
.panel__bar::after {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--glass-border);
  margin: 8px auto 0;
}

/* ---- Global player (glass) ---- */
.aq-player {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(28px) saturate(2);
  backdrop-filter: blur(28px) saturate(2);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -10px 36px rgba(20, 33, 29, 0.2);
}
.aq-player__ctrl button {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Cards (Mazameer / home) ---- */
.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
  border-radius: 20px;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 40px rgba(20, 33, 29, 0.2);
  border-color: var(--glass-border);
}
.card:active {
  transform: translateY(-1px) scale(0.99);
}

/* Clip rows */
.clip-row {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
}
.clip-row__play {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #000));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Drawer (glass) */
.drawer {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(28px) saturate(2);
  backdrop-filter: blur(28px) saturate(2);
  border-inline-end: 1px solid var(--glass-border-soft);
  box-shadow: 12px 0 40px rgba(20, 33, 29, 0.22);
}
.drawer__head {
  border-bottom: 1px solid var(--glass-border-soft);
}

/* Search tabs */
.search-tabs {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
}

/* Home search box */
.home-search {
  display: flex;
  gap: 8px;
  margin: 18px 0;
  max-width: 560px;
}
.home-search input,
input[type="search"],
#search-input,
#mazameer-q {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 1rem;
  width: 100%;
}
input[type="search"]:focus,
#search-input:focus,
#mazameer-q:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 4px var(--ring), var(--glass-shadow);
}

/* Home hero */
.home h1 {
  background: linear-gradient(135deg, var(--primary-ink), var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Page-text section */
.page-text {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
}

/* Reciter hero image */
.reciter-hero__img {
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border-soft);
}

/* FAB / floating audio control */
.aq-audio-ctrl {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ---- Icon button + settings popover ---- */
.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
}
.settings-pop {
  width: 240px;
  padding: 14px;
  border-radius: 18px;
  z-index: 130;
  transform-origin: right center;
  animation: dockPopoverIn var(--dur, 0.26s) var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@keyframes dockPopoverIn {
  from {
    opacity: 0;
    transform: translateX(10px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.settings-pop__title {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--primary-ink);
}
.settings-pop__themes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.theme-pill {
  border: 1px solid var(--glass-border-soft);
  background: var(--glass-bg);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 8px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: transform var(--dur-fast, 0.16s) var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
    background 0.18s ease;
}
.theme-pill:hover {
  background: var(--glass-bg-strong);
}
.theme-pill:active {
  transform: scale(0.95);
}
.theme-pill.is-active {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #000));
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
}

/* Continue-reading card (home) */
.continue-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  margin: 14px 0;
  color: var(--text);
  flex-wrap: wrap;
}
.continue-card:hover {
  text-decoration: none;
  filter: brightness(1.02);
}
.continue-card__icon {
  font-size: 1.6rem;
}
.continue-card span span,
.continue-card__sub {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.continue-card__arrow {
  margin-inline-start: auto;
  font-size: 1.4rem;
  color: var(--primary);
}
.reading-progress {
  flex-basis: 100%;
  height: 6px;
  background: var(--glass-border-soft);
  border-radius: 999px;
  overflow: hidden;
}
.reading-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 999px;
  transition: width 0.5s var(--ease-out, ease);
}

/* ===== motion.css ===== */
/* src/styles/motion.css — iOS 26-style spring motion + zoom/press effects.
   Spring curves, word/button/card press zoom, panel zoom-from-bottom,
   page-turn zoom. Honors prefers-reduced-motion. */

:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.16s;
  --dur: 0.26s;
}

/* Universal press feedback (zoom-down on active). */
.btn:active,
.chip:active,
.card:active,
.clip-row__play:active,
.app-header nav a:active,
.reader-toolbar .seg button:active,
.aq-player__ctrl button:active,
.drawer .index-row:active {
  transform: scale(0.96);
}

/* Quran word press: subtle zoom + lift (the QCF hit target). */
.qword {
  transition:
    transform var(--dur-fast) var(--spring),
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}
.qword:active {
  transform: scale(0.9);
}
.qword.is-selected {
  box-shadow: 0 0 0 2px var(--ring), 0 6px 16px rgba(20, 33, 29, 0.18);
}
.qword.is-reciting {
  animation: recitePulse 1s ease-in-out infinite;
}
@keyframes recitePulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  50% {
    box-shadow: 0 0 0 3px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent);
  }
}

/* Card hover lift already in glass.css; add smooth return. */
.card,
.clip-row {
  transition: transform var(--dur) var(--spring), box-shadow var(--dur) ease, border-color var(--dur) ease;
}

/* Mushaf page entrance: zoom-in on every (re)render. */
@keyframes pageZoomIn {
  from {
    opacity: 0;
    transform: scale(0.985) translateY(6px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}
.qcf-page {
  animation: pageZoomIn var(--dur) var(--ease-out);
}

/* Spread/page transition when navigating (apply to the stage). */
.mushaf-stage.is-navigating .qcf-page {
  animation: pageZoomIn var(--dur) var(--ease-out);
}

/* Bottom-sheet panel: zoom + slide from bottom with spring. */
@keyframes panelRise {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.panel {
  animation: panelRise var(--dur) var(--spring);
  transform-origin: bottom center;
}
@keyframes backdropFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.panel-backdrop,
.drawer-backdrop {
  animation: backdropFade var(--dur) ease;
}

/* Drawer slide-in. */
@keyframes drawerIn {
  from {
    transform: translateX(-12px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
[dir="rtl"] .drawer {
  animation: drawerIn var(--dur) var(--ease-out);
}

/* Player pop-in. */
@keyframes playerPop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.aq-player {
  animation: playerPop var(--dur) var(--spring);
}

/* Recite dot pulse (already keyframes pulse in tajweed.css); keep. */

/* Score accuracy number pop. */
.tilawah__score-pct {
  animation: numPop 0.5s var(--spring);
}
@keyframes numPop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Home hero subtle entrance. */
.home h1,
.home p,
.home-search,
.home .grid {
  animation: fadeUp var(--dur) var(--ease-out) both;
}
.home .grid {
  animation-delay: 0.06s;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus ring uses theme ring color already. */

/* Reduced motion: disable all decorative animation. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .qcf-page,
  .panel,
  .aq-player,
  .home h1 {
    animation: none !important;
  }
}

/* ===== print.css ===== */
/* src/styles/print.css — print-friendly output. */

@media print {
  .app-header,
  .reader-toolbar,
  .reader-footer,
  .aq-player,
  .drawer,
  .drawer-backdrop,
  .panel,
  .panel-backdrop {
    display: none !important;
  }
  .qcf-page {
    box-shadow: none;
    page-break-inside: avoid;
  }
  body {
    background: #fff;
  }
}