/* ═══════════════════════════════════════════════════════════════════
   GAIBRA — الطبقة 2 · عائلةُ أصنافِ المخطَّط التنظيميّ (.gviz-org)

   الإصدار : 1.1
   التاريخ : 2026-09-12
   الحاكم  : Canon D.2 Addendum C §C.5.1 (طبقةُ المظهر — VS-1)
             · §C.5.4 v1.1 (العرضُ والتكبير — VS-11..VS-15)
             Canon UI.01 §UI.01.2 (قاعدةُ الطبقات) · §UI.01.3.2 (الاشتقاق)
             · §UI.01.10 (الاستجابة) · §UI.01.11 (المحاذاةُ المنطقيّة)

   ═══ ما تمّ في v1.1 ═══
     ① ★★ أُسقطت **كلُّ** قيمةِ لونٍ حرفيّةٍ من v1.0 — وكانت 24 قيمة
        (#f4f6f9 · #0f766e · #2a9d8f · #a7d9d3 … وعشرةُ رموزِ `*-dark`).
        وv1.0 كتبها لأنّ أسماءَ رموزِ الطبقة 1 لم تكن بين يديه، فكُتبت
        `var(--token, fallback)` بأسماءٍ **مُخترَعة** (`--surface-2`،
        `--accent-strong`، `--text-strong`) لا وجودَ لها في المنصّة
        ⇒ البديلُ كان يعمل **دائماً**، والرسمُ يحمل هويّةً أجنبيّةً
        صامتة. والآن رُفع `gaibra-design.css` فصارت الأسماءُ الحقيقيّةُ
        معلومة: `--accent` · `--accent-soft` · `--accent-faint` ·
        `--accent-ink` · `--accent-fg` · `--accent-line` · `--surface` ·
        `--raised` · `--line` · `--fg-body` · `--fg-faint` · `--hover`.
        ⇒ صفرُ بديلٍ لونيٍّ في هذا الملفّ: الرمزُ يعمل أو يُكشَف العطل.

     ② ★ حُذفت كتلةُ `@media (prefers-color-scheme: dark)` بكاملها.
        رموزُ الطبقة 1 **تنقلب بنفسها** مع الوضع، فكتابةُ وضعٍ ليليٍّ
        ثانٍ هنا تُنتج منظومتَي لونٍ تتباعدان بأوّل تعديل.

     ③ VS-11: أربعُ درجاتِ تكبيرٍ بـ`:checked` — مُلائم · 100% · 150% · 250%
        تضبط `inline-size` بدلالة `--gviz-org-nat` (العرضُ الطبيعيُّ يمرّره
        الراسمُ رقماً بلا وحدة). صفرُ JavaScript وصفرُ CSS مُولَّد.
     ④ VS-11-أ: «مُلائم» = العرضُ الطبيعيُّ + `max-inline-size:100%`
        ⇒ الصغيرُ بمقاسه والكبيرُ يهبط للحاوية — **بلا رقمِ حدٍّ مُخمَّن**.
     ⑤ VS-12: التمريرُ انتقل إلى `.gviz-org__pane` (لوحٌ واحدٌ يُمرِّر)،
        ولم يبقَ على الحاوية — فلا مُمرِّرانِ متداخلان.
     ⑥ VS-14: صندوقُ ملءِ الشاشة (`checkbox:checked` ⇒ `fixed; inset:0`)،
        وشريطُ الدرجاتِ **داخله** فيبقى التكبيرُ عاملاً فيه.
     ⑦ VS-15: ورقةُ طباعةٍ حقيقيّة — صفحةٌ عرضيّة، الأزرارُ مخفيّة،
        الألوانُ تُطبَع، والصندوقُ يعود إلى السياق.

   ═══ دَينٌ أُعيد تصنيفُه (ق-ي · §C.5.4.5) ═══
     v1.0 أعلن أنّ الصوابَ دمجُ هذه العائلة في ملفّ §34 وحذفُ هذا الملفّ.
     ورُفع `gaibra-design.css`: **11,141 سطراً · 457KB** ⇒ الدمجُ يوجب
     إعادةَ كتابةِ ملفٍّ لا يُسلَّم في محادثةٍ، وخطرُه أكبرُ من عائده.
     ★ فصار الحكم: يبقى ملفَّ طبقةٍ ثانيةٍ **مُجزَّأً** ويُسجَّل في ترتيب
       الـ`<link>` بعد `gaibra-design.css`. والشرطُ المُلزِم: بادئةٌ واحدةٌ
       (`gviz`)، وصفرُ إعادةِ تعريفٍ لصنفٍ قائمٍ هناك (فُحِص: لا تقاطعَ —
       `.gviz-org*` معدومةٌ في §34)، وترويسةُ إصدارٍ في الملفّين.
     ★ سطرُ قياسِ عدمِ التقاطع:
       Select-String -Pattern 'gviz-org' -Path .\wwwroot\css\gaibra-design.css
       ⟵ متى صار العددُ غيرَ صفرٍ فقد وُلد تعريفٌ مزدوج.

   ملاحظةٌ حاكمة: لا لونَ يحمل معنًى وحدَه — الفئةُ مكتوبةٌ في المفتاح
   أسفل المخطَّط أيضاً، فيُقرأ في الطباعةِ الرماديّةِ وعند عمى الألوان.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1 — الحاوية ═══════════════════════════════════════════════════
   لا `overflow` هنا: التمريرُ صار وظيفةَ `__pane` وحدَه (VS-12).
   ومُمرِّرانِ متداخلانِ يسرقان العجلةَ أحدُهما من الآخر.               */

.gviz-org-wrap {
    inline-size: 100%;
    max-inline-size: var(--gviz-max, 100%);
    margin-block: var(--s-4);
}

/* ═══ 2 — مُدخلاتُ الحالة (VS-13) ═══════════════════════════════════
   مخفيّةٌ بصريّاً و**ليست** `display:none`: تلك تُخرجها من شجرةِ
   الإدراك فتضيع بلوحةِ المفاتيح وقارئِ الشاشة. و٢٨ عقدةً لا تُقرأ
   بالفأرةِ وحدَها.                                                  */

.gviz-org__z,
.gviz-org__fs {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    opacity: 0;
}

/* ═══ 3 — شريطُ الدرجات ═════════════════════════════════════════════ */

.gviz-org__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1);
    margin-block-end: var(--s-2);
}

.gviz-org__zbtn,
.gviz-org__fsbtn,
.gviz-org__close {
    font-family: var(--font-ar);
    font-size: var(--fs-micro);
    font-weight: var(--w-semi);
    padding-block: 3px;
    padding-inline: var(--s-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--fg-faint);
    cursor: pointer;
    user-select: none;
}

    .gviz-org__zbtn:hover,
    .gviz-org__fsbtn:hover,
    .gviz-org__close:hover {
        background: var(--hover);
        color: var(--fg-body);
    }

/* الدرجةُ النافذة — تُقرأ من حالةِ المُدخل، والقيمةُ من الطبقة 1 */
.gviz-org__z--fit:checked ~ .gviz-org__stage .gviz-org__zbtn--fit,
.gviz-org__z--z100:checked ~ .gviz-org__stage .gviz-org__zbtn--z100,
.gviz-org__z--z150:checked ~ .gviz-org__stage .gviz-org__zbtn--z150,
.gviz-org__z--z250:checked ~ .gviz-org__stage .gviz-org__zbtn--z250 {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

/* حلقةُ التركيز تظهر على الزرّ لا على المُدخلِ المخفيّ */
.gviz-org__z:focus-visible ~ .gviz-org__stage .gviz-org__bar,
.gviz-org__fs:focus-visible ~ .gviz-org__stage .gviz-org__bar {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ═══ 4 — اللوحُ ولوحُ التمرير ══════════════════════════════════════ */

.gviz-org__stage {
    display: block;
}

.gviz-org__pane {
    overflow: auto;                 /* VS-12 — يُمرَّر ولا يُقصّ */
    -webkit-overflow-scrolling: touch;
    max-block-size: 70vh;           /* بالشاشةِ لا برقمِ بكسل (§UI.01.10) */
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.gviz-org {
    display: block;
    block-size: auto;
    font-family: inherit;           /* §UI.01.4.1 — لا خطَّ أجنبيّاً مثبَّتاً */
}

/* ── درجاتُ التكبير (VS-11) ───────────────────────────────────────
   `--gviz-org-nat` رقمٌ بلا وحدةٍ يمرّره الراسمُ = العرضُ الطبيعيُّ بالبكسل.
   والضربُ في `1px`/`1.5px`/`2.5px` يُنتج طولاً صحيحاً في calc().
   ولا يُعاد تخطيطٌ ولا تُقرأ بياناتٌ ثانية — العرضُ وحدَه يتبدَّل (R8). */

.gviz-org__z--fit:checked ~ .gviz-org__stage .gviz-org {
    inline-size: calc(var(--gviz-org-nat, 800) * 1px);
    max-inline-size: 100%;          /* ★ VS-11-أ: الحاويةُ هي الحدّ */
}

.gviz-org__z--z100:checked ~ .gviz-org__stage .gviz-org {
    inline-size: calc(var(--gviz-org-nat, 800) * 1px);
    max-inline-size: none;
}

.gviz-org__z--z150:checked ~ .gviz-org__stage .gviz-org {
    inline-size: calc(var(--gviz-org-nat, 800) * 1.5px);
    max-inline-size: none;
}

.gviz-org__z--z250:checked ~ .gviz-org__stage .gviz-org {
    inline-size: calc(var(--gviz-org-nat, 800) * 2.5px);
    max-inline-size: none;
}

/* ═══ 5 — صندوقُ ملءِ الشاشة (VS-14) ════════════════════════════════
   زرُّ الإغلاقِ وزرُّ الفتحِ تسميتانِ لنفسِ المُدخل — فلا نصَّ يُستبدَل
   بـCSS (وهو ما لا تستطيعه أصلاً)، بل تظهر واحدةٌ وتغيب الأخرى.     */

.gviz-org__close {
    display: none;
}

.gviz-org__fs:checked ~ .gviz-org__stage {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 60);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4);
    background: var(--surface);
}

    .gviz-org__fs:checked ~ .gviz-org__stage .gviz-org__pane {
        flex: 1 1 auto;
        max-block-size: none;
    }

    .gviz-org__fs:checked ~ .gviz-org__stage .gviz-org__close {
        display: inline-block;
    }

    .gviz-org__fs:checked ~ .gviz-org__stage .gviz-org__fsbtn {
        display: none;
    }

/* ═══ 6 — سطرُ التصريحِ بالمقاس (VS-17) والتعليق ════════════════════ */

.gviz-org__meta,
.gviz-org__cap {
    margin-block-start: var(--s-1);
    font-size: var(--fs-micro);
    color: var(--fg-faint);
    text-align: start;              /* §UI.01.11 — منطقيّةٌ لا شرطيّة */
}

/* ═══ 7 — العنوان داخل الرسم ════════════════════════════════════════ */

.gviz-org__title {
    font-size: 14px;
    font-weight: var(--w-bold);
    fill: var(--fg);
}

/* ═══ 8 — الصناديق: الأساسُ المشترك ═════════════════════════════════ */

.gviz-org__node {
    fill: var(--raised);
    stroke: var(--line);
    stroke-width: 1.25;
}

/* الصندوقُ الخلفيُّ في التعدُّد الفعليّ (n ≤ 3) — ظلٌّ بنيويٌّ لا تزيين */
.gviz-org__node--ghost {
    fill: var(--surface);
    opacity: 0.85;
}

/* ── تدرُّجُ المستويات بالفئة (VS-2) ──────────────────────────────
   الفئةُ تحكم اللونَ والسماكة، لا رقمُ المستوى: رقمُ المستوى يتبدّل
   بإضافة طبقةٍ واحدة فينتقل العريضُ إلى مسمَّى لا يستحقّه.
   والسلَّمُ من عائلةِ `--accent` وحدَها (§UI.01.3.2): نافذ ⟶ خافت.
   ──────────────────────────────────────────────────────────────── */

.gviz-org__node--executive {
    fill: var(--accent);
    stroke: var(--accent-line);
    stroke-width: 2;
}

.gviz-org__node--manager {
    fill: var(--accent-soft);
    stroke: var(--accent-line);
    stroke-width: 1.75;
}

.gviz-org__node--supervisor {
    fill: var(--accent-faint);
    stroke: var(--accent-line);
    stroke-width: 1.5;
}

.gviz-org__node--staff {
    fill: var(--raised);
    stroke: var(--line);
    stroke-width: 1.25;
}

/* الاستشاريّ: حدٌّ متقطِّعٌ — الخطُّ نفسُه يقول «ليس خطَّ سلطة» */
.gviz-org__node--advisory {
    fill: var(--surface);
    stroke: var(--accent-line);
    stroke-width: 1.25;
    stroke-dasharray: 5 3;
}

/* عقدةٌ بلا أبٍ مُطابِق (SE-4): تُعلَن معلَّقةً ولا تُنسَب لأبٍ مُخمَّن.
   ★ ولغةُ الغياب في المنصّة واحدة: حدٌّ متقطّعٌ + `--accent`
     (gaibra-design.css §سطر 471) — فلا لغةَ إنذارٍ ثانيةً تُختَرع هنا. */
.gviz-org__node--orphan {
    stroke: var(--accent);
    stroke-dasharray: 3 3;
}

/* ═══ 9 — النصّ داخل الصناديق ═══════════════════════════════════════ */

.gviz-org__label {
    font-size: 11.5px;
    font-weight: var(--w-semi);
    fill: var(--fg-body);
}

.gviz-org__unit {
    font-size: 9.5px;
    fill: var(--fg-faint);
}

/* تباينُ النصّ يتبع الخلفيّةَ النافذة — والمحدِّدُ `:has()` لأنّ النصَّ
   شقيقُ المستطيلِ داخل `.gviz-org__cell` ولا يحمل فئتَه.
   ★ دَينٌ مُعلَن: متصفّحٌ بلا `:has()` يُبقي النصَّ `--fg-body` فوق
     الدرجةِ النافذة ⇒ تباينٌ ضعيفٌ لا اختفاء. والعلاجُ الكامل أن
     يُصدر الراسمُ فئةَ العقدةِ على النصِّ أيضاً — بندٌ لاحقٌ صغير. */
.gviz-org__cell:has(.gviz-org__node--executive) .gviz-org__label {
    font-weight: var(--w-bold);
    fill: var(--accent-fg);
}

.gviz-org__cell:has(.gviz-org__node--executive) .gviz-org__unit {
    fill: var(--accent-fg);
    opacity: 0.85;
}

.gviz-org__cell:has(.gviz-org__node--manager) .gviz-org__label,
.gviz-org__cell:has(.gviz-org__node--supervisor) .gviz-org__label {
    font-weight: var(--w-bold);
    fill: var(--accent-ink);
}

.gviz-org__cell:has(.gviz-org__node--manager) .gviz-org__unit,
.gviz-org__cell:has(.gviz-org__node--supervisor) .gviz-org__unit {
    fill: var(--accent-ink);
    opacity: 0.8;
}

/* ═══ 10 — خطوطُ التبعيّة ═══════════════════════════════════════════ */

.gviz-org__link {
    stroke: var(--line);
    stroke-width: 1.25;
    fill: none;
}

/* تبعيّةٌ استشاريّة — متقطِّعةٌ (VS-8) */
.gviz-org__link--advisory {
    stroke: var(--accent-line);
    stroke-dasharray: 5 4;
}

/* ═══ 11 — علامةُ التعدُّد بلا عدد: خطَّان (VS-3) ════════════════════ */

.gviz-org__multi-rule {
    stroke: var(--fg-body);
    stroke-width: 1.25;
}

/* ═══ 12 — شارةُ ×n (عددٌ مُصرَّحٌ به فقط) ═══════════════════════════ */

.gviz-org__badge-bg {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 1;
}

.gviz-org__badge {
    font-size: 10px;
    font-weight: var(--w-bold);
    fill: var(--fg);
}

/* ═══ 13 — المفتاح ══════════════════════════════════════════════════ */

.gviz-org__swatch {
    stroke-width: 1;
}

.gviz-org__legend-text {
    font-size: 10.5px;
    fill: var(--fg-faint);
}

.gviz-org__legend-note {
    font-size: 9.5px;
    fill: var(--fg-faint);
}

/* ═══ 14 — الاستجابة (§UI.01.10) ════════════════════════════════════ */

@media (max-width: 879px) {
    /* على الجوّال يضيق اللوحُ رأسيّاً — والدرجةُ تبقى خيارَ القارئ */
    .gviz-org__pane {
        max-block-size: 60vh;
    }
}

/* ═══ 15 — الطباعة (VS-15) ══════════════════════════════════════════
   ★ `!important` هنا مقصودٌ ومحصور: قواعدُ الدرجةِ أعلى نوعيّةً
     (`:checked ~ … .gviz-org`)، وسباقُ النوعيّةِ في وسطٍ نهائيٍّ كالورق
     أسوأُ من التصريح. وهو محدودٌ بكتلةِ الطباعةِ وبخاصّيّةِ المقاسِ وحدها. */

@page {
    size: landscape;
    margin: 10mm;
}

@media print {
    .gviz-org__bar {
        display: none;
    }

    .gviz-org__pane {
        overflow: visible;
        max-block-size: none;
        border: 0;
    }

    .gviz-org-wrap .gviz-org {
        inline-size: 100% !important;
        max-inline-size: 100% !important;
    }

    .gviz-org {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* الصندوقُ المفتوحُ يعود إلى السياق فلا يُطبَع لوحاً فارغاً */
    .gviz-org__fs:checked ~ .gviz-org__stage {
        position: static;
        inset: auto;
        padding: 0;
        background: none;
    }

    /* الفئةُ تُقرأ باللونِ وبالمفتاحِ معاً — فيُطبَع اللون */
    .gviz-org__node,
    .gviz-org__swatch {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}