/* ==========================================================================
   main.css — Design tokens + base styles
   Phase 1: core identity only (colors, typography, spacing, layout).
   ========================================================================== */

:root {
    /* Brand colors */
    --primary:         #1E40AF;
    --primary-light:   #3B82F6;
    --primary-dark:    #1E3A8A;
    --accent:          #0EA5E9;

    /* Status colors */
    --success:         #10B981;
    --warning:         #F59E0B;
    /* ذهبُ التقويم الدراسيّ (الإجازاتُ واليومُ الوطنيّ). لونٌ واحدٌ لا
       يكفي الوضعين: ما يُقرأ على الأبيض يخفت على الداكن والعكس. فهو رمزٌ
       يُعاد تعريفُه في كلّ مظهر — وقيس: 4.83:1 على الفاتح، و6.51:1 على
       الداكن. (كان ثابتاً `#8A6E2E` فسقط في الداكن عند 3.54، وكشفه
       contrast.html يوم ٢٧ أغسطس ٢٠٢٦.) */
    --gold-ink:        #8A6E2E;
    --danger:          #EF4444;
    --info:            #3B82F6;

    /* Surfaces */
    --bg:              #F8FAFC;
    --surface:         #FFFFFF;
    --surface-alt:     #F1F5F9;

    /* Text */
    --text:            #0F172A;
    --text-muted:      #64748B;
    --text-inverse:    #FFFFFF;

    /* Borders */
    --border:          #E2E8F0;
    --border-strong:   #CBD5E1;

    /* ======================================================================
       رموزُ الحبر والمرساة — شقٌّ لازمٌ للوضع الداكن
       ======================================================================
       الرمزُ الواحد لا يصلح للأمرين: `--primary` أرضيةُ زرٍّ في ٩٧ موضعاً
       وكتابةٌ في ١٠٧. فلو فُتّح ليُقرأ على أرضيةٍ داكنة انقلبت الأزرار،
       ولو بقي غامقاً اختفت الكتابة. فيُشقّ: هذا للحبر وذاك للسطح.

       و`--mix-base` مرساةُ الخلطات التي تبني سطحاً شبه أبيض
       (`color-mix(… , var(--mix-base))`)، و`--beige` مرساةُ خمسٍ وسبعين
       خلطةً أخرى. تبديلُ المرساتين يقلب الأسطح كلَّها بلا لمسِ قاعدةٍ
       واحدةٍ منها.

       وفي الوضع الفاتح كلُّها مساويةٌ لما كانت — فلا يتغيّر شيء.
       ====================================================================== */
    --ink-primary:     var(--primary);
    --mix-base:        #FFFFFF;
    --beige:           #ECEAE3;

    /* البريقُ العلويّ: خطٌّ أبيضُ داخل حافّة كل بطاقةٍ وزرّ — هو تجسيمُ
       التصميم. عشرون موضعاً. وعلى أرضيةٍ داكنة يصير خيطاً ناصعاً يقطع
       البطاقة، فيُخفَّف هناك ولا يُحذف. */
    --sheen:           #FFFFFF;

    /* شريطُ حالة الطالب حين لا تحضيرَ بعد — محايدٌ يقرأ على أرضيته. */
    --stripe-none:     #D8DEE9;

    /* ======================================================================
       Fibonacci design system
       Spacing ladder: 3 · 5 · 8 · 13 · 21 · 34 · 55 · 89
       (each step = sum of the two before it → ratios converge on φ 1.618)
       ====================================================================== */

    /* Spacing scale — Fibonacci rhythm */
    --space-1:   3px;
    --space-2:   5px;
    --space-3:   8px;
    --space-4:  13px;
    --space-5:  21px;
    --space-6:  21px;
    --space-8:  34px;
    --space-10: 55px;
    --space-12: 55px;
    --space-16: 89px;

    /* Typography — golden ramp anchored at 16px body
       (each heading step ≈ ×1.272 = √φ; peaks land on Fibonacci 13/21/34) */
    --fs-display: 42px;
    --fs-h1:      34px;
    --fs-h2:      26px;
    --fs-lg:      21px;
    --fs-body:    16px;
    --fs-sm:      13px;
    --fs-xs:      11px;

    --fw-regular:  400;
    --fw-medium:   500;
    /* ‎600‎ محمَّلٌ في fonts.css ولم يكن له رمز، فكان يُقفز عنه إلى ‎700‎. */
    --fw-semibold: 600;
    --fw-bold:     700;
    /* لا ‎--fw-black‎: العائلةُ تنتهي عند ‎700‎ — أربعةُ أوجهٍ في
       `vendor/fonts/` لا خامسَ لها، وIBM Plex Sans Arabic لا تُصدَر بأثقلَ
       منه أصلاً. وكان الرمزُ ‎900‎ فيُطلَب في ‎167‎ موضعاً، فيزوّره المتصفّح:
       يمطّ حروفَ الـ‎700‎ بتغليظٍ صناعيٍّ بلا خطٍّ خلفها، فتخرج غليظةً
       مشوّهةً على الشاشات الكثيفة. قيسَ يوم ٢٨ أغسطس ٢٠٢٦ فوُجد ‎172‎
       عنصراً يُرسم كذلك في عشر شاشاتٍ وحدَها.
       فحُذف الرمزُ ولم يُخفَّض إلى ‎700‎: رمزان بقيمةٍ واحدةٍ فخٌّ — يظنّ
       القارئُ أنّ ثمّة أثقلَ، فيعيد ‎900‎ من حيث لا يدري. */

    /* Line heights on the golden ratio */
    --lh-tight:   1.236;
    --lh-base:    1.618;

    /* Radii — Fibonacci curves */
    --radius-sm:  8px;
    --radius-md: 13px;
    --radius-lg: 21px;
    --radius-xl: 34px;
    --radius-full: 9999px;

    /* Shadows — layered elevation, Fibonacci offsets/blurs (2·3·5·8·13·21·34·55) */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow:    0 2px 5px rgba(15, 23, 42, 0.05), 0 8px 21px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 5px 13px rgba(15, 23, 42, 0.07), 0 13px 34px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 21px rgba(15, 23, 42, 0.09), 0 21px 55px rgba(15, 23, 42, 0.11);

    /* Motion — Fibonacci milliseconds */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 144ms;
    --dur-base: 233ms;
    --dur-slow: 377ms;

    /* Layout */
    --container-max: 1200px;
    --header-height: 64px;

    /* ======================================================================
       Mobile design tokens (Phase A — added for mobile-first refactor)
       ====================================================================== */

    /* Touch targets (Apple HIG minimum = 44px) */
    --touch-target-min: 44px;

    /* Mobile spacing — on the Fibonacci ladder */
    --mobile-padding: 13px;
    --card-gap:       13px;

    /* Bottom navigation height (mobile only) — ارتفاعُ الشريط نفسِه
       بحشوته، لا المساحةُ التي يحجزها من الشاشة. */
    --bottom-nav-height: 56px;
    /* والشريطُ عائمٌ لا ملتصق: هذه المسافةُ بينه وبين حافّة الشاشة، وبينه
       وبين جانبيها. فالمساحةُ المحجوزة = الارتفاع + الفجوة + المنطقةُ
       الآمنة — وستُّ قواعدَ في التطبيق تحسبها هكذا. */
    --bottom-nav-gap: 12px;

    /* Safe-area insets (iPhone notch / home indicator) */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);

    /* Breakpoints (documentation values — CSS can't use vars in @media yet).
       These must stay in sync with the @media queries below. */
    --bp-mobile:  480px;
    --bp-tablet:  768px;
    --bp-desktop: 1024px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    /* ولا انزلاقَ أفقيّ: التطبيقُ عمودُه واحدٌ ولا شيءَ فيه يُمَدّ يمنةً.
       و`clip` لا `hidden` — الأخيرُ يُنشئ حاويةَ تمريرٍ فيكسر `sticky`
       داخلها، و`clip` يقصّ بلا حاوية. (وسندُها الأوّلُ في `app.js`:
       `_pinHorizontal` تردّ الإزاحةَ التي يُحدثها WebKit عند فتح لوحة
       المفاتيح في مستندٍ من اليمين إلى اليسار.) */
    overflow-x: clip;
}

body {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ‏`<b>` و`<strong>` وزنُهما الافتراضيُّ `bolder` — وهو **نسبيّ**: يقفز
   درجةً فوق الأب. فداخل عنوانٍ بـ‎700‎ يصير ‎900‎، والعائلةُ لا تملكه،
   فيزوّره المتصفّح. (وجُدَ منها واحدٌ حيٌّ في `.cl-stage b` يوم ٢٨ أغسطس
   ٢٠٢٦ بعد تنظيف ‎181‎ موضعاً — نجا لأنّه لا يُكتب في التنسيق أصلاً.)
   فيُثبَّت الوزنُ مطلقاً: ‎700‎ فوق أيّ أب، و‎47‎ وسماً في `js/` تتبعه. */
b, strong { font-weight: var(--fw-bold); }

/* Typography */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--text);
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h2); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-4); }

a {
    color: var(--ink-primary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--primary-light); }

small { font-size: var(--fs-sm); }

/* Numerals: western digits for clarity */
.num, input[type="number"] {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
}

/* Helpers */
.text-muted  { color: var(--text-muted); }

.hidden { display: none !important; }

/* Print root — injected dynamically, hidden on screen */
#print-root { display: none; }

/* ==========================================================================
   الوضع الداكن
   ==========================================================================
   نُقل كلُّه إلى `css/theme-dark.css` — ملفٌّ واحدٌ يملك المظهر الداكن:
   رموزَه وأسطحَه وحبرَه. وكان هنا مقلوباً على عجل: قاعدةٌ تصبغ كلَّ نصٍّ
   بالأبيض (`* { color: white }`) فوق أسطحٍ بقيت بيضاء — فثلاثةٌ وخمسون
   موضعاً كان النصُّ فيها أبيضَ على أبيض.
   ========================================================================== */


/* Layout primitives */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
.app-header {
    height: var(--header-height);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}



/* ==========================================================================
   عنوانُ الشاشة ورجوعُها
   ==========================================================================
   حلّا محلَّ اسم التطبيق في الشريط. والرجوعُ في الشريط لا في المحتوى:
   مكانٌ واحدٌ ثابتٌ في الشاشات كلِّها، فلا يبحث عنه المعلّم في كل صفحة.
   ========================================================================== */
/* الرجوعُ والعنوان صفٌّ واحدٌ في بداية السطر — يمينُه في العربية.
   والسهمُ يمينَ العنوان لا يساره: هو أوّلُ ما تبلغه اليد، وأوّلُ ما تقع
   عليه العينُ في القراءة من اليمين. */
.hdr-start {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    /* يأخذ ما بقي من السطر بعد زرّ القائمة، و`min-width: 0` تسمح للعنوان
       بالانكماش داخله — بدونها يدفع الصندوقُ حدَّه فيُقصّ العنوان مبكراً. */
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-start: calc(var(--space-2) * -1);
}

.hdr-title {
    margin: 0;
    font-size: 17px;
    font-weight: var(--fw-bold);
    color: var(--ink-primary);
    /* عنوانٌ طويلٌ يُقصّ ولا يكسر الشريط سطرين — والقصُّ عند الحاجة وحدها. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.hdr-back {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
    color: var(--ink-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hdr-back:hover,
.hdr-back:active { background: var(--surface-alt); }
.hdr-back[hidden] { display: none; }

/* Main */
.app-main {
    flex: 1 0 auto;
    padding-block: var(--space-8);
}

/* Footer */
.app-footer {
    padding-block: var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--surface);
    text-align: center;
}

/* Focus */
:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Responsive typography & layout base (Phase A)
   Mobile-first: tokens below apply to all sizes, then desktop overrides above.
   Breakpoints: bp-mobile 480px · bp-tablet 768px · bp-desktop 1024px
   ========================================================================== */

/* Mobile & tablet (≤ 768px): layout spacing only — type keeps the golden
   ramp from :root, we just cap the display size. */
@media (max-width: 768px) {
    :root {
        --fs-display: 34px;
    }

    .container { padding-inline: var(--mobile-padding); }
    .app-main  { padding-block: var(--space-5); }

    /* Reserve room for the bottom-nav (added in Phase B) */
    body { padding-bottom: calc(var(--bottom-nav-height) + var(--bottom-nav-gap) + var(--safe-bottom)); }

    /* ‫الحشوة أعلاه تُضاف فوق min-height: 100vh فتفرض تمريراً بمقدار ارتفاع
       الشريط السفلي في كل صفحة ولو كان محتواها قصيراً — نخصمها هنا. */
    .app-container {
        min-height: calc(100dvh - var(--bottom-nav-height) - var(--bottom-nav-gap)
                         - var(--safe-bottom));
    }

    /* ‫التذييل مخفيّ خلف الشريط السفلي على الجوال: لا يراه أحد ويضيف ٦٩px
       من التمرير الميت في كل صفحة. */
    .app-footer { display: none; }
}

/* Very small phones (≤ 480px): cap the two largest steps to φ² (26 = 16×φ) */
@media (max-width: 480px) {
    :root {
        --fs-display: 26px;
        --fs-h1:      26px;
    }
    .container { padding-inline: var(--space-4); }
}

/* Legacy preserved: the original 640px breakpoint kept a slightly smaller
   h1. Tablet-and-above now uses the base 24px again. No action needed. */