/*
   ─────────────────────────────────────────────────────────────
   ٢ · الأساس: الطباعة والاتجاه والوصول
   ─────────────────────────────────────────────────────────────
   كل قاعدة اتجاهية تستخدم الخصائص المنطقية (inline-start/end)
   فتخدم العربية والإنجليزية من ورقة واحدة بلا نسخة مكرّرة.
*/

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    color: var(--text);
    transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
    font-size: var(--t-ui);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* الخط يتبع اتجاه الصفحة */
html[dir='rtl'] body { font-family: var(--font-ar); }
html[dir='ltr'] body { font-family: var(--font-en); }

/* ═══ سلّم العناوين ═══
   كايرو ثقيل بصريًا؛ لذا تُشدّ المسافة بين الحروف قليلًا في الأوزان العالية
   ويُخفَّض ارتفاع السطر، وإلا بدت العناوين مفكّكة. */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--s-3);
    line-height: var(--lh-tight);
    color: var(--text);
    text-wrap: balance;
}

h1 { font-size: var(--t-2xl); font-weight: var(--fw-bold); letter-spacing: -.01em; }
h2 { font-size: var(--t-xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--t-lg); font-weight: var(--fw-semibold); }
h4, h5, h6 { font-size: var(--t-md); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

small, .small { font-size: var(--t-sm); }
strong, b { font-weight: var(--fw-semibold); }

ul, ol { margin: 0 0 var(--s-4); padding-inline-start: 1.35rem; }
li { margin-bottom: var(--s-1); }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--s-6) 0;
    opacity: 1;
}

/* الأرقام في الجداول والعدّادات تصطف رأسيًا */
time, .tabular, .num { font-variant-numeric: tabular-nums; }

/* الرموز البرمجية والأرقام اللاتينية تبقى LTR داخل نص عربي */
code, kbd, samp, pre, .ltr, [dir='ltr'] {
    direction: ltr;
    unicode-bidi: isolate;
}

code, kbd, samp, pre { font-family: var(--font-mono); font-size: .9em; }

code {
    background: var(--surface-inset);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xs);
    padding: .1em .4em;
    color: var(--text-2);
}

pre { margin: 0; }
pre code { background: none; border: 0; padding: 0; }

/* ═══ الروابط ═══ */

a {
    color: var(--accent);
    text-decoration: none;
    text-underline-offset: .2em;
    transition: color var(--dur) var(--ease);
}

a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ═══ الوصول ═══ */

:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--p-500);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection { background: var(--p-100); color: var(--p-900); }

.visually-hidden, .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* رابط التخطّي: أول ما يصله المفتاح Tab */
.skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--s-4);
    z-index: var(--z-toast);
    background: var(--p-700);
    color: var(--n-0);
    padding: var(--s-3) var(--s-5);
    border-radius: 0 0 var(--r) var(--r);
    font-weight: var(--fw-semibold);
}

.skip-link:focus-visible {
    inset-block-start: 0;
    color: var(--n-0);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* لحظة قلب السمة: كل سطح يتحرّك بسرعته فتبدو الصفحة كأنها تهتزّ.
   يضع theme.js هذا الصنف لإطار واحد فينتقل كل شيء دفعة واحدة. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
}

/* ═══ الوسائط ═══ */

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* ═══ الأيقونات ═══
   طقم SVG واحد مضمَّن في الصفحة: بلا طلب شبكة وبلا اعتماد خارجي. */

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.18em;
    display: inline-block;
}

.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.5em; height: 1.5em; }
.icon--xl { width: 2rem; height: 2rem; stroke-width: 1.5; }

/* الأسهم الاتجاهية تنعكس مع اتجاه الصفحة */
html[dir='rtl'] .icon--flip { transform: scaleX(-1); }

/* ═══ الحاويات ═══ */

.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.shell--narrow { max-width: 780px; }
.shell--reading { max-width: 68ch; }
.shell--wide { max-width: var(--shell-wide); }

@media (max-width: 575px) {
    .shell { padding-inline: var(--s-4); }
}

.page { padding-block: var(--s-7) var(--s-10); flex: 1 0 auto; }
.page--tight { padding-block: var(--s-6) var(--s-8); }

/* ═══ مساعدات صغيرة ═══ */

.stack        { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--sm    { gap: var(--s-2); }
.stack--lg    { gap: var(--s-6); }
.row-inline   { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row-inline--tight { gap: var(--s-2); }
.push-end     { margin-inline-start: auto; }

.text-muted   { color: var(--text-muted) !important; }
.text-faint   { color: var(--text-faint) !important; }
.text-strong  { color: var(--text) !important; font-weight: var(--fw-semibold); }
.text-ok      { color: var(--ok-600) !important; }
.text-warn    { color: var(--warn-600) !important; }
.text-err     { color: var(--err-500) !important; }
.text-accent  { color: var(--accent) !important; }

.lead {
    font-size: var(--t-md);
    font-weight: var(--fw-regular);
    color: var(--text-2);
    line-height: var(--lh-body);
}

/* شريط علوي رفيع يفصل الأقسام بلا خط ثقيل */
.rule { height: 1px; background: var(--line); border: 0; margin: var(--s-6) 0; }

.no-wrap { white-space: nowrap; }
.full { width: 100%; }

/* الطباعة على ورق: تُخفى عناصر التنقّل ويُسطَّح اللون.
   الورق أبيض دائمًا، فتُعاد الرموز إلى قيم الوضع الفاتح مهما كانت
   السمة على الشاشة — وإلا خرجت الصفحة بحبر أسود يغطّي كل مساحتها. */
@media print {
    :root, [data-theme='dark'] {
        color-scheme: light;

        --canvas: #fff;
        --surface: #fff;
        --surface-sunken: #fff;
        --surface-raised: #fff;
        --surface-inset: #f4f6f8;

        --line: #ccc;
        --line-soft: #e0e0e0;
        --line-strong: #999;

        --text: #000;
        --text-2: #222;
        --text-muted: #555;
        --text-faint: #777;

        --sh-1: none;
        --sh-2: none;
        --sh-3: none;
        --sh-4: none;
    }

    .site-header, .site-footer, .console-sidebar, .console-topbar,
    .page-head__actions, .theme-switch, .no-print { display: none !important; }

    body { background: #fff; color: #000; }
    .card, .panel { border: 1px solid #ccc; box-shadow: none; }
}