/* ===========================================================
   المُسهِّل — الطبقة الأساسية: المتغيرات، الأساسيات، المكوّنات المشتركة
   إعادة تصميم: هوية معاصرة أنيقة — محايدة، هادئة، دقيقة التفاصيل
   =========================================================== */

/* ---------- المتغيرات ---------- */
:root {
  --hue: 168;                    /* تُستبدل لكل سورة لإعطائها هوية لونية */
  --sat: 30%;

  /* وضعُ الورق: أرضيةٌ دافئة كورق المصاحف، لا بياضَ شاشةٍ ناصع.
     البياضُ التامّ (100%) يعكس الضوء كلَّه فيُجهد العين في الجلسات
     الطويلة، فخُفّض إلى نحو 92% مع دفءٍ في الصبغة. والحبرُ أسودُ
     دافئ لا أزرق، فلا يتنافر مع الأرضية. */
  --paper:        hsl(38 38% 92%);
  --paper-2:      hsl(38 32% 89%);
  --surface:      hsl(40 46% 96%);
  --surface-2:    hsl(38 30% 92.5%);
  --line:         hsl(36 22% 82%);
  --line-soft:    hsl(36 24% 87%);

  --ink:          hsl(28 26% 14%);
  --ink-2:        hsl(28 13% 33%);
  --ink-3:        hsl(30 11% 45%);

  --accent:       hsl(var(--hue) var(--sat) 30%);
  --accent-2:     hsl(var(--hue) calc(var(--sat) + 8%) 40%);
  --accent-soft:  hsl(var(--hue) 32% 93%);
  --accent-line:  hsl(var(--hue) 24% 79%);
  --accent-ink:   hsl(var(--hue) 42% 24%);

  --gold:         hsl(38 52% 38%);
  --warn:         hsl(26 66% 40%);
  --warn-soft:    hsl(36 62% 92%);
  --warn-line:    hsl(34 46% 79%);

  --radius:   12px;
  --radius-s: 8px;
  --radius-l: 20px;
  --radius-xl:26px;

  --shadow-s: 0 1px 1px rgb(74 56 30 / .04), 0 2px 6px rgb(74 56 30 / .055);
  --shadow-m: 0 2px 4px rgb(74 56 30 / .05), 0 10px 28px rgb(74 56 30 / .085);
  --shadow-l: 0 8px 16px rgb(74 56 30 / .07), 0 28px 64px rgb(74 56 30 / .14);

  /* الموقع كلّه بخطوطٍ عربية أصيلة: أميري للواجهة والمتن،
     والرقعة للأسماء الكبرى، وأميري قرآن للمصحف. */
  --ui: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --body: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", serif;
  --quran: "Amiri Quran", "Amiri", "Traditional Arabic", "Scheherazade New", serif;
  /* الأسماء الكبرى — اسم الموقع واسم السورة.
     جُرّب خطّ الرقعة (Aref Ruqaa) فإذا هو يرسم التطويل (ـ) بعرضٍ صفر،
     فلا تُمَدّ معه الكشيدة أصلًا، ويضطرب رسم التشكيل الثقيل في
     «المُسهِّل». فاعتُمد أميري: نسخٌ كلاسيكيّ يمدّ الكشيدة مدًّا صحيحًا. */
  --display: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --fancy: "Aref Ruqaa", "Amiri", "Traditional Arabic", serif;
  --num: "Amiri", "Noto Naskh Arabic", serif;
  /* أرقام الشارات المصحفية: أرقام أميري على هيئتها في المصاحف */
  --digits: "Amiri", "Noto Naskh Arabic", serif;

  --ayah-size: 2rem;             /* يتحكم بها زر تكبير الخط */
  --maxw: 1220px;

  --ease: cubic-bezier(.22, .8, .3, 1);

  color-scheme: light;
}

html[data-dark] {
  --paper:        hsl(26 20% 7%);
  --paper-2:      hsl(26 18% 9.5%);
  --surface:      hsl(26 17% 11%);
  --surface-2:    hsl(26 15% 14%);
  --line:         hsl(26 12% 20%);
  --line-soft:    hsl(26 12% 17%);

  --ink:          hsl(40 18% 93%);
  --ink-2:        hsl(40 8% 70%);
  --ink-3:        hsl(40 6% 52%);

  --accent:       hsl(var(--hue) 42% 66%);
  --accent-2:     hsl(var(--hue) 46% 74%);
  --accent-soft:  hsl(var(--hue) 26% 16%);
  --accent-line:  hsl(var(--hue) 22% 28%);
  --accent-ink:   hsl(var(--hue) 46% 80%);

  --gold:         hsl(38 52% 64%);
  --warn:         hsl(32 62% 64%);
  --warn-soft:    hsl(30 24% 15%);
  --warn-line:    hsl(32 22% 28%);

  --shadow-s: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-m: 0 2px 8px rgb(0 0 0 / .4), 0 14px 34px rgb(0 0 0 / .34);
  --shadow-l: 0 10px 22px rgb(0 0 0 / .5), 0 32px 68px rgb(0 0 0 / .44);

  color-scheme: dark;
}

/* ===========================================================
   الوضعُ الذهبيّ — ثالثُ الأوضاع
   أرضيّةٌ كحليّةٌ عميقةٌ كليل المساجد، وذهبٌ دافئ في الخطوط والحروف
   والحواشي. ويشترك مع وضع الليل في كل قواعد ‎html[data-dark]‎، ولا
   يُخالفه إلا في اللوحة وفي زخارفَ ذهبيّةٍ يختصّ بها.

   ملاحظة: في هذا الوضع تُثبَّت درجةُ اللون على الذهب فلا تتغيّر بتغيّر
   السورة؛ لأن هويّته الذهبُ نفسه، بخلاف الوضعين الآخرين اللذين يأخذ
   كلٌّ منهما لونَ السورة من ‎--hue‎.
   =========================================================== */
html[data-mode="gold"] {
  --paper:        hsl(26 42% 6%);
  --paper-2:      hsl(26 38% 8%);
  --surface:      hsl(27 34% 10.5%);
  --surface-2:    hsl(28 30% 14%);
  --line:         hsl(42 26% 26%);
  --line-soft:    hsl(42 20% 19%);

  --ink:          hsl(44 44% 92%);
  --ink-2:        hsl(42 24% 76%);
  --ink-3:        hsl(42 16% 58%);

  /* الذهبُ ثابتٌ لا يتبع ‎--hue‎ */
  --accent:       hsl(43 68% 58%);
  --accent-2:     hsl(45 78% 68%);
  --accent-soft:  hsl(42 32% 13%);
  --accent-line:  hsl(43 38% 32%);
  --accent-ink:   hsl(45 76% 76%);

  --gold:         hsl(45 78% 66%);
  --warn:         hsl(32 66% 66%);
  --warn-soft:    hsl(30 30% 13%);
  --warn-line:    hsl(34 30% 30%);

  /* الظلالُ تميل إلى الذهب لا إلى السواد المحض، فتبدو كضوء قنديل */
  --shadow-s: 0 1px 2px hsl(26 50% 2% / .5);
  --shadow-m: 0 2px 8px hsl(26 50% 2% / .55), 0 14px 34px hsl(43 40% 4% / .5);
  --shadow-l: 0 10px 22px hsl(26 50% 2% / .6), 0 32px 68px hsl(43 40% 4% / .55);

  /* تدرّجٌ ذهبيّ يُستعمل في الحواشي والحروف الكبيرة */
  --gold-grad: linear-gradient(135deg,
    hsl(45 82% 76%) 0%, hsl(43 70% 58%) 38%,
    hsl(40 58% 44%) 62%, hsl(46 84% 72%) 100%);

  color-scheme: dark;
}

/* الأرضيّة: وهجٌ ذهبيّ خفيفٌ من الأعلى كأنه ضوءُ قناديل */
html[data-mode="gold"] body {
  background-image:
    radial-gradient(120% 60% at 50% -10%, hsl(43 40% 22% / .34), transparent 62%),
    radial-gradient(80% 50% at 12% 4%, hsl(40 44% 26% / .18), transparent 60%),
    radial-gradient(80% 50% at 88% 4%, hsl(40 44% 26% / .18), transparent 60%);
  background-attachment: fixed;
}

/* ---------- الأساسيات ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h, 3.8rem) + 1.7rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17.5px;          /* أميري أصغر قامةً من الخطوط غير المتّصلة */
  line-height: 1.9;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  transition: background .3s ease, color .3s ease;
}

/* خلفية الموقع الكونية في assets/css/sky.css (مولَّدة بـ tools/build-sky.mjs) */

h1, h2, h3, h4 { line-height: 1.4; margin: 0; font-weight: 600; letter-spacing: normal; }
p { margin: 0 0 .8em; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2.5px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }

.wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: calc(100% - 1.5rem); } }

.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;
}

/* ---------- الأزرار ---------- */
.btn {
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .5rem 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); box-shadow: var(--shadow-s); }
/* لونُ الضغط: ذهبيٌّ يوافق اللوحة البنّيّة، ويُميَّز عن حالة «مفعَّل»
   (`aria-pressed`) التي تبقى كتلةً حبريّة — فالضغطُ أثرٌ عابرٌ والتفعيلُ
   حالٌ قائمة، فلا يصحّ أن يتشابها. */
.btn:active {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--gold) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 58%, var(--line));
  color: var(--ink);
  box-shadow: none;
}
html[data-dark] .btn:active {
  background: color-mix(in srgb, var(--gold) 26%, var(--surface-2));
  color: hsl(44 62% 88%);
}
.btn[aria-pressed="true"], .btn.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
html[data-dark] .btn[aria-pressed="true"],
html[data-dark] .btn.is-on { background: var(--ink); color: var(--paper); }
.btn-icon { padding: .55rem; width: 2.5rem; height: 2.5rem; justify-content: center; border-radius: 50%; }
.btn svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- الشارات ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 500;
  padding: .2rem .6rem;
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.chip-muted { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
.chip-gold  { background: hsl(38 46% 95%); color: hsl(34 55% 27%); border-color: hsl(38 36% 82%); }
html[data-dark] .chip-gold { background: hsl(38 22% 16%); color: hsl(38 50% 72%); border-color: hsl(38 22% 30%); }

/* ---------- الوسوم والتنبيهات (مشتركة بين صفحات القراءة والأذكار) ---------- */
.tag {
  font-size: .66rem; padding: .1rem .45rem; border-radius: 100px;
  border: 1px solid var(--line); color: var(--ink-3); background: var(--surface);
  white-space: nowrap;
}
.tag-sync { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
html[data-dark] .tag-sync { color: var(--accent); }
.tag-new { color: hsl(34 60% 28%); background: hsl(38 60% 92%); border-color: hsl(38 46% 76%); font-weight: 600; }
html[data-dark] .tag-new { color: hsl(38 56% 72%); background: hsl(38 26% 18%); border-color: hsl(38 26% 34%); }

.note-weak {
  margin-top: .55rem;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-s);
  padding: .6rem .8rem;
  font-size: .82rem; color: var(--warn); line-height: 1.75;
  display: flex; gap: .5rem; align-items: flex-start;
}
.note-weak svg { flex: none; width: 1rem; height: 1rem; margin-top: .3rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- الترويسة ----------
   اللاصقُ هو الغلاف ‎#topbar‎ لا الشريطُ نفسه: العنصرُ اللاصق لا يفارق
   حدودَ أبيه، وأبو الشريط غلافٌ بارتفاعه، فكان الشريطُ يمضي معه عند
   النزول ولا يثبت. ويُنشر ارتفاعُه في ‎--topbar-h‎ لتستند إليه الأشرطةُ
   اللاصقةُ تحته. */
#topbar { position: sticky; top: 0; z-index: 60; }
.topbar {
  position: relative;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in {
  display: flex; align-items: center; gap: .6rem;
  min-height: 3.75rem;
  padding-block: .45rem;
}
/* ---------- الشعار ----------
   مصحفٌ مفتوح تعلوه نجمةُ هداية — على أرضيةٍ ليلية كسماء الموقع.
   وأيقونةُ المتصفح صورةٌ مستقلّةٌ عنه: assets/img/favicon.png */
/* `flex: none` لازمة: بدونها يكون الشعارُ أوّلَ من يتنازل عند ضيق
   الشريط، فينضغط اسمُه في عمودٍ ضيّقٍ ويتساقط حرفًا تحت حرف. */
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
/* شعارُ الترويسة صار أيقونةَ الموقع نفسَها (`favicon.png`) بطلب صاحب
   الموقع، فرُفع اللوحُ الفيروزيُّ ورسمُه المتجهيّ: الصورةُ ذهبيّةٌ على
   شفافيّة، فلا تحتاج أرضيّةً تحتها ولا تختلف بين الأوضاع الثلاثة. */
.brand-mark {
  width: 2.35rem; height: 2.35rem; flex: none;
  display: grid; place-items: center;
  filter: drop-shadow(0 1px 3px hsl(26 50% 3% / .45));
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.brand:hover .brand-mark {
  transform: translateY(-1px) rotate(-2deg);
  filter: drop-shadow(0 3px 9px hsl(26 50% 3% / .5));
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.brand-text { display: flex; flex-direction: column; gap: .05rem; line-height: 1.2; }
.brand-name {
  font-family: var(--display);
  font-size: 1.16rem; font-weight: 700;
  color: var(--ink); letter-spacing: 0;
}
.brand-sub {
  font-size: .66rem; color: var(--ink-3);
  letter-spacing: .015em;
}
@media (max-width: 26rem) {
  /* في أضيق الشاشات يبقى الشعار والاسم فقط */
  .brand-sub { display: none; }
  .brand-name { font-size: 1.24rem; }
}
/* الأزرارُ تتنازل لا الشعار: `min-width: 0` يسمح لها بالانكماش،
   والتمريرُ الأفقيّ يستوعب ما زاد بدل أن يفيض عن الشريط. */
.topbar-tools {
  margin-inline-start: auto; display: flex; align-items: center; gap: .4rem;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.topbar-tools::-webkit-scrollbar { display: none; }
.topbar-tools .btn {
  padding: .46rem .95rem;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-color: var(--line-soft);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.topbar-tools .btn:hover {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-s);
}
.topbar-tools .btn[aria-pressed="true"],
.topbar-tools .btn.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* الصفحةُ التي نحن فيها: حافّةٌ ذهبيّةٌ وأرضيّةٌ خفيفة، لا قلبٌ للّون —
   القلبُ موضوعٌ للمفتاح المضغوط (وضعِ الليل) فلا يُخلط به. وهي في
   الهاتف الدليلُ الوحيد على الموضع، إذ تُطوى الأسماء ويبقى الرمز. */
.topbar-tools .btn[aria-current="page"] {
  color: var(--accent-ink);
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
}
html[data-dark] .topbar-tools .btn[aria-current="page"] { color: var(--accent); }
.topbar-tools .btn[aria-current="page"] svg { opacity: 1; }
/* ثلاثةُ أصنافٍ عمدًا: `.topbar-tools .btn:hover` أثقلُ من `.btn:active`،
   ومع الفأرة يكون المرورُ والضغطُ معًا، فلولا هذا لما ظهر أثرُ الضغط. */
.topbar-tools .btn:active {
  background: color-mix(in srgb, var(--gold) 26%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 58%, var(--line));
  box-shadow: none;
}
.topbar-tools .btn svg { opacity: .85; }
.topbar-tools .btn:hover svg { opacity: 1; }
@media (max-width: 62rem) {
  /* يبقى الرمزُ وحده. وكان المدى ٣٠rem فلا يُخفي شيئًا إلا في أضيق
     الشاشات، فتظهر النصوصُ الستّة عند ٧١٨ بكسلًا وتلتهم الشريطَ حتى
     ينسحق الشعار — قِيس فبلغت الأزرارُ ٦٢٣ من ٦٨٦. */
  .topbar-tools .btn .lbl { display: none; }
  .topbar-tools .btn { padding: .5rem; width: 2.4rem; height: 2.4rem; justify-content: center; }
}

/* ---------- التذييل ---------- */
/* التذييل: أصغرُ حجمًا ومطويٌّ بطلب صاحب الموقع، فلا يزاحم الصفحةَ
   بمتنٍ طويلٍ لا يُقرأ في كلّ زيارة. وزرُّ الطيّ `summary` تُرفع عنه
   علامتُه الأصليّة ويوضع مكانها سهمٌ ينقلب عند الفتح. */
.foot {
  margin-top: 3rem;
  padding: 1.5rem 0 2.1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-3);
  font-size: .74rem;
  text-align: center;
  position: relative; z-index: 1;
}
.foot p { margin: .26rem 0; line-height: 1.8; }
.foot-more summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; color: var(--ink-2);
  padding: .28rem .85rem; margin-bottom: .35rem;
  border: 1px solid var(--line-soft); border-radius: 100px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.foot-more summary::-webkit-details-marker { display: none; }
.foot-more summary::after {
  content: ""; width: .42rem; height: .42rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .2s var(--ease);
}
.foot-more[open] summary::after { transform: translateY(.06em) rotate(225deg); }
.foot-more summary:hover { color: var(--ink); border-color: var(--line); }
.foot-ayah { margin-top: .75rem; opacity: .8; font-family: var(--quran); }

/* ---------- زر العودة لأعلى ---------- */
/* سهما القفز: أعلى الصفحة وأسفلها، مرصوفان في عمودٍ واحد */
#jumpNav {
  position: fixed; inset-block-end: 5.8rem; inset-inline-start: 1.1rem;
  z-index: 55;
  display: flex; flex-direction: column; gap: .45rem;
  pointer-events: none;
}
#jumpNav button,
#jumpNav a {
  pointer-events: auto;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-m);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s, background .18s;
}
html[data-dark] #jumpNav button,
html[data-dark] #jumpNav a { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
#jumpNav button.show,
#jumpNav a { opacity: 1; visibility: visible; transform: none; }
/* قاعدةٌ واحدةٌ تعمّ الأزرار الأربعة. وكان لكلٍّ منها حالٌ مختلفة:
   القلبُ وسهمُ الصعود بلا لونٍ بتاتًا، والبيتُ وسهمُ النزول بلونٍ خاصٍّ
   بكلٍّ منهما — فرُفعت تلك كلُّها ليستوي الأربعة. */
#jumpNav button:hover,
#jumpNav a:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--gold) 30%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 60%, var(--line));
  color: var(--ink);
}
/* الأسهمُ العائمة لم يكن لها أثرُ ضغطٍ بتاتًا، فأُعطيت اللونَ الذهبيَّ
   نفسَه وانكماشةً خفيفةً تُحسّ باليد. */
#jumpNav button:active,
#jumpNav a:active {
  transform: translateY(0) scale(.93);
  background: var(--gold);
  border-color: var(--gold);
  color: hsl(26 42% 12%);
}
#jumpNav button svg,
#jumpNav a svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- اسمُ الزرّ إلى جانبه ----------
   لوحةٌ تنزلق من الزرّ عند المرور أو التنقّل بلوحة المفاتيح، تُرسم من
   ‎data-tip‎. واخترناها على تلميح المتصفّح لأنّ ذاك يتأخّر ثانيةً أو
   ثانيتين ويخالف هيئةَ الموقع ولا يُقرأ في الوضع الذهبيّ.
   وموضعُها إلى جهة المتن لا خارج الشاشة: الأزرارُ على حرف النافذة،
   فتخرج اللوحةُ إلى داخلها. */
#jumpNav [data-tip] { position: relative; }
#jumpNav [data-tip]::after {
  content: attr(data-tip);
  /* ‎inset-inline-start‎ لا ‎end‎: الأزرارُ على حرف النافذة الداخليّ،
     فتخرج اللوحةُ إلى المتن. ولو عُكس لخرجت خارج الشاشة فلا تُرى. */
  position: absolute; inset-inline-start: calc(100% + .55rem);
  top: 50%; transform: translateY(-50%) translateX(-.4rem);
  padding: .32rem .6rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--ui); font-size: .74rem; font-weight: 500;
  line-height: 1.5; white-space: nowrap;
  box-shadow: var(--shadow-m);
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
#jumpNav [data-tip]:hover::after,
#jumpNav [data-tip]:focus-visible::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
/* الموعدُ قد يطول، فيُلجم عرضُه ويُقصّ ما زاد */
#jumpNav #dockFav::after { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 34rem) {
  /* في أضيق الشاشات لا موضعَ للوحة، ويكفي الوصفُ للقارئات */
  #jumpNav [data-tip]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #jumpNav [data-tip]::after { transition: opacity .18s var(--ease); transform: translateY(-50%); }
}

/* زرُّ الرئيسية ملازمٌ لا يغيب، وهيئتُه كهيئة سهم النزول */
#toHome {
  text-decoration: none;
  background: var(--surface); color: var(--ink-2); border-color: var(--line);
}
html[data-dark] #toHome { background: var(--surface); color: var(--ink-2); }


/* سهم النزول أخفُّ حضورًا من سهم الصعود */
#toBottom { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
html[data-dark] #toBottom { background: var(--surface); color: var(--ink-2); }


/* ---------- التحميل ---------- */
.loading { padding: 5rem 1rem; text-align: center; color: var(--ink-3); }
.spinner {
  width: 2rem; height: 2rem; margin: 0 auto 1rem;
  border: 2.5px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================
   مكوّنات مشتركة — أزرار رئيسية، حقول، مجموعات اختيار، ألواح سفلية
   =========================================================== */

/* زر رئيسي بارز */
.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 6px 18px rgb(0 0 0 / .14);
}
.btn-primary:hover {
  background: var(--accent-ink); border-color: var(--accent-ink);
  color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .14), 0 8px 22px rgb(0 0 0 / .18);
}
html[data-dark] .btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: hsl(26 20% 8%); }
html[data-dark] .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: hsl(26 20% 8%); }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); }

/* مجموعة اختيار متجاورة */
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  font: inherit; font-size: .8rem; font-weight: 500;
  border: 0; background: transparent; color: var(--ink-3);
  padding: .4rem .85rem; border-radius: 100px; cursor: pointer;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-s);
}
html[data-dark] .seg button[aria-pressed="true"] { background: var(--paper-2); color: var(--accent); }

/* حقل بحث */
.field {
  position: relative; display: block; width: 100%;
}
.field svg {
  position: absolute; inset-inline-start: .8rem; inset-block-start: 50%;
  transform: translateY(-50%); width: 1.02rem; height: 1.02rem;
  fill: none; stroke: var(--ink-3); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.field input {
  width: 100%; font: inherit; font-size: .9rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem 2.4rem .6rem 2.5rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus {
  outline: none; background: var(--surface);
  border-color: var(--ink-3);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--ink) 8%, transparent);
}
.field .clear {
  position: absolute; inset-inline-end: .45rem; inset-block-start: 50%;
  transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 0; background: var(--line-soft); color: var(--ink-2);
  display: none; place-items: center; cursor: pointer;
}
.field.has-value .clear { display: grid; }
.field .clear svg { position: static; transform: none; width: .85rem; height: .85rem; stroke: currentColor; stroke-width: 2.5; }

/* مفتاح تبديل */
.switch { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 2.35rem; height: 1.3rem; border-radius: 100px; flex: none;
  background: var(--line); position: relative; transition: background .18s var(--ease);
}
.switch .track::after {
  content: ""; position: absolute; inset-block-start: .16rem; inset-inline-start: .16rem;
  width: .98rem; height: .98rem; border-radius: 50%; background: #fff;
  transition: transform .18s var(--ease); box-shadow: 0 1px 3px rgb(0 0 0 / .25);
}
.switch input:checked + .track { background: var(--ink); }
html[data-dark] .switch input:checked + .track { background: var(--accent-2); }
.switch input:checked + .track::after { transform: translateX(-1.05rem); }
.switch input:disabled + .track { opacity: .4; }
.switch input:focus-visible + .track { outline: 2.5px solid var(--accent-2); outline-offset: 2px; }

/* لوح سفلي */
.sheet {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 95;
  background: var(--surface);
  border-block-start: 1px solid var(--line);
  border-start-start-radius: var(--radius-xl);
  border-start-end-radius: var(--radius-xl);
  box-shadow: var(--shadow-l);
  transform: translateY(101%);
  transition: transform .32s var(--ease);
  max-height: min(82vh, 44rem);
  display: flex; flex-direction: column;
  visibility: hidden;
}
.sheet.open { transform: none; visibility: visible; }
@media (min-width: 760px) {
  .sheet { inset-inline: auto 1.25rem; width: min(30rem, calc(100% - 2.5rem)); inset-block-end: 1.25rem; border-radius: var(--radius-l); }
}
.sheet-grip {
  width: 2.5rem; height: .25rem; border-radius: 100px;
  background: var(--line); margin: .6rem auto .1rem;
}
@media (min-width: 760px) { .sheet-grip { display: none; } }
.sheet-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.2rem .75rem;
  border-block-end: 1px solid var(--line-soft);
}
.sheet-head h2 { font-size: 1rem; font-weight: 600; }
.sheet-head .close {
  margin-inline-start: auto; flex: none;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
}
.sheet-head .close:hover { background: var(--surface-2); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 20%, var(--line)); }
.sheet-head .close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.2rem 1.4rem; }

.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: hsl(26 20% 6% / .5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.scrim.show { opacity: 1; visibility: visible; }

/* هيكل تحميل */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-soft) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-s);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* تنبيه عائم */
#toast {
  position: fixed; inset-block-end: 6.6rem; inset-inline: 0; z-index: 120;
  display: flex; justify-content: center; pointer-events: none; padding-inline: 1rem;
}
#toast span {
  background: var(--ink); color: var(--paper);
  font-size: .84rem; padding: .6rem 1.1rem; border-radius: var(--radius);
  box-shadow: var(--shadow-m); text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
#toast.show span { opacity: 1; transform: none; }

/* ---------- تحسينات الشاشات الصغيرة ---------- */
@media (max-width: 560px) {
  .brand-sub { display: none; }
  .brand-name { font-size: .98rem; }
  .topbar .btn .lbl { display: none; }
  .topbar .btn { padding: .55rem .75rem; }
  .topbar-in { min-height: 3.4rem; }
}

/* ===========================================================
   الهاتفُ واللوحيّ

   ثلاثةُ أبوابٍ يجمعها أنّها لا تُرى على الحاسوب: ما يفرضه الإصبع
   (مساحةُ اللمس)، وما تفرضه الشاشةُ الصغيرة (حدٌّ أدنى للحرف، وحافّاتٌ
   آمنة تحت النَّقش وشريط الإيماءة)، وما يفرضه اللوحيُّ (سعةٌ لا تُترك
   لفراغ). وهي هنا في ‎theme.css‎ لأنّها تعمّ الصفحات كلَّها، وما خصَّ
   صفحةً بعينها ففي ملفّها.
   =========================================================== */

/* ---------- ١) مساحةُ اللمس ----------
   الإصبعُ لا يُصيب ما دون ٤٤ بكسلًا إلا بتعثّر، وأزرارُ الموقع كانت
   بين ٣١ و٣٨. والانتقاءُ بـ‎pointer: coarse‎ لا بعرض الشاشة: اللوحيُّ
   عريضٌ ويُلمس، والحاسوبُ الضيّق يُؤشَّر عليه بالفأرة فلا يُثقَّل. */
@media (pointer: coarse) {
  .btn,
  .seg button,
  .sort-btn,
  .sheet-head .close {
    min-height: 2.6rem;
  }
  /* الزرُّ الأيقونةُ مربَّعٌ لا مستطيل: يُوسَّع عرضُه كما وُسِّع طولُه */
  .topbar-tools .btn { min-width: 2.6rem; }
  .field input { min-height: 2.75rem; }
  .field .clear { width: 2rem; height: 2rem; }
  .switch .track { width: 2.6rem; height: 1.45rem; }
  .switch .track::after { width: 1.13rem; height: 1.13rem; }
  .switch input:checked + .track::after { transform: translateX(-1.15rem); }
  /* عناصرُ القوائم المنسدلة: سطرٌ واحدٌ يُلمس لا يُحدَّق فيه */
  .sort-list li { padding-block: .62rem; }
}

/* ---------- ٢) حرفٌ لا يصغر، وحقلٌ لا يُقرّب الصفحة ----------
   ‎iOS‎ يُقرّب الصفحةَ من تلقائه إذا نُقر حقلٌ حرفُه دون ١٦ بكسلًا، ثم
   لا يعيدها، فيبقى القارئُ في صفحةٍ مزاحة. والحدُّ الأدنى للحرف ١٢٫٥
   لأنّ ما دونه (الشارات والوسوم، وكانت ١٠٫٦) لا يكاد يُقرأ في اليد. */
@media (max-width: 48rem) {
  .field input,
  input[type="search"],
  input[type="text"],
  input[type="number"],
  input[type="time"],
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
  .chip, .tag, .brand-sub { font-size: .79rem; }

  /* شريطُ الأدوات ينزلق أفقيًّا في الهاتف (سبعةُ أبوابٍ في ٢٤٩ بكسلًا)،
     وكان ينقطع عند الحافّة قطعًا حادًّا فلا يُعلم أنّ وراءه بقيّة.
     والتلاشي في جهة اليسار لأنّ المخبوء هناك: الشريطُ يبدأ من اليمين. */
  .topbar-tools {
    gap: .3rem;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to left, #000 86%, transparent 100%);
    mask-image: linear-gradient(to left, #000 86%, transparent 100%);
  }
  .topbar-tools .btn { scroll-snap-align: end; }
}

/* ---------- ٣) الحافّاتُ الآمنة ----------
   ‎viewport-fit=cover‎ في الترويسة يمدّ الصفحةَ تحت النَّقش وشريط
   الإيماءة، فيلزم ردُّ ما تحتهما إلى داخل الحافّة الآمنة. والشريطُ
   السفليُّ للتلاوة يردّ نفسَه في ‎reader.css‎. */
@supports (padding: env(safe-area-inset-left)) {
  .topbar-in,
  .foot .wrap {
    padding-inline-start: max(0px, env(safe-area-inset-right));
    padding-inline-end: max(0px, env(safe-area-inset-left));
  }
  .foot { padding-block-end: calc(2.1rem + env(safe-area-inset-bottom, 0px)); }
  #jumpNav { inset-inline-start: max(1.1rem, env(safe-area-inset-right)); }
  .rem-card { inset-inline-end: max(1.1rem, env(safe-area-inset-left)); }
  #toast { padding-block-end: env(safe-area-inset-bottom, 0px); }
  .sheet-body { padding-block-end: calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- ٤) العمودُ العائم في الهاتف ----------
   عمودُ الأسهم يطفو فوق النصّ. وهو في الحاسوب على اليمين لا يضرّ لأنّ
   الهامشَ هناك واسع، وفي الهاتف لا هامشَ فيقع على الحرف — واليمينُ في
   العربية جهةُ أوّل السطر. فيُنقل إلى اليسار حيث منتهى السطر مسنَّنٌ
   فيه فراغ، ويصغر قليلًا. والنقلُ هنا لا في صفحةٍ بعينها ليكون موضعُه
   واحدًا في الموقع كلِّه. */
@media (max-width: 30rem) {
  #jumpNav {
    gap: .38rem;
    inset-inline-start: auto;
    inset-inline-end: max(.7rem, env(safe-area-inset-left, 0px));
  }
  #jumpNav button,
  #jumpNav a { width: 2.5rem; height: 2.5rem; opacity: .92; }
  #jumpNav button:active,
  #jumpNav a:active { opacity: 1; }
}

/* ---------- ٥) اللوحيّ ----------
   من ٧٦٨ إلى ١٢٢٠ تتّسع الصفحةُ فلا تُترك بهوامش الهاتف: الحشوُ
   الجانبيُّ يتنفّس، والشريطُ السفليُّ (اللوح) يصير بطاقةً في الركن
   لا شريطًا من حافّةٍ إلى حافّة (وذلك في قاعدته من ٧٦٠). */
@media (min-width: 48rem) and (max-width: 76.25rem) {
  .wrap { width: min(100% - 2.6rem, var(--maxw)); }
}

/* ===========================================================
   لمسات بصرية مشتركة
   =========================================================== */

/* شريط تقدّم القراءة أعلى الصفحة */
#readProgress {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  height: 2.5px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform .1s linear, opacity .3s;
  opacity: 0;
}
#readProgress.on { opacity: 1; }

/* نقش هندسي خفيف يُستعمل خلف الترويسات */
.pattern {
  position: absolute; inset: 0; pointer-events: none; z-index: -1;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 35%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 35%, #000 20%, transparent 72%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='.9' stroke-opacity='.13'%3E%3Cpath d='M30 2 44 16 30 30 16 16Z'/%3E%3Cpath d='M30 30 44 44 30 58 16 44Z'/%3E%3Cpath d='M0 30 14 16 28 30 14 44Z'/%3E%3Cpath d='M32 30 46 16 60 30 46 44Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 54px 54px;
}
html[data-dark] .pattern {
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.9' stroke-opacity='.11'%3E%3Cpath d='M30 2 44 16 30 30 16 16Z'/%3E%3Cpath d='M30 30 44 44 30 58 16 44Z'/%3E%3Cpath d='M0 30 14 16 28 30 14 44Z'/%3E%3Cpath d='M32 30 46 16 60 30 46 44Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ظهور متدرّج للمحتوى عند التحميل */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: riseIn .45s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

/* ===========================================================
   علامةُ نهاية الآية
   نجمتان ثمانيتان مضلَّعتان متشابكتان — الشكلُ الهندسيّ وحده،
   بلا دائرةٍ تحيط به. والرقم في قلبهما بذهبٍ متدرّج، والوهجُ
   يتبع حدود النجمة لا قرصًا حولها.
   والعلامة تُحاذي وسط السطر (vertical-align: middle) فتجلس مع
   الكلام لا تحته.
   =========================================================== */
.mark-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.ayah-mark {
  position: relative;
  display: inline-grid; place-items: center;
  width: 1.75em; height: 1.75em;
  vertical-align: middle;
  margin-inline-start: .2em;
  flex: none;
}

.ayah-mark svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  /* الوهج يتبع حدّ النجمة لأن drop-shadow يعمل على شكل العنصر */
  filter: drop-shadow(0 0 .1em hsl(42 84% 58% / .5));
}
html[data-dark] .ayah-mark svg {
  filter: drop-shadow(0 0 .14em hsl(44 90% 66% / .6));
}

.ayah-mark path { fill: none; stroke-linejoin: round; }
.ayah-mark .am-star   { stroke-width: 3.4; opacity: .95; }
.ayah-mark .am-star-2 { stroke-width: 2; opacity: .5; }

.ayah-mark i {
  position: relative; font-style: normal;
  font-family: var(--digits); font-size: .46em; font-weight: 700;
  color: hsl(40 62% 38%); line-height: 1;
  letter-spacing: 0;
}
html[data-dark] .ayah-mark i {
  color: hsl(44 82% 74%);
  text-shadow: 0 0 .5em hsl(44 90% 66% / .45);
}

/* أثناء تلاوة الآية: النجمة تتوهّج بلون السورة */
.ayah.playing .ayah-mark svg {
  filter: drop-shadow(0 0 .18em hsl(var(--hue) 62% 58% / .65));
}
/* CSS يتقدّم على سمة stroke في العنصر، فيتبدّل اللون كلّه */
.ayah.playing .ayah-mark .am-star,
.ayah.playing .ayah-mark .am-star-2 { stroke: var(--accent-2); }
.ayah.playing .ayah-mark i { color: var(--accent-2); }

/* زرّ صغير دائري للحفظ */
.star-on { color: var(--gold) !important; }
.star-on svg { fill: var(--gold); }


/* ===========================================================
   الأرقام — معالجة موحّدة
   الأرقام العربية-الهندية (٠١٢…) تُرسم بعائلة الواجهة نفسها
   لكن بأرقامٍ متساوية العرض حتى لا تهتزّ الأعمدة، وبوزنٍ
   وتباعدٍ يجعلانها مقروءةً في الأحجام الصغيرة.
   =========================================================== */
.chip,
.rmark, .resume .rmeta,
.saved-item .n,
.res-loc,
.sec-num, .sec-title small,
.ayah-badge, .kicker,
.map-seg, .map-list button,
.rail a small,
.toolbar .val,
.player .p-title, .player .p-sub, .p-time,
.filters .btn span,
.num {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
  letter-spacing: 0;
}

/* الشارات: وزنٌ أثقل قليلًا ليصمد الرقم في الحجم الصغير */
.chip { font-weight: 500; }

/* ---------- الشارات المصحفية ----------
   رقم السورة ورقم الآية ووردة نهايتها ورقم المقطع: خطُّ أميري
   بأرقامه المصحفية. وهي أقصر قامةً من أرقام الواجهة فتُكبَّر قليلًا
   ويُخفَّف وزنها حتى تستوي مع محيطها. */
.ayah-badge, .sec-num, .rmark, .saved-item .n, .ayah-mark i {
  font-family: var(--digits);
  font-weight: 700;
  letter-spacing: .01em;
  font-feature-settings: "tnum" 1;
}
.ayah-badge { font-size: 1.05rem; }
.sec-num    { font-size: .98rem; }
.rmark      { font-size: 1.5rem; }
.saved-item .n { font-size: .88rem; }
.ayah-mark i { font-size: .38em; font-weight: 700; }


/* ===========================================================
   زخارفُ الوضع الذهبيّ
   موضعُها آخرُ الملفِّ عمدًا: انتقاءاتُها متساويةٌ في الأولوية مع
   قواعد ‎html[data-dark]‎، فلا تغلبها إلا إن جاءت بعدها.
   =========================================================== */
/* حواشٍ ذهبيّة: الشريط العلويّ والألواح والحقول */
html[data-mode="gold"] .topbar { border-block-end-color: var(--accent-line); }
html[data-mode="gold"] .panel,
html[data-mode="gold"] .field { border-color: var(--accent-line); }

/* الأزرار: حرفٌ ذهبيّ على أرضيّةٍ كحليّة.
   ويُستثنى الزرُّ الأساسيّ فله لونُه المقلوب أدناه. */
html[data-mode="gold"] .btn:not(.btn-primary) { border-color: var(--accent-line); color: var(--ink-2); }
html[data-mode="gold"] .btn:not(.btn-primary):hover { border-color: var(--accent); color: var(--accent-ink); }

/* الزرُّ الأساسيّ: ذهبٌ مصمتٌ وحرفٌ كحليّ */
html[data-mode="gold"] .btn-primary {
  background: var(--gold-grad);
  border-color: transparent;
  color: hsl(26 46% 8%);
  box-shadow: 0 1px 0 hsl(45 80% 84% / .35) inset, var(--shadow-s);
}
html[data-mode="gold"] .btn-primary:hover {
  background: linear-gradient(135deg, hsl(45 88% 82%) 0%, hsl(43 76% 64%) 38%, hsl(40 64% 50%) 62%, hsl(46 90% 78%) 100%);
  border-color: transparent;
  color: hsl(26 46% 8%);
}
html[data-mode="gold"] .btn[aria-pressed="true"],
html[data-mode="gold"] .btn.is-on {
  background: var(--gold-grad);
  border-color: transparent;
  color: hsl(26 44% 8%);
}

/* الشارات */
html[data-mode="gold"] .chip { border-color: var(--accent-line); }

/* الأسماءُ الكبرى بحروفٍ من ذهب */
html[data-mode="gold"] .brand-name,
html[data-mode="gold"] .hero h1,
html[data-mode="gold"] .surah-name h1 {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* المتصفّحاتُ التي لا تدعم قصَّ الخلفية على النصّ تُبقي اللون الذهبيّ */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-mode="gold"] .brand-name,
  html[data-mode="gold"] .hero h1,
  html[data-mode="gold"] .surah-name h1 { color: var(--gold); background: none; }
}

/* حقلُ البحث: حافّةٌ ذهبيّةٌ تشتدّ عند التركيز */
html[data-mode="gold"] .field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px hsl(43 60% 50% / .16);
}

/* الشعار: مصحفٌ من ذهبٍ على أرضيّةٍ كحليّة، بدل الأخضر المزرقّ */
/* الشريطُ العلويّ: خيطٌ ذهبيّ تحته ووهجٌ خافتٌ يفصله عمّا بعده */
html[data-mode="gold"] .topbar {
  box-shadow: 0 1px 0 hsl(45 60% 60% / .1), 0 10px 30px -18px hsl(43 60% 40% / .5);
}

/* الألواحُ والحواشي: خيطٌ ذهبيٌّ داخليٌّ رقيقٌ يوهم بالتذهيب */
html[data-mode="gold"] .panel {
  box-shadow: inset 0 0 0 1px hsl(45 60% 60% / .08), var(--shadow-s);
}

/* الفواصلُ والقواعد */
html[data-mode="gold"] hr,
html[data-mode="gold"] .rule { border-color: var(--accent-line); }
html[data-mode="gold"] ::selection { background: hsl(43 60% 46% / .3); }

/* أزرارُ الشريط العلويّ في حال التفعيل — ومنها زرُّ تبديل الوضع */
html[data-mode="gold"] .topbar-tools .btn[aria-pressed="true"],
html[data-mode="gold"] .topbar-tools .btn.is-on {
  background: var(--gold-grad);
  border-color: transparent;
  color: hsl(26 44% 8%);
}
html[data-mode="gold"] .topbar-tools .btn:hover {
  border-color: var(--accent-line);
  background: var(--surface);
}

/* الأشرطةُ المجزَّأة (النصّ / المصحف / مختصر) */
html[data-mode="gold"] .seg button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px hsl(45 60% 60% / .22);
}

/* ===========================================================
   السورُ المفضّلة ومواعيدُ قراءتها

   لوحُ الموعد عنصرُ ‎<dialog>‎، فطبقةُ الحجب من المتصفّح نفسِه
   (‎::backdrop‎) لا عنصرًا مصنوعًا، ويتكفّل هو بحبس التنقّل والإغلاق
   بـEscape. ولذلك يعمل في صفحة الفهرس وصفحة القراءة بلا تكرار.
   =========================================================== */
.fav-dlg {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  width: min(30rem, calc(100vw - 2rem));
  box-shadow: var(--shadow-l);
}
.fav-dlg::backdrop { background: hsl(26 40% 4% / .58); backdrop-filter: blur(3px); }
.fav-form { display: grid; gap: .7rem; padding: 1.3rem 1.3rem 1.1rem; }
.fav-form h2 {
  font-family: var(--display); font-size: 1.3rem; font-weight: 700;
  color: var(--accent-ink); margin: 0;
}
html[data-dark] .fav-form h2 { color: var(--accent); }
.fav-lead { margin: 0; font-size: .82rem; color: var(--ink-3); line-height: 1.8; }

.fav-seg { align-self: start; }

.fav-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.fav-row label { flex: 1 1 8rem; display: grid; gap: .28rem; min-width: 0; }
.fav-row .fav-wide { flex: 1 1 100%; }
/* عددُ المرّات يخصّ النوعين معًا، فسطرُه منفصلٌ عنهما بخيط */
.fav-row-times { border-block-start: 1px solid var(--line-soft); padding-block-start: .7rem; }
.fav-row label > span { font-size: .76rem; color: var(--ink-2); }
.fav-row input, .fav-row select {
  font: inherit; font-size: .9rem;
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  min-width: 0;
}
.fav-row input:focus-visible, .fav-row select:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 18%, transparent);
}

.fav-hint {
  margin: 0; font-size: .82rem; color: var(--accent-ink);
  padding-inline-start: .7rem;
  border-inline-start: 2px solid var(--accent-line);
  min-height: 1.4em;
}
html[data-dark] .fav-hint { color: var(--accent); }

.fav-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .2rem; }
.fav-actions .btn-primary { margin-inline-start: auto; }
.fav-drop { color: var(--warn); border-color: var(--warn-line); }
.fav-drop:hover { color: var(--warn); border-color: var(--warn); }

/* الزرُّ الملازم: ظاهرٌ دائمًا كزرّ الرئيسية، لا يتوقّف على النزول */
/* ‎#jumpNav #dockFav‎ لا ‎#dockFav‎ وحده: القاعدةُ العامّة ‎#jumpNav button‎
   تُخفي الأزرارَ حتى يُنزَل بالصفحة، وهي أقوى من مُعرِّفٍ مفرد. */
#jumpNav #dockFav { opacity: 1; visibility: visible; transform: none; }
#jumpNav #dockFav svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#jumpNav #dockFav.is-on { background: var(--accent); border-color: var(--accent); color: hsl(26 22% 8%); }
#jumpNav #dockFav.is-on svg { fill: currentColor; stroke: none; }

/* ===========================================================
   لوحُ التنبيه

   بطاقةٌ في ركن الشاشة لا رسالةٌ عابرة، لأنّ فيها فعلًا يُتَّخذ: فتحُ
   السورة. ويسبقها وقعُ ضوءٍ يجذب العين من غير صوت.
   =========================================================== */
.rem-card {
  position: fixed; z-index: 92;
  inset-block-end: 5.6rem; inset-inline-end: 1.1rem;
  width: min(22rem, calc(100vw - 2.2rem));
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem .95rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-l);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .3s var(--ease), transform .38s var(--ease);
}
.rem-card.is-in { opacity: 1; transform: none; }
.rem-glow {
  position: absolute; inset: -30% -18%;
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, hsl(43 90% 60% / .3), transparent 72%);
  animation: remGlow 2.6s ease-in-out infinite;
}
@keyframes remGlow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.rem-body { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.rem-body b { font-family: var(--display); font-size: 1rem; color: var(--ink); }
.rem-body small { font-size: .76rem; color: var(--ink-3); }
.rem-go { flex: none; padding: .4rem .8rem; font-size: .82rem; }
.rem-x {
  position: absolute; inset-block-start: .2rem; inset-inline-start: .35rem;
  border: 0; background: transparent; color: var(--ink-3);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .2rem;
}
.rem-x:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .rem-card { transition: none; }
  .rem-glow { animation: none; }
}

/* أيّامُ الأسبوع: سبعةُ أزرارٍ مضيئةٌ تعني كلَّ يوم، وإطفاءُ بعضها
   يحصر الموعدَ في الباقي */
.fav-days { display: flex; gap: .3rem; flex-wrap: wrap; }
.fav-day {
  flex: 1 1 2rem; min-width: 2rem;
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .42rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.fav-day:hover { border-color: var(--accent-line); color: var(--ink); }
.fav-day[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink);
}
html[data-dark] .fav-day[aria-pressed="true"] { color: var(--accent); }
.fav-days-note { margin: 0; }

/* حقولُ التنبيه في لوح الموعد */
.fav-remind { border-block-start: 1px solid var(--line-soft); padding-block-start: .7rem; display: grid; gap: .6rem; }
.fav-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--ink-2); cursor: pointer; }
.fav-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.fav-note { grid-column: 1 / -1; margin: 0; font-size: .74rem; color: var(--ink-3); line-height: 1.75; }
.fav-cal { margin-inline-end: auto; font-size: .8rem; }

/* زرُّ التفضيل في رأس السورة */
.fav-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fav-btn.is-on { border-color: var(--accent-line); color: var(--accent-ink); }
.fav-btn.is-on svg { fill: currentColor; stroke: none; }
html[data-dark] .fav-btn.is-on { color: var(--accent); }

/* ---------- خلفيّةُ الصفحة ----------
   الصورةُ تعمّ الصفحةَ كلَّها لا صدرَها وحده. وهي مثبّتةٌ في النافذة
   لكنّها أطولُ منها، ويُزحزَح موضعُها مع النزول (‎--bg-pan‎ يضبطه
   ‎initPageBg‎)، فتمرّ عينُ القارئ على أجزائها كلِّها في رحلة الصفحة
   بدل أن تجمد على قصاصةٍ واحدة.

   وموضعُها ‎z-index: -5‎ خلف طبقات السماء الأربع (‎-4‎ إلى ‎-1‎)، فتبقى
   النجومُ والسُّدُم أمامها. ولذلك أُخرجت من ‎.hero‎: سياقُ تكديسه كان
   يحبسها فيه فتعلو السماء. */
.page-bg {
  position: fixed; z-index: -5;
  inset-inline: 0; top: 0;
  height: 128vh;
  pointer-events: none;
  transform: translate3d(0, calc(var(--bg-pan, 0) * -28vh), 0);
}
.page-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* ٥٨٪ لا ٣٨٪: عند ٣٨ يظهر أعلى المشهد (القوسُ والسماء) وتبقى المكتبةُ
     والفوانيسُ خارج الإطار حتى يُنزَل بالصفحة. تجربةٌ بطلب صاحب الموقع. */
  object-position: 50% 58%;
  display: block;
}
/* الحجاب: يخفّ في أعلى النافذة ويشتدّ نزولًا، فيبقى المشهدُ ظاهرًا
   طولَ الصفحة ولا يزاحم قراءةَ ما فوقه. وهو في فضاء النافذة لا في
   فضاء الصفحة، فلا يتبدّل بالنزول. */
.page-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 78% at 50% 4%, transparent 0%, hsl(26 62% 3% / .32) 100%),
    linear-gradient(to bottom,
      hsl(26 62% 3% / .12) 0%,
      hsl(26 62% 3% / .3) 40%,
      hsl(26 62% 3% / .44) 100%);
}
/* في وضع الورق يصير المشهدُ نسيجًا باهتًا تحت الأرضيّة الدافئة */
/* خُفِّف كما خُفِّف حجابُ صفحة القراءة، بالأرقام نفسِها: تبين ملامحُ
   المشهد بدل أن يصير نسيجًا باهتًا. ولا نصَّ متّصلًا فوقه هنا كما في
   القراءة، فالمقروئيّةُ أوسعُ احتمالًا. */
html[data-mode="paper"] .page-bg::after {
  background:
    radial-gradient(120% 78% at 50% 4%, hsl(38 34% 92% / .34) 0%, hsl(38 34% 92% / .62) 100%),
    linear-gradient(to bottom,
      hsl(38 34% 92% / .36) 0%,
      hsl(38 34% 92% / .60) 44%,
      hsl(38 34% 92% / .74) 100%);
}

/* ===========================================================
   شعلةُ المؤشِّر — على السور وعلى الآيات

   العنصرُ ثابتُ الموضع يُنقل بـ‎transform‎ لا بـ‎top/left‎، فلا يُعيد
   المتصفّحُ حسابَ التخطيط مع كل حركة. ولا يستقبل الضغطَ فلا يحجب ما تحته.
   =========================================================== */
.flame {
  position: fixed; left: 0; top: 0; z-index: 95;
  width: 0; height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s var(--ease);
  will-change: transform;
}
.flame.is-lit { opacity: 1; }
/* يُخفى مؤشِّرُ الجهاز في الرقعة وفي كلِّ ما فيها: الوصلاتُ والأزرار
   تفرض ‎cursor: pointer‎ على نفسها فتغلب الإخفاءَ الموروث، فلولا
   تعميمُه لاجتمع المؤشِّرُ والشعلةُ معًا. */
html.has-flame .shelves, html.has-flame .shelves *,
html.has-flame #stream .ayah, html.has-flame #stream .ayah * { cursor: none; }
/* ويعود مؤشِّرُ اليد على ما يُقصد الضغطُ عليه بعينه */
html.has-flame .fav-dot, html.has-flame .fav-dot *,
html.has-flame [data-no-flame], html.has-flame [data-no-flame] * { cursor: pointer; }

.flame-glow {
  position: absolute; left: 50%; top: 50%;
  /* وهجٌ خفيفٌ يحُفّ الشعلةَ ولا يغمر ما تحتها */
  width: 5.5rem; height: 5.5rem;
  transform: translate(-50%, -34%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    hsl(45 100% 74% / .17) 0%, hsl(40 96% 60% / .07) 45%, transparent 72%);
  animation: flameGlow 2.6s ease-in-out infinite;
}
/* الشعلةُ صورةٌ مرسومةٌ خصّيصًا لهذا الموضع. ونقطةُ الإصابة عند وسط
   لهبها لا عند طرفها: فاليدُ تحمل الشعلةَ فيقع الضوءُ على ما تشير
   إليه، ويمتدّ عمودُها إلى أسفلٍ خارجَ موضع النظر. */
.flame-body {
  position: absolute; left: 50%; top: 50%;
  /* ‎max-width: none‎ لازم: القاعدةُ العامّة تحدّ الصور بعرض أبيها،
     وأبو الشعلة صفرُ العرض فتنعدم */
  width: 2.9rem; height: auto; max-width: none;
  transform: translate(-50%, -13%);
  transform-origin: 50% 20%;
  animation: flameFlicker .62s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px hsl(38 96% 58% / .3));
}

@keyframes flameFlicker {
  from { transform: translate(-50%, -13%) scale(1)            rotate(-.6deg); }
  to   { transform: translate(-50%, -13%) scale(1.025, 1.035) rotate(.6deg); }
}
@keyframes flameGlow {
  0%, 100% { opacity: .78; transform: translate(-50%, -34%) scale(1);    }
  50%      { opacity: 1;   transform: translate(-50%, -34%) scale(1.05); }
}
.flame.is-calm .flame-body,
.flame.is-calm .flame-glow { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .flame-body, .flame-glow { animation: none; }
}