/* ============================================================
   DOOOQS — الطبقة البصرية
   ------------------------------------------------------------
   المرجع: نظام التصميم الحكومي الموحّد (design.dga.gov.sa) —
   كثافته ومقاساته وترتيبه وهدوؤه. الخط IBM Plex Sans Arabic من
   brand/fonts/ ولا شبكة خارجية في الملف كلّه.

   قواعد الملف:
   · لون تمييز واحد (--accent). وألوان الحالة (نجاح/تنبيه/خطأ) لا
     تُستعمل إلا داخل التنبيهات والوسوم، فلا تنافس لون التمييز.
   · لا تدرّجات. الظلّ واحد خفيف على البطاقات وحدها.
   · نصفا قطر لا غير: --radius-1 للحقول والأزرار والوسوم،
     --radius-2 للبطاقات والجداول والتنبيهات.
   · كل مسافة من --space-* وكلّها مضاعفات 8 (والـ4 للفواصل الدقيقة).
   · خصائص منطقية وحدها (inline/block) فالواجهة RTL وLTR بورقة واحدة.
   ============================================================ */

/* ---------- الخطّ: محلّي، بلا شبكة ---------- */
@font-face { font-family:"IBM Plex Sans Arabic"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/brand/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans Arabic"; font-weight:500; font-style:normal; font-display:swap;
  src:url("/brand/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans Arabic"; font-weight:600; font-style:normal; font-display:swap;
  src:url("/brand/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans Arabic"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/brand/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); }

/* ============================================================
   1 · الرموز
   ============================================================ */
:root {
  color-scheme: light;

  /* --- الخطوط --- */
  --sans: "IBM Plex Sans Arabic", "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* --- مقياس النصّ --- */
  --text-xs:   0.75rem;   /* 12 — بيانات فرعية */
  --text-sm:   0.875rem;  /* 14 — الجداول والتلميحات */
  --text-base: 1rem;      /* 16 — المتن */
  --text-md:   1.125rem;  /* 18 — المقدّمة */
  --text-lg:   1.25rem;   /* 20 — عنوان قسم */
  --text-xl:   1.5rem;    /* 24 — عنوان بطاقة كبيرة */
  --text-2xl:  2rem;      /* 32 — عنوان الصفحة */
  --text-3xl:  2.5rem;    /* 40 — عنوان الواجهة التعريفية */

  --leading-tight: 1.35;
  --leading-snug:  1.55;
  --leading-body:  1.75;

  /* --- شبكة 8 بكسل --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- نصفا القطر --- */
  --radius-1: 4px;   /* الحقول والأزرار والوسوم */
  --radius-2: 8px;   /* البطاقات والجداول والتنبيهات */

  /* --- الألوان: محايدة باردة، حكوميّة --- */
  --canvas:      #F2F4F5;
  --surface:     #FFFFFF;
  --surface-2:   #F7F9FA;
  --surface-3:   #EDF1F3;

  --ink:         #14202B;
  --ink-2:       #3C4A57;
  --ink-3:       #63707C;
  --on-dark:     #F2F4F5;
  --on-dark-2:   #A9B4BD;

  --line:        #DDE3E7;
  --line-strong: #C2CCD3;

  /* --- لون التمييز الواحد --- */
  --accent:       #2C537D;
  --accent-hover: #223F5E;
  --accent-press: #1A3149;
  --accent-wash:  #EAF0F6;
  --accent-line:  #B6C7DA;
  --on-accent:    #FFFFFF;

  /* --- ألوان الحالة: للتنبيهات والوسوم وحدها --- */
  --ok:          #1D6B44;  --ok-wash:     #E9F3ED;  --ok-line:     #B7D6C4;
  --warn:        #8A5A12;  --warn-wash:   #FBF2E2;  --warn-line:   #E4CC9C;
  --danger:      #A32B22;  --danger-wash: #FBECEA;  --danger-line: #E7BDB7;

  /* --- المقاسات --- */
  --control-h:    40px;
  --control-h-lg: 48px;
  --control-h-sm: 32px;
  --measure:      42rem;   /* عرض القراءة للنماذج والمتن */
  --measure-wide: 76rem;   /* الجداول والقوائم */
  --gutter:       var(--space-4);

  --shadow: 0 1px 2px rgba(20, 32, 43, .06);
  --focus:  2px solid var(--accent);
}

@media (min-width: 48rem) { :root { --gutter: var(--space-5); } }

/* ============================================================
   2 · الأساس
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
body.lang-en { line-height: var(--leading-snug); }

.wrap {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main.wrap { flex: 1 0 auto; padding-block: var(--space-6) var(--space-8); }

/* عرض القراءة: النماذج والمتن، عمودًا واحدًا في وسط الصفحة.
   والجداول والقوائم وحدها تأخذ العرض الكامل بـ .wide. */
.wrap.measure { max-width: calc(var(--measure) + var(--gutter) * 2); }
.wrap.wide { max-width: var(--measure-wide); }
.narrow, .measure:not(.wrap) { max-width: var(--measure); }

/* رابط تخطّي الملاحة: يظهر عند التنقّل بلوحة المفاتيح وحدها. */
.skip {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: -100%;
  z-index: 20;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-1);
  text-decoration: none;
  font-weight: 500;
}
.skip:focus { inset-block-start: var(--space-2); }
/* و`a:hover` يفوق `.skip` في الأولوية، فكان رابطُ التخطّي عند المرور
   يصير بلون التمرير على أرضية الإبراز: تباينٌ 1.36:1. واللونُ يُثبَّت. */
.skip:hover, .skip:focus:hover { color: var(--on-accent); }

/* ============================================================
   3 · النصّ
   ============================================================ */
h1, h2, h3 { color: var(--ink); line-height: var(--leading-tight); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); }
h3 { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.card > h2:first-child,
.card > h3:first-child,
.alert h2:first-child { margin-block-start: 0; }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-block-end: 0; }

.lede {
  font-size: var(--text-md);
  color: var(--ink-2);
  max-width: var(--measure);
  margin-block-end: var(--space-5);
}
.eyebrow {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 var(--space-2);
  letter-spacing: .01em;
}
.muted { color: var(--ink-3); font-size: var(--text-sm); }
.aside { margin-block-start: var(--space-4); font-size: var(--text-sm); }

a { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
strong { font-weight: 600; }

/* الأكواد والبصمات والتواريخ والمعرّفات: نصٌّ لاتينيّ يُقرأ من اليسار،
   معزول عن اتجاه الصفحة حتى لا تنقلب أجزاؤه داخل سطر عربي
   (2026-09-11 22:40:26 تبقى على ترتيبها). وأرقامه جدوليّة لتصطفّ. */
.mono, .code {
  font-family: var(--mono);
  font-size: .9375em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.code { display: inline-block; }
/* وفي صفحة عربية يبقى العمود مصطفًّا على حافّة بدايته. */
[dir="rtl"] td.mono, [dir="rtl"] th.mono { text-align: end; }
.num { font-variant-numeric: tabular-nums; }
.hash { word-break: break-all; }

ul.ticks, ol.numbered { margin: 0; padding-inline-start: var(--space-4); }
ul.ticks { list-style: none; padding-inline-start: 0; }
ul.ticks li { position: relative; padding-inline-start: var(--space-4); margin-block-end: var(--space-2); }
ul.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .7em;
  width: var(--space-2); height: 2px; background: var(--accent-line);
}
ol.numbered li { margin-block-end: var(--space-2); }
ol.numbered li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ============================================================
   4 · الترويسة
   ============================================================ */
.top {
  flex: 0 0 auto;
  background: var(--surface);
  border-block-start: 3px solid var(--accent);
  border-block-end: 1px solid var(--line);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--space-8);
  flex-wrap: wrap;
  padding-block: var(--space-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.brand:hover { color: var(--accent); }
.brand img { display: block; border-radius: var(--radius-1); }
.brand-name { font-size: var(--text-base); letter-spacing: .01em; }
/* سطرُ النطاق بجوار العلامة (STANDARD-01): يُخفى حين يضيق الصفّ، والتذييلُ يحمله في كل عرض. */
.brandline { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand-scope { color: var(--ink-2); font-size: var(--text-xs); font-weight: 500; }
.brand-scope bdi { font-weight: 600; }
@media (max-width: 47.99rem) { .brand-scope { display: none; } }

.topnav { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.topnav a { display: inline-block; color: var(--ink-2); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.topnav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
.topnav .btn { color: var(--on-accent); text-decoration: none; }
.topnav .btn:hover { color: var(--on-accent); text-decoration: none; }

/* حالة الحساب في الترويسة: الاسم ثم وسم الحالة. */
.whoami {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--ink-2);
  padding-inline-end: var(--space-3);
  border-inline-end: 1px solid var(--line);
}
/* اسمُ المنشأة في الترويسة: أسماءُ المنشآت السعودية طويلة، وكان القصّ يقع
   عند 16rem بلا سبيل إلى بقيّة الاسم — لا تحويمٌ يظهره ولا التفاف. فالسقف
   الآن يسع الاسم المعتاد كاملًا، وما تجاوزه يبقى مقروءًا من سمة title.
   وعلى عرض الجوّال تلتفّ الترويسة صفوفًا أصلًا، فالاسم يلتفّ سطرين بدل أن
   يُقصّ في نصفه. */
.whoami-name { font-weight: 500; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 47.99rem) {
  .whoami-name {
    max-width: 100%;
    white-space: normal;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: var(--leading-snug);
  }
}

/* مبدّل اللغة: زرّ محايد بحدّ، لا زرّ تمييز. */
.lang {
  height: var(--control-h-sm);
  padding-inline: var(--space-3);
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.lang:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }

.inline { display: inline; margin: 0; }
.linkish {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: var(--text-sm); font-weight: 500;
  color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: .25em;
}
.linkish:hover { color: var(--accent-hover); }
.topnav .linkish { color: var(--ink-2); text-decoration: none; }
.topnav .linkish:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }

/* ============================================================
   5 · شريط الخطوات
   ============================================================ */
.steps { margin-block-end: var(--space-6); }
.steps-count {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-3);
  margin: 0 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}
.steps ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  border-block-end: 1px solid var(--line);
  padding-block-end: var(--space-3);
}
.step a, .step > span {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.step a { color: var(--ink-2); }
.step a:hover { color: var(--accent); }
.step a:hover .steplabel { text-decoration: underline; text-underline-offset: .3em; }
.stepdot {
  display: inline-grid; place-items: center;
  width: var(--space-4); height: var(--space-4);
  border-radius: var(--radius-1);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step.done .stepdot { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent); }
.step.now  .stepdot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.step.now  a, .step.now > span { color: var(--ink); font-weight: 600; }

/* Scope is one journey stage with its own navigable question groups. Keep the
   six-stage context quieter than the active group, without hiding a stage. */
.scope-page { min-width: 0; }
.scope-journey { border-block-end: 1px solid var(--line); margin-block-end: var(--space-5); }
.scope-journey .steps { margin-block-end: var(--space-3); }
.scope-journey .steps-count { font-size: var(--text-xs); margin-block-end: var(--space-1); }
.scope-journey .steps ol { border: 0; padding: 0; gap: var(--space-1) var(--space-2); }
.scope-journey .step a, .scope-journey .step > span { font-size: var(--text-xs); gap: var(--space-1); }
.scope-journey .stepdot { width: 1rem; height: 1rem; font-size: .65rem; }
.scope-group-nav { margin-block: var(--space-5); }
.scope-group-count { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.scope-group-nav ol { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; }
.scope-group-nav li { min-width: 0; }
.scope-group-nav li > a, .scope-group-nav li > span { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 44px; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-1); color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.scope-group-nav li > a:hover { border-color: var(--accent); color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.scope-group-nav li > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scope-group-nav .scope-group-current > span { border-color: var(--accent); background: var(--accent-wash); color: var(--ink); font-weight: 700; }
.scope-group-nav .scope-group-next > span { color: var(--ink-3); }
.scope-group-number { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid currentColor; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.scope-form { min-width: 0; }
@media (max-width: 40rem) {
  .scope-journey .steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scope-journey .step a, .scope-journey .step > span { align-items: flex-start; overflow-wrap: anywhere; }
}

/* ============================================================
   6 · الأسطح
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  margin-block-end: var(--space-4);
}
@media (min-width: 48rem) { .card { padding: var(--space-5); } }
.card:last-child { margin-block-end: 0; }

/* Public legal and data-rights texts use the app shell, but read as one white page
   against the existing porcelain canvas. This stays scoped to their .prose wrapper. */
main.wrap.measure:has(> .prose) { max-width: calc(820px + var(--gutter) * 2); }
.prose {
  max-width: 820px;
  min-width: 0;
  margin-inline: auto;
  padding: clamp(16px, 3vw, 48px);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 42, 53, .06);
  overflow-wrap: anywhere;
}
.prose h1 { margin-block-end: var(--space-4); }
.prose h2 { margin-block-start: var(--space-6); }
.prose h2:first-of-type { margin-block-start: var(--space-4); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; background: #FFFFFF; }
.prose th, .prose td { padding: var(--space-2) var(--space-3); border: 1px solid var(--line); text-align: start; }
.prose th { background: var(--surface-2); }
@media (max-width: 40rem) { .prose { padding: 16px; } }

.cols {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-block: var(--space-5);
}
@media (min-width: 48rem) { .cols { grid-template-columns: 1fr 1fr; } }

.hero { margin-block-end: var(--space-6); }
.price-figure {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-1);
}

/* اقتباس نصّ الاعتماد: يُقرأ كنصّ ملزم، بحدّ تمييز على جانبه. */
.statement {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-1);
  color: var(--ink);
  font-size: var(--text-sm);
}

/* رسالة المحرّك كما وردت: نصّ محفوظ الأسطر. */
.enginemsg {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--danger);
  border-radius: var(--radius-1);
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: auto;
}

/* كتلة الحقول الإنجليزية داخل صفحة عربية. */
.enblock {
  border-inline-start: 2px solid var(--line-strong);
  padding-inline-start: var(--space-3);
  margin-block-start: var(--space-3);
}
.enblock label, .enblock .hint { text-align: start; }

.redo { margin-block-start: var(--space-6); }
.redo summary {
  cursor: pointer; color: var(--accent); font-weight: 500;
  padding-block: var(--space-1);
}
.dp-checkout .checkout-step {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-wash);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.dp-checkout .card { min-width: 0; }
.dp-payment .price-figure { font-size: clamp(1.5rem, 4vw, 2rem); }
.dp-payment .kvs dd, .dp-approval .kvs dd { overflow-wrap: anywhere; }
.dp-approval .checkout-identity {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.dp-approval .checkout-identity legend,
.dp-approval .checkout-declaration h2 {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-4);
  padding: 0;
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: var(--leading-snug);
}
.dp-approval .checkout-declaration {
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-5);
}
.dp-approval .checkout-declaration .statement { margin-block-start: 0; }
.dp-approval .checkout-approval-form > .btn { margin-block-start: var(--space-2); }
.logo-now { margin-block-end: var(--space-1); }

/* ============================================================
   7 · النماذج — التسمية فوق الحقل دائمًا
   ============================================================ */
.form { margin-block-start: var(--space-4); }
.field { margin-block-end: var(--space-4); }
.field > label, .fieldset > legend, .field-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
  margin: 0 0 var(--space-2);
  padding: 0;
}
.field .opt { font-weight: 400; color: var(--ink-3); }

.hint {
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}
/* الخطأ تحت الحقل: لونه ووزنه وحدّه على جانبه يميّزانه عن التلميح. */
.err {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--danger);
  line-height: var(--leading-snug);
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid var(--danger);
}

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=url], input[type=date], textarea, select {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--ink-3); }
input:disabled, textarea:disabled, select:disabled {
  background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; border-color: var(--line);
}
textarea { resize: vertical; min-height: calc(var(--control-h) * 2); line-height: var(--leading-snug); }

/* القائمة المنسدلة: سهمها صورة متجهة مضمّنة في الملف (data:) — لا شبكة. */
select {
  appearance: none;
  padding-inline-end: var(--space-6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2363707C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: right var(--space-3) center;
}
[dir="rtl"] select { background-position: left var(--space-3) center; }

input[type=file] {
  font: inherit; font-size: var(--text-sm);
  max-width: 100%;
  padding: var(--space-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-1);
  background: var(--surface-2);
}

.has-error input, .has-error textarea, .has-error select { border-color: var(--danger); }
.has-error input:focus-visible, .has-error textarea:focus-visible, .has-error select:focus-visible {
  outline-color: var(--danger);
}

/* --- قائمة العبارات المختارة: كل عبارة صفّ قابل للنقر كاملًا --- */
.fieldset, fieldset.q {
  border: 0; margin: 0 0 var(--space-4); padding: 0; min-inline-size: 0;
}
fieldset.q { border-block-start: 1px solid var(--line); padding-block-start: var(--space-4); }
fieldset.q:first-of-type { border-block-start: 0; padding-block-start: 0; }
fieldset.q legend {
  display: block; padding: 0; margin: 0 0 var(--space-2);
  font-weight: 600; font-size: var(--text-sm); color: var(--ink);
}

.choices { display: grid; gap: var(--space-2); margin: 0; }
.choice, .radio, .check {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-weight: 400; cursor: pointer;
}
.choice {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: var(--surface);
  transition: border-color .12s ease, background-color .12s ease;
}
.choice:hover { border-color: var(--accent); background: var(--surface-2); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.choice-body { display: block; }
.choice-label { display: block; line-height: var(--leading-snug); }
.choice-hint { display: block; font-size: var(--text-sm); color: var(--ink-3); line-height: var(--leading-snug); }

.radios { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.choice input, .radio input, .check input {
  flex: 0 0 auto;
  width: var(--space-3); height: var(--space-3);
  margin: var(--space-1) 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* --- صفّ الأفعال: زرّ رئيسي واحد، وما سواه ثانويّ أو رابط --- */
.actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
}
.actions-bare { border-block-start: 0; padding-block-start: 0; }

/* ============================================================
   8 · الأزرار
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-h);
  padding-inline: var(--space-4);
  padding-block: var(--space-1);
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-1);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.btn:active { background: var(--accent-press); border-color: var(--accent-press); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--surface-3); border-color: var(--line-strong); color: var(--ink-3); cursor: not-allowed;
}
.btn-lg { min-height: var(--control-h-lg); padding-inline: var(--space-5); font-size: var(--text-md); }
.btn-sm { min-height: var(--control-h-sm); padding-inline: var(--space-3); font-size: var(--text-sm); }

/* الزرّ الثانويّ: حدٌّ ونصّ بلون التمييز نفسه، بلا لون ثانٍ. */
.btn-2 {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--line-strong);
}
.btn-2:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-hover); }
.btn-2:active { background: var(--accent-wash); border-color: var(--accent-press); }

/* ============================================================
   9 · التنبيهات
   ============================================================ */
.alert {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ink-3);
  border-radius: var(--radius-2);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.alert-title, .alert h2 {
  font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--space-2); color: inherit;
}
.alert p { margin-block-end: var(--space-2); }
.alert p:last-child, .alert ul:last-child { margin-block-end: 0; }
.alert ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-4); }
.alert a { color: inherit; }

.alert.info    { background: var(--accent-wash); border-color: var(--accent-line); border-inline-start-color: var(--accent); color: var(--ink); }
.alert.good, .alert.success { background: var(--ok-wash);     border-color: var(--ok-line);     border-inline-start-color: var(--ok);     color: #123F28; }
.alert.warn                 { background: var(--warn-wash);   border-color: var(--warn-line);   border-inline-start-color: var(--warn);   color: #5B3B0B; }
.alert.bad, .alert.error    { background: var(--danger-wash); border-color: var(--danger-line); border-inline-start-color: var(--danger); color: #6E1D17; }

.gaps { list-style: none; padding-inline-start: 0; margin: var(--space-2) 0 0; }
.gaps li {
  padding-block: var(--space-2);
  border-block-start: 1px solid currentColor;
  border-block-start-color: color-mix(in srgb, currentColor 20%, transparent);
}
.gaps li:first-child { border-block-start: 0; padding-block-start: 0; }
.fixlink { margin-inline-start: var(--space-2); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }

/* ============================================================
   10 · الوسوم
   ============================================================ */
.badge, .pill {
  display: inline-block;
  padding: 0 var(--space-2);
  min-height: var(--space-4);
  line-height: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge-accent               { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent); }
.badge-ok,     .pill-active   { background: var(--ok-wash);     border-color: var(--ok-line);     color: #123F28; }
.badge-warn,   .pill-pending  { background: var(--warn-wash);   border-color: var(--warn-line);   color: #5B3B0B; }
.badge-danger, .pill-disabled { background: var(--danger-wash); border-color: var(--danger-line); color: #6E1D17; }

/* ============================================================
   11 · القوائم: جداول لا بطاقات
   ============================================================ */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--surface);
  margin-block-end: var(--space-4);
  -webkit-overflow-scrolling: touch;
}
.tablewrap:focus-visible { outline: var(--focus); outline-offset: 2px; }

table.doctable, table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
table.doctable caption, table.data caption {
  text-align: start;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ink);
  border-block-end: 1px solid var(--line);
}
table.doctable th, table.doctable td,
table.data th, table.data td {
  text-align: start;
  padding: var(--space-2) var(--space-4);
  vertical-align: top;
}
table.doctable thead th, table.data thead th {
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 600;
  font-size: var(--text-xs);
  white-space: nowrap;
  border-block-end: 1px solid var(--line-strong);
  position: sticky; inset-block-start: 0; z-index: 1;
}
table.doctable tbody tr, table.data tbody tr { border-block-start: 1px solid var(--line); }
table.doctable tbody tr:first-child, table.data tbody tr:first-child { border-block-start: 0; }
table.doctable tbody tr:hover td, table.data tbody tr:hover td { background: var(--surface-2); }
td.num, th.num, td.mono, .cell-code { font-variant-numeric: tabular-nums; }
td.nowrap, th.nowrap { white-space: nowrap; }

/* عمود التنزيل: رابط لكل لغة، والمتعذّرة نصّ لا رابط. */
td.dl { white-space: nowrap; }
td.dl > * { display: inline-block; margin-inline-end: var(--space-3); }
td.dl > *:last-child { margin-inline-end: 0; }

/* ============================================================
   12 · قائمة المصطلح والقيمة
   ============================================================ */
dl.kvs { margin: 0; }
.kv {
  display: grid;
  gap: 0 var(--space-4);
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--line);
}
.kv:first-child { border-block-start: 0; padding-block-start: 0; }
.kv:last-child { padding-block-end: 0; }
.kv dt, .kv > dt {
  margin: 0; color: var(--ink-3); font-size: var(--text-sm); font-weight: 500;
}
.kv dd, .kv > dd { margin: 0; color: var(--ink); }
@media (min-width: 40rem) { .kv { grid-template-columns: 16rem 1fr; align-items: baseline; } }

/* ============================================================
   13 · التذييل
   ============================================================ */
/* main يملأ ما بقي من الشاشة، فالتذييل في القاع بلا هامش زائد فوقه. */
.foot {
  flex: 0 0 auto;
  padding-block: var(--space-5);
  background: var(--ink);
  color: var(--on-dark-2);
  font-size: var(--text-sm);
}
.foot p { margin: 0; max-width: var(--measure); }
.foot a { display: inline-block; color: var(--on-dark); }
.foot a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
/* رابط التخطّي فوق أرضية التمييز: حلقةٌ داكنة تُقرأ على الأرضيتين. */
.skip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ============================================================
   14 · التركيز — ظاهرٌ على كل عنصر تفاعليّ
   ============================================================ */
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: var(--radius-1); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: var(--focus); outline-offset: 0; border-color: var(--accent);
}
.choice:focus-within { border-color: var(--accent); }

/* ============================================================
   15 · استمارة المنشأة — أقسام بمعنى البيانات، وشريط حفظٍ ثابت

   الاستمارة كانت بطاقةً واحدة بطول سبعة آلاف بكسل. والأقسام الأربعة
   تعطي العميل مواضع يعرف عندها ما بقي، ويطوي ما أتمّه. والقسم المطويّ
   يُرسل حقوله كما يرسلها المفتوح، فالطيُّ عرضٌ لا تخفيفُ مطلوب.
   ============================================================ */
.est-progress {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}
.est-progress.done { border-inline-start-color: var(--ok); background: var(--ok-wash); color: #123F28; }

.estform { margin-block-start: 0; }

.sec {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow);
  margin-block-end: var(--space-3);
}
.sec > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  min-height: var(--control-h-lg);
  border-radius: var(--radius-2);
}
.sec > summary::-webkit-details-marker { display: none; }
/* مثلّثٌ يرسمه النمط، فيدور مع الفتح ويقرأ في الاتجاهين. */
.sec > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0; height: 0;
  margin-inline-start: auto;
  border-inline-start: 5px solid transparent;
  border-inline-end: 5px solid transparent;
  border-block-start: 6px solid var(--ink-3);
  transition: transform .12s ease;
}
.sec[open] > summary::after { transform: rotate(180deg); }
.sec > summary:hover { background: var(--surface-2); }
.sec > summary:focus-visible { outline: var(--focus); outline-offset: -2px; }
.sec-name { font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.sec-state {
  flex: 0 0 auto;
  padding: 0 var(--space-2);
  min-height: var(--space-4); line-height: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--text-xs); font-weight: 600;
  white-space: nowrap;
}
.sec-state.done { background: var(--ok-wash); border-color: var(--ok-line); color: #123F28; }
.sec-state.left { background: var(--warn-wash); border-color: var(--warn-line); color: #5B3B0B; }
.sec-body {
  padding: 0 var(--space-4) var(--space-4);
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--space-4);
}
.sec-lede { margin-block-end: var(--space-4); }
.sec-body > .field:last-child, .sec-body > .fieldset:last-child { margin-block-end: 0; }
.sec-body h3 { margin-block-start: var(--space-5); }

/* شريطُ الحفظ: يلزم أسفل النافذة، فيبلغه العميل بلا تمرير الاستمارة كلّها. */
.estbar {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  box-shadow: 0 -2px 12px rgba(20, 32, 43, .08);
}
.estbar-note { font-size: var(--text-sm); color: var(--ink-3); }
@media (max-width: 30rem) {
  .estbar { gap: var(--space-2); }
  .estbar .btn { flex: 1 1 auto; }
  .estbar-note { flex: 1 0 100%; }
}

/* القسمُ الناقص: مفتوحٌ ولا يُطوى، فلا يختفي مطلوبٌ فارغ خلف طيّة. */
.sec-fixed > .sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  min-height: var(--control-h-lg);
  font-size: var(--text-lg);
}
.sec-fixed > .sec-head .sec-name { font-size: inherit; }
.u2-assessment { max-width: 48rem; margin-inline: auto; }
.u2-assessment .u2-question { padding-block: 1.4rem; border-block-end: 1px solid var(--line, #d8e0e4); }
.u2-assessment fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.u2-assessment legend { font-weight: 700; line-height: 1.6; margin-block-end: .8rem; }
.u2-progress { color: var(--muted, #53626c); font-size: .9rem; margin-block: 0 .4rem; }
.u2-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); max-width: 34rem; }
.u2-choices legend { width: 100%; }
.u2-choice { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 44px; padding: var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-1); cursor: pointer; }
.u2-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.u2-choice input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.u2-choice span { min-width: 0; line-height: 1.4; }
.u2-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.u2-inline-note { border-inline-start: .25rem solid var(--primary, #245e6b); background: var(--surface, #f5f8f9); padding: .8rem 1rem; margin-block: .8rem; }
.u2-inline-note p { margin-block: .35rem; }
.u2-result section { margin-block: 1.7rem; }
.u2-result li { margin-block: .8rem; line-height: 1.65; }
.u2-result li p { margin-block: .25rem; }
.u2-state { display: inline-block; margin-inline-start: .6rem; color: var(--muted, #53626c); }
.u2-result .u2-result-scope { margin-block: var(--space-2) var(--space-3); max-width: 42rem; }
.u2-result .u2-next { border: 1px solid #d1d9e0; border-radius: 6px; background: #ffffff; padding: var(--space-3); margin-block: var(--space-3) var(--space-4); }
.u2-result .u2-next h2 { margin-block: 0 var(--space-2); }
.u2-result .u2-primary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.u2-result .u2-secondary-actions { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: 0; margin: var(--space-3) 0 0; }
.u2-result .u2-secondary-actions li { margin: 0; }
.u2-result .u2-secondary-actions a { display: inline-flex; align-items: center; min-height: 44px; color: #0969da; text-underline-offset: .2em; }
.u2-result .u2-secondary-actions a:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }
.u2-consent { display: flex; gap: .5rem; align-items: flex-start; margin-block: .65rem 1rem; }
@media (max-width: 600px) {
  .u2-result .u2-primary-action { width: 100%; }
  .u2-result .u2-secondary-actions { flex-direction: column; align-items: flex-start; }
}

/* P2 registration: the value steps flank the short form on desktop. */
.register-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.register-value { padding-block: var(--space-8); }
.register-value h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); margin: 0 0 var(--space-6); }
.register-value ol { margin: 0; padding-inline-start: var(--space-5); }
.register-value li { padding-block: var(--space-3); border-block-start: 1px solid var(--line); }
.register-panel { min-width: 0; max-width: 34rem; }
.register-panel .lede { margin-block-end: var(--space-4); }
.register-form { margin-block-start: 0; }
.register-form .actions { border: 0; padding: 0; margin-block-start: var(--space-4); }
.register-form .actions .btn { width: 100%; }
.register-data-use { margin-block-start: var(--space-3); }
.register-password { position: relative; }
.register-password input { padding-inline-end: 56px; }
.register-password-toggle { position: absolute; inset-block: 0; inset-inline-end: 0; width: 48px; min-height: 44px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.register-password-toggle:hover { color: var(--accent); }
.register-password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 48rem) {
  .register-layout { grid-template-columns: minmax(0, 1fr); }
  .register-value { display: none; }
  .register-panel { max-width: 34rem; margin-inline: auto; }
}

/* DP-UI-01: content-area tokens measured on the public list reference. The
   account placement is an adaptation; no signed-in reference was observed. */
body:has(.account-sections) {
  background: #ffffff;
  color: #1f2328;
  font-size: 14px;
  line-height: 21px;
}
body.lang-en:has(.account-sections) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}
body.lang-ar:has(.account-sections) { font-family: "IBM Plex Sans Arabic", sans-serif; }
main:has(.account-sections) {
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --ink: #1f2328;
  --ink-2: #25292e;
  --ink-3: #59636e;
  --line: #d1d9e0;
  --line-strong: #d1d9e0;
  --accent: #0969da;
  --accent-hover: #0550ae;
  --accent-press: #033d8b;
  --focus: 2px solid #0969da;
  --radius-1: 6px;
  --radius-2: 6px;
  --shadow: 0 1px 0 rgba(31, 35, 40, .04);
  padding-block: var(--space-4) var(--space-5);
}
main:has(.account-sections) h1 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  margin-block-end: var(--space-2);
}
main:has(.account-sections) h2 { font-size: 18px; line-height: 27px; margin-block: var(--space-4) var(--space-2); }
main:has(.account-sections) p { font-size: 16px; line-height: 24px; }
main:has(.account-sections) .hint,
main:has(.account-sections) .muted,
main:has(.account-sections) .steps-count { font-size: 14px; line-height: 21px; }
main:has(.account-sections) .lede { font-size: 16px; line-height: 24px; margin-block-end: var(--space-3); }
main:has(.account-sections) .steps { margin-block-end: var(--space-3); }
main:has(.account-sections) .steps ol { padding-block-end: var(--space-2); gap: var(--space-1) var(--space-3); }
main:has(.account-sections) .card { padding: var(--space-3); margin-block-end: var(--space-3); }
main:has(.account-sections) input,
main:has(.account-sections) select { border-radius: 6px; }
main:has(.account-sections) input:focus-visible,
main:has(.account-sections) select:focus-visible { border-color: #0969da; outline: 2px solid #0969da; outline-offset: -1px; }
@media (max-width: 40rem) {
  main:has(.account-sections) h1 { font-size: 18px; line-height: 27px; }
}
main:has(.account-sections) .btn:not(.btn-2) {
  background: #1f883d;
  border-color: #1f883d;
  color: #ffffff;
}
main:has(.account-sections) .btn:not(.btn-2):hover { background: #1c8139; border-color: #1c8139; }
main:has(.account-sections) .btn:not(.btn-2):active { background: #197935; border-color: #197935; }
main:has(.account-sections) .btn-2 {
  background: #f6f8fa;
  border-color: #d1d9e0;
  color: #25292e;
}
main:has(.account-sections) .btn-2:hover { background: #eff2f5; border-color: #d1d9e0; color: #25292e; }
main:has(.account-sections) .btn-2:active { background: #e6eaef; }
main:has(.account-sections) .btn:focus-visible,
main:has(.account-sections) input:focus-visible,
main:has(.account-sections) select:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }
body:has(.account-sections) .topnav > a[href="/assessment/result"],
body:has(.account-sections) .topnav > a[href="/review"],
body:has(.account-sections) .topnav > a[data-gap-review] { display: none; }
.account-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin-block: 0 var(--space-3);
  border-block-end: 1px solid #d1d9e0;
}
.account-sections a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  border-block-end: 2px solid transparent;
  color: #59636e;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.account-sections a:hover { color: #1f2328; text-decoration: none; border-block-end-color: #d1d9e0; }
.account-sections a[aria-current="page"] { color: #1f2328; font-weight: 600; border-block-end-color: #fd8c73; }
.account-sections a:focus-visible { outline: 2px solid #0969da; outline-offset: -2px; }

.document-library { margin-block: var(--space-3); min-width: 0; }
.document-library h2, .document-library h3 { margin-block: 0 var(--space-2); font-size: 20px; line-height: 1.5; }
.document-count { color: #59636e; font-size: 14px; font-weight: 400; }
.document-rows { list-style: none; padding: 0; margin: 0; border: 1px solid #d1d9e0; border-radius: 6px; background: #ffffff; }
.document-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; padding: var(--space-3); }
.document-row + .document-row { border-block-start: 1px solid #d1d9e0; }
.document-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.document-main strong { font-size: 16px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.document-meta { color: #59636e; font-size: 14px; line-height: 1.5; }
.document-state { color: #59636e; font-size: 14px; flex: 0 0 auto; }
.document-downloads { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.document-downloads a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding-inline: var(--space-2); border: 1px solid #d1d9e0; border-radius: 6px; background: #f6f8fa; color: #25292e; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.document-downloads a:hover { background: #eff2f5; text-decoration: none; }
.document-downloads a:active { background: #e6eaef; }
.document-empty { padding: var(--space-3); border: 1px solid #d1d9e0; border-radius: 6px; background: #ffffff; }
.dp-preview > .card { max-width: 100%; }
.dp-preview .document-library { margin-block: var(--space-3); }
.dp-preview .preview-details { min-width: 0; }
.dp-preview .preview-details-label { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dp-preview .preview-details-prompt { color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-snug); font-weight: 400; }
.dp-preview .preview-details-body { min-width: 0; }
.dp-preview .preview-detail-section { min-width: 0; }
.dp-preview .preview-detail-section + .preview-detail-section { border-block-start: 1px solid var(--line); padding-block-start: var(--space-5); margin-block-start: var(--space-5); }
.dp-preview .preview-detail-section h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); line-height: var(--leading-snug); }
.dp-preview .preview-detail-section .tablewrap { max-inline-size: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.dp-preview .preview-checklist table { min-width: 52rem; }
.dp-preview .preview-exclusions table { min-width: 42rem; }
.dp-preview .preview-facts .kvs { min-width: 0; }
.dp-preview .preview-facts dd { overflow-wrap: anywhere; }
.dp-package > .card { margin-block-start: var(--space-3); }
.package-library { margin-block: var(--space-4); }
.package-library > h2 { margin: 0 0 var(--space-1); }
.package-library > .hint { margin-block-end: var(--space-2); }
.package-library .document-library { margin-block: var(--space-3); }
.libsearch {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  border: 1px solid #d1d9e0;
  border-radius: 6px;
  background: #f6f8fa;
}
.libsearch .field { min-width: 0; margin: 0; }
.libsearch .field > label { margin-block-end: var(--space-1); }
.libsearch input, .libsearch select { min-height: 36px; padding-block: var(--space-1); font-size: 14px; }
.libsearch .actions { margin: 0; padding: 0; border: 0; gap: var(--space-2); }
.libsearch .btn { min-height: 36px; padding-inline: var(--space-3); font-size: 14px; }
.libcount { margin-block: var(--space-2) 0; }
/* DENSITY-01 (F189/F191؛ CF254): مجموعاتٌ تُطوى، وصفٌّ مدمج على الشاشة العريضة، وطباعةٌ لكل وثيقة. */
.document-library > summary { cursor: pointer; list-style-position: inside; }
.document-library > summary h3 { display: inline; margin: 0; }
.document-library > summary:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; border-radius: 6px; }
.document-library[open] > summary { margin-block-end: var(--space-2); }
.libtoggle { display: flex; justify-content: flex-end; gap: var(--space-3); margin-block: var(--space-2) 0; font-size: 14px; }
.libtoggle[hidden] { display: none; }
.pkg-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.pkg-summary p { margin: 0; }
.pkg-edit { margin-block: var(--space-4) 0; padding-block-start: var(--space-3); border-block-start: 1px solid #d1d9e0; }
.pkg-edit h2 { margin: 0 0 var(--space-1); font-size: 16px; }
.pkg-edit .pkg-regenerate { margin: var(--space-2) 0 0; }
.pkg-edit .hint { margin-block: var(--space-1) 0; }
/* على الشاشة العريضة: سطرٌ واحد لكل وثيقة — العنوان ثم الرمز والإصدار ووورد، والروابطُ نصٌّ مدمج في آخر
   الصفّ. والعنوانُ الطويل يلتفّ ولا يُقصّ. وتحت ذلك يبقى الصفّ مكدَّسًا بأهداف لمسٍ كاملة. */
@media (min-width: 64rem) {
  .package-library .document-main { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: 0; }
  .package-library .document-row { padding-block: var(--space-2); min-height: 40px; }
  .package-library .document-downloads a { min-height: 0; padding: 0 var(--space-1); border: 0; background: none; color: #0969da; text-decoration: underline; text-underline-offset: .2em; }
  .package-library .document-downloads a:hover { background: none; }
}
/* الطباعة: كلُّ وثيقةٍ سطرٌ واحد، والمجموعاتُ المطويّة تُطبع، وأدواتُ الشاشة لا تُطبع. والمحدِّداتُ بوزن
   قاعدة الشاشة العريضة وبعدها، فتغلبها إن طُبعت الصفحة على ورقٍ أعرض من 64rem. */
@media print {
  .dp-package .btn, .dp-package form, .libsearch, .libtoggle, .document-downloads, .pkg-edit, nav.steps, .topnav, .account-sections { display: none !important; }
  details.document-library::details-content { content-visibility: visible; }
  .document-library > summary { list-style: none; }
  .package-library .document-row { break-inside: avoid; padding-block: 2px; min-height: 0; }
  .package-library .document-main { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
}
@media (max-width: 40rem) {
  .account-sections { gap: 0 var(--space-2); margin-block-end: var(--space-3); }
  .account-sections a { padding-inline: var(--space-1); }
  .document-row { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .document-downloads { width: 100%; }
  .document-downloads a { min-height: 44px; }
  .libsearch { grid-template-columns: minmax(0, 1fr); }
  .libsearch input, .libsearch select, .libsearch .btn { min-height: 44px; }
}

/* DP-UI-02: observed grouped form composition within the accepted account family. */
.estform { --est-line: #d1d9e0; --est-ink: #1f2328; --est-muted: #59636e; }
.estform .sec { border-color: var(--est-line); border-radius: 6px; background: #ffffff; box-shadow: 0 1px 0 rgba(31,35,40,.04); }
.estform .sec > summary { border-radius: 6px; }
.estform .sec-name { color: var(--est-ink); }
.estform .sec-body { border-block-start-color: var(--est-line); }
.estform .sec-lede, .estform .hint, .estform .estbar-note { color: var(--est-muted); font-size: 14px; line-height: 21px; }
.estform .est-cluster { min-width: 0; margin-block: 0 16px; border: 1px solid var(--est-line); border-radius: 6px; background: #ffffff; overflow: hidden; }
.estform .est-cluster:last-child { margin-block-end: 0; }
.estform .est-cluster > h3 { margin: 0; padding: 12px 16px; background: #f6f8fa; color: var(--est-ink); font-size: 14px; line-height: 21px; font-weight: 600; }
.estform .est-cluster > .field, .estform .est-grid-item { min-width: 0; margin: 0; padding: 12px 16px; border-block-start: 1px solid var(--est-line); }
.estform .est-grid-item > .field { margin: 0; }
.estform .est-grid-item > .otherbox { margin-block-start: 8px; }
.estform .est-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.estform .est-field-grid > .est-grid-item:nth-child(even) { border-inline-start: 1px solid var(--est-line); }
.estform .field > label, .estform .field-label, .estform .fieldset > legend { margin-block-end: 6px; color: var(--est-ink); font-size: 14px; line-height: 21px; }
.estform input[type=text], .estform input[type=number], .estform textarea, .estform select {
  min-height: 42px; border: 1px solid var(--est-line); border-radius: 6px;
  background-color: #ffffff; color: var(--est-ink); font-size: 16px; line-height: 24px;
  box-shadow: inset 0 1px 0 rgba(31,35,40,.04);
}
.estform .has-error input, .estform .has-error textarea,
.estform .has-error select { border-color: var(--danger); }
.estform input[type=text]:focus-visible, .estform input[type=number]:focus-visible,
.estform textarea:focus-visible, .estform select:focus-visible {
  border-color: #0969da; outline: 2px solid #0969da; outline-offset: -1px;
}
.estform .has-error input:focus-visible, .estform .has-error textarea:focus-visible,
.estform .has-error select:focus-visible { border-color: var(--danger); outline-color: var(--danger); }
.estform :is(input[name="docPrefix"], input[name="cr"], input[name="unifiedNumber"], input[name="sfdaLicense"], input[name="vat"], input[name="shortAddress"]) { direction: ltr; text-align: start; }
.estform .card { border-color: var(--est-line); border-radius: 6px; box-shadow: none; }
.estform .enblock { border-inline-start-color: var(--est-line); }
.estform .estbar { border-color: var(--est-line); border-radius: 6px; box-shadow: 0 -1px 0 rgba(31,35,40,.04); }
.estform .estbar .btn { min-height: 36px; border-radius: 6px; font-size: 14px; line-height: 21px; }
.estform:has(.sec :focus-visible) .estbar { position: static; }
.package-library .document-row:target { outline: 2px solid var(--accent); outline-offset: -2px; scroll-margin-block: var(--space-4); }
@media (max-width: 40rem) {
  .estform .est-field-grid { grid-template-columns: minmax(0, 1fr); }
  .estform .est-field-grid > .est-grid-item:nth-child(even) { border-inline-start: 0; }
  .estform .estbar .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 8px; white-space: normal; }
}

/* r6-R4 (F612, F613): the locked establishment form, and the one warning before the first generation */
.est-locked { border: 0; padding: 0; margin: 0; min-width: 0; }
.est-locked :disabled { opacity: .85; cursor: not-allowed; }
.lock-warning { font-weight: 700; color: var(--ink-1, inherit); margin: 0 0 12px; }
/* r6-R5 (F626 item 2, F619 §3): the contextual «؟» that opens this page's help article */
.help-ctx { margin: 0 0 8px; text-align: end; }
.help-ctx a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; text-decoration: none; font-weight: 700; }
.help-ctx a:hover, .help-ctx a:focus-visible { text-decoration: underline; }
/* r6-R5 (F626 item 2, F619 §3): the first sign-in's welcome, over the page until «ابدأ» */
.welcome-veil { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 42, 53, .45); }
.welcome { position: static; margin: 0; max-width: 480px; width: 100%; border: 0; border-radius: 12px; padding: 24px; background: var(--paper, #fff); color: inherit; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.welcome h2 { margin: 0 0 12px; font-size: 20px; }
.welcome ol { margin: 0 0 20px; padding-inline-start: 20px; }
.welcome li { margin: 6px 0; }
:where([data-staff-card]) [hidden] { display: none !important; }
.staff-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(5rem, 1fr) auto; align-items: end; gap: var(--space-3, .75rem); margin-block: var(--space-4, 1rem); }
.staff-row:has([data-staff-custom]:not([hidden])) { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(5rem, 1fr) auto; }
.staff-row .field { margin: 0; }
.staff-row > .btn { margin-block-end: .15rem; }
.staff-actions { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); }
.staff-summary { font-weight: 600; }
.staff-previous { white-space: pre-wrap; }
.scope-example { border-inline-start: 3px solid var(--line, #d8dde3); padding-inline-start: 1rem; margin-block-start: 1rem; }
.scope-description .field { display: flex; flex-direction: column; }
.scope-description textarea { order: 1; }
.scope-description .hint { order: 2; margin-block-start: .5rem; }
.scope-description .err { order: 3; }
@media (max-width: 640px) { .staff-row, .staff-row:has([data-staff-custom]:not([hidden])) { grid-template-columns: minmax(0, 2fr) minmax(4rem, 1fr); } .staff-row [data-staff-custom] { grid-column: 1 / -1; } .staff-row > .btn { justify-self: start; } }