/*! qm-manuscript.css — Qawlat «المخطوط الحيّ» (Living Manuscript) enhancement layer.
   v1 — 2026-06-17
   ----------------------------------------------------------------------------
   طبقة المادّة البصريّة فوق qm-tokens/qm-system: حُبيبات ورق خفيفة + تذهيب
   (illumination) + مادّة بطاقات متطبّقة بعمق + رؤوس أقسام تحريريّة + عدّ تصاعديّ.

   🔴 الهويّة مقفلة: أخضر #173a2f + ذهبيّ شعائريّ (◈/مسطرة/تذهيب فقط، لا كلون واجهة)
      + ورق بارد. الواجهة Noto Naskh، الآيات HAFS.
   🔴 browse.html لا يُحمِّل هذه الطبقة أبدًا (واجهة تلاوة مقدّسة).
   🔴 حركة GPU فقط (transform/opacity)؛ تُحترَم prefers-reduced-motion.
   كل القواعد محصورة بـ body.theme-modern فلا تتسرّب لصفحات legacy.
   ============================================================================ */

/* ── 1. حُبيبات الورق — نسيج رماديّ بارد خفيف جدًّا على كامل الصفحة ──────────────
   يُضاف كطبقة background-image فوق لون الورق نفسه (background-blend-mode)، بلا
   عنصر مطلق فلا يتعارض مع z-index الهيدر/الدُرج. شدّة منخفضة كي يُحَسّ لا يُرى. */
/* longhand only (لا shorthand) كي لا نمسّ لون الورق؛ وبتخصيص html body.theme-modern
   كي نفوز على قاعدة body المختصرة في site.css التي تصفّر background-image. */
html body.theme-modern {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-blend-mode: multiply;
  /* لا background-attachment:fixed — يُسبّب إعادة طلاء/jank على الجوّال (مخالف لقاعدة emil GPU) */
}
html body.theme-modern.dark {
  /* على الورق الداكن: نسيج فاتح بمزج خافت جدًّا */
  background-blend-mode: soft-light;
}

/* ── 2. المِسطرة المُذهَّبة (illuminated headpiece) ───────────────────────────
   ترقية .home-sig و.qm-sig إلى مِسطرة افتتاح المخطوط: ◈ مركزيّ على خطّ ذهبيّ
   مزدوج متلاشٍ من الطرفين، مع نقطتَي ختم صغيرتَين. لمسة افتتاح المصاحف. */
body.theme-modern .home-sig {
  position: relative;
  width: min(360px, 78%);
  height: 14px;
  margin: 18px 0 10px;
  color: var(--qm-gold);
  background: none;
}
body.theme-modern .home-sig::before {
  content: "\25C8";              /* ◈ */
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 13px; line-height: 1;
  background: var(--qm-page);
  padding-left: 11px;
  z-index: 1;
}
body.theme-modern .home-sig::after {
  content: "";
  position: absolute; right: 22px; left: 0; top: 50%;
  height: 0;
  transform: translateY(-50%);
  background: none;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  /* مسطرة ذهبيّة مزدوجة رفيعة (3px فاصل)، متلاشية إلى اليسار */
  border-image: linear-gradient(to left, currentColor 0%, currentColor 30%, transparent 100%) 1;
  height: 3px;
  opacity: .6;
}

/* ── 3. هالة التذهيب خلف البطل ────────────────────────────────────────────────
   توهّج ذهبيّ/أخضر دائريّ خافت خلف عمود العنوان — يمنح عمقًا «مخطوطيًّا» بلا إطار
   صندوقيّ. يُحقن عبر ::before على عمود البطل (أوّل طفل في .home-atlas). */
body.theme-modern .home-atlas > div:first-child {
  position: relative;
}
body.theme-modern .home-atlas > div:first-child::before {
  content: "";
  position: absolute;
  top: -70px; right: 0;
  width: min(460px, 96%); height: 460px;
  background: radial-gradient(circle at 72% 28%,
    var(--qm-gold-24) 0%, rgba(197,148,45,.10) 30%, var(--qm-accent-06) 52%, transparent 74%);
  pointer-events: none;
  z-index: 0;
}
body.theme-modern.dark .home-atlas > div:first-child::before {
  background: radial-gradient(circle at 72% 28%,
    rgba(230,196,98,.20) 0%, rgba(230,196,98,.08) 34%, rgba(98,211,170,.10) 54%, transparent 76%);
}
body.theme-modern .home-atlas > div:first-child > * { position: relative; z-index: 1; }

/* العنوان «قَولات» — حبر أعمق + ظلّ تذهيب خفيف جدًّا يفصله عن الورق */
body.theme-modern .home-title {
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
body.theme-modern.dark .home-title { text-shadow: none; }

/* ── 4. رؤوس الأقسام التحريريّة — eyebrow ذهبيّ ◈ + مسطرة قصيرة ────────────────
   يستبدل الحدّ العلويّ الرماديّ المسطّح بافتتاح مُذهَّب صغير يمنح كلّ قسم إيقاعًا. */
body.theme-modern .home-section {
  border-top: 0;
  position: relative;
}
body.theme-modern .home-section::before {
  content: "\25C8";              /* ◈ */
  position: absolute; top: 4px; right: 0;
  color: var(--qm-gold);
  font-size: 12px; line-height: 1;
}
body.theme-modern .home-section .home-section-head {
  padding-top: 26px;
  border-top: 1px solid var(--qm-gold-16);
}

/* ── 5. مادّة البطاقات — من المسطّح بحدّ شعريّ إلى السطح المتطبّق ───────────────
   كلّ بطاقات الرئيسية تكتسب: ظلّ ناعم متدرّج + شريط تذهيب علويّ يُرسَم عند المرور
   + رفع لطيف. يكسر «المستطيل المسطّح المتكرّر» (أبرز سمة AI-default).
   (الرولأوت لاحقًا يضمّ أصناف بطاقات الصفحات الأخرى لهذه الكتلة.) */
body.theme-modern :is(
  .home-principle, .home-proof-link, .home-benefit,
  .home-feature, .home-atlas-panel
) {
  position: relative;
  background: var(--qm-surface);
  box-shadow: var(--qm-shadow-sm);
  transition: transform .2s var(--qm-ease-out),
              box-shadow .2s var(--qm-ease-out),
              border-color .2s var(--qm-ease-out);
}
/* شريط تذهيب علويّ يُرسَم من اليمين عند المرور (scaleX على GPU) */
body.theme-modern :is(.home-principle, .home-proof-link, .home-benefit, .home-feature)::after {
  content: "";
  position: absolute; top: 0; right: 0; left: 0;
  height: 2px;
  background: linear-gradient(to left, var(--qm-gold), var(--qm-gold-deep));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .26s var(--qm-ease-out);
  border-radius: inherit;
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.theme-modern :is(.home-principle, .home-proof-link, .home-benefit, .home-feature):hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(20,32,26,.12);
    border-color: var(--qm-accent);
  }
  body.theme-modern :is(.home-principle, .home-proof-link, .home-benefit, .home-feature):hover::after {
    transform: scaleX(1);
  }
}
body.theme-modern :is(.home-principle, .home-proof-link, .home-benefit, .home-feature):active {
  transform: translateY(-1px) scale(.992);
}

/* البطاقة المميّزة الأولى في «ما تحتويه» تحتفظ بتدرّجها لكن بشريط دائم خفيف */
body.theme-modern .home-feature:nth-child(1)::after { transform: scaleX(1); opacity: .7; }

/* لوحة الأطلس (خريطة الموسوعة) — إطار تذهيب داخليّ خفيف يمنحها حضور «الصفحة» */
body.theme-modern .home-atlas-panel {
  border-color: var(--qm-border-strong);
  box-shadow: var(--qm-shadow-md);
}
body.theme-modern .home-atlas-head {
  background: linear-gradient(100deg, var(--qm-accent-10), var(--qm-gold-10));
  border-bottom: 1px solid var(--qm-gold-16);
}

/* ── 6. الأرقام المُذهَّبة + العدّ التصاعديّ ───────────────────────────────────
   الأرقام الكبرى (أطلس + برهان) تكتسب حبرًا أعمق وومضة ذهبيّة عند الإطار، وتُعدّ
   تصاعديًّا من صفر عند دخول الشاشة (qm-manuscript.js). */
body.theme-modern .atlas-count {
  color: var(--qm-ink-strong);
}
body.theme-modern .atlas-row:hover .atlas-count { color: var(--qm-ink); }
/* أثناء العدّ: لا قفزة تخطيط — العرض ثابت بأرقام جدوليّة (موروث من .num) */
body.theme-modern [data-count] { font-variant-numeric: tabular-nums lining-nums; }

/* سهم الأطلس ينزلق يسارًا عند المرور (تلميح تفاعليّ) */
body.theme-modern .atlas-arrow,
body.theme-modern .home-feature em,
body.theme-modern .home-route em {
  display: inline-block;
  transition: transform .2s var(--qm-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.theme-modern .atlas-row:hover .atlas-arrow,
  body.theme-modern .home-feature:hover em,
  body.theme-modern .home-route:hover em { transform: translateX(-5px); }
}

/* ── 7. مسطرة ذهبيّة تُرسَم تحت الروابط النصّيّة عند المرور (تفاعل) ───────────── */
body.theme-modern :is(.home-sample a, .home-direct a) {
  position: relative;
}
body.theme-modern .home-sample a {
  border-bottom-color: var(--qm-gold-24);
}
body.theme-modern .home-sample a::after {
  content: "";
  position: absolute; right: 0; left: 0; bottom: -1px;
  height: 2px;
  background: var(--qm-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .24s var(--qm-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.theme-modern .home-sample a:hover::after { transform: scaleX(1); }
}

/* ── 8. الرولأوت: مادّة موحّدة لبطاقات كلّ الصفحات ────────────────────────────
   تُحقَن qm-manuscript عبر qm-smart-header.js وnav.js على كل صفحات الثيم (عدا browse).
   الأصناف الشاملة: qm-theme pages + qaw-* المولَّدة بـJS + صفحات المحاور المختلفة.
   inset box-shadow — بلا ::after فلا اعتماد على position ولا قصّ overflow. */
body.theme-modern :is(
  /* بطاقات qm-theme الأساسيّة */
  .kpi-card, .entry-card, .search-guide-card,
  .qm-card-x, .qm-card, .qm-card-sm,
  .field-card, .root-card, .surah-card,
  .disc-card, .cmp-card, .dua-card,
  .morph-card, .abwab-card, .stat-card, .compare-card,
  /* بطاقات qaw-* المولَّدة بـJS على صفحات المحاور */
  .qaw-kpi, .qaw-ant-card,
  .qaw-disc-card, .qaw-disc-modal-card,
  .qaw-ab-card, .qaw-ab-modal-card,
  /* صفحات المقارنة والأسماء */
  .fc-pairing-card, .fc-root-card, .ap-card,
  .surah-al-card, .chart-card,
  /* الأضداد، المنهج، المفضّلة */
  .antonym-card, .antonym-verse-card, .method-card,
  .fav-card, .search-card, .root-summary-card
) {
  box-shadow: var(--qm-shadow-sm);
  transition: transform .2s var(--qm-ease-out),
              box-shadow .2s var(--qm-ease-out),
              border-color .2s var(--qm-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.theme-modern :is(
    .kpi-card, .entry-card, .search-guide-card,
    .qm-card-x, .qm-card, .qm-card-sm,
    .field-card, .root-card, .surah-card,
    .disc-card, .cmp-card, .dua-card,
    .morph-card, .abwab-card, .stat-card, .compare-card,
    .qaw-kpi, .qaw-ant-card,
    .qaw-disc-card, .qaw-disc-modal-card,
    .qaw-ab-card, .qaw-ab-modal-card,
    .fc-pairing-card, .fc-root-card, .ap-card,
    .surah-al-card, .chart-card,
    .antonym-card, .antonym-verse-card, .method-card,
    .fav-card, .search-card, .root-summary-card
  ):hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,32,26,.12), inset 0 2px 0 0 var(--qm-gold);
    border-color: var(--qm-accent);
  }
}
body.theme-modern :is(
  .kpi-card, .entry-card, .search-guide-card,
  .field-card, .root-card, .surah-card,
  .disc-card, .cmp-card, .dua-card, .stat-card, .compare-card,
  .qaw-kpi, .qaw-ant-card, .qaw-disc-card, .qaw-ab-card,
  .fc-pairing-card, .fc-root-card, .antonym-card, .method-card,
  .fav-card, .search-card, .root-summary-card
):active {
  transform: translateY(-1px) scale(.992);
}

/* ── 9. تقليل الحركة — لا رسم متحرّك، تظهر العناصر في حالتها النهائيّة ──────────── */
/* ── 9ب. مادّة hover للقطع الكبيرة على صفحات المحاور (qaw-ant-card تحتاج فصل) ──── */
@media (prefers-reduced-motion: reduce) {
  body.theme-modern :is(.home-principle, .home-proof-link, .home-benefit, .home-feature)::after {
    transform: scaleX(0) !important;
  }
  body.theme-modern .home-feature:nth-child(1)::after { transform: scaleX(1) !important; }
  body.theme-modern .home-sample a::after { display: none; }
}

/* ── 10. صفحات site.css (السور·الآيات·404) — تُحقَن عبر nav.js لا qm-smart-header ──
   لا gate «theme-modern» هنا (هذه الصفحات لا تحمله). browse.html مستثنى في nav.js.
   يستخدم var(--qawlat-gold) من site.css المُحمَّل دائمًا على هذه الصفحات. */

/* حُبيبات الورق — نفس تقنية section 1، لكن بلا body.theme-modern */
html body:not(.theme-modern):not(.browse-page) {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-blend-mode: multiply;
}

/* عمق بطاقات صفحات السور (surah-overview-quote وما ماثله) */
html body:not(.theme-modern) :is(
  .surah-overview-panel, .surah-stat-card, .surah-overview-quote,
  .surah-lataif-card, .surah-rasm-card, .surah-root-row
) {
  box-shadow: 0 4px 14px rgba(23,58,47,.07);
  transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html body:not(.theme-modern) :is(
    .surah-overview-panel, .surah-stat-card, .surah-overview-quote,
    .surah-lataif-card, .surah-rasm-card, .surah-root-row
  ):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(23,58,47,.10), inset 0 2px 0 0 var(--qawlat-gold, #8f7d63);
    border-color: var(--qawlat-green, #173a2f);
  }
}

/* سهم قراءة المزيد ينزلق في صفحات السور */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html body:not(.theme-modern) a:hover .surah-al-root-link em,
  html body:not(.theme-modern) .surah-hero__browse-link:hover em { transform: translateX(-4px); }
}