/* ==========================================================================
   منصة متابعة التوصيات — نظام التصميم

   الهوية البصرية للمصرف العربي للتنمية الاقتصادية في أفريقيا، مأخوذة من
   مصدرها لا مقدرة بالعين: ألوان badea.org المعلنة في نظام تصميمه
   (‎--e-global-color-*‎) وألوان ملف الشعار في ‎wwwroot/img‎ — وهما يتفقان:

       الأخضر الأساس   #3A913F     (وفي الشعار #319041)
       الأخضر الفاتح   #78D64B     (وفي الشعار #6FD54C)
       أخضر الإبراز    #61CE70
       حبر النص        #212322
       المحايدات       #F9F9F9 · #D9E1E2 · #75787B

   وبناء الشاشة على طريقة البوابات والأنظمة الحكومية: سطح أبيض واسع، وأخضر
   غامق يحمل الترويسة والقائمة، وشريط هوية رفيع فوق كل عنوان قسم، ومسار
   يقول أين أنت، وبطاقات ذات حواف هادئة لا ظلال ثقيلة.

   كل درجة أدناه مقيسة لا مختارة: النسب المكتوبة بجوارها من حساب WCAG على
   السطح الذي تجلس عليه فعلا. لا إطار، ولا ورقة أنماط خارجية.
   ========================================================================== */

:root {
  /* brand — سلم من أخضر المصرف: درجتان أغمق منه ليحملا نصا، وهو نفسه للزينة.

     أخضر الهوية #3A913F على الأبيض ٣٫٩٦:١ — يصلح علامة ولا يصلح حبرا ولا
     سطحا يحمل أبيض. فالسلم ينزل منه إلى درجتين تقرآن، ويبقى هو في موضعه:
     نقطة، وحد، وأيقونة. والأرقام مقيسة:

       --brand    على البطاقة ١٠٫٣٦:١ · على أرضية الصفحة ٩٫٦٠ · على الوشاح ٩٫٠٩
       --brand-3  على البطاقة  ٥٫٣٨:١ · على أرضية الصفحة ٤٫٩٩ · على الوشاح ٤٫٧٣
       --brand-4  زينة لا حبر: نقطة مؤشر، وحد بطاقة، ووجه أيقونة على لوح فاتح */
  --brand: #0F4A26;
  --brand-2: #15612F;
  --brand-3: #1C7A3D;
  --brand-4: #3A913F;
  --brand-wash: #E8F3EA;

  /* accent — الأخضر الفاتح من الهوية نفسها.

     كان يطلى به البند العامل في القائمة، وزر التسجيل، وأطراف خيوط الهوية.
     وهو لون مشبع: على مساحة صغيرة إشارة، وعلى مساحة كبيرة ضجيج — والقائمة
     أكبر سطح ملون في الشاشة وأطوله بقاء أمام العين. فبقي في موضع واحد
     يحتاج لونا لا يشبه شيئا حوله: حلقة التركيز في الوضع الداكن، حيث يعطي
     ٩٫٣٥:١ على البطاقة. */
  /* ------------------------------------------------ رموز القائمة الجانبية

     القائمة لونان لا أكثر: سطحها، ولون الهوية. وكل ما فيها درجة من هذين —
     المرور، والمختار، والحبر، والشريط — فتقرأ لوحا واحدا هادئا لا طيفا.

     ومسطحة: لا تدرج ينزل من أعلاها، ولا وهج خلف اسمها، ولا ظل تحت علامتها.
     كان فيها الثلاثة، ومعها أخضر فاتح مشبع على البند العامل وعلى زر التسجيل.
     وهي أكبر سطح ملون في الشاشة وأطوله بقاء أمام العين: اللون المشبع على
     مساحة صغيرة إشارة، وعلى مساحة كبيرة إزعاج.

     والافتراضي أبيض. البوابات الحكومية تضع قائمتها على سطح فاتح وتترك لون
     الجهة للبند العامل وحده — فيقرأ الأخضر حيث يدل، لا حيث يملأ. والدرجتان
     الأخريان تبقيان في لوحة المظهر لمن يفضلهما.

     ورموز السطح لا ترث من ‎--brand-surface‎: ذلك رمز يحمل حبرا أبيض فينقلب
     فاتحا في الوضع الداكن، وكان يشق القائمة شريطا فاتحا نصه عليه ٣٫٦٢:١.

     الأرقام مقيسة على السطح الذي تجلس عليه:
       الحبر العادي ١٠٫٠١:١ · الثانوي ٥٫٤٥ · حبر المختار على أرضيته ٨٫٧٨ */
  /* أرضية شاشة الدخول: أغمق درجة من أرضية الصفحة، فالبطاقة بيضاء ومسطحة بلا
     ظل والفصل على الفرق بين السطحين وحده. ورمز لا قيمة مكتوبة: كتبتها أولا
     ‎#EDF2EE‎ فبقيت فاتحة في الوضع الداكن، فجلس النص الخافت — وهو يرتفع إلى
     رمادي فاتح هناك — على أرضية فاتحة بـ٢٫٢١:١. */
  --auth-bg: #EDF2EE;
  /* وهجان واسعان خلف البطاقة، ولون حدها وظلها وأرضية حقولها وحلقة تركيزها.
     رموز لا قيم مكتوبة: كلها تنقلب في الوضع الداكن. */
  --auth-glow-1: rgba(58, 145, 63, .18);
  --auth-glow-2: rgba(15, 74, 38, .12);
  --auth-line: var(--border);
  --auth-shadow: 0 1px 2px rgba(12, 46, 26, .04), 0 12px 28px -12px rgba(12, 46, 26, .18),
                 0 40px 80px -32px rgba(12, 46, 26, .22);
  --auth-field: var(--n-25);
  --auth-ring: rgba(28, 122, 61, .16);
  /* حد الحقل عند التركيز، وأرضية اللغة المختارة. ولا يرثان ‎--brand‎: ذلك حبر
     ينقلب في الوضع الداكن إلى نعناع شاحب، فتصير أرضية الزر المختار شاحبة
     وحبره أبيض عليها — ١٫٤:١، لا يقرأ. */
  --auth-focus-line: var(--brand-3);
  --auth-on-bg: var(--brand);

  --side-bg: var(--n-0);
  --side-line: var(--border);
  --side-ink: var(--n-700);
  --side-ink-soft: var(--n-500);
  --side-ink-strong: var(--text);
  /* رمزان ينقلبان مع الوضع، لا قيمتان مكتوبتان.

     كتبتهما أولا ‎#F1F6F2‎ و‎#E4EFE7‎ — درجتين خضراوين فاتحتين — فبقيتا فاتحتين
     في الوضع الداكن: البند العامل أرضيته فاتحة وحبره ‎--brand‎ الذي يرتفع هناك
     إلى نعناع شاحب، فيقرآن ١٫١٠:١. والرمزان القائمان يعطيان الدرجتين نفسهما
     تقريبا في الفاتح (٨٫٧٥ و٩٫٠٩ للحبر والعلامة) وينقلبان وحدهما في الداكن
     (١٠٫٧٤ و١٠٫٩٣). */
  --side-hover: var(--n-100);
  --side-sel: var(--brand-wash);
  --side-mark: var(--brand);
  --side-on-mark: #FFFFFF;
  --side-field: var(--n-50);
  --side-field-line: var(--border);

  --accent: #78D64B;

  /* الذهبي لم يعد لون الهوية، وبقي لون معنى واحد: «انتبه، ولم يفت بعد».
     هذا ما يقوله ‎data-token="gold"‎ في الشارات والأشرطة وبطاقات المؤشرات،
     وهو مفردة حالة كالأزرق والأحمر — لا زينة، فلا يتبع الهوية إذا تغيرت. */
  --gold: #C89B3C;
  --gold-2: #DDB45E;
  --gold-soft: #F3E6C9;

  /* neutrals — سلم واحد بدل ألوان متفرقة، فتتناسق الحدود والظلال والنصوص.

     الدرجة مائلة إلى الأخضر بمقدار لا يسمى لونا: محايدات الهوية نفسها
     (#F9F9F9 و#D9E1E2 و#75787B) ليست رمادا أزرق، ورماد أزرق تحت أخضر
     يقرأ خلافا لا حيادا. */
  --n-0:  #FFFFFF;
  --n-25: #FAFCFA;
  --n-50: #F4F7F4;
  --n-100:#ECF1EC;
  --n-200:#DCE5DE;
  --n-300:#CBD5CC;
  --n-400:#9FACA1;
  /* 4.5:1 على الأبيض، وعلى أرضية الصفحة، وعلى تظليل الصف المتأخر. والأرقام
     بعد تحويل السلم: ٥٫٤٥ على البطاقة، و٥٫٠٥ على الأرضية، و٤٫٧٧ على --n-100،
     و٤٫٩١ على أرضية الكهرماني، و٤٫٦٧ على أرضية الأحمر. */
  --n-500:#5F6D62;
  --n-600:#4E5B51;
  --n-700:#3A453D;
  --n-800:#232C26;

  /* surfaces */
  --bg: var(--n-50);
  --card: var(--n-0);
  --card-2: var(--n-25);
  --border: var(--n-200);
  --border-2: var(--n-300);

  /* text — حبر الهوية نفسه: ١٥٫٨١:١ على البطاقة و١٤٫٦٥ على أرضية الصفحة */
  --text: #212322;
  --muted: var(--n-500);
  --on-brand: #E6F1E9;

  /* status vocabulary — the single source of colour meaning.
     Checked with the palette validator rather than by eye: these four pass the
     colour-vision separation check outright (worst adjacent pair ΔE 8.3), and
     amber's 2.87 contrast is relieved the way the rule requires — every status
     mark in the platform carries its written label beside it, and the register
     is itself the table view. Darkening amber to clear 3:1 was tried and
     measured: it drops the pair to ΔE 6.0 and trades a relieved warning for a
     real one. */
  --blue: #1D5FA8;  --blue-bg: #E8F0FA;
  --green: #297D4E; --green-bg: #E6F5EC;   /* 4.50:1 على أرضيته، كان 3.77 */
  --amber: #956616; --amber-bg: #FCF2DE;   /* 4.51:1، كان 2.65 — أسوأ ما في اللوحة */
  --red: #BE3D3D;   --red-bg: #FCE9E9;     /* 4.58:1 نصا، و5.35 لأبيض فوقه في زر الخطر */
  /* ٤٫٧٤:١ على أرضيته و٥٫٤٢ على البطاقة. كان #646F7D فيعطي ٤٫٤٧ بعد أن مال
     سلم المحايدات إلى الأخضر — وفرقه عن إخوته الأربعة يبقى فوق ٣٦ ΔE. */
  --grey: #606B79;  --grey-bg: var(--n-100);

  /* geometry */
  /* استدارة معتدلة. كانت ١٣، وهي استدارة تطبيق لا استدارة نظام: الحواف
     المدورة كثيرا تلين الجداول والبطاقات فتقرأ بطاقات منتج. والقارئ يزيدها
     أو ينقصها من لوحة المظهر، وهذه نقطة البدء. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 11px;
  /* البطاقة الوحيدة التي ترتفع عن أرضيتها — شاشة الدخول — تحتاج دورانا أوسع:
     نصف قطر صغير على صندوق كبير يقرأ صندوقا حادا. */
  --r-xl: 18px;
  --r-pill: 999px;

  /* مسطح: الحد يفصل، لا الظل.

     البطاقة كانت ترتفع عن الصفحة بظل، والمؤشر يرتفع أكثر عند المرور، والقائمة
     ترتفع بتدرج — فتقرأ الشاشة طبقات فوق طبقات. الحد الرفيع يفصل كما يفصل
     الظل، ويستوي على كل شاشة وفي كل طباعة، ولا يضيف لونا رماديا تحت كل صندوق.

     والظل يبقى لما يطفو فعلا: نافذة فوق الصفحة، ولوح ينسدل، ودرج يفتح — هناك
     يقول الظل «هذا ليس من الصفحة»، وهو خبر لا زينة. */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 10px 20px -8px rgba(12, 46, 26, .16), 0 24px 48px -16px rgba(12, 46, 26, .20);
  /* لون التركيز ودائرته.

     ويبقى دافئا بعد أن صارت الهوية خضراء، عن قصد: مؤشر التركيز يدل على
     موضع لوحة المفاتيح، فلا يصح أن يشبه لون الهوية الذي يطلى به نصف ما في
     الشاشة. وهو يجتاز ٣:١ التي يطلبها 1.4.11 على كل سطح يقع عليه:
     ٣٫٧٤ على البطاقة، و٣٫٤٦ على أرضية الصفحة، و٣٫٢٨ على الوشاح الأخضر.

     والدائرة كانت وهجا شفافا بنسبة ١٨٪ — ١٫٣١:١ على الأبيض و١٫١٥:١ على الداكن،
     أي لا مؤشر تركيز أصلا لخمسة عناصر تلغي الإطار وتستبدله بها. صارت حلقة
     مصمتة يفصلها عن العنصر لون سطحه، فترى على أي خلفية.

     وحبر التنبيهات: كان قيما ثابتة بدرجات الوضع الفاتح، بينما تنقلب أرضياتها في
     الوضع الداكن — فيجلس الأخضر الغامق على أخضر غامق (٢٫٠٣:١)، والأزرق على
     أزرق (١٫٥٠:١). رسالة خطأ لا تقرأ هي أسوأ ما في شاشة. */
  /* تباعد الحروف.

     العربية خط واصل: الحرف يلتصق بجاره بوصلة، والمتصفح يطبق letter-spacing بعد
     تشكيل الحروف — فيفتح فجوة عند كل وصلة. الموجب يقطع الكلمة أشلاء، والسالب
     يدفع الحروف بعضها في بعض فتلتصق نقط ب وت وث وي بالحرف الذي بعدها. وثمانية
     مواضع كانت تضعه على نص عربي: عنوان الصفحة، وعناوين البطاقات، ورؤوس الجداول،
     واسم المنصة، وعنوان لوحة العرض.

     صفر هو الصواب للعربية. ويبقى رمزا لا رقما، فصفحة لاتينية تعيد ضبطه دون أن
     تلاحق ثمانية مواضع. */
  --track-tight: 0;
  --track-wide: 0;

  --focus: #A87D22;
  --ring: 0 0 0 2px var(--card), 0 0 0 4px var(--focus);

  /* سطح يحمل نصا أبيض — لا حبر.

     --brand و--red يؤديان الدورين معا: عنوان مكتوب بهما، وزر مملوء بهما. والوضع
     الداكن يقلبهما إلى درجة فاتحة ليقرأ الحبر — فينقلب معهما كل سطح: الأبيض على
     --brand الداكن ١٫٨٦:١، وعلى --red الداكن ٢٫٤١:١. ثلاثة عشر عنصرا: الزر
     الرئيسي، وزر الخطر، وشارة غير المقروء، والصفحة الحالية في المرقم، واللسان
     العامل، وغيرها — كلها تصير غير مقروءة في الوضع الداكن.

     فصار للسطح رمزه: يبقى غامقا في الوضعين، وينتقى في الداكن ليفصل عن البطاقة
     أيضا (٣٫٢٥:١ و٣٫٢٠:١)، لا ليحمل الأبيض وحده (٥٫٢٧:١ و٥٫٣٥:١).
     وفي الوضع الفاتح الأبيض على السطح الأخضر ١٠٫٣٦:١. */
  --brand-surface: #0F4A26;
  --red-surface: #BE3D3D;
  --green-surface: #297D4E;
  /* تنبيه ليس خطأ: فعل رفض، لا عملية فشلت. أبيض عليه ٧٫٤:١، ويبقى غامقا في
     الوضعين كأخويه — الحبر الكهرماني ينقلب إلى درجة فاتحة، والسطح لا. */
  --amber-surface: #7A5410;

  /* لون تظليل المصفوفة. كان مكتوبا في الترميز نفسه، فيطلى أخضر غامق فوق خلية
     غامقة في الوضع الداكن: أسخن خلية وأبردها تفترقان بـ١٫٠١:١ — مصفوفة مسطحة
     لا تقول شيئا. الوضع يقرر الآن: حبر غامق فوق خلية فاتحة، وفاتح فوق غامقة. */
  --heat-rgb: 15, 74, 38;

  --ok-ink: #1F5F3C;   --ok-line: #C2E6D0;
  --warn-ink: #7A5410; --warn-line: #EDD9AE;
  --err-ink: #8E2727;  --err-line: #F5C9C9;
  --info-ink: #16436F; --info-line: #C9DBF0;

  /* سلم مسافات واحد يحكم الحشو والفجوات */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --gap: var(--s-4);

  --sidebar: 268px;
  --rail: 68px;
  --topbar: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* كود المنصات يبني طباعته على IBM Plex Sans Arabic، فهو الأصل هنا. والبديل
     يختاره القارئ من لوحة المظهر: من يقرأ العربية طويلا له رأي في خطها، ولا
     يصح أن يحبس في واحد. القائمة كلها خطوط عربية مفتوحة المصدر. */
  --font: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;

  /* جذر القياس: كل أحجام النص rem، فيكبر النص كله بقيمة واحدة دون أن تتحرك
     المسافات ولا الأيقونات — وهذا هو معنى «حجم الخط» لا تكبير الصفحة. */
  --ui-size: 16px;
}

html[data-font="cairo"]    { --font: "Cairo", system-ui, sans-serif; }
html[data-font="tajawal"]  { --font: "Tajawal", system-ui, sans-serif; }
html[data-font="almarai"]  { --font: "Almarai", system-ui, sans-serif; }
html[data-font="notokufi"] { --font: "Noto Kufi Arabic", system-ui, sans-serif; }
html[data-font="changa"]   { --font: "Changa", system-ui, sans-serif; }
html[data-font="readex"]   { --font: "Readex Pro", system-ui, sans-serif; }
html[data-font="rubik"]    { --font: "Rubik", system-ui, sans-serif; }
html[data-font="messiri"]  { --font: "El Messiri", system-ui, sans-serif; }
html[data-font="amiri"]    { --font: "Amiri", Georgia, serif; }
html[data-font="system"]   { --font: system-ui, "Segoe UI", Tahoma, sans-serif; }

/* الوضع المضغوط: سلم المسافات وحده ينكمش. لا يمس النص ولا مساحات اللمس. */
html[data-density="compact"] {
  --s-3: 9px;  --s-4: 12px; --s-5: 15px; --s-6: 17px; --s-7: 22px; --s-8: 28px;
  --topbar: 56px;
}

/* ------------------------------------------------------------------ reset */

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

html { -webkit-text-size-adjust: 100%; font-size: var(--ui-size); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0 0 .4em; font-weight: 700; line-height: 1.3; color: var(--brand); }
h1 { font-size: 1.375rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.875rem; }
p { margin: 0 0 .8em; }
a { color: var(--brand-3); text-decoration: none; }
a:hover { text-decoration: underline; }

/* رابط داخل فقرة لا يميزه لونه وحده: فرقه عن نص حوله 1.64:1، وهو دون الثلاثة
   التي تشترطها القاعدة — فمن لا يميز الأزرق لا يرى أن هناك رابطا أصلا. */
.callout a, .note a, .help a, p a, td a.small, figcaption a { text-decoration: underline; }
small { font-size: 0.75rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* يخفى بالقص لا بدفعه تسعة آلاف بكسل جانبا: الدفع يمد عرض الصفحة المتدفق،
   فتمرر الصفحة أفقيا على هاتف — وهي مخالفة إعادة التدفق. */
.skip-link {
  position: absolute; inset-inline-start: 0; top: 0; z-index: 999;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  /* الحشو صفر في الخفاء: الصندوق ‎border-box‎ لا ينكمش تحت حشوه، فكان يبقى
     ٣٢×٢٠ وإن كان مقصوصا — ويعده كل فاحص هدفا ظاهرا دون الحد. */
  padding: 0;
  background: var(--brand-surface); color: #fff; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus {
  width: auto; height: auto; min-height: 24px; overflow: visible; clip: auto;
  padding: 10px 16px;
}

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

/* ------------------------------------------------------------------ shell */

.shell { display: flex; min-height: 100vh; }

/* ---------------------------------------------------------------- sidebar */

.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--side-bg);
  color: var(--side-ink);
  border-inline-end: 1px solid var(--side-line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 40;
  transition: width .2s var(--ease), margin .2s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* كتلة الهوية أعلى القائمة: تفصل عن بنود التنقل بخيط رفيع، كما تفصل البوابات
   الحكومية قفل هويتها عن قائمتها — فلا يقرأ اسم النظام بندا من البنود. */
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--side-line);
  margin-bottom: var(--s-3);
}
/* علامة المصرف بلونها على لوح أبيض: أربعة وخمسون خطا رفيعا لا تقرأ بيضاء على
   أرضية داكنة عند أربعين بكسلا على شاشة عادية. واللوح بحد لا بظل: الظل يرفعها
   عن سطح مسطح فتقرأ زرا. */
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--side-line); border-radius: var(--r-sm);
}
.brand-mark img { display: block; width: 30px; height: 30px; }
.brand-text { min-width: 0; }
.brand-text strong {
  display: block; font-size: 0.9062rem; color: var(--side-ink-strong);
  letter-spacing: var(--track-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text span { display: block; font-size: 0.6875rem; color: var(--side-ink-soft); }

/* ------------------------------------------------------------------- nav

   القائمة كانت مسطحة: ست مجموعات وعشرون رابطا مفتوحة كلها، فتطول عن الشاشة
   ويصبح الوصول إلى آخرها تمريرا. الآن كل مجموعة تطوى، ولا تفتح إلا التي فيها
   الصفحة الحالية — ومعها بحث يرشح البنود، وطي كامل إلى شريط أيقونات.
   ---------------------------------------------------------------------- */

.nav { padding: 0 var(--s-3) var(--s-4); overflow-y: auto; overflow-x: hidden; flex: 1; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: var(--side-line); border-radius: var(--r-pill); }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li { margin: 0 0 1px; }

/* البند: لوح أيقونة ثم النص ثم عداد */
.nav-link {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 7px var(--s-2); border: 0; border-radius: var(--r-sm);
  background: none; text-align: start; cursor: pointer;
  color: var(--side-ink); font-family: inherit; font-size: 0.8438rem; font-weight: 500;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-ico {
  width: 27px; height: 27px; flex: 0 0 27px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--side-hover);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-ico .ico { width: 16px; height: 16px; }
.nav-link .txt { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link:hover { background: var(--side-hover); color: var(--side-ink-strong); text-decoration: none; }
.nav-link:hover .nav-ico { background: var(--side-sel); }
.nav-link:focus-visible { outline: 2px solid var(--side-mark); outline-offset: 1px; }

/* البند العامل: أرضية من درجة واحدة، وحبر ولوح بلون الهوية، وشريط على الحافة
   البادئة. لون واحد يعلم به، لا لون ثالث يتعلم. */
.nav-link.active {
  background: var(--side-sel);
  color: var(--side-mark); font-weight: 700;
}
.nav-link.active .nav-ico { background: var(--side-mark); color: var(--side-on-mark); }
.nav-link.active::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 62%; border-radius: var(--r-pill); background: var(--side-mark);
}

/* الإجراء الأول للدور، بارزا فوق القوائم لا بندا بينها. مصمت بلون الهوية:
   كان أخضر فاتحا مشبعا، وهو أصخب ما في الشاشة وأولها وقوعا تحت العين. */
.nav a.nav-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding: 9px var(--s-3); border-radius: var(--r-sm);
  background: var(--side-mark); color: var(--side-on-mark);
  font-size: 0.8438rem; font-weight: 700;
  transition: opacity .18s var(--ease);
}
.nav a.nav-cta .ico { width: 17px; height: 17px; flex: 0 0 17px; }
.nav a.nav-cta:hover { opacity: .88; color: var(--side-on-mark); text-decoration: none; }
.nav a.nav-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.nav-link .count {
  margin-inline-start: auto; background: var(--side-sel); color: var(--side-ink-strong);
  border-radius: var(--r-pill); padding: 1px 8px; font-size: 0.6875rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nav-link .count.alert { background: var(--red-surface); color: #fff; }

/* ---------------------------------------------------- الشاشة القصيرة

   القائمة ثلاثة مداخل، فلا تمرر على أي ارتفاع. وما يضيق هنا ترويسة الشعار
   والتذييل وحشو البنود، على حاسوب محمول ارتفاع نافذته سبعمائة.

   الحشو يضيق قبل أن يضيق النص: حجم الحرف كما هو، وأهداف اللمس فوق حدها،
   والذي ينقص فراغ لا معنى فيه. وعلى الشاشة الطويلة يبقى الفراغ كما هو.
   ---------------------------------------------------------------------- */
@media (max-height: 780px) {
  .brand { padding-block: var(--s-3); }
  .sidebar-foot { padding-block: var(--s-3); }
  .nav { padding-bottom: var(--s-3); }
  .nav a.nav-cta { margin-bottom: var(--s-2); padding-block: 8px; }
  .nav-link { padding-block: 6px; }
  .nav-ico { width: 25px; height: 25px; flex: 0 0 25px; }
}

/* --------------------------------------------------------- الطي إلى شريط

   المطوية تعرض الأيقونات وحدها. تتمدد فوق المحتوى عند المرور أو عند وصول
   لوحة المفاتيح إليها — focus-within، فمن يتنقل بالمفاتيح يقرأ الأسماء مثل
   من يمرر الفأرة، ولا يحتاج إلى فتحها ليعرف أين هو.
   ---------------------------------------------------------------------- */

html[data-menu="hidden"] .sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: 268px; flex-basis: 268px;
  display: none;
  box-shadow: var(--shadow-3);
}
html[data-menu="hidden"] .sidebar.open { display: flex; }
html[data-menu="hidden"] .burger { display: grid; place-items: center; }

.rail-btn {
  display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px;
  margin-inline-start: auto; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--side-hover); color: var(--side-ink);
}
.rail-btn:hover { background: var(--side-sel); color: var(--side-ink-strong); }
.rail-btn .ico { width: 15px; height: 15px; }

/* ---------------------------------------------------- قدم القائمة الجانبية

   ودرجة واحدة للقائمة لا ثلاث: كانت تختار بين فاتحة وبالهوية وداكنة، فيقرأ
   كل تركيب لونا آخر في أكبر سطح ملون في الشاشة — وهوية المصرف واحدة. الفاتحة
   هي المعتمدة، ولون الهوية يبقى حيث يدل: البند المختار، والعلامة، والزر.
   ---------------------------------------------------------------------- */

.sidebar-foot {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--side-line);
}
.sidebar-foot .avatar { background: var(--side-mark); color: var(--side-on-mark); }
.sidebar-foot .who { min-width: 0; line-height: 1.35; }
.sidebar-foot .who strong {
  display: block; font-size: 0.7812rem; color: var(--side-ink-strong); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-foot .who span {
  display: block; font-size: 0.6562rem; color: var(--side-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ----------------------------------------------------------------- topbar */

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  min-height: var(--topbar);
  /* سطح مصمت لا زجاج: الطمس يخلط ما تحته بما فوقه، فيقرأ الشريط طبقة
     شفافة تمر تحتها الصفحة — وهو عكس المسطح. والمصمت يستوي على كل متصفح. */
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-6);
  position: sticky; top: 0; z-index: 30;
}
/* خيط الهوية تحت الشريط.

   البوابات الحكومية تفصل ترويستها عن محتواها بخيط من لون الجهة لا بحد رمادي:
   يقول «هذه ترويسة هذا النظام» في بكسلين، ولا يضيف ضجيجا. يرسم بعنصر زائف
   لا بحد، فلا ينازع ‎border-bottom‎ الرمادي الذي يفصل الشريط عن الصفحة. */
.topbar::after {
  content: ""; position: absolute; inset-block-end: -1px; inset-inline: 0; height: 2px;
  background: var(--brand);
}

.topbar h1 { margin: 0; font-size: 1.125rem; letter-spacing: var(--track-tight); }

/* المسار: أين أنت من النظام. كان سطرا رماديا واحدا، وصار مسارا يقرأ من جذره
   إلى موضعه — وهو ما تعرضه بوابات الخدمات: أيقونة الجذر، ثم سهم، ثم القسم. */
.topbar .crumb {
  display: flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 0.75rem; margin-top: 1px;
}
.topbar .crumb::before {
  content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%;
  background: var(--brand-4);
}
.topbar-spacer { flex: 1; }

/* أدوات الشريط العلوي: أزرار أيقونية هادئة تتجمع في مجموعة واحدة */
.topbar-tools { display: flex; align-items: center; gap: var(--s-1); }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--n-600); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.icon-btn .ico { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--n-100); color: var(--brand); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.topbar-divider { width: 1px; height: 24px; background: var(--border); margin: 0 var(--s-2); }

.burger {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--r-sm); width: 38px; height: 38px; cursor: pointer;
  color: var(--brand); place-items: center;
}
.burger .ico { width: 20px; height: 20px; }

.user-chip {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2); border: 1px solid transparent;
  border-radius: var(--r-sm); background: transparent;
  transition: background .18s var(--ease);
}
.user-chip:hover { background: var(--n-100); text-decoration: none; }
.avatar {
  width: 32px; height: 32px; border-radius: var(--r-pill); flex: 0 0 32px;
  /* ‎--brand-surface‎ لا ‎--brand‎: الثاني حبر عناوين ينقلب في الوضع الداكن
     إلى نعناع شاحب، فتصير الأحرف البيضاء عليه ١٫٣٠:١. والأول سطح يبقى غامقا
     في الوضعين عمدا — ١٠٫٣٦:١ في الفاتح و٥٫٢٧ في الداكن. */
  background: var(--brand-surface); color: #fff;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
}
.user-chip .who { text-align: start; line-height: 1.25; }
.user-chip .who strong { display: block; font-size: 0.7812rem; color: var(--text); font-weight: 600; }
.user-chip .who span { font-size: 0.6562rem; color: var(--muted); }

.content { padding: var(--s-6); flex: 1; max-width: 1600px; width: 100%; }
.content > .page-head { margin-bottom: var(--s-5); }
.page-head { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.page-head .grow { flex: 1; min-width: 200px; }
.page-head p { margin: 2px 0 0; color: var(--muted); font-size: 0.7812rem; }

/* عنوان القسم يحمل شريط هويته: قضيب قصير على حافته البادئة بلوني الهوية.
   هذه علامة البوابات الحكومية على «هنا يبدأ قسم» — ترى قبل أن تقرأ، وتقسم
   صفحة طويلة إلى أقسام دون خطوط أفقية تقطعها. */
.page-head > .grow > h2,
.page-head > .grow > h1 {
  position: relative; padding-inline-start: 13px; margin-bottom: 0;
}
.page-head > .grow > h2::before,
.page-head > .grow > h1::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .18em;
  width: 4px; height: .92em; border-radius: var(--r-pill);
  background: var(--brand);
}
.page-head > .grow > p { padding-inline-start: 13px; }

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-1);
}
.card + .card { margin-top: var(--gap); }

/* رأس البطاقة بلا خط فاصل: الفراغ والوزن يكفيان للفصل، والخط يزيد ضجيجا.
   وعنوانه يحمل شريط الهوية نفسه الذي يحمله عنوان القسم، أصغر منه — فتقرأ
   الصفحة سلما واحدا: قسم، ثم بطاقة، ثم صف. */
.card-head {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5) var(--s-2);
}
.card-head h3, .card-head h2 {
  position: relative; margin: 0; padding-inline-start: 11px;
  font-size: 0.9375rem; letter-spacing: var(--track-tight);
}
.card-head h3::before, .card-head h2::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .2em;
  width: 3px; height: .88em; border-radius: var(--r-pill);
  background: var(--brand);
}
.card-head .hint { color: var(--muted); font-size: 0.7188rem; font-weight: 400; }
.card-head .spacer { flex: 1; }
.card-body { padding: var(--s-5); }
.card-body.tight { padding: var(--s-3) var(--s-4); }

/* جدول يملأ بطاقته: الحشو يأتي من الخلايا لا من البطاقة */
.card-head + .table-wrap { margin-top: var(--s-2); }
.card-foot {
  padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border);
  background: var(--card-2); border-radius: 0 0 var(--r) var(--r);
  font-size: 0.75rem; color: var(--muted);
}

.grid { display: grid; gap: var(--gap); }
/* ابن الشبكة عرضه الأدنى محتواه ما لم يقل غير ذلك، فبطاقة فيها جدول عريض تتمدد
   إلى عرضه وتخرج عن الشاشة بدل أن يمرر الجدول في وعائه. الأعمدة تستعمل
   minmax(0,1fr) لهذا السبب نفسه، والابن يحتاجه أيضا. */
.grid > * { min-width: 0; }
.grid.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* ثماني بطاقات لا تنقسم على عدد أعمدة يقرره auto-fit: يعطي خمسة على ١٤٤٠،
   فتقرأ الصفوف ٥ ثم ٣ — صف ثان ناقص تحت صف كامل. العدد صريح الآن فينقسم. */
.grid.tiles { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px)  { .grid.tiles { grid-template-columns: repeat(4, 1fr); } }
.span2 { grid-column: span 2; }

/* -------------------------------------------------------------------- KPI

   كان لكل بطاقة شريط علوي ملون، فتقرأ الصفحة كصف من الخطوط قبل أن تقرأ كرقم.
   صار اللون نقطة صغيرة بجوار العنوان: يكفي للدلالة، ولا ينازع الرقم نفسه. */

.kpi {
  position: relative;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--s-4) var(--s-5) var(--s-5);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 2px;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
/* حافة الهوية على الجانب البادئ: خفية في السكون، تضيء عند الاقتراب. تعرض
   بـtransform لا بتغيير عرض، فلا تحرك ما حولها ولا تعيد تخطيط الصف. */
.kpi::before {
  content: ""; position: absolute; inset-block: -1px; inset-inline-start: -1px;
  width: 3px; border-start-start-radius: var(--r); border-end-start-radius: var(--r);
  background: var(--brand);
  transform: scaleY(0); transform-origin: top;
  transition: transform .22s var(--ease);
}
.kpi:hover, .kpi:focus-within { box-shadow: var(--shadow-2); border-color: var(--border-2); }
.kpi:hover::before, .kpi:focus-within::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .kpi::before { transition: none; }
}

.kpi .label {
  font-size: 0.7188rem; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: var(--s-2);
}
.kpi .label::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: var(--r-pill); background: var(--brand-4);
}
.kpi[data-token="blue"]  .label::before { background: var(--blue); }
.kpi[data-token="green"] .label::before { background: var(--green); }
.kpi[data-token="gold"]  .label::before { background: var(--gold); }
.kpi[data-token="red"]   .label::before { background: var(--red); }
.kpi[data-token="grey"]  .label::before { background: var(--grey); }

.kpi .value {
  font-size: 1.875rem; font-weight: 800; color: var(--brand); line-height: 1.1;
  letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 3px;
  transition: color .15s var(--ease);
}
.kpi .value .n { display: inline-flex; align-items: baseline; gap: 2px; }
.kpi .value .unit { font-size: 0.875rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi .sub { font-size: 0.6875rem; color: var(--muted); }
/* الحركة عن اللقطة السابقة. السهم يقول الاتجاه، واللون يقول معناه — وهما
   لا يتطابقان: ارتفاع المتأخرة سهم صاعد بلون الخطر. */
.kpi .trend {
  font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
  /* بجوار الرقم لا في طرف البطاقة: الفرق يقرأ مع ما هو فرق فيه */
  margin-inline-start: 6px; align-self: center;
}
.kpi .trend.up { color: var(--green); }
.kpi .trend.down { color: var(--red); }

/* ---------------------------------------------------- شريط المؤشرات الثمانية

   ثمانية أرقام في صف واحد، بترتيب اللوحة التي تقرؤها الإدارة العليا اليوم:
   الرقم أولا بلونه، واسمه تحته. وكان الاسم فوق الرقم وتحته سطر شرح — ثلاثة
   أسطر في بطاقة — وكانت البطاقات مقسومة طبقتين بعنوانين، فتقرأ الصفحة أربع
   بطاقات ثم عنوانا ثم أربعا. والصف الواحد يقرأ دفعة واحدة كما يقرأ سطر أرقام.

   واللون على الرقم لا على نقطة بجوار اسمه: ‎--amber‎ لا ‎--gold‎ للكهرماني،
   فالذهبي لون سطح (٢٫٨٧:١ نصا) والكهرماني حبر يقرأ.
   ---------------------------------------------------------------------- */

/* أعداد صريحة لا auto-fit: الثمانية على ١٤٤٠ تقسم خمسة ثم ثلاثة — صف ثان
   ناقص تحت صف كامل. والعتبة على عرض النافذة والقائمة الجانبية تأخذ ٢٤٠ منها،
   فالصف الواحد يبدأ حيث يبقى للبطاقة ١٤٠ بكسل لا أقل. */
.grid.tiles.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 680px)  { .grid.tiles.strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .grid.tiles.strip { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

.tiles.strip .kpi { align-items: center; text-align: center; gap: 3px; padding: var(--s-4) var(--s-3); }
.tiles.strip .kpi .value { justify-content: center; font-size: 1.75rem; }
.tiles.strip .kpi .label { justify-content: center; line-height: 1.45; }
.tiles.strip .kpi .label::before { display: none; }
.tiles.strip .kpi[data-token="blue"]  .value { color: var(--blue); }
.tiles.strip .kpi[data-token="green"] .value { color: var(--green); }
.tiles.strip .kpi[data-token="gold"]  .value { color: var(--amber); }
.tiles.strip .kpi[data-token="red"]   .value { color: var(--red); }

/* ------------------------------------------------------------ شريط الأقسام

   اللوحة التي تعرض على الإدارة العليا ملف واحد بأقسام مرقمة، يتنقل بينها شريط
   أعلى الصفحة. والمنصة تفرق المادة نفسها على ست شاشات، فالشريط نفسه هنا: رقم
   القسم ثم اسمه، والمفتوح منها بلون الهوية.
   ---------------------------------------------------------------------- */

.board-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--gap); padding: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
/* البند بقدر اسمه، والفراغ يوزع بينها. وكان كل بند يتمدد بالتساوي، فثمانية
   أقسام على شاشة فيها قائمة جانبية تلتف سبعة وواحدا تحتها. */
.board-tabs a {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 0 1 auto; min-height: 38px; padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 0.8125rem; font-weight: 600; color: var(--muted); white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.board-tabs a:hover { background: var(--n-100); color: var(--text); text-decoration: none; }
.board-tabs a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.board-tabs .n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-xs);
  background: var(--n-100); color: var(--muted);
  font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* عدد ما ينتظر في القسم: لا يظهر صفرا، فوجوده وحده خبر */
.board-tabs .c {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--red-bg); color: var(--red);
  font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.board-tabs a.on { background: var(--brand-surface); color: #fff; }
.board-tabs a.on .c { background: rgba(255, 255, 255, .22); color: #fff; }
.board-tabs a.on .n { background: rgba(255, 255, 255, .22); color: #fff; }
@media (max-width: 860px) {
  /* يمرر أفقيا بدل أن يلتف ثلاثة أسطر فيأكل ثلث الشاشة قبل أول رقم */
  .board-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .board-tabs a { flex: 0 0 auto; }
}
body.present .board-tabs { display: none; }

/* عنقود التكرار في شاشة المعالجات: عنوانه ثم جدول أعضائه */
.cluster { padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
.cluster:last-child { border-bottom: 0; padding-bottom: 0; }
.cluster:first-child { padding-top: 0; }
.cluster .head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }

/* علامة الجهة في الترويسة، حين لا قائمة جانبية تحملها */
.topbar-brand {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 9px; background: var(--n-0); border: 1px solid var(--border);
}

/* خلية النسبة التراكمية في جدول باريتو: شريط ثم رقم في سطر واحد */
.cum-cell { display: flex; align-items: center; gap: var(--s-2); }
.cum-cell .bar { flex: 1 1 auto; }
.cum-cell b { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: end; }
/* صف الأسباب الحيوية في جدول باريتو: تظليل خفيف لا لون صارخ */
.tbl tr.vital td { background: var(--gold-soft); }

/* ------------------------------------------------ تغطية الهيكل التنظيمي

   قطاع في كل سطر، وإداراته شرائح: المغطاة بعلامة، وغير المغطاة بشرطة وحبر
   أخفت. والعلامة نص لا لون وحده — «✓» و«—» يقرآن في الطباعة بالأبيض والأسود
   وعند من لا يفرق بين الأخضر والرمادي.
   ---------------------------------------------------------------------- */

.coverage { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.coverage:last-child { border-bottom: 0; padding-bottom: 0; }
.coverage:first-child { padding-top: 0; }
.coverage .head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.coverage .head .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.coverage .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.coverage .chip.is-on { background: var(--green-bg); color: var(--green); border-color: transparent; }
.coverage .chip.is-off { background: var(--n-50); color: var(--muted); border-color: var(--border); }

/* -------------------------------------------------- اختيار الجهة المصدرة

   السؤال الذي يسبق كل رقم على اللوحة: «أرقام أي لجنة؟». فقائمته فوق كل شيء،
   لا حقلا من ثمانية داخل لوحة تصفية مطوية.
   ---------------------------------------------------------------------- */

.committee-pick {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.committee-pick > label { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.committee-pick .select-wrap { flex: 0 1 320px; min-width: 200px; }
.committee-pick select { width: 100%; }

/* سطر تاريخ نشر السجل: يرفع إلى جوار القائمة لا تحتها بفراغ كامل. */
.register-asof { margin: calc(-1 * var(--s-2)) 0 var(--s-3); }
.register-asof a { text-decoration: underline; }

/* البطاقة رابط إلى صفوفها: السؤال بعد كل رقم «أيها؟» */
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { text-decoration: none; }
a.kpi[href]:hover .value { color: var(--brand-3); }
a.kpi:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* أقدم ما لم يغلق: سطر باسمه ومرجعه، لا رقما في بطاقة لا تفتح على شيء */
.kpi-note {
  margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--text);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
}
.kpi-note a { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }

/* hover breakdown — one figure, the units behind it, no extra click */
/* اللوحة بعرض بطاقتها لا أوسع. كان أدناها ٢٥٠ بكسل والبطاقة ٢٢٠، ومرساها
   حافة البطاقة — فتتجاوز آخر بطاقة في الصف حافة الصفحة وتمدها أفقيا: ٤١
   بكسل على شاشة ١٩٢٠. ولا تعرف CSS أي بطاقة آخر صفها حتى تقلب جهتها، فما
   يضمن ألا يفيض هو ألا يتجاوز مرساه أصلا. */
.kpi .breakdown {
  position: absolute; inset-inline: 0; top: calc(100% + 6px);
  min-width: 0; max-height: 260px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: var(--r); box-shadow: var(--shadow-3);
  padding: 8px; z-index: 25;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.kpi:hover .breakdown, .kpi:focus-within .breakdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.kpi .breakdown h6 { margin: 2px 6px 6px; font-size: 0.6875rem; color: var(--muted); }
.kpi .breakdown .row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 6px; border-radius: var(--r-sm); font-size: 0.75rem;
}
/* الاسم يلتف ولا يقص: اسم إدارة مبتور لا يدل على إدارة */
.kpi .breakdown .row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.kpi .breakdown .row b { flex: 0 0 auto; }
.kpi .breakdown .row:nth-child(odd) { background: var(--card-2); }
.kpi .breakdown .row b { color: var(--brand); }

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px;
  font-size: 0.7188rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge[data-token="blue"]  { color: var(--blue);  background: var(--blue-bg);  border-color: #C9DBF0; }
.badge[data-token="green"] { color: var(--green); background: var(--green-bg); border-color: #C2E6D0; }
.badge[data-token="gold"]  { color: var(--amber); background: var(--amber-bg); border-color: #EDD9AE; }
.badge[data-token="red"]   { color: var(--red);   background: var(--red-bg);   border-color: #F5C9C9; }
.badge[data-token="grey"]  { color: var(--grey);  background: var(--grey-bg);  border-color: var(--border-2); }
.badge.brand { color: #fff; background: var(--brand-surface); }
.badge.outline { background: transparent; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; font-size: 0.75rem;
}
.chip .x { cursor: pointer; color: var(--muted); font-weight: 700; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }

.pill-ref {
  font-family: var(--mono); font-size: 0.7188rem; font-weight: 700;
  background: var(--brand-surface); color: #fff;
  border-radius: var(--r-sm); padding: 1px 7px; letter-spacing: var(--track-wide);
  direction: ltr; display: inline-block;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 0.8125rem; font-weight: 600;
  padding: 8px 15px; min-height: 38px;
  border-radius: var(--r-sm); border: 1px solid var(--border-2);
  background: var(--card); color: var(--text);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover { background: var(--card-2); border-color: var(--brand-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.disabled { opacity: .55; cursor: not-allowed; }
/* الفعل الرئيسي: أخضر الهوية مصمتا، وظل خافت بلونه يرفعه عن الصف. الأبيض
   عليه ١٠٫٣٦:١. */
.btn.primary { background: var(--brand-surface); border-color: var(--brand-surface); color: #fff; }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #3A2A08; }
.btn.gold:hover { background: #d8ab4a; }
.btn.danger { background: var(--red-surface); border-color: var(--red-surface); color: #fff; }
.btn.danger:hover { background: #c33a3a; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--brand-3); }
.btn.ghost:hover { background: var(--grey-bg); }
.btn.sm { min-height: 30px; padding: 4px 10px; font-size: 0.75rem; }
.btn.lg { min-height: 46px; padding: 12px 22px; font-size: 0.9375rem; }
.btn.block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ------------------------------------------------------------------ forms */

.field { margin-bottom: 14px; }
.field > label, .lbl {
  display: block; font-size: 0.7812rem; font-weight: 600;
  color: var(--brand); margin-bottom: 5px;
}
.field .help { font-size: 0.7188rem; color: var(--muted); margin-top: 4px; }
.req { color: var(--red); }

/* input:not([type]) ليس زينة. القائمة تعد الأنواع، ومحدد السمة لا يطابق حقلا
   كتب بلا type — والمتصفح يعامله نصا بينما لا يلبسه هذا الطقم شيئا: يخرج بعرضه
   الافتراضي الضيق وخطه وحدوده، وسط نموذج بقية حقوله مصممة. ثمانية حقول مكتوبة
   باليد كانت كذلك، منها «سبب التمديد» في نافذة التمديد. */
input:not([type]),
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%; font-family: inherit; font-size: 0.8438rem; color: var(--text);
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 8px 11px; min-height: 38px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.7; }

/* التعبئة التلقائية.

   المتصفح يطلي الحقل الذي يملؤه بنفسه بأرضيته هو — أزرق باهت في كروم وإدج،
   أصفر في غيرها — ويفرض اللون بأولوية لا تغلبها ‎background‎. فيخرج من شاشة
   الدخول حقلان بلون لا ينتمي إلى اللوحة، وهما أول ما تقع عليه العين.

   الحيلة الوحيدة التي تعمل: ظل داخلي مصمت بلون السطح يغطي طلاءه، وحبر يفرض
   بـ‎-webkit-text-fill-color‎ لأن ‎color‎ وحدها لا تغلبه. والانتقال الطويل
   يؤخر إعادة الطلاء التي يجريها المتصفح بعد أول رسم. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--card) inset;
  box-shadow: 0 0 0 100px var(--card) inset;
  caret-color: var(--text);
  transition: background-color 100000s ease 0s;
}

/* سبب أو ملاحظة داخل نافذة: ثلاثة أسطر تكفي للبدء، وتنمو بما يكتب فيها حتى حد
   لا يخرج النافذة عن الشاشة، ثم تمرر. المقاسات بـrem فتتبع حجم الخط المختار. */
textarea.reason {
  min-height: 5.25rem; max-height: 40vh; resize: vertical;
}

/* العداد تحت الحقل في طرفه المقابل لاتجاه القراءة، فلا يزاحم أول السطر. */
.reason-count {
  font-size: 0.7188rem; color: var(--muted); text-align: end; margin-top: 4px;
}
.reason-count.is-low { color: var(--amber); font-weight: 600; }

/* زر يرسل الآن. لا يحمل disabled — وهو ما كان يسقط قيمته من الطلب — فيؤدي
   الصنف ما كان يؤديه المظهر، وaria-disabled ما كان يؤديه الإعلان، والحارس
   في الشفرة ما كان يؤديه المنع. */
.is-busy { opacity: .62; cursor: progress; pointer-events: none; }

/* التصفية تعمل: شريط رفيع أعلى الصفحة ومؤشر انتظار. لا يخفي شيئا ولا يمنع
   التمرير — الصفحة القديمة ما زالت مقروءة حتى تصل الجديدة. */
html.is-filtering { cursor: progress; }
html.is-filtering::before {
  content: ""; position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 3px; z-index: 400; background: var(--brand);
  animation: filtering 1s ease-in-out infinite;
}
@keyframes filtering {
  0%   { transform: scaleX(0); transform-origin: var(--bar-from, right); }
  50%  { transform: scaleX(1); transform-origin: var(--bar-from, right); }
  100% { transform: scaleX(0); transform-origin: var(--bar-to, left); }
}
:root { --bar-from: left; --bar-to: right; }
[dir="rtl"] { --bar-from: right; --bar-to: left; }

@media (prefers-reduced-motion: reduce) {
  html.is-filtering::before { animation: none; transform: scaleX(1); opacity: .75; }
}
form[aria-busy="true"] { cursor: progress; }
select { appearance: none; background-image: none; padding-inline-end: 28px; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "▾"; position: absolute; inset-inline-end: 10px; top: 50%;
  transform: translateY(-50%); pointer-events: none; color: var(--muted); font-size: 0.6875rem;
}
input:not([type]):focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand-3); box-shadow: 0 0 0 3px rgba(29, 74, 122, .12); outline: none;
}
input[readonly], input[disabled], select[disabled], textarea[disabled] {
  background: var(--grey-bg); color: var(--muted); cursor: not-allowed;
}
input.input-validation-error, select.input-validation-error, textarea.input-validation-error {
  border-color: var(--red); background: #FFFBFB;
}
.field-validation-error, .text-danger { color: var(--red); font-size: 0.7188rem; display: block; margin-top: 4px; }
.validation-summary-errors {
  /* الرموز نفسها التي تلبسها التنبيهات: القيم الثابتة تبقى فاتحة فوق أرضية تنقلب. */
  background: var(--red-bg); border: 1px solid var(--err-line); color: var(--err-ink);
  border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 14px; font-size: 0.7812rem;
}
.validation-summary-errors ul { margin: 0; padding-inline-start: 18px; }
.validation-summary-valid { display: none; }

.check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 0.8125rem; }
.check input { width: 17px; height: 17px; min-height: 0; margin-top: 2px; flex: 0 0 17px; accent-color: var(--brand); }
.check label { font-weight: 500; color: var(--text); margin: 0; }

.switchbox {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 12px; background: var(--card-2); margin-bottom: 8px;
}
.switchbox .t { font-size: 0.8125rem; font-weight: 600; }
.switchbox .d { font-size: 0.7188rem; color: var(--muted); font-weight: 400; }

.form-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.form-grid .wide { grid-column: 1 / -1; }

/* ------------------------------------------------------ نموذج التسجيل

   نموذج أطول من شاشته يحتاج ثلاثة أشياء لم تكن فيه: خريطة تقول أين هو وما بقي
   منه، عمودا للنص وعمودا لما يصنفه، وزر حفظ لا يختبئ في ذيل آخر بطاقة.
   -------------------------------------------------------------------- */

/* السمة hidden تطفئ العنصر مهما لبس: حقل المخاطرة يخفى لجهة لا تستعملها،
   والقاعدة التي تلبسه display لا تنقض إخفاءه. */
[hidden] { display: none !important; }

.stack { display: grid; gap: var(--gap); align-content: start; }

.form-split { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  /* النص أعرض مما يصنفه: هو ما يقرأ ويكتب، والباقي قوائم قصيرة. */
  .form-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.form-split .card { scroll-margin-top: 88px; }

.form-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--gap); }
.form-steps a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 5px 13px;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--card); color: var(--muted);
  font-size: 0.7812rem; font-weight: 600; text-decoration: none;
}
.form-steps a:hover { background: var(--card-2); color: var(--text); text-decoration: none; }
.form-steps .n {
  display: inline-grid; place-items: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--grey-bg); color: var(--brand);
  font-size: 0.6875rem; font-weight: 700;
}
/* الاكتمال يعلن بعلامة ولون معا: اللون وحده لا يقرؤه من لا يميزه. */
.form-steps a.is-done {
  color: var(--ok-ink); border-color: var(--ok-line); background: var(--green-bg);
}
.form-steps a.is-done .n { background: var(--green-surface); color: #fff; }
.form-steps a.is-done::after { content: "\2713"; font-weight: 700; }
/* قسم بلا حقل مطلوب لا ينتظر منه اكتمال، فلا يعرض ناقصا أبدا. */
.form-steps a.is-plain .n { background: transparent; border: 1px dashed var(--border-2); }

.form-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: var(--gap); padding: 12px var(--s-5);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 -6px 18px rgba(15, 74, 38, .09);
}
.form-note { margin: 0; font-size: 0.7188rem; color: var(--muted); }
.form-status {
  margin: 0; margin-inline-start: auto;
  font-size: 0.75rem; font-weight: 700; color: var(--warn-ink);
}
.form-status:empty { display: none; }
.form-status.is-ready { color: var(--ok-ink); }
.form-status.is-ready::before { content: "\2713\00a0"; }

/* التاريخ يقرأ بلغة الواجهة تحت حقل يعرضه بترتيب المتصفح — mm/dd/yyyy على
   متصفح إنجليزي وسط شاشة عربية — فلا يلتبس اليوم بالشهر. */
.date-echo {
  margin: 5px 0 0; font-size: 0.7188rem; font-weight: 600; color: var(--brand-3);
}
.date-echo:empty { display: none; }

textarea.reason.tall { min-height: 9.5rem; }

fieldset { border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; margin: 0 0 16px; }
legend { font-size: 0.8125rem; font-weight: 700; color: var(--brand); padding: 0 6px; }

/* filter bar — six selects and a search, wraps instead of scrolling */
.filters {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  align-items: end;
}
.filters .field { margin: 0; }
.filters .actions { display: flex; gap: 8px; align-items: end; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ------------------------------------------------------------------ tables */

/* relative ليست زينة: نصوص قارئ الشاشة داخل الخلايا مطلقة الموضع، وبلا أب
   موضوع تحل نسبة إلى ما هو خارج الوعاء — فتفلت من قصه وتمد الصفحة 189 بكسل
   إلى اليسار، فتمرر الصفحة أفقيا على هاتف. */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
table.tbl th, table.tbl td {
  padding: var(--s-3) var(--s-4); text-align: start; vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

/* رأس الجدول كان نيليا داكنا، فيثقل كل شاشة فيها جدول ويسحب العين إليه قبل
   البيانات. صار سطحا فاتحا بنص صغير قوي: يقرأ كعنوان عمود لا كشريط. */
table.tbl thead th {
  background: var(--n-50); color: var(--n-600);
  /* uppercase لا أثر له على العربية، وتباعد الحروف يقطع وصلها. */
  font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--track-wide);
  padding-top: var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-2);
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
/* رابط الترتيب كان ارتفاعه ارتفاع نصه — ١٨ بكسل — ومساحة النقر معه */
table.tbl thead th a {
  color: var(--n-600); display: inline-flex; gap: 4px; align-items: center;
  /* عنوان عمود من حرفين يعطي رابطا عرضه ٢٢: الحد يشترط ٢٤ في البعدين */
  min-height: 24px; min-width: 24px; justify-content: center;
}
table.tbl thead th a:hover { color: var(--brand); text-decoration: none; }

/* رأس عمود يرتب. الرأس نفسه يصير زرا، فيبلغه من ينقر ومن يتنقل بالمفاتيح،
   ويعلن ‎aria-sort‎ الحال لقارئ الشاشة. والسهم علامة ثانية إلى جانب الإعلان،
   فلا يحمل الحال شيء واحد. */
table.tbl thead th .th-sort {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: inherit;
}
table.tbl thead th .th-sort:hover { color: var(--brand); }
table.tbl thead th .th-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
table.tbl thead th .th-arrow::before { content: "↕"; opacity: .45; font-size: 0.875em; }
table.tbl thead th[aria-sort="ascending"] .th-arrow::before { content: "↑"; opacity: 1; }
table.tbl thead th[aria-sort="descending"] .th-arrow::before { content: "↓"; opacity: 1; }
table.tbl thead th[aria-sort="ascending"], table.tbl thead th[aria-sort="descending"] { color: var(--brand); }

table.tbl tbody tr { transition: background .14s var(--ease); }
table.tbl tbody tr:hover { background: var(--brand-wash); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr.is-overdue { box-shadow: inset 3px 0 0 var(--red); }
table.tbl tbody tr.is-overdue:hover { background: var(--red-bg); }
table.tbl tfoot td { background: var(--card-2); font-weight: 700; border-top: 1px solid var(--border-2); }
table.tbl td.num, table.tbl th.num { text-align: center; font-variant-numeric: tabular-nums; }
table.tbl.compact th, table.tbl.compact td { padding: var(--s-2) var(--s-3); font-size: 0.7812rem; }
table.tbl .muted { color: var(--muted); font-size: 0.7188rem; }
table.tbl .title-cell { min-width: 260px; max-width: 420px; }
table.tbl .title-cell strong { display: block; font-weight: 600; }

.row-actions { display: flex; gap: 5px; justify-content: flex-start; }

.empty {
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.empty .big { font-size: 2.125rem; opacity: .35; display: block; margin-bottom: 6px; }
.empty h4 { color: var(--brand); }

/* progress */
.bar { background: var(--grey-bg); border-radius: 20px; height: 7px; overflow: hidden; min-width: 60px; }
.bar > span { display: block; height: 100%; border-radius: 20px; background: var(--brand); transition: width .3s ease; }
.bar[data-token="blue"]  > span { background: var(--blue); }
.bar[data-token="green"] > span { background: var(--green); }
.bar[data-token="gold"]  > span { background: var(--gold); }
.bar[data-token="red"]   > span { background: var(--red); }
.bar[data-token="grey"]  > span { background: var(--grey); }
.pct { font-size: 0.7188rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-cell { display: flex; align-items: center; gap: 7px; }

/* pager */
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager .info { color: var(--muted); font-size: 0.75rem; margin-inline-end: auto; }
.pager a, .pager span.cur {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  font-size: 0.7812rem; background: var(--card);
}
.pager span.cur { background: var(--brand-surface); color: #fff; border-color: var(--brand-surface); font-weight: 700; }
.pager a:hover { background: var(--card-2); text-decoration: none; }

/* خطوة المرقم: الشيفرون يشير يمينا في أصله — وهي جهة «السابق» في صفحة من
   اليمين — و.flip يقلبه لـ«التالي». وفي صفحة من اليسار ينعكس الاثنان معا،
   فتبقى العلاقة صحيحة بمتغير واحد بدل قاعدتين لكل اتجاه. */
.pager a.pg-step { display: inline-flex; align-items: center; justify-content: center; }
.pager a.pg-step svg { width: 16px; height: 16px; transform: scaleX(var(--arrow-dir)); }
.pager a.pg-step.flip svg { transform: scaleX(calc(var(--arrow-dir) * -1)); }
.pager .off { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------------ heat map */

.heat { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 0.75rem; }
.heat th {
  font-size: 0.6875rem; font-weight: 700; color: var(--brand); padding: 4px 6px;
  text-align: center; vertical-align: bottom;
}
.heat th.rowhead { text-align: start; font-weight: 600; min-width: 150px; }
/* الرقم يقرأ دائما، واللون قناة ثانية لا أولى — وهذا ما يقوله تعليق المصفوفة نفسه.
   فيقيد مدى التظليل بحيث يبقى الحبر الداكن فوقه عند 4.6:1 على أقصى درجة، بدل أن
   ينقلب النص أبيض في منتصف المدى: هناك نطاق لا يصلح فيه داكن ولا أبيض — 1.71:1. */
.heat td {
  text-align: center; padding: 6px 4px; border-radius: var(--r-sm);
  font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--grey-bg); color: var(--text); min-width: 42px;
}
/* الصفر يهدأ بالوزن لا بإخفائه: #C3CBD8 كان 1.55:1، أي لا يرى أصلا.
   والأرضية رمز لا لون ثابت: #F7F9FC كانت تبقى بيضاء في الوضع الداكن بينما ينقلب
   حبرها إلى فاتح — ٢٫٣٢:١، أي رقم لا يقرأ. */
.heat td[data-heat="0"] { background: var(--card-2); color: var(--muted); font-weight: 400; }

/* رابط الخلية يرث حبر الخلية ولا يلبس لون الروابط: مدى التظليل أعلاه معاير على
   أن يبقى الحبر الداكن فوقه عند 4.6:1، ولون الرابط ‎--brand-3‎ أفتح منه — فهبط
   على الخلايا القوية إلى 2.79:1. الرابط يعرف بالتسطير عند المرور والتركيز. */
/* شارة داخل رابط، في جدول فئات العمر وما يشبهه. الرابط لا يغير لونها — هي
   تقول الحالة، ولونها مفردة معنى — ويقول إنه يفتح بحلقة عند المرور والتركيز.
   والتسطير لا يصلح هنا: الشارة صندوق ملون، والخط تحتها يقرأ زخرفة. */
td > a:has(> .badge) { display: inline-flex; text-decoration: none; border-radius: var(--r-pill); }
td > a:has(> .badge):hover > .badge,
td > a:has(> .badge):focus-visible > .badge { box-shadow: 0 0 0 2px var(--brand-4); }
td > a:has(> .badge):focus-visible { outline: none; }

.heat td a { color: inherit; text-decoration: none; }
.heat td a:hover, .heat td a:focus-visible { text-decoration: underline; color: inherit; }

/* مجموع الصف ليس خلية فارغة. كان يوسم data-heat="0" فيرتدي زي الصفر — وهو أكبر
   رقم في صفه. */
.heat td.total {
  background: var(--brand-wash); color: var(--text); font-weight: 700;
  border-inline-start: 2px solid var(--border-2);
}

/* pareto */
.pareto-row { display: grid; grid-template-columns: 1fr 52px; gap: 10px; align-items: center; margin-bottom: 8px; }
.pareto-row .lbl-row { display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 3px; }
.pareto-row .track { background: var(--grey-bg); border-radius: 4px; height: 16px; overflow: hidden; }
.pareto-row .track > span { display: block; height: 100%; background: var(--brand-3); }
.pareto-row.vital .track > span { background: var(--gold); }
.pareto-row .cum { font-size: 0.7188rem; font-weight: 700; color: var(--muted); text-align: center; }
/* الصف يفتح على توصياته: يبقى صفا في القراءة، ويعلن أنه يفتح عند المرور */
a.pareto-row { color: inherit; text-decoration: none; padding: 4px 6px; border-radius: var(--r-sm); }
a.pareto-row:hover { text-decoration: none; background: var(--brand-wash); }
a.pareto-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.75rem; color: var(--muted); }
.legend .it { display: flex; align-items: center; gap: 6px; }
/* حد شعرة حول ما لونه من البيانات: لون القطاع يختاره من يبني الهيكل، وقد
   يكون كحليا داكنا — ‎#0E2A47‎ لقطاع العمليات — فيختفي شريطه على بطاقة الوضع
   الداكن (١٫٣٥:١). والحد يفصله عن أرضيته ويبقي لونه كما اختير. ويعمل في
   الاتجاهين: لون فاتح جدا كان يختفي على البطاقة البيضاء. */
.legend .sw {
  width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .20);
}
.chart .c-data { stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
html[data-theme="dark"] .legend .sw { box-shadow: inset 0 0 0 1px rgba(233, 242, 235, .38); }
html[data-theme="dark"] .chart .c-data { stroke: rgba(233, 242, 235, .34); }

/* سطر مفتاح ينقر: هدف بارتفاع ٢٤ ولون يتغير، لا رابط أزرق مسطر وسط الألوان. */
.legend a.it {
  color: inherit; text-decoration: none; cursor: pointer;
  min-height: 24px; padding: 2px 6px; margin: -2px -6px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
.legend a.it:hover { background: var(--grey-bg); border-color: var(--border); }
.legend a.it:focus-visible { outline: none; box-shadow: var(--ring); }

/* ------------------------------------------------------------- الطريق للخلف

   شريط العودة فوق السجل. يقرأ أولا لأنه أول ما يحتاجه من فتح توصية ولا يعرف
   كيف يخرج منها، ويوضع قبل البطاقة لا داخلها: هو ليس من السجل، بل من الطريق
   إليه. سهمه يشير يمينا — في صفحة اتجاهها من اليمين، العودة إلى اليمين. */
.back-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.back-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding-block: 6px; padding-inline: 14px 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; color: var(--brand-3); font-weight: 600;
  font-size: 0.8125rem; text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.back-link:hover {
  background: var(--brand-wash); border-color: var(--brand-3); text-decoration: none;
}
.back-link:focus-visible { outline: none; box-shadow: var(--ring); }

/* السهم وحده يتحرك، لا الشريط كله: إزاحة الزر تحت المؤشر تجعل إصابته أصعب.
   وحركته منطقية لا مادية: يزيح نحو الجهة التي يمضي إليها الرابط، فينعكس مع
   اتجاه الصفحة. وشكله أيقونة من الطقم لا محرف →: ذلك المحرف خارج نطاق كل خط
   محمل إلا واحدا، فيرسمه خط النظام بثخانة وخط قاعدة غير اللذين حوله. */
.back-link .arrow {
  display: inline-flex; line-height: 1;
  transform: scaleX(var(--arrow-dir));
  transition: transform .12s ease;
}
.back-link .arrow svg { width: 15px; height: 15px; }

/* الانعكاس والإزاحة في تحويل واحد. الترتيب يعمل لصالحنا: translateX بعد
   scaleX(-1) يزيح في المستوى المقلوب، أي يسارا على الشاشة — فتكفي قاعدة واحدة
   للاتجاهين بدل قاعدتين متكررتين. الشيفرون يشير يمينا في أصله، وهي جهة العودة
   في صفحة من اليمين. */
.back-link:hover .arrow { transform: scaleX(var(--arrow-dir)) translateX(3px); }

:root { --arrow-dir: -1; }
[dir="rtl"] { --arrow-dir: 1; }

.back-note { font-size: 0.75rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .back-link, .back-link .arrow { transition: none; }
  .back-link:hover .arrow { transform: none; }
}

/* charts */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-h-180 { min-height: 180px; }
.chart-h-240 { min-height: 240px; }
.chart-h-260 { min-height: 260px; }
.chart-h-300 { min-height: 300px; }

/* ----------------------------------------------------------- تفاعل المخططات
   العلامة رابط، فتعامل معاملته: مؤشر يد، وحلقة تركيز، وتغير عند المرور.
   opacity وحدها هي ما يتغير — لا الألوان — فلا ينكسر تباين قيس على الأصل. */
.chart .c-hit { cursor: pointer; }
.chart .c-hit:hover { opacity: .82; }
.chart .c-hit:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; }

/* المختار يبقى كاملا، وما عداه يخفت — كما تقرأ لوحة مصفاة: ما استبعد ظاهر
   ولا يزاحم.

   والإخفات على العلامة الملونة وحدها، لا على ما حولها من نص: اسم الإدارة عند
   ٠٫٣٢ يعطي ١٫٩٥:١، ورقمها كذلك — وهي حال لا تظهر إلا بعد نقرة تصفية، فلا
   يراها فاحص يمسح صفحة غير مصفاة. الرقم مكتوب بجانب كل شريط بكامل تباينه،
   فالعلامة الخافتة تسند المعنى ولا تحمله وحدها. */
.chart .is-off { opacity: .4; }
.chart .c-hit.is-on { opacity: 1; }

/* المفتاح: يعلم المختار ولا يخفت غيره — إخفات نص المفتاح يهبط به دون النسبة. */
.legend a.it.is-on { background: var(--grey-bg); border-color: var(--brand-3); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .legend a.it { transition: none; }
}

/* التلميح: يتبع المؤشر والتركيز معا، فوق كل شيء، ولا يقرأه قارئ الشاشة —
   الرابط يحمل النص نفسه في aria-label. */
.chart-tip {
  position: absolute; z-index: 60; pointer-events: none;
  max-width: 260px; padding: 6px 10px;
  /* لون صريح لا رمز: --brand ينقلب إلى درجته الفاتحة في الوضع الداكن، فيصير
     الأبيض عليه غير مقروء. الأخضر الغامق الثابت يعطي ١٠٫٣٦:١ مع الأبيض في الوضعين. */
  background: #0F4A26; color: #fff;
  border-radius: var(--r-sm); font-size: 0.75rem; line-height: 1.5;
  box-shadow: 0 6px 20px rgba(15, 74, 38, .28);
  unicode-bidi: plaintext;
}
.chart-tip[hidden] { display: none; }

/* للورق وحده: مخفي على الشاشة، وتظهره print.css. */
.u-hidden-screen { display: none; }

/* ------------------------------------------------------------------ alerts, toast */

.alert {
  border-radius: var(--r-sm); padding: 11px 14px; font-size: 0.8125rem;
  border: 1px solid transparent; margin-bottom: 14px;
  display: flex; gap: 9px; align-items: flex-start;
}
.alert .ico { flex: 0 0 auto; font-weight: 700; }
.alert.ok   { background: var(--green-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.alert.warn { background: var(--amber-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.alert.err  { background: var(--red-bg);   border-color: var(--err-line); color: var(--err-ink); }
.alert.info { background: var(--blue-bg);  border-color: var(--info-line); color: var(--info-ink); }

.toast-host {
  position: fixed; inset-block-end: 18px; inset-inline-start: 18px;
  display: flex; flex-direction: column; gap: 8px; z-index: 300;
}
.toast {
  background: var(--brand-surface); color: #fff; border-radius: var(--r);
  padding: 11px 16px; box-shadow: var(--shadow-3); font-size: 0.8125rem;
  animation: toast-in .22s ease;
}
.toast.ok { background: var(--green-surface); }
.toast.err { background: var(--red-surface); }
.toast.warn { background: var(--amber-surface); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }



/* ------------------------------------------------------------------ dialog */

dialog.modal {
  border: 0; border-radius: var(--r-lg); padding: 0; width: min(660px, 94vw);
  box-shadow: var(--shadow-3); color: var(--text); background: var(--card);
}
dialog.modal::backdrop { background: rgba(15, 74, 38, .45); backdrop-filter: blur(2px); }
dialog.modal .m-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
dialog.modal .m-head h3 { margin: 0; }
dialog.modal .m-body { padding: 18px; max-height: 68vh; overflow-y: auto; }
dialog.modal .m-foot {
  padding: 12px 18px; border-top: 1px solid var(--border); background: var(--card-2);
  display: flex; gap: 8px; justify-content: flex-start;
}
/* زر الإغلاق: كان محرف «✕» — يقرؤه قارئ الشاشة «علامة ضرب»، ويأتي وزنه وحجمه
   من خط الجهاز، وهدفه أصغر من الحد. صار أيقونة مرسومة باسم مقروء ولوح يصاب. */
.close-x {
  margin-inline-start: auto; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--r-sm);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.close-x .ico { width: 17px; height: 17px; }
.close-x:hover { background: var(--grey-bg); color: var(--text); }
.close-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ------------------------------------------------------------------ timeline */

.timeline { position: relative; padding-inline-start: 22px; }
.timeline::before {
  content: ""; position: absolute; inset-inline-start: 6px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border);
}
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item::before {
  content: ""; position: absolute; inset-inline-start: -21px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--card); border: 2.5px solid var(--brand-3);
}
.tl-item[data-token="green"]::before { border-color: var(--green); }
.tl-item[data-token="red"]::before { border-color: var(--red); }
.tl-item[data-token="gold"]::before { border-color: var(--gold); }
.tl-item[data-token="blue"]::before { border-color: var(--blue); }
.tl-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.7812rem; }
.tl-head time { color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-body {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 12px; margin-top: 6px; font-size: 0.8125rem;
}
/* نص يكتبه إنسان ويقرؤه إنسان.

   ثلاثة أشياء كانت ناقصة: أسطر الكاتب تطوى — HTML يطوي كل بياض — فتقرأ فقراته
   جدارا واحدا؛ وعلى شاشة ١٩٢٠ يمتد السطر عرض البطاقة كله فتضيع العين في العودة
   إلى أول السطر التالي؛ ومرجع طويل بلا فراغ يمد الصندوق خارج حده.

   72ch مقاس قراءة لا رقم: يضيق ويتسع مع الخط الذي يختاره القارئ من لوحة المظهر.
   والعربية تحتاج سطرا أوسع من اللاتينية. */
.prose {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 72ch;
  line-height: 1.85;
}

/* الالتفاف وحده لكل صندوق نص — بلا pre-wrap، فبعضها يحمل ترميزا بمسافاته. */
.tl-body { overflow-wrap: anywhere; }
.tl-body.prose { max-width: 68ch; }

.tl-body dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 0.75rem; }
.tl-body dt { color: var(--muted); }
.tl-body dd { margin: 0; }

/* ------------------------------------------------------------------ detail view */

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 14px; font-size: 0.8125rem; margin: 0; }
.kv dt { color: var(--muted); font-size: 0.75rem; }
.kv dd { margin: 0; font-weight: 500; }

/* قائمة شاشات التهيئة: روابط في شبكة تقرأ دفعة واحدة، لا صفا من الأزرار
   يلتف على ثلاثة أسطر بأطوال مختلفة. */
/* الأدوار: اسم ثم جملة تقول ما يفعله. شبكة من عمودين على الشاشة الواسعة،
   وعمود واحد على الضيقة — والجملة تحت اسمها لا بجواره، فالاسم قصير والجملة
   سطر كامل. */
.role-list { display: grid; gap: var(--s-3); margin: 0; }
@media (min-width: 720px) { .role-list { grid-template-columns: 1fr 1fr; } }
.role-list dt {
  font-weight: 700; color: var(--brand); font-size: 0.8438rem;
  padding-inline-start: 11px; position: relative;
}
.role-list dt::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .28em;
  width: 3px; height: .82em; border-radius: var(--r-pill); background: var(--brand-4);
}
.role-list dd {
  margin: 2px 0 0; padding-inline-start: 11px;
  font-size: 0.7812rem; color: var(--muted); line-height: 1.7;
}

.setup-links {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.setup-links a {
  display: flex; align-items: center; min-height: 38px;
  padding: 8px var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card); color: var(--text); font-size: 0.8125rem; text-decoration: none;
}
.setup-links a:hover {
  border-color: var(--brand-4); background: var(--brand-wash);
  color: var(--brand); text-decoration: none;
}
.setup-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--border); border-radius: var(--r); overflow: hidden;
}
.stat-strip .s { background: var(--card); padding: 11px 13px; }
.stat-strip .s .l { font-size: 0.6875rem; color: var(--muted); display: block; }
/* الخلية التي تفتح على صفوفها: تقرأ خلية لا رابطا، ويقول لونها عند المرور
   أنها تفتح. */
a.stat-strip-cell, .stat-strip a.s { color: inherit; text-decoration: none; display: block; }
.stat-strip a.s:hover { text-decoration: none; background: var(--brand-wash); }
.stat-strip a.s:hover .v { color: var(--brand-3); }
.stat-strip a.s:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.stat-strip .s .v { font-size: 1.0625rem; font-weight: 800; color: var(--brand); }

.callout {
  border-inline-start: 3px solid var(--gold); background: var(--amber-bg);
  padding: 10px 13px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 0.7812rem;
}
.callout.red { border-inline-start-color: var(--red); background: var(--red-bg); }
.callout.blue { border-inline-start-color: var(--blue); background: var(--blue-bg); }
.callout.green { border-inline-start-color: var(--green); background: var(--green-bg); }

/* ---------------------------------------------------- شريط الانتقال بين الأقسام

   لوحة بسبعة أقسام يصلها القارئ بالتمرير وحده. الشريط يلتصق تحت الشريط العلوي
   — الذي يلتصق هو نفسه عند 0 بارتفاع --topbar — فيبقى في المتناول مهما نزل.

   روابط مرساة صرفة: تعمل بلا جافاسكربت، والجافاسكربت لا يضيف إلا إبراز القسم
   الذي يقرأ الآن. وscroll-margin-top يمنع الشريطين من تغطية عنوان القسم عند
   القفز إليه — وهذا ما يجعل القفز يبدو مكسورا حين يغفل.
   --------------------------------------------------------------------------- */
.jump {
  position: sticky; top: var(--topbar); z-index: 20;
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  margin: 0 0 var(--gap);
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-pill);
}

.jump a {
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 0.75rem; font-weight: 600; color: var(--muted);
  white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease);
}
.jump a:hover { background: var(--card-2); color: var(--text); text-decoration: none; }
.jump a.is-here { background: var(--brand-surface); color: #fff; }
.jump a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* خلية الإدارة في قوائم المتابعة: سطر واحد لا خمسة */
.tbl .unit-cell { max-width: 12rem; }
.tbl .unit-cell .truncate { display: block; max-width: 100%; }
@media (max-width: 760px) {
  /* على الهاتف تتحول الجداول إلى بطاقات، فالعرض كله متاح والقص لا يلزم */
  .tbl .unit-cell { max-width: none; }
  .tbl .unit-cell .truncate { white-space: normal; }
}

/* العنوان يقف تحت الشريطين لا خلفهما */
.jump-target { scroll-margin-top: calc(var(--topbar) + 64px); }

/* وضع العرض يخفي كل ما ليس لوحة */
body.present .jump { display: none; }

@media (max-width: 640px) {
  /* الشريط يمرر أفقيا داخل نفسه بدل أن يلتف سطرين ويأكل ثلث الشاشة */
  .jump { flex-wrap: nowrap; overflow-x: auto; border-radius: var(--r); }
  .jump::-webkit-scrollbar { height: 0; }
}

/* التمرير الناعم حيث يخدم فقط: صفحة فيها شريط انتقال.

   كان على html كله، فصار كل قفزة في المنصة متحركة — ومعها كل قياس يقرأ الصفحة
   بعد scrollTo مباشرة يقرؤها وهي تتحرك: فحص التباين بالبكسل رد عنصرين «أبيض على
   أبيض» و«حبر على أخضر غامق» في شاشتين لا شريط فيهما أصلا. النعومة للقفز بين الأقسام،
   لا لكل تمرير في الموقع. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.jump) { scroll-behavior: smooth; }
}

/* إعداد لا تقرؤه الشفرة بعد: يحرر ويحفظ، ويقرأ أنه لا يفعل شيئا */
.field.is-dormant > label, .field.is-dormant .switchbox .t { color: var(--muted); }
.field.is-dormant input, .field.is-dormant select { border-style: dashed; }

/* القائمة لمن لا يحرر: الأرقام والموقع يقرآن، والأفعال لا تعرض أصلا —
   زر يظهر ثم يرفض أسوأ من زر لا يظهر. والقراءة ليست فعلا: «الملاحظات»
   و«الأداء» يبقيان لكل من يفتح الشاشة. */
.tree.read-only .row-actions > :not(.btn.ghost[href]):not([data-org-perf]) { display: none; }

/* السطر الذي قصده القارئ من الشجرة: يضاء لحظة حتى تقع عليه العين، ثم يهدأ.
   جدول بستين سطرا يفتح على سطر بلا علامة يترك القارئ يقرأ الأسماء واحدا واحدا. */
.tbl tr.is-target > td {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  animation: target-fade 2.4s ease-out forwards;
}
.tbl tr.is-target > td:first-child { font-weight: 700; }
@keyframes target-fade {
  from { background: color-mix(in srgb, var(--gold) 34%, transparent); }
  to   { background: color-mix(in srgb, var(--gold) 10%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .tbl tr.is-target > td { animation: none; }
}

/* عضو موقوف يبقى معروضا في شبكة العضوية ليحفظ معها، ويقرأ موقوفا */
.member.is-off { opacity: .85; border-style: dashed; }

/* -------------------------------------------------- المخطط الهيكلي (org chart)

   صناديق وخطوط تنزل من الأب إلى أبنائه، لا قائمة مزاحة. مرسوم بالحدود وحدها —
   لا SVG ولا مكتبة — فيطبع ويكبر ويقرأه قارئ الشاشة قائمة متداخلة كما هو.

   الوصلات بخصائص منطقية: ::before نصف العارضة نحو بداية السطر، و::after نصفها
   الآخر ومعه النزول إلى الابن. فتنقلب كلها مع اتجاه الصفحة بلا نسخة ثانية —
   والنسخة الثانية هي ما يجعل مخططا عربيا يرسم خطوطه في الجهة الخطأ.
   --------------------------------------------------------------------------- */
.chart-wrap {
  --oc-gap: 26px;      /* ارتفاع الوصلة بين صف وصف */
  --oc-pad: 10px;      /* نصف المسافة بين أخوين */
  --oc-line: var(--border-2);
  position: relative;
  /* نافذة ثابتة على مخطط أوسع منها: بلا ارتفاع أدنى ينكمش الوعاء على ما بقي بعد
     التصغير، فيقرأ المخطط شريطا رفيعا في وسط بطاقة فارغة. */
  min-height: 460px; max-height: 74vh;
  overflow: auto; overscroll-behavior-inline: contain;
  padding: var(--s-4) 0 var(--s-5);
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 22px 22px;
  border-radius: var(--r-sm);
  cursor: grab;
}
.chart-wrap.is-panning { cursor: grabbing; user-select: none; }

/* التكبير يطبق هنا: العنصر الداخلي وحده يتحول، فيبقى التمرير على الوعاء سليما */
.chart-canvas {
  display: inline-block; min-width: 100%;
  transform-origin: top center;
  transition: transform .18s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .chart-canvas { transition: none; } }

.oc, .oc ul {
  display: flex; justify-content: center; align-items: flex-start;
  list-style: none; margin: 0; padding: 0;
}
.oc ul { padding-block-start: var(--oc-gap); position: relative; }
/* الساق النازلة من الأب إلى عارضة أبنائه */
.oc ul::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  width: 0; height: var(--oc-gap); border-inline-start: 2px solid var(--oc-line);
}
.oc li {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: var(--oc-gap) var(--oc-pad) 0;
}
.oc li::before, .oc li::after {
  content: ""; position: absolute; inset-block-start: 0;
  width: 50%; height: var(--oc-gap); border-block-start: 2px solid var(--oc-line);
}
.oc li::before { inset-inline-end: 50%; }
.oc li::after { inset-inline-start: 50%; border-inline-start: 2px solid var(--oc-line); }
/* ابن وحيد: لا عارضة، الساق وحدها تكفي */
.oc li:only-child { padding-block-start: 0; }
.oc li:only-child::before, .oc li:only-child::after { display: none; }
/* طرفا العارضة لا يمتدان إلى الفراغ */
.oc li:first-child::before, .oc li:last-child::after { border-block-start: 0; }
/* والنزول إلى آخر ابن يرسم على حافة نصفه الأول، لأن ::after فقد حده */
.oc li:last-child::before { border-inline-end: 2px solid var(--oc-line); }
/* الجذور صف مستقل بلا ساق فوقه */
.chart-canvas > .oc { padding-block-start: 0; }
.chart-canvas > .oc > li { padding-block-start: 0; }
.chart-canvas > .oc > li::before, .chart-canvas > .oc > li::after { display: none; }

/* ---------------------------------------------------------------- الصندوق */
.oc-node {
  position: relative;
  width: 178px; min-height: 96px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px 13px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card); box-shadow: var(--shadow-1);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.oc-node:hover { border-color: var(--brand-3); box-shadow: var(--shadow-2); }
.oc-node:focus-within { border-color: var(--brand-3); }
/* شريط لون الوحدة على حافة الصندوق العليا */
.oc-bar {
  position: absolute; inset-block-start: -1px; inset-inline: -1px;
  height: 4px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--border-2);
}
.oc-name {
  font-weight: 700; font-size: 0.8125rem; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.oc-link { color: inherit; }
.oc-link:hover { text-decoration: none; }
.oc-link:hover .oc-name { color: var(--brand-3); }
.oc-meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.oc-code { font-family: var(--mono); font-size: 0.625rem; color: var(--muted); }
.oc-type {
  font-size: 0.625rem; color: var(--n-700); background: var(--n-100);
  border-radius: var(--r-pill); padding: 1px 7px;
}
.oc-off {
  font-size: 0.625rem; color: var(--err-ink); background: var(--red-bg);
  border-radius: var(--r-pill); padding: 1px 7px; font-weight: 600;
}
.oc-counts { display: flex; gap: 8px; font-size: 0.625rem; color: var(--muted); }
.oc-li.is-off > .oc-node { border-style: dashed; background: var(--n-50); }

/* مفتاح الطي على حافة الصندوق السفلى، حيث يخرج الخط */
.oc-tw {
  position: absolute; inset-block-end: -11px; inset-inline-start: 50%;
  transform: translateX(50%);
  width: 22px; height: 22px; padding: 0; cursor: pointer; z-index: 2;
  display: grid; place-items: center;
  border: 1px solid var(--border-2); border-radius: 50%;
  background: var(--card); color: var(--brand-3);
}
[dir="ltr"] .oc-tw { transform: translateX(-50%); }
.oc-tw:hover { background: var(--brand-wash); border-color: var(--brand-3); }
.oc-tw-i { position: relative; width: 9px; height: 9px; }
.oc-tw-i::before, .oc-tw-i::after {
  content: ""; position: absolute; inset-inline: 0; top: 4px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.oc-tw-i::after { transform: rotate(90deg); transition: transform .18s var(--ease); }
.oc-tw[aria-expanded="true"] .oc-tw-i::after { transform: rotate(0deg); }

/* عدد ما تحت الفرع، يقرأ وهو مطوي فلا يبدو ورقة */
.oc-kids-count {
  position: absolute; inset-block-end: -10px; inset-inline-start: calc(50% + 20px);
  font-size: 0.625rem; font-weight: 700; color: var(--muted);
  background: var(--card); border-radius: var(--r-pill); padding: 0 5px;
}
.oc-li.has-kids > .oc-node > .oc-tw[aria-expanded="true"] ~ .oc-kids-count { display: none; }

/* البحث: المطابق يؤطر، وما حوله يخفت — ولا يخفى، فإخفاء صندوق يكسر المخطط */
.chart-wrap.is-finding .oc-li > .oc-node { opacity: .32; }
.chart-wrap.is-finding .oc-li.is-hit > .oc-node,
.chart-wrap.is-finding .oc-li.is-path > .oc-node { opacity: 1; }
.chart-wrap.is-finding .oc-li.is-hit > .oc-node {
  border-color: var(--brand-4); box-shadow: 0 0 0 3px var(--brand-wash);
}

/* ------------------------------------------------------------- أدوات المخطط */
.chart-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chart-tools .zoom { font-size: 0.6875rem; color: var(--muted); min-width: 3.2rem; text-align: center; }

/* مبدل طريقة العرض */
.view-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--n-100); border-radius: var(--r-pill); }
.view-switch button {
  border: 0; background: none; cursor: pointer; border-radius: var(--r-pill);
  padding: 5px 13px; font-size: 0.75rem; font-weight: 600; color: var(--muted);
  font-family: inherit;
}
.view-switch button:hover { color: var(--text); }
.view-switch button[aria-pressed="true"] { background: var(--card); color: var(--brand); box-shadow: var(--shadow-1); }
.view-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

@media print {
  .chart-wrap { overflow: visible; background: none; }
  .chart-canvas { transform: none !important; }
}

@media (max-width: 640px) {
  .chart-wrap { --oc-gap: 18px; --oc-pad: 6px; }
  .oc-node { width: 150px; min-height: 86px; }
}

/* ------------------------------------------------------------ org tree

   هيكل تنظيمي، لا قائمة مزاحة. الفرق أن الخط يصل الأب بأبنائه فعلا: عمود نازل
   من الأب، ومرفق أفقي عند كل ابن، وينقطع العمود عند آخرهم بدل أن يستمر إلى
   الفراغ. كل ذلك بخصائص منطقية، فينقلب مع اتجاه الصفحة دون نسخة ثانية.

   والمرفق يقف عند منتصف سطر العقدة الأول — --tn-mid — لا عند منتصف ارتفاعها:
   العقدة تلتف على شاشة ضيقة فيصير منتصفها أسفل من اسمها، ويصل الخط إلى فراغ.
   ------------------------------------------------------------------------ */
.tree { list-style: none; margin: 0; padding: 0; --tn-mid: 21px; --tn-step: 26px; }
.tree ul { list-style: none; margin: 0; padding-inline-start: var(--tn-step); }
.tree li { margin: 3px 0; position: relative; }

/* العمود النازل من الأب إلى كل ابن، والمرفق الأفقي الداخل إلى العقدة */
.tree ul > li::before {
  content: ""; position: absolute; top: -3px; bottom: 0;
  inset-inline-start: calc(var(--tn-step) / -2);
  border-inline-start: 1px solid var(--border-2);
}
.tree ul > li:last-child::before { bottom: auto; height: calc(var(--tn-mid) + 3px); }
.tree ul > li::after {
  content: ""; position: absolute; top: var(--tn-mid);
  inset-inline-start: calc(var(--tn-step) / -2); width: calc(var(--tn-step) / 2 - 3px);
  border-top: 1px solid var(--border-2);
}

.tree .node {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card); transition: border-color .15s var(--ease), background .15s var(--ease);
}
.tree .node:hover { border-color: var(--brand-3); background: var(--card-2); }
.tree .node:focus-within { border-color: var(--brand-3); }
/* الجذر رأس هيكل لا سطر في قائمة: يقرأ أثقل بحده وأرضيته، لا بظل يرفعه */
.tree > li > .node {
  border-color: var(--brand-4); border-width: 2px; background: var(--brand-wash);
}
.tree > li > .node .nm { font-size: 0.875rem; }

/* المفتاح: زائد يصير ناقصا. رمز لا يحمل اتجاها، فلا ينقلب مع اللغة. */
.tree .tw {
  flex: 0 0 24px; width: 24px; height: 24px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--border-2); border-radius: var(--r-xs);
  background: var(--card); color: var(--brand-3);
}
.tree .tw:hover { background: var(--brand-wash); border-color: var(--brand-3); }
.tree .tw-i { position: relative; width: 10px; height: 10px; }
.tree .tw-i::before, .tree .tw-i::after {
  content: ""; position: absolute; inset-inline: 0; top: 4.5px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.tree .tw-i::after { transform: rotate(90deg); transition: transform .18s var(--ease); }
.tree .tw[aria-expanded="true"] .tw-i::after { transform: rotate(0deg); }
/* الورقة تشغل عرض المفتاح نفسه، وإلا انزاح كل ما بعدها عن محور إخوتها */
.tree .tw-leaf {
  flex: 0 0 24px; width: 24px; height: 24px; border: 0; background: none;
  display: grid; place-items: center;
}
.tree .tw-leaf::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-2);
}

.tree .node .swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.tree .node .nm { font-weight: 600; font-size: 0.8125rem; }
.tree .node .code { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
.tree .node .meta { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* عمود واحد لا أعمدة بعدد الأرقام: «٣ توصية» و«٣٤ توصية» كانتا تبدآن من
   موضعين، فتقرأ الشجرة مبعثرة. */
.tree .node .cnt {
  font-size: 0.6875rem; color: var(--n-700); background: var(--n-100);
  border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap;
  min-width: 78px; text-align: center;
}
.tree .row-actions .btn { min-width: 56px; justify-content: center; }

/* الموقوفة تبقى مقروءة: حد متقطع وأرضية باهتة، لا شفافية تهبط بالتباين */
.tree .tn.is-off > .node { border-style: dashed; background: var(--n-50); }
.tree .tn.is-off > .node .code { color: var(--n-600); }

/* البحث: ما لا يطابق ولا يقود إلى مطابق يختفي، والمطابق يؤطر */
.tree .tn.is-hidden { display: none; }
/* زر يعرض ولا يعمل: يبقى في ترتيب التنقل ويقول سببه بدل أن يختفي */
.tree .row-actions .is-blocked {
  color: var(--muted); border-style: dashed; cursor: help;
}
.tree .row-actions .is-blocked:hover { background: var(--n-100); color: var(--n-700); }

.tree .tn.is-hit > .node { border-color: var(--gold); background: var(--gold-soft); }
.tree .tn.is-hit > .node .cnt { background: var(--card); }

.tree-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tree-bar .find { flex: 1 1 240px; min-width: 180px; }
.tree-bar .find input { width: 100%; max-width: none; }
.tree-bar .note { font-size: 0.7188rem; color: var(--muted); }
.tree-bar .spacer { flex: 0 1 12px; }

.btn.danger-text { color: var(--err-ink); }
.btn.danger-text:hover { background: var(--red-bg); border-color: var(--red); color: var(--err-ink); }

@media (max-width: 640px) {
  /* على شاشة ضيقة يأكل الإزاحة كل العرض: الشجرة تبقى شجرة بخطوة أقصر.

     والعمود الثابت الذي يرص الأرقام والأزرار على شاشة واسعة هو نفسه ما يمد
     الصفحة هنا: خمسة أزرار بعرض أدنى ٥٦ تساوي ٣٠٠ بكسل لا تنكسر، فتخرج ٢٢
     بكسل عن عرض ٣٢٠ ويضطر القارئ إلى تمرير أفقي — وهذا ما تمنعه 1.4.10. */
  .tree { --tn-step: 16px; }
  .tree .node .meta { margin-inline-start: 0; width: 100%; }
  .tree .node .cnt { min-width: 0; }
  .tree .row-actions { flex-wrap: wrap; }
  .tree .row-actions .btn { min-width: 0; }
  .tree-bar .find { min-width: 0; flex-basis: 100%; }
}

/* utilities */
.muted { color: var(--muted); }
.small { font-size: 0.75rem; }
.nowrap { white-space: nowrap; }
.right { text-align: end; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex.wrap { flex-wrap: wrap; }
.flex.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.hide { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------------ auth page

   شاشة الدخول لوحان: لوح الهوية يعرف بالجهة وبما هذه المنصة، ولوح أبيض يحمل
   النموذج وحده. هذا تخطيط بوابات الخدمات الحكومية، وسببه أن الشاشة الأولى
   تعرف قبل أن تطلب — والنموذج بعدها لا ينازعه شيء على البياض.

   وعرض النموذج محدود داخل لوحه ولو اتسع اللوح: حقل دخول عرضه ستمئة بكسل يقرأ
   حقل بحث لا حقل هوية، والعين تقطع مسافة لا معنى فيها بين تسميته وطرفه.

   ودون ٨٨٠ بكسل يصير عمودا واحدا: لوح الهوية ترويسة قصيرة فوق النموذج، لا
   نصف شاشة يدفع الحقول تحت الطية.
   ---------------------------------------------------------------------- */

/* الأرضية على عنصر الجذر لا على الغلاف ولا على الجسد.

   الغلاف يقف عند ارتفاع الشاشة، والجسد يقف عند ارتفاع محتواه — فإن قصر أيهما
   عن الصفحة قرئ ما تحته شريطا أفتح بحد أفقي مستقيم عبر الشاشة. وأرضية الجذر
   يطلى بها اللوح كله مهما كان ارتفاع ما فيه.

   و‎fixed‎ تثبت الوهجين على الشاشة لا على الصفحة: لا يزحفان عند التمرير. */
.auth-html {
  background: var(--auth-bg);
  background-image:
    radial-gradient(90ch 60ch at 82% -10%, var(--auth-glow-1), transparent 60%),
    radial-gradient(70ch 50ch at 8% 108%, var(--auth-glow-2), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* والجسد شفاف فوقها.

   ‎body‎ يطلى بـ‎--bg‎ في القاعدة العامة، فلو ترك لغطى أرضية الجذر داخل صندوقه
   وحده وقرئ حده الأسفل حدا في الشاشة. وتكرار الوهجين عليه أسوأ: طبقتان نصف
   شفافتين فوق بعضهما تعتمان حيث تتقاطعان وتفتحان حيث لا — وهو الحد نفسه يرسم
   بالضوء بدل اللون. */
.auth-html .auth-body { background: none; }

.auth-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--s-6) var(--s-5);

  /* عمق بلا ضجيج: وهجان واسعان جدا من لون الهوية يطفوان خلف البطاقة.
     مسطحان عمليا — أقصى تعتيمهما تحت العشرة في المئة — فلا يقرآن تدرجا
     ملونا يشق الشاشة، وإنما ضوءا يسقط من جهة. وهما أرضية واحدة: طبقتان في
     خاصية واحدة لا عنصران في الترميز. */
}
/* ‎place-items: center‎ يقلص ابن الشبكة إلى محتواه، فتقاس ‎100%‎ في اللوح
   على ذلك المحتوى لا على الشاشة — ويخرج اللوح أضيق من عرضه المطلوب. */
.auth-wrap > * { width: min(1020px, 100%); }

.auth-shell {
  width: min(1020px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--card); border: 1px solid var(--auth-line);
  border-radius: var(--r-xl); overflow: hidden;

  /* البطاقة وحدها في المنصة ترتفع عن أرضيتها.

     والقاعدة في الشاشات الأخرى أن الحد يفصل لا الظل، وهي قاعدة لوحة عمل
     مزدحمة بالبطاقات: ظل تحت كل صندوق يقرأ طبقات فوق طبقات. وهذه شاشة فيها
     صندوق واحد لا غير، وهي أول ما يرى من النظام — فالظل هنا يقول «هذا هو
     الشيء» لا «هذا صندوق من صناديق». */
  box-shadow: var(--auth-shadow);
}

/* البطاقة تصعد عند الفتح صعودا قصيرا: حركة واحدة تقول إن الشاشة جاهزة، ولا
   تؤخر أحدا — ٤٢٠ جزءا من الألف، ولا تتكرر. ومن أوقف الحركة في نظامه لا يراها. */
@media (prefers-reduced-motion: no-preference) {
  .auth-shell { animation: auth-rise .42s cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 880px) {
  /* لوح الهوية أضيق قليلا من النموذج: النموذج هو العمل، والهوية تقدمه.
     وكانا متساويين فيقرأ اللوحان لوحين متنازعين لا لوحا وتقديما له. */
  .auth-shell { grid-template-columns: 0.92fr 1fr; }
}

/* ------------------------------------------------------------ لوح الهوية */

.auth-brand {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-4);
  padding: var(--s-8) var(--s-7);
  color: var(--on-brand);

  /* درجتان من أخضر المصرف، وثالثة أعمق في الزاوية البعيدة. الاتجاه ثابت على
     الشاشة لا على اللغة: الضوء لا ينعكس مع النص. */
  background:
    linear-gradient(155deg, #17652F 0%, #0F4A26 46%, #093016 100%);
}

/* علامة المصرف كبيرة جدا وخافتة جدا خلف النص، تخرج من طرف اللوح.

   ولوح الهوية كان لونا مصمتا وراء أربعة أسطر — يقرأ نصفه فراغا أخضر. وهذه
   تعطيه عمقا من العلامة نفسها لا من زينة مستوردة: ما يملأ الفراغ هو الشيء
   الذي تتحدث عنه الشاشة. ‎aria-hidden‎ لا يلزم: أرضية لا عنصر. */
.auth-brand::before {
  content: ""; position: absolute; z-index: -1;
  inset-inline-start: -16%; bottom: -22%;
  width: 78%; aspect-ratio: 1;
  background: url("../img/badea-mark-light.svg") no-repeat center / contain;
  opacity: .07;
  pointer-events: none;
}

.auth-brand .mark { width: 76px; height: 76px; }

/* اسم الجهة سطر تعريف فوق اسم المنصة: أصغر وأخف، فيقرأ الاثنان بترتيبهما
   — من يشغل المنصة، ثم ما هي — لا سطرين متساويين يتنازعان أول نظرة. */
.auth-brand .org {
  margin: 0; font-size: 0.8125rem; font-weight: 600;
  color: rgba(230, 241, 233, .78); line-height: 1.6;
}
.auth-brand hr {
  width: 40px; margin: 2px 0; border: 0;
  border-top: 2px solid rgba(255, 255, 255, .32); border-radius: var(--r-pill);
}
.auth-brand h1 {
  color: #fff; font-size: 1.625rem; margin: 0; line-height: 1.4;
  letter-spacing: -0.01em;
}
.auth-brand .lead {
  margin: 0; font-size: 0.8125rem; color: rgba(230, 241, 233, .82); line-height: 1.85;
  max-width: 40ch;
}

/* ما تفعله المنصة في ثلاثة أسطر، كل سطر بعلامة صح في دائرة خافتة — لا نقطة
   عمياء. النقطة تقول «بند في قائمة»، وعلامة الصح تقول «هذا متاح لك». */
.auth-points { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.auth-points li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 0.8125rem; color: rgba(230, 241, 233, .94); line-height: 1.6;
}
.auth-points li::before {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat center / 11px 11px,
    rgba(255, 255, 255, .14);
}

/* ----------------------------------------------------------- لوح النموذج */

.auth-panel {
  padding: var(--s-8) var(--s-7);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--card);
}
.auth-panel > * { width: 100%; max-width: 372px; margin-inline: auto; }
.auth-panel .head { margin-bottom: var(--s-6); }
.auth-panel .head h2 {
  font-size: 1.5rem; margin-bottom: 6px; letter-spacing: -0.01em;
}
.auth-panel .head p { color: var(--muted); font-size: 0.8125rem; margin: 0; }

/* حقول شاشة الدخول أعلى من حقول الجداول: حقلان اثنان على لوح واسع، والارتفاع
   هنا راحة لا ازدحام. */
.auth-panel .field { margin-bottom: var(--s-4); }
.auth-panel .field > label {
  font-size: 0.8125rem; font-weight: 700; color: var(--n-700); margin-bottom: 7px;
}
.auth-panel input[type="text"],
.auth-panel input[type="password"] {
  min-height: 48px; font-size: 0.9375rem;
  border-radius: var(--r); background: var(--auth-field);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.auth-panel input[type="text"]:hover,
.auth-panel input[type="password"]:hover { border-color: var(--border-2); }

/* التركيز يقرأ من بعيد: حلقة رقيقة حول الحقل بلون الهوية، فوق الحد لا بدله.
   وهي غير حلقة التركيز العامة للوحة المفاتيح — تلك تبقى كما هي في ‎:focus-visible‎. */
.auth-panel input[type="text"]:focus,
.auth-panel input[type="password"]:focus {
  background: var(--card);
  border-color: var(--auth-focus-line);
  box-shadow: 0 0 0 3px var(--auth-ring);
}

.auth-panel .btn.lg {
  min-height: 50px; font-size: 0.9688rem; border-radius: var(--r);
  transition: transform .12s ease, box-shadow .18s ease, background-color .15s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .auth-panel .btn.lg:hover { transform: translateY(-1px); }
  .auth-panel .btn.lg:active { transform: translateY(0); }
}

/* كلمة المرور: زر يكشفها.

   من يكتب كلمة طويلة في حقل مخفي ولا يقبل الدخول لا يعرف أهي خطأ أم أخطأ
   كتابتها. الزر داخل الحقل لا بجواره، والحشو يفتح له مكانه فلا يركب النص
   تحته. ويعلن ‎aria-pressed‎ حاله، فيقرأ قارئ الشاشة أمكشوفة هي أم مخفية. */
.field-lock { position: relative; display: flex; }
.field-lock input { padding-inline-end: 46px; }
.reveal {
  position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; border-radius: var(--r-sm); background: none;
  color: var(--muted); cursor: pointer;
}
.reveal:hover { color: var(--brand); background: var(--n-100); }
.reveal:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.reveal .ico { width: 18px; height: 18px; }
.reveal .off { display: none; }
.reveal[aria-pressed="true"] .on { display: none; }
.reveal[aria-pressed="true"] .off { display: block; }

/* صف «أبق جلستي» يقرأ صفا واحدا: المربع ثم نصه، بلا مسافة تفصلهما */
.auth-panel .check { margin: var(--s-1) 0 var(--s-5); }
.auth-panel .check label { font-size: 0.8125rem; color: var(--n-700); }

/* ------------------------------------------------------------ ذيل الشاشة */

.auth-foot {
  margin-top: var(--s-4); text-align: center;
  color: var(--muted); font-size: 0.7188rem; line-height: 1.7;
}

/* مبدل اللغة قبل الدخول: شريط مقسم لا ثلاث كلمات عائمة.

   معالج اللغة مكتوب بلا مصادقة لهذه الشاشة تحديدا — «من لا يقرأ العربية لا بد
   أن يبدل قبل أن يدخل» — وكانت الأزرار بلا حد ولا أرضية، فلا تقرأ أزرارا. */
.auth-lang {
  /* يلتف: ثلاث لغات في صف واحد على شاشة ٣٢٠ بكسل تمد الصفحة أفقيا، وهي
     مخالفة إعادة التدفق — والالتفاف يكلف سطرا ثانيا لا أكثر. */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3px;
  width: max-content; max-width: 100%;
  margin: var(--s-5) auto 0;
  padding: 3px;
  background: var(--card); border: 1px solid var(--auth-line);
  border-radius: var(--r-pill);
}
.auth-lang button {
  border: 0; border-radius: var(--r-pill);
  background: none; cursor: pointer;
  padding: 5px 14px; min-height: 30px;
  font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--muted);
  transition: color .15s ease, background-color .15s ease;
}
.auth-lang button:hover { color: var(--text); background: var(--n-100); }
.auth-lang button[aria-current="true"] {
  color: #fff; background: var(--auth-on-bg); font-weight: 700;
}
.auth-lang button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* تشخيص بيئة التطوير. لا يظهر خارجها، ولا يصح أن يمد البطاقة حين يظهر: كان
   فقرات نصية وسط النموذج، ومسار ملف لا ينكسر يدفع اللوح إلى عرضه. */
.auth-diag {
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
  font-family: var(--mono); font-size: 0.6875rem; line-height: 1.7;
  color: var(--muted); text-align: start;
  overflow-wrap: anywhere; word-break: break-word;
}
.auth-diag p { margin: 0; }
.auth-diag .warn { color: var(--warn-ink); font-weight: 700; }

@media (max-width: 879px) {
  /* عمود واحد: لوح الهوية ترويسة قصيرة فوق النموذج، لا نصف شاشة يدفع الحقول
     تحت الطية. والعلامة بجوار الاسم لا فوقه، فتقصر الترويسة سطرين. */
  .auth-wrap { padding: var(--s-4) var(--s-3); }
  .auth-brand {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: var(--s-2) var(--s-4);
    padding: var(--s-6) var(--s-5);
  }
  .auth-brand::before { inset-inline-start: auto; inset-inline-end: -12%; bottom: -46%; width: 46%; }
  .auth-brand .mark { grid-row: span 2; width: 52px; height: 52px; }
  .auth-brand .org { font-size: 0.75rem; }
  .auth-brand h1 { font-size: 1.25rem; }
  .auth-brand hr, .auth-brand .lead, .auth-points { display: none; }
  .auth-panel { padding: var(--s-7) var(--s-5); }
  .auth-panel .head h2 { font-size: 1.3125rem; }
}

/* ------------------------------------------------------------------ presentation mode */

body.present { --gap: 22px; }
body.present .sidebar, body.present .topbar, body.present .no-present { display: none !important; }
body.present .content { padding: 26px 30px; }
body.present .kpi .value { font-size: 2.25rem; }
body.present .kpi .label { font-size: 0.8125rem; }
body.present table.tbl { font-size: 0.9375rem; }
body.present h1 { font-size: 1.6875rem; }
body.present .card-head h3 { font-size: 1.0625rem; }
body.present .present-bar { display: flex !important; }

.present-bar {
  display: none; position: fixed; inset-block-end: 16px; inset-inline-end: 16px;
  gap: 8px; z-index: 200; background: rgba(15, 74, 38, .93);
  border-radius: 30px; padding: 7px 9px; box-shadow: var(--shadow-3);
}
.present-bar .btn { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
.present-bar .btn:hover { background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1200px) {
  .grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* الدرج للشاشات الصغيرة وحدها. كان الحد ١٠٠٠ بكسل، وهو عرض نافذة حاسوب
   محمول شائعة — فكانت القائمة تختفي كلها خلف زر عند من يعمل في نصف شاشة،
   ويقرأ ذلك أنها «لم تظهر». الحد الآن ٧٦٠، وما فوقه يضيق لا يختفي. */
@media (max-width: 760px) {
  :root { --sidebar: 0px; }


  .burger { display: grid; place-items: center; }
  /* الدرج المغلق لا يوجد في التخطيط أصلا. كان يسحب خارج الشاشة بـtransform،
     والعنصر الثابت لا يمد الصفحة لكن أبناءه في التدفق يمدونها — فتقرأ الصفحة
     538 بكسل عرضا على شاشة 320، وتمرر أفقيا. */
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    width: 262px; flex-basis: 262px;
    display: none;
  }
  .sidebar.open { display: flex; }
}

/* المشهد خلف الدرج: يغمق ما وراءه ويغلقه بالنقر عليه. خرج من كتلة الهاتف
   لأن الدرج صار يفتح على كل عرض. */
.scrim {
  position: fixed; inset: 0; background: rgba(15, 74, 38, .4); z-index: 35;
}

@media (max-width: 760px) {
  .grid.k2, .grid.k3, .grid.k4 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .content { padding: 12px; }
  /* الشريط العلوي صف واحد لا يلتف: العنوان وأدوات الشاشة ومبدل اللغة والحساب
     والخروج يحتاجون 538 بكسل على شاشة 320، فيخرج آخرهم عن الصفحة. يلتف الآن،
     وأدوات الشاشة تنزل سطرا لها. */
  .topbar { padding: 8px 12px; flex-wrap: wrap; row-gap: 8px; }
  .topbar > div:not(.topbar-tools):not(.topbar-spacer) { min-width: 0; flex: 1 1 auto; }
  .topbar h1 { font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-spacer { display: none; }
  .topbar-tools { order: 10; flex-basis: 100%; flex-wrap: wrap; }
  .topbar-divider { display: none; }
  .user-chip .who { display: none; }
  .card-body { padding: 13px; }
  .kpi .value { font-size: 1.5rem; }
  .kpi .breakdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; }

  /* Tables become cards: each cell carries its own label, so nothing is lost off-screen. */
  table.cardify thead { display: none; }
  table.cardify, table.cardify tbody, table.cardify tr, table.cardify td { display: block; width: 100%; }
  table.cardify tr {
    border: 1px solid var(--border); border-radius: var(--r);
    margin-bottom: 10px; padding: 4px 0; background: var(--card);
  }
  table.cardify td {
    border: 0; border-bottom: 1px dashed var(--border);
    display: flex; gap: 10px; justify-content: space-between; align-items: center;
    padding: 7px 12px; text-align: end;
  }
  table.cardify td:last-child { border-bottom: 0; }
  table.cardify td::before {
    content: attr(data-l); color: var(--muted); font-size: 0.7188rem; font-weight: 600;
    text-align: start; flex: 0 0 40%;
  }
  table.cardify td.full { display: block; text-align: start; }
  table.cardify td.full::before { display: block; margin-bottom: 3px; }
  .row-actions { justify-content: flex-end; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .wide, .filters .actions { grid-column: 1 / -1; }
  .kv { grid-template-columns: 1fr; gap: 1px 0; }
  .kv dd { margin-bottom: 8px; }
  .btn-row .btn { flex: 1; }
}

@media (max-width: 420px) {
  .filters { grid-template-columns: 1fr; }
  .grid.tiles { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 11px; }
  .kpi .value { size: 20px; font-size: 1.3125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Touch targets never fall below the 44px guidance on pointer-coarse devices. */
@media (pointer: coarse) {
  .btn, .nav a, .tabs a { min-height: 44px; }
  .btn.sm { min-height: 36px; }
}

/* ---------------------------------------------------------------- translation screen
   A translator works down a long column of text, so the two languages sit side by side at
   equal weight and the untranslated rows are the ones that stand out. */
.btn.sm { padding: 4px 10px; font-size: 0.75rem; min-height: 32px; }

.progress { margin-top: 8px; height: 6px; border-radius: 6px; background: var(--border); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 6px; background: var(--brand); }

.tr-table td { vertical-align: top; }
.tr-table .src { font-size: 0.8438rem; line-height: 1.7; }
.tr-table tr.is-missing { background: #FFFBF0; }
.tr-table tr.is-missing .src { font-weight: 600; }

.tr-input {
  width: 100%; min-height: 40px; resize: vertical; overflow: hidden;
  font-family: inherit; font-size: 0.8438rem; line-height: 1.7;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
}
.tr-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.tr-state { display: inline-block; min-height: 16px; font-size: 0.7188rem; color: var(--muted); margin-top: 2px; }

@media (max-width: 760px) {
  .tr-table, .tr-table thead, .tr-table tbody, .tr-table tr, .tr-table td { display: block; width: 100%; }
  .tr-table thead { display: none; }
  .tr-table tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 8px; }
}

/* Language switcher: a quiet control in the top bar, not a call to action. */
.lang-switch select {
  font-family: inherit; font-size: 0.7812rem; min-height: 36px;
  padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.lang-switch select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---------------------------------------------------------------- permissions screen */
.tabs { display: flex; gap: 6px; background: var(--card); border: 1px solid var(--border);
        border-radius: 12px; padding: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { flex: 1; min-width: 130px; text-align: center; padding: 10px 14px; border-radius: 8px;
          font-size: 0.8125rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.tabs a:hover { background: var(--bg); color: var(--brand); }
/* الصنف الذي يكتبه الترميز فعلا. كان هذا الطقم يلون a.on بينما تكتب الشاشتان
   الوحيدتان اللتان تستعملانه class="active" — فلا يظهر اللسان العامل أصلا. */
.tabs a.active { background: var(--brand-surface); color: #fff; }
.tabs .pill { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 10px;
              background: rgba(255,255,255,.18); font-size: 0.6875rem; }
.tabs a:not(.active) .pill { background: var(--bg); }

/* The matrix reads down a role and across a capability, so the header is rotated to keep the
   columns narrow enough that the whole grid fits without scrolling. */
.matrix th.rot { height: 118px; vertical-align: bottom; padding: 6px 2px; width: 74px; }
.matrix th.rot > span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
                        white-space: nowrap; font-weight: 600; font-size: 0.75rem; }
.matrix td.cell { text-align: center; font-size: 1.0625rem; }
.matrix td.cell.yes { color: var(--green); background: var(--green-bg); }
/* كانت بلون حد الإطار — 1.41:1، لا ترى. تهدأ بالوزن لا بإخفائها. */
.matrix td.cell.no  { color: var(--n-500); font-weight: 400; }

.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.member { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
          border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.member:hover { border-color: var(--border-2); background: var(--card-2); }
.member.on { border-color: var(--brand); background: var(--blue-bg); }
.member .who { display: flex; flex-direction: column; min-width: 0; }
.member .who strong { font-size: 0.8125rem; }
.member input { width: 17px; height: 17px; flex-shrink: 0; }

tr.on > td { background: var(--blue-bg) !important; }
tr.dim > td { opacity: .55; }

@media (max-width: 760px) {
  .matrix th.rot { height: auto; width: auto; }
  .matrix th.rot > span { writing-mode: horizontal-tb; transform: none; }
}

/* ---------------------------------------------------------------- utilities

   These exist because the content security policy forbids inline style
   attributes: `style="width:18px"` in a view is blocked by the browser and the
   element renders unstyled. A rule here is what a style attribute used to be,
   and it cannot be injected by anything that manages to write into the page.

   Values that are only known at render time — a bar's width, a committee's
   colour — cannot become a class. They travel as data attributes and are
   applied by app.js through the CSSOM, which the policy does allow. */

.u-inline        { display: inline; }
.u-plain-link    { text-decoration: none; }
.u-self-start    { align-self: start; }
.u-flat          { padding: 0; }
.u-indent-child  { padding-inline-start: 30px; }
.u-gutter        { margin: 14px 18px 0; }

.u-dim           { opacity: .75; }
.u-dimmer        { opacity: .65; }
.u-faint         { opacity: .5; }
.u-breakable     { word-break: break-all; }

.u-text-sm       { font-size: 0.8125rem; }
.u-text-md       { font-size: 0.875rem; }
.u-text-xs       { font-size: 0.6875rem; }
.u-code-block    { font-size: 0.6875rem; white-space: pre-wrap; direction: ltr; margin: 6px 0 0; }
.u-mono-xs       { font-family: var(--mono); font-size: 0.6562rem; }

/* A checkbox sitting inside a table cell or a button row.
   كان ١٨×١٣ — والارتفاع من المتصفح لا من هنا. وهو دون ٢٤ التي يشترطها
   المعيار 2.5.8 لكل ما ينقر عليه، ولا يصاب بإبهام أصلا. */
.u-box           { width: 24px; height: 24px; min-height: 24px; }
.u-box-sm        { width: 24px; height: 24px; min-height: 24px; }

.u-w-narrow      { width: 36px; }
.u-w-pick        { min-width: 110px; }
.u-w-chart-sm    { width: 190px; min-height: 30px; }
.u-w-chart-md    { width: 200px; min-height: 30px; }
.u-w-chart-lg    { width: 220px; min-height: 30px; }
.u-w-form        { max-width: 520px; }
.u-w-full        { max-width: none; }

/* Table column widths, as a share of the table. */
.u-col-6         { width: 6%; }
.u-col-10        { width: 10%; }
.u-col-26        { width: 26%; }
.u-col-45        { width: 45%; }
.u-col-50        { width: 50%; }

.u-scroll-md     { max-height: 420px; overflow-y: auto; }
.u-scroll-lg     { max-height: 640px; overflow-y: auto; }

/* The four status colours of the register legend. */
/* مفتاح السجل يفسر شارات الحالة في الجدول، فيأخذ ألوانه من رموزها هي — لا من
   ست عشريات منسوخة عن لوحة المخططات. كانت تفترق عنها في درجتين بعد أن أغمقت
   الرموز لتبلغ ٤٫٥:١، وتبقى ثابتة في الوضع الداكن بينما تنقلب الشارات. */
.u-swatch-completed  { background: var(--blue); }
.u-swatch-inprogress { background: var(--green); }
.u-swatch-ready      { background: var(--amber); }
.u-swatch-overdue    { background: var(--red); }

/* A bar whose width arrives as data-bar; zero until app.js applies it. */
[data-bar] { width: 0; }

/* ------------------------------------------------------- filter drawer

   ثمانية حقول تصفية فوق كل لوحة تجعلها تقرأ كنموذج إدخال. الغلاف يطويها، ويبقي
   عدد المرشحات العاملة ظاهرا على الزر، فلا يضيع مرشح منسي. */

.filter-shell {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-1);
  margin-bottom: var(--gap);
}
.filter-shell > summary {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  cursor: pointer; list-style: none;
  font-size: 0.8125rem; font-weight: 600; color: var(--brand);
  border-radius: var(--r);
  user-select: none;
}
.filter-shell > summary::-webkit-details-marker { display: none; }
.filter-shell > summary:hover { background: var(--n-50); }
.filter-shell > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.filter-shell > summary .ico { width: 17px; height: 17px; color: var(--n-500); }
.filter-shell > summary .count {
  background: var(--brand-surface); color: #fff; border-radius: var(--r-pill);
  padding: 0 7px; font-size: 0.6875rem; font-weight: 700;
}
/* مؤشر الطي يدل على حالة، فيلزمه 3:1 غير النصي. كان بلون --n-400 — 2.10:1. */
.filter-shell > summary .chev {
  margin-inline-start: auto; color: var(--n-500);
  display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px;
  transform: rotate(90deg);
  transition: transform .2s var(--ease);
}
.filter-shell > summary .chev .ico { width: 16px; height: 16px; }
.filter-shell[open] > summary .chev { transform: rotate(-90deg); }
.filter-shell[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--r) var(--r) 0 0; }
.filter-shell > .filters { margin-bottom: 0; border: 0; box-shadow: none; }

.active-filters .chip.clear { color: var(--red); font-weight: 600; }

/* إسقاط مرشح واحد من شريحته. ٢٤ بكسل هو الحد الأدنى لهدف يصاب (2.5.8)،
   والشريحة أقصر منه، فيوسع الهدف بالحشو ويسحب بهامش سالب فلا يتغير الشكل. */
.active-filters .chip .drop {
  display: inline-flex; align-items: center; justify-content: center;
  /* منطقي لا مادي: ✕ آخر أبناء الشريحة، فهو في طرفها الداخلي — والهامش المادي
     كان يقضم ٨ بكسل من النص بجواره في صفحة من اليمين. */
  min-width: 24px; min-height: 24px; margin-block: -6px; margin-inline: 2px -8px;
  color: var(--muted); text-decoration: none; line-height: 1;
  border-radius: var(--r-sm);
}
.active-filters .chip .drop .ico { width: 13px; height: 13px; }
.active-filters .chip .drop:hover { color: var(--red); background: var(--grey-bg); }
.active-filters .chip .drop:focus-visible { outline: none; box-shadow: var(--ring); }

/* ------------------------------------------------------- presentation board

   رأس اللوحة: تقرأ كوثيقة جلسة لا كشاشة تصفح، فعنوانها وتاريخ احتسابها أولا. */

.board-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-1);
  border-top: 3px solid var(--brand-4);
  margin-bottom: var(--gap);
}
.board-head h2 { margin: 0; font-size: 1.0625rem; letter-spacing: var(--track-tight); }
.board-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-inline-start: auto; font-size: 0.75rem; color: var(--muted);
}
.board-meta strong { color: var(--brand); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   لوحة تخصيص المظهر، والتذييل
   ========================================================================== */

.sheet-veil {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(9, 34, 18, .42);
}
.sheet-veil[hidden] { display: none; }

.sheet {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 91;
  width: min(360px, 92vw);
  display: flex; flex-direction: column;
  background: var(--card); color: var(--text);
  border-inline-end: 1px solid var(--border);
  box-shadow: var(--shadow-3);
}
.sheet[hidden] { display: none; }

.sheet-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.sheet-head h2 { margin: 0; font-size: 1rem; flex: 1; }
.sheet-body { padding: var(--s-5); overflow-y: auto; flex: 1; }

.pref + .pref { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.pref h3 {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin: 0 0 var(--s-1); font-size: 0.8125rem; color: var(--brand);
}
.pref .help { margin: 0 0 var(--s-3); font-size: 0.75rem; color: var(--muted); }
.pref-val {
  margin-inline-start: auto; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--brand-wash); color: var(--brand-3);
  font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.pref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.pref-grid.k3 { grid-template-columns: repeat(3, 1fr); }

/* الاختيار لا يحمله اللون وحده: المختار يحمل حدا أعرض ووزنا أثقل، ويعلن
   aria-checked — من لا يميز الأخضر يعرف أيها مختار بالشكل لا بالدرجة. */
/* أزرار لوحة المظهر. كانت تسمى .chip — والاسم مأخوذ: شريحة محتوى معرفة أعلى
   هذا الملف بالخصوصية نفسها، فيغلبها المتأخر ويرتدي كل شريحة تصفية في النظام
   حشو زر لوحة وتمركزه ومؤشر يد لا ينقر تحته شيء. الاسم الآن يخص ما يخصه. */
.opt {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 9px var(--s-2); cursor: pointer;
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  background: var(--card); color: var(--n-700);
  font-family: inherit; font-size: 0.75rem; font-weight: 500;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.opt:hover { border-color: var(--brand-4); background: var(--n-25); }
.opt.on {
  border: 2px solid var(--brand-4); background: var(--brand-wash);
  color: var(--brand); font-weight: 700; padding: 8px calc(var(--s-2) - 1px);
}
.opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.tone-swatch {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: 5px;
  border: 1px solid var(--border-2);
}
.tone-swatch.t-brand { background: #0F4A26; }
.tone-swatch.t-light { background: var(--n-0); }
.tone-swatch.t-dark  { background: #191E1B; }

.pref-range { display: flex; align-items: center; gap: var(--s-2); }
.pref-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brand-4); }
.icon-btn.sm { width: 28px; height: 28px; flex: 0 0 28px; font-size: 0.875rem; font-weight: 700; }

/* ------------------------------------------------------------------ footer */

.sitefoot {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--border);
  background: var(--card);
  font-size: 0.75rem; color: var(--muted);
}
/* خيط الهوية نفسه الذي تحت الترويسة، يغلق الصفحة كما فتحها */
.sitefoot::before {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline: 0; height: 2px;
  background: var(--brand);
}
/* اللوح الأبيض نفسه، وللسبب نفسه: الطوق أسود ولا يقرأ على ذيل صفحة ينقلب. */
.sitefoot-mark {
  width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain;
  background: #fff; border-radius: var(--r-sm); padding: 2px; box-sizing: border-box;
}
.sitefoot-brand { display: flex; flex-direction: column; line-height: 1.4; }
.sitefoot-brand strong { color: var(--brand); font-size: 0.8125rem; }
.sitefoot-links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-inline-start: auto; }
.sitefoot-links a, .linkish {
  /* ‎inline-flex‎ مع ارتفاع أدنى: كانت ٢٠ بكسل، ومساحة النقر ارتفاع النص وحده */
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--brand-3); text-decoration: underline; background: none;
  border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit;
}
.sitefoot-links a:hover, .linkish:hover { color: var(--brand); }
.sitefoot-meta { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .sitefoot { flex-direction: column; align-items: flex-start; }
  .sitefoot-links { margin-inline-start: 0; }
}

/* ==========================================================================
   معاينة الخط داخل المنتقي، والوضع الداكن
   ========================================================================== */

/* كل زر خط يكتب اسمه بخطه: منتق لا يري ما يختار ليس منتقيا. تعرف بأصناف
   لا بسمة style، لأن سياسة أمن المحتوى تمنع الأنماط السطرية. */
.opt[data-value="plex"]     { font-family: "IBM Plex Sans Arabic", sans-serif; }
.opt[data-value="cairo"]    { font-family: "Cairo", sans-serif; }
.opt[data-value="tajawal"]  { font-family: "Tajawal", sans-serif; }
.opt[data-value="almarai"]  { font-family: "Almarai", sans-serif; }
.opt[data-value="notokufi"] { font-family: "Noto Kufi Arabic", sans-serif; }
.opt[data-value="changa"]   { font-family: "Changa", sans-serif; }
.opt[data-value="readex"]   { font-family: "Readex Pro", sans-serif; }
.opt[data-value="rubik"]    { font-family: "Rubik", sans-serif; }
.opt[data-value="messiri"]  { font-family: "El Messiri", sans-serif; }
.opt[data-value="amiri"]    { font-family: "Amiri", serif; }
.opt[data-value="system"]   { font-family: system-ui, sans-serif; }

/* صف المفتاح داخل اللوحة: العنوان فوق الشرح لا بجواره — الشرح جملة كاملة،
   ووضعه في السطر نفسه يخنق الاثنين في عمود ضيق. */
.sheet .switchbox { align-items: flex-start; }
.sheet .switchbox > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.sheet .switchbox .t { display: block; }
.sheet .switchbox .d { display: block; line-height: 1.45; }

/* ------------------------------------------------------------- dark mode

   الرموز وحدها تعاد تعريفا. كل لون في الواجهة يقرأ منها، فلا تحتاج الشاشات
   إلى قاعدة واحدة خاصة بها — والهوية تبقى: الأخضر الغامق يصير أرضية،
   والأخضر الفاتح يبقى لون الإشارة. النسب قيست على الأرضية الداكنة، لا نقلت
   عن الفاتحة.
   ---------------------------------------------------------------------- */

html[data-theme="dark"] {
  --n-0:  #151E19;
  --n-25: #192320;
  --n-50: #121A16;
  --n-100:#1F2A23;
  --n-200:#2B372F;
  --n-300:#3A483E;
  --n-400:#5B6B60;
  --n-500:#96A89B;      /* 6.80:1 على البطاقة */
  --n-600:#B3C2B7;
  --n-700:#D3DED6;
  --n-800:#EAF2EC;

  --bg: #0D1410;
  /* أرضية الصفحة أغمق من البطاقة هنا أصلا، فتؤدي ما تؤديه الدرجة الفاتحة */
  --auth-bg: #0D1410;
  /* الوهج يخفت في الداكن ولا يختفي: أخضر بتعتيم الفاتح نفسه يقرأ بقعة طلاء
     على أرضية سوداء. والظل يعمق، فالطبقة لا تفرق بفرق الإضاءة وحده. */
  --auth-glow-1: rgba(58, 145, 63, .10);
  --auth-glow-2: rgba(23, 101, 47, .09);
  --auth-line: #314036;
  --auth-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 16px 34px -14px rgba(0, 0, 0, .55),
                 0 48px 92px -36px rgba(0, 0, 0, .55);
  --auth-field: #121A16;
  --auth-ring: rgba(111, 203, 150, .18);
  --auth-focus-line: #6FCB96;
  --auth-on-bg: var(--brand-surface);
  --card: #151E19;
  --card-2: #192320;
  --border: #2B372F;
  --border-2: #3A483E;

  --text: #E9F2EB;
  --muted: var(--n-500);
  /* العناوين لا تصبح خضراء صريحة هنا وإن كانت الهوية خضراء: أخضر الحالة
     ‎--green‎ ينقلب في هذا الوضع إلى #6FCB96، فعنوان أخضر بجواره يقرأ شارة
     حالة لا عنوانا. هذه درجة نعناع شاحبة — تقرأ بيضاء ذات ميل أخضر
     (١٣٫٠٨:١ على البطاقة)، وتفترق عن أخضر الحالة بـ٣٣ ΔE.
     والروابط تميل إلى الأخضر الفاتح من الهوية لا إلى أخضرها الأساس،
     فتفترق عن أخضر الحالة بـ٢٥ ΔE وتبقى ١٠٫٩١:١ على البطاقة. */
  --brand: #CDE8D6;
  --brand-3: #9FE07E;
  --brand-4: #78D64B;
  --brand-wash: #15301F;

  /* حبر ما يكتب فوق لون تعليم القائمة. كان ‎#FFFFFF‎ في الجذر وحده، وهو يفترض
     أن لون التعليم أخضر غامق — و‎--brand‎ يرتفع هنا إلى نعناع شاحب، فيصير
     الأبيض عليه ١٫٣٠:١ في زر التسجيل وفي الصورة الرمزية. والدرجتان الأخريان
     تعلمان بالأبيض، وهذا الحبر الغامق يقرأ عليه كما يقرأ على النعناع. */
  --side-on-mark: #0F2417;

  --blue: #7FB2E8;  --blue-bg: #17263A;
  --green: #6FCB96; --green-bg: #12291D;
  --amber: #E2B364; --amber-bg: #2C2211;
  --red: #F08A8A;   --red-bg: #2E1618;
  --grey: #A8B3C2;  --grey-bg: #1F2836;
  --gold-soft: #3A2E13;

  /* الأخضر الفاتح يقرأ على الداكن: ٩٫٣٥:١ على البطاقة، ١٠٫٢٤ على الأرضية.
     وهو لون الهوية نفسه، فمؤشر التركيز هنا لا يحتاج إلى الدافئ الذي يحتاجه
     في الوضع الفاتح: لا شيء في هذا الوضع مطلي بالأخضر الفاتح غيره. */
  --focus: var(--accent);

  /* أفتح من نظيره الفاتح ليفصل عن البطاقة (٣٫٢٤:١)، وأغمق من أن يضيع عليه
     الأبيض (٥٫٢٧:١). */
  --brand-surface: #2E7A45;
  --red-surface: #BE3D3D;
  --green-surface: #2E7A4C;
  --heat-rgb: 159, 224, 126;

  /* حبر يقرأ على أرضيته الداكنة: ٧٫٨٣ و٨٫٠٨ و٧٫٠٠ و٦٫٨٦ على الترتيب. */
  --ok-ink: #6FCB96;   --ok-line: #1E4A33;
  --warn-ink: #E2B364; --warn-line: #4A3A1C;
  --err-ink: #F08A8A;  --err-line: #4E2528;
  --info-ink: #7FB2E8; --info-line: #24405F;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .40), 0 8px 20px -6px rgba(0, 0, 0, .50);
  --shadow-3: 0 10px 20px -8px rgba(0, 0, 0, .55), 0 24px 48px -16px rgba(0, 0, 0, .60);
}

/* الشعار والصور الرمزية تبقى بالهوية: هي علامة لا سطح */
html[data-theme="dark"] .opt.on { color: var(--brand); }
html[data-theme="dark"] .tone-swatch.t-light { background: #EAF2EC; }
html[data-theme="dark"] .sheet-veil { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .sitefoot { background: var(--card); }

/* المخططات تلون بـ fill سمةً من JavaScript، والسمة أدنى من أي قاعدة، فتغلبها
   هذه. والتفريق ضروري: لو صبغ النص كله بلون واحد لضاع الفرق بين قيمة وتسمية. */
html[data-theme="dark"] .chart .c-grid { stroke: var(--n-100); }
html[data-theme="dark"] .chart .c-axis { stroke: var(--n-300); }
html[data-theme="dark"] .chart text.c-lbl { fill: var(--muted); }
html[data-theme="dark"] .chart text.c-val { fill: var(--text); }
html[data-theme="dark"] .chart .c-track { fill: var(--n-100); }
html[data-theme="dark"] .chart .c-dot { fill: var(--card); }

/* جرس التنبيهات في الترويسة: العدد يركب على الأيقونة لا بجوارها، فلا يوسع الشريط */
.icon-btn.bell { position: relative; }
.icon-btn.bell .dot {
  position: absolute; top: 2px; inset-inline-end: 2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--red-surface); color: #fff;
  font-size: 0.625rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   القائمة في النوافذ المتوسطة

   بين ٧٦١ و١٠٦٠ بكسل لا تتسع الشاشة لقائمة ٢٦٨ بكسل مع جدول يقرأ، ولا يصح
   أن تختفي القائمة كلها: من يعمل في نصف شاشة يفتح الصفحة فلا يجد قائمة،
   فيظن أنها غابت. تضيق إلى أيقوناتها وتبقى في مكانها، وتتمدد عند المرور
   عليها أو عند وصول لوحة المفاتيح إليها — كالطي اليدوي تماما، إلا أن هذا
   يقرره العرض المتاح لا تفضيل القارئ، فيغلب التفضيل هنا.
   ========================================================================== */

@media (min-width: 761px) and (max-width: 1060px) {
  /* ولا يطال القائمة المخفية: تلك درج يفتح ويغلق، لا عمودا يضيق. */
  html[data-menu="hidden"] .sidebar { width: 268px; }
  html:not([data-menu="hidden"]) .sidebar { flex: 0 0 auto; width: var(--rail); }
  .sidebar:hover, .sidebar:focus-within {
    width: var(--sidebar);
    margin-inline-end: calc(var(--rail) - var(--sidebar));
    box-shadow: var(--shadow-3);
  }

  /* الاسم يقص لا يحذف: ‎display:none‎ يمحوه من شجرة الإتاحة فيصير كل بند
     أيقونة بلا اسم عند قارئ الشاشة. والعداد خبر لا زينة، فيقص معه. */
  .sidebar:not(:hover):not(:focus-within) .txt,
  .sidebar:not(:hover):not(:focus-within) .count {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .sidebar:not(:hover):not(:focus-within) .brand-text,
  .sidebar:not(:hover):not(:focus-within) .rail-btn,
  .sidebar:not(:hover):not(:focus-within) .who { display: none; }
  .sidebar:not(:hover):not(:focus-within) .nav-link { justify-content: center; }
  .sidebar:not(:hover):not(:focus-within) .nav-cta { padding-inline: 0; }
}

/* ==========================================================================
   القائمة المنسدلة بالبحث

   قائمة «السبب الجذري» أربعة عشر بندا، و«الإدارة المسؤولة» أكثر. القائمة
   الأصلية لا تبحث، فيمرر القارئ بعينه حتى يجد بنده. هذا يحل محلها منتقيا
   يكتب فيه حرفان فيبقى ما يطابقهما — والأصلية تبقى في الصفحة حاملةً
   للقيمة، فالنموذج يرسل كما كان وبلا JavaScript تعمل الشاشة كما كانت.
   ========================================================================== */

.combo { position: relative; }

/* الأصلية تخفى عن العين وعن شجرة الإتاحة معا: بقاؤها مقروءة يعلن حقلين
   لاسم واحد. و‎display:none‎ لا يمنع إرسال قيمتها. */
select.combo-native { display: none; }
.select-wrap.is-combo::after { display: none; }

.combo-input {
  width: 100%;
  padding-inline-end: 30px;      /* موضع السهم */
  cursor: pointer;
}
.combo::after {
  content: "▾"; position: absolute; inset-inline-end: 10px; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  color: var(--muted); font-size: 0.6875rem;
}

.combo-list {
  position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none;
  max-height: 264px; overflow-y: auto;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
}
.combo.up .combo-list { top: auto; bottom: calc(100% + 4px); }
.combo-list[hidden] { display: none; }

.combo-opt {
  padding: 7px var(--s-3); border-radius: var(--r-xs);
  font-size: 0.8125rem; cursor: pointer;
}
.combo-opt[hidden] { display: none; }
.combo-opt:hover { background: var(--n-100); }

/* البند المؤشر عليه بلوحة المفاتيح: أرضية وحد بادئ — الأرضية وحدها لون،
   ومن لا يميزه لا يعرف أين هو في القائمة. */
.combo-opt.on {
  background: var(--brand-wash); color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand-4);
}
html[dir="ltr"] .combo-opt.on { box-shadow: inset -3px 0 0 var(--brand-4); }

/* المختار يحمل علامة لا لونا: ‎aria-selected‎ يقرؤه قارئ الشاشة، والعلامة
   تراها العين التي لا تميز الدرجات. */
.combo-opt[aria-selected="true"] {
  font-weight: 700; color: var(--brand);
}
.combo-opt[aria-selected="true"]::after {
  content: "✓"; float: inline-end; color: var(--brand-3); font-weight: 700;
}
.combo-opt[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }

.combo-empty {
  padding: var(--s-3); font-size: 0.8125rem; color: var(--muted); text-align: center;
}
.combo-empty[hidden] { display: none; }

html[data-theme="dark"] .combo-opt:hover { background: var(--n-100); }
html[data-theme="dark"] .combo-opt.on { background: var(--brand-wash); }

/* ------------------------------------------- المنتقي متعدد الاختيار

   ما اختير يظهر رقاعا فوق الحقل. قائمة النظام المتعددة تعرضه صفوفا مظللة
   داخل صندوق يمرر، فلا يعرف القارئ ما اختاره إلا بالتمرير — ولا يزيل بندا
   إلا بنقرة مع مفتاح يعرفها القليل.
   ---------------------------------------------------------------------- */

/* السهم يوضع في منتصف المنتقي، وفي المتعددة يشمل المنتصف الرقاع فيطفو بينها
   وبين الحقل. والمتعددة حقل بحث لا قائمة منسدلة، فلا سهم لها أصلا. */
.combo-many::after { display: none; }
.combo-many .combo-input { cursor: text; padding-inline-end: var(--s-3); }
.combo-chips {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin: 0 0 var(--s-2); padding: 0; list-style: none;
}
.combo-many:not(.has-chips) .combo-chips { display: none; }

.combo-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 8px;
  padding-inline: 8px 4px;
  border: 1px solid var(--border-2); border-radius: var(--r-pill);
  background: var(--brand-wash); color: var(--brand);
  font-size: 0.75rem; font-weight: 600;
}
.combo-chip-x {
  display: grid; place-items: center;
  width: 17px; height: 17px; flex: 0 0 17px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(15, 74, 38, .12); color: var(--brand);
  font-size: 0.75rem; line-height: 1; font-family: inherit;
}
.combo-chip-x:hover { background: var(--red-surface); color: #fff; }
.combo-chip-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

html[data-theme="dark"] .combo-chip { background: var(--brand-wash); color: var(--text); }
html[data-theme="dark"] .combo-chip-x { background: rgba(255, 255, 255, .14); color: var(--text); }

/* ==========================================================================
   الإصبع والشاشة الصغيرة

   المقاس وحده لا يقول بأي شيء يلمس: حاسوب بشاشة لمس يحتاج أهدافا كبيرة
   وإن كان عرضه ١٥٠٠، ونافذة ضيقة على شاشة بفأرة لا تحتاجها. فيسأل عن أداة
   التأشير نفسها — ‎pointer: coarse‎ — لا عن العرض.

   ٢٤ بكسل حد المعيار 2.5.8، و٤٤ ما يوصي به دليلا آبل وجوجل لما يصاب
   بالإبهام. الحد مطبق في كل مكان، والتوصية على اللمس وحده.
   ========================================================================== */

@media (pointer: coarse) {
  .btn, .btn.sm, .btn.lg { min-height: 44px; }
  .pager a, .pager span.cur { min-width: 44px; height: 44px; }
  .icon-btn, .icon-btn.sm, .burger, .rail-btn {
    width: 44px; height: 44px; flex-basis: 44px;
  }
  .user-chip { min-height: 44px; }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea, .combo-input { min-height: 44px; }
  .u-box, .u-box-sm { width: 28px; height: 28px; min-height: 28px; }

  /* بنود القائمة المنسدلة تحتاج مسافة بين بعضها كما تحتاج ارتفاعا: بندان
     متلاصقان بارتفاع كاف يصابان معا. */
  .combo-opt { padding-block: 11px; }
  .nav-link { padding-block: 11px; }
  .chip { min-height: 44px; }
  .combo-chip-x { width: 24px; height: 24px; flex-basis: 24px; }

  /* الرابط داخل خلية الجدول هو باب السجل على الهاتف. يستثنيه المعيار لأنه
     نص في سطر، لكن استثناءً من قاعدة ليس عذرا عن تصميم يصعب لمسه. حشو
     رأسي يوسع مساحة الإصابة ولا يزيح السطر، فالحشو على عنصر سطري يفيض
     عن صندوق السطر بلا أن يدفع جيرانه. */
  td a, .card-foot a, .tl-body a { padding-block: 10px; }

  /* الجداول تلمس بالإبهام: صف أقصر من ٤٤ يجعل إصابة صفه الصحيح حظا */
  td, th { padding-block: 12px; }
}

/* الشاشة الممسوكة باليد: لا نص دون اثني عشر بكسل. عشرة تقرأ على شاشة
   مكتب بعينين مستريحتين، لا على هاتف في ضوء نهار. */
@media (max-width: 560px) {
  .brand-text span,
  .user-chip .who span,
  .sidebar-foot .who span,
  .u-mono-xs,
  .icon-btn.bell .dot,
  .combo-chip,
  .badge,
  .count { font-size: 0.75rem; }
  .pref-val, .nav-link .count { font-size: 0.75rem; }
}

/* ==========================================================================
   حواف الجهاز الآمنة، وتكبير iOS

   ‎viewport-fit=cover‎ في القالب يمد الصفحة تحت نتوء الشاشة ومقبضها، ويلغي
   الإزاحة التي يضعها المتصفح من تلقائه. بلا ‎env(safe-area-inset-*)‎ يمر
   المحتوى تحتهما: الشريط الجانبي يختفي طرفه خلف النتوء عند التدوير،
   والتذييل خلف المقبض.
   ========================================================================== */

.topbar { padding-inline: max(var(--s-6), env(safe-area-inset-inline-start)) max(var(--s-6), env(safe-area-inset-inline-end)); }
.content { padding-inline: max(var(--s-6), env(safe-area-inset-inline-start)) max(var(--s-6), env(safe-area-inset-inline-end)); }
.sitefoot { padding-bottom: max(var(--s-4), env(safe-area-inset-bottom)); }
.sidebar { padding-bottom: env(safe-area-inset-bottom); }
.present-bar { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

/* iOS Safari يكبّر الصفحة كلها حين يصل التركيز إلى حقل نصه دون ١٦ بكسل،
   ثم لا يعيدها. ستة عشر بكسل على اللمس تمنع القفزة من أصلها. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea, .combo-input { font-size: 1rem; }
}

/* الشاشة القصيرة — هاتف بالعرض: شريط علوي ٦٤ بكسل يأكل خُمس الارتفاع */
@media (max-height: 480px) and (pointer: coarse) {
  :root { --topbar: 48px; }
  .topbar { padding-block: 4px; }
  .sitefoot { display: none; }
}

/* نص المخطط لا يصغر عن أحد عشر بكسل على الشاشة الممسوكة باليد. اللوحة صارت
   بعرض حاويتها فمقياسها واحد، وهذه تحرس الحد لو ضاقت الحاوية دونه. */
@media (max-width: 560px) {
  .chart text { font-size: 11px; }
  .chart text.c-val { font-size: 12px; }
}

/* ==========================================================================
   ترويسة الهاتف: صفان لا ثلاثة

   الترويسة كانت تلتف إلى ثلاثة صفوف على شاشة ٣٩٠: العنوان وأدواته، ثم
   الحساب والخروج، ثم أزرار الصفحة. نحو ٣٢٠ بكسل قبل أول محتوى — ثمانية
   وثلاثون بالمئة من شاشة الهاتف تذهب إلى ما ليس هو المطلوب.

   الآن صفان: العنوان وكل الأدوات في صف، وأزرار الصفحة في شريط يمرر أفقيا
   داخل نفسه. والتمرير داخل غلاف لا يمد الصفحة، فلا يعود عليها بتمرير.
   ========================================================================== */

@media (max-width: 620px) {
  .topbar { padding: 6px 10px; gap: var(--s-2); }

  /* اسم المستخدم ودوره يطويان: الصورة الرمزية تكفي للدلالة، واسمه معروف له */
  .topbar .user-chip .who { display: none; }
  .topbar .user-chip { padding: 0; }
  .topbar-divider { display: none; }

  /* اللغة تنزل إلى صف الأدوات: الصف الأول لا يتسع لها ولحساب المستخدم معا،
     فكانت تدفعهما إلى صف ثالث — والصورة الرمزية والخروج وحدهما في سطر هدر. */
  .lang-switch { order: 9; }
  .lang-switch select { max-width: 96px; padding-inline: 6px; text-overflow: ellipsis; }

  /* الصف الأول يضم العنوان وكل ما يخص الحساب: الفاصل المطاطي يلغى ليلتصق */
  .topbar-spacer { display: none; }
  .topbar h1 { font-size: 0.875rem; }
  .topbar .crumb { font-size: 0.6875rem; }

  /* أزرار الصفحة شريط يمرر داخل نفسه بدل أن يلتف صفا كاملا */
  /* ‎flex-basis: 100%‎ كان يحجز سطرا كاملا فتبقى اللغة وحدها في سطر ثالث.
     الأساس صفر مع نمو يجعلهما يقتسمان السطر الثاني. */
  .topbar-tools {
    order: 10; flex: 1 1 0; min-width: 0;
    /* ‎nowrap‎ صراحة: القاعدة العامة تضع ‎wrap‎، فكانت الأزرار تلتف سطرا
       ثانيا داخل الشريط بدل أن تمرر فيه — والالتفاف هو ما كان يطيل الترويسة. */
    display: flex; flex-wrap: nowrap; gap: var(--s-2); justify-content: flex-end;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topbar-tools::-webkit-scrollbar { display: none; }
  .topbar-tools > * { flex: 0 0 auto; }

  /* لا أزرار للصفحة يعني لا صف ثان أصلا */
  .topbar-tools:empty { display: none; }
}

/* أضيق الشاشات المستعملة — ٣٢٠ بكسل. فرجة أضيق بين الأدوات تكفي الآن:
   كنت أخفيت زر المظهر هنا ظنا أن عدد الأزرار هو ما يطيل الترويسة، وكان
   السبب التفاف شريط الأزرار لا عددها. إخفاء ما لا يلزم إخفاؤه يخفي وظيفة. */
@media (max-width: 360px) {
  .topbar { gap: 6px; }
}

/* الغلاف الذي صار يستقبل التركيز يجب أن يبين ذلك: حلقة تركيز مثل أي عنصر
   آخر، وإلا انتقل التركيز إليه ولا يرى القارئ أين هو. */
.table-wrap:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}