/* ميزان لابس — v3 · Daylight Workbench (light-first)
   الرموز مأخوذة من النموذج المعتمد mizanlabs_site_v3_mockup_ar.html.
   قيد Lean: CSS ساكن، صفر مكتبات، صفر build. */

:root{
  --ink:#16202E; --ink-soft:#4A5568; --paper:#FBFAF7; --card:#FFFFFF;
  --line:#E7E2D8;
  --gold:#B8860B; --gold-soft:#F5EEDC; --gold-deep:#8A6508;
  --wakeel:#B8860B; --iq:#0F6170; --iq-soft:#E6F2F3;
  --report:#1E6B3A; --report-soft:#EAF5EE;
  --amber:#B45309; --amber-soft:#FDF3E3;
  --radius:14px; --shadow:0 10px 30px rgba(22,32,46,.07);
  --font:'IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);line-height:1.85;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* تخطّي إلى المحتوى — يظهر عند التركيز فقط (WCAG 2.4.1) */
.skip{position:absolute;right:-9999px;top:0;background:var(--ink);
  color:#fff;padding:10px 16px;z-index:99}
.skip:focus{right:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ── الهيدر ─────────────────────────────────────────────── */
header.site{background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:18px;
  min-height:64px;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.15rem;color:var(--ink);
  text-decoration:none;white-space:nowrap}
header nav{display:flex;gap:16px;flex-wrap:wrap;flex:1}
header nav a{color:var(--ink-soft);text-decoration:none;font-size:.92rem}
header nav a:hover{color:var(--gold-deep)}
header nav a[aria-current]{color:var(--gold-deep);font-weight:600;
  border-bottom:2px solid var(--gold)}
/* مبدّل اللغة — أعلى يمين الصفحة (بداية السطر في RTL) */
.lang{border:1px solid var(--line);border-radius:999px;
  padding:5px 14px;font-size:.85rem;text-decoration:none;
  color:var(--ink);background:var(--paper);white-space:nowrap}
.lang:hover{border-color:var(--gold);color:var(--gold-deep)}
/* CTA الهيدر — كما في النموذج المعتمد */
header .cta{background:var(--gold);color:#fff;text-decoration:none;
  padding:8px 18px;border-radius:10px;font-weight:600;font-size:.9rem;
  white-space:nowrap}
header .cta:hover{background:var(--gold-deep)}

/* ── الهيرو ─────────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,var(--gold-soft),var(--paper));
  border-bottom:1px solid var(--line);padding:52px 0 40px}
.hero h1{margin:0 0 14px;font-size:2.1rem;line-height:1.4}
.lead{margin:0;max-width:62ch;color:var(--ink-soft);font-size:1.06rem}

/* ── الكتل ──────────────────────────────────────────────── */
.blk{padding:44px 0}
.blk.alt{background:var(--card);border-block:1px solid var(--line)}
h2{font-size:1.5rem;margin:0 0 20px}
h3{font-size:1.08rem;margin:0 0 6px}

/* ── الإحصاء ────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:0 0 26px}
.stat{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;text-align:center;
  box-shadow:var(--shadow)}
.stat .n{font-size:1.9rem;font-weight:700;color:var(--gold-deep);
  font-variant-numeric:tabular-nums;line-height:1.2}
.stat .l{color:var(--ink-soft);font-size:.9rem}

/* ── جدول التغطية ───────────────────────────────────────── */
.cov{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;font-size:.94rem}
.cov th{background:var(--gold-soft);color:var(--gold-deep);
  text-align:right;padding:12px 14px;font-size:.9rem;font-weight:700}
.cov td{padding:11px 14px;border-top:1px solid var(--line);
  vertical-align:top}
.cov .num{text-align:center;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.cov th.num{text-align:center}
.cov tbody tr:hover{background:var(--paper)}
.official{display:block;color:var(--ink-soft);font-size:.78rem;
  margin-top:3px}
/* وسم التوقف — كهرماني هادئ، بلا حركة. التمييز خدمة للصدق لا زخرفة. */
.stale{display:inline-block;background:var(--amber-soft);
  color:var(--amber);border-radius:999px;padding:1px 9px;
  font-size:.76rem;font-weight:600;white-space:nowrap}
.pending{display:inline-block;background:var(--iq-soft);color:var(--iq);
  border-radius:999px;padding:1px 9px;font-size:.76rem;white-space:nowrap}
.stamp{margin:16px 0 0;color:var(--ink-soft);font-size:.88rem}
.note{margin:14px 0 0;color:var(--ink-soft);font-size:.88rem}

/* ── الشبكات والبطاقات ──────────────────────────────────── */
.sub{margin:-10px 0 22px;color:var(--ink-soft)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card p{margin:0;color:var(--ink-soft);font-size:.95rem}
.card a{display:inline-block;margin-top:10px;color:var(--gold-deep);
  text-decoration:none;font-weight:600;font-size:.92rem}
.card a:hover{text-decoration:underline}
.tag{display:inline-block;font-size:.75rem;font-weight:600;
  padding:2px 10px;border-radius:999px;margin-bottom:8px}
/* بطاقة المنتج بلونه المعتمد — Endorsed Architecture */
.pc{border-top:3px solid var(--line)}
.pc.wakeel{border-top-color:var(--wakeel)}
.pc.wakeel .tag{background:var(--gold-soft);color:var(--gold-deep)}
.pc.wakeel h3{color:var(--gold-deep)}
.pc.iq{border-top-color:var(--iq)}
.pc.iq .tag{background:var(--iq-soft);color:var(--iq)}
.pc.iq h3{color:var(--iq)}
.pc.report{border-top-color:var(--report)}
.pc.report .tag{background:var(--report-soft);color:var(--report)}
.pc.report h3{color:var(--report)}
.fineprint{color:var(--ink-soft);font-size:.88rem;margin:10px 0 0}
.pending-line{margin:14px 0 0;color:var(--iq);font-size:.9rem}

/* ── صفحة الخدمة: الطبقات الثلاث ────────────────────────── */
.kicker{display:inline-block;background:var(--report-soft);
  color:var(--report);font-weight:600;font-size:.82rem;
  padding:3px 12px;border-radius:999px;margin-bottom:12px}
/* لون لكل طبقة — التمييز البصري جزء من «واضحة التمييز» لا زخرفة */
.layer{background:var(--card);border:1px solid var(--line);
  border-inline-start:4px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow)}
.layer p{margin:0 0 8px;color:var(--ink-soft)}
.layer-a{border-inline-start-color:var(--report)}
.layer-b{border-inline-start-color:var(--iq)}
.layer-c{border-inline-start-color:var(--gold)}
.layer-tag{display:inline-block;font-size:.76rem;font-weight:600;
  color:var(--ink-soft);margin-bottom:4px}
.layer-a .layer-tag{color:var(--report)}
.layer-b .layer-tag{color:var(--iq)}
.layer-c .layer-tag{color:var(--gold-deep)}
.layer-stamp{display:block;font-size:.88rem;color:var(--ink);
  background:var(--paper);border:1px dashed var(--line);
  border-radius:10px;padding:8px 12px;margin-top:6px}
.layer-note{font-size:.93rem}
.reserve{background:var(--amber-soft);border-inline-start:4px solid var(--amber);
  border-radius:10px;padding:14px 16px;margin-top:18px;
  color:var(--ink);font-size:.93rem}

/* ── جدول التغطية المحقون في صفحة الخدمة (الشكل القديم) ─── */
.coverage-scope{font-weight:600;margin:0 0 4px}
.coverage-preamble{font-size:.86rem;color:var(--ink-soft);margin:0 0 12px}
table.coverage{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;font-size:.93rem;display:block;overflow-x:auto}
table.coverage th{background:var(--gold-soft);color:var(--gold-deep);
  text-align:right;padding:11px 13px;font-size:.88rem}
table.coverage td{padding:10px 13px;border-top:1px solid var(--line)}
table.coverage .num,table.coverage th.num{text-align:center;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.coverage-official{display:block;color:var(--ink-soft);font-size:.76rem;
  margin-top:3px}
.coverage-total{background:var(--gold-soft);color:var(--gold-deep);
  font-weight:700;text-align:center}
/* وسم «⚠ متوقّفة» في الجدول المحقون — نفس كهرمان صفحة التغطية */
td.coverage-stale{background:var(--amber-soft);color:var(--amber)}
.coverage-note,.coverage-pending,.coverage-stamp{font-size:.86rem;
  color:var(--ink-soft);margin:8px 0 0}
.coverage-pending{color:var(--iq)}

/* ── أسئلة ──────────────────────────────────────────────── */
.qa{border-top:1px solid var(--line);padding:18px 0}
.qa:first-of-type{border-top:none}
.qa p{margin:0;color:var(--ink-soft)}

/* ── الأزرار والنداء ────────────────────────────────────── */
.cta-blk{background:var(--gold-soft)}
.btn{display:inline-block;background:var(--gold-deep);color:#fff;
  text-decoration:none;padding:11px 22px;border-radius:999px;
  font-weight:600;margin:4px 0 4px 8px}
.btn:hover{background:var(--gold)}
.btn.ghost{background:transparent;color:var(--gold-deep);
  border:1px solid var(--gold)}
.btn.ghost:hover{background:var(--card)}

/* ── الفوتر ─────────────────────────────────────────────── */
footer.site{background:var(--card);border-top:1px solid var(--line);
  padding:36px 0 24px;margin-top:8px}
.cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.fbrand{font-weight:700;margin-bottom:6px}
footer h4{margin:0 0 8px;font-size:.95rem}
footer a{display:block;color:var(--ink-soft);text-decoration:none;
  font-size:.9rem;padding:3px 0}
footer a:hover{color:var(--gold-deep)}
footer p{color:var(--ink-soft);font-size:.9rem;margin:0}
.fine{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;
  font-size:.82rem}

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

/* ── موبايل أولاً في السلوك: الشبكات تنهار قبل أن تفيض ──── */
@media (max-width:820px){
  .cols{grid-template-columns:1fr 1fr}
  .grid4,.grid3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:36px 0 28px}
  .hero h1{font-size:1.6rem}
  .stats,.grid2,.grid3,.grid4{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  /* الهاتف: العلامة والمبدّل في سطر، والتنقّل تحتهما — وبلا ترتيب
     صريح تتناثر العناصر بين السطرين فيصعب على العين إيجاد أيّها. */
  .bar{row-gap:10px}
  .brand{order:1;flex:1}
  .lang{order:2}
  header .cta{order:3}
  header nav{order:4;width:100%;gap:14px;
    border-top:1px solid var(--line);padding-top:10px}
  /* الجدول يمرّر أفقياً داخل حاويته ولا يفيض بالصفحة */
  .cov{display:block;overflow-x:auto;white-space:nowrap}
  .official{white-space:normal}
}