/* دوائي — الصفحات القانونية العامة.
   ملف واحد لكل الصفحات: النسخ داخل كل صفحة كان سيتباعد مع أول تعديل.
   بلا خطوط خارجية وبلا أي طلب لطرف ثالث — صفحة خصوصية تحمّل مورداً من
   خادم غريب تناقض نصّها. */

/* ═══════════════════════════════════════════════════════════════════════
   الخط
   ═══════════════════════════════════════════════════════════════════════

   ⚠️ ملفات خط «ثمانية» **لا يجوز رفعها على هذا الموقع**.

   رخصة الخط (assets/fonts/thmanyah/THMANYAH-LICENSE.pdf) تمنع صراحةً:

     "Redistribute, share, upload, host, or make the Font Software available
      for download on any website, server, digital platform… including
      through web embedding"

   وتسمح بالتضمين "only as part of a compiled, packaged, or obfuscated
   product" — وهو ما ينطبق على تطبيق Flutter (حزمة مُصرَّفة) ولا ينطبق على
   `@font-face { src: url(...) }`، فذلك بطبيعته ملف خطٍّ قابل للتنزيل من
   رابط عام. ولا مخرج عبر Google Fonts: الخط ليس منشوراً هناك، وأي نسخة على
   خادم ثالث توزيعٌ غير مرخَّص.

   ولذلك: `local()` وحدها. من يملك الخط مثبَّتاً على جهازه — فريق العمل،
   وعملاء ثمانية — يرى الهوية كاملة، ولا يُرفع أي ملف ولا يُنزَّل أي شيء.
   بقية الزوار يقعون على خط النظام، ولذلك ضُبطت بقية الطباعة أدناه لتصمد
   على الخط الاحتياطي: المقاس والوزن والتباعد هي ما يحمل الشبه، لا الحروف
   وحدها.

   ── لو حصلتم على ترخيص ويب من ثمانية (ask@thmanyah.com) ──
   التبديل سطران لا أكثر:
     1. أضِف الملفات إلى `site/assets/fonts/` وأضِف `url()` قبل `local()`
        في كل كتلة أدناه:  src: url('/assets/fonts/thmanyah-regular.woff2')
                                format('woff2'), local('thmanyah sans');
     2. أضِف `font-src 'self'` إلى `Content-Security-Policy` في `site/_headers`
        — بدونها يحجب المتصفح الملف بصمت والصفحة تبدو سليمة وهي ليست كذلك.
   ═══════════════════════════════════════════════════════════════════════ */

/* الأوزان تطابق `AppTextStyles` في التطبيق: 400 عادي، 500 متوسط، 700 عريض.
   (300 و900 محزومان في التطبيق ولا تستعملهما هذه الصفحات، فلا كتلة لهما.)

   الأسماء في `local()` **مقروءة من جدول `name` في ملفات OTF نفسها** لا
   مخمَّنة — وهي غير متّسقة بين الملفات، فلا تُشتق أحدها من الآخر:

     الوزن     family (1)             full (4)                  postScript (6)
     400       thmanyah sans          thmanyah sans Regular     thmanyahsans-Regular
     500       thmanyah sans Med ⚠️   thmanyah sans Medium      thmanyahsans-Medium
     700       thmanyah sans          thmanyah sans Bold        thmanyahsans-Bold

   ⚠️ عائلة الوزن المتوسط مسجَّلة «Med» مختصرة لا «Medium». الأسماء الثلاثة
   مذكورة في كل كتلة لأن المتصفحات تختلف فيما تطابقه: بعضها يطابق الاسم
   الكامل وبعضها اسم PostScript. */
@font-face {
  font-family: 'Thmanyah';
  src: local('thmanyah sans'), local('thmanyah sans Regular'),
       local('thmanyahsans-Regular');
  font-weight: 400;
  font-style: normal;
  /* `swap` بلا أثر هنا (لا تنزيل أصلاً)، لكنها تبقى صحيحة لو أُضيف url()
     لاحقاً: النص يظهر فوراً بالخط الاحتياطي بدل صفحة بيضاء تنتظر ملفاً. */
  font-display: swap;
}

@font-face {
  font-family: 'Thmanyah';
  src: local('thmanyah sans Med'), local('thmanyah sans Medium'),
       local('thmanyahsans-Medium');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Thmanyah';
  src: local('thmanyah sans Bold'), local('thmanyahsans-Bold');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* الاحتياطي ليس زينة — هو ما يراه أغلب الزوار فعلاً.
     الترتيب مقصود: خط النظام أولاً (SF Arabic على أبل، Segoe UI على
     ويندوز)، ثم عائلات عربية صريحة لأنظمة لا يغطي `system-ui` فيها العربية
     بخط جيد. بلا هذه العائلات يقع أندرويد ولينكس على خط لاتيني لا يملك
     حروفاً عربية، فيستبدلها المتصفح حرفاً حرفاً من خط أخير رديء. */
  --font-ui: 'Thmanyah', system-ui, -apple-system, BlinkMacSystemFont,
    'SF Arabic', 'Segoe UI', 'Noto Sans Arabic', 'Noto Naskh Arabic',
    'Droid Arabic Naskh', Roboto, Tahoma, Arial, sans-serif;

  --bg: #040d12;
  --panel: #0b2a33;
  --border: #17414d;
  --text: #eaf4f7;
  --muted: #a9c4cc;
  --accent: #55a6c1;
  --warn-bg: #2a1f0b;
  --warn-border: #7a5a1a;
}

/* الوضع الفاتح للأجهزة المضبوطة عليه: المراجع قد يفتحها على متصفح فاتح،
   ونص فاتح على خلفية فاتحة هو صفحة غير مقروءة. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --panel: #f4f8fa;
    --border: #d3e0e5;
    --text: #10242b;
    --muted: #4a636c;
    --accent: #0d6a85;
    --warn-bg: #fdf5e3;
    --warn-border: #d9b45a;
  }

  /* عكس تنعيم الوضع الداكن. النص الداكن على أرض فاتحة لا يتسمّن بصرياً، بل
     يميل إلى النحول — وفرض التنعيم الرمادي عليه يزيده نحولاً حتى تتلاشى
     نقاط الإعجام عند 17 بكسل. الافتراضي (تنعيم البكسلات الفرعية) أثخن
     وأوضح، وهو الصحيح هنا. */
  body {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 400;
  /* 1.9 سطراً للنص العربي، وهو أوسع ممّا يُعطى للاتيني عن قصد: العربية
     تحمل نزلات طويلة (ج، ح، ي، ق) وعلامات فوقية، وسطرٌ ضيّق يجعل نزلة
     السطر الأعلى تلامس علامة السطر الذي تحته. */
  line-height: 1.9;

  /* ⚠️ صفر لا رقم موجب. `letter-spacing` على نص عربي **يفكّ اتصال
     الحروف**: العربية خط متصل، وزيادة التباعد تفصل الحرف عن جاره فتتحوّل
     الكلمة إلى حروف متناثرة. هذا التصريح ليس ضبطاً جمالياً بل حاجز أمان
     ضد قاعدة تُضاف لاحقاً بحسن نية. */
  letter-spacing: 0;

  /* الوصل والبدائل السياقية شرط تصحيح لا خيار: بدونها تنكسر «لا» المركّبة
     وأشكال الحروف حسب موضعها. */
  font-variant-ligatures: normal;
  font-feature-settings: 'liga' 1, 'calt' 1;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* تنعيم للوضع الداكن (وهو الافتراضي هنا).
     النص الفاتح على خلفية داكنة يبدو **أثقل** ممّا هو فعلاً — تتسع الحروف
     بصرياً على الأرض المظلمة. والعربية تدفع الثمن مضاعفاً: نقاط الإعجام
     وعلامات الوصل رفيعة، فتتسمّن وتتقارب حتى تكاد «ثـ» و«تـ» تتشابهان.
     التنعيم الرمادي يعيد الوزن الظاهري إلى ما هو مقصود، بلا تخفيف الوزن
     نفسه — وتخفيفه كان سيكسر التباين الذي يثبّته `contrast_test`. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { max-width: 46rem; margin: 0 auto; }

header { border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 2rem; }

/* العناوين — الأوزان مأخوذة من `AppTextStyles` في التطبيق كي يتطابق الهرم
   البصري بين الشاشة والصفحة: العنوان الأكبر عريض (700)، وما دونه شبه عريض.
   السطر أضيق من سطر النص (1.35–1.5) لأن العنوان سطران على الأكثر، والسطر
   الواسع فيه يفكّك الكتلة بدل أن يريح العين. */
h1, h2, h3 {
  font-family: var(--font-ui);
  letter-spacing: 0;
  /* يوزّع العنوان على سطرين متقاربَي الطول بدل كلمة يتيمة في الثاني. */
  text-wrap: balance;
}

h1 { font-size: 1.7rem; font-weight: 700; line-height: 1.45; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.5; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.05rem; font-weight: 500; line-height: 1.55; margin: 1.75rem 0 .5rem; }

.updated { color: var(--muted); font-size: .9rem; font-weight: 400; margin: 0; }

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

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-family: var(--font-ui);
  font-size: .95rem;
  /* أضيق من سطر النص الجاري: خلية الجدول عمود قصير، والسطر الواسع فيها
     يجعل الصف يبدو منفصلاً عن نفسه. */
  line-height: 1.75;
}

th, td {
  border: 1px solid var(--border);
  padding: .6rem .75rem;
  text-align: right;
  vertical-align: top;
  letter-spacing: 0;
}

th { background: var(--panel); font-weight: 700; }

/* الجداول تفيض على الهواتف الضيقة — التمرير داخل الجدول لا في الصفحة كلها. */
.scroll { overflow-x: auto; }

ul, ol { padding-inline-start: 1.5rem; }
li { margin: .35rem 0; }

.callout {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.callout.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

nav.links { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .95rem; }
nav.links a { margin-inline-end: 1.25rem; display: inline-block; }

footer { margin-top: 3rem; color: var(--muted); font-size: .85rem; }

code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: .3rem;
  padding: .1rem .35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  /* لاتيني بحت — وهو الموضع الوحيد في الصفحة الذي يقبل تباعد حروف. */
  letter-spacing: .01em;
  /* لا وصل ولا بدائل سياقية في الكود: `!=` يجب أن تبقى حرفين. */
  font-variant-ligatures: none;
}

/* لا نماذج في الموقع اليوم (ساكن بلا خادم يستقبل)، لكن عناصر النموذج لا
   ترث الخط من `body` بحكم افتراضات المتصفح — فتقع على خط النظام وحدها
   وتبدو غريبة عن الصفحة. التصريح هنا يجعل أي زر أو حقل يُضاف لاحقاً
   صحيحاً من أول سطر. */
button,
input,
select,
textarea {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0;
}