/* ═══════════════════════════════════════════════════════════════════════════
   training-ui.css — لغة واحدة لصفحات التدريب العامة
   (/training · /training/course/* · /verify)

   الصفحات الثلاث كُتبت كلٌّ على حدة فانحرفت: ارتفاع السطر 1.7 هنا و1.8 هناك،
   والعنوان الأول بثلاثة مقاييس، والحشوات 52 و44 و38 و34 و26 و22 — أرقام لا
   تنتمي لأي سلّم. والنتيجة أن الصفحات تبدو من موقعين لا موقع واحد.

   المصدر هنا واحد: تعديل المقاس مرّة يسري على الثلاث، ولا مجال للانحراف
   مرّة أخرى. الصفحات تحتفظ بما يخصّها وحدها فقط.

   السلّم: مسافات 8/16/24/32/48/80 · مقاسات خطّ ستّة لا أكثر · ثلاثة أنصاف
   أقطار · وزنان للنصّ (400/700) ووزن واحد للعناوين (800).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* الهوية — نفس ألوان صفحة الوظائف */
  --navy:#1a2f8f; --cyan:#29b6e8;
  --bg:#0b1020; --surface:#141a2e; --surface-2:#1b2340;
  --tx:#e8ecf8; --mu:#98a2c4; --bd:#28314f;
  --ok:#3ecf8e; --warn:#e0a92e; --stop:#f0736a;

  /* مسافات */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:80px;

  /* مقاسات الخطّ */
  --fs-cap:12px;    /* شرائح ومعلومات ثانوية */
  --fs-lbl:13.5px;  /* تسميات الحقول */
  --fs-sm:14px;     /* نصّ ثانوي */
  --fs-bd:15px;     /* النصّ الأساسي */
  --fs-h3:17px;     /* عنوان بطاقة */
  --fs-h2:20px;     /* عنوان قسم */

  /* أنصاف الأقطار */
  --r-ctl:10px; --r-card:14px; --r-pill:999px;

  /* ارتفاع السطر: العربية تحتاج فسحة أكثر من اللاتينية عند نفس المقاس */
  --lh:1.75; --lh-tight:1.3;
}

html[data-theme="light"]{
  --bg:#f7f8fc; --surface:#ffffff; --surface-2:#eef1f9;
  --tx:#141a2e; --mu:#5a6486; --bd:#dde2f0;
}

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
  font-size:var(--fs-bd); line-height:var(--lh);
}

.wrap{ max-width:1120px; margin:0 auto; padding:0 var(--s3); width:100%; }
.wrap-narrow{ max-width:820px; }
.wrap-form{ max-width:620px; }

/* ── الترويسة والتذييل ─────────────────────────────────────────────────── */
header{ border-bottom:1px solid var(--bd); background:var(--surface); }
.nav{ display:flex; align-items:center; justify-content:space-between;
      gap:var(--s2); padding:var(--s2) 0; }
.nav img{ height:38px; display:block; }
.nav a{ color:var(--mu); text-decoration:none; font-size:var(--fs-sm); font-weight:700; }
.nav a:hover{ color:var(--tx); }
.navlinks{ display:flex; gap:var(--s3); align-items:center; }

footer{ border-top:1px solid var(--bd); padding:var(--s3) 0;
        color:var(--mu); font-size:var(--fs-cap); }
footer a{ color:var(--cyan); }

/* ── العناوين ──────────────────────────────────────────────────────────── */
h1{ margin:0 0 var(--s1); font-size:clamp(28px, 4vw, 40px); font-weight:800;
    line-height:var(--lh-tight); letter-spacing:-0.5px; text-wrap:balance; }
h1 span{ color:var(--cyan); }
h2{ margin:var(--s4) 0 var(--s2); font-size:var(--fs-h2); font-weight:800;
    line-height:var(--lh-tight); }
h3{ margin:0 0 var(--s1); font-size:var(--fs-h3); font-weight:700;
    line-height:var(--lh-tight); }

.lede{ margin:0; color:var(--mu); font-size:var(--fs-bd); max-width:60ch; }

/* الشعار البصري: نسبة الشريطين هي نسبة الشعار نفسه */
.rule{ height:3px; width:120px; border-radius:2px; margin:var(--s2) 0 var(--s3);
       background:linear-gradient(90deg, var(--navy) 0 62%, var(--cyan) 62% 100%); }

/* ── عناصر مشتركة ──────────────────────────────────────────────────────── */
.chip, .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--r-pill); border:1px solid var(--bd);
  background:transparent; color:var(--mu);
  font-size:var(--fs-cap); font-weight:700; font-family:inherit;
}
button.chip{ cursor:pointer; }
button.chip[aria-pressed="true"]{ background:var(--cyan); border-color:var(--cyan); color:#08101f; }

.card{ background:var(--surface); border:1px solid var(--bd);
       border-radius:var(--r-card); padding:var(--s3); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 28px; border:none; border-radius:var(--r-ctl);
  background:var(--navy); color:#fff; text-decoration:none;
  font-size:var(--fs-sm); font-weight:700; font-family:inherit; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.btn:hover:not(:disabled){ background:var(--cyan); color:#08101f; }
.btn:disabled{ opacity:.55; cursor:default; }
.btn-sm{ padding:9px 18px; font-size:var(--fs-lbl); }

.price{ font-size:var(--fs-h2); font-weight:800; font-variant-numeric:tabular-nums;
        line-height:var(--lh-tight); }
.price small{ font-size:var(--fs-cap); color:var(--mu); font-weight:700; }

/* ── الحقول ────────────────────────────────────────────────────────────── */
label{ display:flex; flex-direction:column; gap:6px;
       font-size:var(--fs-lbl); color:var(--mu); font-weight:700; }
label .req{ color:var(--cyan); }
input, select, textarea{
  width:100%; padding:11px 14px; border-radius:var(--r-ctl);
  border:1px solid var(--bd); background:var(--bg); color:var(--tx);
  font-size:var(--fs-bd); font-family:inherit; line-height:1.5;
}
textarea{ resize:vertical; }
:is(input, select, textarea, button, a):focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}

/* الفخّ يُخفى بالإزاحة لا بـdisplay:none — الآلي يتخطّى المخفي بالعرض */
.hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── رسائل الحالة ──────────────────────────────────────────────────────── */
.note{ display:none; margin-top:var(--s2); padding:14px var(--s2);
       border-radius:var(--r-ctl); font-size:var(--fs-sm); font-weight:700; }
.note.show{ display:block; }
.note.good{ background:rgba(62,207,142,.13); color:var(--ok); }
.note.bad{ background:rgba(240,115,106,.13); color:var(--stop); }
.note small{ display:block; margin-top:6px; font-size:var(--fs-cap);
             font-weight:600; color:var(--mu); line-height:var(--lh); }

.empty{ padding:var(--s6) var(--s3); text-align:center; color:var(--mu); }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}