/* ==================== الخط ====================
   IBM Plex Sans Arabic — مستضاف محلياً داخل المشروع، لا من CDN.
   قبل ذلك كان المكدّس يبدأ بـ "Segoe UI": موجود على ويندوز وحده، وتغطيته
   العربية ناقصة، فيسقط النص صامتاً إلى خط النظام — ويختلف شكل الموقع بين
   ويندوز وiOS وأندرويد دون أن يظهر أي خطأ. الاستضافة المحلية تحسم الشكل
   على كل جهاز، وتصون وعد «يعمل دون اتصال» الذي يكسره أي خط من شبكة.

   الترخيص: SIL Open Font License 1.1 — يسمح بالتضمين وإعادة التوزيع.
   الملفات مقسَّمة عربي/لاتيني بـ unicode-range، فلا يُنزَّل اللاتيني إلا عند الحاجة.
   font-display: swap — النص يظهر فوراً بخط النظام ثم يُستبدل، بدل صفحة بيضاء. */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plex-ar-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
                 U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/plex-ar-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
                 U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/plex-ar-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
                 U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plex-ar-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/plex-ar-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/plex-ar-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* مكدّس واحد يحكم الموقع كله. الاحتياطيات بعده تغطي لحظة تحميل الخط
     وأي جهاز يرفضه: خط النظام على أبل، ثم أندرويد، ثم ويندوز. */
  --font: "IBM Plex Sans Arabic", -apple-system, "Noto Naskh Arabic",
          "Segoe UI", "Tahoma", system-ui, sans-serif;
  /* الأرقام والمعرّفات اللاتينية داخل نصّ عربي — نفس الأسرة، بلا خط منفصل. */
  --font-num: "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif;

  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --text: #16202b;
  /* #64748b كان يعطي 4.20:1 على --surface-2 — دون عتبة WCAG AA (4.5:1).
     التغميق هنا يرفع كل النصوص الثانوية دفعةً واحدة بدل ترقيع كل عنصر. */
  --muted: #566171;
  --line: #dde3ea;
  /* هوية «مُؤسِّس»: أخضر تيلي أعمق من السابق (#0f6b4f) لتباين أعلى وحضور
     مؤسسي، مع ذهب هادئ كلون ثانوي يحمل «القاعدة» في العلامة. */
  --accent: #0a5a4a;
  --accent-deep: #063b31;
  --gold: #c9a227;
  --gold-soft: #f3e6bd;
  --accent-soft: #e2f0ec;
  --warn: #a8630a;
  --warn-soft: #fdf3e2;
  --danger: #a02b2b;
  --danger-soft: #fbeaea;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05);
}

html[data-theme="dark"] {
  --bg: #0e1419;
  --surface: #161e26;
  --surface-2: #1d2831;
  --text: #e6edf3;
  --muted: #93a3b3;
  --line: #2a3742;
  --accent: #3fbf90;
  --accent-deep: #0a2621;
  --gold: #e0bd55;
  --gold-soft: #33290f;
  --accent-soft: #12312a;
  --warn: #e0a458;
  --warn-soft: #2e2517;
  --danger: #e58585;
  --danger-soft: #331d1d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  flex: none;
  box-shadow: 0 2px 8px rgba(10, 90, 74, .28);
}

/* ==================== علامة «مُؤسِّس» ====================
   المفهوم: جذر الاسم أ-س-س (التأسيس) — قاعدةٌ راسخة تعلوها ثلاث دعامات
   صاعدة. تُقرأ كتأسيس ثم نمو، وتوحي أيضاً برسمٍ بياني (القرارات الدقيقة).

   الدعامات تصعد يميناً ← يساراً لا العكس: الموقع عربي RTL والعين تبدأ من
   اليمين، فيكون الصعود مع اتجاه القراءة لا ضدّه.

   SVG مضمّن لا ملف صورة: يرث لون النص، ويعمل في الوضعين الفاتح والداكن،
   ويبقى حاداً في أي مقاس — دون طلب شبكة إضافي يكسر وعد «يعمل دون اتصال». */
.brand-logo { display: block; }
.brand-logo .bl-pillar { fill: currentColor; }
.brand-logo .bl-p2 { opacity: .82; }
.brand-logo .bl-p3 { opacity: .64; }
.brand-logo .bl-base { fill: var(--gold); }

.brand-mark .brand-logo { width: 24px; height: 24px; }
.hero-mark .brand-logo { width: 34px; height: 34px; }
.brand h1 { margin: 0; font-size: 18px; font-weight: 700; }
.brand-sub { margin: 0; font-size: 12.5px; color: var(--muted); }

.icon-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  width: 38px; height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 17px;
}
.icon-btn:hover { border-color: var(--accent); }

.tabs { display: flex; gap: 4px; padding-bottom: 0; overflow-x: auto; }
.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------- Disclaimer ---------- */
.disclaimer {
  margin: 16px auto 0;
  font-size: 13px;
  color: var(--muted);
  background: var(--warn-soft);
  border: 1px solid var(--line);
  border-right: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: 12px 16px;
  max-width: 940px;
}
.disclaimer strong { color: var(--warn); }
.disclaimer a { color: var(--accent); }

/* ---------- Views ---------- */
main { padding-top: 22px; padding-bottom: 40px; }
.view { display: none; }
.view.is-active { display: block; }

.section-title { font-size: 16px; margin: 26px 0 14px; }

/* ---------- Search ---------- */
.search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
input[type="search"], input[type="number"], input[type="date"], select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.count { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
/* الشريحة حين تكون رابطاً لا زراً (صفحة 404): الوسم <a> يجلب معه
   التسطير ومحاذاة السطر الافتراضية، فتخرج الشريحة مسطَّرة ومتفاوتة الارتفاع. */
a.chip { display: inline-block; text-decoration: none; }
.chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ---------- Cards ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.art-head { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.art-num {
  flex: none;
  min-width: 58px;
  text-align: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}
.art-num.is-reg { background: var(--surface-2); color: var(--muted); }
.art-title { margin: 0; font-size: 15.5px; font-weight: 650; flex: 1; }
.art-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.art-body { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.art-body p { margin: 0 0 9px; }
.art-body p:last-child { margin-bottom: 0; }

.badge {
  font-size: 11.5px;
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-2);
  line-height: 1.7;
  display: inline-block;
}
.badge.amended { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.verified { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.unverified { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.kind-text { background: var(--surface-2); }

/* ---------- المراجع الرسمية ---------- */
.sources {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 9px;
  border-right: 3px solid var(--accent);
  font-size: 12.5px;
}
.src-label {
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
  font-size: 11.5px;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.src-label::before { content: "🏛 "; }
.src-list { list-style: none; margin: 0; padding: 0; }
.src-list li { margin-bottom: 4px; line-height: 1.7; }
.src-list li:last-child { margin-bottom: 0; }
.src-list li::before { content: "▪"; color: var(--accent); opacity: .6; margin-left: 6px; }
.sources a { color: var(--accent); text-decoration: none; }
.sources a:hover { text-decoration: underline; }

/* ---------- لافتة المستند المرجعي ---------- */
.primary-doc {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.primary-doc .pd-icon { font-size: 20px; line-height: 1.4; flex: none; }
.primary-doc strong { color: var(--accent); display: block; font-size: 13px; }
.primary-doc a { color: var(--accent); font-weight: 600; }
.primary-doc .pd-note { color: var(--muted); font-size: 12.5px; margin-top: 5px; }

.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

mark { background: #ffe9a8; color: inherit; border-radius: 3px; padding: 0 2px; }
html[data-theme="dark"] mark { background: #6a5410; color: #fff8e1; }

/* ---------- Calculators ---------- */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .calc-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
/* على الشاشات الضيقة تنهار الأعمدة حتى لا تنضغط الحقول الرقمية */
@media (max-width: 520px) {
  .row2, .row3 { grid-template-columns: 1fr; }
}

/* مبدّل أساس الأجر داخل حاسبة مكافأة نهاية الخدمة */
.seg {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.seg-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  cursor: pointer;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: var(--shadow); }
.field.is-off { opacity: .45; }

/* المبدّلات ذات الثلاثة خيارات تلتف بدل أن تنضغط على الجوال */
@media (max-width: 440px) {
  .seg { flex-wrap: wrap; border-radius: 14px; }
  .seg-btn { flex: 1 1 45%; border-radius: 10px; }
}

/* حقل بأيقونة أمامية ولاحقة وحدة القياس */
.input-icon { position: relative; display: block; }
.input-icon input {
  padding-right: 44px;
  padding-left: 58px;
}
.input-icon .ii {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--accent);
  pointer-events: none;
  display: block;
}
.input-icon .ii svg { width: 100%; height: 100%; display: block; }
.input-icon .ii-suffix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  color: var(--muted);
  pointer-events: none;
}
.input-icon input:focus ~ .ii { color: var(--accent); }

/* بطاقات سنوات تدرّج التأمينات — كل بطاقة تعرض نسبة خصم المشترك */
.years {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}
@media (max-width: 640px) { .years { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 380px) { .years { grid-template-columns: repeat(2, 1fr); } }

.year-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 6px 9px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.year-card:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.year-card:disabled { opacity: .45; cursor: default; }
.year-card.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.year-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.yc-name { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.year-card.is-active .yc-name { color: var(--accent); font-weight: 600; }
.yc-now {
  display: inline-block;
  font-size: 9.5px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  vertical-align: middle;
}
.yc-rate {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-num);
  line-height: 1.4;
}
.year-card.is-active .yc-rate { color: var(--accent); }
.yc-sub { font-size: 10.5px; color: var(--muted); }
.yc-from { font-size: 10px; color: var(--muted); opacity: .8; font-family: var(--font-num); }

@media (prefers-reduced-motion: reduce) {
  .year-card { transition: none; }
  .year-card:hover:not(:disabled) { transform: none; }
}

/* سطر القيم المشتقّة الحيّة — يعرض عدة قيم متجاورة */
.live-out {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
}
.live-cell { flex: 1 1 150px; }
.live-cell .k { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.live-cell .v { font-size: 16px; font-weight: 700; color: var(--accent); font-family: var(--font-num); }
.live-cell .v small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
/* خانة الإجمالي تُفصل بحدّ وتكبر قليلاً لأنها الرقم الذي يهمّ المستخدم */
.live-cell.is-total {
  border-right: 2px solid var(--accent);
  padding-right: 10px;
  flex-basis: 170px;
}
.live-cell.is-total .v { font-size: 18px; }
@media (max-width: 440px) {
  .live-cell.is-total {
    border-right: none;
    border-top: 1px solid var(--accent);
    padding-right: 0;
    padding-top: 8px;
    flex-basis: 100%;
  }
}

/* تنبيه داخل النموذج عند إدخال يخالف النظام */
.field-warn {
  font-size: 12px;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 7px;
  padding: 7px 10px;
  margin-top: 6px;
}
.field-warn::before { content: "⚠ "; }

.basis-out {
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 9px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--accent);
}
.basis-out strong { font-family: var(--font-num); font-size: 15px; }

.btn {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.btn:hover { filter: brightness(1.08); }

.result-total {
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}
.result-total .label { font-size: 12.5px; color: var(--muted); display: block; }
.result-total .value { font-size: 27px; font-weight: 700; color: var(--accent); font-family: var(--font-num); }
.result-total .unit { font-size: 15px; font-weight: 600; color: var(--accent); }

/* تفصيل إضافي داخل بطاقة النتيجة (حصة المشترك/صاحب العمل، الصافي…) */
.res-extras {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
  text-align: right;
}
.res-extra {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.res-extra span { color: var(--muted); }
.res-extra strong { color: var(--text); font-family: var(--font-num); }

/* حقل معطَّل لأن الاختيار الحالي لا يستعمله */
.is-off { opacity: .4; pointer-events: none; }

.steps { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.steps li {
  padding: 8px 0 8px 0;
  padding-right: 20px;
  position: relative;
  border-bottom: 1px dashed var(--line);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: "◂";
  position: absolute;
  right: 2px;
  color: var(--accent);
  opacity: .55;
}

.ref-links { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.ref-links button {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent);
  border-radius: 7px;
  padding: 4px 11px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  margin: 0 0 6px 6px;
}
.ref-links button:hover { border-color: var(--accent); }

/* ---------- Scenarios ---------- */
.scn-q { margin: 0; font-size: 15px; font-weight: 650; cursor: pointer; display: flex; gap: 10px; }
.scn-q .mark { color: var(--accent); flex: none; font-family: var(--font-num); }
.scn-a { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.scn-a p { margin: 0 0 8px; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-right: 22px; }
.timeline::before {
  content: "";
  position: absolute;
  right: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--line);
}
.tl-item { position: relative; margin-bottom: 16px; }
.tl-item::before {
  content: "";
  position: absolute;
  right: -21px; top: 22px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.tl-date { font-size: 12.5px; color: var(--muted); font-family: var(--font-num); }
.tl-title { margin: 4px 0 8px; font-size: 15.5px; font-weight: 650; }
.tl-inst { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.tl-points { margin: 0; padding-right: 18px; font-size: 14px; }
.tl-points li { margin-bottom: 5px; }

.myth {
  background: var(--danger-soft);
  border: 1px solid var(--line);
  border-right: 3px solid var(--danger);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 8px;
}
.myth h3 { margin: 0 0 8px; font-size: 14.5px; color: var(--danger); }
.myth p { margin: 0 0 8px; font-size: 14px; }

.foot { text-align: center; color: var(--muted); font-size: 12.5px; padding-bottom: 30px; }

/* ==================================================================
   صفحة البداية — البطاقتان الرئيسيتان
   ================================================================== */

body.is-home { background: var(--bg); }

.hero {
  position: relative;
  background: linear-gradient(155deg, #0d6b58 0%, var(--accent) 45%, var(--accent-deep) 100%);
  color: #fff;
  padding: 54px 0 62px;
  text-align: center;
  overflow: hidden;
}
/* خيط ذهبي رفيع أسفل الترويسة — يربط لون القاعدة في العلامة ببقية الصفحة */
.hero::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--gold) 65%, transparent);
  opacity: .75;
}
html[data-theme="dark"] .hero { background: linear-gradient(155deg, #12463a 0%, #0c2b24 55%, #071612 100%); }
.hero-inner { max-width: 720px; position: relative; z-index: 1; }
.hero-mark {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(2px);
}
.hero h1 {
  margin: 0;
  font-size: clamp(27px, 5.4vw, 46px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.3px;
  text-wrap: balance;
}
/* الاسم اللاتيني داخل عنوان عربي: يحتاج عزل اتجاه صريح (bidi-isolate) وإلا
   انزاح موضعه أو التصقت به علامات الترقيم المجاورة في سياق RTL. */
.hero-latin {
  unicode-bidi: isolate;
  direction: ltr;
  font-family: var(--font-num);
  font-weight: 700;
  letter-spacing: 1.5px;
  opacity: .72;
  font-size: .62em;
  margin-inline-start: .35em;
  vertical-align: .06em;
}
.hero-latin::before { content: "| "; opacity: .55; }

/* الاسم اللاتيني داخل عنوان عربي (بطاقة أو ترويسة خدمة) — نفس معالجة
   .hero-latin بمقاس أصغر. العزل إلزامي: بدونه ترسو الحروف اللاتينية
   حسب اتجاه الفقرة فينقلب موضع الفاصل «|» إلى الطرف الخطأ. */
.hc-latin {
  unicode-bidi: isolate;
  direction: ltr;
  font-family: var(--font-num);
  font-weight: 700;
  letter-spacing: 1.1px;
  opacity: .66;
  font-size: .68em;
  margin-inline-start: .3em;
  vertical-align: .05em;
}
.hc-latin::before { content: "| "; opacity: .5; }

.hero-sub { margin: 8px 0 0; font-size: 15px; opacity: .9; }
.hero-lead { margin: 18px auto 0; font-size: 14.5px; line-height: 2; opacity: .82; max-width: 560px; }
@media (max-width: 560px) {
  .hero { padding: 38px 0 46px; }
}

.home-main { margin-top: -34px; padding-bottom: 40px; }
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
@media (max-width: 780px) { .home-grid { grid-template-columns: 1fr; } }

.home-card {
  --card-accent: var(--accent);
  --card-soft: var(--accent-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 22px 20px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* الشريط العلوي الملوّن يميّز البطاقتين دون إثقال الحدود */
.home-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent);
}
.home-card.is-internal { --card-accent: var(--warn); --card-soft: var(--warn-soft); }

.home-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(16,24,40,.07), 0 16px 38px rgba(16,24,40,.11);
  border-color: var(--card-accent);
}
.home-card:focus-visible { outline: 2px solid var(--card-accent); outline-offset: 3px; }
.home-card:active { transform: translateY(-1px); }

/* صف علوي: الأيقونة يميناً والشارة يساراً — بديل عن الشارة المطلقة الموضع */
.hc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.hc-icon {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 13px;
  background: var(--card-soft);
  color: var(--card-accent);
  display: grid; place-items: center;
  transition: transform .2s ease;
}
.hc-icon svg { width: 25px; height: 25px; }
.home-card:hover .hc-icon { transform: scale(1.06); }

.hc-badge {
  flex: none;
  font-size: 11px;
  background: var(--card-soft);
  color: var(--card-accent);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

.home-card h2 { margin: 0 0 9px; font-size: 18.5px; font-weight: 700; line-height: 1.6; }

/* الرابط الرئيسي يمتدّ فوق البطاقة كلها، فتبقى قابلة للنقر
   دون تعشيش الروابط داخل رابط (غير صالح في HTML). */
.hc-main { color: inherit; text-decoration: none; }
.hc-main::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.hc-main:focus-visible { outline: none; }
.hc-main:focus-visible::after { outline: 2px solid var(--card-accent); outline-offset: -3px; border-radius: 15px; }

/* شرائح الانتقال السريع — ترتفع فوق الرابط الممتد لتبقى قابلة للنقر */
.hc-jump { margin-bottom: 20px; }
.hc-jump-label {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-chips a {
  position: relative;
  z-index: 1;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  text-decoration: none;
  line-height: 1.7;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.hc-chips a:hover,
.hc-chips a:focus-visible {
  background: var(--card-soft);
  color: var(--card-accent);
  border-color: var(--card-accent);
  outline: none;
}
.hc-chips a:focus-visible { box-shadow: 0 0 0 2px var(--card-accent); }
.hc-desc { margin: 0 0 16px; font-size: 13.8px; color: var(--muted); line-height: 1.95; }

/* شريط الأرقام — يعطي حجم المحتوى بلمحة */
.hc-stats {
  display: flex;
  gap: 10px;
  background: var(--surface-2);
  border-radius: 11px;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--muted);
}
.hc-stats > span {
  flex: 1;
  text-align: center;
  line-height: 1.6;
}
.hc-stats > span + span { border-right: 1px solid var(--line); }
.hc-stats b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--card-accent);
  font-family: var(--font-num);
  line-height: 1.3;
}

.hc-points { list-style: none; margin: 0 0 20px; padding: 0; font-size: 13.3px; }
.hc-points li { position: relative; padding-right: 21px; margin-bottom: 8px; color: var(--text); line-height: 1.85; }
.hc-points li:last-child { margin-bottom: 0; }
.hc-points li::before {
  content: "";
  position: absolute; right: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--card-accent);
  opacity: .55;
}

.hc-cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14px; font-weight: 650;
  color: var(--card-accent);
  background: var(--card-soft);
  border-radius: 999px;
  padding: 9px 18px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap .2s ease, filter .2s ease;
}
.home-card:hover .hc-cta { gap: 12px; filter: brightness(.97); }
.hc-cta .arrow { display: inline-block; font-size: 15px; }

@media (max-width: 460px) {
  .home-card { padding: 20px 18px 18px; }
  .hc-top { flex-direction: row-reverse; justify-content: flex-end; }
  .home-card h2 { font-size: 17px; }
  .hc-stats { padding: 10px; }
  .hc-stats b { font-size: 17px; }
  .hc-cta { align-self: stretch; justify-content: center; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .home-card, .hc-icon, .hc-cta { transition: none; }
  .home-card:hover { transform: none; }
  .home-card:hover .hc-icon { transform: none; }
}

.home-note {
  margin-top: 26px;
  font-size: 12.5px; color: var(--muted); line-height: 2;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.home-note strong { color: var(--warn); }

/* ==================================================================
   صفحة اللائحة الداخلية
   ================================================================== */

.back-home {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-size: 17px;
  flex: none;
}
.back-home:hover { border-color: var(--accent); color: var(--accent); }

.policy-main { padding-top: 20px; padding-bottom: 44px; }

.policy-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) { .policy-layout { grid-template-columns: 1fr; } }

.policy-toc {
  position: sticky;
  top: 128px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
}
@media (max-width: 860px) {
  .policy-toc { position: static; max-height: 260px; }
}
.toc-group { margin-bottom: 14px; }
.toc-group:last-child { margin-bottom: 0; }
.toc-ch {
  font-weight: 700; font-size: 12.5px; color: var(--accent);
  margin-bottom: 7px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.toc-n {
  background: var(--accent-soft); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-family: var(--font-num);
}
.policy-toc ul { list-style: none; margin: 0; padding: 0; }
.policy-toc li { margin-bottom: 3px; }
.policy-toc a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 7px;
  border-radius: 6px;
  line-height: 1.7;
}
.policy-toc a:hover { background: var(--surface-2); color: var(--text); }

.policy-body { display: flex; flex-direction: column; gap: 12px; }

.sec { padding: 16px 18px; }
.sec.is-flash { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; cursor: pointer;
}
.sec-ch { font-size: 11.5px; color: var(--muted); display: block; margin-bottom: 4px; }
.sec-title { margin: 0; font-size: 15.5px; font-weight: 650; line-height: 1.7; }
.sec-page {
  flex: none;
  font-size: 11.5px; color: var(--muted);
  background: var(--surface-2);
  border-radius: 6px; padding: 3px 9px;
  font-family: var(--font-num);
}
.sec-snip {
  margin: 10px 0 0;
  font-size: 13.5px; color: var(--muted);
  border-right: 2px solid var(--line);
  padding-right: 11px;
  line-height: 1.95;
}
.sec-body {
  margin-top: 13px; padding-top: 13px;
  border-top: 1px dashed var(--line);
}
.sec-body p { margin: 0 0 10px; line-height: 2.05; }
.sec-body p:last-child { margin-bottom: 0; }

/* ==================== صفحة المقارنة ==================== */

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px;
  margin-bottom: 20px;
}
.step-title {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 10px; font-size: 17px; font-weight: 700;
}
.step-num {
  display: inline-grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 13.5px; font-weight: 700;
}
.step-desc { margin: 0 0 16px; color: var(--muted); font-size: 13.6px; line-height: 1.95; }

/* منطقة السحب */
.drop-zone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 30px 20px; text-align: center;
  transition: border-color .15s, background .15s;
}
.drop-zone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone svg { width: 40px; height: 40px; color: var(--accent); }
.dz-main { margin: 10px 0 4px; font-weight: 600; font-size: 15px; }
.dz-sub { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.dz-note { margin: 12px 0 0; color: var(--muted); font-size: 12.3px; }
.drop-zone label.btn { display: inline-block; cursor: pointer; }

.paste-box { margin-top: 16px; }
.paste-box summary { cursor: pointer; font-size: 13.8px; color: var(--accent); font-weight: 600; padding: 6px 0; }
.paste-box textarea {
  width: 100%; margin: 12px 0 10px; padding: 12px 14px;
  font: inherit; font-size: 13.4px; line-height: 1.9;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); resize: vertical;
}
.paste-box textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.up-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

.up-status {
  margin-top: 15px; padding: 11px 15px; border-radius: 9px;
  font-size: 13.4px; line-height: 1.85;
  background: var(--surface-2); color: var(--muted);
  border-right: 3px solid var(--line);
}
.up-status.is-ok { background: var(--accent-soft); color: var(--text); border-right-color: var(--accent); }
.up-status.is-warn { background: var(--warn-soft); color: var(--text); border-right-color: var(--warn); }
.up-status.is-err { background: var(--danger-soft); color: var(--text); border-right-color: var(--danger); }

.preview-box { margin-top: 16px; }
.preview-box h3 { font-size: 13.5px; margin: 0 0 8px; color: var(--muted); font-weight: 600; }
.preview-box pre {
  margin: 0; padding: 14px 16px; max-height: 220px; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: 12.6px; line-height: 1.95;
  white-space: pre-wrap; color: var(--muted);
}

/* ملخّص النتائج */
.summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.sum-tile {
  text-align: center; padding: 13px 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.sum-tile b { display: block; font-size: 23px; font-weight: 700; line-height: 1.3; }
.sum-tile span { font-size: 12.2px; color: var(--muted); }
.sum-tile.is-violation { background: var(--danger-soft); border-color: var(--danger); }
.sum-tile.is-violation b { color: var(--danger); }
.sum-tile.is-missing, .sum-tile.is-unclear { background: var(--warn-soft); border-color: var(--warn); }
.sum-tile.is-missing b, .sum-tile.is-unclear b { color: var(--warn); }
.sum-tile.is-ok, .sum-tile.is-better { background: var(--accent-soft); border-color: var(--accent); }
.sum-tile.is-ok b, .sum-tile.is-better b { color: var(--accent); }

/* جدول المقارنة */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13.1px; min-width: 760px; }
.cmp-table th, .cmp-table td {
  padding: 11px 13px; text-align: right; vertical-align: top;
  border-bottom: 1px solid var(--line); line-height: 1.85;
}
.cmp-table th { background: var(--surface-2); font-weight: 700; font-size: 12.8px; white-space: nowrap; }
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-table tr.row-violation { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); }
.cmp-table tr.row-missing { background: color-mix(in srgb, var(--warn-soft) 45%, transparent); }

.c-art { white-space: nowrap; }
.art-num { display: block; font-weight: 700; color: var(--accent); font-size: 12.8px; }
.art-title { display: block; color: var(--muted); font-size: 11.9px; margin-top: 2px; }
.statutory { display: block; color: var(--muted); font-size: 12.1px; margin-top: 4px; }
.c-current { white-space: nowrap; font-size: 14px; }
.c-remedy { min-width: 250px; }
.note { display: block; color: var(--muted); font-size: 11.9px; margin-top: 5px; }

/* دليل الالتقاط: يرى المستخدم الجملة التي بُني عليها الحكم فيكشف أي التقاط خاطئ */
.evidence { margin-top: 6px; }
.evidence summary { cursor: pointer; font-size: 11.6px; color: var(--accent); font-weight: 600; }
.evidence q {
  display: block; margin-top: 6px; padding: 8px 10px;
  background: var(--surface-2); border-right: 2px solid var(--line);
  border-radius: 6px; font-size: 11.8px; line-height: 1.85; color: var(--muted);
}

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11.7px; font-weight: 600; white-space: nowrap;
}
.p-violation { background: var(--danger-soft); color: var(--danger); }
.p-missing, .p-unclear { background: var(--warn-soft); color: var(--warn); }
.p-ok, .p-better { background: var(--accent-soft); color: var(--accent); }

/* .btn عام بعرض 100% (للحاسبات)؛ داخل صفوف الأزرار نعيده لعرضه الطبيعي
   وإلا احتلّ كل زر سطراً كاملاً رغم أن الحاوية flex. */
.export-row { display: flex; flex-wrap: wrap; gap: 10px; }
.export-row .btn { width: auto; flex: 0 0 auto; }

/* التحليل الأعمق */
.deep-box { margin-top: 30px; padding-top: 20px; border-top: 1px dashed var(--line); }
.deep-box summary { cursor: pointer; font-size: 14.5px; font-weight: 700; padding: 6px 0; }
.warn-box {
  background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: 9px; padding: 12px 15px; margin: 14px 0;
  font-size: 13.2px; line-height: 1.9;
}
.fld { display: block; margin: 14px 0; }
.fld > span { display: block; font-size: 13.2px; font-weight: 600; margin-bottom: 6px; }
.fld input {
  width: 100%; padding: 10px 13px; font: inherit; font-size: 13.4px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--text);
}
.fld small { display: block; margin-top: 5px; color: var(--muted); font-size: 12.1px; }
.consent { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 16px; font-size: 13.2px; line-height: 1.8; }
.consent input { margin-top: 4px; flex-shrink: 0; }

.btn-soft {
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--danger); color: var(--danger); filter: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }

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

.calc-picker { margin-bottom: 18px; max-width: 420px; }
.calc-picker label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--muted); margin-bottom: 7px;
}
.calc-select {
  width: 100%; padding: 12px 15px; font: inherit; font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--accent); border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: 18px calc(50% - 2px), 23px calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.calc-select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==================== زر تحديث المصدر في الرئيسية ==================== */

.hc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.update-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font: inherit; font-size: 12.2px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.update-btn:hover { border-color: var(--accent); color: var(--accent); }
.update-btn .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}
.update-btn.is-stale .dot { background: var(--warn); }
.update-panel {
  position: relative; z-index: 1;
  margin: 12px 0 0; padding: 12px 15px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; font-size: 12.7px; line-height: 1.9; color: var(--muted);
}
.update-panel strong { color: var(--text); }
.update-panel a { color: var(--accent); }

@media (max-width: 640px) {
  .step { padding: 20px 17px; }
  .cmp-table { font-size: 12.4px; }
}

/* ==================== منظومة التوطين ==================== */

.loc-meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 4px 0 14px; font-size: 13px; color: var(--muted);
}
.loc-meta strong { color: var(--text); }

.sub-pane { margin-top: 16px; }

.loc-milestones { margin: 10px 0; padding-inline-start: 22px; font-size: 13.6px; line-height: 2; }

/* جدول أضيق من .cmp-table العام (760px) — 3 أعمدة فقط تكفيها 100% */
#locTable { min-width: 0; width: 100%; }
#locTable input, #locTable select {
  padding: 8px 10px; font: inherit; font-size: 13.4px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); width: 100%;
}
#locTable td { vertical-align: middle; }
#locTable td:last-child { width: 40px; text-align: center; }

/* ==================== مُمتثل — تدقيق اللوائح ==================== */

/* --- شريط التقدّم --- */
.stepper-wrap { margin: 18px auto 4px; overflow-x: auto; }
.stepper {
  display: flex; align-items: flex-start; gap: 0;
  list-style: none; margin: 0; padding: 0 0 6px;
  min-width: 620px;
}
.sp {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 11.8px; color: var(--muted); text-align: center;
}
/* الخط الواصل يمتد يميناً لأن الترتيب RTL */
.sp::before {
  content: ""; position: absolute; top: 13px; right: 50%; left: -50%;
  height: 2px; background: var(--line); z-index: 0;
}
.sp:first-child::before { display: none; }
.sp-dot {
  position: relative; z-index: 1;
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.sp.is-current .sp-dot { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sp.is-current .sp-label { color: var(--accent); font-weight: 700; }
.sp.is-done .sp-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp.is-done::before { background: var(--accent); }
.sp.is-done .sp-dot::after { content: "✓"; font-size: 13px; }
.sp.is-done .sp-dot { font-size: 0; }

/* --- الرفع المزدوج --- */
.dual-upload {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 720px) { .dual-upload { grid-template-columns: 1fr; } }
.up-slot { display: flex; flex-direction: column; }
.up-slot-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.up-badge {
  font-size: 12.3px; font-weight: 700; padding: 4px 11px; border-radius: 20px;
}
.up-badge-a { background: var(--accent-soft); color: var(--accent); }
.up-badge-b { background: var(--gold-soft); color: #7a5f0e; }
html[data-theme="dark"] .up-badge-b { color: var(--gold); }
.up-hint { font-size: 11.6px; color: var(--muted); }
.dz-compact { padding: 20px 14px; }
.dz-compact svg { width: 30px; height: 30px; }
.dz-compact .dz-main { font-size: 13.6px; margin: 7px 0 3px; }
.dz-compact .dz-sub { font-size: 12px; margin-bottom: 11px; }

.base-pick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.base-pick-label { font-size: 13.3px; font-weight: 600; }
/* .seg العام يملأ عرض الحاسبة؛ هنا هو داخل صفّ مرن فينضغط ويلتفّ نصّه
   على سطرين. نمنع الانضغاط ونمنح الأزرار عرضها الطبيعي. */
.base-pick .seg { flex: 0 0 auto; }
.base-pick .seg-btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 16px; }

.btn-lg { font-size: 15.5px; padding: 13px 26px; }

/* ==================== مُنجز — نماذج الموارد البشرية ==================== */

.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.pick-grid .fld { margin: 0; }

/* تقرير مطابقة الأعمدة — يُظهر ما التُقط وما غاب قبل توليد أي وثيقة */
.map-report {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
  margin-top: 14px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.mr-title { display: block; font-size: 12.6px; font-weight: 700; margin-bottom: 8px; }
.mr-title.is-ok { color: var(--accent); }
.mr-title.is-warn { color: var(--warn); }
.mr-title.is-calc { color: var(--gold); }
.chip.is-missing { border-style: dashed; color: var(--muted); }
.chip.is-calc { border-color: var(--gold); color: var(--accent-deep); background: var(--gold-soft); }

/* بطاقة الموظف: ما سيدخل النموذج فعلاً، معروضاً قبل التوليد لا بعده */
.emp-card {
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.ec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 18px; }
.ec-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.ec-k { font-size: 12.6px; color: var(--muted); flex: none; }
.ec-v { font-size: 13px; font-weight: 600; text-align: left; }
/* dir=ltr على العنصر نفسه: عزل الابن وحده يُبقي الرسو RTL فينقلب الآيبان */
.ec-v .c-ltr { direction: ltr; display: inline-block; }

#tplText {
  width: 100%; margin: 10px 0; padding: 12px 14px;
  font: inherit; font-size: 13px; line-height: 2;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); resize: vertical;
}
#varChips { margin-bottom: 10px; }

.contract-doc .c-body { font-size: 14px; line-height: 2.15; }
.contract-doc .c-val { color: var(--accent); font-weight: 700; }

/* ==================== التحقق من توطين المهنة ==================== */

.prof-hits { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; max-height: 260px; overflow-y: auto; }
.prof-hits:empty { margin: 0; }

.prof-hit {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; text-align: right; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 13px; font: inherit; color: var(--text);
}
.prof-hit:hover { border-color: var(--accent); background: var(--accent-soft); }
.prof-hit.is-active { border-color: var(--accent); background: var(--accent-soft); }
.ph-title { font-size: 13.6px; font-weight: 600; }
.ph-group { font-size: 12px; color: var(--muted); flex: none; }

.verdict {
  margin-top: 16px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); border-top: 3px solid var(--accent);
}
.verdict-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.v-title { font-size: 17px; font-weight: 700; }
.v-group { font-size: 12.6px; color: var(--muted); }

.verdict-pct {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-radius: 10px; margin-bottom: 14px;
}
.verdict-pct b { font-size: 30px; font-weight: 700; line-height: 1; }
.verdict-pct span { font-size: 13px; }
.verdict-pct.is-active { background: var(--accent-soft); color: var(--accent); }
.verdict-pct.is-soon { background: var(--warn-soft); color: var(--warn); }
.verdict-pct.is-unknown { background: var(--surface-2); color: var(--muted); }

.verdict-table th, .verdict-table td {
  border: 1px solid var(--line); padding: 8px 11px; font-size: 13px; text-align: right;
}
.verdict-table th { background: var(--surface-2); width: 32%; font-weight: 600; }
.verdict-table { width: 100%; border-collapse: collapse; }

@media print {
  .svc-tree, .drop-zone, .up-actions, .export-row, .topbar, .foot, #wfCols { display: none !important; }
  .svc-panel[hidden] { display: none !important; }
}

/* ==================== الهيكل الهرمي للخدمات ==================== */

.svc-layout { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; }

.svc-tree {
  position: sticky; top: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 12px;
}
.svc-tree ul { list-style: none; margin: 0; padding: 0; }
.tree-branch + .tree-branch { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }

.tree-head {
  display: block; width: 100%; text-align: right;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--text);
  padding: 8px 10px; border-radius: 8px;
}
.tree-head:hover { background: var(--accent-soft); }
.tree-head.is-active { background: var(--accent-soft); color: var(--accent); }

/* الفروع تُزاح للداخل من جهة البداية — في RTL هي اليمين، فنستعمل خصائص منطقية. */
.tree-kids { margin-inline-start: 12px; padding-inline-start: 10px; border-inline-start: 1.5px solid var(--line); }
.tree-head:not(.is-active) + .tree-kids { display: none; }

.tree-leaf {
  display: block; width: 100%; text-align: right;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.8px; color: var(--muted);
  padding: 6px 8px; border-radius: 6px; margin: 1px 0;
}
.tree-leaf::before { content: "↳ "; opacity: .5; }
.tree-leaf:hover { color: var(--accent); background: var(--accent-soft); }
.tree-leaf.is-active { color: var(--accent); font-weight: 600; }

@media (max-width: 760px) {
  .svc-layout { grid-template-columns: 1fr; }
  .svc-tree { position: static; }
}

/* --- نموذج العقد --- */
.cform-sec {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px 16px; margin-bottom: 14px;
}
.cform-sec legend { font-size: 13.5px; font-weight: 700; color: var(--accent); padding: 0 6px; }
.cform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.cform-grid .fld-wide { grid-column: 1 / -1; }
.cform-grid .fld { margin: 0; }
.req { color: var(--danger); font-weight: 700; }

.clause-edit + .clause-edit { margin-top: 10px; }

/* --- مستند العقد المعروض --- */
.contract-doc { padding: 20px 22px; }
.contract-doc .c-title { text-align: center; color: var(--accent); font-size: 19px; margin: 0 0 18px; }
.contract-doc .c-sec { margin-bottom: 16px; }
.contract-doc .c-sec h3 { font-size: 14.5px; color: var(--accent); margin: 0 0 8px; }
.contract-doc .c-table { width: 100%; border-collapse: collapse; }
.contract-doc .c-table th,
.contract-doc .c-table td { border: 1px solid var(--line); padding: 7px 10px; font-size: 13px; text-align: right; }
.contract-doc .c-table th { background: var(--accent-soft); width: 34%; font-weight: 600; }
.contract-doc .c-blank { color: var(--muted); letter-spacing: 2px; }
/* البريد والآيبان قيم LTR: تُعرَض وترسو LTR. محاذاتها يميناً «لتتسق» مع بقية
   الخلايا تُبقيها راسيةً RTL — وهو ما يقلب قراءة معرّف بنكي في عقد رسمي. */
.contract-doc .c-table td.c-ltr { direction: ltr; text-align: left; }
.contract-doc .c-note { font-size: 13px; color: var(--muted); margin: 10px 0 16px; }

/* --- بطاقات نتائج التدقيق --- */
.finding {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px; margin-bottom: 12px;
}
.finding[data-status="غير متوافق"] { border-inline-start: 4px solid var(--danger); }
.finding[data-status="يحتاج مراجعة"] { border-inline-start: 4px solid var(--warn); }
.finding[data-status="متوافق"] { border-inline-start: 4px solid var(--accent); }
.finding-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 11px;
}
.finding-ref { font-weight: 700; font-size: 13.4px; color: var(--accent); }
.finding-topic { font-size: 13.4px; }
.sev { font-size: 11.5px; padding: 2px 9px; border-radius: 20px; margin-inline-start: auto; }
.sev-violation { background: var(--danger-soft); color: var(--danger); }
.sev-unclear { background: var(--warn-soft); color: var(--warn); }
.sev-ok { background: var(--accent-soft); color: var(--accent); }

.finding-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 11px; }
@media (max-width: 640px) { .finding-cols { grid-template-columns: 1fr; } }
.fc {
  background: var(--surface-2); border-radius: 9px; padding: 10px 12px;
}
.fc p { margin: 5px 0 0; font-size: 12.9px; line-height: 1.9; }
.fc-label {
  font-size: 11.4px; font-weight: 700; padding: 2px 8px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent);
}
.fc-b, .fc-warn { background: var(--warn-soft); color: var(--warn); }
.fc-ok { background: var(--accent-soft); color: var(--accent); }
.finding-why p { margin: 0 0 5px; font-size: 12.9px; line-height: 1.9; }

/* --- مقترحات التعديل --- */
.review-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 15px; margin-bottom: 16px; font-size: 13px;
}
.rb b { font-size: 15px; }
.rb-ok { color: var(--accent); }
.rb-rej { color: var(--danger); }
.rb-pend { color: var(--muted); }
.rb-note { margin-inline-start: auto; font-size: 12px; color: var(--muted); }

.proposal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 13px;
  transition: border-color .15s, opacity .15s;
}
.proposal.is-accepted { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.proposal.is-rejected { opacity: .55; box-shadow: inset 3px 0 0 var(--danger); }
.proposal-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line);
}
.prop-state { margin-inline-start: auto; font-size: 12.4px; font-weight: 600; color: var(--muted); }
.proposal.is-accepted .prop-state { color: var(--accent); }
.proposal.is-rejected .prop-state { color: var(--danger); }
.prop-row { margin-bottom: 11px; }
.prop-row p { margin: 5px 0 0; font-size: 12.9px; line-height: 1.9; }
.prop-current {
  background: var(--danger-soft); border-radius: 8px; padding: 9px 12px;
}
.prop-edit {
  width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; font-size: 13px; line-height: 1.9;
  border: 1px solid var(--accent); border-radius: 9px;
  background: var(--accent-soft); color: var(--text); resize: vertical;
}
.prop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.prop-actions .btn { width: auto; flex: 0 0 auto; font-size: 13px; padding: 8px 15px; }

/* --- المعاينة --- */
.preview-doc {
  margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.pv-meta {
  padding: 11px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: 12.6px; color: var(--muted);
}
.pv-warn { color: var(--warn); font-weight: 600; }
.pv-body {
  padding: 18px; max-height: 460px; overflow: auto;
  font-size: 12.9px; line-height: 2.05; white-space: pre-wrap;
}
.d-del { color: var(--danger); text-decoration: line-through; }
.d-ins {
  color: var(--accent); text-decoration: none; font-weight: 600;
  background: var(--accent-soft); border-radius: 4px; padding: 1px 4px;
}
.pv-orphans { padding: 16px 18px; border-top: 1px dashed var(--line); }
.pv-orphans h3 { font-size: 13.6px; margin: 0 0 5px; }
.orphan {
  border-inline-start: 3px solid var(--gold);
  padding: 8px 12px; margin: 10px 0; background: var(--surface-2); border-radius: 8px;
}
.orphan p { margin: 4px 0; font-size: 12.5px; }

@media print {
  .topbar, .disclaimer, .foot, .export-row, .deep-box,
  .drop-zone, .paste-box, .up-actions, .filter-chips, #filterChips { display: none !important; }
  .step { box-shadow: none; border: none; padding: 0; }
  .table-scroll { overflow: visible; border: none; }
  .cmp-table { min-width: 0; font-size: 9.5pt; }
}