/* =========================================================
   الأساس — نظام التصميم: عربي RTL، فاتح وغامق، موبايل وكمبيوتر.
   المتغيّرات هنا هي مصدر كل الألوان والمسافات في باقي الملفات.
   ========================================================= */
/**
 * 🔴 مقاسات أشرطة النظام — مصدر واحد لكل الملفات.
 *
 * `env(safe-area-inset-*)` بترجع **صفر** في ويب‑ڤيو أندرويد لأشرطة
 * النظام (مصدرها قصّة الشاشة بس)، فالحسابات اللي معتمدة عليها لوحدها
 * كانت بتدي صفر جوّه التطبيق — والشريط السفلي بيقعد تحت شريط تنقّل
 * التابلت، والترويسة تحت شريط الحالة. (بلاغ صلاح، ١٠ أغسطس ٢٠٢٦.)
 *
 * الحل: `MainActivity` بيحقن `--ins-*` بالمقاسات الحقيقية، والقيمة
 * الافتراضية هنا هي `env()` — فالمتصفح وiOS ياخدوا سلوكهم الطبيعي،
 * والتطبيق ياخد الرقم الصح. **ترتيب `var(--ins-top, env(...))` مقصود**:
 * المتغيّر لو اتحقن بيكسب، ولو مافيش تطبيق بنرجع لـ`env`.
 */
:root {
  --sa-top: var(--ins-top, env(safe-area-inset-top, 0px));
  --sa-right: var(--ins-right, env(safe-area-inset-right, 0px));
  --sa-bottom: var(--ins-bottom, env(safe-area-inset-bottom, 0px));
  --sa-left: var(--ins-left, env(safe-area-inset-left, 0px));
}

:root {
  /**
   * الألوان مبنية على سلّم Radix — كل لون ١٢ درجة، وكل درجة ليها مقابل
   * في الوضع الغامق بنفس التباين بالظبط. يعني بنكتب الوضع الفاتح والغامق
   * بيظبط نفسه، بدل ما نخمّن لون غامق لكل لون فاتح زي الأول.
   *
   * معنى الدرجات (نفس المنطق لكل لون):
   *   ١-٢ خلفيات · ٣-٥ خلفيات العناصر · ٦-٨ حدود
   *   ٩ اللون الصريح · ١٠ عند المرور · ١١ نص خفيف · ١٢ نص واضح
   *
   * أسماء المتغيّرات هي هي زي ما كانت — التغيير في القيم بس.
   */
  --bg: var(--slate-2);
  --bg-soft: var(--slate-3);
  --card: #ffffff;
  --card-2: var(--slate-2);
  --text: var(--slate-12);
  --text-soft: var(--slate-11);
  /**
   * الدرجة ١١ هي آخر درجة بتعدّي حد الوضوح المطلوب للقراءة (٤.٥:١).
   * الدرجة ١٠ كانت أوضح شوية في التدرّج بس بتنزل تحت الحد — والفرق بين
   * «خفيف» و«باهت» بييجي من حجم الخط (`.small`) مش من اللون.
   */
  --text-dim: var(--slate-11);
  --border: var(--slate-6);
  --border-strong: var(--slate-8);

  --brand: var(--indigo-9);
  --brand-soft: var(--indigo-3);
  --brand-text: #ffffff;
  --ok: var(--green-9);
  --ok-soft: var(--green-3);
  --warn: var(--amber-11);
  --warn-soft: var(--amber-3);
  --danger: var(--red-9);
  --danger-soft: var(--red-3);
  --info: var(--blue-9);
  --info-soft: var(--blue-3);
  --gold: var(--amber-9);

  /* ظلال Open Props — بتتدرّج طبيعي بدل ظل واحد ثابت */
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-5);

  --r: 14px;
  --r-sm: 9px;
  --r-lg: 20px;
  --sidebar-w: 250px;
  /**
   * 🔴 **الخط المشحون لازم يجي الأول.**
   *
   * الترتيب القديم كان `'Segoe UI', 'Noto Kufi Arabic', 'Cairo', …` —
   * و`Noto Kufi Arabic` **خط نظام موجود في أندرويد**، فكان بيكسب قبل
   * ما الدور يوصل لـCairo. النتيجة: بنشحن Cairo في `vendor/fonts`
   * (١٢٦ ك.ب) و**عمره ما اتعرض على تابلت الأولاد** — والشكل بيختلف من
   * جهاز للتاني على حسب خطوط النظام.
   *
   * ودي نفس عيلة «الأصل اليتيم»: أصل بيتشحن ومحدش بيستخدمه — بس أخبث،
   * لأنه **مستخدَم في الكود** والترتيب هو اللي بيلغيه.
   */
  --font: 'Cairo', 'Segoe UI', 'Noto Kufi Arabic', Tahoma, system-ui, -apple-system, sans-serif;
  /** خط العناوين والعلامة: نسخي كلاسيكي — للعناوين بس مش للنص الصغير */
  --font-display: 'Amiri', 'Cairo', Georgia, serif;
  --font-quran: 'Amiri Quran', 'KFGQPC Uthmanic Script HAFS', 'Traditional Arabic', 'Scheherazade New', serif;
}

html[data-theme='dark'] {
  /* الدرجات هي هي — ملف ألوان Radix بيبدّل قيمها لوحده في الوضع الغامق */
  --card: var(--slate-2);
  --card-2: var(--slate-3);
  --brand: var(--indigo-9);
  --ok: var(--green-9);
  --warn: var(--amber-11);
  --danger: var(--red-9);
  --info: var(--blue-9);

  /* الظل لازم يبقى أقوى على خلفية غامقة عشان يبان */
  --shadow-color: 220 40% 2%;
  --shadow-strength: 25%;
}

* {
  box-sizing: border-box;
}

/**
 * لازم تفضل فوق أي قاعدة تانية.
 * خاصية hidden المدمجة في المتصفح بتتغلب من أي كلاس فيه display (زي .boot { display:grid })،
 * وده كان بيخلي شاشة التحميل تفضل مغطية البرنامج حتى بعد ما يتحمّل بالكامل.
 */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
/**
 * 🔴 **`body` بتتمدّد مع محتواها — مش مقفولة على ارتفاع الشاشة.**
 *
 * (لقطة صلاح من التابلت بالعرض، ١٩ أغسطس ٢٠٢٦: زرار «يلا نبدأ» تحت
 * شريط التاب.) `height: 100%` مع `box-sizing: border-box` — وهو
 * مطبَّق على `*` فوق — بتخلي أي `padding-bottom` على `body`
 * **يتاكل من الارتفاع بدل ما يتضاف بعد المحتوى**.
 *
 * الأثر المقيس على صفحة الدرس: `body` محجوز فيها `126px` لشريط
 * التنقّل، والحشو ده **جوّه** الـ٨٠٠ — فآخر عنصر وقف عند ٨٠٠ بالظبط،
 * يعني **كله تحت شريط أندرويد**. وبعد `min-height` بقى عند ٧٤٤ ✅.
 *
 * ⚠️ و`html` بتفضل `height: 100%` — هي المرجع اللي `body` بتاخد منه
 * الـ١٠٠٪، ولو بقت `min-height` كمان النسبة بتفقد مرجعها.
 * 📌 والقاعدة الأعم: **`height` بيحبس، و`min-height` بيضمن حدًّا أدنى
 * ويسيب المحتوى يكبّر** — وأي حشو على عنصر محبوس بيتاكل منه.
 */
body {
  height: auto;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.35;
  font-weight: 700;
}

a {
  color: var(--brand);
  text-decoration: none;
}

/* ------------------------------------------------- شاشة التحميل */
.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: var(--bg);
  z-index: 100;
}
/* اللوجو في شاشة البدء: صورة بلا خلفية، بتكبر وتصغر بهدوء بدل ما
   تقعد ساكتة — العين بتعرف إن فيه شغل ماشي. */
/**
 * 🔴 **دخلة هادية — والهدوء قرار مش ذوق.**
 *
 * البرنامج لولد ٧ ولابن ١٥، والحركة اللي بتفرّح الصغير بتخلّي الكبير
 * يحس إن البرنامج «للعيال» (قاعدة المشروع). فاللوجو بيظهر بتكبير
 * بسيط **مرة واحدة** مع هالة بتتسع وتختفي — مش نطّ متكرر.
 *
 * ⚠️ **والدخلة مابتضيفش وقت انتظار**: الحركة بتمشي **أثناء** التحميل
 * اللي بيحصل أصلًا، ومافيش أي مدة دنيا مفروضة. لو التحميل خلص في
 * نص ثانية، الولد بيدخل في نص ثانية — **الجمال مايتدفعش من وقته**.
 */
.boot-logo {
  width: 128px;
  height: 128px;
  object-fit: contain;
  animation: boot-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
  position: relative;
}
/* هالة بتتسع من ورا اللوجو مرة واحدة — بتدّي إحساس «اشتغل» بلا ضجيج */
.boot::before {
  content: '';
  position: absolute;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0;
  animation: boot-halo 1.6s ease-out 0.25s;
  pointer-events: none;
}
@keyframes boot-in {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes boot-halo {
  0% {
    opacity: 0.55;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}
/* الخروج بتلاشٍ بدل القطع — الانتقال المفاجئ بيبان كأن حاجة وقعت */
.boot.leaving {
  animation: boot-out 0.34s ease-in forwards;
  pointer-events: none;
}
@keyframes boot-out {
  to {
    opacity: 0;
    transform: scale(1.03);
  }
}
/**
 * ⚠️ **واحترام «قلّل الحركة»**: اللي مفعّل الإعداد ده في نظامه
 * بيتشال عنه كل ده — والشاشة بتظهر ساكنة وكاملة. الحركة تحسين
 * مش شرط، ومحدش بيستنى عشانها.
 */
@media (prefers-reduced-motion: reduce) {
  .boot-logo,
  .boot::before,
  .boot.leaving {
    animation: none;
  }
}
.boot-text {
  color: var(--text-soft);
}
.boot-step {
  color: var(--text-dim);
  font-size: 12.5px;
  margin-top: 2px;
}
.boot-help {
  margin-top: 22px;
  font-size: 13px;
  color: var(--brand);
  text-decoration: underline;
}
@keyframes pop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.14);
  }
}

/**
 * 🔴 Amiri للعناوين والاقتباس — مش للنص الصغير.
 *
 * صلاح سأل: «لو خلينا الخط Amiri صعب؟» — مش صعب خالص، هو متنزّل في
 * `vendor/fonts/noor` من الأول ومعرَّف في `fonts.css`، الناقص كان
 * التوصيل بس.
 *
 * ⚠️ **بس مش لكل النص**: Amiri خط نسخي حروفه رفيعة ومتشابكة — جميل في
 * ٢٤ بكسل وفوق، وبيتعب العين في نص واجهة ١٣-١٥ بكسل على تابلت. والقارئ
 * هنا ولد من ٧ لـ١٥ سنة. فالتقسيمة: **Amiri للعناوين والاقتباس
 * والعلامة · Cairo لكل النص والأزرار والحقول**.
 */
h1,
h2,
h3,
.auth-brand,
.boot-text,
.auth-quote blockquote {
  font-family: var(--font-display);
}
/* Amiri أقصر من Cairo في ارتفاع الحرف، فالعناوين محتاجة زيادة بسيطة
   عشان تفضل بنفس الوزن البصري */
h1, h2, h3 { letter-spacing: 0; }