/* =====================================================================
   عون — الأساس (Reset + Base)
   يُحمَّل بعد tokens.css مباشرةً.

   ⚠️ قاعدة ملزمة: صفر خاصية اتجاهية مادّية.
   لا margin-left ولا padding-right ولا text-align: right — الخصائص
   المنطقية حصراً، فينعكس الملف تلقائياً بتغيّر dir بلا نسخة ثانية.

   السبب أعمق من اختصار الكود: الملف المزدوج ينحرف. تُعدَّل قاعدة في نسخة
   وتُنسى في الأخرى، والانحراف لا يظهر لمن يتصفح بلغة واحدة — فيكتشفه
   مستخدم اللغة الأخرى بعد أشهر.

   أمر التحقق:
   grep -nE '(margin|padding|border)-(left|right)|text-align:\s*(left|right)' assets/css/*.css
   ===================================================================== */

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

* { margin: 0; padding: 0; }

html {
    /* لا font-size ثابت بـpx: يتجاوز إعداد المتصفح ويكسر تكبير الخط
       لمن يحتاجه. الافتراضي 16px وهو أساس سلّم rem كله. */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    min-block-size: 100vh;
}

/* ---------------------------------------------------------------------
   الوسائط: أبعاد محجوزة تمنع قفز التخطيط (CLS)

   الصورة بلا أبعاد تحجز صفر ارتفاع حتى تُحمَّل، ثم تدفع ما تحتها فجأة.
   المستخدم الذي بدأ يقرأ يجد النص قفز من تحت عينه.
   --------------------------------------------------------------------- */
img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

/* ---------------------------------------------------------------------
   النصوص
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
    text-wrap: balance;   /* يمنع بقاء كلمة وحيدة في سطر العنوان الأخير */
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p, li {
    /* 65–75 محرفاً: أطول منه يُتعب العين عند الارتداد لبداية السطر التالي */
    max-inline-size: var(--measure);
    text-wrap: pretty;
}

a {
    color: var(--color-brand);
    text-underline-offset: 0.2em;   /* يبعد الخط عن نزول الحروف العربية */
}
a:hover { color: var(--color-brand-hover); }

/* الأرقام والمبالغ: أرقام جدولية متساوية العرض فتصطف الخانات رأسياً */
.num, td.num, .amount {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    /* الأرقام تبقى LTR داخل النص العربي — سلوك يونيكود الصحيح */
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------
   التركيز — لا يُزال أبداً

   إزالة حلقة التركيز تقطع التنقّل بلوحة المفاتيح كلياً: المستخدم يضغط
   Tab ولا يعرف أين هو. :focus-visible يُظهرها لمستخدم الكيبورد ويخفيها
   عن ضغطة الفأرة — فلا حجة جمالية لإزالتها.
   --------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   عناصر التفاعل
   --------------------------------------------------------------------- */
button, input, select, textarea {
    font: inherit;      /* لا ترث الخط تلقائياً — تصير بخط النظام */
    color: inherit;
}

button, [role='button'], a.btn {
    min-block-size: var(--touch-min);
    min-inline-size: var(--touch-min);
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   الأيقونات الاتجاهية

   تُقلب في RTL لأنها تشير إلى تدفّق القراءة لا إلى جهة ثابتة.
   سهم «التالي» يتجه يساراً في العربية ويميناً في الإنجليزية.
   ما لا يرتبط بالتدفّق (أيقونة تحميل، علامة صح) لا يحمل هذه الفئة.
   --------------------------------------------------------------------- */
[dir='rtl'] .icon-directional { transform: scaleX(-1); }

/* ---------------------------------------------------------------------
   مساعدات التخطيط — منطقية بالكامل
   --------------------------------------------------------------------- */
.container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;                    /* لا margin-left/right */
    padding-inline: var(--space-4);
}

@media (min-width: 48rem) {
    .container { padding-inline: var(--space-8); }
}

.stack > * + * { margin-block-start: var(--space-4); }

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

/* يُقرأ بقارئ الشاشة ولا يُرى — للعناوين البنيوية ووصف الأزرار الأيقونية.
   لا display:none: الأخير يحجبه عن قارئ الشاشة أيضاً فيُفقد الغرض. */
.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* رابط التخطّي: أول ما يصله Tab — يقفز فوق التنقّل إلى المحتوى مباشرةً */
.skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);      /* لا left */
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-raised);
    color: var(--color-text);
    border-radius: var(--radius-md);
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------
   حارس الحركة العام — أي حركة جديدة ترثه مجاناً
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}