/* =============================================================
   آل صبيح — طبقة الهوية المشتركة لموقع sabih.org
   ملف واحد يخدم كل الصفحات. بلا CDN وبلا خطوط خارجية وبلا تتبع.
   المرجع: docs/superpowers/specs/2026-08-25-design-source-of-truth.md
   ============================================================= */

/* ---------- ١. الخطوط ----------------------------------------
   رخصة خط ثمانية تجيز استعماله تجاريا في مواقع الويب نصا (قسم
   الاستخدامات المسموح بها). وقرار المالك ٢٠٢٦-٠٨-٢٦: تُستضاف ملفات
   woff2 على نطاقنا وحده. والملفات كما وردت من ثمانية بلا اقتطاع ولا
   تعديل — فالرخصة تمنع التعديل والاشتقاق وإعادة النشر خطا جديدا.
   local() أولا: من ثبّت الخط على جهازه لا ينزل شيئا.
   وزنان لكل عائلة (٤٠٠ و٧٠٠) لأنهما وحدهما المستعملان في هذا الملف.
   ------------------------------------------------------------- */
@font-face {
  font-family: "Thmanyah Serif Display";
  src: local("thmanyah serif display"), local("thmanyahserifdisplay-Regular"),
       url("fonts/thmanyahserifdisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: local("thmanyah serif display Bold"), local("thmanyahserifdisplay-Bold"),
       url("fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: local("thmanyah serif text"), local("thmanyahseriftext-Regular"),
       url("fonts/thmanyahseriftext-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: local("thmanyah serif text Bold"), local("thmanyahseriftext-Bold"),
       url("fonts/thmanyahseriftext-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: local("thmanyah sans"), local("thmanyahsans-Regular"),
       url("fonts/thmanyahsans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: local("thmanyah sans Bold"), local("thmanyahsans-Bold"),
       url("fonts/thmanyahsans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* وجه المنتج: Serif Display للهوية والعناوين، Sans لنص الواجهة */
  --font-display: "Thmanyah Serif Display", "Noto Naskh Arabic", "Sakkal Majalla",
                  "Traditional Arabic", "Times New Roman", serif;
  /* قرار المالك ٢٠٢٦-٠٨-٢٦: وجه المنصة سيرف لا سانس. المتن على
     Serif Text لانه مرسوم للقراءة في المقاسات الصغيرة، والعناوين
     والهوية على Serif Display المرسوم للمقاسات الكبيرة. Sans يبقى
     معرفا بديلا اخيرا ولا يستدعيه شيء. */
  --font-body: "Thmanyah Serif Text", "Thmanyah Serif Display", "Noto Naskh Arabic",
               "Sakkal Majalla", "Traditional Arabic", "Times New Roman", serif;

  /* ---------- ٢. اللوحة (identity-direction.html + المواصفة §3) ---------- */
  --c-primary: #3E0048;
  --c-primary-container: #8A5FA8;
  --c-primary-tint: #F1E6F7;
  --c-secondary: #0D6B70;
  --c-sand: #E9DDCA;
  --c-pistachio: #E1F7C8;
  --c-on-pistachio: #19351F;
  --c-lavender: #7D86F3;

  --c-bg: #F8F8F8;
  --c-surface: #FFFFFF;
  --c-outline: #E5E5EA;
  --c-divider: #F0F0F0;

  --c-text: #1D1D1F;
  --c-text-secondary: #6B6B6B;  /* ٥٫٤:١ على الأبيض */
  --c-text-muted: #8A8A8E;      /* ٣٫٤:١ — للزخرفة الصغيرة فقط لا لنص أساسي */

  --c-warning-tint: #FFF8E8;
  --c-warning-outline: #F0E2BD;
  --c-on-warning: #5A4A1E;

  /* ---------- ٣. سلّم المقاسات ----------
     مشتق من سلّم التطبيق المعتمد (١٠ / ١١ / ١٢ / ١٤ / ١٦ / ١٧ / ٢٨ منطقية)
     منسوباً إلى نص البطاقة ١٢ ثم مضروباً في ١٦px أساساً للويب.
     بالـ rem احتراماً لمقاس خط المتصفح عند المستخدم. */
  --fs-xs: 0.8125rem;    /* ١٣px ← ١٠ في التطبيق (حاشية) */
  --fs-sm: 0.9375rem;    /* ١٥px ← ١١ (تسمية / نص ثانوي) */
  --fs-body: 1rem;       /* ١٦px ← ١٢ (نص البطاقة) */
  --fs-h3: 1.1875rem;    /* ١٩px ← ١٤ (عنوان قسم) */
  --fs-h2: 1.3125rem;    /* ٢١px ← ١٦ (عنوان بانر / ترحيب) */
  --fs-h1: 1.4375rem;    /* ٢٣px ← ١٧ (عنوان الرأس) */
  --fs-display: 1.875rem;/* ٣٠px — الوسم في الصفحة الرئيسية */
  --fs-code: 2.3125rem;  /* ٣٧px ← ٢٨ (رمز التعريف) */

  --lh-tight: 1.35;
  --lh-card: 1.6;
  --lh-doc: 1.9;

  /* ---------- ٤. الأشكال والظلال والإيقاع ---------- */
  --r-header: 26px;
  --r-card: 16px;
  --r-ann: 14px;
  /* قرار المالك ٢٠٢٦-٠٨-٢٦: كل الأزرار حبة كاملة الاستدارة */
  --r-btn: 999px;
  --r-chip: 20px;

  --sh-card: 0 2px 10px rgba(0, 0, 0, .05);
  --sh-disc: 0 2px 10px rgba(0, 0, 0, .07);
  --sh-tile: 0 2px 8px rgba(0, 0, 0, .06);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  --wrap: 720px;

  color-scheme: light;
}

/* ---------- ٥. الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-card);
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

a { color: var(--c-secondary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* حالات التركيز — مرئية على الفاتح وعلى البنفسجي */
:focus-visible {
  outline: 3px solid var(--c-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}
.band :focus-visible,
.banner :focus-visible {
  outline-color: var(--c-sand);
}

/* تخطي إلى المحتوى */
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: var(--s2);
  z-index: 10;
  background: var(--c-surface);
  color: var(--c-primary);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--sh-card);
}
.skip:focus { inset-inline-start: var(--s4); }

/* ---------- ٦. الرأس البنفسجي الغامر ---------- */
.band {
  background: var(--c-primary);
  color: #fff;
  border-end-start-radius: var(--r-header);
  border-end-end-radius: var(--r-header);
  padding: var(--s5) var(--s4) var(--s6);
}
.band-in {
  max-width: var(--wrap);
  margin-inline: auto;
}
.band a { color: #fff; }

/* الوسم: الأيقونة + اسم المنصة */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
}
.brand .mark {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.brand .mark img { display: block; width: 100%; height: 100%; }
.brand .name {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.brand:hover .name { text-decoration: underline; text-underline-offset: 4px; }

/* عنوان الصفحة داخل الرأس (نمط الرأس الغامر في التطبيق) */
.band h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  margin: var(--s5) 0 0;
  line-height: var(--lh-tight);
}
.band .band-sub {
  margin: var(--s2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-sand);
  line-height: var(--lh-card);
}

/* في الرئيسية الوسم نفسه هو عنوان الصفحة (h1) إذ لا عنوان أعلى منه:
   يرث هيئة الوسم ولا يأخذ هوامش عنوان الرأس ولا مقاسه، فالمقاس من .name */
.band h1.brand { margin: 0; font-size: inherit; }

/* نسخة الصفحة الرئيسية: وسم أكبر */
.band--hero { padding-bottom: var(--s10); }
.band--hero .name { font-size: var(--fs-display); }
.band--hero .mark { width: 60px; height: 60px; border-radius: 14px; }

/* ---------- ٧. العمود والبطاقات ---------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--s6) var(--s4) var(--s8);
}
/* البطاقات تتدلى من الرأس كما في الرئيسية داخل التطبيق */
.wrap--lift { margin-top: calc(var(--s5) * -1); padding-top: 0; }

.card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--s5);
  margin-bottom: var(--s3);
}
.card:last-child { margin-bottom: 0; }

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 var(--s2);
  line-height: var(--lh-tight);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 var(--s1);
  line-height: var(--lh-tight);
}
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

/* عنوان قسم على الخلفية الرمادية (إيقاع ١٢ فوق و٨ تحت) */
.sec {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-text);
  margin: var(--s5) 0 var(--s2);
}

.muted { color: var(--c-text-secondary); }
.stamp {
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  margin: 0 0 var(--s3);
}
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- ٨. البانر الرملي ---------- */
.banner {
  position: relative;
  overflow: hidden;               /* إلزامي: الزخرفتان تخرجان عن الحواف */
  background: var(--c-sand);
  color: var(--c-primary);
  border-radius: var(--r-card);
  /* حشوة سفلية زائدة: تترك للزخرفة منطقة خالية أسفل البطاقة فلا يقع
     النص فوق الدائرة البنفسجية ويسقط تباينه */
  padding: var(--s5) var(--s5) calc(var(--s5) + 44px);
  margin-bottom: var(--s3);
}
.banner > * { position: relative; }
.banner::before,
.banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* دائرة ١١٠ بلون الأساس بعتامة ٠٫٥ عند طرف البطاقة السفلي */
.banner::before {
  inset-inline-end: -18px;
  bottom: -22px;
  width: 110px;
  height: 110px;
  background: var(--c-primary);
  opacity: .5;
}
/* دائرة ٧٠ بالتركوازي بعتامة ٠٫٣٥ */
.banner::after {
  inset-inline-end: 40px;
  top: -30px;
  width: 70px;
  height: 70px;
  background: var(--c-secondary);
  opacity: .35;
}
.banner h2 { color: var(--c-primary); }
.banner p { max-width: 34ch; }   /* لا يصطدم النص بالزخرفة */

/* ---------- ٩. الأزرار ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;              /* مساحة لمس آمنة */
  padding: var(--s3) var(--s5);
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  background: var(--c-primary);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
/* الأساسي بتدرج ٤٥ درجة من البنفسجي إلى حاويته — لونان من اللوحة
   المعتمدة، والشكل حبة. قرار المالك ٢٠٢٦-٠٨-٢٦. */
.btn { background-image: linear-gradient(45deg, var(--c-primary), var(--c-primary-container)); }
.btn:hover { background-image: linear-gradient(45deg, var(--c-primary-container), var(--c-primary)); }
.btn--ghost { background-image: none;
  background: var(--c-surface);
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--ghost:hover { background: var(--c-primary-tint); }
.btn--sand { background: var(--c-primary); color: #fff; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.btn-row .btn { flex: 1 1 auto; }

/* ---------- ١٠. أيقونات duotone ----------
   المعالجة المعتمدة: طبقتان بلونين حقيقيين — الخلفية رملية بعتامة ١،
   والأمامية بلون العنصر. لا مكتبة أيقونات خارجية: الأشكال مرسومة هنا. */
.duo {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--c-primary);
}
.duo .duo-bg { fill: var(--c-sand); }
.duo .duo-fg { fill: none; stroke: currentColor; stroke-width: 1.6;
                stroke-linecap: round; stroke-linejoin: round; }

/* قرص أبيض حول الأيقونة كما في شبكة الخدمات */
.disc {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--sh-disc);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* بطاقة ميزة: أيقونة + نص */
.feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
}
.feature + .feature {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--c-divider);
}
.feature p { margin: 0; color: var(--c-text-secondary); font-size: var(--fs-sm); }

/* ---------- ١١. رمز التعريف ---------- */
.code-box {
  text-align: center;
  padding: var(--s4) 0 var(--s2);
}
/* المجموعتان في عنصرين مستقلين ليضبط CSS ترتيبهما لا خوارزمية الاتجاه */
.code {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  direction: ltr;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 9vw, var(--fs-code));
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--c-primary);
  line-height: 1.2;
  margin: 0;
}
.code span { unicode-bidi: isolate; }

/* ---------- ١٢. صندوق الإقرار ---------- */
.note {
  background: var(--c-warning-tint);
  border: 1px solid var(--c-warning-outline);
  border-radius: var(--r-btn);
  padding: var(--s3) var(--s4);
  color: var(--c-on-warning);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* رقاقة حالة */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  border-radius: var(--r-chip);
  border: 1px solid var(--c-outline);
  background: var(--c-surface);
  color: var(--c-primary);
  padding: var(--s1) var(--s3);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ---------- ١٣. الصفحات النصية الطويلة (الخصوصية والشروط) ---------- */
.doc { line-height: var(--lh-doc); }
.doc h2 {
  font-size: var(--fs-h3);
  margin: var(--s8) 0 var(--s2);
  scroll-margin-top: var(--s4);
}
.doc h2:first-of-type { margin-top: var(--s5); }
.doc p, .doc li { line-height: var(--lh-doc); }
.doc ul { padding-inline-start: var(--s5); margin: 0 0 var(--s3); }
.doc li { margin-bottom: var(--s1); }
/* الترقيم بالأرقام المشرقية كما يفرض دليل نصوص الواجهة، لا بالافتراضي اللاتيني */
.doc ol {
  padding-inline-start: var(--s5);
  line-height: 2;
  list-style-type: arabic-indic;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  /* دون حد أدنى تنضغط الأعمدة الثلاثة إلى كلمة في كل سطر على جوال ٣٦٠ */
  min-width: 520px;
  margin: var(--s2) 0 var(--s4);
  font-size: var(--fs-sm);
}
.doc th, .doc td {
  border: 1px solid var(--c-outline);
  padding: var(--s2) var(--s3);
  text-align: start;
  vertical-align: top;
  line-height: 1.8;
}
.doc th {
  background: var(--c-bg);
  color: var(--c-primary);
  font-weight: 700;
}
/* الجدول يمرر داخل حاويته ولا يمرر الصفحة أفقيا */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible { outline: 3px solid var(--c-secondary); outline-offset: 2px; }

/* ---------- ١٤. التذييل ---------- */
.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s8);
  color: var(--c-text-secondary);
  font-size: var(--fs-sm);
  text-align: center;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s3);
}
.foot .sep { color: var(--c-text-muted); }
/* سطر الحقوق — نص شاشة الترحيب نفسه في التطبيق (welcomeRights).
   لونه الثانوي لا الخافت: الخافت ٣٫٤:١ ولا يكفي لنص يقرأ. */
.foot .rights {
  margin: var(--s2) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

/* ---------- ١٥. الاستجابة ---------- */
@media (max-width: 480px) {
  :root { --fs-display: 1.625rem; --fs-h1: 1.3125rem; }
  .card { padding: var(--s4); }
  .banner { padding: var(--s4) var(--s4) calc(var(--s4) + 40px); }
  .band { padding: var(--s4) var(--s4) var(--s5); }
  .band--hero { padding-bottom: var(--s8); }
  .wrap { padding: var(--s5) var(--s4) var(--s6); }
  .btn-row .btn { flex-basis: 100%; }
  .banner p { max-width: 24ch; }
}

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

@media print {
  body { background: #fff; }
  .band { background: #fff; color: var(--c-primary); border-radius: 0;
          border-bottom: 2px solid var(--c-primary); }
  .band a, .band .band-sub { color: var(--c-primary); }
  .card { box-shadow: none; border: 1px solid var(--c-outline); }
  .skip, .btn { display: none; }
}