@font-face {
  font-family: Vazirmatn;
  src: url("fonts/Vazirmatn-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: UthmanTaha;
  src: url("fonts/UthmanTN_v2-0.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: KFGQPCHafs;
  src: url("fonts/KFGQPC-Hafs-v18.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

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

:root {
  --reader-scale: 1;
  --paper: #fdfbf6;
  --canvas: #f3f0e8;
  --ink: #20312e;
  --muted: #65736d;
  --deep: #0e3a31;
  --deep-dark: #09281f;
  --gold: #a98235;
  --gold-soft: #dcc595;
  --rule: #e8dfcf;
  --verse: #fbf5e7;
  --highlight: #fff0bb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Vazirmatn, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  direction: rtl;
  hyphens: none;
  -webkit-font-smoothing: antialiased;
}
:lang(ar) { font-family: UthmanTaha, AmiriQuran, serif; }
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
button { font: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(9 40 31 / 96%);
  color: #fff9eb;
  border-bottom: 1px solid rgb(220 197 149 / 42%);
  box-shadow: 0 8px 25px rgb(8 33 27 / 16%);
}
.header-inner {
  max-width: 1190px;
  margin: 0 auto;
  padding: 10px clamp(18px, 4vw, 38px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { text-decoration: none; font-size: 1.03rem; font-weight: 700; white-space: nowrap; }
.brand small { display: block; color: #dec998; font-size: .71rem; font-weight: 500; line-height: 1.25; }
.header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-actions a, .header-actions button {
  border: 1px solid rgb(255 248 229 / 35%);
  color: #fff9eb;
  background: transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 12px;
  white-space: nowrap;
  font-size: .82rem;
}
.header-actions a:hover, .header-actions button:hover { background: rgb(255 248 229 / 13%); }

.hero {
  position: relative;
  overflow: hidden;
  color: #fff9e9;
  background:
    radial-gradient(circle at 18% 12%, rgb(198 154 67 / 18%) 0, transparent 28%),
    radial-gradient(circle at 86% 82%, rgb(236 212 151 / 9%) 0, transparent 33%),
    linear-gradient(135deg, #16564a, var(--deep) 48%, var(--deep-dark));
  border-bottom: 5px solid var(--gold);
}
.hero::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -55px;
  width: 360px;
  height: 360px;
  border: 1px solid rgb(224 193 126 / 21%);
  transform: rotate(45deg);
  pointer-events: none;
}
.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(42px, 8vw, 78px) 24px clamp(48px, 9vw, 88px);
  position: relative;
  text-align: center;
}
.hero-ornament { color: #e2c481; font-size: 2.5rem; line-height: 1; margin-bottom: 18px; }
.hero-eyebrow { color: #e9d8ad; font-size: .85rem; font-weight: 600; }
.hero h1 { margin: 7px 0 12px; font-size: clamp(2.1rem, 5vw, 3.7rem); font-weight: 750; line-height: 1.35; }
.hero p { max-width: 620px; margin: 0 auto; color: #f0eadc; line-height: 2; }
.hero-rule { display: flex; align-items: center; gap: 13px; justify-content: center; margin: 18px auto 0; color: #e0bf78; }
.hero-rule::before, .hero-rule::after { content: ""; width: 70px; height: 1px; background: rgb(224 191 120 / 65%); }

.book-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 218px;
  gap: 28px;
  max-width: 1190px;
  margin: -26px auto 70px;
  padding: 0 20px;
  position: relative;
}
.book-content {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 45px rgb(31 49 39 / 9%);
  border-radius: 18px;
  padding: clamp(26px, 5vw, 68px);
}
.book-rail { align-self: start; position: sticky; top: 95px; }
.rail-card {
  background: #fffcf5;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 7px 22px rgb(31 49 39 / 6%);
}
.rail-heading { color: var(--deep); font-size: .9rem; font-weight: 800; margin: 0 0 11px; }
.rail-link { display: block; color: var(--muted); font-size: .84rem; text-decoration: none; padding: 4px 0; }
.rail-link:hover { color: var(--deep); text-decoration: underline; }
.ayah-nav { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
.ayah-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid #dbcaa5;
  border-radius: 50%;
  color: var(--deep);
  background: #fffaf0;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
}
.ayah-nav a:hover, .ayah-nav a.active { color: white; background: var(--deep); border-color: var(--deep); }
.rail-hint { color: var(--muted); font-size: .77rem; line-height: 1.8; margin: 0; }
.rail-clear {
  border: 0;
  border-bottom: 1px solid var(--gold);
  background: transparent;
  color: var(--deep);
  cursor: pointer;
  padding: 3px 0;
  font-size: .76rem;
}
.reader-note {
  color: #5a665f;
  background: #f7f2e5;
  border-right: 3px solid var(--gold);
  border-radius: 6px;
  padding: 13px 17px;
  font-size: .84rem;
  line-height: 1.95;
  margin-bottom: 38px;
}
.book-content h2 {
  color: var(--deep);
  font-weight: 750;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.5;
  margin: 50px 0 22px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 110px;
}
.book-content h2::before { content: "۞"; color: var(--gold); font-size: .73em; margin-left: 10px; }
.passage-heading {
  color: var(--deep);
  background: #f7f1e3;
  border-right: 3px solid var(--gold);
  border-radius: 7px;
  padding: 10px 15px;
  margin: 35px 0 19px;
  font-size: 1.08rem;
  font-weight: 700;
  scroll-margin-top: 110px;
}
.section-heading {
  color: #45594f;
  font-size: 1rem;
  font-weight: 750;
  margin: 31px 0 13px;
  padding-right: 12px;
  border-right: 2px solid var(--gold-soft);
  scroll-margin-top: 110px;
}
.page-marker { color: #998b71; font-size: .72rem; margin: 26px 0 11px; text-align: left; }
.page-marker::before { content: "— "; color: var(--gold); }
.prose {
  font-size: calc(1.075rem * var(--reader-scale));
  line-height: 2.11;
  margin: 0 0 1.15em;
  text-align: justify;
  scroll-margin-top: 115px;
}
.joined span[id] { scroll-margin-top: 115px; }
.source-anchor { display: block; height: 0; overflow: hidden; scroll-margin-top: 115px; }
.arabic-inline {
  font-family: UthmanTaha, AmiriQuran, serif;
  font-size: 1.12em;
  line-height: 1.7;
  unicode-bidi: isolate;
}
.verse {
  position: relative;
  margin: 30px 0;
  padding: 26px clamp(19px, 4vw, 38px) 22px;
  color: var(--ink);
  background: linear-gradient(155deg, #fdf9ef, var(--verse));
  border: 1px solid #e5d6b6;
  border-right: 4px solid var(--gold);
  border-radius: 15px;
  box-shadow: 0 8px 24px rgb(57 49 27 / 5%);
  scroll-margin-top: 110px;
}
.verse::after { content: "◆"; display: block; color: #b89b59; font-size: .55rem; text-align: center; margin: 10px 0 1px; }
.verse-number { display: block; text-align: center; color: #856c35; font-size: .74rem; font-weight: 700; }
.verse-arabic {
  margin: 13px auto 5px;
  font-family: KFGQPCHafs, AmiriQuran, serif;
  font-size: clamp(1.75rem, 3.7vw, 2.32rem);
  line-height: 2.35;
  text-align: center;
  direction: rtl;
  unicode-bidi: isolate;
}
.verse-meaning { margin: 0 auto; max-width: 690px; font-size: calc(1.03rem * var(--reader-scale)); line-height: 2; text-align: center; }
.related { background: var(--highlight) !important; box-shadow: 0 0 0 4px var(--highlight); border-radius: 3px; }
.prose.related { border-radius: 12px; }

.quran-wrap { max-width: 900px; margin: -25px auto 70px; padding: 0 20px; position: relative; }
.quran-intro {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 15px 42px rgb(31 49 39 / 8%);
  padding: 20px 27px;
  color: var(--muted);
  font-size: .86rem;
  margin-bottom: 17px;
}
.quran-grid { display: grid; gap: 13px; }
.quran-card {
  display: block;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-right: 4px solid var(--gold);
  border-radius: 13px;
  padding: 19px clamp(18px, 4vw, 33px);
  box-shadow: 0 5px 19px rgb(31 49 39 / 5%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.quran-card:hover { transform: translateY(-2px); box-shadow: 0 11px 26px rgb(31 49 39 / 12%); border-color: #c9ad75; }
.quran-card-header { display: flex; align-items: center; justify-content: space-between; color: #866b34; font-size: .76rem; font-weight: 700; }
.quran-card-arabic {
  display: block;
  font-family: KFGQPCHafs, AmiriQuran, serif;
  font-size: clamp(1.7rem, 3.4vw, 2.15rem);
  line-height: 2.2;
  text-align: center;
  direction: rtl;
  unicode-bidi: isolate;
  margin: 4px auto 2px;
}
.quran-card-meaning { display: block; text-align: center; font-size: .95rem; color: var(--muted); }
.quran-card-action { display: block; text-align: left; color: var(--deep); font-size: .76rem; font-weight: 700; margin-top: 6px; }

@media (max-width: 820px) {
  .book-layout { display: block; margin-top: -19px; padding: 0 12px; }
  .book-rail { position: static; margin-top: 16px; }
  .rail-card { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; }
  .rail-heading, .rail-hint { display: none; }
  .ayah-nav { margin: 0; }
  .header-inner { padding-inline: 13px; }
  .header-actions { gap: 6px; }
  .header-actions a, .header-actions button { font-size: .72rem; padding: 3px 8px; }
  .prose { text-align: right; font-size: calc(1.02rem * var(--reader-scale)); }
}
@media (max-width: 480px) {
  .brand { font-size: .9rem; }
  .header-actions .secondary-action { display: none; }
  .book-content { padding: 23px 18px; }
  .hero-inner { padding-inline: 17px; }
  .quran-wrap { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .quran-card { transition: none; }
}
@media print {
  .site-header, .book-rail, .header-actions { display: none; }
  body { background: white; color: black; }
  .hero { color: black; background: white; border-bottom: 1pt solid var(--gold); }
  .book-layout, .quran-wrap { display: block; margin: 0; padding: 0; }
  .book-content { box-shadow: none; border: 0; padding: 0; }
  .verse { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
}

.publication-status { padding: 8px 20px; background: #fff0bb; color: #20312e;
  text-align: center; font: 600 .85rem Vazirmatn, sans-serif; }
.part-navigation { display: flex; justify-content: space-between; gap: 16px;
  margin: 64px 0 20px; padding-top: 20px; border-top: 1px solid var(--rule); }
.part-navigation a { color: var(--deep); font-weight: 700; }
.site-list { max-width: 860px; margin: 40px auto; padding: 0 20px 80px; display: grid; gap: 18px; }
.site-list .quran-card { display: block; }
.site-list .quran-card strong { display: block; font-size: 1.2rem; }
.quran-source-credit { max-width: 900px; margin: 40px auto 20px; padding: 0 20px;
  color: var(--muted); font-size: .8rem; text-align: center; }
.quran-source-credit a { color: var(--deep); }
.site-search-snippet .arabic-inline { font-family: KFGQPCHafs, UthmanTaha, AmiriQuran, serif; }
body[data-site-part] :is(.verse, .prose, .joined span[id], .source-anchor,
  .chapter-heading, .passage-heading, .section-heading) {
  scroll-margin-top: var(--reader-header-offset, 115px);
}
.reader-dock[hidden], .reader-sheet[hidden], #continue-reading[hidden],
#library-preview[hidden], .highlight-toolbar[hidden], .library-current[hidden],
[data-library-open][hidden] { display: none !important; }
.reader-return[hidden], .ayah-return[hidden] { display: none !important; }
#site-search-more[hidden], #search-history[hidden], #search-history-more[hidden],
.quran-card[hidden] { display: none !important; }
html.reader-modal-locked { overflow: hidden; overscroll-behavior: none; }
body.reader-modal-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.site-header .header-actions a, .site-header .header-actions button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.book-rail .rail-link { display: flex; align-items: center; min-height: 44px; }
.book-rail .ayah-nav a { min-width: 44px; height: 44px; }
.book-rail .rail-clear { min-height: 44px; }
.reader-dock {
  position: fixed;
  z-index: 40;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(650px, calc(100% - 20px));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 48px 48px;
  gap: 4px;
  padding: 8px;
  border: 1px solid #d8c8a8;
  border-radius: 18px;
  background: rgb(253 251 246 / 97%);
  box-shadow: 0 12px 38px rgb(16 44 34 / 26%);
  backdrop-filter: blur(12px);
}
.reader-dock button {
  min-width: 0;
  min-height: 48px;
  padding: 4px 6px;
  border: 0;
  border-radius: 11px;
  color: var(--deep);
  background: transparent;
  font: 700 .83rem Vazirmatn, sans-serif;
  line-height: 1.25;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.reader-dock button:hover, .reader-dock button:focus-visible { background: #f0e8d6; }
.reader-dock button:disabled { opacity: .45; cursor: not-allowed; }
.reader-dock [data-reader-step="-1"] { grid-column: 1; grid-row: 1; }
.reader-dock [data-reader-open="pages"] { grid-column: 2 / 5; grid-row: 1; }
.reader-dock [data-reader-step="1"] { grid-column: 5; grid-row: 1; }
.reader-dock [data-library-quick-save] { grid-column: 6; grid-row: 1;
  font-size: 1.45rem; line-height: 1; }
.reader-dock [data-reader-open="ayahs"] { grid-column: 1 / 3; grid-row: 2; }
.reader-dock [data-reader-open="sections"] { grid-column: 3 / 5; grid-row: 2; }
.reader-dock [data-library-open] { grid-column: 5 / 7; grid-row: 2; }
.reader-dock .reader-page-step { font-size: 1.2rem; line-height: 1; }
.reader-dock [data-current-page] { white-space: nowrap; }
.reader-dock progress {
  position: absolute;
  inset: 0 9px auto;
  width: calc(100% - 18px);
  height: 3px;
  border: 0;
  appearance: none;
}
.reader-dock progress::-webkit-progress-bar { background: transparent; }
.reader-dock progress::-webkit-progress-value { background: var(--gold); border-radius: 5px; }
.reader-dock progress::-moz-progress-bar { background: var(--gold); border-radius: 5px; }
.site-reader-enhanced, .site-reader-stacked {
  padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
.site-reader-enhanced.has-reader-return { padding-bottom: calc(260px + env(safe-area-inset-bottom)); }
.reader-return { position: fixed; z-index: 39; left: 50%;
  bottom: calc(130px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; place-items: center; width: min(650px, calc(100% - 20px));
  min-height: 44px; padding: 6px 12px; border-radius: 11px;
  background: var(--deep); color: #fff; text-align: center;
  font: 750 .85rem Vazirmatn, sans-serif; text-decoration: none;
  box-shadow: 0 7px 22px rgb(16 44 34 / 24%); }
.reader-return:hover, .reader-return:focus-visible { background: #235448; }
.reader-sheet {
  width: min(640px, calc(100% - 24px));
  max-height: min(88dvh, 850px);
  margin: auto;
  padding: 0;
  border: 1px solid #d8c8a8;
  border-radius: 20px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 70px rgb(4 28 22 / 30%);
  direction: rtl;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.reader-sheet::backdrop { background: rgb(7 30 24 / 58%); }
.reader-sheet-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 8px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.reader-sheet-header h2 { margin: 0; font-size: 1.08rem; color: var(--deep); }
.reader-sheet button, .reader-sheet select, .reader-sheet input { font: inherit; }
.reader-sheet [data-reader-close] {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--deep);
  background: #fffaf0;
  cursor: pointer;
}
.reader-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  scrollbar-width: thin;
}
.reader-tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 5px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--deep);
  font-size: .88rem;
  cursor: pointer;
}
.reader-tabs button[aria-current="page"] { color: #fff; background: var(--deep); }
.reader-search-label { display: block; padding: 11px 18px 5px; font-size: .83rem; color: var(--muted); }
.reader-search-label input {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 5px;
  padding: 6px 12px;
  border: 1px solid #c7b99d;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.reader-global-search { display: block; min-height: 44px; margin: 0 18px;
  padding: 9px 0; color: var(--deep); font-size: .82rem; font-weight: 750; }
.reader-results { padding: 8px 17px 20px; }
.reader-results h3 { margin: 14px 0 7px; font-size: .85rem; color: var(--muted); }
.reader-result {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
}
.reader-result a, .reader-result button {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 44px;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  color: var(--deep);
  background: transparent;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
}
.reader-result a:hover, .reader-result button:hover { background: #f1e9d9; }
.reader-result .reader-secondary { flex: 0 0 auto; font-size: .76rem; color: #71571e; }
.reader-result[aria-current="true"] { background: #f7f0df; }
.reader-result a.reader-ayah-link { display: block; }
.reader-ayah-preview { display: block; margin-top: 5px; color: var(--ink);
  font: 1.1rem/1.8 KFGQPCHafs, AmiriQuran, serif; unicode-bidi: isolate; }
.reader-results details { border-bottom: 1px solid var(--rule); }
.reader-results summary { display: flex; align-items: center; min-height: 48px;
  color: var(--deep); cursor: pointer; }
.reader-results details a { display: flex; align-items: center; min-height: 44px;
  margin-right: 15px; color: var(--deep); }
.reader-empty { padding: 20px 10px; color: var(--muted); }
.reader-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.reader-page-grid a {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid #decba9;
  border-radius: 10px;
  color: var(--deep);
  text-decoration: none;
}
.reader-page-grid a[aria-current="page"] { color: #fff; background: var(--deep); }
.reader-surah-select { display: block; width: 100%; min-height: 48px; margin-bottom: 10px; }
.reader-verse-action {
  display: block;
  min-height: 44px;
  margin: 10px auto 0;
  padding: 6px 18px;
  border: 1px solid #aa8a48;
  border-radius: 999px;
  color: var(--deep);
  background: #fffaf0;
  font: 700 .82rem Vazirmatn, sans-serif;
  cursor: pointer;
}
.quran-xref { color: var(--deep); text-decoration: underline;
  text-decoration-color: #a7833f; text-underline-offset: .18em; }
.quran-xref[data-quran-status="pending"] { text-decoration-style: dotted; }
.quran-xref[data-quran-status="partial"] { text-decoration-style: dashed; }
.quran-xref:hover, .quran-xref:focus-visible { background: #fff0bf; }
.surah-search { display: block; margin-top: 14px; }
.surah-search input { display: block; width: 100%; min-height: 48px; margin-top: 6px;
  padding: 8px 12px; border: 1px solid #c7b99d; border-radius: 10px; }
.surah-card strong { display: block; font-size: 1.15rem; color: var(--deep); }
.surah-card[hidden] { display: none !important; }
.surah-empty { padding: 22px; border-radius: 12px; background: var(--paper);
  color: var(--muted); text-align: center; }
.surah-empty[hidden] { display: none !important; }
.surah-neighbors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.surah-neighbors a { display: inline-flex; align-items: center; min-height: 44px;
  padding: 6px 12px; border: 1px solid var(--rule); border-radius: 9px; }
.ayah-jump { display: block; margin-top: 12px; }
.ayah-jump input { display: block; width: min(180px, 100%); min-height: 46px;
  margin: 5px 0; padding: 6px 10px; border: 1px solid #c7b99d; border-radius: 9px; }
[data-ayah-go] { min-height: 44px; padding: 7px 14px; border: 0; border-radius: 9px;
  color: #fff; background: var(--deep); cursor: pointer; }
.ayah-jump-status { display: block; min-height: 1.4em; margin-top: 4px; color: #765a28; }
.ayah-filter-status { display: block; min-height: 1.5em; margin-top: 5px;
  color: var(--muted); font-size: .83rem; }
.ayah-translation-toggle { min-height: 44px; margin-top: 10px; padding: 7px 14px;
  border: 1px solid #9b7c42; border-radius: 9px; background: #fffaf0;
  color: var(--deep); font: 700 .85rem Vazirmatn, sans-serif; cursor: pointer; }
.ayah-translation-toggle[hidden], .quran-card-meaning[hidden] { display: none !important; }
.quran-card[id] { scroll-margin-top: 110px; }
.quran-card:target { outline: 3px solid #b48638; outline-offset: 4px; }
.book-content :is(.verse, .prose:not(.joined), .chapter-heading,
  .passage-heading, .section-heading):target,
.book-content .joined:has(> :target) {
  outline: 3px solid #b48638;
  outline-offset: 4px;
  border-radius: 8px;
  background-color: #fff4d2;
}
.skip-reader { position: absolute; z-index: 90; right: 12px; top: -70px;
  padding: 10px 16px; background: #fff; color: var(--deep); }
.skip-reader:focus { top: 12px; }
#continue-reading { padding: 16px 20px; border: 1px solid #c8aa6b; border-radius: 13px;
  background: #fff5dc; }
#continue-reading a { display: block; min-height: 44px; color: var(--deep); font-weight: 750; }
#library-preview { padding: 16px 20px; border: 1px solid var(--rule);
  border-radius: 13px; background: var(--paper); }
#library-preview h2 { margin: 0 0 9px; font-size: 1rem; }
#library-preview a { display: block; min-height: 44px; padding: 7px 0;
  color: var(--deep); border-top: 1px solid var(--rule); }
#library-preview button { min-height: 44px; padding: 7px 14px; margin-top: 8px;
  border: 1px solid var(--gold); border-radius: 9px; background: #fffaf0;
  color: var(--deep); font: 700 .9rem Vazirmatn, sans-serif; cursor: pointer; }
.site-search-form { padding: 18px 20px; border: 1px solid var(--rule);
  border-radius: 13px; background: var(--paper); }
.site-search-form label { display: block; margin-bottom: 8px; color: var(--deep);
  font-weight: 750; }
.site-search-form div { display: flex; flex-wrap: wrap; gap: 8px; }
.site-search-form input { flex: 1 1 220px; min-width: 0; min-height: 48px;
  padding: 7px 12px; border: 1px solid #c7b99d; border-radius: 9px;
  color: var(--ink); background: #fff; font: inherit; }
.site-search-form button, #site-search-more { min-height: 48px; padding: 8px 19px;
  border: 0; border-radius: 9px; color: #fff; background: var(--deep);
  font: 750 .9rem Vazirmatn, sans-serif; cursor: pointer; }
.site-search-page { max-width: 860px; margin: 32px auto 80px; padding: 0 20px; }
.ayah-route-page { max-width: 820px; margin: 28px auto 80px; padding: 0 20px; }
.ayah-route-page h1 { font-size: clamp(1.4rem, 5vw, 2.1rem); }
.ayah-route-page > p { line-height: 1.8; }
.ayah-return { display: inline-flex; align-items: center; min-height: 44px;
  margin: 6px 0 18px; padding: 8px 15px; border-radius: 9px;
  color: #fff; background: var(--deep); font-weight: 750; text-decoration: none; }
.ayah-route-card { margin: 12px 0; padding: 18px 20px; border: 1px solid var(--rule);
  border-radius: 14px; background: var(--paper); }
.ayah-route-card h2 { margin: 0 0 8px; font-size: 1rem; color: var(--deep); }
.ayah-route-card p { line-height: 1.9; }
.ayah-route-arabic { font: 1.55rem/2.1 KFGQPCHafs, AmiriQuran, serif; text-align: center; }
.ayah-route-meaning { margin: 4px 0 14px; color: var(--muted); text-align: center; }
.ayah-route-card a { display: flex; align-items: center; min-height: 44px;
  color: var(--deep); font-weight: 750; }
.site-search-page h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 5vw, 2.2rem); }
.site-search-page > p { line-height: 1.8; }
#site-search-status { min-height: 1.8em; margin: 20px 2px; color: var(--muted); }
.site-search-result { padding: 17px 20px; margin: 12px 0; border: 1px solid var(--rule);
  border-radius: 13px; background: var(--paper); }
.site-search-result a { display: block; min-height: 44px; color: var(--deep);
  font-weight: 750; text-decoration: none; }
.site-search-result a:hover { text-decoration: underline; }
.site-search-snippet { margin: 0; line-height: 1.9; overflow-wrap: anywhere; }
.site-search-snippet mark { padding: 0 2px; border-radius: 3px;
  color: var(--ink); background: #f6d469; }
#site-search-more { display: block; margin: 20px auto; }
.search-history { margin-top: 18px; padding: 16px 20px; border: 1px solid var(--rule);
  border-radius: 13px; background: #fffaf0; }
.search-history-heading { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; }
.search-history h2 { margin: 0; font-size: 1rem; color: var(--deep); }
.search-history p { margin: 4px 0 12px; color: var(--muted); font-size: .84rem; }
.search-history-list { display: grid; gap: 6px; }
.search-history-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; border-top: 1px solid var(--rule); }
.search-history-revisit { flex: 1 1 170px; min-width: 0; text-align: start;
  overflow-wrap: anywhere; color: var(--deep); font-weight: 750; }
.search-history-details { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.search-history button { min-height: 44px; padding: 6px 10px; border: 0;
  border-radius: 8px; background: transparent; font: inherit; cursor: pointer; }
.search-history button:hover, .search-history button:focus-visible { background: #f3e8cf; }
.search-history-remove, #search-history-clear { color: #694522; font-size: .82rem !important; }
#search-history-more { display: block; margin: 10px auto 0; color: var(--deep); }
.library-current { padding: 10px 18px; border-bottom: 1px solid var(--rule);
  background: #fff9e9; }
.library-current p { margin: 0 0 8px; max-height: 3.3em; overflow: hidden;
  font-size: .83rem; color: var(--muted); }
.library-current button, .library-actions button {
  min-height: 44px; padding: 7px 13px; border: 1px solid #9b7c42;
  border-radius: 10px; background: var(--deep); color: white;
  font: 700 .82rem Vazirmatn, sans-serif; cursor: pointer; }
.library-current button[aria-pressed="true"] { background: #fffaf0; color: var(--deep); }
.library-help { margin: 10px 18px 0; font-size: .75rem; line-height: 1.7; color: var(--muted); }
.library-status { min-height: 1.5em; margin: 5px 18px; color: var(--deep);
  font-size: .83rem; }
.library-results { min-height: 130px; }
.library-entry { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.library-entry a { display: block; color: var(--deep); text-decoration: none;
  min-height: 44px; padding: 4px 0; }
.library-entry a:hover { text-decoration: underline; }
.library-entry q { display: block; padding: 8px 12px; border-right: 3px solid #d2ac52;
  background: #fff8e8; font-size: .88rem; line-height: 1.8; }
.library-entry small { display: block; margin-top: 4px; color: var(--muted); }
.library-entry button, .library-more { min-height: 44px; padding: 5px 12px;
  border: 1px solid var(--rule); border-radius: 9px; background: transparent;
  color: #75551f; font: 700 .8rem Vazirmatn, sans-serif; cursor: pointer; }
.library-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--rule); }
.library-actions button { background: #fffaf0; color: var(--deep); }
.reader-save-toast { position: fixed; z-index: 55; right: 14px;
  bottom: calc(140px + env(safe-area-inset-bottom)); max-width: min(320px, 90vw);
  margin: 0; padding: 0; border-radius: 9px; background: var(--deep);
  color: #fff; font: 700 .82rem Vazirmatn, sans-serif; }
.reader-save-toast:not(:empty) { padding: 9px 14px; box-shadow: 0 5px 18px rgb(16 44 34 / 20%); }
.highlight-toolbar { position: fixed; z-index: 70; direction: rtl;
  padding: 4px; border: 1px solid #b18c43; border-radius: 11px;
  background: #fff9e6; box-shadow: 0 8px 24px rgb(16 44 34 / 24%); }
.highlight-toolbar button { min-height: 44px; padding: 5px 14px; border: 0;
  background: var(--deep); border-radius: 8px; color: #fff;
  font: 700 .85rem Vazirmatn, sans-serif; cursor: pointer; }
::highlight(reader-saved) { background-color: #f6d469; color: #202c20; }
[data-has-highlight="true"] { box-shadow: inset -4px 0 #e2b648; }
[data-save-target="true"] { outline: 2px solid #bd9a55; outline-offset: 4px; }
@media (min-width: 821px) {
  .site-reader-enhanced { padding-bottom: 0; }
  .site-reader-enhanced.has-reader-return { padding-bottom: 0; }
  .book-rail .reader-return { position: static; transform: none; width: 100%; margin-bottom: 12px; }
  .reader-save-toast { bottom: 18px; }
  .book-rail .reader-dock { position: static; left: auto; bottom: auto;
    transform: none; width: 100%; margin-bottom: 12px; }
}
@media (max-width: 820px) {
  .site-header .header-inner { flex-wrap: wrap; }
  .site-header .brand { white-space: normal; min-width: 0; }
  .site-header .header-actions { flex-wrap: wrap; }
  .site-header .header-actions a { white-space: normal; min-height: 44px; }
  .site-reader-enhanced .book-rail { display: none; }
  .reader-sheet { position: fixed; inset: 0; width: calc(100% - 24px);
    max-height: min(88dvh, 850px); margin: auto; border-radius: 20px; }
  .book-content { padding-bottom: 36px; }
}
@media (max-width: 480px) {
  .reader-page .hero-inner { padding: 26px 17px 38px; }
  .reader-page .hero-ornament { font-size: 1.7rem; margin-bottom: 8px; }
  .reader-page .hero h1 { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .reader-page .hero p { font-size: .87rem; line-height: 1.75; }
  .reader-page .hero-rule { margin-top: 12px; }
}
@media (max-width: 360px) {
  .reader-dock { gap: 2px; }
  .reader-dock button { font-size: .73rem; padding-inline: 2px; }
}
@media print { .reader-dock, .reader-sheet, .reader-verse-action,
  #continue-reading, #library-preview, .highlight-toolbar, .reader-save-toast,
  .reader-return, .ayah-return { display: none !important; } }