/* ===========================================================
   المُسهِّل — صفحة الفهرس
   إعادة تصميم: هوية معاصرة أنيقة
   =========================================================== */

/* ---------- لوحة متابعة القراءة ----------
   لوحُ خشبٍ بنّيٍّ داكنٍ بعروقٍ مرسومة — لا صورةَ خشبٍ تُجلب — على هيئة
   رفّ مكتبةٍ عتيق بطلب صاحب الموقع. وكانت فيه عروقٌ مخطَّطةٌ فرُفعت
   بطلبه، فبقي تدرّجٌ طوليٌّ هادئ يوهم انحناءَ اللوح، وفوق حافته خيطٌ
   فاتحٌ كأنّ الضوءَ يقع عليها.

   وألوانُ الحرف مثبَّتةٌ فاتحةً في الأوضاع الثلاثة ولا تُترك لـ`--ink`،
   لأنّه يسودّ في وضع الورق فيصير العنوانُ أسودَ على خشبٍ داكنٍ لا يُقرأ.

   وكان نصفَ العرض ملتصقًا باليمين على سبيل التجربة، فترك فراغًا واسعًا
   يكسر اتّزانَ الصدر فوقه، فأُعيد موسَّطًا بعرضٍ أوسع. */
.resume {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  max-width: min(100%, 46rem);
  margin-inline: auto;
  background: linear-gradient(180deg, hsl(28 29% 20%) 0%, hsl(26 31% 15%) 54%, hsl(25 34% 11%) 100%);
  border: 1px solid hsl(30 34% 29%);
  border-radius: var(--radius-l);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
  box-shadow: inset 0 1px 0 hsl(36 46% 58% / .22), var(--shadow-s);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s;
}
.resume:hover {
  box-shadow: inset 0 1px 0 hsl(36 46% 58% / .3), var(--shadow-m);
  transform: translateY(-1px); border-color: hsl(34 40% 40%);
}
.resume .rmark {
  flex: none; width: 3.1rem; height: 3.1rem; border-radius: 12px;
  display: grid; place-items: center;
  background: hsl(28 30% 11% / .72); color: hsl(42 72% 74%);
  font-family: var(--digits); font-size: 1.5rem; font-weight: 700;
  border: 1px solid hsl(36 42% 46% / .6);
}
.resume .rbody { flex: 1; min-width: 11rem; display: block; }
.resume .rlabel { display: block; font-size: .72rem; color: hsl(36 26% 68%); line-height: 1.5; text-transform: uppercase; letter-spacing: .04em; }
.resume .rtitle { display: block; font-family: var(--display); font-size: 1.4rem; font-weight: 700; line-height: 1.3; color: hsl(40 44% 91%); }
.resume .rmeta { display: block; font-size: .78rem; color: hsl(36 22% 74%); line-height: 1.6; }
.resume .rbar {
  display: block;
  height: 3px; border-radius: 3px; background: hsl(28 24% 9% / .7);
  overflow: hidden; margin-top: .55rem; max-width: 22rem;
}
/* زرُّ «أكمل» نُحاسيٌّ على الخشب لا نُعناعيًّا: لونُ التمييز العامّ
   يخاصم البنّيّ، فيُخصَّص داخل الشريط وحدَه ولا يُمسّ في سائر الموقع. */
.resume .btn.btn-primary {
  background: linear-gradient(180deg, hsl(42 62% 62%), hsl(38 58% 50%));
  border-color: hsl(40 52% 44%);
  color: hsl(28 40% 12%);
}
.resume:hover .btn.btn-primary { background: linear-gradient(180deg, hsl(44 68% 68%), hsl(40 62% 54%)); }
.resume .rbar i { display: block; height: 100%; background: hsl(42 64% 58%); border-radius: 3px; }
@media (max-width: 40rem) {
  .resume { max-width: none; }
}

/* ---------- شريط التحكّم ---------- */
/* لوحٌ زجاجيّ طافٍ يجمع البحث والفرز والمرشّحات، فينفصل عن سماء
   الخلفية بدل أن يمتدّ شريطًا شفافًا من حافةٍ إلى حافة. */
/* الحاوية تلتصق بأعلى الشاشة، واللوح الزجاجي داخلها بعرض المحتوى */
.controls {
  position: sticky; top: var(--topbar-h, 3.7rem); z-index: 40;
  padding: .45rem 0 .55rem;
}
.controls .wrap {
  padding: .5rem;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--shadow-s);
  transition: box-shadow .25s var(--ease), border-color .25s, background .25s;
}
.controls.stuck .wrap {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-color: var(--line);
  box-shadow: var(--shadow-m);
}

.controls-row { display: flex; gap: .45rem; align-items: center; }
.controls-row .field { flex: 1 1 14rem; min-width: 0; border-radius: 100px; }

/* عنوانُ صفّ المرشّحات: يبقى ثابتًا في أوّله والصفُّ يُمرَّر بعده */
.filters-label {
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; color: var(--ink-3); white-space: nowrap;
  padding-inline-end: .15rem;
}
.filters-label svg { width: .92rem; height: .92rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

.filters {
  display: flex; align-items: center; gap: .35rem; margin-top: .45rem;
  overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem;
}
.filters::-webkit-scrollbar { display: none; }
.filters .btn {
  font-size: .8rem; padding: .38rem .85rem; flex: none;
  border-radius: 100px; border-color: transparent; background: var(--surface-2);
}
.filters .btn:hover { border-color: var(--line); }
/* تعريف الحالة المفعّلة صراحةً هنا: قاعدة الخلفية أعلاه تأتي بعد
   قاعدة الزرّ المضغوط في theme.css فتلغي لونها لولا هذا. */
.filters .btn[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: transparent;
}
.filters .btn[aria-pressed="true"] span { opacity: .65; }

/* ---------- قائمةُ الترتيب ----------
   استُبدلت `select` الأصليّة بزرٍّ ولائحةٍ من صنعنا، لأنّ لوحةَ الأصليّة
   يرسمها النظامُ فلا تقبل تنسيقًا ولا توافق اللوحة. فصارت الحاشيةُ
   والظلُّ وشريطُ التحديد كلُّها بأيدينا. */
.sortbox { position: relative; flex: none; }
.sort-btn {
  font: inherit; font-size: .84rem; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: 100px; padding: .55rem 1rem; cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.sort-btn:hover { border-color: var(--line); color: var(--ink); }
.sort-btn:focus-visible {
  outline: none; color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 60%, var(--line));
}
.sort-btn[aria-expanded="true"] {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, var(--surface-2));
}
/* السهمُ مرسومٌ بحرفَي حاشيةٍ لا بصورة، وينقلب عند الفتح */
.sort-caret {
  width: .42rem; height: .42rem; flex: none;
  border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .2s var(--ease);
}
.sort-btn[aria-expanded="true"] .sort-caret { transform: translateY(.08em) rotate(225deg); }

.sort-list {
  position: absolute; z-index: 60;
  inset-inline-start: 0; top: calc(100% + .4rem);
  min-width: 100%; width: max-content; max-width: min(18rem, 80vw);
  margin: 0; padding: .3rem; list-style: none;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  border-radius: 14px;
  box-shadow: var(--shadow-m);
  outline: none;
}
.sort-list [role="option"] {
  display: flex; align-items: center; gap: .5rem;
  font-size: .84rem; color: var(--ink-2);
  padding: .5rem .7rem; border-radius: 9px;
  cursor: pointer; white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.sort-list [role="option"]:hover,
.sort-list [role="option"].at {
  background: color-mix(in srgb, var(--gold) 20%, var(--surface));
  color: var(--ink);
}
/* المختارُ يُعلَّم بنقطةٍ ذهبيّةٍ قبله لا باللون وحده، فيُقرأ ولو تشابهت
   الأرضيّاتُ على شاشةٍ باهتة */
.sort-list [role="option"].is-on {
  color: var(--ink); font-weight: 600;
}
.sort-list [role="option"].is-on::before {
  content: ""; flex: none;
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--gold);
}
.sort-list [role="option"]:not(.is-on)::before {
  content: ""; flex: none; width: .42rem; height: .42rem;
}

/* ---------- الخالي وهياكلُ التحميل ---------- */
.empty { text-align: center; padding: 3.6rem 1rem; color: var(--ink-3); }
.empty b { display: block; font-size: 1.05rem; color: var(--ink-2); margin-bottom: .35rem; }
.sk-shelf { height: 13.5rem; border-radius: var(--radius-l); margin-bottom: .7rem; }


/* ---------- عناوين الأقسام ---------- */
.section-head {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: .8rem;
  margin: 2.4rem 0 .4rem;
}
#surahsHead { margin-top: 1rem; }
.section-head h2 { font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.section-head span { font-size: .78rem; color: var(--ink-3); }
.section-head::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ---------- بطاقات المزايا ---------- */
.features {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .8rem; margin-top: 1.1rem;
}
.feature {
  padding: 1.1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.feature:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.feature h3 { font-size: .93rem; margin-bottom: .35rem; display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.feature h3 svg { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: var(--accent-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature p { font-size: .81rem; color: var(--ink-3); margin: 0; line-height: 1.75; }

@media (max-width: 560px) {
  /* الفرز يبقى بجانب البحث في سطرٍ واحد، فلا يُهدر سطرٌ كامل */
  .controls-row { gap: .45rem; }
  .sort { padding: .55rem .6rem; font-size: .78rem; }
  .resume { padding: 1rem 1.1rem; }
}

/* ---------- الآيات المحفوظة ---------- */
.saved-box {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: 1rem 1.1rem;
  margin-bottom: 1.4rem;
}
.saved-head {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--ink-2); font-weight: 600; margin-bottom: .7rem;
}
.saved-head svg { width: 1rem; height: 1rem; flex: none; fill: var(--gold); stroke: none; }
.saved-head .clear {
  margin-inline-start: auto; font: inherit; font-size: .75rem; cursor: pointer;
  background: none; border: 0; color: var(--ink-3); text-decoration: underline;
}
.saved-head .clear:hover { color: var(--warn); }
.saved-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.saved-item {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 100px; padding: .3rem .5rem .3rem .8rem;
  font-size: .82rem; color: var(--ink-2);
}
.saved-item:hover { text-decoration: none; border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.saved-item b { font-family: var(--display); font-size: 1.05em; font-weight: 700; }
.saved-item .n {
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .86rem; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line);
}

/* ---------- نتائج البحث في نصّ القرآن ---------- */
#results { position: relative; z-index: 1; }
.res-list { display: grid; gap: .45rem; padding-top: .9rem; }
.res {
  display: block; padding: .7rem .9rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink);
  transition: border-color .15s, background .15s, transform .15s;
}
.res:hover { text-decoration: none; border-color: var(--accent-line); background: var(--accent-soft); transform: translateX(-3px); }
.res-loc {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--ink-3); margin-bottom: .3rem;
}
.res-loc b { color: var(--accent-ink); font-weight: 600; font-size: 1.05em; }
html[data-dark] .res-loc b { color: var(--accent); }
.res-text {
  display: block; font-family: var(--quran); font-size: 1.22rem;
  line-height: 2.1; color: var(--ink-2);
}
.res-text mark {
  background: hsl(var(--hue) 60% 55% / .22); color: var(--accent-ink);
  border-radius: 4px; padding: 0 .1em;
}
html[data-dark] .res-text mark { color: var(--accent); }
.res-more { display: block; margin: .8rem auto 0; }
.res-note { font-size: .78rem; color: var(--ink-3); padding-top: .6rem; }

/* ---------- متن الفهرس بالخطّ النسخي ---------- */
.feature p, .hero-tagline, .res-note { font-family: var(--body); }
.feature p { font-size: .9rem; line-height: 1.9; }

/* ---------- المزايا: أربعة في صفّين متوازنين ---------- */
.features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: .85rem; }
.feature { padding: 1.15rem 1.2rem; }
.feature h3 { font-family: var(--ui); font-size: .96rem; margin-bottom: .45rem; }

/* ===========================================================
   صدرُ الصفحة — شريطٌ مصوَّر يعلوه اسمُ الموقع

   الصورةُ ليليّةٌ في كل الأوضاع، فحروفُها فاتحةٌ دائمًا لا تتبع اللوحة،
   وأسفلُها يذوب في أرضيّة الصفحة أيًّا كان الوضع.
   =========================================================== */
.hero {
  position: relative;
  display: block; text-align: center;
  padding: clamp(1.7rem, 4vw, 2.9rem) 0 clamp(1.3rem, 2.8vw, 2rem);
  margin-bottom: .2rem;
}

.hero-in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem; align-items: center;
}
.hero-main { min-width: 0; }

/* صار اسمُ الصدر لوجوًا مرسومًا، فالعنوانُ صندوقٌ لصورته لا حروفًا
   تُصبغ بالذهب. ونصُّ الاسم باقٍ في `alt` للقارئ الآليّ ولمحرّكات البحث. */
.hero h1 { margin: 0; line-height: 0; flex: none; }
.hero h1 img {
  display: block; margin-inline: auto;
  width: clamp(9rem, 24vw, 14rem); height: auto;
  filter: drop-shadow(0 3px 16px hsl(26 60% 3% / .5));
}

/* اللوجو موسَّطٌ في الصدر والنصُّ تحته، بطلب صاحب الموقع. وكان إلى جانبه
   صفًّا واحدًا ليقلّ الارتفاع، فلمّا صار اللوجو عريضًا (نسبة ٣:٢) لم
   يتّزن إلى جانب النصّ، فعاد إلى الوسط. وبقي حشوُ الصدر مقلَّصًا. */
.hero-row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(.9rem, 3vw, 2.4rem);
}
/* الجملتان: ذهبٌ متدرّجٌ يُصبغ داخل الحرف، وخطٌّ إسلاميٌّ مميّز. وحدُّ
   العرض بالمحارف يجعل كلَّ جملةٍ كتلةً هادئة إلى جانب اللوجو لا سطرًا
   طويلًا يزاحمه. وللمتصفّح الذي لا يعرف صبغَ النصّ لونٌ ذهبيٌّ صريح. */
/* الجانبان كتلتان متساويتان (`flex: 1 1 0`) واللوجو بينهما `flex: none`،
   فيقع في المنتصف هندسيًّا لا تقريبًا. ولو تُرك كلٌّ منهما يأخذ عرضَ
   نصِّه لاختلّ الميزانُ وزاغ اللوجو عن الوسط. */
.hero-line {
  flex: 1 1 0; margin: 0;
  font-family: var(--fancy);
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  line-height: 1.95; max-width: 15ch; text-align: center;
  background: linear-gradient(135deg,
    hsl(45 88% 84%) 0%, hsl(43 76% 64%) 38%, hsl(38 64% 46%) 62%, hsl(46 92% 80%) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 7px hsl(26 60% 3% / .9));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-line { color: hsl(45 82% 74%); background: none; }
}
/* في الضيّق تتراصّ الثلاثةُ عمودًا. ولم يُترك ذلك لـ‎flex-wrap‎ لأنّ
   ‎max-width‎ بالمحارف يقيّد الجملةَ فلا يبلغ الصفُّ حدَّ الانكسار، فتنضغط
   الثلاثةُ في سطرٍ واحدٍ ويضيع اللوجو بينها. */
@media (max-width: 40rem) {
  .hero-row { flex-direction: column; gap: .35rem; }
  .hero-line { max-width: 30ch; }
}

/* ===========================================================
   الرفوف — السورُ متتابعةٌ على رفوفٍ ممتلئة

   الكتابُ غلافٌ قائمٌ في إطارٍ مذهَّب لا بطاقةٌ عريضة، فتُقرأ السورُ
   كما تُقرأ الكتبُ في خزانة. وعند مرور المؤشِّر يميل الكتابُ نحوه
   ويرتفع عن اللوح. ولا يُذكر الجزءُ إلا شارةً فوق أوّل سورةٍ تبدأ فيه.
   =========================================================== */
.shelves { display: block; margin-block: .3rem 1.5rem; }

.shelf-row {
  position: relative;
  display: flex;
  gap: var(--book-gap, .8rem);
  justify-content: flex-start;
  /* الحشوُ الجانبيّ موضعُ المنابر، وقد حُسب عرضُ الكتب على ما بقي */
  padding: 1.5rem var(--lamp-pad, 1.4rem) .95rem;
}

.book {
  flex: 0 0 auto;
  width: var(--book-w, 8rem);
  position: relative;
  transform-style: preserve-3d;
}

/* شارةُ الجزء فوق أوّل سورةٍ تبدأ فيه.
   وموضعُها خارجُ الكتاب لئلّا تزاحم غلافَه؛ وحشوُ الصفّ العلويُّ
   يتّسع لها ولبروز الكتاب معًا. */
.juz-tag {
  position: absolute; z-index: 4;
  inset-block-end: calc(100% + .3rem);
  inset-inline-start: 0;
  font: inherit; font-family: var(--ui);
  font-size: .64rem; font-weight: 600; line-height: 1;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 100px;
  padding: .26rem .55rem;
  white-space: nowrap; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.juz-tag::after {
  /* خيطٌ نازلٌ من الشارة إلى الكتاب يربطها به */
  content: ""; position: absolute; top: 100%; inset-inline-start: .8rem;
  width: 1px; height: .3rem; background: var(--accent-line);
}
.juz-tag:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ---------- منابرُ الرفّ ----------
   مشعلان قائمان عند طرفَي كلِّ رفّ يحُدّانه ويضيئان ما عليه. وهما
   الصورةُ نفسُها التي يحملها المؤشِّرُ على السور (`assets/img/torch.png`
   من تصميم صاحب الموقع)، فيتّحد المشعلُ في اليد والمشعلُ على الرفّ.

   والصورةُ خلفيّةٌ لا عنصرُ ‎img‎: لا تُطلب إلا مرّةً مهما تكرّرت
   المشاعل، ولا تدخل شجرةَ الوصول، ونسبتُها محفوظةٌ بـ‎contain‎.
   والوهجُ ‎drop-shadow‎ لا ‎box-shadow‎: يتبع حرفَ اللهب لا مستطيلَ
   العنصر، فلا يظهر ضوءٌ في أركانٍ فارغة. */
.shelf-lamp {
  position: absolute; bottom: .5rem; z-index: 2;
  /* نسبةُ الصورة ١٧٠:٢٦٩ */
  width: 2.25rem; height: 3.56rem;
  pointer-events: none;
  background: url("../img/torch.png") center bottom / contain no-repeat;
  /* الوهجُ القريب ‎drop-shadow‎ لا ‎box-shadow‎: يتبع حرفَ اللهب لا
     مستطيلَ العنصر. ومَيلُه إلى أعلى لأنّ النار تصعد. والظلالُ لا
     تُحدث فيضًا أفقيًّا في الصفحة بخلاف العناصر المطلقة.

     وهو **ثابتٌ لا يُحرَّك**: كان النبضُ على ‎filter‎ فكان المتصفّح
     يُعيد رَسْتَرة ستّةٍ وأربعين مشعلًا بثلاث طبقات ضبابٍ في كلِّ
     إطار. والنبضُ الآن على شفافيّة الهالة وحدها، وهي تُدار في طبقة
     التركيب فلا تُكلّف رسمًا. */
  filter: drop-shadow(0 -3px 7px hsl(45 96% 70% / .45));
}
/* داخلَ حدّ الصفّ لا خارجَه: ما خرج عن العرض يفيض الصفحةَ أفقيًّا */
.shelf-lamp-start { inset-inline-start: .1rem; }
.shelf-lamp-end   { inset-inline-end: .1rem; animation-delay: -2.1s; }

/* الهالة: النارُ تصعد ولا تستدير، فالضوءُ عمودٌ يرتفع عن اللهب
   ويتّسع صاعدًا ثمّ يخفت — لا قرصًا مركزُه المشعل. وأسفلُ الهالة عند
   اللهب نفسِه (‎bottom: 64%‎ من العنصر) فلا ينزل الضوءُ إلى قاعدته. */
.shelf-lamp::after {
  content: ""; position: absolute;
  left: 50%; bottom: 64%;
  /* عمودٌ نحيلٌ عالٍ: أشبهُ بصعود النار من قرصٍ عريض. وعرضُه مقيَّدٌ
     عمدًا — العنصرُ المطلق يُحدث فيضًا أفقيًّا في الصفحة إن تجاوز
     حاشيةَ الصفّ، وقد وقع ذلك بعرضٍ ٣٠٠٪ فبلغ الفيضُ ١٨ بكسلًا. */
  width: 175%; height: 380%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 100%,
    hsl(45 96% 68% / .34) 0%,
    hsl(42 92% 62% / .17) 34%,
    hsl(40 90% 58% / .06) 62%,
    transparent 82%);
  animation: lampBreath 4.2s ease-in-out infinite;
}
/* النبضُ على الشفافيّة وحدها: لا رسمَ ولا تخطيط، إنّما تركيب */
@keyframes lampBreath {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1;   }
}
html[data-mode="gold"] .shelf-lamp::after {
  background: radial-gradient(ellipse 50% 100% at 50% 100%,
    hsl(46 98% 72% / .42) 0%,
    hsl(43 94% 64% / .21) 34%,
    hsl(41 92% 60% / .08) 62%,
    transparent 82%);
}
@media (prefers-reduced-motion: reduce) {
  .shelf-lamp::after { animation: none; }
}
@media (max-width: 34rem) {
  /* في أضيق الشاشات يضيق الرفُّ عن المنابر فتُطوى */
  .shelf-lamp { display: none; }
  .shelf-row { --lamp-pad: .2rem; }
}

/* ---------- لوحُ الرفّ ----------
   لوحٌ رقيقٌ تستند إليه الكتب: حرفُه العلويّ مضيءٌ ووجهُه يغمق نزولًا،
   وتحته ظلٌّ يفصله عن الرفّ الذي يليه. */
.shelf-plank {
  position: absolute; inset-inline: -.5rem; bottom: .1rem;
  height: .72rem; border-radius: 2px 2px 6px 6px;
  background:
    linear-gradient(180deg, var(--plank-lip) 0 1.5px, transparent 1.5px),
    linear-gradient(180deg, var(--plank-1) 0%, var(--plank-1) 36%, var(--plank-2) 100%);
  box-shadow:
    0 -2px 16px var(--plank-glow),
    0 9px 20px -10px hsl(0 0% 0% / .55),
    inset 0 -1px 0 var(--plank-edge);
}
/* ظلُّ الكتب على وجه اللوح */
.shelf-plank::before {
  content: ""; position: absolute; inset-inline: 2%; bottom: 100%;
  height: .65rem; pointer-events: none;
  background: linear-gradient(to top, var(--plank-shade), transparent);
}
/* حاملا الرفّ عند طرفيه */
.shelf-plank::after {
  content: ""; position: absolute; inset-inline: 0; top: 100%;
  height: .3rem; pointer-events: none; border-radius: 0 0 3px 3px; opacity: .85;
  background:
    linear-gradient(90deg, var(--plank-2) 0 1.1rem, transparent 1.1rem) left top / 100% 100% no-repeat,
    linear-gradient(270deg, var(--plank-2) 0 1.1rem, transparent 1.1rem) right top / 100% 100% no-repeat;
}

:root {
  --plank-1:     hsl(32 34% 70%);
  --plank-2:     hsl(27 30% 45%);
  --plank-lip:   hsl(40 62% 90% / .85);
  --plank-edge:  hsl(24 32% 32% / .5);
  --plank-shade: hsl(28 30% 38% / .26);
  --plank-glow:  hsl(38 50% 60% / .2);
}
html[data-dark] {
  --plank-1:     hsl(26 15% 27%);
  --plank-2:     hsl(26 22% 12%);
  --plank-lip:   hsl(26 22% 68% / .38);
  --plank-edge:  hsl(26 40% 3% / .8);
  --plank-shade: hsl(26 40% 3% / .55);
  --plank-glow:  hsl(30 40% 60% / .1);
}
html[data-mode="gold"] {
  --plank-1:     hsl(26 26% 22%);
  --plank-2:     hsl(26 46% 7%);
  --plank-lip:   hsl(45 74% 68% / .7);
  --plank-edge:  hsl(43 40% 30% / .55);
  --plank-shade: hsl(26 55% 2% / .6);
  --plank-glow:  hsl(43 80% 58% / .26);
}

/* ===========================================================
   الكتاب: غلافٌ قائمٌ في إطارٍ مذهَّب
   =========================================================== */
/* الإطارُ صورةٌ متجهيّةٌ مضمَّنة: أركانُها زوايا مذهَّبة لا تتمطّط،
   وحروفُها خطّان يمتدّان بطول الضلع. */
:root {
  --tome-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d4ab55'%3E%3Crect x='2.5' y='2.5' width='115' height='115' rx='3' stroke-width='2.4'/%3E%3Crect x='9' y='9' width='102' height='102' rx='1.5' stroke-width='1.1' opacity='.7'/%3E%3C/g%3E%3Cg fill='%23edd493'%3E%3Cpath d='M9 27V9h18v3.2H12.2V27Z'/%3E%3Cpath d='M111 27V9H93v3.2h14.8V27Z'/%3E%3Cpath d='M9 93v18h18v-3.2H12.2V93Z'/%3E%3Cpath d='M111 93v18H93v-3.2h14.8V93Z'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.3'/%3E%3Ccircle cx='102.5' cy='17.5' r='2.3'/%3E%3Ccircle cx='17.5' cy='102.5' r='2.3'/%3E%3Ccircle cx='102.5' cy='102.5' r='2.3'/%3E%3C/g%3E%3C/svg%3E");
}

.tome {
  position: relative; display: block;
  /* نسبةُ الأغلفة المرسومة ٢:٣، فيقع الغلافُ كاملًا بلا قصّ */
  aspect-ratio: 2 / 3;
  border-radius: 3px 7px 7px 3px;
  overflow: hidden;
  background: hsl(26 40% 8%);
  color: inherit; text-decoration: none;
  box-shadow: var(--shadow-s);
  transition: box-shadow .3s var(--ease);
}
.tome:hover { text-decoration: none; }

.tome-art { position: absolute; inset: 0; display: block; }
.tome-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.tome-art img { filter: saturate(.85) contrast(1.02); transition: transform .5s var(--ease), filter .3s var(--ease); }
.tome:hover .tome-art img { transform: scale(1.06); filter: saturate(1) contrast(1.05); }

/* الغلافُ المرسوم يُعرض كما صُمّم: لا يُخفَّف لونُه ولا يُحجب أعلاه،
   ويبقى حجابٌ في أسفله وحده ليُقرأ عليه اسمُ السورة. */
.tome-art.has-cover img { filter: none; }
.tome:hover .tome-art.has-cover img { filter: none; transform: scale(1.04); }
.tome-art.has-cover ~ .tome-veil {
  background:
    linear-gradient(to bottom,
      hsl(26 58% 4% / .92) 0%, hsl(26 58% 4% / .62) 18%,
      hsl(26 58% 4% / .12) 38%, transparent 52%),
    linear-gradient(to top, hsl(26 58% 4% / .5) 0%, transparent 16%);
}

/* وما لم يُرسم له غلافٌ بعدُ فأرضيّةٌ بلون السورة تحت رسمها الخطّيّ،
   فلا تتشابه كتبُ الرفّ ولا يبدو موضعُ الغلاف فارغًا. وحجابُه أخفّ
   من حجاب الغلاف المرسوم إذ لا صورةَ تحته تُحجب. */
.tome-art:not(.has-cover) {
  background: linear-gradient(155deg,
    hsl(var(--hue) 30% 25%) 0%,
    hsl(var(--hue) 28% 16%) 55%,
    hsl(var(--hue) 34% 10%) 100%);
}
.tome-art:not(.has-cover) ~ .tome-veil {
  background:
    linear-gradient(to bottom, hsl(26 58% 4% / .9) 0%, hsl(26 58% 4% / .6) 26%, transparent 62%),
    linear-gradient(to top, hsl(26 58% 4% / .42) 0%, transparent 24%);
}

/* الحجاب: يعتم الأعلى ليُقرأ الاسم، ويعتم الأسفلَ قليلًا للرقم */
.tome-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, hsl(26 58% 4% / .96) 0%, hsl(26 58% 4% / .78) 24%, hsl(26 58% 4% / .18) 52%, transparent 68%),
    linear-gradient(to top, hsl(26 58% 4% / .55) 0%, transparent 26%);
}

.tome-frame {
  position: absolute; inset: 0; pointer-events: none;
  border: 11px solid transparent;
  border-image: var(--tome-frame) 30 stretch;
  opacity: .82;
  transition: opacity .3s var(--ease);
}
.tome.is-ready .tome-frame { opacity: 1; }
.tome:hover .tome-frame { opacity: 1; }

/* الكعب: على الحرف الداخليّ (اليمين في اتّجاه القراءة) فيبدو كتابًا لا لوحة */
.tome-spine {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: .42rem; pointer-events: none;
  background: linear-gradient(to var(--spine-dir, left),
    hsl(26 55% 3% / .75) 0%, hsl(26 40% 14% / .5) 45%, hsl(45 60% 70% / .22) 82%, transparent 100%);
  box-shadow: inset -1px 0 0 hsl(45 60% 66% / .18);
}

.tome-num {
  position: absolute; bottom: .48rem; inset-inline-end: .7rem;
  font-family: var(--digits); font-size: .72rem; font-weight: 700;
  color: hsl(45 76% 74%); opacity: .85;
  text-shadow: 0 1px 4px hsl(26 60% 3% / .9);
}
/* علامةُ اكتمال الشرح: نقطةٌ صغيرةٌ لا تزاحم الغلاف، تتّضح عند المرور.
   والختمُ علامةٌ لا زرّ فلا يستقبل الإشارة. وموضعُه ركنُ الغلاف الأيمن
   بطلب صاحب الموقع، والرقمُ في الأيسر — فلا يزدحمان. (وكان إلى جانب
   الرقم لأنّ ركنَ اليمين كان لزرّ التفضيل فيتلقّى الإشارةَ بدلًا منه؛
   ثم رُفع الزرُّ عن الأغلفة فخلا الركن.) */
.tome-seal {
  position: absolute; pointer-events: none;
  bottom: .52rem; inset-inline-start: .72rem;
  width: .72rem; height: .72rem; border-radius: 50%;
  display: grid; place-items: center;
  background: hsl(43 60% 52% / .55);
  box-shadow: 0 0 6px hsl(43 80% 56% / .3);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.tome:hover .tome-seal { background: hsl(43 70% 58% / .95); box-shadow: 0 0 10px hsl(43 84% 60% / .55); }
.tome-seal svg { width: .48rem; height: .48rem; fill: none; stroke: hsl(26 46% 8%); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; display: block; opacity: .8; }

/* لوحُ الاسم في أعلى الغلاف، والرقمُ والختمُ في أسفله */
.tome-plate {
  position: absolute; inset-inline: .7rem; top: .7rem;
  display: block; text-align: center; pointer-events: none;
}
.tome-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(.88rem, 1.3vw, 1.05rem); font-weight: 700;
  line-height: 1.35;
  color: hsl(45 80% 76%);
  text-shadow: 0 1px 6px hsl(26 60% 3% / .95);
  overflow-wrap: anywhere;
}
.tome-meta {
  display: block; margin-top: .1rem;
  font-family: var(--ui); font-size: .6rem;
  color: hsl(42 20% 78% / .78);
  text-shadow: 0 1px 5px hsl(26 60% 3% / .9);
}

/* موعدُ القراءة يُعرض على الغلاف ولا يُعيَّن منه: تعيينُه في صفحة
   القراءة وحدها، فلا يزاحم الأغلفةَ زرٌّ في كل ركن. */

/* شريطُ الموعد على حرف الغلاف الأسفل */
.tome-when {
  position: absolute; z-index: 6;
  inset-inline: 0; inset-block-end: 0;
  padding: .18rem .3rem;
  font-family: var(--ui); font-size: .58rem; line-height: 1.5; font-weight: 600;
  text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: hsl(26 46% 8%);
  background: linear-gradient(180deg, hsl(45 82% 74%), hsl(42 72% 62%));
}

/* الشريطُ يشغل الحرفَ الأسفل، فيعلو عنه الرقمُ والختمُ لئلّا يتوارَيا */
.tome:has(.tome-when) .tome-num { bottom: 1.55rem; }
.tome:has(.tome-when) .tome-seal { bottom: 1.59rem; }

/* ---------- الغلافُ المجرَّد ----------
   سورةٌ في الفهرس لم يُضَف نصُّها بعد: كتابٌ ساكنٌ على الرفّ لا صورةَ
   على غلافه ولا رسم، إنّما اسمُه وعددُ آياته. ولا يُضغط لأنّ لا صفحةَ
   له، فلا يُرفع ولا يُضاء كما تُرفع أخواتُه. */
.tome.is-stub {
  cursor: default;
  background:
    linear-gradient(160deg, hsl(var(--hue) 14% 17% / .55), transparent 58%),
    linear-gradient(to bottom, var(--stub-1), var(--stub-2));
  box-shadow: none;
}
.tome.is-stub .tome-frame { opacity: .3; }
.tome.is-stub .tome-num { opacity: .45; }
.tome.is-stub .tome-spine { opacity: .5; }
.tome.is-stub .tome-name { color: var(--stub-ink); text-shadow: none; }
.tome.is-stub .tome-meta { color: var(--stub-ink-2); text-shadow: none; }

/* الاسمُ في وسط الغلاف لا في أسفله، إذ لا صورةَ تزاحمه */
.tome.is-stub .tome-plate {
  inset-block: 0; display: grid; align-content: center;
  padding-inline: .4rem;
}
.tome-soon {
  position: absolute; inset-inline: 0; bottom: .62rem;
  padding-inline: 1.7rem;                 /* لئلّا يزاحم رقمَ الركن */
  text-align: center;
  font-family: var(--ui); font-size: .58rem;
  color: var(--stub-ink-2); opacity: .85;
}

:root {
  --stub-1:     hsl(38 20% 88%);
  --stub-2:     hsl(34 18% 80%);
  --stub-ink:   hsl(30 26% 27%);
  --stub-ink-2: hsl(30 18% 37%);
}
html[data-dark] {
  --stub-1:     hsl(26 16% 17%);
  --stub-2:     hsl(26 20% 12%);
  --stub-ink:   hsl(26 14% 68%);
  --stub-ink-2: hsl(26 10% 52%);
}
html[data-mode="gold"] {
  --stub-1:     hsl(26 30% 14%);
  --stub-2:     hsl(26 42% 9%);
  --stub-ink:   hsl(44 26% 66%);
  --stub-ink-2: hsl(43 16% 50%);
}

/* ---------- الميلُ الثلاثيّ ----------
   يُضاف الصنف ‎can-tilt‎ من الجافاسكربت، ولا يُضاف على الأجهزة اللمسية
   ولا لمن طلب تقليل الحركة، فيبقى السلوكُ الأصليّ لهم. */
.shelves.can-tilt .book {
  transform:
    perspective(560px)
    translateY(var(--lift, 0px))
    scale(var(--sc, 1))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition: transform .18s var(--ease);
}
.shelves.can-tilt .book:hover,
.shelves.can-tilt .book:focus-within {
  --lift: -17px; --sc: 1.075;
  z-index: 3;
}
/* الكتابُ المجرَّد يميل كإخوته فلا يبدو الرفُّ جامدًا، لكنّه يرتفع
   أقلّ ولا يبرق: ليس وراءه ما يُفتح */
.shelves.can-tilt .book:has(> .tome.is-stub):hover,
.shelves.can-tilt .book:has(> .tome.is-stub):focus-within { --lift: -7px; --sc: 1.035; }
.shelves.can-tilt .book:has(> .tome.is-stub)::after { display: none; }
.shelves.can-tilt .book:hover > .tome,
.shelves.can-tilt .book:focus-within > .tome {
  box-shadow: var(--shadow-l), 0 0 22px hsl(43 70% 52% / .3);
}

/* البريق: بقعةُ ضوءٍ تتبع المؤشِّر على سطح الكتاب المائل */
.shelves.can-tilt .book::after {
  content: ""; position: absolute; inset: 0; z-index: 6;
  border-radius: 3px 7px 7px 3px; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--ease);
  background: radial-gradient(46% 40% at var(--gx, 50%) var(--gy, 50%),
              hsl(45 88% 80% / .26), transparent 72%);
}
.shelves.can-tilt .book:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .shelves.can-tilt .book { transition: none; }
}

/* شارةُ حصر الجزء */
.juz-chip { gap: .3rem; }
.juz-chip svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

@media (max-width: 40rem) {
  .shelf-row { padding-top: 1.35rem; padding-bottom: .85rem; }
}

/* ===========================================================
   الوضعُ الذهبيّ — ما يخصّ الصفحة الرئيسية
   يأتي بعد قواعد الوضع الداكن لأنّ الانتقاءين متساويان في الأولوية،
   فيغلب الأخيرُ منهما.
   =========================================================== */
/* عناوينُ الأقسام ذهبيّةٌ وخيطُها يتلاشى من الذهب */
html[data-mode="gold"] .section-head h2 { color: var(--gold); }
html[data-mode="gold"] .section-head::after {
  background: linear-gradient(90deg, var(--accent-line), transparent);
}

/* شارةُ التصفية المختارة بحرفٍ من ذهب */
html[data-mode="gold"] .filters .btn[aria-pressed="true"] {
  background: var(--gold-grad);
  border-color: transparent;
  color: hsl(26 44% 8%);
}