/* ═══ الاستشارات القرآنية — طبقة الموقع: نموذج نظام التصميم ═══
   يحل محل site.css في الصفحات التجريبية تحت /نموذج (يحمله _LayoutDs).
   الالوان كلها من رموز design.css (المصدر design/web-colors-and-type.css، يزامن
   بـ scripts/sync_design.py). هذا الملف لا يعرف لونا مباشرا: يسمي ادوارا فقط.
   البنية على طريقة shadcn: رموز دلالية (bg/fg، primary/primary-fg، ring، radius،
   container) ثم مكونات باسماء ثابتة، لكل مكون حالاته.
   الايقاع: 8 · 12 · 16 · 24 · 32 · 48 · 64 من --space-*.
   نقاطُ الكسر: 480 · 640 · 768 · 1024 · 1280 (و‏max-width ناقصةً واحدًا). يحرسها
   StylesheetContractTest — نقطةٌ جديدةٌ تُضاف هنا وفي الاختبار معًا أو لا تُضاف. */

/* ── ١. الرموز الدلالية ── */
:root {
  /* الاسطح والنص */
  --bg:           var(--color-bg-page);
  --fg:           var(--color-text-primary);
  --fg-2:         var(--color-text-secondary);
  --fg-muted:     var(--color-text-muted);
  --fg-faint:     var(--color-text-faint);
  --card:         var(--color-bg-surface);
  --surface-soft: var(--color-bg-surface-soft);
  --surface-mute: var(--color-bg-surface-mute);
  --header-bg:    var(--color-bg-header);
  --footer-bg:    var(--color-bg-footer);

  /* الفعل: الذهبي */
  --primary:        var(--color-primary);
  --primary-hover:  var(--color-primary-hover);
  --primary-active: var(--color-primary-active);
  /* نصُّ الزرّ الذهبي داكنٌ في الوضعَين: الأبيض على الذهبي ‏2.75:1 ويفشل AA،
     والداكن ‏6.35:1. وفي الوضع الداكن يصير --color-text-primary فاتحًا فيسقط
     التبايُن إلى ‏1.98 — فيُؤخذ حبرُ النظام المخصّص للأسطح الملوّنة. */
  --primary-fg:     var(--color-text-primary);   /* نص داكن على الذهبي: الأبيض عليه 2.75:1 لا يكفي (قرار main) */
  --primary-soft:   var(--color-primary-soft);

  /* الهوية: الزيتوني للعناوين والروابط؛ وبخفة للفعل الثانوي */
  --heading:      var(--color-heading);
  --brand:        var(--color-secondary);
  --brand-dark:   var(--color-secondary-dark);
  --brand-fg:     var(--color-text-on-primary);   /* نص على تعبئة زيتونية */
  --secondary:    var(--color-secondary-soft);
  --secondary-fg: var(--color-secondary-dark);

  /* الدلالات */
  --destructive:      var(--color-danger);
  --destructive-fg:   var(--color-text-on-primary);
  --destructive-soft: var(--color-danger-soft);
  --success:          var(--color-success);
  --success-soft:     var(--color-success-soft);
  --warning-soft:     var(--color-warning-soft);
  --info:             var(--color-info);
  --info-soft:        var(--color-info-soft);

  /* الحدود والتركيز */
  --border:        var(--color-border);
  --border-strong: var(--color-border-strong);
  --divider:       var(--color-divider);
  --input:         var(--color-border-strong);
  --ring:          var(--color-primary-hover);      /* ذهبيّ: التركيزُ ذهبيٌّ في نظام التصميم؛ ‏3.2:1 يمرّ حدَّ المؤشِّرات (‏3) — والزيتونيُّ الداكن قبله كان يُقرأ إطارًا أسود */   /* الحلقة الشفافة كانت 1.34:1 — غير مرئية (قرار main) */

  /* الشكل: قرار صاحب المشروع — بطاقات 12 وازرار وحقول 8 */
  --radius:         var(--radius-md);
  --radius-control: var(--radius-sm);
  --radius-pill:    var(--radius-full);

  /* الحاوية: 1120 للقوائم، 46rem لعمود التفصيل (يسع الصور). الهامش 16 → 24 → 32 */
  --container-max:    1120px;
  --container-narrow: 46rem;
  --container-pad:    var(--space-4);
  --header-h:         64px;
  /* بُعدُ أيقونة البوت عن قاع الشاشة — رمزٌ لأنّ نافذتَها تُحسَب منه: قيمتان
     متفرّقتان تفترقان. ورُفعت من ‏20 إلى ‏32 بطلب صاحب المشروع. */
  --fab-bottom:       var(--space-8);
  /* هالةُ الأزرار الشبحيّة عند المرور: زيتونيٌّ ممزوجٌ بأرضٍ فاتحة، لا مزيجٌ
     بالشفّاف — فالمزجُ بالشفّاف يُظلم القنوات. */
  --glow-soft:        color-mix(in srgb, var(--color-secondary) 42%, white);

  /* الخطوط: قرار صاحب المشروع */
  --font-ui:    "Noto Naskh Arabic", "Scheherazade New", "Traditional Arabic", serif;
  --font-read:  "Scheherazade New", "Traditional Arabic", "Noto Naskh Arabic", serif;
  /* **وبلا ‏Uthman Taha في السلسلة** (قِيس ‏١١ سبتمبر ‏٢٠٢٦): خطُّ حفص لا يحمل
     القوسَين المزهَّرَين ﴿﴾ — ليس في المقصوص ولا في الأصل — فكان المتصفّح يسقط
     إليه لرسم قوسَين اثنَين فيُنزِّل ‏136 ك.ب من ‏TTF في كلّ صفحةٍ فيها آية.
     وحُذف من السلسلة، فيقعان على «نسخ» المحمَّل أصلًا — وفيه القوسان (فُحص). */
  --font-mushaf: "KFGQPC HAFS Uthmanic Script", "Amiri Quran", var(--font-ui);

  /* مقياس الواجهة. متن القراءة له مقاسه في .question-text و.answer-text */
  --text-xs:   13px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   17px;
  --text-lg:   19px;
  --text-xl:   22px;
  --text-2xl:  28px;

  /* المقياسُ السائل: يكبر مع الشاشة بين حدَّين، والسقوفُ من نظام التصميم.
     مقيسٌ قبله: العنوانُ ‏32 في ‏1440 و‏26 في ‏390، والفاصلُ ‏48 في المقاسَين —
     فبدا المكتبُ هاتفًا مُكبَّرًا. القِيَمُ عند ‏390 → ‏1440 بكسلًا: */
  --fs-title:    clamp(1.75rem, 1.2rem + 1.5vw, var(--type-h1-size));   /* ‏28 → ‏41 (سقفٌ ‏44) */
  --fs-heading:  clamp(1.375rem, 1.1rem + 0.75vw, var(--type-h2-size)); /* ‏22 → ‏28 (سقفٌ ‏32) */
  --fs-lead:     clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);             /* ‏17 → ‏19 */
  --section-gap: clamp(3rem, 1.5rem + 4vw, 6rem);                        /* ‏48 → ‏82 (سقفٌ ‏96) */
  --page-pad:    clamp(2rem, 1rem + 3vw, 4rem);                          /* ‏32 → ‏59 (سقفٌ ‏64) */
  --card-pad:    clamp(1.25rem, 1rem + 0.75vw, 2rem);                    /* ‏20 → ‏27 (سقفٌ ‏32) */
}
/* الوضعُ الداكن: قيمُ الألوان كلُّها من نظام التصميم، ولا يُعاد تعريف إلا ما ينقلب
   دورُه — حبرُ الزرّ الذهبي، وحلقةُ التركيز التي يخفتها الزيتونيُّ الداكن على أرضٍ
   داكنة. مقيسٌ: النصُّ على الأرض ‏16:1، وعلى البطاقة ‏14.6، والخافت ‏7.5، ونصُّ
   الزرّ ‏7.98. */
:root[data-theme="dark"] {
  --glow-soft: color-mix(in srgb, var(--color-secondary) 55%, var(--color-bg-header));
  --primary-fg: var(--color-text-on-primary);
  --ring: var(--color-primary);
  /* نظامُ التصميم لا يعيد تعريف --color-secondary-dark في الوضع الداكن، فيبقى
     زيتونيًّا داكنًا (‏#495826) على أرضٍ داكنة — قِسته على البطاقة فكان ‏1.6:1،
     أي الآياتُ والعناوينُ الفرعية لا تُقرأ. فيُؤخذ الزيتونيُّ الفاتح — وقد
     صار ‏#8FBA6E في ‏٢٠٢٦-٠٩-٠٤، فالقياسُ على البطاقة ‏7.38 بعد ‏4.82. */
  --brand-dark: var(--color-secondary);
  /* و‏--color-heading كذلك لا يُعاد تعريفه: العنوانُ يبقى ‏#627536 على أرضٍ داكنة
     (‏3.55:1 — يجوز للعنوان الكبير ولا يجوز لعنوانٍ صغير). فيُرفع إلى ‏8.11. */
  --heading: var(--color-secondary);
  /* والثالثُ من العائلة نفسِها فاته الإصلاح: نصُّ الوسم كان ‏#495826 على تعبئةٍ
     زيتونيةٍ ‏14٪ فوق أرضٍ داكنة — ‏1.94:1، أي ‏٩٨ وسمًا لا تُقرأ. ثمّ ‏4.41
     بالزيتونيّ الفاتح، وهي دون الحدّ أيضًا — وصار ‏4.90 بعد رفع الرمز نفسِه. */
  --secondary-fg: var(--color-secondary);
}

@media (min-width: 768px)  { :root { --container-pad: var(--space-6); } }
@media (min-width: 1024px) { :root { --container-pad: var(--space-8); } }
/* خطُّ النسخ صغيرُ الجسم: ‏13 بكسلًا منه على الهاتف (الوسوم والسطرُ التمهيديّ
   والعدّاد) أصغرُ مما يُقرأ بارتياح. تُرفَع درجةً حيث الشاشةُ ضيّقةٌ وحدَها. */
@media (max-width: 639px) { :root { --text-xs: 14px; --text-sm: 15px; } }

/* خط المصحف: KFGQPC HAFS Uthmanic Script v2.0 مستضاف ذاتيا (انظر site.css) */
@font-face {
  font-family: "KFGQPC HAFS Uthmanic Script";
  src: url("/fonts/uthmanic-hafs-v20.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── ٢. الاساس ── */
*, *::before, *::after { box-sizing: border-box; }
/* ‏color-scheme بالسمة لا ثابتًا: كان `light` دائمًا فتُرسَم حقولُ الإدخال
   والقوائمُ وشريطُ التمرير وخلفيّةُ <dialog> فاتحةً في صفحةٍ داكنة — مقيس. */
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-6)); }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.9;
  /* ‏dvh يتبع شريطَ أدوات سفاري وهو يظهر ويختفي؛ و‏vh احتياطٌ لما لا يعرفه. */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
img, video { max-width: 100%; height: auto; display: block; }
/* design.css يعرف svg { display: block } وقاعدة المؤلف تغلب قاعدة المتصفح لـ[hidden] */
[hidden] { display: none !important; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4 { margin: 0; line-height: 1.5; font-weight: 700; color: var(--heading); }
h3, h4 { font-weight: 600; }
p { margin: 0 0 var(--space-4); }
hr { border: 0; border-top: 1px solid var(--divider); margin: var(--space-6) 0; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; background: var(--surface-mute); padding: 1px 6px; border-radius: var(--radius-xs); }
/* design.css يفرض border-radius: 4px على كل عنصر مركز؛ كل مكون يعلن --r فيحفظ شكله */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--r, var(--radius-xs)); }
.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; }
/* رابط التجاوز يخفى عموديا لا افقيا: الازاحة الافقية السالبة في RTL توسع المستند */
.skip { --r: var(--radius-control); position: absolute; top: -100px; inset-inline-start: var(--space-2); z-index: var(--z-toast); background: var(--card); padding: var(--space-2) var(--space-4); border-radius: var(--r); }
.skip:focus { top: var(--space-2); }

/* الايقونات: خط واحد يتبع لون النص وحجمه */
.icon { display: inline-block; width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor;
        stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.icon-lg { width: 1.25em; height: 1.25em; }

/* ── ٣. الطباعة ── */
/* ‏text-wrap: balance يوزّع عنوانَ سطرَين بالتساوي فلا تبقى كلمةٌ يتيمةٌ في الثاني. */
.title   { font-size: var(--fs-title); line-height: 1.35; font-weight: 700; text-wrap: balance; }
.heading { font-size: var(--fs-heading); line-height: 1.45; font-weight: 600; text-wrap: balance; }
.lead    { font-size: var(--fs-lead); color: var(--fg-muted); }
.muted   { color: var(--fg-muted); font-size: var(--text-sm); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--brand-dark); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; }
.read    { font-family: var(--font-read); }

/* ── ٤. الحاوية والهيكل ── */
.container { width: min(var(--container-max), 100% - var(--container-pad) * 2); margin-inline: auto; }
.narrow    { max-width: var(--container-narrow); margin-inline: auto; }
/* حشوةُ الأسفل بمقاس الأعلى لا ضِعفَه: كان الفراغُ قبل الفوتر ‏141 بكسلًا مقيسًا،
   ومعه حشوةُ الفوتر ‏40 فصار ‏181 — شاشةُ هاتفٍ ربعُها خالٍ. والفوترُ سطحٌ ملوّنٌ
   بحدٍّ أعلاه، فهو الفاصلُ ولا يحتاج فراغًا يفصله. */
.page      { flex: 1; width: 100%; padding-block: var(--page-pad); }
.section   { margin-top: var(--section-gap); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--divider); }
.section-head .heading { margin: 0; }
.section-head a { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
/* ذيلٌ مطويّ يحمل نظيرَ رأس القسم: خطُّه ولونُه، والسهمُ الأصليّ يكفي دلالةً. */
details.section > summary { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); cursor: pointer;
                            padding-bottom: var(--space-2); border-bottom: 1px solid var(--divider); margin-bottom: var(--space-4); }
details.section > summary:hover { color: var(--fg); }
details.section > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
/* **وشبكةُ الأسماء عمودان من أضيقِ هاتف**: اسمُ الموضوع كلمةٌ أو كلمتان وتحتَه
   عددُه، وكان يأخذ صفًّا كاملًا — ‏/الموضوعات ‏7,780 بكسلًا في ‏375 (‏56 بطاقةً
   × ‏107)، عشرُ شاشاتٍ لقائمةِ أسماء. صارت ‏4,361 مقيسةً.
   **ولا تُعمَّم على المستشارين**: جرّبتُها فبلغت البطاقةُ ‏168 بكسلًا بدل ‏88 —
   «د. عبدالرحمن الشهري» ينكسر ثلاثةَ أسطرٍ في عمودٍ ‏163، فتطول الصفحةُ في
   منظرٍ مهلهل. الاسمُ الطويلُ يريد سطرًا كاملًا. */
.grid-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .grid { gap: var(--space-6); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── ٥. الترويسة: حاويةٌ عائمةٌ مدوّرةٌ من زجاجٍ حقيقيّ ── */
/* الشريطُ نفسُه شفّافٌ لا سطحَ له: هو حيّزٌ يُعلّق الحاويةَ فيه بفاصلٍ ‏12 من
   أعلاه، فتبدو طافيةً على الصفحة لا ملتصقةً بحافّة الشاشة. */
.site-header { position: sticky; top: 0; z-index: var(--z-header);
               background: transparent; padding-block: var(--space-3); }
/* **وهنا يُنقَض قرارُ ‏٦ سبتمبر بمنع الطمس** — بطلبِ صاحب المشروع: زجاجٌ حقيقيّ
   لا سطحٌ مصمتٌ يحاكيه. والكلفةُ محكومةٌ بثلاثة: نصفُ قطرِ الطمس ‏14 لا ‏40
   (وكلفةُ الطمس تتبع نصفَ قطره لا مساحتَه وحدَها)، وطبقةٌ واحدةٌ في الصفحة كلِّها
   لا أربع، والإشباعُ ‏1.8 وهو ما يعطي الحياةَ للزجاج وثمنُه لا يُذكر أمام الطمس.
   **وقِيس**: تمريرٌ مبرمَجٌ ‏145 إطارًا بالطمس ثمّ بلا طمسٍ ثمّ بالطمس ثانيةً —
   متوسّطُ الإطار ‏33.33 مللي في الثلاثة سواءً بسواء، والمئينُ الخامسُ والتسعون
   ‏33.5 و‏33.7 و‏33.9 (ضجيجٌ لا اتّجاه). والقياسُ مسقوفٌ بثلاثين إطارًا في الثانية
   في بيئة القياس، فالذي يثبت أنّ كلفةَ الطمس دون ما يُدرَك في هذه الميزانية،
   لا أنّها صفر. والمساحةُ المطموسةُ ‏1120×64 — لا صفحةٌ كاملة. */
.header-inner {
  background: color-mix(in srgb, var(--color-bg-header) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
          backdrop-filter: blur(14px) saturate(1.8);
  /* **والحدُّ ضوءٌ متدرّجٌ لا لونٌ واحد** (فكرةُ صاحب المشروع): أبيضُ في أعلاه
     ينحدر إلى سكّريٍّ أفتحَ من الأرض — فيُقرأ انعكاسَ ضوءٍ على حرفِ زجاجٍ لا
     خطًّا مرسومًا حوله. ولا `border` معه: حدٌّ صلبٌ تحت الحلقة يُقرأ طوقَين
     (وهي العلّةُ التي رُفضت من قبلُ في البطاقات وأيقونة البوت).
     والألوانُ صريحةٌ لا ممزوجةٌ بالشفّاف: المزجُ بالشفّاف يُظلم القنوات —
     وهو الذي أخرج الحدَّ رماديًّا فقرأه صاحبُ المشروع «إطارًا أسود». */
  border: 0; position: relative;
  border-radius: var(--radius-pill);
  padding-inline: var(--space-5);
  /* لمعةٌ داخليّةٌ أعلى الحاوية، وهالةٌ ذهبيّةٌ خارجَها. **جُرِّبت داخلًا فرُدّت**
     (ملاحظةُ صاحب المشروع: «التوهّجُ للداخل غير مناسب») — والضوءُ يقع على ما
     حول الجسم لا في جوفه. وخُفِّفت: `--shadow-gold` من نظام التصميم، ذهبيٌّ
     ‏18٪ في ‏20 بكسلًا — ولا مزجَ بالشفّاف، فالمزجُ يُظلم القنوات. */
  box-shadow: var(--shadow-gold); }
/* طرفا التدرّج رمزان لا قيمتان مكتوبتان: فالسمةُ تقلبهما، والمرورُ يغيّر
   أحدَهما — بسطرٍ واحدٍ يعمل في الوضعَين. */
.header-inner, .crumbbar-inner, .card, .result, .hero-home .hero-stats, .chat-panel,
.question, .answer, .detail-aside {
  /* `--rim-top`/`--rim-bottom` طرفا التدرّج بترتيبه لا بموضعهما: المضيءُ ثمّ
     الخافت. و‏`--rim-dir` تقول أين المضيءُ منهما، وهي تنقلب بالسمة. */
  --rim-dir: to bottom;                    /* الفاتح: الضوءُ أعلى، كضوءِ نهارٍ من فوق */
  --rim-top: white;
  --rim-bottom: var(--color-bg-surface);   /* سكّريٌّ أفتحُ من أرض الترويسة */
  --rim-lit:   color-mix(in srgb, var(--color-primary) 38%, white);  /* رأسُ الحلقة عند المرور */
}
/* وفي الداكن لا أبيضَ: ضوءٌ من حبر الصفحة يخفت إلى أرضها — فالأبيضُ الكاملُ
   على أرضٍ داكنةٍ يُقرأ طوقًا مرسومًا، وهي ملاحظةٌ سبقت في أيقونة البوت. */
:root[data-theme="dark"] .header-inner, :root[data-theme="dark"] .crumbbar-inner,
:root[data-theme="dark"] .card, :root[data-theme="dark"] .result,
:root[data-theme="dark"] .hero-home .hero-stats, :root[data-theme="dark"] .chat-panel,
:root[data-theme="dark"] .question, :root[data-theme="dark"] .answer,
:root[data-theme="dark"] .detail-aside {
  --rim-dir: to top;   /* الداكن: الضوءُ من أسفل — وهو ما تفعله الأسطحُ المعتمة
                          في الواقع، تلتقط انعكاسَ ما تحتها لا سماءً فوقها */
  --rim-top: color-mix(in srgb, var(--color-text-primary) 38%, var(--color-bg-header));
  /* والخافتُ حبرٌ خفيفٌ لا أرضٌ صريحة (ملاحظةُ صاحب المشروع: «الأعلى حقّ الهيدر
     مو ضابط .. لازم لون أوضح شوي»): كان `--color-bg-header` نفسَه، أي الطرفُ
     العلويُّ بلا حدٍّ أصلًا فيُقرأ مقطوعًا. و‏16٪ يُركَّب ‏rgb(63,61,56) على
     أرضٍ ‏rgb(29,27,23) — يُرى، ويبقى دون المضيء (‏rgb(111,108,102)) فالهبوطُ
     محفوظ. والقيمةُ مشتركةٌ فالبطاقاتُ والاستشاراتُ تُصلَح معه بسطرٍ واحد. */
  --rim-bottom: color-mix(in srgb, var(--color-text-primary) 16%, var(--color-bg-header));
  --rim-lit:   color-mix(in srgb, var(--color-primary) 75%, var(--color-bg-header));
}
.header-inner::before, .crumbbar-inner::before,
.card::before, .result::before, .hero-home .hero-stats::before, .chat-panel::before,
.question::before, .answer::before, .detail-aside::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(var(--rim-dir), var(--rim-top), var(--rim-bottom));
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; transition: background var(--dur-base) var(--ease-standard); }
/* **وحيث تحتها مسارٌ، التصقا حاويةً واحدة** (قرارُ صاحب المشروع): يُرفع الفراغُ
   بينهما، وتُفتح الأطرافُ المتلاقية — أسفلُ الترويسة وأعلى المسار — فيبقى
   المدوَّرُ الطرفَين الخارجيَّين وحدَهما، وتُقرأ كتلةً واحدةً طافية.
   و‏:has كي تبقى الترويسةُ كبسولةً كاملةً في صفحةٍ لا مسارَ فيها (الرئيسيّةُ
   و‏404) — فالشكلُ يتبع ما تحته لا يُكتب في كلّ قالب. */
/* **وعند المرور بالماوس تتذهّب الكتلةُ كلُّها** (قرارُ صاحب المشروع: «اجعله
   ذهبيًّا متوهّجًا … عند المرور لا دائمًا»): الحدُّ يشتدّ ذهبًا والهالةُ تتّسع.
   والترويسةُ وشريطُ المسار يستجيبان معًا وإن كان المؤشّرُ على أحدهما — هما
   كتلةٌ واحدةٌ في العين، فإضاءةُ نصفها تكسرها. */
@media (hover: hover) {
  .site-header:hover .header-inner,
  .site-header:has(+ .crumbbar:hover) .header-inner,
  .site-header:hover + .crumbbar .crumbbar-inner,
  .crumbbar:hover .crumbbar-inner {
    box-shadow: 0 6px 26px -6px var(--color-primary-border); }
  /* **وعند المرور تتذهّب الحلقةُ كلُّها لا قاعُها** (ملاحظةُ صاحب المشروع:
     «يظهر تغيّرُ الأسفل والأعلى باقٍ بلا تميّز»): الرأسُ كان أبيضَ في الحالَين
     فلا فرقَ يُرى فيه. فصار يتحوّل إلى ذهبيٍّ شاحبٍ — **تبدّلُ لونٍ لا تبدّلُ
     إضاءة**، وهو يُرى على الأبيض. و`--rim-lit` رمزٌ لأنّ قيمتَه تختلف بالسمة:
     ذهبيٌّ على أبيضَ في الفاتح، وذهبيٌّ على أرضٍ داكنةٍ في الداكن. */
  .site-header:hover .header-inner,
  .site-header:has(+ .crumbbar:hover) .header-inner,
  .site-header:hover + .crumbbar .crumbbar-inner,
  .crumbbar:hover .crumbbar-inner {
    --rim-top: var(--rim-lit);
    --rim-bottom: color-mix(in srgb, var(--color-primary) 60%, var(--color-bg-header)); }
}
.site-header:has(+ .crumbbar) { padding-block-end: 0; }
.site-header:has(+ .crumbbar) .header-inner {
  border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
/* الهويةُ ثم التبويباتُ ملتصقةً بها في المبدأ، والأفعالُ في المنتهى — وهو ترتيبُ
   المواقع العربية: الشعارُ يمينًا والتبويباتُ تليه، لا في الطرف المقابل. */
/* ثلاثةُ أعمدة: الاسمُ في البداية، والتبويباتُ في الوسط، والضوابطُ في النهاية.
   وبالمرونة وحدها كانت التبويباتُ تتوسّط ما بقي بين اسمٍ ‏186 وزرٍّ ‏40 — فتزيح
   عن وسط الشاشة ‏73 بكسل، و‏93 في الرئيسية حيث لا زرَّ بحثٍ أصلًا. */
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr;
                align-items: center; gap: var(--space-5); min-height: var(--header-h); }
/* والعمودُ مُسمًّى لكلٍّ لا متروكًا للترتيب: العنصرُ المخفيُّ بـ‏display:none يُرفع
   من الشبكة أصلًا، فتنزلق الضوابطُ إلى عمود التبويبات — وقد اختفى الاسمُ بذلك
   حين فُتح البحث. */
.header-inner > .brand      { grid-column: 1; justify-self: start; }
.header-inner > .site-nav   { grid-column: 2; justify-self: center; }
.header-inner > .header-end { grid-column: 3; justify-self: end; display: flex; align-items: center;
                              gap: var(--space-2); min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--brand); min-width: 0; --r: var(--radius-control); border-radius: var(--r); }
.brand:hover { color: var(--brand-dark); }
/* **الشعارُ خلفيّةٌ لا صورتَين تتبادلان** (قِيس ‏١١ سبتمبر): كانت الصورتان في
   الصفحة وإحداهما ‏display:none — والمخفيّةُ تُجلَب أيضًا، فكانت ثلاثةُ أزواجٍ
   تُنزّل **‏103 ك.ب في كلّ صفحةٍ لا تُعرَض أبدًا** (‏57 منها شعارُ المركز وحدَه).
   وخلفيّةُ ‏CSS لا تُجلَب إلّا إن طابقت قاعدتُها، فينزل الموافقُ للسمة وحدَه.
   والمقاسُ صريحٌ لأنّ الصندوقَ لا يرث أبعادَ صورته. */
.brand-mark { display: block; flex: none; width: 163px; height: 40px;
              background: url("/img/logo-lockup.svg") center/contain no-repeat; }
:root[data-theme="dark"] .brand-mark { background-image: url("/img/logo-lockup-dark.svg"); }
/* شعارُ المركز الأفقيّ: مقاسٌ في الفوتر وأصغرُ منه في ذيل اللوحة الجانبية. */
.org-mark { display: block; width: 199px; height: 48px;
            background: url("/img/logo-horizontal.svg") center/contain no-repeat; }
:root[data-theme="dark"] .org-mark { background-image: url("/img/logo-horizontal-dark.svg"); }
.org-mark-sm { width: 166px; height: 40px; }
.site-nav { display: none; gap: var(--space-1); }
.site-nav a, .sheet-nav a {
  --r: var(--radius-control); display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 40px; padding: var(--space-2) var(--space-3); border-radius: var(--r);
  color: var(--fg-2); font-weight: 500; transition: background var(--dur-fast), color var(--dur-fast);
}
/* **والصفحةُ الحالية تُفرَّق عن المُمرَّر عليه**: كانا تعبئةً واحدةً، فلا
   يعرف الزائرُ أين هو من الإصبع فوق أيّها. فالحاليّةُ تعبئةٌ وخطٌّ أسفلَها،
   والتمريرُ لونٌ وخطٌّ نصفيّ — إشارتان مختلفتان لحالتين مختلفتين. */
.site-nav a, .sheet-nav a { position: relative; }
.site-nav a::after, .sheet-nav a::after {
  content: ""; position: absolute; inset-inline: var(--space-3); bottom: 5px;
  height: 2px; border-radius: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-base) var(--ease-standard);
}
@media (hover: hover) {
  .site-nav a:hover, .sheet-nav a:hover { color: var(--brand-dark); }
  /* التمريرُ ذهبيٌّ والحاليّةُ زيتونيّة: إشارتان بلونَين لحالتَين. */
  .site-nav a:hover::after { transform: scaleX(1); background: var(--primary); }
  .site-nav a[aria-current="page"]:hover::after { background: var(--brand); }
  .site-nav a:hover { background: var(--surface-soft); }
}
/* **والتبويبةُ الحاليّةُ بلا تعبئة** (قرارُ صاحب المشروع): الخطُّ تحتها واللونُ
   والثقلُ ثلاثُ إشاراتٍ تكفي، والتعبئةُ فوقها رابعةٌ تُثقل ترويسةً صارت زجاجًا.
   وتبقى التعبئةُ في صفوف اللوحة الجانبية: صفٌّ في قائمةٍ لا تبويبةٌ في شريط. */
.site-nav a[aria-current="page"] { color: var(--brand-dark); font-weight: 700; }
.sheet-nav a[aria-current="page"] {
  background: var(--secondary); color: var(--brand-dark); font-weight: 700; }
.site-nav a[aria-current="page"]::after, .sheet-nav a[aria-current="page"]::after {
  transform: scaleX(1); }
/* والنقرُ يُجيب: انخفاضةٌ بمقدار بكسلٍ واحد — `transform` لا `top`، فلا
   تُعاد حسبةُ التخطيط ولا يقفز ما حولَه. */
.site-nav a:active, .sheet-nav a:active { transform: translateY(1px); }

/* مبدّلُ السمة: أيقونةٌ واحدةٌ تظهر — قمرٌ في الفاتح وشمسٌ في الداكن، تقول ما
   ينتقل إليه لا ما هو فيه. والتبديلُ بالسمة نفسِها كشعار الفوتر، فلا صنفَ
   يُزامنه جافاسكربت. */
.theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: inline-block; }
.theme-toggle:active { transform: scale(.93); }

@media (prefers-reduced-motion: reduce) {
  .site-nav a::after, .sheet-nav a::after { transition: none; }
  .site-nav a:active, .sheet-nav a:active { transform: none; }
}
.site-nav a { white-space: nowrap; }
/* حقلٌ في اللوحة الجانبية: على الشاشة الضيّقة هو السبيلُ الوحيد للبحث. */
.sheet-search { margin-bottom: var(--space-2); }
/* التبويباتُ وبحثُ الترويسة من ‏768 لا من ‏1024. **مقيسٌ على الترويسة الحيّة**:
   الهويّةُ ‏175 والتبويباتُ الأربعةُ ‏357 (‏72 · ‏91 · ‏93 · ‏89) وزرُّ البحث ‏44
   وفجوتان ‏40 — ‏616 في حاويةٍ ‏720 عند ‏768 بكسلًا، ففيها ‏104 فضلًا. وكان
   الآيبادُ والحاسبُ الصغير (‏768–1023) يريان ترويسةً وسطُها خالٍ والتبويباتُ
   الأربعُ خلف زرِّ القائمة.
   والبحثُ مفتوحًا يتّسع كذلك: الهويّةُ ‏175 والحقلُ بسقفه ‏416 والإغلاقُ ‏44
   وفجوتان ‏28 — ‏663 من ‏720. والتقلّصُ إلى ‏93 بكسلًا الذي أُخفي البحثُ من
   أجله يقع دون ‏640، لا عند ‏768. */
@media (min-width: 768px) {
  .site-nav { display: flex; }
  .header-inner .nav-toggle { display: none; } /* تخصيص أعلى من .btn */
}
/* **واسمُ المركز حُذف من الهويّة** (قرارُ صاحب المشروع): الشعارُ الرسميُّ اسمُ
   المبادرة وحدَها فوق العلامة، ولا مركزَ فيه. والنسبةُ باقيةٌ في الفوتر:
   «من مبادرات» وشعارُ المركز الأفقيّ — موضعُها المعهود، لا الترويسة. */


/* اللوحة الجانبية للجوال: <dialog> اصلي — تركيز محصور وEscape وخلفية بلا مكتبة */
.sheet { position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; margin: 0; padding: 0;
         width: min(20rem, 85vw); max-width: none; height: 100dvh; max-height: 100dvh; border: 0;
         border-inline-start: 1px solid var(--border); background: var(--card); color: var(--fg);
         box-shadow: var(--glass-shadow-modal); opacity: 0; transition: opacity var(--dur-base) var(--ease-enter), display var(--dur-base) allow-discrete, overlay var(--dur-base) allow-discrete; }
.sheet[open] { opacity: 1; }
@starting-style { .sheet[open] { opacity: 0; } }
.sheet::backdrop { background: var(--color-text-primary); opacity: .4; }
.sheet-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sheet-head strong { color: var(--brand); }
.sheet-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.sheet-nav a { min-height: 44px; }

/* ── ٦. الازرار: خمسة انواع فقط. Primary للفعل الاهم وحده ── */
.btn {
  --r: var(--radius-control); --spinner: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-5); border-radius: var(--r);
  border: 1px solid transparent; background: transparent; color: var(--fg-2);
  font: inherit; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { background: var(--secondary); color: var(--brand-dark); }
.btn:active { transform: translateY(1px); }
/* الزرُّ الأساسيّ زيتونيٌّ بنصٍّ فاتح، لا ذهبيًّا بنصٍّ أسود: الذهبيُّ لا يحمل
   نصًّا أبيضَ يُقرأ (‏2.75:1)، والأسودُ عليه يُقرأ زرًّا معطَّلًا («لون الزر مع
   النص مو مضبوط» — صاحبُ المشروع). الزيتونيُّ مع الأبيض ‏5.4:1، وفي الوضع
   الداكن ينقلب إلى زيتونيٍّ فاتحٍ بحبرٍ داكن ‏7.7:1 — من الرمزَين نفسِهما.
   والذهبيُّ يبقى للأرقام والتركيز والشارات. */
/* **وتعبئتُه زجاجٌ كأيقونة البوت** (قرارُ صاحب المشروع، للتناسق): تدرّجٌ يفتح
   أعلاه ويغمق أسفلَه، ولمعةٌ داخليّةٌ في رأسه وعمقٌ في قاعه، وظلٌّ يُحوّمه.
   واللونُ يبقى زيتونيًّا لا ذهبيًّا: قرارُ التبايُن أعلاه لا يُنقَض بمظهر. */
.btn-primary { position: relative;
  background: linear-gradient(to bottom,
                color-mix(in srgb, var(--brand) 82%, white), var(--brand-dark));
  color: var(--brand-fg); border-color: transparent; --spinner: var(--brand-fg);
  /* **وتوهّجٌ من لونه** (قرارُ صاحب المشروع): هالةٌ مشتقّةٌ من التعبئة نفسِها لا
     ظلٌّ رماديّ. ولا ‏--float-shadow معها: الرماديُّ يقع فوقها فيُطفئ لونَها.
     **والقيمةُ قيمتان لأنّ الضوءَ ضوءان** (ملاحظةُ صاحب المشروع: «في الليلي بان
     وفي النهاري لا»): على أرضٍ داكنةٍ تُضيء الهالةُ الواسعةُ الخفيفة، وعلى أرضٍ
     فاتحةٍ لا يُرى إلّا ظلٌّ ملوَّنٌ **أضيقُ وأشدّ** — فالفاتحُ ‏16 بكسلًا بـ‏٧٨٪
     ومعه طبقةٌ قريبةٌ تحدّه، والداكنُ ‏22 بـ‏٥٨٪. */
  --glow: 0 5px 16px -3px color-mix(in srgb, var(--brand) 78%, transparent),
          0 2px 5px -2px color-mix(in srgb, var(--color-secondary-dark) 55%, transparent);
  box-shadow: inset 0 1px 2px var(--glass-specular),
              inset 0 -4px 8px -4px color-mix(in srgb, var(--color-secondary-dark) 70%, transparent),
              var(--glow); }
:root[data-theme="dark"] .btn-primary {
  --glow: 0 4px 22px -2px color-mix(in srgb, var(--brand) 58%, transparent); }
/* وعند المرور يصير ذهبيًّا لا زيتونيًّا أغمق (قرارُ صاحب المشروع): الهويّةُ
   تُومض ذهبًا لحظةَ الفعل. والنصُّ يبقى كما هو فلا يقلب لونَه تحت الإصبع. */
.btn-primary:hover { background: linear-gradient(to bottom,
                       color-mix(in srgb, var(--primary) 88%, white), var(--primary-active));
                     border-color: transparent; color: var(--brand-fg);
                     box-shadow: inset 0 1px 2px var(--glass-specular),
                                 var(--float-shadow), var(--shadow-gold); }
.btn-primary:active { background: var(--primary-hover); border-color: transparent; }
.btn-outline { border-color: var(--brand); color: var(--brand-dark); }
.btn-outline:hover { background: var(--secondary); }
.btn-ghost { color: var(--fg-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; }
.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
/* **والزرُّ الأيقونيُّ دائرةٌ حيثما كان** (قرارُ صاحب المشروع): بدأت الملاحظةُ
   على مبدّل السمة، ثمّ على إكس اللوحة الجانبية وإكس الدردشة — وهي علّةٌ واحدة،
   فالقاعدةُ عند ‏.btn-icon لا عند كلّ زرٍّ باسمه. زرٌّ لا نصَّ فيه شكلُه أيقونتُه،
   والمربّعُ المدوّرُ إنّما هو لما يحمل كلمة. */
.btn-icon { width: 44px; padding: 0; --r: var(--radius-pill); border-radius: var(--r); }
/* والأزرارُ الشبحيّةُ الأيقونيّةُ تتوهّج عند المرور كإخوتها (قرارُ صاحب المشروع:
   الإكسُ ومبدّلُ الوضع): تعبئةٌ زيتونيّةٌ خفيفةٌ كانت وحدَها، فزِيدت هالةٌ من
   لونها تحتها — والقيمةُ رمزٌ لأنّ أرضَها تنقلب بالسمة. */
@media (hover: hover) {
  .btn-ghost.btn-icon:hover { box-shadow: 0 4px 12px -3px var(--glow-soft); }
}
.btn-sm.btn-icon { width: 36px; }
/* **والزرُّ الأيقونيُّ يقيس أيقونتَه من نفسِه لا من نصّ**: ‏.icon مقاسُها ‏1.05em
   و‏.icon-lg ‏1.25em — نسبةٌ من نصٍّ لا وجودَ له في زرٍّ أيقونيّ، فبقيت الأيقونةُ
   ‏20 بكسلًا في زرٍّ ‏44 (‏45٪) و‏19.2 في زرِّ الإرسال ‏40 (‏48٪) — مقيسةً — تبدو
   منكمشةً في جوفه. تُقاس الآن من الزرّ: نحوَ ‏55٪ كأيقونات أشرطة أدوات أبل.
   وهي العلّةُ نفسُها التي جعلت أيقونةَ البوت ‏16.7 في قرصٍ ‏56، غير أنّ ‏.chat-fab
   ليس ‏.btn فلم يرث حتى خطَّ الصفحة. */
.btn-icon .icon { width: 24px; height: 24px; }
.btn-sm.btn-icon .icon { width: 20px; height: 20px; }
/* وأزرارُ شريط البحث لها قاعدتُها عند ‏.searchbar أدناه — لا تُنازَع من هنا. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading .icon { visibility: hidden; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--spinner); border-inline-end-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ٧. الشارات ── */
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badge { --r: var(--radius-pill); display: inline-flex; align-items: center; gap: var(--space-1); background: var(--secondary); color: var(--secondary-fg);
         border: 1px solid transparent; border-radius: var(--r); padding: 2px var(--space-3); font-size: var(--text-xs); font-weight: 500; line-height: 1.7; }
a.badge:hover { background: var(--brand); color: var(--brand-fg); }
/* عددُ الاستشارات داخل الوسم: كان ‏--fg-muted على تعبئةٍ زيتونيةٍ فبلغ ‏4.2:1
   (‏4.87 على أرضٍ صافية، فالتعبئةُ هي ما أسقطه). يأخذ لونَ الوسم — ‏6.06 —
   والقوسانِ هما ما يُخفضه رتبةً. */
.badge .muted { font-size: inherit; color: var(--secondary-fg); }

/* ── ٨. البطاقات: حد خفيف، بلا ظل الا عند التفاعل. لا بطاقة داخل بطاقة ── */
/* ورأيُ صاحب المشروع (‏٢٠٢٦-٠٩-٠٤): «ألوانُ الحاويات في اللوحة وإطارُها
   أفضلُ من الموقع». وقابلتُهما: **الألوانُ والحدُّ رمزان واحدان**
   (`--color-bg-surface` و`--color-border`) — والفرقُ في شيئَين: نصفُ القطر
   ‏12 بكسلًا في الموقع و‏22 في اللوحة (وهو `--radius-card`، رمزُ النظام
   للبطاقات أصلًا)، والظلُّ عند التمرير `sm` هناك و`md` هنا. فأُخذ بهما. */
.card { --r: var(--radius-card); background: var(--card); border: 0; border-radius: var(--r);
        padding: var(--card-pad); position: relative;
        transition: box-shadow var(--dur-fast); }
.card-link:hover { box-shadow: var(--shadow-md); }
.card-title { font-size: var(--text-lg); font-weight: 600; line-height: 1.5; margin: 0 0 var(--space-2); }
.card-title a { color: var(--fg); }
.card-title a:hover { color: var(--brand); }
.card-description { color: var(--fg-2); margin: 0 0 var(--space-3); }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--fg-muted); font-size: var(--text-sm); }
.card-meta > * { display: inline-flex; align-items: center; gap: 6px; /* ايقونة ونص: 8 واسعة و4 ضيقة */ }
.meta-advisor .icon { color: var(--primary); }
/* بطاقة الاستشارة: العنوان والمقتطف بخط القراءة */
.card-consultation .card-title { font-family: var(--font-read); font-size: 19px; font-weight: 700; }
.card-consultation .card-description { font-family: var(--font-read); font-size: 17px; }
.card-consultation .badges { margin-top: var(--space-3); }
/* بطاقة المستشار: لا صور في الارشيف، فالحرف الاول بديلها */
.card-advisor { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.card-advisor .card-title { margin: 0; font-size: var(--text-md); }
.card-advisor .count { color: var(--fg-muted); font-size: var(--text-sm); display: block; }
/* الاسمُ والعددُ على سطرٍ ما دام يتّسع، وينكسران إن ضاق — ‏flex-wrap لا نقطةُ
   كسر. البطاقةُ ‏88 بكسلًا فصارت ‏78، و‏/المستشارون ‏9,111 فصارت ‏8,279 في ‏375.
   ولا اسمَ انكسر: الثمانون كلُّها ‏78 بكسلًا مقيسةً، لا ‏78 أوّلُها. */
/* والعددُ إلى حافّة البطاقة المقابلة (قرارُ صاحب المشروع): الحرفُ في أوّلها
   والعددُ في منتهاها، فتصطفّ الأعدادُ عمودًا واحدًا في القائمة كلِّها بدل أن
   يتبع كلُّ عددٍ طولَ اسمِه. */
.card-advisor > div { display: flex; flex-wrap: wrap; align-items: baseline;
                      gap: 0 var(--space-3); min-width: 0; flex: 1 1 auto; }
.card-advisor .count { margin-inline-start: auto; }
/* العدُّ في بطاقات الكيانات كلِّها لا بطاقة المستشار وحدها. */
/* وبطاقةُ الموضوع على هيئة بطاقة المستشار (قرارُ صاحب المشروع، للتناسق):
   الاسمُ في المبدأ والعددُ في المنتهى على سطرٍ واحد — لا عددٌ تحت الاسم يتبع
   طولَه. والوصفُ — إن كُتب يومًا — يأخذ سطرَه بـ‏flex-basis كاملًا.
   وفي عمودَي الهاتف يضيق السطرُ عن الاثنين فينكسر العددُ إلى سطره، ويبقى في
   المنتهى لا يتبع الاسم — وهو ما تفعله ‏flex-wrap وحدَها بلا نقطةِ كسر. */
.card-topic { display: flex; flex-wrap: wrap; align-items: baseline;
              gap: var(--space-1) var(--space-3); }
.card-topic .card-title { margin: 0; }
.card-topic .count { color: var(--fg-muted); font-size: var(--text-sm); margin-inline-start: auto; }
.card-topic .card-description { flex-basis: 100%; margin-bottom: 0; }
/* وفي عمودَي الهاتف يأخذ العددُ سطرَه دائمًا: البطاقةُ ‏163 بكسلًا تسع
   «كتب ‏1,758 استشارة» في سطرٍ ولا تسع «حفظ القرآن» ومعه عددُه — فتخرج الشبكةُ
   صفًّا في سطرٍ وصفًّا في سطرَين، وهو أنكرُ من العدّ تحت الاسم. يُوحَّد. */
@media (max-width: 639px) {
  .card-topic .count { flex-basis: 100%; margin-inline-start: 0; }
}

/* نصٌّ متّصلٌ للقراءة (صفحة «عن المبادرة»): عناوينُ فرعية وفقراتٌ بإيقاعٍ واحد. */
/* الفاصلُ يُعلَن على العنصر نفسِه لا بـ`* + *`: أولويّة `.prose p` أعلى من
   `.prose > * + *` (‏0,1,1 مقابل ‏0,1,0)، فتغلبه أيًّا كان ترتيبُهما — وقد ظننتُ
   الترتيبَ سببًا فما زال الفاصلُ صفرًا حتى قِسته. */
.prose p { margin: 0 0 var(--space-4); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); }
.prose code { font-family: var(--font-mono, ui-monospace, monospace); font-size: .92em;
              background: var(--surface-mute); padding: 1px 6px; border-radius: var(--radius-xs); }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-hover);
          display: grid; place-items: center; font-weight: 700; font-size: var(--text-lg); line-height: 1; }
.avatar-lg { width: 64px; height: 64px; font-size: var(--text-2xl); }

/* ── ٩. مسار الصفحة وترويستها ── */
/* شريطُ المسار: قِطعةٌ بعرض الشاشة تحت الترويسة تفصل التنقّلَ عن المحتوى.
   وكان المسارُ داخل ترويسة الصفحة فيُقرأ سطرًا من العنوان لا موضعًا في الموقع.
   ويلتصق تحت الترويسة اللاصقة، فيبقى «أين أنا» ظاهرًا في القوائم الطويلة. */
/* **وصار يلتصق تحت الترويسة العائمة**، لا تحت شريطٍ بعرض الشاشة: الترويسةُ
   حاويةٌ في حيّزٍ حوله ‏12 من كلّ جهة، فموضعُ الالتصاق ‏64 + ‏24. وشريطُ المسار
   يتناسق معها: حاويةٌ مدوّرةٌ من الزجاج نفسِه بمقاسٍ أصغر، لا صفيحةٌ مصمتةٌ
   ملتصقةٌ بطرفَي الشاشة تحت حاويةٍ طافية. */
/* وموضعُ التصاقه ‏64 + ‏12: الترويسةُ حاويةٌ ‏64 يعلوها فراغُ ‏12 وحدَه، فحافّتُها
   السفلى هي هذا الرقم — وهو ما يجعلهما يلتقيان بلا خيطٍ من الصفحة بينهما. */
.crumbbar { position: sticky; top: calc(var(--header-h) + var(--space-3));
            z-index: calc(var(--z-header) - 1); padding-block-end: var(--space-3); }
/* والزاويتان العلويّتان بلا تدوير: هما موضعُ اللقاء. ولا حدَّ أعلاه ولا لمعةَ
   داخليّةً فيه — حدُّ الترويسة السفليُّ هو الفاصلُ، وخطّان فوق خطٍّ يُقرآن شقًّا.
   واللونان واحدٌ أصلًا: ‏--color-bg-header و‏--color-bg-surface-soft كلاهما
   ‏#F5F2E9 في نظام التصميم، فالكتلةُ نغمةٌ واحدةٌ لا نغمتان. */
.crumbbar-inner { display: flex; align-items: center; justify-content: space-between;
                  gap: var(--space-4); min-height: 2.75rem;
                  background: color-mix(in srgb, var(--color-bg-surface-soft) 62%, transparent);
                  -webkit-backdrop-filter: blur(14px) saturate(1.8);
                          backdrop-filter: blur(14px) saturate(1.8);
                  border: 0; position: relative;
                  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
                  padding-inline: var(--space-5);
                  /* وشريطُ المسار يأخذ الهالةَ نفسَها: هو نصفُ الكتلة السفليّ.
                     وحلقتُه تعلو بكسلًا فتنطبق على حلقة الترويسة السفلى، فلا
                     يُقرأ خطّان في موضع التقائهما. */
                  box-shadow: var(--shadow-gold); }
.crumbbar-inner::before { inset-block-start: -1px; }
/* **وهالةُ الترويسة في الداكن أغمقُ وأخفّ** (ملاحظةُ صاحب المشروع): الذهبيُّ
   ‏18٪ حول حاويةٍ عريضةٍ على أرضٍ داكنةٍ يُقرأ ضبابًا لا ضوءًا — والأرضُ الفاتحةُ
   تُبدّده والداكنةُ تُظهر كلَّ ما فيه. وحذفُها كلَّها جُرِّب فلم يَحسُن: الحاويةُ
   تلتصق بالصفحة بلا عمق. فصارت ظلًّا أسودَ منحسرًا — عمقٌ لا ضوء. ثمّ فُتح قليلًا بطلبه: ‏٨٥٪ → ‏٥٨٪.
   و‏black هو اللونُ الوحيدُ الذي لا يفسده المزجُ بالشفّاف: قنواتُه أصفارٌ أصلًا. */
:root[data-theme="dark"] .header-inner,
:root[data-theme="dark"] .crumbbar-inner {
  box-shadow: 0 8px 24px -10px color-mix(in srgb, black 58%, transparent); }
.crumbbar .breadcrumb { margin: 0; min-width: 0; }
/* ولا يلتفّ في الجوّال: يمسح أفقيًّا بلا شريطٍ ظاهر، فالسطرُ يبقى سطرًا
   والشريطُ لا يتضخّم على شاشةٍ صغيرة — والجوّالُ أكثرُ ما يُستعمل. */
.crumbbar .breadcrumb ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                           -ms-overflow-style: none; }
.crumbbar .breadcrumb ol::-webkit-scrollbar { display: none; }
.crumbbar .breadcrumb li { white-space: nowrap; }

.breadcrumb { font-size: var(--text-sm); color: var(--fg-muted); margin-bottom: var(--space-3); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.breadcrumb a { color: var(--fg-muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .icon { width: .85em; height: .85em; color: var(--fg-faint); }
.breadcrumb [aria-current] { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.page-header { margin-bottom: var(--space-10); padding-bottom: var(--space-6); border-bottom: 1px solid var(--divider); }
.page-header .eyebrow { margin-bottom: var(--space-1); }
.page-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.page-header-body { display: flex; align-items: center; gap: var(--space-4); min-width: 0; flex: 1 1 20rem; }
.page-header .title { margin: 0; overflow-wrap: anywhere; }
.page-header .lead { margin: var(--space-2) 0 0; max-width: 60ch; }
.page-header .meta { margin: var(--space-1) 0 0; color: var(--fg-muted); font-size: var(--text-sm); }
.page-header-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-6); }
.toolbar .field { flex: 1 1 20rem; margin: 0; }
.results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
               gap: var(--space-2) var(--space-4); color: var(--fg-muted); font-size: var(--text-sm);
               margin-bottom: var(--space-4); padding-bottom: var(--space-3);
               border-bottom: 1px solid var(--divider); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.pager-state { color: var(--fg-muted); font-size: var(--text-sm); }

/* ── ١١. النماذج: العنوان فوق الحقل، الرسالة تحته برمز لا بلون وحده ── */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: var(--space-1); }
.label { display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.label .req { color: var(--destructive); font-weight: 700; }
.input,  select {
  --r: var(--radius-control); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  font: inherit; line-height: 1.6; color: var(--fg); background: var(--card);
  border: 1px solid var(--input); border-radius: var(--r);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:hover, :hover,  select:hover { border-color: var(--fg-faint); }
.input:focus-visible, :focus-visible,  select:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; border-color: var(--brand-dark); }
.input::placeholder, ::placeholder { color: var(--fg-muted); } /* --fg-faint كان 2.56:1 */
.input:disabled, :disabled,  select:disabled { background: var(--surface-mute); color: var(--fg-muted); cursor: not-allowed; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"],  select[aria-invalid="true"] { border-color: var(--destructive); box-shadow: inset 0 0 0 1px var(--destructive); }
.field.is-success .input, .field.is-success .textarea, .field.is-success .select select { border-color: var(--brand); }
.help { color: var(--fg-muted); font-size: var(--text-sm); margin: 0; }
@media (min-width: 768px) { .fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* نموذج البحث: النموذج الوحيد في الموقع */
/* شريطُ البحث عنصرٌ واحد لا عنصران: غلافٌ يحمل الأيقونة والحقل والزرّ، فحلقةُ
   التركيز على الغلاف كلِّه. وكان حقلًا وزرًّا منفصلَين يقرؤهما البصر مفكوكَين. */
.searchbar {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  /* منطقيّةٌ لا فيزيائية: الحافّةُ المختصرة كانت تعطي الأيقونةَ ‏5 بكسل من الحدّ
     والزرَّ ‏16 — أي معكوسةً في RTL. البداية (حيث الأيقونة) تتنفّس، والنهاية
     (حيث الزرّ) تُضيَّق فيلتصق الزرُّ بالغلاف. */
  padding-block: var(--space-1);
  padding-inline: var(--space-4) var(--space-1);
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.searchbar:hover { border-color: var(--fg-faint); }
/* الحلقةُ عند تركيزٍ ظاهرٍ فقط (لوحةُ المفاتيح أو النقرُ في الحقل)، لا عند تركيزٍ
   برمجيّ — وأرقُّ: بكسلان لا ثلاثة. */
.searchbar:has(input:focus-visible) { border-color: var(--primary); outline: 2px solid var(--ring); outline-offset: 2px; }
.searchbar input {
  /* الحشوُ ‏6 لا ‏8: بها يصير ارتفاعُ الحقل ‏44 فيطابق زرَّ الشريط كلَّ زرٍّ آخر في
     الموقع. وكان ‏48 فينفرد زرُّ البحث بارتفاعٍ لا نظيرَ له. */
  flex: 1; min-width: 0; font: inherit; font-size: var(--text-md); color: var(--fg);
  background: none; border: 0; padding-block: 6px;
}
.searchbar input:focus { outline: none; }
.searchbar input::placeholder { color: var(--fg-muted); }
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* الشريطُ الصغير في الترويسة: ارتفاعٌ ‏40 وخطٌّ ‏14 وحلقةٌ أرقّ. والمحدِّدُ بصنفَين
   لا بصنف: `.searchbar input` تسبقه في الملفّ وتساويه أولويّةً، فتغلبه الأخيرةُ —
   وهو ما جعل الشريط ‏54 بكسلًا بخطٍّ ‏17 في ترويسةٍ ‏65. */
.searchbar.searchbar-sm { padding-block: 2px; padding-inline: var(--space-3) 2px; gap: var(--space-2); }
.searchbar.searchbar-sm input { font-size: var(--text-sm); padding-block: var(--space-1); }
.searchbar.searchbar-sm:focus-within { outline-width: 2px; outline-offset: 1px; }

.searchbar .btn {
  /* يمتدّ على ارتفاع الغلاف الداخليّ، فتتساوى مسافتُه من الحدود الثلاثة: ما دون
     ذلك يجعله ‏5 بكسل من الجانب و‏7 من أعلى وأسفل — تفاوتٌ تراه العين. */
  flex: none; align-self: stretch; border-radius: var(--radius-pill);
  padding-block: 0; padding-inline: var(--space-5); gap: var(--space-2);
}
/* الأيقونةُ والنصُّ على خطٍّ واحد: الأيقونة تقرأ حجمَ النصّ فتتوسّطه بلا إزاحة. */
/* أيقونةُ البحث على الزرّ لا في الحقل: المكبّرُ هو ما يعرفه الناسُ زرَّ بحثٍ،
   وكان الزرُّ سهمًا والمكبّرُ زينةً في أوّل الحقل («وهنا أيقونة البحث» — صاحبُ
   المشروع). بقي المكبّرُ في أوّل الحقل حيث لا زرَّ أصلًا: شريطُ الترويسة
   الصغير ومُرشِّحُ القوائم، فهناك هو الدلالةُ الوحيدة. ومقاسُه واحد. */
.searchbar > .icon { color: var(--fg-muted); flex: none; width: 1.25rem; height: 1.25rem; stroke-width: 2; align-self: center; }
.searchbar.searchbar-sm > .icon { width: 1.1rem; height: 1.1rem; }
@media (max-width: 479px) {
  /* على الشاشة الضيّقة يسقط نصُّ الزرّ وتبقى الأيقونة، فلا يُخنق الحقل. */
  .searchbar .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* الذهبيُّ نصًّا: الأصليُّ (‏#B79851) ‏2.57:1 على السطح فلا يصلح حتى للأرقام
   الكبيرة (حدُّها ‏3)؛ و«الغامق» (‏primary-active) كان يبدو بُنّيًّا — لاحظه
   صاحبُ المشروع. فيُؤخذ الأقربُ إلى الأصل ممّا يمرّ: ‏primary-hover ‏3.2:1
   للأرقام والحرف الأوّل (كبيرةٌ غليظة). وحيث لا نصّ — حافّةُ السؤال والأيقونات
   والتركيز — الذهبيُّ الأصليُّ كما هو. */
/* ── ١٢. البطل المتزن في الرئيسية وحدها ── */
.hero { text-align: center; padding-block: var(--space-6) var(--space-8); }
.hero .title { margin-bottom: var(--space-2); } /* يرث --fs-title؛ و.hero-search .title أصغرُ لأنّه استعلامُ الزائر */
.hero .lead { max-width: 44rem; margin-inline: auto; }
/* عرضُ الحقل واحدٌ حيث ظهر: ‏40rem في البطل وفي شريط أدوات النتائج. والعنصرُ
   الواحد بعرضَين مختلفَين يُقرأ تفاوتًا وإن كان كلٌّ منهما حسنًا وحده. */
.hero .field { max-width: 40rem; margin: var(--space-6) auto 0; }
.toolbar .field { max-width: 40rem; }
/* ترويسةُ البحث: هيكلُ الرئيسية نفسُه، والعنوانُ أصغرُ لأنّه استعلامُ
   الزائر لا اسمُ الموقع — ويُقصّ إن طال فلا يدفع الحقلَ إلى أسفل الشاشة. */
.hero-search { padding-block: clamp(var(--space-6), 1rem + 2.5vw, var(--space-12)) var(--space-6); }
.hero-search .eyebrow { margin-bottom: var(--space-1); }
/* و«إلغاء» تحت الحقل ممركَزًا: إلى جانبه أفقيًّا كانت تُزيح الحقلَ عن
   موضعه في الرئيسية — وثباتُ الحقل هو المقصود كلُّه. */
.search-cancel { margin-top: var(--space-3); }
.hero-search .title { font-size: clamp(1.25rem, 2.4vw, 1.5rem); overflow-wrap: anywhere;
                      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                      overflow: hidden; }
.hero-search .field { max-width: 40rem; margin: var(--space-5) auto 0; }
.hero-search .help { text-align: center; }

.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); margin-top: var(--space-6); color: var(--fg-muted); font-size: var(--text-sm); }
.hero-stats strong { display: block; color: var(--primary-hover); font-size: var(--text-xl); font-weight: 700; line-height: 1.3; }

/* ── ١٣. صفحة التفاصيل: المحتوى ثم المعلومات المساندة؛ عمود واحد على الجوال ── */
.detail { display: grid; gap: var(--space-8); align-items: start; grid-template-columns: minmax(0, 1fr); }
/* الهامشُ ‏16–22rem والمتنُ يأخذ الباقي: كان المتنُ ثابتًا ‏46rem فبقي للهامش
   ‏177 بكسلًا في ‏1024 — والرابطُ الدائم ينكسر في منتصفه. والمتنُ لا يخسر:
   سقفُ السؤال والجواب ‏38rem، وفي ‏1024 يبقى له ‏42rem. */
/* دون ‏1024 عمودٌ واحدٌ ممركَز: كان السؤالُ والجوابُ يلتصقان بالحافّة وثلثُ
   الشاشة خاوٍ («توسيط هذه» — صاحبُ المشروع). والهامشُ يتبعهما بالعرض نفسِه. */
.detail-main, .detail-aside { width: 100%; max-width: 38rem; margin-inline: auto; }
@media (min-width: 1024px) {
  .detail { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); }
  .detail-main, .detail-aside { max-width: none; margin-inline: 0; }
}
.detail-main { min-width: 0; }
.question { --r: var(--radius-card); background: var(--surface-soft); border-radius: var(--r);
            padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6);
            position: relative; }
.question .eyebrow { margin-bottom: var(--space-1); }
.question-text { font-family: var(--font-read); font-size: 20px; font-weight: 700; line-height: 1.8; color: var(--fg); margin: 0; }
/* مقاس المتن: 46rem تعطي ٨٧ حرفا في السطر فتضيع العين عند العودة؛ 38rem تعطي ٧٢.
   يقيَّد المتن وحده لا العمود، فالصور تبقى بعرض العمود.
   وبعد أن صار الجوابُ في حاويةٍ صار القيدُ على الحاوية، فحشوُها يُنزل السطرَ
   إلى نحوِ ‏66 حرفًا — أقربُ إلى الأمثل، واستقامةُ الحافّتَين أنفعُ للعين من
   حرفٍ زائد. */
.question { max-width: 38rem; }
.question-text p { margin: 0 0 .75em; }
.question-text p:last-child { margin-bottom: 0; }
/* والجوابُ حاويةٌ كالسؤال لا نصًّا عائمًا على أرض الصفحة: الصفحةُ متنٌ
   واحدٌ طويل، فبلا حاويةٍ لا يُعرَف أين ينتهي الجوابُ وتبدأ الصفحة.
   وحافّتُه على حافّة السؤال سواءً (‏38rem) فيستقيم الخطُّ الرأسيّ. */
.answer { --r: var(--radius-card); max-width: 38rem; position: relative;
          background: var(--card); border: 0; border-radius: var(--r); }
.answer-head { background: var(--surface-soft); border-bottom: 1px solid var(--border);
               border-start-start-radius: var(--r); border-start-end-radius: var(--r);
               padding: var(--space-3) var(--space-5); }
.answer .eyebrow { margin-bottom: var(--space-1); }
.byline { margin: 0; }
.answer-text { font-family: var(--font-read); font-size: 18px; line-height: 2;
               padding: var(--space-5); }
.answer > .muted { margin: 0; padding: var(--space-5); }
.answer-text a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* الرسم العثماني كثيف العلامات فيحتاج سطرا اوسع */
.quran { font-family: var(--font-mushaf); font-size: 1.15em; line-height: 2.15; color: var(--brand-dark); }
.card .quran { font-size: 1.06em; line-height: 2; }
.media { display: grid; gap: var(--space-3); margin-top: var(--space-6); justify-items: center; }
/* الصورةُ في غلافٍ بنسبتها من بيانات القاعدة: يُحفَظ مكانُها قبل أن تصل، ولو
   غابت (‏28 ملفًّا مكسورًا معروفًا) بقي الصندوقُ وبقي نصُّها البديل مقروءًا
   — وكانت المكسورةُ نقطةً ‏2×2 يقفز حولها التخطيط.
   والصورُ لقطاتُ هاتفٍ طويلةٌ غالبًا: سقفُ الارتفاع ‏32rem والعرضُ يتبعه. */
.media-item { --r: var(--radius-control); margin: 0; aspect-ratio: var(--w) / var(--h);
              max-height: 32rem; max-width: 100%; width: calc(32rem * var(--w) / var(--h));
              background: var(--surface-mute); border: 1px solid var(--border); border-radius: var(--r);
              overflow: hidden; display: grid; place-items: center; color: var(--fg-muted); font-size: var(--text-sm); }
.media-item img { width: 100%; height: 100%; object-fit: contain; }
.media video { --r: var(--radius-control); width: 100%; border-radius: var(--r); border: 1px solid var(--border); }
/* والهامشُ لوحٌ لا خطٌّ فاصل: فيه رقمُ الاستشارة وموضوعاتُها ورابطُها
   الدائم — وهي أدواتٌ تُقصَد، فتُجمَع في حاويةٍ تُرى بنظرة. */
.detail-aside { --r: var(--radius-card); font-size: var(--text-sm); color: var(--fg-2);
                background: var(--surface-soft); border: 0; position: relative;
                border-radius: var(--r); padding: var(--space-5); }
/* والرابطُ بالزيتونيّ الأغمق لا الفاتح: جعلتُ الهامشَ لوحًا بأرضٍ مظلَّلة،
   فنزل الرابطُ الدائم إلى ‏4.43 — أي أنّ حاويةً أضفتُها كسرت حدَّ التبايُن.
   والأرضُ الأفتحُ ترفعه إلى ‏4.56 بالكاد، والأغمقُ عليها ‏6.93. */
.meta-list dd a { color: var(--brand-dark); }
@media (min-width: 1024px) {
  .detail-aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.meta-list { margin: 0; display: grid; gap: var(--space-4); }
.meta-list dt { display: flex; align-items: center; gap: 6px; color: var(--fg-muted); font-size: var(--text-xs); font-weight: 600; }
.meta-list dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.meta-list dd a { font-weight: 600; }

/* ── ١٤. الحالات: تنبيه، خاو، تحميل ── */
.alert { --r: var(--radius-control); display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
         border: 1px solid transparent; border-radius: var(--r); font-size: var(--text-sm); color: var(--fg); margin-bottom: var(--space-4); }
.alert .icon { width: 1.25em; height: 1.25em; margin-top: .3em; }
.alert p { margin: 0; }
.alert-info    { background: var(--info-soft); }        .alert-info .icon    { color: var(--info); }
.empty-state { text-align: center; padding: var(--space-12) var(--space-4); color: var(--fg-muted); max-width: 32rem; margin-inline: auto; }
.empty-state .icon { display: block; width: 48px; height: 48px; margin: 0 auto var(--space-3); color: var(--fg-faint); stroke-width: 1.3; }
.empty-state .heading { color: var(--fg); margin-bottom: var(--space-2); }
.empty-state p { margin: 0 0 var(--space-4); }
.empty-state .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.empty-state .field { text-align: start; margin: 0 auto var(--space-6); }
.empty-state .eyebrow { display: block; margin-bottom: var(--space-1); }
@keyframes pulse { 50% { opacity: .55; } }

/* ── ١٥. التذييل ── */
/* تذييلٌ سكّريّ بالهوية والجملة وحدهما — قرار صاحب المشروع بعد رؤية الداكن.
   ولا روابطَ فيه: التنقّل في الترويسة، وتكرارُه أسفلَ كل صفحةٍ زحمةٌ لا خدمة. */
.site-footer {
  /* جُرِّب سطحٌ بلون الصفحة وخطٌّ بعرض الحاوية، فرُدّ إلى ما كان (قرارُ صاحب
     المشروع): سطحٌ خاصٌّ بحدٍّ من حافّةٍ إلى حافّة. */
  background: var(--footer-bg); color: var(--fg-2);
  border-top: 1px solid var(--divider);
  margin-top: var(--section-gap); padding-block: var(--space-8); font-size: var(--text-sm);
}
.footer-brand p { color: var(--fg-muted); margin: 0; line-height: 1.8; }

/* ── صفوفُ النتائج ──
   قائمةٌ كثيفة بفواصلَ رقيقة بدل شبكةِ بطاقات: خمسون نتيجةً في بطاقاتٍ طويلة
   تحتاج تمريرًا طويلًا ولا تُمسح بالعين. والبطاقةُ تبقى حيث العرضُ مقصود:
   «أحدث الاستشارات» في الرئيسية و«ذات صلة» أسفل الجواب. */
/* ── صفحةُ النتائج ────────────────────────────────────────────────────────
   عمودٌ واحد بعرضِ قراءةٍ مريح (‏40rem) لا بعرض الحاوية: عنوانٌ يمتدّ ‏1120
   بكسلًا تتعب العينُ في تتبّعه، ويطابق هذا العرضُ حقلَ البحث فوقه.
   **وممركَزٌ لا مُزاحٌ إلى الحافّة**: الحقلُ فوقه ممركَزٌ في الرئيسية، فعمودٌ
   يلتصق بحافّةٍ يقطع الخطَّ الرأسيَّ الذي تتبعه العين. */
.results-page { max-width: 40rem; margin-inline: auto; }
.results { display: flex; flex-direction: column; gap: var(--space-4);
           max-width: 40rem; margin-inline: auto; }

/* والنتيجةُ حاويةٌ لا صفٌّ بينه خطّ: الحدُّ يفصل، والحاويةُ تجمع — وهي
   أوضحُ في ‏RTL حيث تتشابه بداياتُ السطور. والكثافةُ محفوظةٌ بحشوٍ معتدل. */
.result { background: var(--card); border: 0;
          border-radius: var(--radius-card); padding: var(--space-5) var(--space-6);
          transition: box-shadow var(--dur-fast), transform var(--dur-fast); }
.result:hover { box-shadow: var(--shadow-md); }
/* لمسةٌ واحدة: شريطٌ ذهبيٌّ على حافّة البداية يظهر عند التمرير — يدلّ على
   القابلية للنقر بلا تغييرِ لونِ نصٍّ ولا تحريكِ تخطيط. */
.result { position: relative; overflow: hidden; }
/* لا شريطًا على حافّة الحاوية — لا في السؤال ولا عند المرور على النتيجة: كان
   يُقرأ فقاعةَ ذكاءٍ اصطناعيّ (قرارُ صاحب المشروع ‏٢٠٢٦-٠٩-٠٦). الحدُّ الذهبيُّ
   عند المرور يكفي دلالةً. */
@media (prefers-reduced-motion: reduce) {
  .result { transition: none; }
}
.result-title { font-family: var(--font-read); font-size: 19px; font-weight: 700; line-height: 1.7; margin: 0; }
.result-title a { color: var(--fg); }
.result-title a:hover { color: var(--brand-dark); }
/* والمقتطفُ مضبوطُ الطرفَين، و`text-wrap: pretty` يمنع الكلمةَ اليتيمة في
   آخر سطر. **والضبطُ من عرضٍ معيّنٍ وما فوق**: على الجوّال العمودُ نحوَ ‏30
   محرفًا، والضبطُ فيه يفتح فجواتٍ تشقّ السطرَ رأسيًّا — قِيس بالعين على ‏375
   بكسلًا. فالسطرُ القصير يُترك على طبيعته. */
.result-excerpt { font-family: var(--font-read); color: var(--fg-2); font-size: 17px;
                  line-height: 1.9; margin: var(--space-2) 0 0; text-wrap: pretty;
                  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4);
               margin-top: var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); }
.result-meta > * { display: inline-flex; align-items: center; gap: 6px; }
.result-id { font-variant-numeric: tabular-nums; }
.result-id::before { content: "#"; }
.result-topic { color: var(--brand-dark); }
.result-topic::before { content: "•"; color: var(--fg-faint); margin-inline-end: 6px; }
/* إبرازُ كلمات البحث: خلفيّةٌ ذهبيّةٌ رقيقة لا لونُ نصٍّ — فلا يُقرأ رابطًا. */
mark { background: var(--primary-soft); color: inherit; border-radius: 3px; padding: 0 2px; }

/* مُرشِّحُ القوائم: حقلٌ صغير وعدَّادٌ يعلن ما بقي — والعدَّادُ `aria-live` فيُسمَع. */
.list-filter { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
               margin-bottom: var(--space-5); }
.list-filter .searchbar { flex: 1 1 18rem; max-width: 24rem; }
.list-filter .help { margin: 0; }

/* الفرزُ قِرصٌ كشريط البحث الصغير لا حقلَ نموذجٍ مربَّع: هما أداتان متجاورتان
   على قائمةٍ واحدة، فاختلافُ الحافّة والارتفاع بينهما يُقرأ عطبًا. والقائمةُ
   داخلَه بلا هيئةٍ أصليّة (`appearance: none`) — سهمُ المتصفّح يجلس في الطرف
   المقابل للعربيّة ويحمل حافّتَه، فيصير في القِرص طوقان. */
.sort-control { display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: 2px; padding-inline: var(--space-3) var(--space-2);
  min-height: 40px; background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); color: var(--fg-muted);
  cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.sort-control:hover { border-color: var(--fg-faint); }
.sort-control:has(select:focus-visible) { border-color: var(--primary);
  outline: 2px solid var(--ring); outline-offset: 1px; }
.sort-control select {
  appearance: none; -webkit-appearance: none;
  width: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--fg); cursor: pointer; }
.sort-control select:focus-visible { outline: none; }
/* والسهمُ زينةٌ لا هدف: النقرُ يمرّ من فوقه إلى القائمة تحته. */
.sort-control .sort-caret { pointer-events: none; color: var(--fg-muted); }

/* **والأداةُ في طرف صفّ العنوان** (قرارُ صاحب المشروع): تحت الترويسة كانت
   جارةَ حقلِ البحث، وهي لا تُرشِّح شيئًا — فمكانُها الطرفُ المقابل للعنوان،
   حيث يجلس العدّادُ في الصفحات الأخرى. و‏align-self لأن الصفَّ يحاذي بخطّ
   القاعدة: قِرصٌ يحاذي خطَّ قاعدة عنوانٍ ضخمٍ يهبط عنه. */
.page-header-tools { order: 3; flex: none; align-self: center; }
/* والسطرُ الواصفُ يتوسّط ما بين العنوان والأداة — لا يُلصَق بالطرف كما في
   الصفحات التي لا أداةَ فيها. والمحدِّدُ بـ‏:has فلا يمسّ صفحةً أخرى. */
.page-header-title-row:has(.page-header-tools) .lead { margin-inline: auto; }
/* **وفي الجوّال لا صفَّ أصلًا** (ملاحظةُ صاحب المشروع): الثلاثةُ تنزل سطورًا،
   فالتوسيطُ الذي كان يفصل العنوانَ عن الأداة يصير سطرًا عربيًّا موسَّطًا يبدأ
   كلُّ سطرٍ منه من مكانٍ مختلف. يعود المتنُ إلى بدئه: من اليمين إلى اليسار. */
@media (max-width: 639px) {
  .page-header-title-row:has(.page-header-tools) .lead {
    margin-inline: 0; width: 100%; text-align: start; }
}

/* صفحتا القائمة: الترويسةُ والمُرشِّحُ ممركَزان كالرئيسية وصفحة النتائج —
   فحقلٌ في الوسط تحت ترويسةٍ مُزاحةٍ يكسر الخطَّ الرأسيَّ الذي تتبعه العين. */
.centered-head { text-align: center; }
.centered-head .page-header-row,
.centered-head .page-header-body { justify-content: center; }
.centered-head .breadcrumb ol { justify-content: center; }
/* ولا ‏margin-inline: auto للسطر بعد أن صار في صفّ العنوان: يدفعه عن جاره. */
.centered-head .list-filter { justify-content: center; }
.centered-head .list-filter .searchbar { flex: 0 1 24rem; }
/* نصُّ الخلوّ يأتي من الصفحة بمتغيّرٍ لا يُكتب في الطبقة: «موضوع» في صفحة
   الموضوعات و«مستشار» في صفحة المستشارين. */
.grid.is-empty::after { content: var(--empty-text, "لا نتائج"); color: var(--fg-muted);
                        grid-column: 1 / -1; padding-block: var(--space-6); text-align: center; }

/* ── الطباعة: الجوابُ يُطبَع ويُقتبَس، فالورقةُ نصٌّ لا واجهة ──
   يُحذف ما لا معنى له على الورق (الترويسة والتذييل والتنقّل والأزرار وذات الصلة)،
   ويُكتب الرابطُ الدائم بعد العنوان كي يبقى الاستشهاد ممكنًا من الورقة نفسِها. */
@media print {
  .site-header, .site-footer, .pager, .badges, .print-page, .copy-link,
  .breadcrumb, .section[aria-labelledby="related-h"] { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .container { width: auto; max-width: none; padding: 0; }
  .card { border: 0; box-shadow: none; padding: 0; background: none; }
  .detail { display: block; }
  .detail-aside { border: 0; padding: 0; margin-top: 12pt; }
  .quran { color: #000; }
  a { color: #000; text-decoration: none; }
  /* الرابطُ يُطبَع نصًّا بعد المُحيل: الورقةُ لا تُنقَر. */
  .meta-list a[href^="/استشارة"]::after { content: ""; }
  @page { margin: 18mm 16mm; }
}

/* زرُّ النسخ بجانب الرابط لا تحته. */
.meta-list dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.meta-list dd a[dir="ltr"] { word-break: break-all; }
.print-page { align-self: start; }

/* أرقامُ الصفحات: نافذةٌ صغيرة تجعل صفحةً من ‏134 قريبةَ النقرة. */
.pager-pages { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.pager-pages a, .pager-current { display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-control);
  font-variant-numeric: tabular-nums; }
.pager-pages a { color: var(--fg-2); }
.pager-pages a:hover { background: var(--secondary); color: var(--brand-dark); }
.pager-current { background: var(--brand); color: var(--brand-fg); font-weight: 700; }
/* والنقاطُ زخرفٌ مخفيٌّ عن قارئ الشاشة (`aria-hidden`)، فلا يلزمها حدُّ
   التبايُن — لكنّها تُرى، وكانت ‏3.94 في الوضع الداكن. ورفعُها درجةً مجّانيّ. */
.pager-gap { color: var(--fg-muted); padding-inline: var(--space-1); }
@media (max-width: 639px) { .pager-pages { display: none; } }

/* اختيارُ الترتيب: وصلتان بمظهر مفتاحٍ صغير، الفاعلةُ بخلفيّةٍ زيتونيّةٍ رقيقة. */
.sort { display: inline-flex; gap: 2px; background: var(--surface-mute); border-radius: var(--radius-pill); padding: 2px; }
.sort a { padding: 4px var(--space-3); border-radius: var(--radius-pill); color: var(--fg-muted); font-size: var(--text-sm); }
.sort a:hover { color: var(--brand-dark); }
.sort a.is-on { background: var(--card); color: var(--brand-dark); font-weight: 700; box-shadow: var(--shadow-xs); }

/* صفُّ وسومٍ مشتقّة: عنوانٌ خفيفٌ ثم وسوم، بعرض عمود النتائج نفسِه فتستقيم الحافّة. */
.tag-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
           max-width: 40rem; margin-bottom: var(--space-5); }
.tag-row-label { color: var(--fg-muted); font-size: var(--text-sm); }

/* ── ١٧. اللمسُ والجوّال ─────────────────────────────────────────────────
   الجوّالُ هو الأكثرُ استخدامًا (قرارُ صاحب المشروع ‏٢٠٢٦-٠٩-٠٤)، فالقياسُ
   عليه لا على المكتب. وقِيست الصفحاتُ السبعُ على ‏360 و‏390 بكسلًا: **لا فائضَ
   أفقيًّا في واحدةٍ منها** — وهو أخطرُ عيوب الجوّال. والباقي عيبان:

   ‏١) حقولُ الترشيح ‏14 بكسلًا، و‏iOS يُكبّر الصفحةَ تلقائيًّا عند لمس أيّ
      حقلٍ دون ‏16 — فيخرج التخطيطُ عن الشاشة والزائرُ لم يطلب شيئًا.
   ‏٢) أهدافُ لمسٍ بين ‏27 و‏36 بكسلًا، والحدُّ المعروف ‏44.

   و‏`pointer: coarse` لا عرضُ الشاشة: المقياسُ أداةُ الإدخال — فجوّالٌ عريضٌ
   يُلمَس، وشاشةٌ ضيّقةٌ بفأرةٍ لا تحتاج هذا. */
@media (pointer: coarse) {
  /* ‏16 بكسلًا حدًّا أدنى: يمنع التكبيرَ التلقائيّ في ‏iOS. */
  input, select, textarea, .searchbar input, .searchbar.searchbar-sm input { font-size: 16px; }
  .searchbar { min-height: 48px; }

  /* والهدفُ يتوسّع دون أن يتضخّم المرئيّ: طبقةٌ شفّافةٌ بارتفاع ‏44 حول
     الوسم، فتبقى الكثافةُ البصرية ويصير اللمسُ مضمونًا. */
  .result-topic, .breadcrumb a, .sort a, .byline a { position: relative; }
  .result-topic::after, .breadcrumb a::after, .sort a::after, .byline a::after {
    content: ""; position: absolute; inset-inline: -4px; top: 50%;
    transform: translateY(-50%); height: 44px;
  }

  /* والوسمُ استثناءٌ من الطبقة الشفّافة: الوسومُ تُصفَّف صفوفًا متلاصقةً
     بفجوةِ ‏8 بكسلًا، فطبقةُ ‏44 تتجاوز إلى صفّ الجيران — فيُلمَس وسمٌ
     ويُفتَح غيرُه. قِسته: ‏2 من ‏3 نقاطٍ تصيب الجار.
     فيُكبَّر الوسمُ نفسُه وتُوسَّع الفجوةُ: زيادةٌ مرئيّةٌ صغيرةٌ أصدقُ من
     هدفٍ خفيٍّ يسرق لمسةَ غيره. */
  .badges { gap: var(--space-3); }
  .badge { min-height: 40px; padding-block: var(--space-1); }
  .btn-sm, .search-cancel { min-height: 44px; }
  /* والحقلُ يملأ شريطَه: كان ‏38 داخل شريطٍ ‏48، والضغطُ على حشو الشريط لا
     يُركّز الحقل — فالهدفُ المرئيُّ أوسعُ من الهدف الفعليّ. */
  .searchbar input { min-height: 44px; }
  /* ورابطُ «كلّ الموضوعات» في رأس القسم نصٌّ مستقلٌّ يُقصَد، لا رابطًا في متن. */
  .section-head a { min-height: 44px; display: inline-flex; align-items: center; }

  /* **والبطاقةُ كلُّها هدفٌ واحد**: كان القابلُ للنقر عنوانَها وحدَه (‏29
     بكسلًا) داخل بطاقةٍ من ‏90 — أي أنّ أربعةَ أخماس ما تراه الإصبعُ لا
     يستجيب. و‏196 بطاقةَ موضوعٍ ومستشارٍ كذلك.
     ويُمدّ العنوانُ نفسُه بطبقةٍ شفّافةٍ تغطّي البطاقة، فلا وسمٌ يُضاف ولا
     جافاسكربت — والروابطُ الأخرى داخلها تُرفَع فوقها فتبقى قابلةً للنقر. */
  .card-link { position: relative; }
  .card-link .card-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
  .card-link .card-meta a, .card-link .badges a { position: relative; z-index: 1; }
}

/* ── ١٨. لمساتٌ رخيصةُ الكلفة ────────────────────────────────────────────
   المؤثّراتُ على `transform` و`opacity` وحدَهما: يُنفّذهما المُركِّبُ على
   بطاقة الرسم فلا تُعاد الحسبةُ ولا الرسمُ — بخلاف `top` و`height` و`filter`.
   ولا شيءَ منها يُحرّك تخطيطًا، فلا يقفز النصُّ تحت الإصبع. */
.card { transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-standard); }
@media (hover: hover) {
  .card-link:hover { transform: translateY(-2px); }
  .result:hover { transform: translateY(-1px); }
}
/* وعلى اللمس لا تمريرَ: الأثرُ عند الضغط، وهو ما يُغني عن `:hover` هناك. */
.card-link:active, .result:active { transform: scale(.995); }

/* والأفاتار حلقةٌ رقيقةٌ تفصله عن أرض البطاقة — ظِلٌّ داخليٌّ لا حدٌّ، فلا
   يزيد المقاسَ ولا يُعيد حسبةَ التخطيط. */
.avatar { box-shadow: inset 0 0 0 1px var(--primary-border); }

/* **ولا شرطةَ بعد عنوان القسم** (قرارُ صاحب المشروع: «الخطُّ اللي بعد عنوان
   الأقسام احذفه»): كانت شرطةً زيتونيّةً ‏24×2 تتبع العنوان، ومعها ‏inline-flex
   لم يوجد إلّا ليحضنها. وحدُّ رأس القسم أسفلَه يكفي دلالةً على بدايته. */

@media (prefers-reduced-motion: reduce) {
  .card, .result { transition: border-color var(--dur-fast); }
  .card-link:hover, .result:hover,
  .card-link:active, .result:active { transform: none; }
}

/* ── ١٩. الرئيسية: البطلُ بنقش المركز، والزجاجُ على البطاقات ──────────────
   هويّةُ المركز «زجاجٌ سائلٌ × ذهبٌ دافئ» — وكان الموقعُ بطاقاتٍ مسطّحةً بحدٍّ
   رقيق: أنظفَ من أن يُميَّز. هنا تدخل أصولُ التصميم التي لم تُستعمل: نقشُ
   النجوم الذهبيّ، وطبقاتُ الزجاج، والحافّةُ المضيئة، والشعارُ الأفقيّ.
   كلُّها من رموز النظام، ولا لونًا مباشرًا. */

/* البطل: أرضٌ صافية بلا نقشٍ ولا هالة (جُرِّبا فرُفِضا — قرارُ صاحب المشروع
   ‏٢٠٢٦-٠٩-٠٦)؛ ما يميّزه المساحةُ والمقاسُ وحدَهما، وتكبر مع الشاشة (‏40 → ‏96). */
.hero-home { padding-block: clamp(var(--space-10), 2rem + 4.5vw, var(--space-24))
                            clamp(var(--space-8), 1.5rem + 3vw, var(--space-16)); }
/* العنوانُ أكبرُ من عنوان الصفحات (‏32 → ‏52): هو اسمُ الموقع لا عنوانَ قائمة. */
.hero-home .title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.25; margin-bottom: var(--space-3); }
/* والسطرُ التمهيديُّ بعرض الحاوية لا ‏40rem (قرارُ صاحب المشروع): يصير سطرًا
   واحدًا ما دام يسع في عرض بطاقات الأرقام تحته، وينكسر من نفسِه حين يضيق —
   شرطُه هو ‏max-width نفسُها، فلا نقطةَ كسرٍ تُكتب له. */
.hero-home .lead  { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); max-width: none; color: var(--fg-2); }
/* الحقلُ أكبرُ ما في الصفحة: ‏56 ارتفاعًا وخطُّه ‏19، وظلٌّ يرفعه عن النقش. */
.hero-home .field { max-width: 44rem; margin-top: var(--space-8); }
.hero-home .searchbar { min-height: 56px; padding-inline: var(--space-6) var(--space-1);
                        box-shadow: var(--shadow-lg); border-color: var(--border); }
.hero-home .searchbar:hover { box-shadow: var(--shadow-xl); }
.hero-home .searchbar input { font-size: var(--text-lg); }
.hero-home .searchbar > .icon { width: 1.4rem; height: 1.4rem; }
/* الأرقامُ بلاطاتٌ بسطح الزجاج وحدِّه، بلا طمسٍ: لا شيءَ خلفَها يُطمَس. */
/* **بطاقةٌ واحدةٌ تشمل الثلاثةَ** (قرارُ صاحب المشروع): كانت ثلاثَ بطاقاتٍ
   متجاورةٍ بفجوة، فصارت سطحًا واحدًا وبين الأرقام خطٌّ فاصل — الأرقامُ الثلاثةُ
   قولٌ واحدٌ عن حجم الأرشيف، لا ثلاثةَ أخبارٍ متفرّقة.
   والفجوةُ صفرٌ لأنّ الخطَّ هو الفاصل، و`overflow: hidden` كي لا تخرج زاويةُ
   خليّةٍ عن نصف قطر البطاقة. */
.hero-home .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
                         max-width: 40rem; margin: var(--space-8) auto 0; overflow: hidden;
                         border-radius: var(--radius-card);
                         background: var(--glass-medium);
                         border: 0; position: relative;
                         box-shadow: var(--glass-shadow-card); }
.hero-home .hero-stats > div { position: relative; padding: var(--space-4) var(--space-3); }
/* والخطُّ على ما بعد الأوّل: فاصلان لثلاثِ خلايا لا حدٌّ حول كلٍّ.
   **وموزَّعٌ لا ممتدٌّ إلى الطرفَين** (قرارُ صاحب المشروع): حدُّ الخليّة يبلغ
   حافّتَيها فيُقرأ تقسيمًا للبطاقة، وقِطعةٌ منحسرةٌ ‏16 من أعلى ومثلُها من أسفل
   تُقرأ فاصلًا بين رقمَين. ولهذا هو عنصرٌ زائفٌ لا `border`. */
.hero-home .hero-stats > div + div::before {
  content: ""; position: absolute; inset-block: var(--space-4); inset-inline-start: 0;
  width: 1px; background: var(--divider); }
.hero-home .hero-stats strong { font-size: var(--text-2xl); }

/* **البطاقةُ حدٌّ واحدٌ لا حدّان** (ملاحظةُ صاحب المشروع على الإطار نفسِه في
   أيقونة البوت، وهو هنا على ‏٩٨ بطاقةً لا زرٍّ واحد): كانت حدًّا مصمتًا وفوقه
   حلقةُ ‏.gloss-rim بقناعٍ — طوقان ‏1 بكسل، يُقرآن في الداكن تكرارًا وفي الفاتح
   غرابةً، حتى خُفّض الطوقُ الثاني إلى ‏0.16 في الداكن مداراةً وبقي على ‏0.8 في
   الفاتح. حُذف الطوقُ كلُّه، وحلّت محلَّه لمعةٌ داخليّةٌ في ‏box-shadow: ضوءٌ من
   فوق ينكسر في سُمك السطح، لا خطٌّ يُرسَم حوله.
   وسقط معه ثلاثةُ تعقيداتٍ كانت لأجله: قناعُ ‏mask-composite، وإطفاءُ الحلقة
   عند التمرير لتظهر الذهبيّةُ تحتها، وانتقالُ شفافيّتها. */
.card { background: var(--glass-medium); box-shadow: var(--glass-shadow-card); }
/* عند التمرير: الحدُّ ذهبيٌّ — الذهبيُّ الأصليُّ لا الغامق، فهو حدٌّ لا نصٌّ
   ولا حدَّ تباينٍ عليه — مع ارتفاعٍ وظلٍّ عائمٍ خفيف. وكان يغمق إلى بُنّيٍّ
   يُقرأ إطارًا أسود (قرارُ صاحب المشروع: ذهبيّ). ولا شيءَ يحجبه الآن. */
.card-link:hover, .result:hover {
  --rim-top: var(--rim-lit);
  --rim-bottom: color-mix(in srgb, var(--color-primary) 60%, var(--color-bg-header)); }
.card-link:hover { box-shadow: var(--float-shadow), var(--shadow-sm); }
/* والنتيجةُ في القوائم تأخذ السطحَ نفسَه بلا حافّةٍ: كثافتُها مقصودة. */
.result { background: var(--glass-medium); }

/* رأسُ القسم: سطرٌ تمهيديٌّ فوق العنوان، والرابطُ على خطّ قاعدته. */
.section-head { align-items: flex-end; margin-bottom: var(--space-6); }
.section-head > div { min-width: 0; }
.section-head .eyebrow { display: block; margin-bottom: 2px; }

/* التذييل: الشعارُ الأفقيّ في الطرف، والهويّةُ والجملةُ في البداية.
   وحشوتُه ‏20 لا ‏40 (قرارُ صاحب المشروع): الأعمدةُ الثلاثةُ ‏112 بكسلًا، وحشوةٌ
   ‏40 من الطرفَين تجعله ‏192 — شريطًا يُنافس المتنَ لا يذيّله. صار ‏152. */
.site-footer { padding-block: var(--space-5); }
/* **الفوترُ ثلاثةُ أعمدة** (قرارُ صاحب المشروع): شعارُ المبادرة في المبدأ،
   والتعريفُ في المنتصف، وشعارُ المركز في المنتهى — والتعريفُ وحدَه هو الذي
   يتمدّد، فيقع في الوسط بلا عرضٍ يُحسَب له.
   **وكلُّها تبدأ من سطرٍ واحد**: كانت مُوسَّطةً بعضُها إلى بعض وارتفاعاتُها
   مختلفةٌ (‏112 و‏56 وثلاثةُ أسطر) فلا خطَّ يجمعها. و‏stretch لا flex-start:
   الأعمدةُ تتساوى ارتفاعًا ليمتدّ الفاصلُ بينها كاملًا، ومحتوى كلٍّ يبقى في
   رأسها بحكم انسيابه. */
.footer-inner { display: flex; flex-direction: column; gap: var(--space-6); }
.footer-mine, .footer-org { flex: none; }
.footer-brand p { color: var(--fg-muted); margin: 0; line-height: 1.8; }
/* وشعارُ المبادرة في الفوتر خلفيّةٌ كذلك. صَغُرَ من ‏112 إلى ‏96 بطلبه، وشعارُ
   المركز معه من ‏56 إلى ‏48 — والنسبةُ محفوظةٌ فيبقى القاعان ملتقيَين. */
.footer-mark { display: block; flex: none; width: 112px; height: 96px;
               background: url("/img/logo-full.svg") center/contain no-repeat; }
:root[data-theme="dark"] .footer-mark { background-image: url("/img/logo-full-dark.svg"); }
/* والصفُّ من ‏768: دونها تُكدَّس الأعمدةُ ولا فاصلَ بينها — خطٌّ رأسيٌّ فوق
   عمودٍ مكدَّسٍ يُقرأ حدًّا لا فصلًا. والنقطةُ واحدةٌ للاتّجاه وللفاصل معًا،
   فلا يفترقان. */
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; align-items: stretch; }
  /* هامشٌ من الجهتَين ثمّ الخطّ: ‏24 من الفجوة و‏24 من الحشوة — فالفاصلُ في
     منتصف ما بين التعريف والشعار، لا ملتصقًا بأحدهما. */
  /* والتعريفُ في وسط عموده رأسيًّا: الشعاران يملآن ارتفاعَ الصفّ من طرفَيه،
     فالنصُّ بينهما يتوسّطه — لا يتعلّق برأسه.
     (وجُرِّب في ‏١١ سبتمبر جمعُ الشعارَين في المبدأ بفاصلٍ واحدٍ بينهما والعبارةُ
     بعدهما، فرُدّ إلى هذا بقرار صاحب المشروع.) */
  .footer-brand { flex: 1 1 auto; display: flex; align-items: center;
                  border-inline: 1px solid var(--divider);
                  padding-inline: var(--space-6); }
  /* **والشعاران يتحاذيان من أسفلَ كما يتحاذيان من أعلى** (ملاحظةُ صاحب المشروع):
     شعارُ المبادرة ‏112 وكتلةُ المركز ‏80 (وسمٌ ‏20 وفجوةٌ ‏4 وشعارٌ ‏56)، فكانا
     يستويان في الرأس ويختلفان في القاع بـ‏32 بكسلًا. والعمودُ ممدودٌ إلى ارتفاع
     الصفّ أصلًا، فيُوزَّع ما فيه على طرفَيه: الوسمُ في أعلاه والشعارُ في أسفله —
     فيلتقي القاعان بلا تصغيرِ شعارٍ ولا تكبيرِ آخر. */
  .footer-org { justify-content: space-between; }
}
.footer-logo { --r: var(--radius-control); display: inline-flex; border-radius: var(--r); }
/* و«من مبادرات» فوق الشعار لا بجانبه: بجانبه يُقرأ سطرًا واحدًا مع اسم
   المركز المرسوم في الشعار نفسِه، وفوقه يُقرأ عنوانًا له. ويُحاذيه في طرفه. */
/* ── ضبطُ الطرفَين لكلّ متنٍ طويل (قرارُ صاحب المشروع) ──────────────────
   كان على الجواب ومقتطف النتيجة وصفحة النصّ وحدَها، فعُمِّم على كلّ ما يُقرأ
   فقراتٍ: السؤالُ ووصفُ البطاقة وجملةُ الفوتر واقتباسُ الدردشة وذيلُ اللوحة.
   وكان **من ‏640 وما فوق** خشيةَ فجواتٍ بين الكلمات في عمود الهاتف الضيّق،
   ثمّ عمّمه صاحبُ المشروع على الجوال (‏١٦ أكتوبر ٢٠٢٦): الحافّتان المستويتان
   أولى عنده، وعلى عنوانِ البطاقة والنتيجة (السؤالُ في الرئيسية والبحث).
   والسطرُ الأخيرُ على طبيعته (`text-align-last` تلقائيّ). */
.answer-text, .question-text, .card-description, .result-excerpt,
.card-title, .result-title,
.footer-brand p, .sheet-foot p, .chat-quote p {
  text-align: justify; text-justify: inter-word;
}

/* ── صفحةُ نصّ: حاويةٌ لها سطحُها، وصدرُها أوسعُ خطًّا ── */
.page-body {
  /* والمتنُ مضبوطُ الطرفَين (قرارُ صاحب المشروع): فقراتٌ مقروءةٌ في عمودٍ
     ضيّقٍ تستوي حافّتاها. والسطرُ الأخيرُ يبقى على طبيعته. */
  text-align: justify;
  text-align-last: start;
  padding: var(--card-pad);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.page-body > p:first-child { font-size: var(--fs-lead); color: var(--fg); }
.page-body > p { margin: 0 0 var(--space-4); }
.page-body > p:last-child { margin-bottom: 0; }

/* ── بابا المبادرة: بطاقتان تحت التعريف ── */
.channels { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width: 640px) { .channels { grid-template-columns: 1fr 1fr; } }
.channel {
  --r: var(--radius);
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast), transform var(--dur-fast);
}
@media (hover: hover) {
  .channel:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
}
.channel:active { transform: translateY(1px); }
.channel-mark {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius-control);
  background: var(--secondary); color: var(--brand-dark);
}
.channel-mark svg { width: 20px; height: 20px; fill: currentColor; }
.channel-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-body strong { font-size: var(--text-base); font-weight: 600; }
.channel-note { color: var(--fg-muted); font-size: var(--text-sm); }
.channel-go { margin-inline-start: auto; flex: none; color: var(--fg-faint); }
.channel:hover .channel-go { color: var(--brand-dark); }

.footer-org { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
/* «من مبادرات» في حاويةٍ زجاجيّة (قرارُ صاحب المشروع): كبسولةٌ بتعبئةٍ شفّافةٍ
   على أرض الفوتر، وحدٍّ زجاجيّ، ولمعةٍ داخليّةٍ في رأسها — فتُقرأ وسمًا معلَّقًا
   فوق الشعار لا سطرَ نصٍّ سائبًا.
   **ولا طمسَ خلفها**: الفوترُ سطحٌ مصمتٌ لا يمرّ تحته شيء، فالطمسُ يُحسَب ولا
   يُرى. الزجاجُ هنا شفوفٌ وحدٌّ ولمعة، لا ضبابٌ لِما ليس خلفَه صورة. */
.footer-org-label { color: var(--fg-muted); font-size: var(--text-xs); line-height: 1.7;
  /* والكبسولةُ بقدر كلمتها: في ذيل اللوحة الجانبية العمودُ `stretch`، فكانت
     تمتدّ بعرض اللوحة فتُقرأ شريطًا لا وسمًا. */
  align-self: flex-start; width: fit-content;
  /* ودورانٌ بسيطٌ لا كبسولة (قرارُ صاحب المشروع): الكبسولةُ تليق بسطرٍ واحد،
     وقد صارت سطرَين في ذيل اللوحة فقُرِئت مِضمارًا. و‏`--radius-control` مقاسُ
     الأزرار والحقول في نظام التصميم — فالوسمُ من عائلتها لا مقاسٌ مبتدَع. */
  padding: 2px var(--space-3); border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-bg-surface) 62%, transparent);
  border: 1px solid var(--glass-border-warm);
  box-shadow: inset 0 1px 1px var(--glass-specular), var(--shadow-xs); }
/* شعارٌ لكلّ سمة: صورتان والظاهرةُ واحدة. */

/* ── ٢٠. القائمةُ الجانبية للجوّال: لوحةٌ مصمتةٌ تنزلق من الحافّة ─────────
   كانت أربعةَ روابطٍ عائمةٍ فوق نصفِ شاشةٍ فارغ. الآن: هويّةٌ كاملة في الرأس،
   حقلُ بحثٍ بمقاسه، صفوفٌ ‏52 بكسلًا بأيقونةٍ في بلاطة، وذيلٌ بشعار المركز.
   والحركةُ على `transform` و`opacity` وحدَهما — رخيصةٌ على أضعف هاتف. */
/* واللوحةُ الجانبية من زجاج النافذة نفسِه: هي ثالثةُ الطبقات الطافية بعد
   الترويسة وأيقونة البوت، فلا تبقى صفيحةً مصمتةً بينها. وثقيلٌ كذلك — قائمةٌ
   تُقرأ لا شارة. */
.sheet { width: min(22rem, 88vw); border-inline-start: 1px solid var(--glass-border-strong);
         background: color-mix(in srgb, var(--color-bg-surface) 92%, transparent);
         -webkit-backdrop-filter: var(--glass-blur-heavy);
                 backdrop-filter: var(--glass-blur-heavy);
         box-shadow: inset 1px 0 1px var(--glass-specular), var(--glass-shadow-modal);
         opacity: 0; transform: translateX(-16px);
         transition: opacity var(--dur-med) var(--ease-enter), transform var(--dur-med) var(--ease-enter),
                     display var(--dur-med) allow-discrete, overlay var(--dur-med) allow-discrete; }
.sheet[open] { opacity: 1; transform: none; }
@starting-style { .sheet[open] { opacity: 0; transform: translateX(-16px); } }
.sheet::backdrop { background: var(--color-text-primary); opacity: .45; }
.sheet-body { padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); gap: var(--space-5); }
.sheet-head { padding-bottom: var(--space-4); border-bottom: 1px solid var(--divider); }
.sheet-label { margin: 0 var(--space-1) calc(-1 * var(--space-3)); color: var(--fg-muted);
               font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; }
.sheet-nav { gap: var(--space-1); }
.sheet-nav a { --r: var(--radius-md); min-height: 52px; padding: var(--space-2) var(--space-3);
               gap: var(--space-3); font-size: var(--text-md); border-radius: var(--r); }
.sheet-nav a::after { content: none; }
.sheet-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none;
              border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--brand-dark);
              transition: background var(--dur-fast), color var(--dur-fast); }
.sheet-icon .icon { width: 1.25rem; height: 1.25rem; }
.sheet-nav a[aria-current="page"] { background: transparent; }
.sheet-nav a[aria-current="page"] .sheet-icon { background: var(--brand); color: var(--brand-fg); }
.sheet-nav a:active .sheet-icon { background: var(--secondary); }
.sheet-chevron { margin-inline-start: auto; color: var(--fg-faint); width: .95em; height: .95em; }
.sheet-foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--divider);
              display: flex; flex-direction: column; gap: var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); }
/* **والوسمُ والشعارُ في حاويةٍ واحدةٍ بينهما فاصل** (قرارُ صاحب المشروع): كانا
   صندوقًا زجاجيًّا جنبَ شعار، فيُقرآن شيئَين. فالزجاجُ انتقل إلى الصفّ نفسِه
   — حاويةٌ واحدةٌ تحملهما — والوسمُ جُرِّد داخلَها: صندوقٌ في صندوقٍ يزيد
   حدًّا ولا يزيد معنى. */
.sheet-foot-org {
  display: flex; align-items: center; gap: var(--space-4);
  align-self: flex-start; width: fit-content;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-control);
  /* وتعبئةٌ خفيفةٌ لا تستحوذ على ما فيها (قرارُ صاحب المشروع): كانت ‏62٪ من
     سطحِ البطاقات على أرضِ لوحةٍ قريبةٍ منها، فتُقرأ بطاقةً بيضاءَ والشعارُ
     ساكنٌ فيها. و‏28٪ تُبقي الحدَّ واللمعةَ يرسمان الشكلَ، والأرضُ تكاد تُرى
     من خلفها — فالحاويةُ تجمع ولا تنافس. */
  background: color-mix(in srgb, var(--color-bg-surface) 28%, transparent);
  border: 1px solid var(--glass-border-warm);
  box-shadow: inset 0 1px 1px var(--glass-specular); }
/* والوسمُ سطران: `width: min-content` يضيّق الصندوقَ إلى أطولِ كلمةٍ فيه
   («مبادرات»)، فالكسرُ يقع في الفراغ الوحيد بين الكلمتَين — بلا `<br>` في
   المتن ولا رقمٍ يُعاد ضبطُه إن تغيّرت العبارةُ أو الخطّ.
   و‏**الرأسيُّ المُدار جُرِّب فرُدّ** («اعتقد تكون سطرين وبدون تدوير»). */
.sheet-foot .footer-org-label {
  position: relative; width: min-content; text-align: center;
  line-height: 1.35; flex: none;
  /* و‏`stretch` يُبطل `align-self: flex-start` الموروثَ من القاعدة المشتركة —
     فالوسمُ يملأ عمودَ الصفّ والنصُّ يتوسّطه بـ`place-content`. وبه يصير
     طولُ الفاصلِ محسوبًا من عمود الصفّ لا من مقاس سطرَي النصّ، فيبقى
     متناظرًا إن تغيّر الخطُّ أو العبارة. */
  align-self: stretch; display: grid; place-content: center;
  padding: 0; background: none; border: 0; box-shadow: none; }
/* والفاصلُ في منتصف العمود لا يبلغ الطرفَين (قرارُ صاحب المشروع، وهو نفسُ
   حكمِ فواصلِ بطاقة الإحصاءات): خطٌّ في منتصف الفراغ بين العنصرَين — مطلقٌ
   فلا يزيد عرضًا، ومحسوبٌ من الفراغ نفسِه فيبقى وسطَه إن تغيّر. */
.sheet-foot .footer-org-label::after {
  content: ""; position: absolute; inset-block: var(--space-2); width: 1px;
  inset-inline-end: calc(var(--space-4) / -2); background: var(--divider); }
.sheet-foot p { margin: 0; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet[open] { transition: none; transform: none; } }

/* ── ٢١. تعميمُ السطح الزجاجيّ على حاويات الصفحات كلِّها ─────────────────
   السؤالُ والجوابُ والهامشُ والنتائجُ وبطاقاتُ الحالة الخاوية: سطحٌ واحدٌ
   بحدّه وظلّه — ما أُقِرّ في الرئيسية يُقرأ في كلّ صفحة. */
.question, .answer, .detail-aside { background: var(--glass-medium);
                                     box-shadow: var(--glass-shadow-card); }
.answer-head { background: var(--surface-soft); }
.result { box-shadow: var(--shadow-xs); }
.result:hover { box-shadow: var(--float-shadow), var(--shadow-sm); }
/* بحثُ القائمة الجانبية: زرُّ إرسالٍ ذهبيٌّ دائريّ كحقل الرئيسية، بمقاس اللمس. */
.sheet-search .searchbar .btn-icon { width: 44px; min-height: 44px; }
/* والمكبّرُ على زرّ البحث أثقلُ خطًّا كالحقل، ومقاسُه ثابت. */
.searchbar .btn .icon { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
/* **والزرُّ الأيقونيُّ في الحقل يستثنى**: هذه القاعدةُ مقاسُ أيقونةٍ إلى جانب نصّ
   («بحث» في الرئيسية)، وكانت تغلب مقاسَ الزرّ الأيقونيّ فبقي إرسالُ الدردشة
   ‏19.2 في زرٍّ ‏40 وإرسالُ اللوحة ‏19.2 في ‏44. تُقاس من الزرّ كأخواتها. */
.searchbar .btn-icon .icon { width: 22px; height: 22px; }

/* صفوفُ القائمة الجانبية عند المرور: أرضٌ ناعمة والبلاطةُ تذهّب — والحاليّةُ
   تبقى زيتونيّةً مصمتة.
   **والقيمتان صُحِّحتا** (ملاحظةُ صاحب المشروع: «اللون عند التمرير يبي تضبيط
   ولون حاوية الأيقونة خلّه يتغيّر»): كانت أرضُ الصفّ ‏--surface-soft و‏#F5F2E9،
   وسطحُ اللوحة ‏#FAF8F4 — فرقُهما خمسةُ آحادٍ في كلّ قناة، أي لا فرق. وبلاطتُه
   ذهبيٌّ ‏12٪، وهو أخفُّ من أن يُرى على أرضٍ كريميّة. فصارت الأرضُ مزيجًا
   زيتونيًّا ‏10٪ — من لون الهويّة لا من رمادٍ محايد — والبلاطةُ ذهبًا مصمتًا
   بحبرٍ داكن (‏6.35:1)، فيتبدّل شيئان لا واحد. */
@media (hover: hover) {
  /* وصفُّ القائمة يتوهّج كزرِّها (قرارُ صاحب المشروع): الهالةُ نفسُها تحت الصفّ
     المُمرَّر عليه، فالقائمةُ والزرُّ الذي يفتحها على سَنَنٍ واحد. */
  .sheet-nav a:hover { background: color-mix(in srgb, var(--brand) 10%, transparent);
                       color: var(--brand-dark);
                       box-shadow: 0 4px 12px -3px var(--glow-soft); }
  .sheet-nav a:hover .sheet-icon { background: var(--primary); color: var(--primary-fg); }
  .sheet-nav a[aria-current="page"]:hover .sheet-icon { background: var(--brand); color: var(--brand-fg); }
  .sheet-nav a:hover .sheet-chevron { color: var(--brand-dark); }
  /* **وفي الداكن حبرٌ محايدٌ لا خُضرة** (ملاحظةُ صاحب المشروع: «الهالةُ واللونُ
     غير مناسب في الليلي»). ثلاثُ علَلٍ، مقيسةٌ على أرض اللوحة ‏rgb(29,27,23):
       ١) الزيتونيُّ ‏10٪ يُركَّب ‏rgb(40,43,32) — أخضرُ أبردُ من أرضٍ دافئة،
          يُقرأ بقعةً لا إضاءة. فيُؤخذ حبرُ الصفحة ‏7٪ → ‏rgb(44,42,38): رفعةٌ
          بلا لون، وهي ما يفعله الزجاجُ حين يقع عليه ضوء.
       ٢) ظلٌّ زيتونيٌّ تحت كلّ صفٍّ داخلَ لوحةٍ لا مصدرَ ضوءٍ لها يُقرأ توهّجًا
          لا ظلًّا — فيُرفع.
       ٣) الحبرُ كان يصير زيتونيًّا فاتحًا والأيقونةُ ذهبيّةً: لونان في صفٍّ
          واحدٍ يتنازعان. فيبقى الحبرُ كما هو، والأيقونةُ تحمل الذهبَ وحدَها. */
  :root[data-theme="dark"] .sheet-nav a:hover {
    background: color-mix(in srgb, var(--color-text-primary) 7%, transparent);
    color: var(--color-text-primary); box-shadow: none; }
  :root[data-theme="dark"] .sheet-nav a:hover .sheet-chevron { color: var(--fg-muted); }
}

/* ── ٢٢. صفحاتُ القوائم والاستشارة بالروح نفسِها ──────────────────────────
   محورٌ رأسيٌّ واحد: ترويسةُ الموضوع والمستشار والجديد على عمود النتائج
   (‏40rem) لا على عرض الحاوية. */
.results-head { max-width: 40rem; margin-inline: auto; }
.results-head .tag-row { max-width: none; }
.results { gap: var(--space-5); }

/* بطاقةُ المستشار في هامش الاستشارة: حرفُه الأوّل واسمُه ووصلةٌ إلى كلّ إجاباته. */
.aside-advisor { --r: var(--radius-control); display: flex; align-items: center; gap: var(--space-3);
                 padding-bottom: var(--space-4); margin-bottom: var(--space-4);
                 border-bottom: 1px solid var(--divider); border-radius: var(--r); color: var(--fg); }
.aside-advisor .avatar { width: 48px; height: 48px; font-size: var(--text-xl); }
/* «كلّ إجاباته» على سطر الاسم في أقصى طرفه (قرارُ صاحب المشروع): «أجاب عنها»
   سطرٌ وحدَه، ثمّ الاسمُ في المبدأ والرابطُ في المنتهى — كعدّاد بطاقة المستشار.
   و‏flex-wrap لا عمودٌ: الوسمُ يأخذ السطرَ كلَّه فينكسر ما بعده، والرابطُ
   يُدفَع بـ‏auto فينزل تحته من نفسِه إن ضاق السطرُ باسمٍ طويل. */
.aside-advisor-text { display: flex; flex-wrap: wrap; align-items: baseline;
                      gap: 0 var(--space-3); line-height: 1.5; min-width: 0; flex: 1 1 auto; }
.aside-advisor-label { flex-basis: 100%; }
.aside-advisor-more { margin-inline-start: auto; }
.aside-advisor-label { color: var(--fg-muted); font-size: var(--text-xs); }
.aside-advisor strong { color: var(--fg); font-size: var(--text-md); }
.aside-advisor-more { color: var(--brand-dark); font-size: var(--text-xs); font-weight: 600; }
/* دون ‏1024 يأتي الهامشُ بعد الجواب، وبطاقةُ المستشار فيه تكرارٌ لسطر «مَن أجاب»
   الذي قرأه الزائرُ قبل لحظات — فتُخفى هناك وتبقى حيث الهامشُ بجانب الجواب. */
@media (max-width: 1023px) { .aside-advisor { display: none; } }
@media (hover: hover) {
  .aside-advisor:hover .avatar { background: var(--primary); color: var(--primary-fg); box-shadow: none; }
  .aside-advisor:hover .aside-advisor-more { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
}

/* الرابطُ الدائم في حاويةٍ مستطيلةٍ مدوّرةٍ بعرض السطر، والنسخُ في طرفها الآخر
   (أقصى اليسار في ‏RTL). الرابطُ يُقصّ بنقاطٍ إن طال ولا يلتفّ. */
.permalink-box { --r: var(--radius-control); display: flex; align-items: center; gap: var(--space-2);
                 width: 100%; margin: var(--space-2) 0 0;
                 padding-block: var(--space-1); padding-inline: var(--space-3) var(--space-1);
                 background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--r); }
.permalink-box a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                   font-size: var(--text-sm); font-weight: 600; color: var(--brand-dark); direction: ltr; text-align: left; }
.permalink-box a:hover { color: var(--brand); }
.permalink-box .btn { flex: none; margin-inline-start: auto; min-height: 36px; padding-inline: var(--space-3); gap: var(--space-1); }
.permalink-box .btn:hover { background: var(--primary-soft); color: var(--primary-active); }
.meta-list dd .permalink-box { margin-top: 0; }
.meta-list dd .permalink-box a { word-break: normal; }

/* عددُ الاستشارات في الطرف المقابل للعنوان على سطره: كبسولةٌ ذهبيّةٌ خفيفة.
   والصفُّ لا يلتفّ: العددُ قصيرٌ والعنوانُ يتقلّص. */
.page-header-body { flex: 1 1 auto; }
/* صفُّ الرأس: العنوانُ ثمّ السطرُ التمهيديُّ ملاصقًا له، والعددُ في الطرف
   المقابل. و‏baseline لا center: السطرُ الصغيرُ يستقرّ على خطّ كتابة العنوان
   فيُقرأ تتمّةً له لا كتلةً بجانبه. ويلتفّ في الضيّق فينزل تحته من نفسِه. */
.page-header-title-row { display: flex; flex-wrap: wrap; align-items: baseline;
                         gap: var(--space-1) var(--space-4); }
.page-header-title-row .title { min-width: 0; }
/* **والسطرُ إلى أقصى الطرف المقابل** لا ملاصقًا للعنوان (قرارُ صاحب المشروع،
   للتوازن البصريّ): هامشٌ تلقائيٌّ يبتلع الفراغَ بينهما فيستقرّ على الحافّة.
   والعددُ مثلُه، فحيث اجتمعا اقتسما الفراغَ — وهما لا يجتمعان إلّا في صفحة
   مستشارٍ له نبذة، واثنان من ثمانين. */
.page-header-title-row .lead { margin: 0; margin-inline-start: auto; flex: 0 1 auto; order: 1; }
.page-header-count { margin-inline-start: auto; order: 2; }
.page-header-count { --r: var(--radius-pill); flex: none; margin: 0;
  padding: var(--space-1) var(--space-3); border-radius: var(--r);
  background: var(--primary-soft); color: var(--primary-active);
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* عمودُ نصّ الترويسة يتمدّد فيملأ صندوقُ الرابط السطرَ كلَّه (كان بعرض محتواه). */
.page-header-body > div { flex: 1 1 auto; min-width: 0; }

/* ═══ الدردشة: أيقونةٌ عائمةٌ ونافذةُ ‏popover ═══
   النافذةُ في الطبقة العليا (‏top layer) بحكم ‏popover، فلا ‏z-index لها هنا:
   لا تُزايد ترويسةً لاصقةً ولا لوحةَ تنقّلٍ ولا حواريًّا — وهو سببُ اختيارها. */
.chat-fab { position: fixed; inset-block-end: var(--fab-bottom); inset-inline-end: var(--space-5);
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border-radius: var(--radius-pill);
  /* تعبئةٌ ذهبيّةٌ متدرّجةٌ يخفت آخرُها، وشفوفٌ يسيرٌ (‏92٪) وطمسٌ خلفها — فتبدو
     زجاجًا لا قرصًا مصمتًا. و‏color-mix لأن نظامَ التصميم لا يملك ذهبيًّا شفّافًا
     غيرَ ‏12٪ و‏30٪، ولا يُحرَّر design.css باليد (يُزامَن بـsync_design.py).
     **والطمسُ هنا لا ينقض قرارَ الترويسة**: هناك شريطٌ بعرض الشاشة يُعاد حسابُ
     زجاجه كلَّ إطارِ تمرير، وهنا قرصٌ ‏56×56 — ‏3,136 بكسلًا لا مليون، وبأخفِّ
     الدرجات. و‏92٪ لا ‏80: التبايُنُ محسوب — الأيقونةُ الداكنةُ على الذهبيّ
     ‏6.35:1، وشفوفٌ أعمقُ يُنزلها تحت الحدّ فوق متنٍ داكنٍ يمرّ خلفها. */
  /* **والطمسُ لا ينقض قرارَ الترويسة**: هناك شريطٌ بعرض الشاشة يُعاد حسابُ زجاجه
     كلَّ إطارِ تمرير، وهنا قرصٌ ‏56×56 — ‏3,136 بكسلًا لا مليون، وبأخفِّ الدرجات. */
  -webkit-backdrop-filter: var(--glass-blur-light);
          backdrop-filter: var(--glass-blur-light);
  cursor: pointer;
  /* وظلٌّ يُحوّمها فوق الظلّ الذي يُقعِّرها: أربعُ طبقاتٍ خافتةٍ من النظام ومعها
     هالةٌ ذهبيّة — وهذا وحدَه ما يخصُّ الأيقونةَ العائمة دون زرِّ الإرسال. */
  box-shadow: var(--gold-glass), var(--float-shadow), var(--shadow-gold);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard); }

/* **تعبئةُ الذهب واحدةٌ للاثنين** (ملاحظةُ صاحب المشروع: «نفس الذهبي لكن
   مختلف»): كانت الأيقونةُ العائمةُ ذهبيّةً وزرُّ الإرسال في نافذتها زيتونيًّا —
   لونان في نافذةٍ واحدة. وزرُّ الإرسال أيقونةٌ لا نصّ، فالحبرُ الداكنُ على
   الذهبيّ ‏6.35:1 يجوز له، ولا يُنقَض به قرارُ «لا أبيضَ على ذهبيّ» — ذاك في
   الأزرار التي تحمل كلمةً، وهي تبقى زيتونيّةً كما هي.
   و‏--gold-glass رمزٌ لأن ‏box-shadow يُستبدَل ولا يُضاف: الأيقونةُ تزيد عليه
   ظلَّها الخارجيّ، وزرُّ الإرسال يقف عنده. */
.chat-fab, .chat-bar .btn-primary {
  --gold-glass: inset 0 2px 3px var(--glass-specular),
                inset 0 8px 14px -8px var(--glass-specular),
                inset 0 -5px 9px -3px color-mix(in srgb, var(--color-primary-active) 55%, transparent);
  /* تعبئةٌ ذهبيّةٌ متدرّجةٌ يخفت آخرُها، وشفوفٌ يسيرٌ (‏92٪). و‏color-mix لأن نظامَ
     التصميم لا يملك ذهبيًّا شفّافًا غيرَ ‏12٪ و‏30٪، ولا يُحرَّر design.css باليد
     (يُزامَن بـsync_design.py). و‏92٪ لا ‏80: التبايُنُ محسوب — الأيقونةُ الداكنةُ
     على الذهبيّ ‏6.35:1، وشفوفٌ أعمقُ يُنزلها تحت الحدّ فوق متنٍ يمرّ خلفها. */
  background: linear-gradient(to bottom,
                color-mix(in srgb, var(--color-primary-light) 92%, transparent),
                color-mix(in srgb, var(--color-primary-active) 92%, transparent));
  /* وحدٌّ واحدٌ من لون التعبئة لا من الزجاج الفاتح: الفاتحُ على ذهبيٍّ يُقرأ طوقًا
     دخيلًا، ومن لونه يُقرأ حافّةَ الجسم نفسِه. */
  border: 1px solid color-mix(in srgb, var(--color-primary-active) 55%, transparent);
  color: var(--primary-fg);
  /* **وذهبُ البوت أعصى على أرضٍ فاتحة** (ملاحظةُ صاحب المشروع: «الأخضر نعم
     والذهبي لا … يمكن عشان لون الخلفية» — وهو التشخيصُ الصحيح): الذهبيُّ
     ‏#B79851 على كريميّ الصفحة ‏#F7F3ED فرقُهما ضئيل، والزيتونيُّ داكنٌ فيبين.
     فيُؤخذ للفاتح **أغمقُ الذهب** (‏--color-primary-active ‏#92763C) بـ‏٨٥٪ في
     ‏12 بكسلًا لا ‏16، ومعه طبقةٌ قريبةٌ تحدّه — ظلٌّ ذهبيٌّ يُرى لا هالةٌ تذوب.
     وفي الداكن يبقى الذهبيُّ نفسُه واسعًا: الأرضُ الداكنةُ تُظهر أخفَّ ضوء. */
  --glow: 0 5px 12px -2px color-mix(in srgb, var(--color-primary-active) 85%, transparent),
          0 2px 4px -1px color-mix(in srgb, var(--color-primary-active) 60%, transparent);
  box-shadow: var(--gold-glass), var(--glow); }
:root[data-theme="dark"] .chat-fab, :root[data-theme="dark"] .chat-bar .btn-primary {
  --glow: 0 4px 22px -2px color-mix(in srgb, var(--color-primary) 62%, transparent); }
/* وعند المرور يفتح الذهبُ فيهما معًا (قرارُ صاحب المشروع): التعبئةُ ترتفع من
   ‏--color-primary-active إلى ‏--color-primary وتُصمَت — تبدّلٌ يُرى، لا ظلٌّ
   يزيد وحدَه. والحبرُ الداكنُ يزداد وضوحًا على الأفتح لا العكس. */
.chat-fab:hover, .chat-bar .btn-primary:hover {
  background: linear-gradient(to bottom, var(--color-primary-light), var(--color-primary));
  border-color: var(--color-primary-active); color: var(--primary-fg); }
/* وعند المرور يشتدّ ويتّسع، ولونُه ذهبُ التعبئة الجديدة لا زيتونُها. */
.btn-primary:hover { box-shadow: inset 0 1px 2px var(--glass-specular),
                     0 6px 22px -3px color-mix(in srgb, var(--primary-active) 78%, transparent),
                     0 2px 6px -2px color-mix(in srgb, var(--primary-active) 55%, transparent); }
.chat-bar .btn-primary:hover { box-shadow: var(--gold-glass), var(--shadow-gold); }
/* **وحُذفت حافّةُ ‏.gloss-rim** (ملاحظةُ صاحب المشروع): كانت حلقةً ثانيةً فوق
   حدِّ الزرّ — طوقان ‏1 بكسل أحدُهما فوق الآخر، يُقرآن في الداكن تكرارًا وفي
   الفاتح غرابةً. والحلُّ حذفٌ لا ضبطُ شفافيّة: اللمعةُ الداخليّةُ في ‏box-shadow
   تكفي لإظهار سُمك الزجاج، والحدُّ الخارجيُّ واحدٌ لا اثنان. */
/* والأيقونةُ بمقاسٍ صريح: ‏.icon-lg نسبةٌ من خطّ الزرّ، والزرُّ لا يرث خطَّ الصفحة
   فيأخذ افتراضيَّ المتصفّح ‏13.3 — فكانت ‏16.7 بكسلًا في قرصٍ ‏56.
   و‏32 لا ‏28 (طلبُ صاحب المشروع): ‏57٪ من القرص — البوتُ رسمٌ عريضٌ ذو أطرافٍ
   (هوائيّان وأذنان) لا حرفٌ مصمت، فنصفُ القرص يجعله يبدو منكمشًا في جوفه. */
.chat-fab .icon { width: 32px; height: 32px; }
.chat-fab:hover { transform: translateY(-1px);
                  box-shadow: var(--gold-glass), var(--float-shadow), var(--color-primary-shadow); }
.chat-fab:active { transform: scale(.94); }
.chat-fab:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.chat-panel { position: fixed; inset: auto; margin: 0;
  inset-block-end: calc(var(--fab-bottom) + 56px + var(--space-3));
  inset-inline-end: var(--space-5);
  display: flex; flex-direction: column; overflow: hidden;
  width: min(380px, calc(100vw - var(--space-8)));
  /* ارتفاعٌ **ثابت** لا سقفٌ: طُلب أن يثبت إطارُ النافذة وأن يكبر الحقلُ
     داخلَه — فالسجلُّ هو الذي يتقلّص، ولا يقفز الإطارُ مع كلّ سطرٍ يُكتب.
     وبـ‏dvh لا ‏vh: شريطُ متصفّح الجوّال يقضم من ‏vh فيُقصّ الحقل. */
  height: min(560px, calc(100dvh - var(--header-h) - var(--space-8)));
  padding: 0; border: 0; border-radius: var(--radius-panel);
  /* زجاجٌ ثقيل (‏92٪) لا خفيف: النافذةُ متنٌ يُقرأ، والشفوفُ العميقُ تحته يُتعب
     العين — وهو تدرُّجُ النظام نفسِه (‏--glass-heavy للنوافذ و‏--glass-light
     للشارات). فتُرى حركةُ الصفحة خلفها ولا يُنازَع النصّ. */
  background: color-mix(in srgb, var(--color-bg-surface) 92%, transparent);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
          backdrop-filter: var(--glass-blur-heavy);
  color: var(--fg);
  box-shadow: var(--glass-shadow-modal); }
/* **وستارةٌ خلفه عند ظهوره** (قرارُ صاحب المشروع): ضبابيّةٌ يسيرةٌ جدًّا وحجابٌ
   رقيقٌ على الصفحة — فتنفصل الطبقتان في عين المعاين ويُعرَف أيُّهما فوق.
   و`::backdrop` من المتصفّح لا عنصرٌ يُضاف، ولأنّ النافذةَ `popover` غيرُ
   حابسةٍ تبقى الصفحةُ خلفها قابلةً للتصفّح — ستارةٌ تفصل بصرًا لا تحجب فعلًا.
   والشفافيّةُ بـ`opacity` لا بألفا في اللون: كعادة ستارة اللوحة الجانبية،
   ولأنّ مزجَ لونٍ بالشفّاف يُظلم قنواتِه. */
.chat-panel::backdrop {
  background: var(--color-text-primary); opacity: .07;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.chat-panel:not(:popover-open) { display: none; }
/* **النافذةُ موسَّعةً صفحةٌ لا نافذة** (طلبُ صاحب المشروع): ملءٌ إلى الحافّة بلا
   هامشٍ ولا استدارة. وكان هامشٌ يبقى حولها فيُرى ما خلفها ويتحرّك مع الفأرة
   وهي مكبَّرة — وهذا ما رفضه. و‏`inset` واحدةٌ تنسخ التثبيتَ في الزوايا الأربع،
   فيلزم ‏`width/height: auto` وإلّا بقي القياسُ الثابتُ يغلبها.
   **والخلفيّةُ تُجمَّد معها**: ‏popover غيرُ حابسةٍ بطبعها — تلك فضيلتُها وهي
   صغيرة (تُقرأ الصفحةُ خلفها) وعيبُها وهي ملءُ الشاشة. فيُقفَل تمريرُ الصفحة
   هنا، ويُصمّ ما خلفها بـ‏`inert` في الشيفرة. */
.chat-panel.is-full { inset: 0; width: auto; height: auto; border-radius: 0; }
:root.chat-locked, :root.chat-locked body { overflow: hidden; }
/* ويُحَدُّ عرضُ المتن في السعة: سطرٌ يمتدّ على شاشةٍ عريضةٍ لا تتبعه العينُ إلى
   أوّل التالي. والحدُّ على السجلّ نفسِه لا على فقاعاته — لكلِّ فقاعةٍ محاذاتُها
   (`align-self`)، فحدُّها فرادى يُلغيها. و‏42rem كحدِّ الاستشارة (‏38rem) وقد
   زِيد عليه حشوُ الفقاعة، فيستقيم السطرُ على نحوِ ما يستقيم هناك. */
/* وحدُّ الحقلِ العلويُّ يسقط في السعة (طلبُ صاحب المشروع): خطٌّ يفصل حقلًا عن
   سجلٍّ في نافذةٍ ضيّقةٍ لا معنى له في صفحةٍ واسعة، والقِرصُ يُعرَف بنفسه. */
.chat-panel.is-full .chat-form { width: 100%; max-width: 42rem; margin-inline: auto;
  border-block-start: 0; }
/* **والسجلُّ يبقى بعرض الشاشة ويُحشى** (ملاحظةُ صاحب المشروع): لو حُدَّ عرضُه
   لصار هو الوعاءَ الذي يُمرَّر، فيرتسم شريطُ التمرير عند حافّة العمود في وسط
   الشاشة لا عند حافّتها. فالحدُّ على المحتوى بالحشو، والوعاءُ بعرضه كاملًا —
   فيعود الشريطُ إلى أقصى الحافّة كشريط الصفحة. */
.chat-panel.is-full .chat-log {
  padding-inline: max(var(--space-4), calc((100% - 42rem) / 2)); }
/* **وخطُّ المتن في السعة خطُّ الاستشارة نفسُه** (طلبُ صاحب المشروع): ‏18 بكسلًا
   بخطّ القراءة وتباعدِ سطرٍ ‏2 — قِيَمُ ‏.answer-text حرفًا بحرف. والنافذةُ
   مكبَّرةً صفحةُ قراءةٍ لا فقاعاتِ محادثةٍ في زاوية، والمقتبَسُ فيها **هو**
   جوابُ المستشار بنصّه. وما حولَه من كبسولاتٍ ومراجعَ يبقى بمقاس الواجهة. */
.chat-panel.is-full .chat-say,
.chat-panel.is-full .chat-quote { font-family: var(--font-read); font-size: 18px; line-height: 2; }

.chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--divider);
  background: var(--surface-soft); }
.chat-head-acts { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.chat-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.chat-title span { display: flex; flex-direction: column; min-width: 0; }
.chat-title strong { color: var(--heading); font-size: var(--text-base); }
.chat-title small { color: var(--fg-muted); font-size: var(--text-xs); }

.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
/* صفُّ الرسالة: علامةُ المتحدّث وفقاعتُه. والعلامةُ عند أسفل الفقاعة لا
   أعلاها — فآخرُ سطرٍ هو ما تتركه العينُ، وهناك يجلس الرمز. والقيدُ (‏92٪)
   انتقل إلى الصفّ: لو بقي على الفقاعة لزادها عرضُ العلامة فخرج الصفُّ. */
.chat-row { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 92%; }
.chat-row.row-bot { align-self: flex-start; }
.chat-row.row-me { align-self: flex-end; flex-direction: row-reverse; }
.chat-row .chat-msg { max-width: 100%; align-self: auto; position: relative; }
/* **ذيلُ الفقاعة** (طلبُ صاحب المشروع، وأصلُه واتساب): مربّعٌ يرث تعبئةَ
   الفقاعة وحدَّها، يُقَصّ نصفًا قُطريًّا ثمّ يُدار ‏45° — فيبقى من حدوده
   الضلعان الخارجيّان، ويلتقي وترُه بحافّة الفقاعة بلا خطٍّ يقطعها. وهذا
   أقصرُ من مثلّثَين متراكبَين، ويصحّ في السمتَين لأنه يرث اللونَ ولا يُسمّيه. */
.chat-row .chat-msg::after {
  content: ""; position: absolute; inset-block-end: 8px;
  width: 12px; height: 12px; box-sizing: border-box;
  background: inherit; border: inherit;
  /* المثلّثُ العلويُّ الأيمن: بعد الدوران يصير رأسُه إلى الخارج، ويبقى من
     حدوده ضلعاه الظاهران، ووترُه (بلا حدّ) يغوص في الفقاعة فيفتح عليها. */
  clip-path: polygon(0 0, 100% 0, 100% 100%); }
/* والموقعُ ماديٌّ لا منطقيّ: الدورانُ نفسُه يقلب الجهةَ، فلا تنفع `inset-inline`. */
.row-bot .chat-msg::after { right: -5px; transform: rotate(45deg); }
.row-me  .chat-msg::after { left: -5px; transform: rotate(225deg); }
.chat-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--radius-pill); background: var(--surface-soft);
  border: 1px solid var(--border); color: var(--fg-muted); }
.chat-avatar .icon { width: 17px; height: 17px; }
/* وعلامةُ الزائر بلون فقاعته: الصفُّ كلُّه يُقرأ كتلةً واحدةً له. */
.row-me .chat-avatar { background: var(--primary-soft); color: var(--primary-active);
  border-color: var(--color-primary-border); }

.chat-msg { max-width: 92%; padding: var(--space-3); border-radius: var(--radius);
  font-size: var(--text-sm); line-height: 1.75; }
.chat-bot { align-self: flex-start; background: var(--surface-soft); border: 1px solid var(--border); }
/* رسالةُ الزائر بلونِ الفعل الخفيف في الطرف المقابل — كما يُقرأ أيُّ حوار. */
.chat-me { align-self: flex-end; background: var(--primary-soft); color: var(--primary-active);
  border: 1px solid var(--color-primary-border); }
.chat-say { margin: 0; }
.chat-say + * { margin-block-start: var(--space-2); }
.chat-note { color: var(--fg-muted); font-size: var(--text-xs); }
.chat-asked { margin: var(--space-2) 0 0; color: var(--fg-muted); font-size: var(--text-xs); }

/* الاقتباسُ هو الجوابُ بنصّه: خطٌّ ذهبيٌّ على حافّته يفصله عمّا حوله من صياغة،
   فلا يلتبس كلامُ المستشار بكلام الموقع. */
.chat-quote { margin: var(--space-2) 0 0; padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--primary); color: var(--fg); }
.chat-quote p { margin: 0 0 var(--space-2); }
.chat-quote p:last-child { margin-block-end: 0; }

.chat-refs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: var(--space-3) 0 0; color: var(--fg-muted); font-size: var(--text-xs); }
.chat-refs a { color: var(--brand); font-weight: 600; }
.chat-refs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.chat-acts { margin: var(--space-2) 0 0; }
/* أسئلةُ البدء تحت بعضها: كلٌّ سطرٌ كامل، فالسؤالُ لا يُقرأ في كبسولةٍ مقصوصة. */
.chat-starters { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.chat-starters .chat-chip { text-align: start; white-space: normal; }
.chat-chip { padding: var(--space-1) var(--space-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); background: transparent; color: var(--brand-dark);
  font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.chat-chip:hover { background: var(--secondary); }
.chat-wait { color: var(--fg-muted); font-style: italic; }

/* حقلُ السؤال يكبر بأسطره كما في واتساب: ‏textarea بلا مقبضِ تحجيمٍ ولا
   ارتفاعٍ ثابت، ترتفع بالشيفرة إلى ‏6rem ثمّ تمرّر — والنافذةُ مثبَّتةٌ من
   أسفلَ فتنمو صعودًا، ويتقلّص السجلُّ لا الإطار. */
/* والدورانُ ثابتُ المقدار لا كبسولة: نصفُ ارتفاعِ السطر الواحد (‏20) فيبدو
   كبسولةً وهو سطرٌ، ثمّ يقلّ دورانُه في العين كلّما طال — وكبسولةُ ‏9999
   تبقى قوسًا هائلًا على أربعة أسطر. */
.chat-bar { align-items: flex-end; border-radius: 20px; }
.chat-bar textarea { flex: 1 1 auto; min-width: 0; max-height: 6rem;
  padding-block: var(--space-2); border: 0; background: none; color: inherit;
  font: inherit; line-height: 1.6; resize: none; overflow-y: auto; }
.chat-bar textarea:focus { outline: none; }
/* والزرُّ ثابتُ المقاس يجلس على السطر الأخير: عنصرُ ‏flex يمتدّ بامتداد أطولِ
   إخوته، فكان يطول بطول الحقل حتى صار شريطًا. */
/* وزرُّ الإرسال كبسولةٌ كزرّ البحث في الرئيسية (قرارُ صاحب المشروع): جُرِّب
   ‏14 بكسلًا فرُدّ — وزرُّ البحث نفسُه كبسولةٌ ‏48 في شريطٍ كبسولةٍ ‏58، فالكبسولةُ
   في جوف الكبسولة هي عُرفُ الحقل هنا لا شذوذُه. */
.chat-bar .btn { flex: none; align-self: flex-end; width: 40px; height: 40px;
  min-height: 0; padding: 0; }
.chat-form { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--divider); }

/* على الشاشة الضيّقة تملأ النافذةُ العرضَ وتجلس فوق الأيقونة. */
@media (max-width: 479px) {
  .chat-panel { inset-inline: var(--space-3); width: auto;
    inset-block-end: calc(var(--fab-bottom) + 56px + var(--space-2)); }
  .chat-fab { inset-inline-end: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab { transition: none; } }