/* ============================================================================
   مكتبة عناصر المنصة — كل قيمة من tokens.css، صفر لون أو مقاس صريح هنا
   DEC-180 (لوحة كلود) · 2026-07-26
   ========================================================================== */

/* ---------- الأساس ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--s-5) }
h1,h2,h3,h4{ line-height:var(--lh-tight); font-weight:var(--w-bold); letter-spacing:-.01em }
a{ color:var(--accent); text-underline-offset:3px }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm) }

/* ---------- شريط الحساب ---------- */
.topbar{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
}
.topbar .in{ display:flex; align-items:center; gap:var(--s-4);
  max-width:var(--maxw); margin:0 auto; padding:var(--s-3) var(--s-5) }
.logo{ font-weight:var(--w-bold); font-size:var(--t-lg) }
.logo em{ font-style:normal; color:var(--accent) }
.push{ margin-inline-start:auto }
.who{ font-size:var(--t-sm); color:var(--muted) }
.who b{ color:var(--ink); font-weight:var(--w-medium) }

.credit{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--t-sm); font-weight:var(--w-bold); color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:var(--s-1) var(--s-3); border-radius:var(--r-full);
}
.credit b{ font-variant-numeric:tabular-nums }

/* ---------- الأزرار ---------- */
.btn{
  font:inherit; font-weight:var(--w-bold); font-size:var(--t-base); cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-5); border-radius:var(--r-md);
  border:1px solid transparent; background:var(--accent); color:var(--accent-ink);
  transition:background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  min-height:44px;                      /* حد اللمس */
}
.btn:hover{ background:var(--accent-hover) }
.btn:active{ background:var(--accent-press); transform:scale(.985) }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--border-strong) }
.btn.ghost:hover{ background:var(--surface-2) }
.btn.sm{ font-size:var(--t-sm); padding:var(--s-2) var(--s-4); min-height:36px }
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed; pointer-events:none;
}

/* ---------- البطاقات ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s-5); box-shadow:var(--sh-1);
}
.card+.card{ margin-top:var(--s-4) }
.card > h3{ font-size:var(--t-lg); margin-bottom:var(--s-2) }
.lead{ color:var(--muted) }

/* ---------- الوسوم والحالات ----------
   🔴 كل وسم يحمل نصاً — اللون وحده لا يُبلّغ (قاعدة color-not-only). */
.tag{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--t-xs); font-weight:var(--w-bold);
  padding:var(--s-1) var(--s-3); border-radius:var(--r-full);
  border:1px solid var(--border-strong); color:var(--muted); background:var(--surface-2);
}
.tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.tag.ok{ color:var(--ok); background:var(--ok-soft); border-color:transparent }
.tag.warn{ color:var(--warn); background:var(--warn-soft); border-color:transparent }
.tag.bad{ color:var(--danger); background:var(--danger-soft); border-color:transparent }
.tag.info{ color:var(--info); background:var(--info-soft); border-color:transparent }
.tag.wait::before{ background:transparent; box-shadow:inset 0 0 0 1.5px currentColor }

/* ---------- شريط التقدّم ---------- */
.bar{ height:8px; background:var(--surface-2); border-radius:var(--r-full); overflow:hidden }
.bar i{ display:block; height:100%; background:var(--accent); border-radius:inherit;
  transition:width var(--dur-slow) var(--ease) }

/* ---------- قائمة المُدخَلات ---------- */
.inputs{ list-style:none; display:grid; gap:var(--s-2); margin-top:var(--s-3) }
.inputs li{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-3); border-radius:var(--r-sm); background:var(--surface-2);
  font-size:var(--t-sm);
}
.inputs li .nm{ margin-inline-end:auto }
.inputs li[data-state="missing"]{ background:var(--danger-soft) }
.inputs li[data-state="missing"] .nm{ font-weight:var(--w-bold) }

/* ---------- الافتراضات والمصادر ---------- */
.basis{ display:grid; gap:var(--s-2); margin-top:var(--s-3) }
.basis .row{
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  font-size:var(--t-sm); padding-block:var(--s-2);
  border-bottom:1px solid var(--border);
}
.basis .row:last-child{ border-bottom:0 }
.basis .k{ color:var(--muted); min-width:11ch }
.basis .v{ font-weight:var(--w-medium); font-variant-numeric:tabular-nums }
.basis .src{ margin-inline-start:auto; font-size:var(--t-xs); color:var(--muted) }

/* ---------- حاجز القرار ---------- */
.gate{
  display:flex; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-4); border-radius:var(--r-md); margin-top:var(--s-4);
  border:1px solid transparent;
}
.gate.pass{ background:var(--ok-soft); border-color:var(--ok) }
.gate.review{ background:var(--warn-soft); border-color:var(--warn) }
.gate.fail{ background:var(--danger-soft); border-color:var(--danger) }
.gate .ic{ font-size:var(--t-lg); line-height:1 }
.gate b{ display:block; margin-bottom:var(--s-1) }
.gate p{ font-size:var(--t-sm); color:var(--ink-2) }

/* ---------- حدود الادعاء ---------- */
.limits{
  margin-top:var(--s-4); padding:var(--s-3) var(--s-4);
  border-inline-start:3px solid var(--border-strong);
  font-size:var(--t-sm); color:var(--muted);
}
.limits b{ color:var(--ink-2) }

/* ---------- شريط الرحلة ---------- */
.rail{ background:var(--surface); border-block:1px solid var(--border) }
.rail ol{ display:flex; gap:var(--s-1); list-style:none; overflow-x:auto;
  max-width:var(--maxw); margin:0 auto; padding:var(--s-3) var(--s-5) }
.rail li{ flex:none }
.rail button{
  font:inherit; font-size:var(--t-sm); cursor:pointer; white-space:nowrap;
  background:transparent; border:1px solid transparent; color:var(--muted);
  padding:var(--s-2) var(--s-3); border-radius:var(--r-full); min-height:40px;
  display:inline-flex; align-items:center; gap:var(--s-2);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rail button:hover{ background:var(--surface-2); color:var(--ink) }
.rail button[aria-current="true"]{
  background:var(--accent-soft); color:var(--accent);
  border-color:var(--accent-line); font-weight:var(--w-bold);
}
.rail .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55 }
.rail button[data-state="locked"] .dot{ background:transparent; box-shadow:inset 0 0 0 1.5px currentColor }
.rail button[data-state="done"] .dot{ background:var(--ok); opacity:1 }

/* ---------- التخطيط ---------- */
.grid2{ display:grid; grid-template-columns:1.35fr .65fr; gap:var(--s-5); align-items:start }
.section{ padding-block:var(--s-6) }
.section > h2{ font-size:var(--t-2xl); margin-bottom:var(--s-2) }
.section > .lead{ margin-bottom:var(--s-5); max-width:var(--maxw-text) }

@media (max-width:900px){ .grid2{ grid-template-columns:1fr } .who{ display:none } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important } }

/* ---------- التنقّل الفرعي (أقسام المنصة) ---------- */
.subnav{ background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:57px; z-index:calc(var(--z-sticky) - 1) }
.subnav .in{ display:flex; gap:var(--s-1); overflow-x:auto;
  max-width:var(--maxw); margin:0 auto; padding:var(--s-2) var(--s-5) }
.subnav a{ font-size:var(--t-sm); color:var(--muted); text-decoration:none; white-space:nowrap;
  padding:var(--s-2) var(--s-3); border-radius:var(--r-full); min-height:40px;
  display:inline-flex; align-items:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease) }
.subnav a:hover{ background:var(--surface-2); color:var(--ink) }
.subnav a[aria-current="page"]{ background:var(--accent-soft); color:var(--accent);
  font-weight:var(--w-bold) }

/* ---------- جدول ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:var(--t-sm); margin-top:var(--s-4) }
.tbl th,.tbl td{ text-align:start; padding:var(--s-3); border-bottom:1px solid var(--border) }
.tbl th{ color:var(--muted); font-weight:var(--w-medium); font-size:var(--t-xs) }
.tbl td{ font-variant-numeric:tabular-nums }
.tbl tr:last-child td{ border-bottom:0 }
.scrollx{ overflow-x:auto; max-width:100% }

/* ---------- منطقة الرفع ---------- */
.drop{ border:2px dashed var(--border-strong); border-radius:var(--r-lg);
  padding:var(--s-7) var(--s-5); text-align:center; background:var(--surface-2) }
.drop b{ display:block; margin-bottom:var(--s-2) }
.drop p{ font-size:var(--t-sm); color:var(--muted) }

/* ---------- خطّ زمني ---------- */
.tl{ list-style:none; margin-top:var(--s-4); border-inline-start:2px solid var(--border);
  padding-inline-start:var(--s-5) }
.tl li{ position:relative; padding-bottom:var(--s-5) }
.tl li::before{ content:""; position:absolute; inset-inline-start:calc(var(--s-5) * -1 - 5px);
  top:6px; width:8px; height:8px; border-radius:50%; background:var(--accent) }
.tl time{ font-size:var(--t-xs); color:var(--muted); display:block }
.tl b{ display:block; margin-block:var(--s-1) }
.tl p{ font-size:var(--t-sm); color:var(--muted) }
.tl code{ font-size:var(--t-xs); color:var(--faint) }

/* ---------- شبكة بطاقات مرنة ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--s-4);
  margin-top:var(--s-4) }
@media (max-width:760px){ .subnav{ top:53px } }

/* الجداول على الجوال: تمرير داخل حاويتها لا في الصفحة.
   بلا هوامش سالبة — كانت توسّع الحاوية فوق عرض الشاشة فيهرب التمرير للصفحة. */
@media (max-width:760px){
  .scrollx{ max-width:100%; -webkit-overflow-scrolling:touch }
  .tbl{ min-width:520px }
}

/* أبناء الشبكة لا يصغرون دون محتواهم افتراضياً (min-width:auto)،
   فجدول عريض داخل بطاقة يدفع الصفحة كلها. هذا يعيد لهم القابلية للانكماش. */
.grid2 > *, .cards > *{ min-width:0 }