/* ══════════════════════════════════════════════════════════
   بيان — base.css
   المتغيّرات · الطباعة · العناصر المشتركة بين كل الشاشات
   لا تضع هنا شيئاً يخصّ شاشة واحدة — مكانه screens.css
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   طبقة الأدوار — قلبُ نظام الألوان
   الرمز يُسمّى بوظيفته لا بمظهره: accent لا cyan. لأن السماويّ
   #48cfc0 تباينه على الورق ١٫٩٤:١ — لا يصلح نصّاً ولا حدّاً. فهو
   والأخضرُ المزرقّ #0F6E56 لونان مختلفان يؤدّيان الدور نفسه.
   ⚠️ والشفافيات لا تُترجَم: ٥٪ فاتحة فوق كحليّ = همسة، و٥٪ داكنة
      فوق ورق = حدٌّ ظاهر. فالسِمة الفاتحة تستعمل ألواناً صلبة، ولا
      يبقى في جسد الـCSS حسابُ شفافيةٍ واحد.
   ⚠️ ستّون شفافية اختُزلت إلى أربع رتب لكل عائلة:
      soft (تعبئة خافتة) · fill (مختار/نشط) · line (حدّ) · edge (حدّ ظاهر)

   🔑 لكلّ معنىً عائلة، ولكلّ عائلةٍ معنىً واحد (b61 · b62):
      accent  «اخترتَ / اضغط هنا»   ⇐ التفاعل: أزرق
      ok      «أصبتَ»               ⇐ الحكم: الأخضر التاريخيّ لبيان
      danger  «أخطأتَ»              ⇐ الحكم: أحمر
      warn    «انتبه / في الطريق»   ⇐ الحذر: كهرمانيّ — إشارةُ مرورٍ يعرفها الطالب
      dx      «لماذا أخطأت»         ⇐ صوت التشخيص: برقوقيّ — لونُ ميزة المنصّة
   كان accent يؤدّي الأوّلَين معاً: الخيار المختار (.opt.sel) يتلوّن
   **قبل التصحيح** بلون «صحيحة» (.rev.ok). والعين تقرأ اللون قبل
   الكلمة، و answers.confidence تُسجَّل في تلك اللحظة نفسها ⇒ إشارةُ
   الثقة يلوّنها أخضرُ لا يعني شيئاً بعد.
   ⚠️ والأزرق يبقى أزرقَ لمن لديه عمى الأخضر (٨٪ من الذكور تقريباً)،
      بينما يصير الأخضر عنده رمادياً والأحمر زيتونياً. ⇒ الفصل يخدمه
      أيضاً، **وصحيحة/خاطئة لا تُحمَل على اللون وحده أبداً** — الوسمُ
      النصّيّ هو الحامل، واللون تأكيد.
   🔑 وفُصل dx عن warn (b62) للسبب نفسه: صندوقُ التشخيص يجاور وسمَ
      «خاطئة»، والكهرمانيُّ عند عمى الأحمر يذوب في الأحمر (ΔE ٢٫٤) ⇒
      يُقرأ الشرحُ لوماً إضافياً. والبرقوقيّ هو **الصبغة الوحيدة** التي
      نجت من المسح في الرؤى الأربع: البنفسجيّ (٢٩٣°) يذوب في أزرق التفاعل
      عند عمى الأخضر (٠٫٣)، وأوّلُ آمنٍ ٣٠٥°، واخترنا ٣٢٠° لأنه يُقرأ
      بنفسجياً لا وردياً. وفي الداكنة ٣٣٥°: أقلُّ من ذلك يقترب من الأزرق.
   ⚠️ وقبل إضافة عائلةٍ سادسة أو تغيير صبغة: قِس أسوأ حالةٍ لها ضدّ كلّ
      عائلة في الرؤية العادية وعمى الأحمر والأخضر — لا التباينَ وحده.
      ضبطُ warn الأوّل (b62 المعلَّق) نجح في التباين وأفسد التمايز.

   🔑 **وكُتم dx إلى إشباع الهوية (b82) — والصبغةُ لم تتغيّر.** أُعيد المسح
      ثلاثيَّ الأبعاد (صبغة × خفّة × إشباع، ٢٨٢°–٣٤٦°، ثلاث رؤى): **صفر
      مرشّحٍ نجا تحت ٣٢٠°** — فالصبغة مقفلة، و٣٢٠° أوّلُ الممكن لا اختيارَ
      ذوق. لكنّ المسح كشف ما لم يكن مرصوداً: الهوية كلُّها مكتومة
      (كحليّ ٠٫٠٨٦ · فيروزيّ ٠٫١٠٣ · ذهبيّ ٠٫١٠٠)، و dx كان ٠٫٢٠٠ —
      **أعلى إشباعٍ على الشاشة كلّها**. فبدا لونَ لوحةٍ أخرى، وصخبُه
      يخالف «لماذا» ليست «أخطأت»: الشرحُ يُقرأ إنذاراً.
      ⇒ ٠٫٢٠٠ ← ٠٫٠٩٨، والمكسب في كل اتجاه لا مقايضة:
        أدنى ΔE ضدّ كل عائلة ٩٫٦ ← ١٩٫١ · التباين ٧٫٠٣ ← ٩٫٥٩
        وفي الداكنة ٠٫١٨٠ ← ٠٫١١٠ (ΔE ٧٫٢ ← ١٠٫١ · التباين ٦٫٠٥ ← ٦٫٦١).
      🎓 **والدرس أوسع من dx: الإشباع هوية كما الصبغة.** لونٌ في الصبغة
         الصحيحة وبضعف إشباع إخوته يبدو دخيلاً ولو كان قياسه سليماً.
   ⚠️ ومتنُ التشخيص كحليُّ الهوية لا برقوقيّ (‎--dx-text‎): البرقوقيّ علامةٌ
      في العنوان وحده — أقلُّ حبرٍ ملوَّن، وأكبرُ مساحةٍ للهوية. وتمايزُ
      العنوان عن المتن ΔE ١٩٫٩، والكحليّ عن أزرق التفاعل ١٧٫١ فلا يُقرأ
      رابطاً. وفي الداكنة المتنُ ‎var(--text)‎ لا أبيضَ ناصعاً — لنفس سبب
      اختيار ١٢:١ لا ١٨ (انظر رأس السِمة الداكنة): الليلُ وقتُ المذاكرة.
   ══════════════════════════════════════════════════════════ */

/* الفاتحة — الافتراضية (b61). المنهج من Preline، والقيم بالقياس لا بالنقل.
   ⚠️ كانت الصفحة كريميّة (#EDE9DF) تحمل الارتفاعَ بتغميقها. صارت
      محايدةً (stone-100)، والارتفاعُ ينتقل من لون الصفحة إلى **الحدّ
      والظلّ**: البطاقة/الصفحة ١٫٠٩ · الحدّ/البطاقة ١٫٤٩. المبدأ باقٍ
      والوسيلة تغيّرت.
   ⚠️ --line أغمق مما يستعمله Preline (stone-300 لا 200): عندنا هو حدُّ
      الخيار في الاختبار، أي حدودُ ما يُنقَر. ١٫٢٦ يختفي في شاشة جوّالٍ
      تحت الشمس، فيذوب خياران في كتلة. ⇒ أبقيناه عند رتبته القديمة.
   ⚠️ ثلاث قيم رُفضت من Preline بالقياس (الحدّ ٤٫٥ للنص):
      stone-400 للخافت = ٢٫٥٢ ⇒ stone-600 = ٧٫٦٣
      red-500 للخطر   = ٣٫٧٦ ⇒ red-700   = ٦٫٤٧
      blue-600 فوق تعبئته = ٤٫٢٤ ⇒ blue-700 = ٥٫٤٩  (.tab.on · .menu-item.on)
   ⚠️ warn (b62): قيمُها القديمة كانت مصبوغةً بصبغة الورق (الخلفية ٨٥°
      والصفحة الكريمية ٨٩°) فبدت على الصفحة المحايدة بقيّةَ ورقٍ لا إشارة
      ⇒ خلفيّةٌ وحدٌّ من سلّم amber يحملان الهويّة.
      ونصُّها بنّيٌّ داكن (#663305) لا كهرمانيٌّ زاهٍ — عن قياس: ما يفصل
      نصَّ الحذر عن نصّ الخطأ عند عمى الأحمر هو **الخفّة لا الصبغة**
      (الدكنةُ ٥٫٨ · الأصفرُ الأفتح ≤ ٣٫٤). والمؤقّت لا يخسر: يتدرّج من
      أزرق إلى كهرمانيّ إلى أحمر نابض، والنبضُ آمنٌ لكلّ رؤية.
   ⚠️ وترتيب التعبئة: soft أقلّ حبراً و strong أكثره. في الداكنة
      «أكثر حبراً» يعني أفتح، وعلى الورق أغمق — والاسم صادقٌ فيهما. */
:root{
  /* ⚠️ --page مكرَّرٌ اضطراراً في meta theme-color (index.html · data-light) */
  --page:#F5F5F4; --surface:#fff; --surface-2:#fff;
  --bar:rgba(255,255,255,.88);
  --fill-soft:#FAFAF9; --fill:#F5F5F4; --fill-strong:#E7E5E4;
  --line:#D6D3D1; --line-strong:#BCB7B1;
  --text:#292524; --text-muted:#57534E;
  --on-accent:#fff; --on-warn:#fff; --on-ok:#fff;
  /* ⚠️ --accent يبقى hex سداسياً في السِمتين: analytics.js يُلحق به ألفا
     نصّاً (ACC+'4D') لتدرّج المخطّط. rgb() أو oklch() هنا يكسره صامتاً. */
  --accent:#1D4ED8; --accent-soft:#EFF6FF; --accent-fill:#DBEAFE;
  --accent-line:#BFDBFE; --accent-edge:#3B82F6;
  --track-grad:linear-gradient(90deg,#60A5FA,#1D4ED8);
  --hero-accent:linear-gradient(180deg,#DBEAFE,#fff);
  --ok:#0F6E56; --ok-soft:#E9F5F0; --ok-fill:#D5EDE3;
  --ok-line:#A9D9C7; --ok-edge:#5DCAA5;
  --hero-ok:linear-gradient(180deg,#DCF0E8,#fff);
  --warn:#663305; --warn-text:#451A03; --warn-soft:#FFFBEB;
  --warn-fill:#FEF3C7; --warn-line:#FDE68A; --warn-edge:#F59E0B;
  --hero-warn:linear-gradient(180deg,#FEF3C7,#fff);
  --dx:#592F62; --dx-text:var(--brand-navy); --dx-soft:#FAF5FB;
  --dx-fill:#F4E8F7; --dx-line:#E8D7EC; --dx-edge:#B68DC0;
  --danger:#B91C1C; --danger-text:#7F1D1D; --danger-soft:#FEF2F2;
  --danger-fill:#FEE2E2; --danger-line:#FECACA; --danger-edge:#EF4444;
  --shadow:0 1px 2px rgba(28,25,23,.05), 0 8px 24px -8px rgba(28,25,23,.10);
  --scrim:rgba(28,25,23,.38);
  --r:14px;
  /* حبرُ العلامة — ٨ أكتوبر: رُفع درجةً على صبغة الهوية نفسها (٢٥٣٫٥°)
     من ‎#0D345E إلى ‎#18477A بقرار المالك. السببُ أنّ الكحليَّ الأصليّ
     (L* ٢٠٫٩) يُقرأ أسودَ في الخطوط الرفيعة — سطر BAYAN — وفي المقاسات
     الصغيرة، فيضيع «الأزرق الداكن» الذي هو الهوية.
     ⚠️ واللوحة لم تُمسّ: --brand-navy أسفلُ ما زال ‎#0D345E، وهو أرضيةُ
        البوابة وترويسةِ الخصوصية. غُيّر الحبرُ وحده لا ما يقع عليه.
     🔑 وC‏ ٠٫١٠٠ ⇒ داخل نطاق الهوية المكتوم (٠٫٠٨٦–٠٫١٠٣)، وتمايزُه عن
        عائلات المعنى تحسّن لا ساء: أسوأ ΔE‏ ١٫٤ ← ٥٫٤ (مقيسٌ بـcoloraide
        على الرؤى الثلاث). */
  --logo-ink:#18477A}

/* الداكنة (b62) — محايدةٌ على طريقة Preline، والقيم بالقياس.
   🎓 لماذا محايدة لا كحليّة: منذ b61 كلُّ صبغةٍ في بيان رسالة — الأزرق
      «اخترتَ» والأخضر «أصبتَ» والكهرمانيّ «انتبه» والبرقوقيّ «لماذا».
      والكحليّ المسطّح (slate) صبغتُه على بُعد ٥° من أزرق التفاعل: الشاشةُ
      كلُّها تهمس «اخترتَ»، والخيارُ المختار يبرز فوق حقلٍ من لونه. خلفيّةٌ
      إشباعُها صفر ⇒ **كلُّ لونٍ على الشاشة رسالة**.
   ⚠️ النصّ ١٢:١ لا ١٨ عمداً: الأبيض الناصع على الأسود يتوهّج حول الحروف
      ويُتعب اللابؤريّ، والمذاكرةُ الليلية هي استعمالُ هذه السِمة.
   ⚠️ بروزُ الاختيار معايَرٌ على الفاتحة (ΔE ٦٫٢): تعبئةُ ‎.20 تعطي ٩٫٥.
      القاعدة: **الاختيار لا يخفت حين تُطفأ الأنوار.**
   ⚠️ ثلاث قيم رُفضت من Tailwind بالقياس:
      neutral-500 للخافت = ٣٫١٩ ⇒ neutral-400 = ٦٫٠٠
      blue-400 فوق تعبئته = ٤٫٢١ ⇒ blue-300 = ٥٫٣٢ (وتمايزُه في عمى
         الأحمر/الأخضر أحسن: ٦٫٧ لا ٦٫٣)
      red-400 فوق تعبئة ‎.17 = ٤٫١٩ ⇒ التعبئة ‎.12 = ٤٫٥٨. ولم يُفتَّح
         الأحمر نفسه: red-300 يقترب من «أصبتَ» عند عمى الأخضر (٤٫٣).
   ⚠️ warn هنا amber-300 (٩٢°) وفي الفاتحة سلّم amber (٩٥°) — لونٌ واحد
      ليلاً ونهاراً. و dx هنا ٣٣٥° وفي الفاتحة ٣٢٠° (انظر رأس الطبقة).
   ⚠️ --surface صارت لوناً صلباً لا تدرّجاً: التدرّج في كلّ بطاقة والتوهّجُ
      السماويّ على الصفحة أسلوبُ ما قبل الواجهات المسطّحة.
   ⚠️ --page مكرَّرٌ اضطراراً في meta theme-color (index.html · data-dark). */
:root[data-theme="dark"]{
  --page:#171717; --surface:#262626; --surface-2:#262626;
  --bar:rgba(23,23,23,.9);
  --fill-soft:rgba(255,255,255,.03); --fill:rgba(255,255,255,.06);
  --fill-strong:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.20);
  --text:#E5E5E5; --text-muted:#A3A3A3;
  --on-accent:#0B1220; --on-warn:#1A1206; --on-ok:#052E1F;
  --accent:#93C5FD; --accent-soft:rgba(147,197,253,.10);
  --accent-fill:rgba(147,197,253,.20); --accent-line:rgba(147,197,253,.32);
  --accent-edge:rgba(147,197,253,.50);
  --track-grad:linear-gradient(90deg,#BFDBFE,#60A5FA);
  --hero-accent:linear-gradient(180deg,rgba(147,197,253,.14),#262626);
  --ok:#34D399; --ok-soft:rgba(52,211,153,.10); --ok-fill:rgba(52,211,153,.16);
  --ok-line:rgba(52,211,153,.30); --ok-edge:rgba(52,211,153,.48);
  --hero-ok:linear-gradient(180deg,rgba(52,211,153,.14),#262626);
  --warn:#FCD34D; --warn-text:#FEF3C7; --warn-soft:rgba(252,211,77,.10);
  --warn-fill:rgba(252,211,77,.16); --warn-line:rgba(252,211,77,.30);
  --warn-edge:rgba(252,211,77,.48);
  --hero-warn:linear-gradient(180deg,rgba(252,211,77,.13),#262626);
  --dx:#DB95CB; --dx-text:var(--text); --dx-soft:rgba(219,149,203,.10);
  --dx-fill:rgba(219,149,203,.16); --dx-line:rgba(219,149,203,.30);
  --dx-edge:rgba(219,149,203,.48);
  --danger:#F87171; --danger-text:#FEE2E2; --danger-soft:rgba(248,113,113,.07);
  --danger-fill:rgba(248,113,113,.12); --danger-line:rgba(248,113,113,.26);
  --danger-edge:rgba(248,113,113,.45);
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 8px 24px -8px rgba(0,0,0,.50);
  --scrim:rgba(0,0,0,.58); --logo-ink:#fff}

/* ══ هوية العلامة — ثابتةٌ، لا تتبع السِمة ══
   مُعرَّفةٌ مرّةً واحدة هنا (لا داخل [data-theme="dark"]) فترث الداكنةُ
   قيمتها تلقائياً: هذا هو التعبير الصحيح عن «ثابت» في نظام طبقاتٍ كهذا.
   ⚠️ الكحليّ والفيروزيّ والذهبيّ هويةٌ لا حكم: لا تحمل معنى «اخترتَ» أو
      «أصبتَ» فتُقاس بمنطق التمايز الدلاليّ في رأس هذا الملف — استعمالها
      محصورٌ بمواضع العلامة (.gate-say ونحوها)، لا بمفردات الاختبار.
   📌 --logo-hole بلا مستهلكٍ اليوم: العلامة الهندسية (أكتوبر ٢٠٢٦)
      ضرباتٌ بلا ثقوب. بقيت مُعرَّفةً لحُكمها إن عاد وردماركُ ذو ثقوب:
      **لونٌ صلب لا شفافية** — الثقب يُرسم فوق الحرف بلون ما خلفه
      بالضبط، فالشفافية لا ترسم شيئاً ويبقى الحرف مصمتاً (وقع فعلاً
      في وردمارك b78، والتفصيل في STATE ‏٥-١٠).
      وقيمتُها var(--page) فترثُ السِمتين بلا تكرار. */
:root{
  --logo-hole:var(--page);
  --brand-navy:#0D345E; --brand-teal:#42B7B4; --brand-teal-2:#63AEA9;
  --brand-gold:#D6B76D}

/* ══ لوحةُ الأفاتار — علاماتُ الحسابات (٢٧ سبتمبر) ══
   ثمانيةُ ألوانٍ نابضة. **وهي طبقةٌ ثالثةٌ لا تنتمي إلى طبقة الأدوار
   ولا إلى طبقة الهوية**، ولها حكمُها:

   🔑 **لا تحمل معنًى، فلا تُقاس بمنطق العائلات الخمس في رأس هذا الملفّ.**
      والقرصُ الأخضر قد يجاور وسمَ «أصبتَ» — **رُفع القيدُ عن سابق علم**:
      الحكمُ يحمله النصُّ لا اللون (وهو المكتوب في رأس الطبقة)، والأفاتارُ
      لا يقع في سياق حكم. **قرارٌ لا سهو.**
   ⛔ **ويتبعه قيدٌ دائم: لا يُبنى على لون الأفاتار وحده أيُّ تمييزٍ
      وظيفيّ** — لا فرزٌ في قائمة ولا شارةُ حالة ولا دلالةُ مستوى.
      حاملُ الهوية **الحرف**، وهذا مقيسٌ لا مفترَض: الحرفُ يعطي ٢٨ قيمةً
      من الخطّ بلا رسم (`claude/avatar-32px-test.html`).

   🔑 **ومُعرَّفةٌ مرّةً واحدة خارج السِمتين** كطبقة الهوية فوقها: لونُ
      الطالب صفتُه، **ولا يتبدّل حين يُطفئ الأنوار**.

   🔑 **ولكلّ لونٍ حبرُه — والحبرُ ليس أبيضَ دائماً.** القرصُ الناصع لا
      يحمل أبيضَ بتباينٍ ٤٫٥، فسبعةٌ تحمل حبراً داكناً وواحدةٌ أبيض.
      **وتقييدُ الحبر بالأبيض يحرم اللوحةَ من أنصع أنصافها.**

   📐 **وكلُّها مقيسةٌ بـ`claude/palette-scan.mjs`** (ΔE2000 · WCAG ·
      محاكاةُ عمى الألوان Machado): تباينُ الحبر ≥ ٤٫٥ · والقرصُ يُرى
      على الورقتين ≥ ٣ · وتباعدٌ صبغيٌّ ≥ ٣٢° · وأدنى تباعدٍ بينها في
      الرؤى الثلاث **٨٫٧** — وهو أعلى ممّا بلغته لوحةٌ مكتومة (٦٫٥):
      **الإشباعُ العالي ينجو من انضغاط عمى الألوان.**
      ⚠️ **ويُعاد تشغيلُ المِسبار إن غُيّر `--page` في أيّ سِمة** — الحدودُ
         محسوبةٌ على `#F5F5F4` و`#171717`، ورقمٌ منقولٌ ينحرف.

   ⚠️ **ولا تُجبَر على «لوحة الـ٢١٦»:** قيسَ الإجبارُ فأسقط `--av-4`
      و`--av-5` على لونٍ واحد (`#009999`، إزاحة ΔE **صفر**) وأنزل اثنين
      تحت حدّ الرؤية على الورق. وهي لوحةُ عرضٍ ذي ٢٥٦ لوناً، ولا جهازَ
      مستعملٌ اليوم محصورٌ بها. **وما يُراد منها متحقّقٌ أصلاً:** الثمانيةُ
      داخل sRGB، وhex سداسيٌّ نقيّ، بلا شفافيةٍ ولا `oklch()` — فتُعرض
      متطابقةً في كلّ مكان، وتقبل إلحاقَ ألفا نصّاً كـ`--accent`.

   📌 **والقاعدة تُخزّن الرمزَ لا كودَ اللون** (`avatar_color='av-3'`):
      إعادةُ معايرةٍ تصير **تغييرَ CSS واحد** لا هجرةَ بياناتٍ على كلّ
      صفّ. والكلفةُ الآن صفر، وبعد ألف حسابٍ باهظة. */
:root{
  --av-1:#fe2b0c; --av-1-ink:#1C1917;   /* قرمزيّ  ·  31° */
  --av-2:#be8202; --av-2-ink:#1C1917;   /* ذهبيّ   ·  76° */
  --av-3:#0ca14b; --av-3-ink:#1C1917;   /* أخضر    · 150° */
  --av-4:#069f8e; --av-4-ink:#1C1917;   /* فيروزيّ · 182° */
  --av-5:#0293ac; --av-5-ink:#1C1917;   /* سماويّ  · 216° */
  --av-6:#088ef6; --av-6-ink:#1C1917;   /* أزرق    · 251° */
  --av-7:#9204fd; --av-7-ink:#ffffff;   /* بنفسجيّ · 300° */
  --av-8:#fa0089; --av-8-ink:#1C1917}   /* ورديّ   · 359° */

/* ══ السلّم الطباعيّ ══
   ستّ درجات لا أربعين. والقاعدة تُقرأ من الأسماء لا من الأرقام:
     tag   ١٢px    وسمٌ يُلمَح — لا جملة كاملة هنا. وهو أرضية المنصة كلها
     meta  ١٤px    سطرٌ وصفيّ قصير تحت عنوان
     ui    ١٥٫٢px  نصّ الواجهة: أزرار · ألسنة · حقول
     read  ١٦٫٨px  كل ما يُقرأ فعلاً: النصّ · الخيارات · **التشخيص**
     q     ١٨٫٩px  نصّ السؤال
     h     ٢٠px    عنوان قسم
   🔴 ولا شيء تحت ١٢px في أي شاشة — لا في المحرّر ولا في الشارات. */
:root{--fs-tag:.75rem;--fs-meta:.875rem;--fs-ui:.95rem;
      --fs-read:1.05rem;--fs-q:1.18rem;--fs-h:1.25rem}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--page);background-attachment:fixed;
 color:var(--text);font-family:'Readex Pro','Almarai',system-ui,Tahoma,sans-serif;
 font-weight:400;line-height:1.85;padding:0 0 90px;-webkit-font-smoothing:antialiased}
/* ══════════════════════════════════════════════════════════
   عرضُ المحتوى — ثلاث رتب لثلاث وظائف
   كان عرضٌ واحد (٧٦٠) يخدم عملين متناقضين:
     • القراءة تريد سطراً قصيراً — ٧٦٠ يعطي ~٩٠ حرفاً، والعين
       تُخطئ العودةَ إلى أوّل السطر بعد ٧٥. وخطأ العودة يُسقط كلمةً،
       وإسقاط الكلمة يُنتج كود KW كاذباً — فالعرضُ يُفسد التشخيص.
     • الاختيار يريد مسحاً بصرياً واحداً لا تمريراً.
   ⚠️ والرتبة تُشتقّ من المحتوى بـ:has() لا من نداءٍ في الشيفرة —
      فلا تُنسى في شاشةٍ جديدة. وثمنُها أن تغيير اسم صنفٍ يُغيّر
      التخطيط صامتاً؛ ولهذا كُتبت المراسي هنا مجموعةً في موضع واحد.
   ⚠️ وترتيب القواعد لازم: ‎.wrap.wide‎ تتساوى في الخصوصية مع
      ‎.wrap:has(…)‎ فيجب أن تأتي أخيرةً لتغلب في شاشات التأليف.
   ══════════════════════════════════════════════════════════ */
.wrap{max-width:var(--w,760px);margin:0 auto;padding:0 18px}

/* ① قراءة — نصٌّ يُقرأ سطراً سطراً. ٦٨٠ ⇒ ~٧٧ حرفاً */
.wrap:has(.qcard),
.wrap:has(.rev),
.wrap:has(.chat),
.wrap:has(.essaybox){--w:680px}

/* ② اختيار — مجموعةٌ **غير مرتَّبة** تُمسح بالبصر */
.wrap:has(.subj),
.wrap:has(.mentor){--w:1060px}

/* ③ تأليف — أخيرةً عمداً (انظر التحذير أعلاه) */
.wrap.wide{--w:1180px}

/* ── الترويسة والهوية ── */
/* ══ الترويسة الواحدة ══
   كان الشعارُ يتكرّر: الشريط فوقه يقول «أنت في بيان» بوجهاته، ثم
   يقوله الشعارُ ثانيةً بـ١٤٤ بكسلاً رأسياً. فانتقل إلى داخل الشريط
   حيث يكلّف صفراً — والشريط موجودٌ أصلاً.
   ⚠️ و text-align:start لا center: العنوان يحاذي المحتوى تحته، فتقلّ
      مسافة انتقال العين. المركزةُ تصلح لشاشةٍ لا محتوى تحتها.
   ⚠️ و .bare للشاشات التي تُنادي head("") — كانت تحجز ٤٢px من فراغ. */
header{padding:15px 0 9px;text-align:start}
header.bare{padding:0}
/* الشعار يظهر في البوابة (hero) وفي الشريط (topbrand) — لا بينهما */
.brand:not(.hero):not(.topbrand){display:none}
.brand{margin-bottom:10px;line-height:1.5;display:flex;align-items:center;
  justify-content:center;gap:10px;flex-wrap:wrap}
/* ══ الشعار — علامةٌ هندسية (أكتوبر ٢٠٢٦)، بنسختين حسب الدور ══
   الرسم واحد (viewBox ‏19 0 500 250): صندوق الباء بألفها، ووعاء النون
   بورقتيه، وأربع نقاط. compact ساكنةٌ للشريط (٢٥px — المتجه يبقى
   حادّاً عنده)، وfull مقسومةٌ أجزاءَ مشهدِ الافتتاح للبوابة حيث الشعار
   بطل الشاشة. وسطر BAYAN صار نصّاً حيّاً (.brand-latin أدناه) لا
   مساراتٍ متتبَّعة — فخرج من ملفّ الشعار.
   ⚠️ var(--logo-ink) على الحبر كلّه — ضربات الحروف (stroke) والنقاط
      (fill) — كحليٌّ في الفاتحة، أبيض في الداكنة. سِمةٌ واحدة تكفي:
      الملفّ متجهٌ حقّاً. ولا ثقوب في هذه العلامة — راجع --logo-hole
      في طبقة الهوية أعلاه.
   ⚠️ والفيروزيّ/الذهبيّ (الورقتان) ألوان هويةٍ ثابتة لا تتبع السِمة —
      راجع الكتلة الثابتة أسفل ألوان الداكنة في رأس هذا الملف. */
.brand-logo{height:36px;width:auto;max-width:100%;display:none}
.brand.has-logo .compact{display:block}
.brand.has-logo .full{display:none}
/* الفجوة بين العلامة وكتلة النصّ — ٨ أكتوبر: كانت ٦px ثابتة، فلمّا كبر
   الشعار النصّيّ ضاق ما بين نقاط «بيان» وسطر BAYAN. صارت تكبر مع
   العلامة بنسبة لوح التصميم (٣٠ من ٣٠٤ ⇒ ٠٫٠٩٩ من ارتفاعها). */
.brand.hero{flex-direction:column;gap:clamp(11px,2.8vw,17px)}
.brand.hero .brand-logo{height:clamp(110px,28vw,170px)}
.brand.hero .full{display:block}
.brand.hero .compact{display:none}
.brand-text{display:inline-flex;align-items:baseline;gap:9px}
.brand.hero .brand-text{flex-direction:column;align-items:center;gap:4px}
.brand-name{font-family:'Almarai';font-weight:800;font-size:1.05rem;color:var(--accent);letter-spacing:.01em}
.brand-slogan{font-size:.75rem;color:var(--text-muted);margin-right:9px}
.brand.hero{margin-bottom:6px}
.brand.hero .brand-name{display:block;font-size:clamp(2.4rem,11vw,3.4rem);line-height:1.1;margin-bottom:6px}
/* الشعار النصّيّ في البوابة — ٨ أكتوبر: كان ثابتاً عند --fs-ui (١٥px)
   تحت علامةٍ تبلغ ١٧٠px فبدا ضئيلاً، وصار يكبر معها كما يكبر سطر BAYAN
   وبنسبة لوح التصميم نفسها (٦٠ من ٣٠٤ ⇒ ٠٫١٩٧ من ارتفاع العلامة).
   واللونُ من --logo-ink لا --text-muted: اللوكاب المعتمد بلونٍ واحد.
   (وعلى الكحليّ يغلبه .gate-say في screens.css فيبيضّ.)
   ⚠️ وسقط letter-spacing: ٠٫٠٢em لا تُرى عند ١٥px، لكنها عند ٣٣px تفكّ
      وصلَ الحروف العربية — والتباعدُ يُضاف بين كلّ حرفين لا بين الكلمات. */
.brand.hero .brand-slogan{display:block;font-size:clamp(1.35rem,5.5vw,2.1rem);
  margin-right:0;color:var(--logo-ink)}
/* سطر BAYAN اللاتينيّ — جزءُ اللوكاب الكامل، فلا يظهر إلا في البوابة.
   Nunito 900 بتباعد .85em كما في لوح التصميم. والهامش الأيمن السالب
   يقصّ فراغَ التباعد بعد N الأخيرة (letter-spacing يُضاف بعد كلّ حرف
   حتى الأخير) فيتوسّط السطر فعلاً — يمينٌ فيزيائيّ لأن النصّ ltr.
   واللون من --logo-ink فيتبع لوحتَه: أبيض على الكحليّ، حبرُ السِمة
   على الورق. */
.brand-latin{display:none}
.brand.hero .brand-latin{display:block;font-family:'Nunito',sans-serif;
  font-weight:900;font-size:clamp(1.45rem,5.9vw,2.25rem);line-height:1;
  letter-spacing:.85em;margin-right:-.85em;color:var(--logo-ink)}

/* ⚠️ موضع هذين السطرين لازمٌ بعد قواعد hero: تساويهما في الخصوصية
   (٣ أصناف) يجعل المتأخّر يغلب. ولو وُضعا فوق لظهر الاسم في البوابة.
   ولا يُخفى .brand-text كلّه: هو غلافٌ يضمّ الاسمَ والشعار النصّيّ
   معاً — والصورة تكرّر الاسم ولا تحمل الشعار، فيُخفى الاسم وحده. */
.brand.has-logo .brand-name{display:none}
.brand.has-logo .brand-text{display:flex}

/* ══ مشهد الافتتاح — البوابة وحدها ══
   الخطّ الزمنيّ كما صُمّم في معاينة splash، لكن **في مكانه** لا طبقةً
   تحجب الشاشة: البوابة إجراءٌ متكرّرٌ لعائدٍ يعرف ما يريد (رأس البوابة
   في screens.css) — وطبقةٌ ملء الشاشة تؤخّره ثانيتين كلَّ جلسة بلا مقابل.
   فالنموذج صالحٌ للكتابة من اللحظة الأولى، والهوية تُكتب بجانبه.
   🔑 **وبلا is-playing تظهر القطع كلُّها ساكنة** — فشلُ الـJS يُظهر شعاراً
      تامّاً لا شاشةً فارغة. الحركة زينةٌ فوق حالةٍ صحيحة، لا شرطٌ لها.
   ⚠️ والإزاحات بوحدات viewBox لا بكسلات الشاشة، فتكبر وتصغر مع الشعار
      نفسه — ونُقلت إلى علامة ٢٠٢٦ نسبةً لا رقماً: هبوط النقطة كان ١٣٪
      من ارتفاع viewBox القديم، فصار ٢٥٠ × ٠٫١٣ ≈ ٣٣ (وقِسه الارتداد).
   📌 ومشهد العلامة الهندسية ثلاث حركاتٍ لا ستّ: الحبر يُكتب، النقاط
      تنقر، الورقتان تتفتّحان — فسقطت rise/cap/up مع حروف الشعار
      المتتبَّع الذي كانت له (BAYAN نصٌّ حيّ الآن يلحق بـ sp-slog). */
.brand.hero .part{transform-box:fill-box}
/* نقطة النون تهبط من فوق حافّة viewBox العليا — فلا يقصّها الإطار */
.brand.hero .full{overflow:visible}
.brand.hero.is-playing .write{animation:sp-write .95s cubic-bezier(.65,0,.35,1) var(--d,0s) both}
.brand.hero.is-playing .drop {animation:sp-drop .34s cubic-bezier(.3,.7,.4,1) var(--d) both;
  transform-origin:center}
.brand.hero.is-playing .grow {animation:sp-grow .6s cubic-bezier(.2,.8,.3,1.1) var(--d) both;
  transform-origin:var(--o,center)}
/* سطرا النصّ يلحقان بالعلامة — BAYAN ثم الشعار النصّيّ، آخرُ ما يستقرّ */
.brand.hero.is-playing .brand-latin {animation:sp-slog .5s ease 1.5s both}
.brand.hero.is-playing .brand-slogan{animation:sp-slog .5s ease 1.8s both}

/* الكتابة من اليمين إلى اليسار — كما يكتب الخطّاط */
@keyframes sp-write{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
/* النقطة نقرةُ قلم: لا تُرى قبل أن يمرّ القلم فوقها، ثم تنزل وتنتفخ وتستقرّ */
@keyframes sp-drop{0%{transform:translateY(-33px) scale(.3);opacity:0}
  60%{transform:translateY(2px) scale(1.15);opacity:1}100%{transform:none;opacity:1}}
/* الورقتان تتفتّحان من وعاء النون */
@keyframes sp-grow{from{transform:scale(.15);opacity:0}to{transform:none;opacity:1}}
@keyframes sp-slog{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* من فعّل «تقليل الحركة» في جهازه: لا يُلغى المشهد بل يُهدَّأ — القطع
   تظهر بالترتيب نفسه تلاشياً بلا انتقالٍ ولا ارتداد. */
.brand.hero.is-soft.is-playing .part,
.brand.hero.is-soft.is-playing .brand-latin,
.brand.hero.is-soft.is-playing .brand-slogan{animation:sp-fade .5s ease var(--d,0s) both}
@keyframes sp-fade{from{opacity:0}to{opacity:1}}
h1{font-family:'Almarai';font-weight:800;font-size:clamp(1.3rem,4.4vw,1.72rem);line-height:1.4}
.sub{color:var(--text-muted);font-size:var(--fs-ui);margin-top:6px}

/* ── البطاقة ── */
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
 border-radius:var(--r);padding:22px 20px;margin-bottom:15px}

/* ── الحقول ── */
input,textarea,select{width:100%;background:var(--fill-soft);border:1px solid var(--line);
 border-radius:11px;padding:13px;color:var(--text);font-family:inherit;font-size:var(--fs-ui);line-height:1.9}
textarea{min-height:125px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
select{cursor:pointer}
select option{background:var(--surface-2);color:var(--text)}
label.fl{display:block;font-family:'Almarai';font-weight:700;font-size:var(--fs-meta);margin-bottom:8px}
.small{font-size:var(--fs-meta);color:var(--text-muted);margin-top:7px;text-align:right;line-height:1.75}

/* ── الأزرار ── */
.nav{display:flex;gap:10px;margin-top:6px}
button.btn{flex:1;border:none;border-radius:11px;padding:13px 18px;cursor:pointer;
 font-family:'Almarai';font-weight:800;font-size:var(--fs-ui);transition:transform .12s,filter .18s}
button.btn:active{transform:translateY(1px)}
button.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.primary{background:var(--accent);color:var(--on-accent)}
.primary:hover{filter:brightness(1.08)}
.primary:disabled{opacity:.35;cursor:not-allowed}
.ghost{background:var(--fill);color:var(--text);border:1px solid var(--line)!important}

/* ── زرّا الدور (123 · b108 · b110) ──
   🔓 وكانت شبكةَ ٢×٢ تجمع الدورَ والصيغة، فانفصلت إلى صفَّين في `b108`،
   **ثمّ ذهب صفُّ الصيغة كلُّه في `b110`**: صار منسدلةً في متن النموذج
   بعيدةً عن الدور، فسقط `.rf-tabs` ولم يُترك رقعةً لصنفٍ لا وجود له.

   📌 والدورُ `auto-fit` لا عمودان مثبتان: نصُّه أطول («أنا طالب |
   طالبة»)، فيقف الزرّان جنباً إلى جنبٍ حيث يتّسعان **وينزل أحدُهما
   تحت الآخر حيث يضيقان** — بلا استعلامِ وسائطٍ يُصان.
   ⚠️ و`button.btn` فيه `flex:1` — لا أثرَ له في grid، والخانةُ
      هي التي تُقاس. */
.rf-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.rf-roles .btn{min-width:0}

/* ── الألسنة ── */
.tabs,.subtabs{display:flex;gap:8px;margin-bottom:14px}
.tab{flex:1;padding:11px;border-radius:11px;cursor:pointer;text-align:center;
 font-family:'Almarai';font-weight:800;font-size:var(--fs-ui);background:var(--fill);
 border:1px solid var(--line);color:var(--text-muted)}
.tab.on{background:var(--accent-fill);border-color:var(--accent);color:var(--accent)}

/* ── عناصر نصية مشتركة ── */
h2.sec{font-family:'Almarai';font-weight:800;font-size:var(--fs-h);margin:24px 0 13px;
 padding-right:12px;border-right:3px solid var(--accent)}
.grp{font-family:'Almarai';font-weight:800;font-size:var(--fs-read);margin:22px 0 12px;
  display:flex;align-items:center;gap:9px}
.grp:first-child{margin-top:4px}
.rev-q{font-family:'Almarai';font-weight:700;font-size:var(--fs-ui);margin-bottom:10px}
.line{font-size:var(--fs-meta);color:var(--text-muted);margin-bottom:5px}
/* ⚠️ كان ٤٠٠ يعني «أثقل من الجسد» حين كان الجسد ٣٠٠. ولمّا صار الجسد
   ٤٠٠ فقد التمييزَ صامتاً — فرُفع إلى ٦٠٠. */
.line b{color:var(--text);font-weight:600}
.hint{color:var(--text-muted);font-size:var(--fs-meta);margin-top:10px;text-align:center}
.crumb{font-size:var(--fs-meta);color:var(--text-muted);margin-bottom:12px;cursor:pointer}
.crumb:hover{color:var(--accent)}
.crumb:hover{color:var(--accent)}

.crumb-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.crumb-row .crumb{margin:0}

/* ── الوسوم والرقائق ── */
.badge{display:inline-block;font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);
 padding:3px 10px;border-radius:999px;margin-right:7px}
/* ok حكمٌ («أُنجز») و on حالةُ اختيار («مختارة» · «معلمك الحالي»).
   كانتا صنفاً واحداً — فبدا الاختيارُ إنجازاً. */
.badge.ok{background:var(--ok-fill);color:var(--ok)}
.badge.on{background:var(--accent-fill);color:var(--accent)}
.badge.lock{background:var(--fill-strong);color:var(--text-muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.chip{background:var(--fill);border:1px solid var(--line);border-radius:8px;
  padding:4px 10px;font-size:var(--fs-tag);color:var(--text-muted)}
/* g اسمٌ تاريخيّ (كان أخضر). دورُه إعلاميّ — عدد · محطّة · «عندك» —
   لا حكم، فتبع accent إلى الأزرق. لا يُعاد تسميته: يسكن في ١٣ موضعاً. */
.chip.g{background:var(--accent-fill);border-color:var(--accent-line);color:var(--accent)}

/* 🆕 b129 · شارةُ نقصٍ في واجهة المؤلّف — «بلا درس ولا فرع».
   كهرمانيّةٌ لا حمراء: الأحمر يقول «أخطأتَ»، وهذا نقصٌ يُستدرَك
   لا خطأٌ وقع. ولا تُستعمل في نصّ الطالب. */
.chip.warn{background:var(--warn-fill);border-color:var(--warn-line);color:var(--warn)}

/* ── الحالات والرسائل ── */
.status{text-align:center;padding:26px 14px;color:var(--text-muted);font-size:var(--fs-ui)}

/* ══ الهياكل الشبحية (b68) — انظر ui.js: skeleton() ══
   ♿ .sr-only مرافقٌ لها: النطق يُستردّ نصّاً مخفيّاً بصريّاً لا مطويّاً،
      فـdisplay:none و visibility:hidden يُسقطانه من شجرة الوصول أيضاً. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.sk-b{display:block;background:var(--fill-strong);border-radius:7px;
  position:relative;overflow:hidden;flex:none}
/* ⚠️ اللمعةُ تمشي يميناً ← يساراً كاتّجاه القراءة. و`transform` فيزيائيٌّ
   لا يقلبه `dir=rtl`، فيُكتب الاتجاه هنا صراحةً أو مشى معكوساً. */
.sk-b::after{content:"";position:absolute;inset:0;transform:translateX(100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  animation:skWave 1.5s ease-in-out infinite}
:root[data-theme="dark"] .sk-b::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
@keyframes skWave{to{transform:translateX(-100%)}}

/* ليست زرّاً ولا تُلتقط بلوحة المفاتيح — ولا حدَّ متقطّعاً يُقرأ «قيد الإعداد» */
.sk-card{pointer-events:none;border-style:solid!important;cursor:default}
.sk-chips{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.err{background:var(--danger-soft);border:1px solid var(--danger-line);border-radius:11px;
 padding:15px;font-size:var(--fs-ui);color:var(--danger-text);margin-bottom:14px}
.err b{font-family:'Almarai';font-weight:800;display:block;margin-bottom:5px}
.warnbox{background:var(--warn-soft);border:1px solid var(--warn-line);
  border-radius:11px;padding:12px 14px;font-size:var(--fs-ui);color:var(--warn-text);
  line-height:1.85;margin-bottom:14px}
.toast{position:fixed;bottom:22px;right:50%;transform:translateX(50%) translateY(90px);
 background:var(--accent);color:var(--on-accent);padding:11px 22px;border-radius:999px;
 font-family:'Almarai';font-weight:800;font-size:var(--fs-ui);transition:transform .35s;z-index:60}
.toast.show{transform:translateX(50%) translateY(0)}

/* ── شريط التنقّل الدائم ──
/* يصير — الالتصاق ينتقل إلى الأب، فله مدى الصفحة يتحرّك فيه */
#bar{position:sticky;top:0;z-index:20}
.topbar{background:var(--bar);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:9px 14px}
/* هوية الشريط — تُستنسخ من #brand فلا يُفترض شكلها ولا مكان ملفّها.
   وتُخفى تحت ٥٦٠px: الوجهات أحقُّ بالعرض من الاسم في شاشةٍ ضيّقة. */
.topbrand{flex:0 0 auto;margin:0 2px;gap:7px}
.topbrand .brand-logo{height:25px}
.topbrand .brand-slogan{display:none}
/* 🔓 وعادت الهويّة تظهر في الشاشة الضيّقة (b65): كانت تُخفى لتفسح
   للوجهات، والوجهات صارت في الدرج — فلا مزاحم، والهويّة أولى بالفراغ. */
.topgap{flex:1;min-width:0}

/* ── أزرار الأيقونات: ☰ · الجرس · الإغلاق ──
   ٣٨px مساحةُ إصابةٍ لا مساحةُ رسم: الأيقونة ٢٠ والباقي هامشٌ يُلمَس. */
.iconbtn{flex:0 0 auto;width:38px;height:38px;padding:0;background:none;
  border:1px solid transparent;border-radius:11px;cursor:pointer;color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:color .18s,background .18s,border-color .18s}
.iconbtn:hover{color:var(--text);background:var(--fill)}
.iconbtn:focus-visible,.acct:focus-visible,.menu-item:focus-visible,
.bell-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ic{width:20px;height:20px;display:block}

/* ── شارة العدد ──
   🔑 كهرمانيّةٌ لا حمراء: الأحمر في بيان يقول «أخطأتَ» وحدها (طبقة
      الأدوار في الرأس)، وعددُ ما ينتظرك ليس خطأً. */
/* ⚠️ تركب الزاوية ولا تجلس داخل الزرّ: قياسٌ أوّل وضعها عند 1px
   فغطّت الجرسَ نفسه — فصار الرقم يمحو الأيقونة التي يصفها. */
.bdg{position:absolute;top:-3px;inset-inline-end:-4px;min-width:19px;height:19px;
  padding:0 5px;border-radius:999px;background:var(--warn-fill);color:var(--warn-text);
  border:1px solid var(--warn-edge);font-family:'Almarai';font-weight:800;
  font-size:var(--fs-tag);line-height:17px;text-align:center}
.bdg.soft{position:static}

/* ── زرّ الحساب — وله قائمتُه منذ b107 (التعليل في js/ui.js) ── */
.acct{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:none;
  border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--text);
  padding-block:3px;padding-inline:3px 11px;
  transition:border-color .18s,background .18s}
.acct:hover{border-color:var(--accent-edge);background:var(--fill)}
.acct-n{font-family:'Almarai';font-weight:700;font-size:var(--fs-meta);
  max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── علامةُ الحساب (125) ──
   🔓 **وحلّت محلّ `.avatar`** — وكانت تلبس `--accent-fill` و`--accent`،
      **وهي عائلةُ «اخترتَ / اضغط هنا»**. والعلامةُ ليست تفاعلاً ولا
      حكماً، فلونُها لا يقول شيئاً من الخمس. وكلُّ أزرقَ خارج التفاعل
      يُضعف الأزرقَ حين يُنقَر عليه فعلاً (رأس طبقة الأدوار).
      ⇒ صارت تلبس لوحةَ `--av-*` وحدها.
   📌 والمقاسُ على الـSVG نفسِه (سِمتا `width/height` من `renderMark`)،
      فلا يُكرَّر رقمٌ هنا ورقمٌ هناك. وهذه الخانةُ للتخطيط لا للحجم. */
.av-slot{display:flex;flex:0 0 auto;line-height:0}
.av-slot .av-mark{display:block}
@media(max-width:520px){ .acct-n{display:none} .acct{padding-inline:3px} }

/* ── لوحة الجرس ──
   تتدلّى من زرّها لا من طرف الشاشة: العينُ تتبع ما نقرت عليه. */
.bellwrap{position:relative;flex:0 0 auto;display:flex}
.bellpanel{position:absolute;top:calc(100% + 9px);inset-inline-end:0;z-index:40;
  width:min(86vw,304px);background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:6px}
.bell-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:start;
  background:none;border:none;border-radius:10px;padding:10px;cursor:pointer;
  color:var(--text);font-family:inherit;font-size:var(--fs-meta);line-height:1.7;
  transition:background .18s}
.bell-item:hover{background:var(--fill)}
.bell-ic{color:var(--accent);display:flex;flex:0 0 auto;margin-top:3px}
.bell-empty{padding:18px 12px;text-align:center;color:var(--text-muted);
  font-size:var(--fs-meta)}

/* ── لوحة الحساب  (b107) ──
   🔑 تتدلّى من العلامة كما تتدلّى لوحةُ الجرس من جرسه — نفسُ القاعدة:
      العينُ تتبع ما نقرت عليه. و`inset-inline-end:0` في RTL يسار،
      أي أنّ اللوحة تنبسط من حافّة الزرّ **نحو الداخل** لا خارج الشاشة.
   ⚠️ وسقفٌ لارتفاعها: فيها سؤالُ الصيغة لمن لم يُسأل، وأربعةُ بنود —
      وشاشةُ جوّالٍ قصيرةٌ تدفع «خروج» تحت الطيّة بلا أثرٍ يُرى. */
.acctwrap{position:relative;flex:0 0 auto;display:flex}
.acctpanel{position:absolute;top:calc(100% + 9px);inset-inline-end:0;z-index:40;
  width:min(86vw,300px);background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:6px;
  max-height:min(78vh,560px);overflow-y:auto}
.acct-head{padding:8px 8px 12px;margin-bottom:5px;border-bottom:1px solid var(--line)}

/* ── قلمُ العلامة  (b107) ──
   🔑 **الفعلُ يسكن الشيءَ الذي يغيّره** — التعليلُ عند الوسم في ui.js.
   ⚠️ **وخفيفٌ لا صائح:** العلامةُ هويّةٌ لا زرّ، والقلمُ يُرى عند النظر
      إليها ولا يزاحمها. ⇒ قرصٌ بخلفيّة السطح وحدٍّ رفيع، ولا يلبس
      الأزرقَ إلا عند اللمس — وكلُّ أزرقَ خارج التفاعل يُضعف الأزرقَ
      حين يُنقَر عليه فعلاً (رأس طبقة الأدوار).
   📌 **ومساحةُ الإصابة العلامةُ كلُّها (٤٠px) لا القرصُ (١٩).** إصبعٌ
      على تسعةَ عشرَ بكسلاً يخطئ، والقرصُ علامةٌ تقول «هذه تُعدَّل»
      لا هدفٌ يُصاب وحده.
   ⚠️ **والقلمُ أخو `.av-slot` لا ابنُها:** `syncMarks` تُعيد ملءَ كلّ
      `.av-slot` عند جاهزية الخطّ، فقلمٌ داخلَها يُمحى بعد لحظة. */
.av-edit{position:relative;display:flex;flex:0 0 auto;padding:0;background:none;
  border:none;border-radius:50%;cursor:pointer;color:var(--text-muted)}
.av-pen{position:absolute;inset-block-end:-3px;inset-inline-end:-3px;
  width:19px;height:19px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);
  transition:color .18s,background .18s,border-color .18s}
.av-pen .ic{width:12px;height:12px;stroke-width:2}
.av-edit:hover .av-pen{color:var(--accent);background:var(--accent-fill);
  border-color:var(--accent-edge)}
.av-edit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* وكتلةُ السؤال داخل لوحةٍ حشوُها ٦px تأخذ هامشَ الدرج فتضيق — فتُعدَّل */
.acctpanel .gram-ask{margin:4px 2px 9px}

/* ── الدرج ──
   🔑 يخرج من يمين الشاشة لأن ☰ في اليمين: القائمة تنبثق من تحت
      الإصبع الذي فتحها، فلا تقطع العينُ الشاشةَ بحثاً عنها.
   ⚠️ و inset-inline-start في RTL هو اليمين، و translateX(100%)
      فيزيائيّ يُخفيه يميناً. الاثنان متوافقان هنا عن قصد. */
/* ⚠️ الظهور فوريّ والاختفاء مؤجَّل: لو تدرّج visibility مع الحركة
   لبقي الدرج مخفيّاً في أول إطار، **وعنصرٌ مخفيّ لا يقبل التركيز** —
   فيسقط نقلُ التركيز إليه صامتاً. مقيسٌ في فحص ⑦. */
.scrim{position:fixed;inset:0;z-index:65;background:var(--scrim);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
.drawer{position:fixed;inset-block:0;inset-inline-start:0;z-index:70;
  width:min(86vw,312px);background:var(--surface);
  border-inline-end:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;
  transition:transform .26s ease,visibility 0s linear .26s}
body.drawer-open .scrim{opacity:1;visibility:visible;
  transition:opacity .25s,visibility 0s}
body.drawer-open .drawer{transform:none;visibility:visible;
  transition:transform .26s ease,visibility 0s}
body.drawer-open{overflow:hidden}
/* البوّابة لا شريطَ لها ولا درج — والحارس هنا لا في كل شاشة */
body.gate .drawer,body.gate .scrim{display:none}

/* رأسُ الدرج — الشعارُ لا الهويّة منذ b107: الهويّةُ رأسُ لوحة الحساب.
   والدرجُ يغطّي شعارَ الشريط حين ينفتح، فيحمله بدله. */
.drawer-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;
  border-bottom:1px solid var(--line)}
.drawer-head .topbrand{flex:1;min-width:0}
.who{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.who-t{display:flex;flex-direction:column;min-width:0;line-height:1.55}
.who-t b{font-family:'Almarai';font-weight:800;font-size:var(--fs-ui);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-t span{font-size:var(--fs-tag);color:var(--text-muted)}
/* ── سؤالُ صيغة المخاطبة — لمن لم يُسأل (125) ──
   🔑 **محايدةٌ لا عائلةَ لها:** السؤال ليس تفاعلاً («اخترتَ») ولا حكماً
      ولا حذراً. وكهرمانيٌّ هنا يقول «انتبه» لأمرٍ لا خطرَ فيه، **والصياحُ
      الدائم لا يُسمع**. ⇒ `--fill-soft` و`--line` و`--text` (رأس الطبقة).
   📌 وتسكن بين الرأس والتنقّل: تُرى حين يُفتح الدرجُ قصداً، ولا تسبق
      شاشةً ولا تحجب فعلاً. */
.gram-ask{margin:12px 10px 2px;padding:12px;border-radius:12px;
  background:var(--fill-soft);border:1px solid var(--line)}
.gram-ask b{font-family:'Almarai';font-weight:800;font-size:var(--fs-ui);
  display:block;margin-bottom:5px}
.gram-ask p{font-size:var(--fs-meta);color:var(--text-muted);
  line-height:1.75;margin:0 0 10px}
.gram-ask .nav{margin-top:0}

.drawer-nav{flex:1;overflow-y:auto;padding:10px 10px 4px}

/* ── بندُ القائمة — صفٌّ واحدٌ للدرج وللوحة الحساب  (b107) ──
   🔑 **وكان اسمُه `.drawer-item`.** ثمّ صارت قائمتين، فاسمٌ يقول «درج»
      على بندٍ في لوحةِ حسابٍ يكذب على قارئ الشيفرة. ⇒ الصفُّ واحدٌ
      باسمٍ واحد، و`.on` تبقى للدرج وحده لأنّ الوجهةَ وحدها تكون نشطة. */
.menu-item{display:flex;align-items:center;gap:11px;width:100%;text-align:start;
  background:none;border:1px solid transparent;border-radius:11px;padding:11px 12px;
  cursor:pointer;color:var(--text-muted);font-family:'Almarai';font-weight:700;
  font-size:var(--fs-ui);transition:color .18s,background .18s,border-color .18s}
.menu-item > span:not(.bdg){flex:1}
.menu-item:hover{color:var(--text);background:var(--fill)}
.menu-item.on{color:var(--accent);background:var(--accent-fill);
  border-color:var(--accent-edge)}
.menu-item.danger:hover{color:var(--danger);background:var(--danger-soft);
  border-color:var(--danger-line)}

/* ══════════════════════════════════════════════════════════════
   البحث — لوحةٌ تعلو الصفحة لا حقلٌ في الشريط  (b67)

   🔴 ولمَ لوحةٌ لا حقل؟ الشريط في الجوّال يحمل أربعةً بالفعل
      (☰ · الهويّة · الجرس · الحساب)، وحقلٌ خامسٌ يسحقها جميعاً.
      والأعمق: البحثُ **نيّةٌ مستقلّة** لا زينةٌ في الحافّة — من
      فتحه فقد ترك ما كان فيه، فيستحقّ الشاشة لا الزاوية.

   ⚠️ ولا .scrim ثانياً: قاعدةُ `body.drawer-open .scrim` تصيب كلَّ
      من حمل الصنف، فثانٍ يظهر مع الدرج. ⇒ اللوحة خلفيّتُها بنفسها.
   ══════════════════════════════════════════════════════════════ */
.sbox{position:fixed;inset:0;z-index:80;background:var(--scrim);
  display:flex;flex-direction:column;align-items:center;padding:0 14px;
  opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
body.search-open .sbox{opacity:1;visibility:visible;transition:opacity .2s,visibility 0s}
body.search-open{overflow:hidden}
body.gate .sbox{display:none}

.spanel{width:min(680px,100%);margin-top:min(9vh,72px);max-height:82vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow)}

.sbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-bottom:1px solid var(--line)}
.sbar > .ic{color:var(--text-muted);flex:0 0 auto}
.sin{flex:1;min-width:0;border:0;background:none;padding:7px 0;color:var(--text);
  font-family:'Almarai';font-weight:700;font-size:var(--fs-read)}
.sin:focus{outline:none}
.sin::placeholder{font-weight:400;color:var(--text-muted)}
/* ⚠️ type=search يرسمه المتصفّح بزرّ مسحٍ خاصٍّ به — فيظهر ✕ بجوار
   ✕ الإغلاق، ولا يعرف الناظر أيُّهما يُنهي البحث. والنوع يبقى search
   لأنّ لوحة الجوّال تُظهر به مفتاح «بحث» بدل «إدخال». */
.sin::-webkit-search-cancel-button,
.sin::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}

/* ⚠️ min-height:0 لازم: ابنُ المرونة لا ينكمش تحت مقاس محتواه بلا
   هذا، فتتمدّد اللوحة ولا يعمل overflow أبداً. */
.sres{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px}

/* ⚠️ العددُ صندوقٌ مستقلّ لا نصٌّ بعد «·». الفاصلُ محرفٌ محايد،
   والرقمُ العربيُّ صنفُه AN — فيُعاد ترتيبُهما في سياق RTL فيُقرأ
   «الدروس · ٢» عشرين. لا خطأ يظهر، ورقمٌ يكذب. */
.sgrp{display:flex;align-items:baseline;gap:7px;
  font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);
  color:var(--text-muted);padding:12px 10px 5px;letter-spacing:.03em}
.sgrp:first-child{padding-top:6px}
.sgrp i{font-style:normal;font-weight:700;padding:1px 7px;border-radius:999px;
  background:var(--fill-strong);font-variant-numeric:tabular-nums}

.sr{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:start;
  background:none;border:1px solid transparent;border-radius:11px;padding:10px 11px;
  cursor:pointer;color:var(--text);font-family:inherit;transition:background .15s}
.sr:hover{background:var(--fill)}
.sr:focus-visible{outline:none;background:var(--fill);border-color:var(--accent)}
.sr-ic{flex:0 0 auto;margin-top:2px;color:var(--accent);display:flex}
/* ⚠️ عمودٌ صريح: الأبناء span، والوسمُ السطريُّ يسيل فيلتصق العنوان
   بالوصف بالتشخيص في سطرٍ واحد — يُقرأ ولا يُمسَح بالعين. */
.sr-b{flex:1;min-width:0;display:flex;flex-direction:column}
.sr-t{font-family:'Almarai';font-weight:700;font-size:var(--fs-ui);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-s{font-size:var(--fs-tag);color:var(--text-muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* التشخيصُ يأخذ أسرته — هي نفسها التي يراها في شاشة النتيجة (b62)،
   فيقرأ المعنى مرّةً ويعرفه في كلّ موضع. */
.sr-dx{align-self:stretch;margin-top:6px;padding:6px 9px;border-radius:9px;line-height:1.7;
  font-size:var(--fs-tag);color:var(--dx-text);
  background:var(--dx-soft);border:1px solid var(--dx-line)}

.s-msg{padding:28px 16px;text-align:center;color:var(--text-muted);
  font-size:var(--fs-meta);line-height:1.95}
.s-msg b{display:block;font-family:'Almarai';font-weight:800;
  color:var(--text);margin-bottom:5px}

/* الجوّال: اللوحةُ هي الشاشة — نصفُ شاشةٍ عائمٌ فوق ضبابٍ يُضيّق
   القائمةَ إلى ثلاثة صفوف، والبحثُ يُقاس بما يَعرِض لا بما يَفتح. */
@media(max-width:560px){
  .sbox{padding:0}
  .spanel{margin-top:0;height:100%;max-height:100%;border:0;border-radius:0}
}

@media(max-width:420px){
  .topbar{padding:8px 10px;gap:6px}
}

/* ── الإتاحة ──
   ⚠️ استثناءٌ واحد يعلو هذه القاعدة عمداً: البطاقات (b63). للطالب هناك
      مفتاحٌ صريح «حركة أقل»، وإعدادُ النظام قيمتُه الابتدائية فقط —
      فمن أطفأه صراحةً تعود إليه الحركة. انظر .bf-wrap:not(.calm) في screens.css. */
/* ⚠️ ::before و::after مذكوران صراحةً (b68): `*` يصيب العناصر لا العناصرَ
   الزائفة، فحركةٌ على `::after` كانت **تتجاوز هذا الحارس صامتةً**. ولم
   يظهر الثقب حتى b68 لأن كلَّ حركةٍ قبله كانت على عنصرٍ حقيقيّ — ومَن
   طلب سكونَ الحركة لا يُبلِّغ عن لمعةٍ تدور، بل يُصاب بها. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}}

/* ── الرياضيات ── */
.tex{ unicode-bidi:isolate }               /* معادلةٌ جزيرة والجملة بحر */
.tex.blk{ display:block; text-align:center; margin:.6em 0 }

/* ── معاينة الرياضيات في المحرّر ── */
.tex-prev{
  margin:-4px 0 14px; padding:10px 12px;
  border:1px dashed var(--line); border-radius:10px;
  font-size:var(--fs-read); line-height:1.9;
}
.tex-prev::before{
  content:'المعاينة — كما يراها الطالب';
  display:block; font-size:var(--fs-tag);
  color:var(--text-muted); margin-bottom:6px;
}
/* الاستثناء أخفت من الافتراض — واجهةٌ تعرض خيارين متساويين
   تطلب قراراً لم يكن مطلوباً. */
.eq-alt{ opacity:.6; font-size:.85em }

/* ── تذييل الموقع ──
   رابطٌ إلى الصفحات الثابتة (سياسة الخصوصية). **محايدٌ لا عائلةَ له**:
   لا يقول «أصبتَ» ولا «انتبه» ولا «اخترتَ» — فيأخذ --text-muted و--line،
   ولا يمسّ --accent إلا لحظةَ التحويم حيث يصير تفاعلاً فعلاً. */
.site-foot{text-align:center;padding:26px 18px 0;
  font-size:var(--fs-tag);color:var(--text-muted)}

/* 🆕 b95 · ولا يظهر إلا في البوّابة — الدخول والتسجيل.
   موضعُه هناك: حيث يُنشأ الحساب تُقرأ شروطُه. أمّا في شاشات العمل
   فسطرٌ يتذيّل كلَّ درسٍ واختبارٍ ولا يُنقر مرّةً في عمر الحساب.

   🔑 والشرط **إثباتٌ لا نفي** — `body.screen:not(.gate)` لا
      `body:not(.gate)`. والفرق ليس أناقة: كلا الصنفين تضيفه جافاسكربت،
      فالنفيُ يُخفي التذييل **قبل** أن تعمل الشيفرة وإن تعطّلت أصلاً.
      وهذا الرابط لا يُعلَّق على شيفرة: بُني عمداً «لا يحتاج دخولاً ولا
      جافاسكربت» (تعليقه في index.html)، وهو عقدٌ مع المستخدم **وشرطُ
      Google لنشر تطبيق OAuth** (رأس privacy.html).
   ⇒ الساكنُ يُظهر، والشيفرةُ تُخفي حيث لا يلزم. فإن تعطّلت بقي الرابط.
   ⚠️ و`screen` تُضاف في `head()` وحدها — وهي تُنادى في كل شاشة، فلا
      تُنسى في شاشةٍ جديدة. */
body.screen:not(.gate) .site-foot{display:none}
.site-foot a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--line);transition:color .18s,border-color .18s}
.site-foot a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.site-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}