/* =============================================================
   منصة الدبلومات — امتداد نظام التصميم
   كل ما هنا مأخوذ من المشروع المرجعي أو مبنيّ على رموزه نفسها
   (--sky-*, --slate-*, --r-*, --sh-*, --t-*, --ease-*).
   لا رموز جديدة ولا ألوان خارج لوحة المرجع.
   ============================================================= */

/* -------------------------------------------------------------
   0) أنماط منقولة من كتلة <style> الثانية في المشروع المرجعي
      (الكتلة الخاصة بالصفحات في 09-dashboard.html)
      كانت مفقودة لأن الاستخراج الأول شمل الكتلة الأولى وحدها.
      منقولة حرفياً كما هي.
   ------------------------------------------------------------- */

/* ===== صفّ مصغّر — يُستخدم في كل اللوحات ===== */
.mini-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--slate-100);
  transition:all var(--t-fast);cursor:pointer;}
.mini-row:last-child{border-bottom:none;}
.mini-row:hover{background:var(--sky-50);padding-right:8px;padding-left:8px;border-radius:9px;}

/* ===== القمع ===== */
.fn-row{display:flex;align-items:center;gap:12px;margin-bottom:9px;}
.fn-lbl{width:88px;flex-shrink:0;font-size:12px;font-weight:800;color:var(--slate-600);}
.fn-track{flex:1;height:34px;background:var(--slate-50);border-radius:9px;position:relative;overflow:hidden;}
.fn-bar{height:100%;border-radius:9px;width:0;transition:width 1.2s var(--ease-out);
  display:flex;align-items:center;justify-content:flex-end;padding-left:11px;cursor:pointer;}
.fn-bar:hover{filter:brightness(1.06);}
.fn-bar b{color:#fff;font-size:12px;font-weight:900;}
.fn-conv{width:64px;flex-shrink:0;text-align:left;font-size:11px;font-weight:800;}

/* ===== الرسم الخطي ===== */
.spark-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);}
.spark-line.run{transition:stroke-dashoffset 1.8s var(--ease-out);stroke-dashoffset:0;}
.spark-area{opacity:0;transition:opacity .9s var(--ease-out) .5s;}
.spark-area.run{opacity:1;}
.spark-dot{opacity:0;transition:opacity .3s;cursor:pointer;}
.chart-wrap:hover .spark-dot{opacity:1;}
.grid-line{stroke:var(--slate-100);stroke-width:1;}

/* ===== الحلقة ===== */
.donut-seg{transition:stroke-dashoffset 1.4s var(--ease-out),stroke-width .2s;cursor:pointer;}

/* تصحيح اتجاهي لما سبق */
[dir="ltr"] .fn-bar{justify-content:flex-end;padding-left:0;padding-right:11px;}
[dir="ltr"] .fn-conv{text-align:right;}

/* ===== النجوم =====
   المرجع يستهدف <i> لأنه كان يستخدم Font Awesome في نسخة سابقة،
   ونحن نستخدم SVG. نمدّد القاعدة للـ SVG بنفس ألوان المرجع. */
.stars{display:inline-flex;align-items:center;gap:2px;}
.stars svg{color:var(--warning);fill:var(--warning);width:15px;height:15px;}
.stars svg.empty{color:var(--slate-200);fill:none;}


/* -------------------------------------------------------------
   1) البوابة العامة — مأخوذة حرفياً من 01-portal-home.html
   ------------------------------------------------------------- */
.hero-wrap{position:relative;overflow:hidden;background:linear-gradient(180deg,#F8FAFC 0%,#F1F5F9 100%);}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--slate-200) 1px,transparent 1px),
                   linear-gradient(90deg,var(--slate-200) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 60% 30%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 60% 30%, #000 0%, transparent 72%);
}
.hero-search{
  background:#fff;border:1.5px solid var(--slate-200);border-radius:var(--r-3xl);
  box-shadow:0 6px 24px rgba(15,23,42,.06);
  transition:box-shadow .4s var(--ease-out),transform .4s var(--ease-out),border-color .3s;
}
.hero-search:focus-within{box-shadow:0 18px 46px rgba(14,165,233,.16);transform:translateY(-3px);border-color:var(--sky-300);}
.hero-search .divider{width:1px;height:34px;background:var(--slate-200);}

.word-slot{display:inline-block;position:relative;height:1.15em;overflow:hidden;vertical-align:bottom;}
.word-slot span{display:block;animation:word-roll 9s var(--ease-out) infinite;}
@keyframes word-roll{
  0%,26%{transform:translateY(0);}
  33%,59%{transform:translateY(-100%);}
  66%,92%{transform:translateY(-200%);}
  100%{transform:translateY(-300%);}
}

.value-card{transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);}
.value-card:hover{transform:translateY(-4px);border-color:var(--sky-300);box-shadow:var(--sh-lift);}


/* -------------------------------------------------------------
   2) شريط الخطوات + المعالج — من 06-application-form.html
   ------------------------------------------------------------- */
.steps{display:flex;align-items:center;gap:0;}
.step{display:flex;align-items:center;flex:1;min-width:0;}
.step:last-child{flex:0 0 auto;}
.step-lbl{margin-right:11px;min-width:0;}
.step-lbl p{font-size:12.5px;font-weight:800;color:var(--slate-400);transition:color var(--t-base);white-space:nowrap;}
.step-lbl span{font-size:10.5px;color:var(--slate-400);white-space:nowrap;}
.step.done .step-lbl p,.step.current .step-lbl p{color:var(--slate-900);}
.step-line{flex:1;height:2.5px;background:var(--slate-200);margin:0 14px;border-radius:3px;position:relative;overflow:hidden;}
.step-line::after{content:'';position:absolute;inset:0;width:0;background:var(--grad-success);
  border-radius:3px;transition:width .55s var(--ease-out);}
.step.done .step-line::after{width:100%;}

.wiz-pane{display:none;}
.wiz-pane.active{display:block;animation:wiz-in .45s var(--ease-out) both;}
@keyframes wiz-in{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:none;}}
.wiz-pane.back.active{animation:wiz-in-b .45s var(--ease-out) both;}
@keyframes wiz-in-b{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:none;}}

.wiz-bar{position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-top:1px solid var(--slate-200);box-shadow:0 -6px 22px rgba(15,23,42,.06);}

.radio-card{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1.5px solid var(--slate-200);
  border-radius:var(--r-md);cursor:pointer;background:#fff;transition:all var(--t-fast);}
.radio-card:hover{border-color:var(--sky-300);background:var(--sky-50);}
.radio-card.on{border-color:var(--sky-500);background:var(--sky-50);box-shadow:0 0 0 3px rgba(14,165,233,.1);}
.radio-card .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--slate-300);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .22s var(--ease-spring);}
.radio-card.on .dot{border-color:var(--sky-500);}
.radio-card.on .dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--sky-500);}

.rev-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed var(--slate-200);}
.rev-row:last-child{border-bottom:none;}
.rev-row dt{font-size:12px;font-weight:700;color:var(--slate-500);flex-shrink:0;}
.rev-row dd{font-size:13px;font-weight:700;color:var(--slate-900);text-align:left;}

@keyframes pop-check{0%{transform:scale(0) rotate(-25deg);}60%{transform:scale(1.15) rotate(4deg);}100%{transform:scale(1) rotate(0);}}
.pop-check{animation:pop-check .6s var(--ease-spring) both;}


/* -------------------------------------------------------------
   3) مربّع اختيار الجداول — من 17-candidates.html
   ------------------------------------------------------------- */
.cbx{
  width:17px;height:17px;border-radius:5px;border:1.5px solid var(--slate-300);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all var(--t-fast);flex-shrink:0;
}
.cbx:hover{border-color:var(--sky-500);}
.cbx.on{background:var(--sky-500);border-color:var(--sky-500);}
.cbx.on::after{content:'';width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;
  transform:rotate(-45deg) translateY(-1px);}

/* شريط الإجراءات الجماعية */
.sel-bar{
  position:fixed;bottom:-90px;right:50%;transform:translateX(50%);z-index:70;
  background:var(--slate-900);color:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-pop);
  padding:12px 18px;display:flex;align-items:center;gap:16px;
  transition:bottom .4s var(--ease-out);max-width:calc(100vw - 32px);overflow-x:auto;
}
.sel-bar.show{bottom:22px;}


/* -------------------------------------------------------------
   4) مكوّنات خاصة بالنطاق التعليمي
      لا يوجد لها مقابل في المشروع المرجعي — بُنيت امتداداً له
      (نفس الحواف والظلال والألوان، انظر docs/DESIGN_DECISIONS.md)
   ------------------------------------------------------------- */

/* بطاقة دبلوم — نظير .job-card في المرجع */
.dip-card{
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.dip-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(14,165,233,.06),transparent 55%);
  opacity:0;transition:opacity var(--t-base);
}
.dip-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--sky-300);}
.dip-card:hover::after{opacity:1;}

/* شريط المقاعد */
.seat-bar{height:6px;background:var(--slate-200);border-radius:10px;overflow:hidden;}
.seat-fill{height:100%;border-radius:10px;width:0;background:var(--grad-brand);transition:width 1.1s var(--ease-out);}
.seat-fill.full{background:linear-gradient(135deg,#F87171,#DC2626);}
.seat-fill.near{background:linear-gradient(135deg,#FBBF24,#F59E0B);}

/* الخطة الدراسية — مستوى */
.plan-level{border:1.5px solid var(--slate-200);border-radius:var(--r-xl);background:#fff;overflow:hidden;
  transition:border-color var(--t-base),box-shadow var(--t-base);}
.plan-level:hover{border-color:var(--sky-300);box-shadow:var(--sh-card-hover);}
.plan-head{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--slate-50);
  border-bottom:1px solid var(--slate-200);cursor:pointer;width:100%;text-align:right;}
.plan-head:hover{background:var(--sky-50);}
.plan-num{width:30px;height:30px;border-radius:var(--r-sm);background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0;}
.plan-body{max-height:0;overflow:hidden;transition:max-height .34s var(--ease-out);}
.plan-level.open .plan-body{max-height:900px;}
.plan-level.open .plan-head .chev{transform:rotate(180deg);}
.plan-head .chev{transition:transform .28s var(--ease-out);margin-right:auto;flex-shrink:0;}

/* جدول الأقساط — نظير .activity-item في المرجع */
.inst-row{position:relative;padding-right:34px;padding-bottom:18px;}
.inst-row::before{content:'';position:absolute;right:11px;top:26px;bottom:0;width:2px;background:var(--slate-200);}
.inst-row:last-child{padding-bottom:0;}
.inst-row:last-child::before{display:none;}
.inst-dot{position:absolute;right:0;top:2px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff;flex-shrink:0;}

/* وسم الاعتماد — لا يُعرض «معتمد» إلا بحالة معتمد فعلاً */
.acc-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:11px;font-weight:800;border:1px solid transparent;}
.acc-yes{background:#D1FAE5;color:#065F46;border-color:#A7F3D0;}
.acc-pend{background:#FEF3C7;color:#92400E;border-color:#FDE68A;}
.acc-no{background:#F1F5F9;color:#475569;border-color:var(--slate-200);}

/* عنصر قائمة قادم — في السايدبار */
.nav-leaf.is-soon{opacity:.62;}
.nav-leaf.is-soon:hover{opacity:1;}

/* شبكة مفاتيح الحالات (Developer state switch) */
.state-switch{display:inline-flex;align-items:center;gap:4px;background:var(--slate-50);
  border:1.5px solid var(--slate-200);border-radius:var(--r-md);padding:3px;flex-wrap:wrap;}
.state-switch button{padding:5px 11px;font-size:11.5px;font-weight:800;color:var(--slate-500);
  border-radius:var(--r-xs);transition:all var(--t-fast);white-space:nowrap;}
.state-switch button:hover{color:var(--sky-700);}
.state-switch button.active{background:#fff;color:var(--sky-700);box-shadow:0 1px 3px rgba(0,0,0,.08);}

/* حالات مشتركة */
.state-box{display:none;}
.state-box.on{display:block;animation:fade-up .4s var(--ease-out) both;}

/* بطاقة سجل على الجوال — بديل صفوف الجدول */
.row-card{border:1px solid var(--slate-200);border-radius:var(--r-lg);background:#fff;padding:14px;
  transition:border-color var(--t-base),box-shadow var(--t-base);}
.row-card:hover{border-color:var(--sky-300);box-shadow:var(--sh-card-hover);}
.row-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin-top:10px;}
.row-card dt{font-size:11px;font-weight:700;color:var(--slate-500);}
.row-card dd{font-size:12.5px;font-weight:700;color:var(--slate-800);text-align:left;}

/* الجداول: إخفاء على الجوال والاستعاضة بالبطاقات */
@media (max-width:767px){
  .table-wrap{display:none;}
  .cards-wrap{display:grid;gap:10px;}
}
@media (min-width:768px){
  .cards-wrap{display:none;}
}

/* تصحيح اتجاهي: العناصر التي تعتمد إزاحة يمين/يسار */
[dir="ltr"] .inst-row{padding-right:0;padding-left:34px;}
[dir="ltr"] .inst-row::before{right:auto;left:11px;}
[dir="ltr"] .inst-dot{right:auto;left:0;}
[dir="ltr"] .plan-head{text-align:left;}
[dir="ltr"] .plan-head .chev{margin-right:0;margin-left:auto;}
[dir="ltr"] .step-lbl{margin-right:0;margin-left:11px;}
[dir="ltr"] .rev-row dd{text-align:right;}
[dir="ltr"] .row-card dd{text-align:right;}
[dir="ltr"] .data-table thead th{text-align:left;}
[dir="ltr"] .data-table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--sky-500);}
[dir="ltr"] .nav-item.active::before{right:auto;left:-12px;border-radius:0 4px 4px 0;}
[dir="ltr"] .nav-leaf::before{right:auto;left:-8px;}
[dir="ltr"] .nav-sub .nav-leaf{margin-right:0;margin-left:14px;}
[dir="ltr"] .nav-sub .nav-sub .nav-leaf{margin-right:0;margin-left:26px;}
[dir="ltr"] .nav-search i,[dir="ltr"] .nav-search svg{right:auto;left:11px;}
[dir="ltr"] .nav-search input{padding:8px 11px 8px 32px;}
[dir="ltr"] body.app-shell .sidebar{right:auto;left:0;}
[dir="ltr"] .sidebar{border-left:0;border-right:1px solid var(--slate-200);}
[dir="ltr"] body.app-shell .app-header{right:0;left:var(--sidebar-w);}
[dir="ltr"] body.app-shell .main-area{right:0;left:var(--sidebar-w);}
[dir="ltr"] .drawer{left:auto;right:0;transform:translateX(100%);box-shadow:-10px 0 30px rgba(0,0,0,.15);}
[dir="ltr"] .drawer.show{transform:translateX(0);}
[dir="ltr"] .notif-dropdown,[dir="ltr"] .acct-dropdown{left:auto;right:0;}
[dir="ltr"] .value-chip{margin-right:0;margin-left:8px;}
[dir="ltr"] .fab-assistant{left:auto;right:30px;}
[dir="ltr"] body.app-shell.rail .nav-item::after,
[dir="ltr"] body.app-shell.rail .nav-mod::after{right:auto;left:calc(100% + 10px);}

@media (max-width:1024px){
  [dir="ltr"] body.app-shell .sidebar{transform:translateX(-100%);}
  [dir="ltr"] body.app-shell .sidebar.open{transform:translateX(0);}
  [dir="ltr"] body.app-shell .app-header{left:0;}
  [dir="ltr"] body.app-shell .main-area{left:0 !important;}
}

/* -------------------------------------------------------------
   5) طبقة الرسوم — امتداد لنمط .gallery-tile في المرجع
   ------------------------------------------------------------- */

/* بلاطة المعرض — منقولة من 01-portal-home.html ثم وُسّعت بشبكة خفيفة */
.gallery-tile{border-radius:var(--r-2xl);overflow:hidden;position:relative;
  transition:transform var(--t-base),box-shadow var(--t-base);}
.gallery-tile:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--sh-lift);}
.gallery-tile .glow{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(15,23,42,.62) 100%);}
.gallery-tile .tile-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at 30% 20%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 30% 20%,#000 0%,transparent 78%);}

/* غلاف بطاقة الدبلوم */
.dip-cover{display:block;width:100%;}
.cover-wrap{position:relative;margin:-20px -20px 0;overflow:hidden;
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;}
.cover-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.28) 100%);}
.cover-badges{position:absolute;top:12px;right:12px;left:12px;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.cover-badges .badge{backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(15,23,42,.14);}
.dip-card:hover .dip-cover{transform:scale(1.05);}
.dip-cover{transition:transform var(--t-slow);}

/* صورة رمزية مزخرفة */
.portrait{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-card);}

/* شريط شعارات الجهات */
.logo-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.logo-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;
  border-radius:var(--r-lg);background:#fff;border:1.5px solid var(--slate-200);
  font-size:12.5px;font-weight:800;color:var(--slate-600);transition:all var(--t-base);}
.logo-chip:hover{border-color:var(--sky-300);color:var(--sky-700);transform:translateY(-2px);
  box-shadow:var(--sh-card-hover);}
.logo-chip svg{color:var(--sky-500);}

/* بطاقة اقتباس بخلفية */
.quote-card{position:relative;overflow:hidden;}
.quote-card::before{content:'';position:absolute;top:-26px;left:-14px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.09),transparent 68%);pointer-events:none;}

[dir="ltr"] .cover-wrap{margin:-20px -20px 0;}
[dir="ltr"] .quote-card::before{left:auto;right:-14px;}


/* بطاقة تنبيه ملوّنة
   لا يصحّ الاعتماد على bg-red-50 من Tailwind هنا، لأن design-system.css
   يُحمَّل بعد tailwind.css فيغلب background:#fff في .card على أصناف الخلفية.
   فنعرّف الحالة صراحةً بنفس ألوان دلالة المرجع. */
.note{display:flex;align-items:flex-start;gap:14px;padding:16px;
  border-radius:var(--r-2xl);border:1px solid var(--slate-200);background:#fff;
  box-shadow:var(--sh-card);transition:box-shadow var(--t-base),border-color var(--t-base);}
.note:hover{box-shadow:var(--sh-card-hover);}
.note .note-ic{width:36px;height:36px;border-radius:var(--r-lg);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:#fff;}
.note-danger {background:#FEF2F2;border-color:#FECACA;}
.note-danger  .note-ic{color:var(--danger-strong,#DC2626);}
.note-warning{background:#FFFBEB;border-color:#FDE68A;}
.note-warning .note-ic{color:var(--warning);}
.note-info   {background:#F0F9FF;border-color:#BAE6FD;}
.note-info    .note-ic{color:var(--sky-600);}
.note-success{background:#F0FDF4;border-color:#A7F3D0;}
.note-success .note-ic{color:var(--success);}


/* منع أي تجاوز أفقي غير مقصود
   اللوحات المنزلقة (.drawer) تقف خارج الشاشة بـ translateX،
   فتوسّع مستند الصفحات العامة. المرجع يخفي التجاوز على body فقط،
   وهو لا يكفي هنا لأن الصفحات العامة لا تستخدم app-shell. */
html{overflow-x:hidden;}
html,body{max-width:100%;}
.main-area,main{overflow-x:hidden;}
.overflow-x-auto{overflow-x:auto;}


/* ============================================================
   إضافات م0 — طبقة Laravel فوق نظام التصميم (CLAUDE.md قرار 6)
   ============================================================ */

/* «لم يُنفَّذ في هذه الدفعة» — عُمّم من .nav-leaf.is-soon ليشمل روابط
   الهيدر والفوتر العامَّين، فلا يبقى رابط ميت في أي قشرة (القاعدة 2). */
.is-soon{opacity:.62;}
.is-soon:hover{opacity:1;}

/* رابط تخطّي التنقّل — مخفي بصرياً حتى يصله التركيز بلوحة المفاتيح
   (معايير القبول §35: تنقّل بلوحة المفاتيح). بناء tailwind المقتطع
   لا يحوي sr-only، فيُعرّف هنا صراحةً. */
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;
  padding:10px 16px;border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--sky-600,#0284C7);color:#fff;font-weight:700;font-size:13px;
  box-shadow:var(--sh-card);}
.skip-link:focus{inset-inline-start:16px;outline:2px solid #fff;outline-offset:2px;}


/* ============================================================
   إضافات مكوّنات Blade المشتركة — م0
   كلها امتداد بلغة نظام التصميم نفسها (CLAUDE.md قرار 6): لا لون جديد
   ولا رمز جديد، فقط سدّ فجوات ظهرت حين صارت المكوّنات نماذج حقيقية
   تُرسَل إلى الخادم بدل عناصر عرض يبدّلها onclick.
   ============================================================ */

/* إدخال مخفي بصرياً وباقٍ في ترتيب التنقّل بلوحة المفاتيح.
   display:none كان سيُخرج مربّع الاختيار ومنطقة الرفع من التنقّل بالمفاتيح
   كلياً — مخالفة صريحة لمعايير القبول §35. */
.field-hidden{position:absolute;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* مربّع الاختيار: الشكل يتبع :checked في الإدخال الأصلي لا صنفاً يضعه JS.
   نسخة نظام التصميم عرضٌ فقط (span تبدّلها onclick ولا تُرسَل مع النموذج). */
.sup-check .field-hidden:checked + .cbx{background:var(--sky-500);border-color:var(--sky-500);}
.sup-check .field-hidden:checked + .cbx::after{content:'';width:9px;height:5px;
  border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px);}
.sup-check .field-hidden:focus-visible + .cbx{outline:2px solid var(--sky-500);outline-offset:2px;}
.sup-check .field-hidden:disabled + .cbx{opacity:.5;cursor:not-allowed;}
.sup-check:has(.field-hidden:checked){border-color:var(--sky-500);background:var(--sky-50);
  box-shadow:0 0 0 3px rgba(14,165,233,.1);}

/* بطاقة الاختيار الواحد: نفس المبدأ، بديلاً عن الصنف .on */
.radio-card:has(.field-hidden:checked){border-color:var(--sky-500);background:var(--sky-50);
  box-shadow:0 0 0 3px rgba(14,165,233,.1);}
.radio-card:has(.field-hidden:checked) .dot{border-color:var(--sky-500);}
.radio-card:has(.field-hidden:checked) .dot::after{content:'';width:9px;height:9px;
  border-radius:50%;background:var(--sky-500);}
.radio-card:has(.field-hidden:focus-visible){outline:2px solid var(--sky-500);outline-offset:2px;}

/* المفتاح: حلقة تركيز مرئية — .toggle-sw input شفاف بلا أثر بصري للتركيز */
.toggle-sw input:focus-visible + .slider{outline:2px solid var(--sky-500);outline-offset:2px;}

/* منطقة الرفع: التركيز بلوحة المفاتيح يجب أن يُرى كما يُرى المرور بالفأرة */
.dropzone:focus-within{border-color:var(--sky-500);background:var(--sky-50);}

/* حالة الخطأ على القائمة والنص الطويل — المرجع عرّفها لـ.form-input وحده */
.form-select.is-error,.form-textarea.is-error{border-color:var(--danger);}

/* تصحيح اتجاهي للخط الزمني — المرجع يضع .activity-item يميناً بلا مقابل LTR،
   على نظير ما فعله لـ.inst-row في القسم 4 أعلاه. */
[dir="ltr"] .activity-item{padding-right:0;padding-left:32px;}
[dir="ltr"] .activity-item::before{right:auto;left:9px;}
[dir="ltr"] .activity-item > .timeline-icon{right:auto !important;left:0;}

/* الطبقات الثابتة (نافذة · لوحة منزلقة · toast · شريط التنقّل) — إصلاح جذري.

   design-system.css سطر 129: body{animation:page-enter … both;}
   الإطار الأخير قيمته transform:none، لكن fill-mode:both يُبقي الخاصية
   «مملوءة» بعد انتهاء الحركة فتُحسب مصفوفة هوية لا none. وأي transform غير
   none يجعل العنصر كتلة احتواء لأبنائه position:fixed — فتُقاس .modal-overlay
   من أعلى المستند لا من الشاشة. أثر ذلك لا يُرى في صفحة قصيرة ويظهر فجأة في
   صفحة طويلة: تُفتح النافذة فيعتم الخلف ولا يظهر شيء، لأن الصندوق آلاف
   البكسلات فوق موضع القراءة.

   backwards يملأ الإطار الأول قبل بدء الحركة (وهو ما تحتاجه حركة الدخول
   فعلاً) ولا يملأ بعد انتهائها، فيعود transform إلى none. الحركة نفسها لم
   تتغيّر: نفس الإطارين ونفس المدة ونفس المنحنى. */
body{animation-fill-mode:backwards;}