/* ═══════════════════════════════════════════════════════════════
   مشروع حافظ — ملف التصميم الوحيد
   الجوال أولاً (360px) ← اللوحي (600px) ← الحاسوب (1024px)
   ═══════════════════════════════════════════════════════════════ */

/*
 * الخطوط في `fonts.css` **مستضافةً معنا** — يُربط قبل هذا الملف في
 * الترويسة. وكان هنا `@import` من جوجل، وهو أسوأ سطرٍ كان في المشروع:
 * ينشئ سلسلة انتظارٍ من ستّ خطوات متسلسلة تحجب الرسم في **كل** صفحة،
 * لا يكتشفها المتصفّح إلا بعد تحليل هذا الملف كاملاً (٨٢ ك.ب).
 *
 * و`@import` عموماً لا يجوز في ملف تصميمٍ يُحمَّل بـ<link>: كل ما فيه
 * يصير طلباً متسلسلاً لا متوازياً. (التفصيل في MOBILE.md §١.)
 */

/* ───────────────────────────────────────────────────────────────
   1. الرموز التصميمية
   ─────────────────────────────────────────────────────────────── */
:root {
  /*
   * الألوان — «الساطعة الذهبية» (معتمدة).
   *
   * تباينٌ أعلى وتشبّعٌ أقوى وظلالٌ أوضح من اللوحة الأولى، مع بقاء
   * المحيط **ذهبياً** — فالوقار المؤسسي القرآني من الذهب لا من الأخضر.
   * (جُرِّبت لوحة زمرّدية كاملة فأخذت الوضوح وأضاعت الوقار؛ المقارنة
   *  ولقطاتها في design/palette-preview/ وDESIGN.md §٦.)
   *
   * والأخضر باقٍ **لدلالته وحدها**: أُنجز · سمّع · محفوظ.
   */
  --gold:          #E0A81C;
  --gold-dark:     #C4870A;
  --gold-deep:     #8A5D00;
  --gold-light:    #F3DA97;
  --gold-wash:     #FFF6DE;

  /*
   * ٣.٥ — «هدوء مؤسسي»: الورق يبرد والأسطح تفترق.
   *
   * كان الورق `#FAF5E9` والسطح الثاني `#F2E9D6` وكلاهما بيجٌ دافئ،
   * والفرق بينهما وبين الأبيض بضعة بالمئة — فلا تنفصل البطاقة عن
   * الصفحة، ولا يتقدّم شيء ولا يتأخّر. وعلاجه اليوم كان الظلّ، وهو
   * علاجُ عَرَضٍ لا سبب.
   *
   * فبَرَد الورق درجةً (`#F6F3EC`) ليقف الأبيض عليه ظاهراً بلا ظلّ،
   * وارتفع السطح الثاني إلى `#FAF7F0` — فهو **سطحٌ مساند** لا لونُ
   * وسمٍ: كان بيجاً مشبَعاً يصبغ كل قرصٍ وشارةٍ وخليّةِ مصحف.
   */
  --ink:           #1B1913;
  --ink-2:         #57503F;
  /*
   * ٤.٤ — الثانويّ يعبر الحدّ: `#8B8371` ← `#746E5F`.
   *
   * هو `--text-3`، وعليه **٢٥ استعمالاً** أكثرها نصٌّ صغير جارٍ:
   * `.tiny` و`.list__meta` و`.field__hint` و`.kv dt` و«صفحة ١ من ٤».
   * وكان يقيس 3.39:1 على الورق و3.76:1 على الأبيض — والحدّ 4.5:1
   * لنصٍّ دون 18.66px عريضاً. فالعطب في **اللون** لا في الحجم.
   *
   * والقيمة الجديدة هي هو نفسه: الصبغة 41.5° والتشبّع .103 كما
   * كانا، والإضاءة وحدها نزلت .494 ← .414 — فلا لون جديد دخل
   * اللوحة، ولا يصير رمادياً بارداً بين بنيّاتها الدافئة.
   *
   * وتبقى الدرجات الثلاث مفترقة: 4.58 و7.22 و15.86 على الورق،
   * والفرق بين الثانويّ والمساند 1.58:1 — يُرى.
   */
  --ink-3:         #746E5F;

  --paper:         #F6F3EC;
  --surface:       #FFFFFF;
  --surface-2:     #FAF7F0;
  --line:          #E7E1D4;
  --line-soft:     #F0EBE0;

  /*
   * الأخضر والطين أعمق: كانا لونَي **حشوة** (زرّ، شارة مملوءة)،
   * وصارا في هذا الاتجاه لونَي **نصّ** فوق سطحٍ فاتح — و`#0F9C68`
   * على `#E4F5EC` دون 4.5:1، و`#E2513A` كذلك. والقيمتان الجديدتان
   * هما الداكنتان القديمتان نفسهما، فلا لون جديد دخل اللوحة.
   */
  --olive:         #0B7A50;
  --olive-dark:    #05704A;
  --olive-light:   #E4F5EC;
  --clay:          #B23A25;
  --clay-dark:     #8F2C1B;
  --clay-light:    #FBE7E2;

  --on-gold:       #2B1F00;
  --on-ink:        #FFFFFF;

  /*
   * حدود الأسطح الملوّنة. كانت قيماً مثبَّتة (var(--olive-line) وvar(--clay-line)) من
   * اللوحة القديمة، فلمّا تغيّرت اللوحة بقيت هي — حدٌّ أخضر كامد حول
   * سطحٍ زمرّدي نديّ. كلّ سطحٍ ملوّن يأخذ حدّه من هنا لا من رقمٍ مكتوب.
   */
  --olive-line:    #B7E4CD;
  --clay-line:     #F3CFC6;

  /* حلقة التركيز — من الذهبي الحالي، وكانت من الذهبي القديم */
  --ring-gold:     rgba(224,168,28,.24);

  /*
   * سُلّم خريطة النشاط — أربع درجات من ذهبٍ واحد.
   * كانت الدرجتان الأوليان مثبَّتتين من اللوحة القديمة والأخريان من
   * الرموز، فينكسر التدرّج في منتصفه ويتغيّر لونه لا شدّته فقط.
   */
  --heat-1:        #F8E7B0;
  --heat-2:        #F0C74F;
  /*
   * والدرجتان الأخريان كانتا `var(--gold)` و`var(--gold-dark)` مكتوبتين
   * في موضع الاستعمال — أي أن السلّم نصفه رمزٌ ونصفه إحالة، فمن يعدّل
   * درجةً منه لا يجد الأربع في مكانٍ واحد. القيمتان هما هما، ولا بكسل
   * يتغيّر؛ ما تغيّر أن السلّم صار يُقرأ ويُعدَّل من سطرٍ متجاور.
   */
  --heat-3:        var(--gold);
  --heat-4:        var(--gold-dark);

  /*
   * معادن المراتب — الفضّة والبرونز.
   *
   * كانت ستّ قيم مكتوبةً بأيديها في **ثلاثة** مواضع: الشارة
   * (`.rank--2/3`)، ودرجة المنصّة (`.podium__place--2/3 .podium__step`)،
   * وقرص الصورة (`.avatar--rank-2/3`). والتعليق فوق الأخير يشترط أن
   * تبقى الثلاثة متطابقة «حتى لا ينفصل اللونان أبداً» — وهو شرطٌ لا
   * يحرسه شيء ما دامت القيمة مكرّرةً ثلاثاً. الآن مصدرها واحد.
   *
   * والمرتبة الأولى ذهبٌ من اللوحة نفسها (`--grad-gold`)، فلا تُكرَّر هنا.
   * و`--grad-pearl` قرص من لا مرتبة له.
   */
  --grad-silver:   linear-gradient(135deg,#D8D8D2,#B4B4AE);
  --grad-bronze:   linear-gradient(135deg,#D8AE86,#B98A5E);
  --grad-pearl:    linear-gradient(135deg,#EFEADC,#DED7C4);
  --on-silver:     #3B3B37;
  --on-bronze:     #3B2B1B;
  --shadow-silver: 0 4px 12px -4px rgba(60,60,56,.5);
  --shadow-bronze: 0 4px 12px -4px rgba(120,80,45,.5);
  --shadow-pearl:  0 1px 3px rgba(40,32,10,.16);

  /*
   * سهم القائمة المنسدلة. رمادي `#6B6B67` **لا وجود له في اللوحة** —
   * كل رماديّ آخر في الملف بنّي دافئ. وهو محشوٌّ داخل `data:` URI،
   * فلا يجده بحثٌ عن لون ولا يتبع أي تغيير في اللوحة.
   *
   * ولا يمكن أن يكون `var()`: القيمة داخل عنوان `url()` نصٌّ لا يفسّره
   * المتصفّح كـCSS. فالسهم كلّه صار رمزاً واحداً، ولونه مكتوبٌ في
   * سطرٍ واحد يُرى — وهذا أقصى ما تسمح به الصيغة.
   */
  --select-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6B67' d='M6 8 0 0h12z'/%3E%3C/svg%3E");

  /* التدرّجات — العمق كله من هنا، لا من الظلال الثقيلة */
  --grad-gold:  linear-gradient(135deg, #FFD75A 0%, #E0A81C 52%, #C4870A 100%);
  --grad-olive: linear-gradient(135deg, #1CC489 0%, #0F9C68 100%);
  --grad-clay:  linear-gradient(135deg, #FF7A5C 0%, #E2513A 100%);
  --grad-ink:   linear-gradient(135deg, #3A3524 0%, #1B180F 100%);
  --grad-wash:  radial-gradient(140% 120% at 100% 0%, #FFF9E8 0%, #FCEFC8 46%, #F6E3AC 100%);

  /* الخطوط */
  --font-title: 'Amiri', 'Times New Roman', serif;
  --font-body:  'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* المقاسات — 16px هو الأساس، وحقول الإدخال لا تقل عنه أبداً */
  /*
   * `--fs-2xs` أصغر ما في السلّم: شارة عدّاد التبويب ورقم الوجه في
   * شبكة المصحف — رقمان لا نصّ يُقرأ سطراً. وكانت `10px` مكتوبةً في
   * الموضعين خارج السلّم كلّه.
   *
   * ولا يوجد ما دونه. و«حفظ ومراجعة» في الشريط العلوي تُرسم بـ`9.5px`
   * وقد **تُركت مكتوبة عمداً بلا رمز**: رمزٌ لها يجعلها مقاساً معتمداً
   * وهي عطبُ مقروئية — 2.85:1 على خلفية الشريط، والمطلوب 4.5:1. البند
   * ٤.٤ يعالجها لوناً ومقاساً؛ تسميتها هنا كانت ستخفيها.
   */
  --fs-2xs:  0.625rem;  /* 10 */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */

  /* المسافات — `--sN` تعني N×4px، فالرقم نفسه يقرأ القيمة */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  /*
   * ما دون الدرجة الأولى، وباسمٍ آخر عمداً: هاتان **لا تقعان على شبكة
   * الـ4px**، فلو سُمّيتا `--s0` و`--s0-75` لكذب النظام على قارئه.
   *
   * `--s-half` نصف الدرجة حقاً (2px) — فجوةٌ ضيّقة داخل مكوّن: بين
   * أيقونة التبويب وكلمته، بين العنوان وسطره الثانوي.
   * `--s-nudge` ضبطٌ بصريّ (3px) لا إيقاع: محاذاة أيقونة إلى خطّ
   * الكتابة، وموضع قرص المفتاح داخل مجراه. لا تُبنى به تخطيطات.
   */
  --s-half:  2px;
  --s-nudge: 3px;

  /* الأشكال */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;
  /*
   * ودون `--r-sm` ثلاث درجات كانت كلّها أرقاماً مكتوبة. وهي مقاسات
   * عناصر لا حاويات: مربّع الاختيار ورقم الوجه (6px)، مفتاح الأسطورة
   * (4px)، خلية خريطة الحرارة (3px). السلّم يقف عند 3px؛ وما تحته
   * (`1px` على قدم العمود وفي المعيّن) تدويرُ حافّةٍ لا شكل.
   */
  --r-xs:  6px; --r-2xs: 4px; --r-3xs: 3px;

  /* ظلال أوضح مما كانت — العمق جزء من «الساطعة»، والظلّ بنّي دافئ
     لا رمادي، فلا يُطفئ الورق الذهبي تحته. */
  --shadow-sm:   0 1px 3px  rgba(40,32,10,.10);
  --shadow:      0 4px 16px rgba(40,32,10,.12);
  --shadow-lg:   0 14px 40px rgba(40,32,10,.22);
  --shadow-up:   0 -6px 24px rgba(40,32,10,.10);
  --shadow-gold: 0 8px 22px -6px rgba(196,135,10,.75);

  /* القياسات الثابتة */
  --topbar-h:  60px;
  --tabbar-h:  64px;
  --touch:     44px;          /* أدنى مساحة لمس */
  /*
   * المناطق الآمنة — **الأربع لا واحدة**.
   *
   * الترويسة فيها `viewport-fit=cover`، أي أن الصفحة تمتدّ تحت شريط
   * الحالة والنَتوء. وكان `--safe-b` وحده معرَّفاً، فيسلم أسفل الشاشة
   * ويقع الشريط العلوي **تحت ساعة الهاتف وبطاريته** في وضع التطبيق
   * المثبَّت — وهو ما يُقرأ «الشاشة مش fit».
   *
   * والجانبان للوضع الأفقي: النَتوء يصير في الجنب فيقصّ حافّة المحتوى.
   */
  --safe-t:    env(safe-area-inset-top, 0px);
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --safe-l:    env(safe-area-inset-left, 0px);
  --safe-r:    env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .2s;

  /*
   * قوس المحراب — الشكل الأساسي في الهوية.
   * يُستعمل قناعاً (mask) فيأخذ لون العنصر، فلا نكرّر ملفات صور.
   */
  --arch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 0C3.13 0 0 3.13 0 7v11h14V7c0-3.87-3.13-7-7-7z'/%3E%3C/svg%3E");

  /*
   * زخرفة دوائر متشابكة — نقش هندسي إسلامي يتكرّر بلا حدود ظاهرة.
   * نصف القطر = نصف ضلع البلاطة تماماً، فتتقاطع الدوائر وتتشابك
   * بدل أن تقف منفصلة كفقاعات. يوضع بشفافية ٦٪–١٢٪ فيعطي عمقاً
   * دون أن يزاحم النص.
   */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23D9A62A' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3C/g%3E%3C/svg%3E");

  /* ─────────────────────────────────────────────────────────────
     طبقة الأدوار
     ─────────────────────────────────────────────────────────────
     الرموز فوق مسمّاةٌ **بلونها**: `--gold` و`--paper` و`--ink`.
     وهي أسماء صادقة اليوم وعاجزة غداً: لوحةٌ داكنة تجعل `--paper`
     رمزاً اسمه «ورق» وقيمته سوداء — فيكذب الاسم على قارئه، ويصير
     كل استعمالٍ له موضعَ شكّ.

     فهذه الطبقة تسمّي **الوظيفة** لا اللون: ما هو سطحٌ وما هو نصّ
     ثانويّ وما هو حدّ. والقيم اليوم أسماءٌ مستعارة للرموز نفسها —
     لا بكسل واحد يتغيّر بإضافتها. ويوم تُبنى اللوحة الداكنة يُعاد
     تعريف هذه وحدها، ولا تُمسّ اللوحة الفاتحة.

     **اللوحة الداكنة مؤجَّلة عمداً** — تُبنى بإعادة تعريف ما دون
     هذا السطر داخل `prefers-color-scheme: dark`، بعد أن تنتقل
     الاستعمالات كلها إلى الأدوار. الرموز اللونية أعلاه تبقى
     مصدر القيمة الفاتحة ولا يعاد تعريفها هناك.

     والانتقال على مرحلتين مقصود: تُضاف الأسماء هنا أوّلاً وتُترك
     الاستعمالات كما هي، ثم تُنقل الاستعمالات في مرّةٍ ثانية. فلو
     جُمعا لصار كل فرقٍ بصريّ محتملَ السبب بين تسميةٍ ونقل. */

  /* الأسطح */
  --bg-page:        var(--paper);
  --bg-surface:     var(--surface);
  --bg-surface-2:   var(--surface-2);

  /* النصّ */
  --text-1:         var(--ink);      /* العناوين والمتن */
  --text-2:         var(--ink-2);    /* نصّ مساند */
  --text-3:         var(--ink-3);    /* ثانويّ — 4.58:1 على الورق (٤.٤) */
  --text-on-accent: var(--on-gold);  /* فوق الذهبي */
  --text-inverse:   var(--on-ink);   /* فوق الداكن والملوّن */

  /* الحدود */
  --border:         var(--line);
  --border-soft:    var(--line-soft);

  /*
   * اللون المميِّز — الذهبي.
   *
   * ٤.٤ — **الحدّ الفاصل بين `--accent-strong` و`--accent-deep` قياسٌ
   * لا ذوق.** `--accent-strong` (`#C4870A`) يقيس 3.08:1 على الأبيض
   * و2.86:1 على `--accent-wash`. فهو يجوز لما يكفيه 3:1 — حدٌّ،
   * وأيقونة، ورقمٌ عرضيّ من 28px عريضاً (نصٌّ كبير عند WCAG) — ولا
   * يجوز لنصٍّ صغير أبداً. وما كان نصّاً صغيراً يأخذ `--accent-deep`
   * (`#8A5D00`): 5.76:1 على الأبيض و5.34:1 على اللوحة الترحيبية.
   *
   * وثلاثة مواضع نُقلت اليوم: `.hero__date` و`.podium__pts`
   * و`.filters > summary .tiny` — كلٌّ منها معلَّم في موضعه.
   */
  --accent:         var(--gold);
  --accent-strong:  var(--gold-dark);
  --accent-deep:    var(--gold-deep);
  --accent-soft:    var(--gold-light);
  --accent-wash:    var(--gold-wash);
  --accent-ring:    var(--ring-gold);
  /*
   * ٣.٥ — الذهب لهجةٌ لا سطح: التدرّج يصير لوناً مصمتاً.
   *
   * التدرّج اللامع مع ظلٍّ ذهبيّ تحته كان على **كل** فعلٍ رئيسي في
   * البرنامج — والهيرو، والتبويب الفاعل، والمنصّة. فلمّا كان كلُّ مهمٍّ
   * لامعاً لم يبقَ لأحدها وزنٌ فوق الآخر.
   */
  --accent-grad:    var(--gold);

  /* الحالات — الأخضر لدلالته وحدها: أُنجز · سمّع · محفوظ */
  --success:        var(--olive);
  --success-strong: var(--olive-dark);
  --success-soft:   var(--olive-light);
  --success-border: var(--olive-line);
  --success-grad:   var(--olive);

  --danger:         var(--clay);
  --danger-strong:  var(--clay-dark);
  --danger-soft:    var(--clay-light);
  --danger-border:  var(--clay-line);
  --danger-grad:    var(--clay);

  /* المراتب الثلاث — ذهب وفضّة وبرونز، وقرصٌ لمن لا مرتبة له.
     الأولى ذهب اللوحة نفسه، ولها اسمٌ في العائلة كي تُقرأ الثلاثة
     سطراً واحداً بدل «الأولى مميِّزة والأخريان مرتبتان». */
  /* المرتبة الأولى تأخذ `--grad-gold` **خاماً** لا عبر `--accent-grad`:
     الأخير صار مصمتاً للأفعال، والمراتب الثلاث معادنُ لا أزرار — ولو
     تبعته لصار الذهب مسطّحاً بجانب فضّةٍ وبرونزٍ متدرّجَين. */
  --rank-1:         var(--grad-gold);
  --rank-1-text:    var(--text-on-accent);
  --rank-1-elev:    var(--shadow-gold);
  --rank-2:         var(--grad-silver);
  --rank-2-text:    var(--on-silver);
  --rank-2-elev:    var(--shadow-silver);
  --rank-3:         var(--grad-bronze);
  --rank-3-text:    var(--on-bronze);
  --rank-3-elev:    var(--shadow-bronze);
  --rank-none:      var(--grad-pearl);
  --rank-none-elev: var(--shadow-pearl);

  /* الارتفاع */
  /* الظلّ كان يفصل البطاقة عن الورق لأن لونيهما متقاربان. وقد بَرَد
     الورق في الدفعة الأولى، فالحدّ الشعريّ يكفي — والظلّ الباقي يصير
     ضجيجاً على ثلاثين بطاقة في شاشةٍ واحدة (المصحف). */
  --elev-1:         none;
  --elev-2:         var(--shadow);
  --elev-3:         var(--shadow-lg);
  --elev-up:        var(--shadow-up);
  --elev-accent:    none;
}

/* ───────────────────────────────────────────────────────────────
   2. إعادة الضبط
   ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/*
 * `hidden` يسبق كل شيء.
 *
 * قاعدة المتصفّح `[hidden] { display: none }` تسكن ورقةَ العميل، وأيُّ
 * قاعدةٍ من عندنا تغلبها مهما كانت أولويّتها — فـ`.field { display: block }`
 * وحدها كانت تُظهر كلّ عنصرٍ حملَ `hidden`. وقد وقع ذلك فعلاً في نموذج
 * التسجيل: «الدفعة» و«سنة الدخول» تظهران معاً لكلّ كلية، والجافاسكربت
 * الذي يخفيهما سليمٌ تماماً — العطب كان هنا.
 *
 * عامّةٌ لا `.field[hidden]`: المزلق نفسه ينتظر أيَّ عنصرٍ لاحقٍ يجمع
 * `hidden` مع صنفٍ يعلن `display`.
 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;   /* يمنع تكبير iOS التلقائي عند الدوران */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /*
   * `manipulation` يُسقط تكبيرَ النقرتين وتأخيرَ الـ٣٠٠ مل.ث الذي
   * يتبعه المتصفّح انتظاراً لنقرةٍ ثانية. فتُجاب الضغطة في حينها.
   *
   * ولا يمنع **تكبير القرص بإصبعين** — وهو حقٌّ لضعيف البصر لا
   * يُنزَع بحجّة «شكل التطبيق». (`user-scalable=no` هو ما ينزعه،
   * وليس هنا ولن يكون.)
   */
  touch-action: manipulation;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;               /* لا تمرير أفقي — قاعدة ملزمة */
  /* سحبةٌ في نهاية القائمة لا تجرّ الصفحة ولا تُطلق «اسحب للتحديث» */
  overscroll-behavior-y: contain;
  min-height: 100vh;
  min-height: 100dvh;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.4; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }

/*
 * مقاس افتراضي لكل أيقونة. قواعد السياق أدناه (.btn svg · .tab svg …)
 * أعلى تخصيصاً فتتجاوزه. وجوده يمنع الأيقونة من التمدد لملء الحاوية
 * في أي موضع جديد لم نضع له قاعدة.
 */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { cursor: pointer; border: none; background: none; padding: 0; }

/*
 * ٤.٣ — حلقة التركيز: لونها ورسمها (D-6).
 *
 * كانت `--accent` (`#E0A81C`) وهي **1.94:1 على الورق** و2.15 على
 * الأبيض و1.65 على حدّ الحقل الهادئ — أي أنّ العلامة التي تقول «أنت
 * هنا» أخفت من الحدّ الذي تعلو عليه. و1.4.11 يشترط 3:1.
 * و`--accent-deep` (`#8A5D00`) يقيس 5.20 على الورق و5.76 على الأبيض.
 *
 * و`border-radius` حُذف من هنا وهو الأخطر: هذه القاعدة كانت تفرض
 * `8px` على **كل عنصرٍ يُركَّز عليه**، لا على حلقته — فالحقل نصف
 * قطره 12px يتغيّر شكله لحظة التركيز. والحلقة تتبع نصف قطر العنصر
 * وحدها في كل المتصفّحات الحيّة، فلا حاجة إلى السطر أصلاً.
 */
:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

::selection { background: var(--accent-soft); color: var(--text-1); }

/* ───────────────────────────────────────────────────────────────
   3. أدوات مساعدة
   ─────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%; max-width: 100%; margin-inline: auto;
  padding-inline: max(var(--s4), var(--safe-r)) max(var(--s4), var(--safe-l));
}
.stack > * + * { margin-top: var(--s4); }
.stack-sm > * + * { margin-top: var(--s2); }
.row         { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.grow        { flex: 1; min-width: 0; }
.center      { text-align: center; }
.hidden      { display: none !important; }
.muted       { color: var(--text-2); }
.tiny        { font-size: var(--fs-xs); color: var(--text-3); }
.small       { font-size: var(--fs-sm); }
.bold        { font-weight: 700; }
.nowrap      { white-space: nowrap; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-0        { margin-top: 0 !important; }
.mt-3        { margin-top: var(--s3); }
.mt-4        { margin-top: var(--s4); }
.mt-5        { margin-top: var(--s5); }
.mb-3        { margin-bottom: var(--s3); }
.mb-5        { margin-bottom: var(--s5); }
.ta-start    { text-align: start; }

/* شرَك الروبوتات في نماذج التسجيل العامة — مخفيٌّ عن العين، و
   `aria-hidden` على الحاوية يخفيه عن قارئ الشاشة أيضاً */
.field--trap { position: absolute; left: -9999px; }

/* تجميع حقول نموذجٍ طويل (استمارة التطوّع) بعنوانٍ فرعي — نفس هيئة
   `.section-title` عبر `<legend>` بدل `<div>`، بلا حدود المتصفّح
   الافتراضية لـ`fieldset` */
.field-group { border: 0; margin: 0; padding: 0; }
.field-group + .field-group { margin-top: var(--s6); }
.field-group > legend.section-title { width: 100%; padding: 0; }

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

.num { font-variant-numeric: tabular-nums; }

/* الأرقام والنصوص اللاتينية داخل نص عربي */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ───────────────────────────────────────────────────────────────
   4. الهيكل العام
   ─────────────────────────────────────────────────────────────── */
.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
}

.app--no-tabs { padding-bottom: 0; }

/*
 * ── سُلّم الكثافة ────────────────────────────────────────────
 * على جوال ٣٦٠ كان يظهر أربع كتل قبل التمرير، وأكثرها فراغ.
 * قُلّص الحشو الرأسي في الحاويات الكبرى (لا في أهداف اللمس — تلك
 * تبقى ≥٤٤px)، ويعود الاتساع على الشاشات الأوسع حيث المساحة موجودة.
 */
.main { flex: 1; padding-block: var(--s4) var(--s6); }
@media (min-width: 600px) { .main { padding-block: var(--s5) var(--s8); } }

/* ── الشريط العلوي ─────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  /* الارتفاع + النَتوء، والحشو يدفع المحتوى تحته لا فوقه */
  height: calc(var(--topbar-h) + var(--safe-t));
  padding-top: var(--safe-t);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding-inline: var(--s4);
  /* مشتقّ من الورق لا قيمة مثبَّتة — كان مثبَّتاً بكريميّ اللوحة القديمة،
     فلمّا جُرِّبت لوحة خضراء بقي الشريطان كريميَّين وظهر خطّ فاصل يفضحهما.
     والسطر الأول احتياط: لو لم يدعم المتصفّح color-mix سقط الإعلان
     كلّه وصار الشريط شفافاً يمرّ النصّ تحته. */
  /*
   * خلفيةٌ **معتمة** لا شفافة مطموسة.
   *
   * كان هنا `backdrop-filter: blur(14px)`. وطمسُ الخلفية على عنصرٍ
   * **ثابت** فوق محتوىً **يتمرّر** يُجبر المُركِّب على إعادة حساب الطمس
   * في **كل إطار** ما دام الإصبع يتحرّك — وهو أشيع سببٍ منفردٍ لتقطّع
   * التمرير على الويب في الجوال. ولا يُلاحَظ على الحاسوب، والتصميم
   * بُني على حاسوب.
   *
   * والفرق البصري أن ما تحت الشريط لم يعد يُرى مطموساً. والفرق في
   * الإحساس أن التمرير صار ينساب. (القياس في MOBILE.md §٣.)
   */
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--bg-surface) 82%, var(--bg-page)) 0%,
              var(--bg-page) 100%);
  border-bottom: 1px solid var(--border-soft);
}

/* خيط ذهبي يتلاشى عند الطرفين — يفصل الشريط دون خطّ صلب ثقيل */
.topbar::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft) 18%,
                              var(--accent) 50%, var(--accent-soft) 82%, transparent);
  opacity: .55;
  pointer-events: none;
}

.topbar__brand {
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--touch);          /* مساحة لمس كاملة */
  padding-inline: var(--s2);
  margin-inline-start: calc(var(--s2) * -1);
  border-radius: var(--r-md);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease);
}
.topbar__brand:active { background: var(--bg-surface-2); }

/*
 * الشعار كاملاً كما هو — بلا قصّ ولا تشويه.
 * ساقا المحراب تقفان على كلمة «مؤتة»، فقصّ السطر يبتر الساقين.
 * لذلك يُستعمل الملف الكامل المربّع، ويُقيَّد بالضلعين معاً.
 */
/*
 * الشعار في الشريط العلوي — صورةً، بطلب صاحب المشروع.
 *
 * ٤٢px لا ٣٦: الشعار مربّع يحمل قوساً وهلالاً وكلمتين، فالمساحة
 * الصغيرة تخنقه. والضلعان مقيَّدان معاً مع `object-fit: contain`
 * فلا يُشوَّه ولا يُقصّ مهما كانت نسبة الملف.
 */
/*
 * ٣.٥ — ٣٤px لا ٤٢، والظلّ يسقط.
 *
 * الشعار **باقٍ**: هو هوية البرنامج، وهذا موضعه الوحيد في كل صفحة.
 * لكنّ الدفعة الثانية أطفأت التدرّجات، فصار كلُّ ملوّنٍ يجذب العين —
 * وبقاؤه بمقاسه يجعله ينازع بطاقةَ عمل اليوم على أوّل نظرة.
 * وظلّه الذهبيّ سقط مع بقيّة الظلال الملوّنة في الدفعة نفسها.
 */
.topbar__mark {
  width: 34px; height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── العلامة المرسومة (SVG) — تبقى للمواضع الصغيرة جداً ──────
 * الشعار النقطي يطمس تحت ~٦٤px ولا يقبل القصّ (ساقا المحراب تقفان
 * على كلمة «مؤتة»)، فهذه علامة مبسّطة تقف وحدها وتَحدّ عند أي مقاس.
 * الأجزاء تأخذ ألوانها من متغيّرات النظام لا من قيم مثبّتة.
 */
.mark { display: block; flex-shrink: 0; overflow: visible; }

.mark__ink    { stroke: var(--text-1); fill: none; }
.mark__ink-f  { fill: var(--text-1); }
.mark__gold   { fill: var(--accent); }
.mark__gold-s { stroke: var(--accent); fill: none; }
.mark__cut    { fill: var(--bg-page); }

.topbar__word {
  display: flex; flex-direction: column; line-height: 1;
}
.topbar__word b {
  font-family: var(--font-title);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: .3px;
}
/*
 * ٣.٥ — «حفظ ومراجعة» من 9.5px إلى `--fs-xs`، ومن الذهبي إلى النصّ
 * الثانوي.
 *
 * كانت 9.5px مكتوبةً خارج السلّم عمداً، وتعليقها في الرموز يقول:
 * تسميتُها رمزاً تجعلها مقاساً معتمداً وهي **عطبُ مقروئية** — 2.85:1
 * على خلفية الشريط والمطلوب 4.5:1.
 *
 * وعولجت هنا لأن الشريط كلّه يُضبط في هذه الدفعة، وتركُها وحدها كان
 * يُبقي أصغر نصٍّ في البرنامج أقلَّه تبايناً. فصارت من السلّم (12px)
 * وعلى `--text-2`، وتباعدها أقلّ فلا يتمدّد السطر تحت الاسم.
 */
.topbar__word em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .2px;
  color: var(--text-2);
  margin-top: var(--s-half);
}

.topbar__actions { display: flex; align-items: center; gap: var(--s1); }

.icon-btn {
  width: var(--touch); height: var(--touch);
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
  flex-shrink: 0;
}
.icon-btn:active { background: var(--bg-surface-2); color: var(--text-1); }
.icon-btn svg { width: 22px; height: 22px; }

.icon-btn__dot {
  position: absolute; top: 9px; inset-inline-end: 9px;
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--danger); border: 2px solid var(--bg-page);
}

/* ── الشريط السفلي — قلب التنقل على الجوال ──────────────────── */
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--bg-surface);      /* معتم — لا طمس (انظر .topbar أعلاه) */
  border-top: 1px solid var(--border);
  box-shadow: var(--elev-up);
}

.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-half);
  min-height: var(--touch);
  font-size: var(--fs-xs);
  font-weight: 600;   /* كان 500 — وزنٌ لملفٍ كامل من أجل قاعدة واحدة */
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/*
 * ٣.٥ — خطٌّ على الحافّة بدل القرص الذهبي.
 *
 * كان قرصاً ذهبياً خلف الأيقونة، وحُجَّته أنه «أوضح من الخطّ الرفيع على
 * الشاشات الصغيرة» — وكانت صحيحةً يوم كانت الشاشة كلّها تدرّجاتٍ
 * وأقراصاً ذهبية. وقد هدأ ما حوله في الدفعتين الثانية والرابعة، فصار
 * القرص أثقل ملوَّنٍ باقٍ في الشاشة يشدّ العين إلى **مكانك** لا إلى
 * عملك. والخطّ يكفي حين لا ينافسه شيء.
 *
 * والحاسوب (≥1024) لا يتبع هذا: التبويب هناك صفٌّ في عمود جانبي،
 * وقاعدته أسفل الملفّ تجعل القرص خلفيةَ صفٍّ وسكّةً على حافّته.
 */
.tab::before {
  content: ''; position: absolute;
  top: 0; width: 46%; height: 2px;
  border-radius: 0 0 var(--r-3xs) var(--r-3xs);
  background: transparent;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  transform: none;
}
.tab svg { width: 23px; height: 23px; position: relative; transition: transform var(--dur) var(--ease); }
.tab span { position: relative; }

.tab.is-active { color: var(--accent-deep); font-weight: 700; }
.tab.is-active::before {
  background: var(--accent);
  transform: none;
}
.tab.is-active svg { transform: none; }

.tab__badge {
  position: absolute; top: 4px; inset-inline-end: calc(50% - 22px);
  min-width: 17px; height: 17px; padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--danger); color: var(--text-inverse);
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1;
  border-radius: var(--r-full);
  border: 1.5px solid var(--bg-surface);
}

/* ───────────────────────────────────────────────────────────────
   5. البطاقات
   ─────────────────────────────────────────────────────────────── */
.card {
  /* display صريح: البطاقة تُستعمل على <a> أيضاً، والرابط inline افتراضياً
     فتتفتّت خلفيته حول المحتوى بدل أن تحيط به. */
  display: block;
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  box-shadow: var(--elev-1);
  color: inherit;
}

.card--flat   { box-shadow: none; }
.card--gold   { border-color: var(--accent-soft); background: var(--accent-wash); }

/*
 * ── بطاقة الفعل الرئيسي ──────────────────────────────────────
 *
 * تصنيف البطاقات الذي أُجِّل من نظام التصميم: ثلاث درجات لا درجة
 * واحدة — `card--hero` فعلٌ رئيسي، و`card` بيانات، و`card--quiet` سياق.
 *
 * كانت بطاقة «وِرد اليوم» — وهي **أهمّ شيء في يوم الطالب** — بيضاء
 * بخطٍّ ذهبي علوي، أي بنفس وزن بطاقة «حسابك» تماماً. فلا تعرف العين
 * من أين تبدأ. وهذه ممتلئة بالذهب: أثقل سطحٍ في التطبيق، ولا يُمنح
 * إلا لفعلٍ واحد في الشاشة.
 */
.card--hero {
  background: var(--accent-grad);
  border-color: var(--accent-strong);
  color: var(--text-on-accent);
  box-shadow: var(--elev-accent);
}
.card--hero .section-title,
.card--hero .wird-range,
.card--hero .tiny,
.card--hero .bold { color: var(--text-on-accent); }
.card--hero .tiny { opacity: .78; }
/* الشريط العلوي المزخرف يذوب في السطح الممتلئ، فيُلغى */
.card--hero.card--accent::before { display: none; }
.card--hero.card--accent { padding-top: var(--s4); }

/*
 * ما يقع داخل البطاقة الممتلئة يجب أن يقلب ألوانه معها.
 * الحلقة مبنيّة على الذهبي وقلبها أبيض — فلو تُركت على سطحٍ ذهبي
 * لاختفى قوسها وذاب رقمها. القلب هنا يصير فاتحاً والقوس حبراً.
 */
.card--hero .ring {
  background: conic-gradient(from -90deg,
              var(--text-on-accent) calc(var(--p) * 3.6deg), rgba(255,255,255,.42) 0);
}
.card--hero .ring::before { background: var(--accent-soft); box-shadow: none; }
.card--hero .ring__val { color: var(--text-on-accent); }
.card--hero .ring__cap { color: var(--text-on-accent); opacity: .72; }
.card--hero .muted     { color: var(--text-on-accent); opacity: .55; }

/* سياق ثانوي — بلا حدود ولا ظلّ، يجلس على الورق */
.card--quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0;
}
/*
 * بطاقة وِرد اليوم. سطحها **ذهبي** وشريطها العلوي وعلامتها خضراوان:
 * الذهبي يقول «هذا وِردك» والأخضر يقول «أُنجز». ولو صار الاثنان ذهباً
 * لضاعت إشارة الإتمام، ولو صار السطح أخضر لأغرق الأخضرُ الشاشة.
 *
 * ولا يُبدَّل `--olive-light` نفسه هنا: هو رمز «محفوظ» في خريطة
 * المصحف، وتبديله يُسقط مفتاحها ويجعل المحفوظ ووِرد اليوم لوناً واحداً.
 */
.card--olive  { border-color: var(--accent-soft); background: var(--accent-wash); }
.card--clay   { border-color: var(--danger-border); background: var(--danger-soft); }
.card--tap    { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--tap:active { transform: scale(.985); box-shadow: var(--elev-1); }

/* ٣.٥ — الشريط اللونيّ العلويّ يسقط عن البطاقات كما سقط عن الأرقام:
   تصنيفٌ بلمحة بصر يحتاج أن يكون معناه واحداً في كل صفحة، ولم يكن.
   والصنف باقٍ لأن القوالب تستعمله، وحدُّ البطاقة ولونُ سطحها
   (`card--olive` · `card--clay`) يكفيان تصنيفاً. */
.card--accent { padding-top: var(--s4); }

.card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
}
.card__title {
  font-size: var(--fs-md); font-weight: 700; color: var(--text-1);
}
.card__sub { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-half); }

/*
 * قائمة أشخاص — بطاقة واحدة تحوي صفوفاً يفصلها خيط رفيع.
 * أكثف من بطاقة مستقلة لكل طالب، والمعلّم قد يرى مئة اسم في الشاشة.
 */
.list {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  overflow: hidden;
}

.list__row {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  min-height: 64px;
  padding: var(--s2) var(--s4);
  color: inherit;
  transition: background var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.list__row:active { background: var(--bg-surface-2); }

/* الفاصل يبدأ بعد الصورة الرمزية لا من حافة البطاقة */
.list__row + .list__row::before {
  content: ''; position: absolute; top: 0;
  inset-inline-start: calc(var(--s4) + 38px + var(--s3));
  inset-inline-end: 0;
  height: 1px; background: var(--border-soft);
}

/* قائمة بلا صور رمزية — الفاصل يبدأ من حافة الحشو */
.list--flush .list__row + .list__row::before { inset-inline-start: var(--s4); }

.list__name { display: block; font-weight: 700; }
.list__meta { display: block; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

/*
 * ── صفّ فيه هويّة وحالة وفعل ─────────────────────────────────
 *
 * الصفّ الواحد في شاشة التسميع يحمل خمسة أشياء: صورة رمزية واسم
 * وسطر بيانات وشارة حالة وزرّ. وعلى عرض ٣٦٠px لا تتّسع لها سطرٌ
 * واحد، **فيُبتر اسم الطالب** — وقد بُتر فعلاً: «أحمد مح…».
 *
 * والبتر لم يكن يظهر في أي فحص لأن الشطب بالنقاط يستره بأناقة.
 * (أُضيف الآن كاشفٌ له في cdp.mjs يقيس scrollWidth لا الشكل.)
 *
 * فصار الصفّ طبقتين على الجوال: الهوية سطراً كاملاً، والحالة والفعل
 * تحتها. ويعود سطراً واحداً حين يتّسع العرض فعلاً. الاسم لا يُبتر أبداً.
 */
.list__row--split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "who main" "side side";
  gap: var(--s2) var(--s3);
  align-items: center;
  padding-block: var(--s3);
}
.list__row--split > .avatar { grid-area: who; align-self: start; }
.list__row--split .row__main { grid-area: main; min-width: 0; }
.list__row--split .row__side {
  grid-area: side;
  display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap;
}
/* الفعل إلى آخر السطر، فيقع تحت الإبهام في مكان ثابت */
.list__row--split .row__side > .btn { margin-inline-start: auto; }

@media (min-width: 480px) {
  .list__row--split {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "who main side";
  }
  .list__row--split > .avatar { align-self: center; }
}
.list__row .icon { color: var(--text-3); width: 18px; height: 18px; }

/*
 * منطقة تمرير أفقي **محصورة**.
 * قاعدة المشروع أن الصفحة لا تُمرَّر أفقياً أبداً؛ أما محتوى عريض بطبيعته
 * (كمعاينة ملف المستخدم الخام) فيُمرَّر داخل حاويته وحدها.
 */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--s4) * -1);
  padding-inline: var(--s4);
}

.table {
  border-collapse: collapse;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.table th, .table td {
  padding: var(--s2) var(--s3);
  text-align: start;
  border-bottom: 1px solid var(--border-soft);
}
.table th {
  font-weight: 700;
  color: var(--text-2);
  background: var(--bg-surface-2);
  position: sticky; top: 0;
}
.table tbody tr:last-child td { border-bottom: none; }

/* رابط الرجوع — بمساحة لمس كاملة */
.back-link {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: var(--touch);
  padding-inline-end: var(--s3);
  margin-inline-start: calc(var(--s2) * -1);
  padding-inline-start: var(--s2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
}
.back-link:active { background: var(--bg-surface-2); }
.back-link .icon { width: 18px; height: 18px; }

/* عنوان الصفحة — بخط العنوان وخطّ ذهبي تحته */
.page-head {
  margin-bottom: var(--s4);
}
@media (min-width: 600px) { .page-head { margin-bottom: var(--s5); } }
.page-head h1 {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-1);
}
/*
 * ٣.٥ — الخطّ الذهبي تحت عنوان الصفحة يسقط.
 *
 * كان في البرنامج **نظاما عناوين**: صفحةٌ بخطٍّ ذهبيّ تحتها، وقسمٌ
 * بشارة قوسٍ قبله — ولا يقول أيٌّ منهما أيّهما أعلى، فيقعان في صفحةٍ
 * واحدة كزخرفتين متنافستين لا كدرجتين. والمقاس وحده يكفي للتفريق:
 * `--fs-2xl` بأميري لا يُخلط بشيء دونه.
 */
.page-head p { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s2); }

/* عنوان بزر فعل بجانبه — الزر يُحاذي أسفل العنوان لا وسطه */
.page-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s3);
}

/*
 * عنوان القسم — الدرجة الثانية، ونظامها غير نظام الصفحة صراحةً.
 *
 * كان أميري 18px بشارة قوسٍ ذهبية: قريبٌ من عنوان الصفحة مقاساً
 * وخطّاً، فيُقرآن نِدَّين. وصار **لافتةً** لا عنواناً — 13px من خطّ
 * المتن على لون النصّ الثانوي، وخطٌّ يمتدّ منه إلى آخر السطر فيقسم
 * الصفحة بلا أن يزاحم ما تحته.
 *
 * والخطّ من `currentColor` لا من `--border`: العنوان يقع أيضاً داخل
 * البطاقة الذهبية الممتلئة، فيقلب لونه معها بلا قاعدةٍ ثانية.
 */
.section-title {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--text-2);
  margin-bottom: var(--s3);
}
.section-title::after {
  content: ''; flex: 1; height: 1px;
  background: currentColor; opacity: .28;
}

/* ───────────────────────────────────────────────────────────────
   5.5 اللوحة الترحيبية والإحصاءات
   ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--s4);
  background: var(--accent-wash);
  border: 1px solid var(--accent-soft);
}
@media (min-width: 600px) { .hero { padding: var(--s5); } }
/*
 * النقش الهندسي — حاضرٌ لا خجول.
 * كان بشفافية ١٠٪ فوق خطٍّ شعري (٠٫٧px)، فلا يكاد يُرى: زخرفةٌ دفعنا
 * ثمنها ولم نقبض أثرها. غُلّظ الخطّ ورُفعت الشفافية حتى يُقرأ نقشاً
 * إسلامياً متشابكاً، ويبقى تحت النصّ لا يزاحمه.
 */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pattern);
  opacity: .17;
  pointer-events: none;
}
/*
 * قوس محراب شبحي في زاوية اللوحة.
 * مثبَّت من الأسفل وخارجَه، فلا تظهر قاعدته المستقيمة كحافّة دخيلة —
 * لا يُرى منه إلا انحناء القبّة.
 */
.hero::after {
  content: ''; position: absolute;
  bottom: -46px; inset-inline-start: -34px;
  width: 148px; height: 168px;
  background: var(--accent);
  opacity: .06;
  -webkit-mask: var(--arch-mask) center/100% 100% no-repeat;
  mask: var(--arch-mask) center/100% 100% no-repeat;
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__date {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .4px;
  /* ٤.٤ — 12px على `--accent-wash`: كان 2.86:1، وصار 5.34:1 (الرموز) */
  color: var(--accent-deep);
  margin-bottom: var(--s3);
}
.hero__name {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-1);
}
.hero__role { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-half); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.stat {
  position: relative; overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s2);          /* كانت s4 — رقمٌ واحد لا يستحقّ ١١٠px */
  box-shadow: var(--elev-1);
  text-align: center;
  color: inherit;
  display: block;
}
@media (min-width: 600px) { .stat { padding: var(--s4) var(--s3); } }
/*
 * ٣.٥ — الشريط اللونيّ العلويّ يسقط عن الأرقام.
 *
 * كان يعني في «اليوم» تصنيفاً، وفي «التقارير» تحذيراً، وفي «متابعتي»
 * ثالثاً — فإشارةٌ تقول ثلاثة أشياء ليست إشارة. وفوق ذلك كانت البطاقة
 * الوسطى في «اليوم» بشريطٍ بلا لون (`--stat--quiet`) بجانب أخضرَ
 * وذهبيّ، فتُقرأ حالةً ثالثة وهي ليست حالة.
 *
 * ولا يضيع بذلك معنى: `--olive/--clay/--quiet` تلوّن **الرقم نفسه**
 * أصلاً (أسفله)، وهو الذي تقرؤه العين لا شريطٌ في الحافّة.
 */

.stat__num {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.stat--olive .stat__num { color: var(--success-strong); }
.stat--clay  .stat__num { color: var(--danger-strong); }
.stat--quiet .stat__num { color: var(--text-3); }
.stat__cap { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s-half); }

/*
 * حلقة تقدّم — النسبة تُمرَّر بمتغيّر --p (من 0 إلى 100) من PHP.
 * conic-gradient يغني عن SVG ومكتبة رسم كاملة.
 */
.ring {
  --p: 0;
  width: 108px; height: 108px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  margin-inline: auto;
  background: conic-gradient(from -90deg,
              var(--accent) calc(var(--p) * 3.6deg), var(--bg-surface-2) 0);
  position: relative;
}
.ring::before {
  content: ''; position: absolute; inset: 10px;
  border-radius: var(--r-full);
  background: var(--bg-surface);
  box-shadow: inset 0 1px 3px rgba(40,32,10,.07);
}
.ring__box { position: relative; text-align: center; line-height: 1.2; }
.ring__val {
  font-family: var(--font-title);
  font-size: var(--fs-2xl); font-weight: 700;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.ring__cap { font-size: var(--fs-xs); color: var(--text-3); }
.ring--sm { width: 88px; height: 88px; flex-shrink: 0; }
.ring--sm::before { inset: 8px; }
.ring--sm .ring__val { font-size: var(--fs-xl); }
.ring--olive { background: conic-gradient(from -90deg,
               var(--success) calc(var(--p) * 3.6deg), var(--bg-surface-2) 0); }
.ring--olive .ring__val { color: var(--success-strong); }

/* ── وِرد اليوم وخريطة المصحف ───────────────────────────────── */

/* نطاق الوِرد — أكبر عنصر في شاشة الطالب لأنه أول ما يبحث عنه */
.wird-range {
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--accent-deep);
  padding-block: var(--s2);
}

/* علامة إنجاز */
.tick {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--success-grad);
  color: var(--text-inverse);
}
.tick svg { width: 22px; height: 22px; }

/*
 * خريطة المصحف — ٦٠٤ وجه.
 * شبكة تلقائية: تتّسع للجوال بأربعة أعمدة وللحاسوب بعشرة، بلا نقاط
 * توقّف مكتوبة يدوياً لكل مقاس.
 */
/*
 * ── شبكة الأوجه ──────────────────────────────────────────────
 *
 * كانت الخلية ٣٨px فتُعطي ستّ خانات في الصفّ على جوال ٣٦٠ — أي أكثر
 * من مئة صفٍّ لختم المصحف، فتقرأ الخريطة كأنها متتبّع عادات لا مصحف.
 * الخلية الآن ٢٧px ⇒ نحو إحدى عشرة خانة، فيصير الجزء صفَّين لا أربعة
 * ويُرى المصحف كلّه في نصف التمرير. والرقم يبقى مقروءاً بأرقام جدولية.
 */
/*
 * ٣.٥ — أكثر شبكةٍ ازدحاماً في البرنامج تتنفّس.
 *
 * كانت 604 خليّةً بمقاس 27px وأرقامها `--fs-2xs` (10px) — أصغر مقاسٍ
 * في السلّم كلّه، ومعرَّفٌ للشارة العدديّة لا لرقمٍ يُقرأ ويُضغط. وعلى
 * 375 تنزل الخليّة إلى ~14px فعلياً، فلا الرقم يُقرأ ولا الهدف يُصاب.
 *
 * فالخليّة 38px حدّاً أدنى، والرقم `--fs-sm`، و`aspect-ratio` يسقط
 * لصالح `min-height`: النسبة المربّعة كانت تقيّد الارتفاع بالعرض،
 * فتضيق الخليّة كلّما ضاق العمود.
 *
 * والحالات الأربع يفرّقها **الحدّ واللون معاً**: الحالة المحايدة كانت
 * بحدٍّ شفّاف تعتمد على تمييز درجتَي بيج، وقد قارب سطحها الأبيض في
 * الدفعة الأولى فذهب الفرق كلّه.
 */
.pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 6px;
}

.pg {
  display: grid; place-items: center;
  min-height: 34px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--bg-surface-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.pg--fresh { background: var(--success-soft); color: var(--success-strong); border-color: var(--success-border); }
.pg--stale { background: var(--danger-soft);  color: var(--danger-strong);  border-color: var(--danger-border); }
/* وِرد اليوم كان ذهباً مصمتاً بنصٍّ داكن — أصرخُ خليّةٍ في شبكةٍ من ستّمئة.
   وهو **حالة** لا فعل، فيكفيه سطحُ الذهب الفاتح وحدُّه كبقيّة الحالات. */
.pg--wird  { background: var(--accent-wash);  color: var(--accent-deep);   border-color: var(--accent-soft); }

/*
 * ── الجزء قسمٌ يُطوى ─────────────────────────────────────────
 * ثلاثون جزءاً مفتوحة دائماً تمريرٌ طويل بلا داعٍ؛ ومن أتمّ جزءاً لا
 * يحتاج أن يراه في كل مرّة. <details> يفعلها بلا سطر جافاسكربت واحد،
 * ويعمل إن تعطّل السكربت.
 */
.juz { margin-top: var(--s3); }
.juz__head {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--touch);
  padding: var(--s2) var(--s4);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.juz__head::-webkit-details-marker { display: none; }
.juz:not([open]) .juz__head { border-radius: var(--r-lg); }
.juz__head:active { background: var(--bg-surface-2); }
.juz__name { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-md); }
.juz__bar  { flex: 1; min-width: 40px; }
/* السهم يدور مع الفتح فيُعرف الحال بلمحة */
.juz__caret {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--text-3);
  transition: transform var(--dur) var(--ease);
}
.juz[open] .juz__caret { transform: rotate(-90deg); }
.juz__body { padding: 0 var(--s4) var(--s4); }

/*
 * مفتاح الألوان — شريطٌ لاصق لا بطاقة.
 *
 * كان أربع حالات تلتفّ على سطرين داخل بطاقة كاملة، فيأخذ من أعلى
 * الشاشة قدر جزءٍ كامل من الخريطة. والمفتاح مرجعٌ يُعاد إليه أثناء
 * التمرير لا عنوانٌ يُقرأ مرّة، فالأولى أن يبقى ظاهراً ويصغُر.
 */
.legend {
  /* `--topbar-now` لا `--topbar-h`: الأولى تحسب النَتوء وتتبع الشريط
     حين ينزلق مع التمرير. تعريفها في §١٣ب. */
  position: sticky; top: var(--topbar-now); z-index: 20;
  transition: top .22s var(--ease);
  display: flex; flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);
  font-size: var(--fs-xs); color: var(--text-2);
  background: var(--bg-surface);      /* معتم — لا طمس (انظر .topbar أعلاه) */
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.legend__item { display: inline-flex; align-items: center; gap: 5px; }
/* `min-height` يُصفَّر هنا: الخليّة كبرت إلى 34px، ومفتاحُها مربّعٌ 13px
   لا خليّةٌ مصغَّرة — ولولاه لصار المفتاح بارتفاع الخليّة نفسها. */
.legend .pg { width: 13px; height: 13px; min-height: 0; border-radius: var(--r-2xs); }

/* اختيار أيام الأسبوع — سبعة أزرار بمساحة لمس كاملة */
.day-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: var(--s2);
}
.day { position: relative; -webkit-tap-highlight-color: transparent; }
.day input { position: absolute; opacity: 0; width: 0; height: 0; }
.day span {
  display: grid; place-items: center;
  min-height: var(--touch);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.day input:checked + span {
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.day input:focus-visible + span { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-ring); }

/* ───────────────────────────────────────────────────────────────
   5.7 مفردات الرسم — تُستعمل في شاشات الطالب والتقارير معاً
   ─────────────────────────────────────────────────────────────── */

/*
 * خريطة النشاط — مربّع لكل يوم، شدّة اللون بقدر العمل.
 * أسرع طريقة يرى بها الطالب انضباطه: الفجوات تظهر بيضاء بلا قراءة رقم.
 */
.heat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13px, 1fr));
  gap: 4px;
  direction: ltr;                 /* الزمن يمشي يساراً→يميناً كالتقويم */
}
.heat__cell {
  aspect-ratio: 1;
  border-radius: var(--r-3xs);
  background: var(--bg-surface-2);
  box-shadow: inset 0 0 0 1px rgba(40,32,10,.05);
}
.heat__cell--1 { background: var(--heat-1); }
.heat__cell--2 { background: var(--heat-2); }
.heat__cell--3 { background: var(--heat-3); }
.heat__cell--4 { background: var(--heat-4); }
.heat__cell--miss { background: var(--danger-soft); }
.heat__cell--today { box-shadow: 0 0 0 2px var(--text-3); }

.heat-legend {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: var(--text-3);
  margin-top: var(--s3);
}
.heat-legend i {
  width: 11px; height: 11px; border-radius: var(--r-3xs);
  background: var(--bg-surface-2); display: inline-block;
}
/* عيّنات المفتاح تأخذ ألوان الدرجات نفسها */
.heat-legend i.heat__cell--1 { background: var(--heat-1); }
.heat-legend i.heat__cell--2 { background: var(--heat-2); }
.heat-legend i.heat__cell--3 { background: var(--heat-3); }
.heat-legend i.heat__cell--4 { background: var(--heat-4); }
.heat-legend i.heat__cell--miss { background: var(--danger-soft); }

/*
 * صفّ مقارنة — اسم وشريط ورقم. عمود الفقرات في التقارير كلها.
 */
.meter { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); align-items: center; }
.meter__name { font-size: var(--fs-sm); font-weight: 600; min-width: 0; }
.meter__val  { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.meter__track {
  grid-column: 1 / -1;
  height: 7px; border-radius: var(--r-full);
  background: var(--bg-surface-2);
  overflow: hidden;
  margin-top: -2px;
}
.meter__fill { height: 100%; border-radius: var(--r-full); background: var(--accent-grad); }
.meter__fill--olive { background: var(--success-grad); }
.meter__fill--clay  { background: var(--danger-grad); }
.meter + .meter { margin-top: var(--s4); }

/*
 * وسام — للسلاسل والمراتب. الرقم داخل قرص مزخرف.
 */
.award {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s1) var(--s1);
  border-radius: var(--r-full);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.award__disc {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--accent-grad);
  color: var(--text-on-accent);
  font-weight: 700; font-size: var(--fs-sm);
  font-family: var(--font-title);
}
.award__disc svg { width: 16px; height: 16px; }
.award--olive .award__disc { background: var(--success-grad); color: var(--text-inverse); }
.award--quiet .award__disc { background: var(--bg-surface-2); color: var(--text-3); }
.award__text { font-size: var(--fs-sm); font-weight: 600; }

/* مراتب لوحة الشرف — الثلاثة الأُوَل تُميَّز */
.rank {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-family: var(--font-title);
  font-weight: 700; font-size: var(--fs-base);
  background: var(--bg-surface-2);
  color: var(--text-2);
}
.rank--1 { background: var(--rank-1); color: var(--rank-1-text); box-shadow: 0 2px 8px -2px rgba(196,135,10,.55); }
.rank--2 { background: var(--rank-2); color: var(--rank-2-text); }
.rank--3 { background: var(--rank-3); color: var(--rank-3-text); }

/*
 * منصّة الأوائل — الأول في الوسط وأعلى، والثاني والثالث جانبَيه.
 * ترتيب الصفّ في HTML هو ٢ ← ١ ← ٣ فيقرأ الترتيب صحيحاً بلا اعتماد
 * على اتجاه الصفحة.
 */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: var(--s2);
  text-align: center;
}
.podium__place {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0;
}
.podium__place .avatar { margin-bottom: var(--s-half); }

/*
 * الاسم يلتفّ ولا يُبتر. عمود المنصّة ثلث العرض (~١١٠px على جوال
 * ٣٦٠)، والأسماء الرباعية لا تسعه — وبَتْرُ اسمِ إنسان أسوأ من سطرين.
 */
.podium__name {
  font-size: var(--fs-xs); font-weight: 700;
  max-width: 100%;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.podium__pts {
  font-family: var(--font-title);
  font-size: var(--fs-lg); font-weight: 700;
  /*
   * ٤.٤ — 18px عريضاً **ليس نصّاً كبيراً**: حدّ WCAG 18.66px (14pt)
   * للعريض، فينقصه ٠٫٦٦. وصاحبُ المرتبة الأولى وحده 28px، لكن
   * القاعدة واحدة للثلاثة — ولونان لثلاث مراتب متجاورة عطبٌ آخر.
   */
  color: var(--accent-deep);
  line-height: 1;
}
.podium__place--1 .podium__pts { font-size: var(--fs-2xl); }

/*
 * القاعدة — هي التي تجعلها منصّة.
 *
 * كانت ثلاث دوائر بارتفاعات شبه متساوية بلا درجات، فلا تُقرأ منصّةً
 * أصلاً؛ ورقمُ المركز شارةٌ سابحة بينها. الآن لكل مركز درجةٌ بارتفاعه،
 * ورقمه محفور عليها. و`align-items: end` يجعل الدرجة الأعلى ترفع
 * عمودها كلّه — فيقرأ الترتيب من الشكل قبل الرقم.
 *
 * وعند التعادل تتساوى الدرجتان ارتفاعاً ولوناً — وهو الصدق بعينه.
 */
.podium__step {
  margin-top: 6px;
  width: 100%;
  display: grid; place-items: center;
  border-radius: 10px 10px 0 0;
  font-family: var(--font-title);
  font-size: var(--fs-lg);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.podium__place--1 .podium__step { height: 56px; background: var(--rank-1); color: var(--rank-1-text); }
.podium__place--2 .podium__step { height: 40px; background: var(--rank-2); color: var(--rank-2-text); }
.podium__place--3 .podium__step { height: 30px; background: var(--rank-3); color: var(--rank-3-text); }

/* إطار مذهَّب حول عنصر مميّز */
/*
 * إطار مذهَّب — «فِلِّيت» مزدوج كإطارات المصاحف المخطوطة:
 * خطٌّ خارجي ثم فراغ ثم خطٌّ داخلي، يدوران مع الانحناء نفسه.
 *
 * كان قبله زاويتان معلَّقتان على بُعد ٨px من الحافة، لا تلمسان شيئاً
 * ولا تُكمِلان شكلاً — فتُقرآن خطأً في الرسم لا زينة. والزخرفة التي
 * تُشكّ فيها أسوأ من عدمها.
 */
.frame {
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--s5);
  background: var(--bg-surface);
  box-shadow:
    inset 0 0 0 1px var(--accent-soft),
    inset 0 0 0 4px var(--bg-surface),
    inset 0 0 0 5px var(--accent-soft),
    var(--elev-1);
}

/* فاصل مزخرف بين الأقسام */
.ornament {
  display: flex; align-items: center; gap: var(--s3);
  margin-block: var(--s6);
}
.ornament::before, .ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.ornament span {
  width: 7px; height: 7px; flex-shrink: 0;
  transform: rotate(45deg);
  background: var(--accent-soft);
  border-radius: 1px;
}

/* ───────────────────────────────────────────────────────────────
   6. الأزرار
   ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--touch);
  padding: 0 var(--s5);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }

.btn--primary {
  background: var(--accent-grad); color: var(--text-on-accent);
  box-shadow: var(--elev-accent);
}
.btn--primary:active { background: var(--accent-strong); }

/* آخر تدرّجٍ بقي على زرّ — سقط كما سقطت أخواته في الدفعة الثانية */
.btn--ink     { background: var(--ink); color: var(--text-inverse); }
.btn--olive   { background: var(--success-grad); color: var(--text-inverse); }

/*
 * ٣.٥ — حدود الأزرار تدخل نظام الخيط الشعري.
 *
 * كانت 1.5px بينما البطاقة والشارة والمجرى كلّها 1px بعد الدفعات
 * ٤ و٥ و٦ — فيخرج الزرّ الثانوي أثقل حدّاً من البطاقة التي يجلس فيها،
 * وهو أخفض منها رتبةً. والقيمة واحدة في اثني عشر موضعاً: الأزرار
 * والشرائح ومربّعات الأيام، فتغيّرت كلّها معاً كي لا ينكسر النظام
 * في نصفه.
 */
.btn--outline {
  background: var(--bg-surface); color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn--outline:active { background: var(--bg-surface-2); }

.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:active { background: var(--bg-surface-2); }

/*
 * ── زرّ الصفّ المتكرّر ──────────────────────────────────────────
 *
 * قاعدة: **فعلٌ رئيسي واحد في الشاشة**. والتدرّج الذهبي الممتلئ
 * (`btn--primary`) محجوز له وحده — «حفظ التسميع» في الورقة، «دخول»،
 * «أنجزت وِردي».
 *
 * أما الزرّ الذي يتكرّر في كل صفّ فليس فعلاً رئيسياً واحداً بل عشرة.
 * كانت قائمة التسميع خمسة أزرار ذهبية ممتلئة تنزل الشاشة، فصار
 * الذهبي بلا معنى: حين يصرخ كل شيء لا يُسمع شيء. ووحدةُ الانتباه في
 * القائمة هي **الصفّ** لا الزرّ؛ والشارة تحمل الحالة، والزرّ يحمل
 * إمكان الفعل فحسب — فيكفيه أن يبدو قابلاً للّمس.
 */
.btn--soft {
  background: var(--accent-wash);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.btn--soft:active { background: var(--accent-soft); }

.btn--danger { background: var(--danger-grad); color: var(--text-inverse); }

.btn--full  { width: 100%; }
.btn--lg    { min-height: 54px; font-size: var(--fs-lg); border-radius: var(--r-lg); }

/* «صغير» بصرياً فقط — مساحة اللمس تبقى 44px كاملة */
.btn--sm    { min-height: var(--touch); padding-inline: var(--s4);
              font-size: var(--fs-sm); border-radius: var(--r-md); }
.btn--sm svg { width: 17px; height: 17px; }

.btn:disabled, .btn.is-loading { opacity: .55; pointer-events: none; }

.btn.is-loading::after {
  content: ''; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: var(--r-full);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────────────────────────────────────────────
   7. النماذج
   ─────────────────────────────────────────────────────────────── */
.field { display: block; }
.field + .field { margin-top: var(--s4); }

.label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--s2);
}
.label__req { color: var(--danger); }

/* حجم الخط 16px إجباري — أقل منه يجعل iOS يكبّر الشاشة عند التركيز */
.input {
  display: block; width: 100%;
  min-height: 50px;
  padding: 0 var(--s4);
  font-size: var(--fs-md);
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
/*
 * ٤.٣ — `outline: none` سقط من هنا (D-6).
 *
 * كان يُلغي الحلقة ويضع مكانها حدّاً ذهبياً وهالةً بشفافية ٢٤٪ —
 * والهالة تقيس 1.19:1 والحدّ 2.15:1، فالبديل أضعف من المُلغى. وهو
 * على **كل حقلٍ في البرنامج**.
 *
 * والحدّ والهالة باقيان: هما الإحساس بالحياة تحت الإصبع. وما تغيّر
 * أنّهما لم يعودا **العلامة**، فالحلقة من `:focus-visible` أعلاه
 * تعلوهما وتحمل الشرط.
 */
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.input::placeholder { color: var(--text-3); }
.input:disabled { background: var(--bg-surface-2); color: var(--text-3); }

textarea.input { min-height: 92px; padding-block: var(--s3); resize: vertical; line-height: 1.7; }
select.input {
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: left var(--s4) center;
  padding-inline-start: var(--s4);
  padding-inline-end: var(--s8);
}

.input--error { border-color: var(--danger); }
.input--error:focus { box-shadow: 0 0 0 3px rgba(181,84,46,.14); }

.field__error {
  display: block;
  font-size: var(--fs-sm);
  color: var(--danger);
  margin-top: var(--s2);
}
.field__hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: var(--s2);
}

/*
 * حقلان جنباً إلى جنب — ينزلان فوق بعض تلقائياً حين يضيق العرض.
 * حقل التاريخ الأصلي يحتاج ~١٧٠px ليُظهر dd/mm/yyyy مع أيقونته؛ ودونها
 * يقصّ المتصفح السنة بلا تحذير، فيقرأ المستخدم تاريخاً ناقصاً.
 */
.field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s3);
}
.field-pair .field { margin: 0; }

.input[type="date"] { padding-inline: var(--s3); }

/*
 * اختيار من عدّة، معروضٌ كلّه دفعةً واحدة (نوع التسميع مثلاً).
 *
 * وليس قائمةً منسدلة: الخيارات ثلاثة، والقائمة تُخفيها خلف ضغطة وتُخفي
 * معها أن ثمّة خياراً غير المعروض أصلاً — والنوع هنا يغيّر بقية النموذج،
 * فإخفاؤه يجعل تغيّر الحقول يبدو عطلاً.
 *
 * والزرّ نفسه هو `input` مخفيّ داخل `label`، فيبقى الاختيار بلوحة
 * المفاتيح وقارئ الشاشة كما هو بلا سطر جافاسكربت.
 */
.seg {
  display: flex;
  gap: var(--s-half);
  padding: var(--s-nudge);
  background: var(--bg-surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
}
.seg__opt { flex: 1 1 0; min-width: 0; }
.seg__opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.seg__opt span {
  display: block;
  padding: 10px var(--s2);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  border-radius: calc(var(--r-md) - 4px);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.seg__opt input:checked + span {
  background: var(--bg-surface);
  color: var(--accent-deep);
  box-shadow: 0 1px 3px rgba(30,27,18,.10);
}
/* حلقة التركيز على البديل المرئيّ — الحقل نفسه لا يُرى فلا تُرى حلقته */
.seg__opt input:focus-visible + span {
  outline: 2px solid var(--accent-deep);   /* ٤.٣ — كما في القاعدة العامّة */
  outline-offset: 1px;
}

/*
 * صفّ مفتاح تشغيل/إطفاء — للإعدادات.
 *
 * الصفّ كلّه `label`، فاللمس في أي موضع منه يبدّل الخيار. ومساحة اللمس
 * على الجوال هي الصفّ لا المفتاح الصغير في طرفه.
 */
.switch-row {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.switch-row + .switch-row { border-top: 1px solid var(--border-soft); }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch-row__body  { flex: 1 1 auto; min-width: 0; }
.switch-row__label { display: block; font-weight: 600; }
.switch-row__hint  { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-nudge); line-height: 1.7; }

.switch {
  flex: 0 0 auto;
  width: 46px; height: 28px; margin-top: var(--s-half);
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
}
.switch::after {
  content: ''; position: absolute;
  top: var(--s-nudge); inset-inline-start: var(--s-nudge);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-surface);
  box-shadow: 0 1px 3px rgba(30,27,18,.22);
  transition: transform var(--dur) var(--ease);
}
.switch-row input:checked ~ .switch {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-strong);
}
/* المسافة منطقية لا يمينية — يعمل في RTL وLTR معاً */
.switch-row input:checked ~ .switch::after { transform: translateX(-18px); }
:root:dir(ltr) .switch-row input:checked ~ .switch::after { transform: translateX(18px); }

.switch-row input:focus-visible ~ .switch { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/*
 * أبواب العمل في الصفحة الأولى — شبكةٌ من مربّعين في الصفّ.
 *
 * حلّت محلّ بطاقة «حسابك» التي كانت تكرّر تبويباً كاملاً. وهذه
 * الأبواب كانت مبنيّةً ومدفونة: سأل صاحب المشروع «من وين أصدّر
 * التقارير؟» وهي تعمل منذ أسابيع.
 */
.quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--s4);
}
.quick__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 92px;
  padding: var(--s3);
  text-align: center;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-1);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(30,27,18,.04);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quick__item svg { width: 24px; height: 24px; color: var(--accent-strong); }
.quick__item:active { background: var(--accent-wash); transform: scale(.98); }

/* مؤشّر السحب للتحديث — يخرج من تحت الشريط العلوي وينزلق مع الإصبع */
.pull {
  position: fixed; z-index: 30;
  top: calc(var(--topbar-h) + var(--safe-t) - 46px);
  inset-inline: 0;
  display: flex; justify-content: center;
  pointer-events: none;
  transition: transform var(--dur) var(--ease);
}
.pull__spin {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--accent);
  border-top-color: transparent;
  box-shadow: 0 3px 10px rgba(30,27,18,.18);
}
.pull.is-loading .pull__spin { animation: pull-spin .7s linear infinite; }
@keyframes pull-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pull__spin { animation: none !important; }
}

/*
 * سطر الترحيب — بديل بطاقة `hero` التي كانت تأخذ خُمس الشاشة الأولى.
 * لا خلفية ولا حدّ ولا صورة: نصٌّ يقول اليوم ومن أنت، ثم يُخلي المكان.
 */
.greet { margin-bottom: var(--s4); }
.greet__name {
  font-family: var(--font-title);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
}
.greet__date {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: var(--s-half);
}

/* ───────────────────────────────────────────────────────────────
   قائمة الحساب — تنسدل من الصورة في الشريط العلوي
   ─────────────────────────────────────────────────────────────── */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary::marker { content: ''; }

/*
 * الغطاء يملأ الشاشة خلف القائمة، فالضغط في أي موضع يغلقها — وهو ما
 * يفعله المستخدم غريزياً. و`::before` على `summary` وهي مفتوحة يكفي
 * بلا عنصرٍ إضافي في الصفحة.
 */
.usermenu[open] > summary::before {
  content: ''; position: fixed; inset: 0; z-index: 1;
}

.usermenu__panel {
  position: absolute; z-index: 2;
  top: calc(100% + var(--s2));
  inset-inline-end: 0;
  min-width: 244px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(30,27,18,.16), 0 2px 6px rgba(30,27,18,.08);
  overflow: hidden;
  animation: menu-in var(--dur) var(--ease);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .usermenu__panel { animation: none; }
}

.usermenu__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--accent-wash);
  border-bottom: 1px solid var(--border-soft);
}
.usermenu__name {
  display: block; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usermenu__sub { display: block; font-size: var(--fs-xs); color: var(--text-3); }

.usermenu__item {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  /* ٤٨ لا ٤٤: الحدّ الأدنى يُقاس **بعد** الحدود، وحدُّ السطر يأكل بكسلين */
  min-height: 48px;
  padding: var(--s2) var(--s4);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-1);
  background: none; border: 0; cursor: pointer;
  text-align: start;
  -webkit-tap-highlight-color: transparent;
}
.usermenu__item + .usermenu__item,
.usermenu form .usermenu__item { border-top: 1px solid var(--border-soft); }
.usermenu__item svg { width: 18px; height: 18px; flex: none; color: var(--text-3); }
.usermenu__item:active { background: var(--bg-surface-2); }
.usermenu__item--danger { color: var(--danger-strong); }
.usermenu__item--danger svg { color: var(--danger); }
.usermenu__item .badge { margin-inline-start: auto; }

/* حقل بزر داخلي (إظهار كلمة المرور) */
.input-group { position: relative; }
.input-group .input { padding-inline-end: 52px; }
.input-group__btn {
  position: absolute; inset-inline-end: 4px; top: 50%;
  transform: translateY(-50%);
  width: var(--touch); height: var(--touch);
  display: grid; place-items: center;
  color: var(--text-3);
  border-radius: var(--r-sm);
}
.input-group__btn:active { background: var(--bg-surface-2); }
.input-group__btn svg { width: 20px; height: 20px; }

/* خانة اختيار بمساحة لمس كاملة */
.check {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--touch);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--bg-surface);
  display: grid; place-items: center;
  transition: all var(--dur) var(--ease);
}
.check__box svg { width: 13px; height: 13px; color: var(--text-inverse); opacity: 0; }
.check input:checked + .check__box { background: var(--accent-grad); border-color: var(--accent-strong); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px var(--accent-ring); }
.check__label { font-size: var(--fs-base); color: var(--text-2); }

/* ───────────────────────────────────────────────────────────────
   8. الشارات وأشرطة التقدّم
   ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--s-nudge) var(--s3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--bg-surface-2);
  color: var(--text-2);
  white-space: nowrap;
  /*
   * ٣.٥ — حدٌّ رفيع لكل شارة.
   *
   * سببان: الأول أن `--bg-surface-2` بَرَد في الدفعة الأولى فصار قريباً
   * من الأبيض، والشارة المحايدة على بطاقةٍ بيضاء تكاد تختفي بلا حدّ.
   * والثاني أن الشارة الممتلئة تساوي بصرياً زرَّ الإجراء بجانبها في
   * صفّ التسميع، فيصير الوصفُ بصوت الأمر — والشكل يفرّق قبل اللون.
   */
  box-shadow: inset 0 0 0 1px var(--border);
}
/*
 * لغة الشارات — اللون يقول **ماذا يلزمني**، لا مجرد تزيين:
 *
 *   ذهبي محدَّد   ينتظر عملاً روتينياً   (ينتظر التسميع)
 *   ذهبي ممتلئ   ينتظر قراراً           (طلب عذر)
 *   طيني         مشكلة                  (بلا خطة · موقوف)
 *   أخضر         تمّ                     (سمّع)
 *   خافت         لا عمل فيه              (معذور · ليس يومه)
 *
 * وكانت «ينتظر التسميع» و«ليس يومه» تتشاركان الشارة الأساسية —
 * أهمّ حالة في شاشة المعلّم وأقلّها شأناً بمظهرٍ واحد. والأسوأ أنهما
 * بعد اللوحة الذهبية صارتا بيجاً على بيج فذابتا في البطاقة.
 */
/* ولكلٍّ حدُّ عائلته لا الحدُّ المحايد، وإلا خرج حدٌّ بيجُ حول سطحٍ أخضر */
.badge--gold  { background: var(--accent-wash); color: var(--accent-deep);
                box-shadow: inset 0 0 0 1px var(--accent-soft); }
.badge--olive { background: var(--success-soft); color: var(--success-strong);
                box-shadow: inset 0 0 0 1px var(--success-border); }
.badge--clay  { background: var(--danger-soft); color: var(--danger-strong);
                box-shadow: inset 0 0 0 1px var(--danger-border); }

/* محدَّدة لا ممتلئة — تفترق عن «طلب عذر» بالشكل قبل اللون */
.badge--wait {
  background: transparent;
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
/* أهدأ ما في الشاشة — لا عمل فيها فلا تطلب عيناً */
.badge--mute { background: var(--bg-surface-2); color: var(--text-3); }

.badge svg { width: 13px; height: 13px; }

/*
 * شريحة تصفية — الشارة عنصر عرض لا يُضغط. لمّا نحتاج تصفية قابلة للضغط
 * نستعمل هذه، فتحتفظ بمساحة اللمس الكاملة.
 */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: var(--touch);
  padding-inline: var(--s4);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--bg-surface);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: all var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chip:active { background: var(--bg-surface-2); }
.chip.is-active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/*
 * `display: block` صريح على الاثنين.
 * الشريط يُستعمل داخل صفٍّ هو رابط، فيُكتب <span> لا <div>؛ والعنصر
 * inline لا يقبل ارتفاعاً، فيخرج الشريط **فارغاً دائماً** مهما كانت
 * النسبة — وقد خرج فعلاً في قائمة الطلاب: ٣١٪ تُعرض صفراً.
 */
/*
 * ٣.٥ — المجرى يُرى فارغاً.
 *
 * كان `--bg-surface-2` بيجاً مشبَعاً يرسم المجرى وحده، وقد بَرَد في
 * الدفعة الأولى فقارب الأبيض — فصار الشريط الفارغ في قائمة الطلاب
 * (وأكثرها صفر) لا يُرى أصلاً، ويُقرأ الصفّ كأنّ لا شريط فيه.
 *
 * فحدٌّ شعريّ يرسم المجرى، والظلّ الداخليّ يسقط: كان يوهم بعمقٍ محفور
 * وقد ذهبت الظلال من الشاشة كلّها في الدفعة الثانية.
 */
.bar {
  display: block;
  height: 9px; border-radius: var(--r-full);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.bar__fill {
  display: block;
  height: 100%; border-radius: var(--r-full);
  background: var(--accent-grad);
  transition: width .5s var(--ease);
}
.bar__fill--olive { background: var(--success-grad); }

/* شريط داخل صفّ قائمة — رفيع فلا يزاحم النصّ */
.bar--slim { height: 6px; min-width: 60px; }

/*
 * الصورة الرمزية **محايدة دائماً**.
 *
 * كان لونها مشتقّاً من تجزئة اسم صاحبها، فتخرج القوائم قوس قزح بلا
 * معنى: رمادي وذهبي وأخضر لا يدلّ أيٌّ منها على شيء. والأسوأ أنها
 * كانت تُناقض المعنى حيث يوجد — الأول في لوحة الشرف دائرته رمادية
 * باهتة وشارته ذهبية.
 *
 * فاللون في هذا التطبيق للحالة وحدها: ذهبي/فضي/برونزي للمراكز،
 * أخضر للمنجَز، طيني للمتعثّر. ويبقى التمييز بين الأشخاص بالحرف
 * والاسم — وهما ما يقرأه الإنسان أصلاً.
 */
.avatar {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-base);
  color: var(--text-2);
  background: var(--bg-surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.avatar--lg { width: 58px; height: 58px; font-size: var(--fs-xl); }
.avatar--sm { width: 30px; height: 30px; font-size: var(--fs-sm); }

/*
 * دوائر المنصّة تأخذ لون **المرتبة** لا لون الاسم، فتوافق الشارة تحتها.
 * وهي نفس تدرّجات .rank--1/2/3 حرفياً حتى لا ينفصل اللونان أبداً.
 */
.avatar--rank   { background: var(--rank-none); color: var(--text-2);
                  box-shadow: var(--rank-none-elev); }
.avatar--rank-1 { background: var(--rank-1); color: var(--rank-1-text);
                  box-shadow: var(--rank-1-elev); }
.avatar--rank-2 { background: var(--rank-2); color: var(--rank-2-text);
                  box-shadow: var(--rank-2-elev); }
.avatar--rank-3 { background: var(--rank-3); color: var(--rank-3-text);
                  box-shadow: var(--rank-3-elev); }

/* ───────────────────────────────────────────────────────────────
   9. الرسائل وحالات الفراغ
   ─────────────────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  border: 1px solid;
}
.alert svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: var(--s-nudge); }
.alert--error   { background: var(--danger-soft);  border-color: var(--danger-border); color: var(--danger-strong); }
.alert--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success-strong); }
.alert--info    { background: var(--accent-wash);   border-color: var(--accent-soft); color: var(--accent-deep); }

.empty {
  position: relative;
  text-align: center;
  padding: var(--s10) var(--s5);
  color: var(--text-3);
  overflow: hidden;
}
/*
 * الأيقونة داخل محراب مرسوم لا قرص عادي — الشكل نفسه المستعمل في
 * الهوية، فتبدو حالة الفراغ جزءاً من التصميم لا نقصاً فيه.
 */
.empty svg {
  position: relative;
  width: 30px; height: 30px;
  margin: 0 auto var(--s4);
  padding: 20px 16px 14px;
  box-sizing: content-box;
  /* قبّة فوق قاعدة مستقيمة = صورة المحراب، بلا قناع يقصّ الأيقونة نفسها */
  border-radius: var(--r-full) var(--r-full) 14px 14px;
  background: linear-gradient(180deg, var(--accent-wash), var(--bg-surface-2));
  box-shadow: inset 0 0 0 1px var(--accent-soft);
  color: var(--accent);
}
/* نقش خافت خلف حالة الفراغ */
.empty::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pattern);
  opacity: .13;
  -webkit-mask: radial-gradient(60% 50% at 50% 35%, #000, transparent 75%);
  mask: radial-gradient(60% 50% at 50% 35%, #000, transparent 75%);
  pointer-events: none;
}
.empty > * { position: relative; }
.empty__title { font-size: var(--fs-md); font-weight: 700; color: var(--text-2); }
.empty__text  { font-size: var(--fs-sm); margin-top: var(--s2); }

/* ───────────────────────────────────────────────────────────────
   ٩أ. الإشعارات
   الصفّ نموذج POST لا رابط، فالزرّ داخله يحتاج تصفير أنماط الزر
   الافتراضية ليقرأ كصفٍّ في قائمة لا كزرٍّ في نموذج.
   ─────────────────────────────────────────────────────────────── */

.notif + .notif { border-top: 1px solid var(--border-soft); }

.notif__btn {
  width: 100%;
  display: flex; align-items: flex-start; gap: var(--s3);
  min-height: 64px;
  padding: var(--s3) var(--s4);
  background: none; border: none; cursor: pointer;
  font: inherit; color: inherit; text-align: start;
  transition: background var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.notif__btn:active { background: var(--bg-surface-2); }

/* غير المقروء: مساحة دافئة وشريط ذهبيّ على الحافة. اللون وحده لا
   يكفي — الشريط يبقى مقروءاً لمن لا يميّز الدرجات. */
.notif--new { background: var(--accent-wash); }
.notif--new .notif__btn { box-shadow: inset 3px 0 0 0 var(--accent) ; }
.notif--new .list__name { color: var(--accent-deep); }

.notif__icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.notif--new .notif__icon {
  background: var(--bg-surface);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.notif__icon svg { width: 18px; height: 18px; }

.notif__dot {
  flex: none; align-self: center;
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: var(--accent);
}

/* ───────────────────────────────────────────────────────────────
   ٩ب. لوحة المطوّر
   الشريط والتنقّل وقوائم المفتاح/القيمة. مفصولة عن بقية الواجهة
   لأنها لا تُعرض إلا لحساب واحد، فلا تُحمّل بصرياً على أحد غيره.
   ─────────────────────────────────────────────────────────────── */

/*
 * شريط المطوّر يسبق الشريط العلوي في الصفحة، فهو من يلامس النَتوء —
 * فيأخذ هو حشو المنطقة الآمنة. ولو أخذه الاثنان لظهر فراغٌ مضاعف.
 */
.dev-bar {
  background: var(--grad-ink); color: var(--text-inverse);
  font-size: var(--fs-xs); font-weight: 600;
  padding: calc(6px + var(--safe-t)) var(--s3) 6px var(--s4);
  display: flex; align-items: center; gap: var(--s2);
}
body:has(.dev-bar) .topbar {
  height: var(--topbar-h);
  padding-top: 0;
}
.dev-bar svg { width: 14px; height: 14px; flex: none; }
.dev-bar .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* النيابة تُلوَّن بالطين لا بالحبر: الحالة هنا مؤقتة ويجب أن تُنهى،
   بخلاف وضع المطوّر الذي يدوم ما دام الحساب. */
.dev-bar--acting { background: var(--danger-grad); }

.dev-bar__btn {
  flex: none;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.16);
  color: var(--text-inverse); font-size: var(--fs-xs); font-weight: 700;
  padding: var(--s-nudge) 10px; border-radius: var(--r-full);
  border: none; cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.dev-bar__btn:hover { background: rgba(255,255,255,.28); }
.dev-bar form { display: flex; }

/* إعادة التحقّق قبل الرجوع من النيابة (C-1) — حقلٌ ضيّق داخل الشريط */
.dev-bar__form { gap: 6px; align-items: center; }
.dev-bar__input {
  flex: none; width: 104px; min-width: 0;
  background: rgba(255,255,255,.16);
  color: var(--text-inverse); font-size: var(--fs-xs);
  padding: var(--s-nudge) 10px; border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.34);
  font-family: inherit;
}
.dev-bar__input::placeholder { color: rgba(255,255,255,.72); }
/* الحدّ الأبيض الكامل يفي بـ3:1 المطلوبة في 1.4.11، بخلاف حقول النموذج (D-6) */
.dev-bar__input:focus { outline: none; border-color: var(--text-inverse); background: rgba(255,255,255,.26); }

/* تنقّل اللوحة — شريط رقائق يمرّر أفقياً على الجوال */
.dev-nav {
  display: flex; gap: var(--s2);
  padding-block: var(--s1) var(--s4);
  white-space: nowrap;
}
.dev-nav .chip { flex: none; }

/* قائمة مفتاح/قيمة — صفّان بعرضٍ يتبع أطول مفتاح */
.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s4);
  margin: 0;
  font-size: var(--fs-sm);
}
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; text-align: end; font-weight: 600; color: var(--text-1); }

/* سطر السجل: رأس الصف يقوم مقام مثلّث <details> الافتراضي.
   القاعدة مقيَّدة بـ .log ولا تُترك عامة — كي لا تمسّ طيّ الأجزاء
   في شاشة المصحف وله مثلّثه الخاص. */
.log > summary::-webkit-details-marker { display: none; }
.log > summary { list-style: none; }
.log--plain > summary { pointer-events: none; }

/* ───────────────────────────────────────────────────────────────
   10. الورقة السفلية — نمط الأفعال على الجوال
   ─────────────────────────────────────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(30,24,10,.52);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 91;
  background: var(--bg-surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--elev-3);
  padding: var(--s3) var(--s4) calc(var(--s6) + var(--safe-b));
  transform: translateY(100%);
  /*
   * ٤.١ — `visibility` سندٌ لـ`inert` لا زينة (D-1).
   *
   * الإزاحة وحدها تُخفي ولا تُخرج: حقول الورقة المغلقة تبقى في مسار
   * `Tab`. و`inert` في `sheet.php` هو العلاج، وهذا يحرس المتصفّح
   * الذي لا يعرفه — و`visibility: hidden` تُخرج من المسار ومن شجرة
   * الوصول معاً كما يفعل.
   *
   * ومهلتها `.28s` عند الإغلاق: لو خُفيت فوراً لاختفت الورقة قفزاً
   * بدل أن تنزلق. وعند الفتح بلا مهلة، فالحركة تبدأ من ظاهرٍ مُزاح.
   */
  visibility: hidden;
  transition: transform .28s var(--ease), visibility 0s .28s;
  max-height: 88vh; max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .28s var(--ease), visibility 0s 0s;
}

.sheet__grip {
  width: 40px; height: 4px; border-radius: var(--r-full);
  background: var(--border); margin: 0 auto var(--s4);
}
.sheet__title {
  font-family: var(--font-title);
  font-size: var(--fs-xl); font-weight: 700;
  margin-bottom: var(--s4);
}

/* ───────────────────────────────────────────────────────────────
   11. صفحة الدخول
   ─────────────────────────────────────────────────────────────── */
.auth {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s8) var(--s4) calc(var(--s8) + var(--safe-b));
  background:
    radial-gradient(130% 55% at 50% 0%, #FFFBEC 0%, var(--bg-page) 60%),
    var(--bg-page);
  overflow: hidden;
}
/* النقش الهندسي يملأ الخلفية ويتلاشى نحو الأسفل */
.auth::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pattern);
  opacity: .20;
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 72%);
  mask: linear-gradient(180deg, #000 0%, transparent 72%);
  pointer-events: none;
}

.auth__inner { position: relative; width: 100%; max-width: 400px; margin-inline: auto; }

.auth__brand { text-align: center; margin-bottom: var(--s6); }

/* الشعار يحمل اسم المشروع بخطه الأصلي، فلا يُكرَّر نصاً تحته */
.auth__logo {
  width: 172px; height: 172px;
  max-width: 46vw;
  margin: 0 auto var(--s3);
  display: block;
  filter: drop-shadow(0 6px 16px rgba(138,93,0,.18));
}
.auth__tagline {
  font-size: var(--fs-sm);
  color: var(--text-2);
  letter-spacing: .3px;
}

.auth__card {
  background: var(--bg-surface);                                     /* احتياط قبل color-mix */
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s6) var(--s5);
  box-shadow: 0 12px 40px -18px rgba(40,32,10,.35), var(--elev-1);
}
.auth__title {
  font-family: var(--font-title);
  font-size: var(--fs-xl);
  margin-bottom: var(--s5);
  text-align: center;
}

.auth__foot {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: var(--s6);
  line-height: 2;
}

/*
 * «نسيت كلمة المرور» — مطوّرٌ داخل بطاقة الدخول (D6).
 * `<details>` لا نافذة: يعمل بلا جافاسكربت، ويصله المفتاح بالتبويب،
 * ويعلن حالته للقارئ الصوتي بنفسه — ثلاثة أشياء تُكتب يدوياً لولاه.
 */
.auth__forgot {
  margin-top: var(--s5);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--s4);
}
.auth__forgot > summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-deep);
  padding: var(--s2);
  border-radius: var(--r-md);
}
.auth__forgot > summary::-webkit-details-marker { display: none; }
.auth__forgot > summary:hover { background: var(--accent-wash); }
/*
 * ٤.٣ — كان `--accent-strong` وحده يفي بـ3:1 يوم كُتب، وحقول النموذج
 * لا تفي (D-6). فلمّا أُصلحت الحقول صار الاستثناء بلا سبب، ونزل هذا
 * إلى `--accent-deep` مثلها — و`--accent-strong` يقيس 3.08 على أبيضَ
 * كامل، وهذه البطاقة أبيضُ ٩٢٪ فوق تدرّجٍ ذهبيّ فتنزل دونه.
 */
.auth__forgot > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-deep);
}

/* زخرفة قوس خفيفة أعلى بطاقة الدخول */
.auth__arch {
  display: block; width: 54px; height: 20px;
  margin: 0 auto var(--s4);
  color: var(--accent-soft);
}

/* ───────────────────────────────────────────────────────────────
   11.5 نتائج البحث عن مستخدم
   ─────────────────────────────────────────────────────────────── */
.user-results { margin-top: var(--s2); }

.user-result {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  min-height: var(--touch);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  text-align: start;
  transition: background var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.user-result:active { background: var(--bg-surface-2); }
.user-result + .user-result { margin-top: var(--s-half); }

/* ───────────────────────────────────────────────────────────────
   12. الرسائل الطافية
   ─────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; z-index: 95;
  inset-inline: var(--s4);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--s3));
  display: flex; flex-direction: column; gap: var(--s2);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--grad-ink); color: var(--text-inverse);
  font-size: var(--fs-base);
  box-shadow: var(--elev-3);
  animation: toast-in .25s var(--ease);
  pointer-events: auto;
}
.toast--success { background: var(--success-grad); }
.toast--error   { background: var(--danger-grad); }
/* تنبيهٌ لا خطأ ولا نجاح — استرجاعُ مسوّدة مثلاً */
.toast--warn    { background: var(--accent-grad); color: var(--text-on-accent); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ───────────────────────────────────────────────────────────────
   13. اللوحي — 600px
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  :root { --fs-base: 1rem; }

  .wrap { max-width: 640px; padding-inline: var(--s6); }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4);
  }

  .card { padding: var(--s5); }
  .card--accent { padding-top: calc(var(--s5) + 3px); }
  .hero { padding: var(--s6); }
  .auth__card { padding: var(--s8) var(--s6); }
  .stat-grid { gap: var(--s4); }
}

/* ═══════════════════════════════════════════════════════════════
   ١٣ب. الانتظار · الانقطاع · الرجوع
   ثلاث حالات كان البرنامج يمرّ بها صامتاً: بين ضغطة الرابط وظهور
   الشاشة، وحين ينقطع الاتصال، وحين يريد المستخدم الرجوع في تطبيقٍ
   لا شريط عنوان فيه.
   ═══════════════════════════════════════════════════════════════ */

/*
 * ── خيط التقدّم ────────────────────────────────────────────────
 *
 * هذا برنامج صفحاتٍ كاملة لا تطبيق صفحةٍ واحدة: الضغط على رابط
 * يذهب إلى الخادم ويعود بصفحةٍ مبنيّة. والفراغ بينهما — نصف ثانية
 * على شبكة جيّدة، وثلاث على ضعيفة — لا شيء فيه يقول «سمعتُك».
 * فيضغط المستخدم ثانيةً وثالثة.
 *
 * وخيطٌ يزحف أعلى الشاشة يحلّ هذا كلّه: يظهر في اللحظة نفسها، ولا
 * يدّعي معرفة المدّة — يمشي إلى ٩٠٪ ثم يقف، فتُكمله الصفحة الجديدة
 * بمجيئها.
 */
.navload {
  position: fixed; top: 0; inset-inline: 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s var(--ease);
}
.navload.is-on { opacity: 1; }
.navload__bar {
  height: 100%;
  width: 0;
  background: var(--accent-grad);
  box-shadow: 0 0 8px rgba(196,135,10,.6);
  transform-origin: inline-start;
  transition: width .3s var(--ease);
}

/*
 * ── الهيكل العظميّ ─────────────────────────────────────────────
 *
 * لا يُستعمل في الصفحات المبنيّة في الخادم — تلك تصل مكتملة، فوضع
 * هيكلٍ فيها خداعٌ لا فائدة تحته. موضعه ما يصل **بعد** الصفحة:
 * نتائج البحث، وأي قائمة تُجلَب بـfetch.
 */
.skel { display: grid; gap: var(--s2); padding: var(--s2) 0; }
.skel__row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) 0;
}
.skel__dot, .skel__line {
  background: linear-gradient(90deg,
              var(--bg-surface-2) 0%, var(--border-soft) 50%, var(--bg-surface-2) 100%);
  background-size: 300% 100%;
  animation: skel-slide 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.skel__dot  { display: block; width: 34px; height: 34px; border-radius: 50%; flex: none; }
.skel__line { display: block; height: 11px; }
.skel__line + .skel__line { margin-top: 6px; }
.skel__line--sm { width: 42%; }
@keyframes skel-slide {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel__dot, .skel__line { animation: none; }
}

/*
 * ── شريط الانقطاع ──────────────────────────────────────────────
 *
 * صفحة `offline.html` تعالج من **فتح** صفحةً بلا اتصال. ولا تعالج
 * الأخطر: من هو داخل البرنامج بالفعل، يملأ تسميعاً، والاتصال قد
 * سقط تحته وهو لا يدري. فيضغط «حفظ» ويذهب.
 */
.netbar {
  position: fixed; z-index: 55;
  inset-inline: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-inverse);
  background: var(--danger-grad);
  box-shadow: 0 -4px 14px rgba(30,27,18,.14);
  /*
   * الإخفاء بالشفافية لا بالإزاحة وحدها.
   *
   * كان `translateY(120%)` فقط — و١٢٠٪ من **ارتفاع الشريط** (٣٤px)
   * لا من المسافة إلى أسفل الشاشة. والشريط يقف فوق شريط التبويبات
   * بـ٦٤px، فبقيت منه حافّةٌ حمراء ظاهرة دائماً فوق التبويبات. ظهرت
   * في أول لقطة أُخذت له.
   */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: transform .24s var(--ease), opacity .24s var(--ease),
              background .24s var(--ease), visibility .24s;
}
.netbar.is-on { opacity: 1; visibility: visible; transform: none; }
.netbar.is-back { background: var(--success-grad); }
.netbar svg { width: 16px; height: 16px; }

/* لافتة المسوّدة المستردّة — تعلو النموذج الذي استُرجع */
.draft-note {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);
  font-size: var(--fs-sm);
  color: var(--danger-strong);
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
}
.draft-note button {
  margin-inline-start: auto;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--danger-strong);
  text-decoration: underline;
}

/*
 * ── زرّ الرجوع ─────────────────────────────────────────────────
 *
 * إيماءةُ الحافّة ملكُ نظام التشغيل لا الصفحة: لا تُصنَع بجافاسكربت
 * إلا بمزاحمة التمرير الأفقي وكسره. والذي **ينقص** فعلاً في وضع
 * التطبيق المثبَّت هو زرٌّ ظاهر — فالمتصفّح له سهمه، والتطبيق لا.
 *
 * ولا يُحقن إلا حين تتحقّق ثلاثة: التطبيق مثبَّت، وفي التاريخ ما
 * يُرجَع إليه، ولسنا على الشاشة الأولى.
 */
.topbar__back {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch);
  margin-inline-start: calc(var(--s2) * -1);
  border-radius: var(--r-md);
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease);
}
.topbar__back:active { background: var(--bg-surface-2); }
/* في وضع الرجوع تضيق مساحة العلامة، فيسقط السطر الوصفي لا الاسم */
body.has-back .topbar__word em { display: none; }

/*
 * ── الشريط العلوي ينزلق ────────────────────────────────────────
 *
 * ٦٠ بكسلاً من ٧٤٠ تبقى محجوزة أبداً لشعارٍ قُرئ مرّة. فإذا مضى
 * القارئ نازلاً انسحب الشريط، وإذا رجع صاعداً عاد — وهو ما تفعله
 * كلّ قائمة اعتادها.
 *
 * والمفتاح `--topbar-now`: قيمةٌ واحدة يقرؤها كلّ لاصقٍ تحته. ولولاها
 * لبقي مفتاح الألوان معلَّقاً عند ٦٠ وتحته فراغ.
 */
:root { --topbar-now: calc(var(--topbar-h) + var(--safe-t)); }
.topbar { transition: transform .22s var(--ease); will-change: transform; }
body.nav-hidden { --topbar-now: var(--safe-t); }
body.nav-hidden .topbar { transform: translateY(calc(-100% - 2px)); }
/* ومن قرأها فوقه: `.legend` في §٩. كانت `top: var(--topbar-h)` — رقمٌ
   يتجاهل النَتوء، فيختفي نصف المفتاح تحت ساعة الهاتف في التطبيق
   المثبَّت، ويبقى معلّقاً في الهواء حين ينزلق الشريط. */

/*
 * ── صدى التاريخ ────────────────────────────────────────────────
 *
 * حقل التاريخ الأصليّ يُبقي منتقي النظام — وهو أفضل ما على الجهاز،
 * ولا يُستبدَل بمنتقٍ من صنعنا إلا خسارةً في الوصولية وفي الألفة.
 * لكنّه يعرض `08/08/2026` تحت عنوانٍ عربيّ. فيُترك الحقل ويُكتب
 * تحته ما يعنيه بالعربية.
 */
.field__echo {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/*
 * ── شريط التصفية المطويّ ────────────────────────────────────────
 * يقول ما هو مضبوطٌ الآن وهو مغلق، فلا يُفتح إلا لمن أراد التغيير.
 * و<details> بلا جافاسكربت — يعمل ولو تعطّل الملف.
 */
.filters > summary {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--touch);
  padding: var(--s2) var(--s4);
  list-style: none; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  -webkit-tap-highlight-color: transparent;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::marker { content: ''; }
/*
 * ٤.٤ — الأيقونة والعبارة وحدةٌ واحدة، فتأخذان الدرجة نفسها.
 *
 * والعبارة 12px عريضةً فحدّها 4.5:1، وكانت 3.08:1. والأيقونة يكفيها
 * 3:1 — لكنّ `.filters[open]` يقلب السطح إلى `--accent-wash` أدناه،
 * وعليه تنزل `--accent-strong` إلى 2.86:1 فتخرق حتى ذلك الحدّ.
 */
.filters > summary svg { width: 18px; height: 18px; color: var(--accent-deep); }
.filters > summary .tiny { color: var(--accent-deep); font-weight: 700; }
.filters[open] > summary { margin-bottom: var(--s3); background: var(--accent-wash); }

/*
 * ── جدول التقرير ───────────────────────────────────────────────
 *
 * جدولٌ حقيقيّ لا بطاقات: أعمدةُ التقرير يعرّفها قالبه (اثنا عشر
 * عموداً لتقرير الدفعة)، والمقارنة بين الطلاب هي غرضُ الشاشة كلها —
 * والبطاقات تمنع المقارنة لأن العين لا تمسح عموداً.
 *
 * وعمود الاسم **لاصق**: من مرّر أفقياً إلى العمود الثاني عشر لا يعرف
 * صفَّ من يقرأ. وهو نفس ما يفعله تجميدُ العمود في إكسل.
 */
.rtable-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); }
.rtable {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: var(--fs-sm);
}
.rtable th, .rtable td {
  padding: var(--s3);
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-soft);
}
/* ورأسُ الجدول يهدأ: 700 على `--fs-sm` كان بوزن أسماء الطلاب نفسها،
   فيتنازع العنوانُ والبيانُ. 600 على `--fs-xs` يجعله عنواناً يُرجع
   إليه، والحدُّ السفليّ وحده يفصله فلا يحتاج ثِقَلاً. */
.rtable thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-surface-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
/* رأس العمود هدفُ لمسٍ يفرز الجدول — فيأخذ ارتفاعه كاملاً لا سطرَ نصّ */
.rtable thead th { padding: 0; }
.rtable thead th a {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--touch);
  padding-inline: var(--s3);
}
/*
 * ٣.٥ — التلوين المتناوب يسقط.
 *
 * صفٌّ أبيض وصفٌّ ذهبيٌّ باهت على ورقٍ دافئ يُقرأ ضجيجاً لا هيكلاً:
 * الفرق بين اللونين أقلّ من الفرق الذي يصنعه خطُّ الفصل نفسه، فتُدفع
 * كلفةُ لونٍ إضافي ولا يُقبض أثره. والخطّ وحده يفصل، وهو ما تفعله
 * الجداول التي تُقرأ طويلاً.
 *
 * وبسقوطه يصير الأحمر على النسبة المتعثّرة أظهرَ لونٍ في الجدول —
 * وهو الوحيد الذي يستحقّ أن يُرى أوّلاً.
 */
.rtable tbody tr:last-child td { border-bottom: none; }

/* العمود اللاصق يأخذ خلفيةً معتمة، وإلا مرّ ما تحته من خلاله */
.rtable__stick {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  text-align: start;
  background: var(--bg-surface);
  border-inline-end: 1px solid var(--border);
}
/* اسم الطالب رابطٌ إلى ملفّه — فهدفُ لمسه كامل لا ارتفاعُ سطره */
.rtable__stick a { display: flex; align-items: center; min-height: var(--touch); }
.rtable thead .rtable__stick { z-index: 3; background: var(--bg-surface-2); }
/* ولمّا سقط التناوب سقط استثناؤه في العمود اللاصق معه — ولولا حذفه
   لبقي عمودُ الأسماء وحده مخطَّطاً بجانب جدولٍ صار مستوياً. */

/*
 * ── الترقيم ────────────────────────────────────────────────────
 * زرّان ورقم. ولا أرقام صفحاتٍ متتالية: على عرض ٣٦٠ تلتفّ سطرين
 * وتصير أهداف لمسٍ ضيّقة متلاصقة — وهو أسوأ ما يُفعل بالإبهام.
 */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s6);
}
.pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch);
  padding-inline: var(--s5);
  font-size: var(--fs-sm); font-weight: 700;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-surface);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease);
}
.pager__btn:active { background: var(--accent-wash); }
.pager__btn.is-off { opacity: .38; }
.pager__at { font-size: var(--fs-sm); color: var(--text-3); }

/* ───────────────────────────────────────────────────────────────
   14. الحاسوب — 1024px
   الشريط السفلي يصير شريطاً جانبياً. آخر تكيّف لا أوله.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .app {
    padding-bottom: 0;
    padding-inline-start: 248px;
  }

  .tabbar {
    inset-inline-end: auto;
    inset-inline-start: 0;
    top: 0; bottom: 0;
    width: 248px; height: 100vh;
    padding: var(--s6) var(--s3);
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    gap: var(--s1);
    align-content: start;
    background: var(--bg-surface);
    border-top: none;
    border-inline-end: 1px solid var(--border);
    box-shadow: none;
  }

  .tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
  }
  /* القرص يصير خلفية كاملة للصف، وشريطاً ذهبياً على الحافة */
  .tab::before {
    inset: 0; top: 0;
    width: auto; height: auto;
    border-radius: var(--r-md);
    transform: none;
  }
  /*
   * الخلفية تُعاد هنا صراحةً. الجوّال صار خطّاً مصمتاً بلون `--accent`،
   * و`::before` نفسه على الحاسوب **خلفيةُ الصفّ كلّه** (`inset: 0`
   * أعلاه) — فورث اللون المصمت وامتلأ الصفّ ذهباً خالصاً. أُمسك في
   * لقطة home@1440: كتلةٌ ذهبية على حافّة العمود الجانبي.
   */
  .tab.is-active::before {
    transform: none;
    background: var(--accent-wash);
    box-shadow: inset 0 0 0 1px var(--accent-soft);
  }
  .tab.is-active::after {
    content: ''; position: absolute;
    inset-inline-start: 0; top: 22%; bottom: 22%;
    width: 3px; border-radius: var(--r-full);
    background: var(--accent-grad);
  }
  .tab.is-active svg { transform: none; }
  .tab__badge { position: static; margin-inline-start: auto; border: none; }

  .topbar { padding-inline: var(--s8); }
  /*
   * ٣.٥ — 880 ← 1080، والصفحةُ الرئيسية تصير عمودين.
   *
   * كان الحاسوب هاتفاً ممدوداً: عمودٌ واحد 880px وسط 1192، وما حوله
   * فراغٌ لا يحمل شيئاً. و880 لم تكن مقاساً مقروئياً — سطرُ النصّ هنا
   * لا يبلغها أصلاً، فالحدّ كان يقيّد **الجداول والشبكات** وحدها:
   * جدول التقارير بعشرة أعمدة يُمرَّر داخل بطاقته وهو يسع، وشبكة
   * المصحف تُلقي وجهين إلى سطرٍ ثانٍ لا مكان له.
   */
  .wrap   { max-width: 1080px; }

  /*
   * عمودان: العمل في العريض، والقياسُ والأبوابُ في سكّةٍ لا تُمرَّر
   * معه. وهي **للصفحة الرئيسية وحدها** اليوم: بقيّة الصفحات فراغها
   * رأسيّ لا أفقيّ (صفحةٌ قصيرة في شاشةٍ طويلة)، وسكّةٌ فارغة بجانبها
   * ليست علاجاً.
   */
  .cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--s6);
    align-items: start;
  }
  .cols__rail > * + * { margin-top: var(--s4); }
  /* الأرقام الثلاثة تصير عموداً في السكّة — ثلاثةٌ بعرض 320 تخنق نصّها */
  .cols__rail .stat-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .cols__rail .stat {
    display: flex; align-items: baseline; gap: var(--s3);
    text-align: start;
    padding: var(--s3) var(--s4);      /* لا `--s5`: السكّة صفوفٌ لا بطاقات */
  }
  .cols__rail .stat__cap { margin-top: 0; }

  /*
   * الأبواب صفوفٌ في السكّة لا مربّعات.
   *
   * أُبقيت أوّلاً عموداً من مربّعاتها كما هي، فصارت السكّة **أطول من
   * عمود العمل** — خمسة مربّعاتٍ بارتفاع 100px لكلٍّ منها بجانب
   * بطاقتين. وهو قلبُ المقصود: السكّة سياقٌ يُلحَظ، لا عمودٌ يقود
   * الصفحة. أُمسك في لقطة home@1440.
   */
  .cols__rail .quick { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .cols__rail .quick__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s3);
    min-height: var(--touch);
    padding: var(--s2) var(--s4);
    text-align: start;
    border-radius: var(--r-md);        /* يتبع البطاقات بعد الدفعة الرابعة */
  }
  .cols__rail .quick__item { min-height: 0; }   /* يغلب `min-height: 92px` المربّع */

  /* الشريط الجانبي حلّ محلّ السفلي، فلا شيء تحت شريط الانقطاع يتجنّبه */
  .netbar { bottom: 0; inset-inline-start: 248px; }

  .toasts {
    inset-inline: auto var(--s6);
    bottom: var(--s6);
    width: 340px;
  }

  .sheet {
    inset-inline: 50%;
    bottom: auto; top: 50%;
    width: min(480px, 92vw);
    transform: translate(50%, -46%) scale(.97);
    border-radius: var(--r-xl);
    opacity: 0;
    padding-bottom: var(--s6);
    /* ٤.١ — ومهلة `visibility` هنا `--dur` لا `.28s`: حركة الحاسوب أقصر */
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility 0s var(--dur);
  }
  .sheet.is-open {
    transform: translate(50%, -50%) scale(1); opacity: 1;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility 0s 0s;
  }
  .sheet__grip { display: none; }
}

/* ───────────────────────────────────────────────────────────────
   15. تفضيلات المستخدم
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .tabbar, .topbar, .toasts, .sheet, .sheet-backdrop { display: none !important; }
  .app { padding: 0 !important; }
  body { background: #fff; }   /* ورق — لا رمز: الطباعة بيضاء ولو صارت اللوحة داكنة */
  .hero::before, .hero::after, .auth::before { display: none; }
}