/* =====================================================================
   components.css — مكوّنات مشتركة (يُحمَّل بعد base.css)
   حاليًا: زرّ المظهر (§٣٫٧). بقيّة المكوّنات ما زالت inline-مع-متغيّرات
   داخل ملفات الـJS (استخراجها إلى أصناف = الجزء المتبقّي من §٢).
   ===================================================================== */
/* زرّ أيقونيّ بحت: لا نصّ فيه، فالحشو متناظر والشكل قرصيّ.
   اسمه المتاح من aria-label (تضبطه theme.js) لأن الأيقونة aria-hidden. */
.sf-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sf-surface);
  border:1px solid var(--sf-border);
  color:var(--sf-muted);
  font-family:var(--sf-font);font-size:13px;font-weight:700;
  cursor:pointer;
  padding:9px;min-width:38px;min-height:38px;border-radius:var(--sf-r-pill);
  transition:background .15s,color .15s,border-color .15s;
}
.sf-theme-toggle:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:2px;}
.sf-theme-toggle:hover{background:var(--sf-surface-warm);}
/* الأيقونة تُمركَز بالمرونة لا بالسطر: ووردبريس يستبدل الرمز بـ<img class="emoji">
   ويمنحها vertical-align:-1.4px وهوامش جانبية، فتنزل عن المركز ~1.8px. */
.sf-theme-toggle .sf-theme-toggle__icon{font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;}
.sf-theme-toggle .sf-theme-toggle__icon img{display:block;vertical-align:middle;margin:0;}

/* =====================================================================
   المكوّنات المشتركة (§٣) — أزرار · شرائح · بطاقة · حاوية · عناوين
   ===================================================================== */
.sf-container{max-width:1200px;margin-inline:auto;padding-inline:28px;}

/* الأزرار (§٣٫١) */
.sf-btn{font-family:var(--sf-font);cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;text-decoration:none;transition:filter .15s ease,background .15s ease;}
.sf-btn--primary{background:var(--sf-gold-grad);color:#fff;font-weight:800;font-size:17px;padding:16px 30px;border-radius:14px;box-shadow:var(--sf-sh-gold);}
.sf-btn--primary:hover{filter:brightness(1.06);}
.sf-btn--sm{font-size:16px;padding:15px 28px;border-radius:13px;}
.sf-btn--dark{background:var(--sf-ink-surface);color:var(--sf-on-dark);font-size:15px;padding:11px 22px;border-radius:12px;box-shadow:0 4px 12px rgba(61,47,24,.2);}
.sf-btn--ghost{background:var(--sf-surface);color:var(--sf-ink);border:1px solid var(--sf-border);font-size:17px;padding:16px 26px;border-radius:14px;}
.sf-btn--ghost:hover{background:var(--sf-surface-warm);}
.sf-btn--quiet{background:var(--sf-bg);color:var(--sf-ink-3);border:1px solid var(--sf-border);font-size:15px;padding:13px 22px;border-radius:12px;}
.sf-btn--text{background:transparent;color:var(--sf-ink-2);font-size:15px;padding:10px 8px;}
.sf-btn--outline-on-dark{background:transparent;color:var(--sf-on-dark);border:1px solid var(--sf-border);font-size:17px;padding:16px 30px;border-radius:14px;}

/* الشرائح (§٣٫٢) */
.sf-chip{font-family:var(--sf-font);cursor:pointer;border:1px solid var(--sf-border);background:var(--sf-surface);color:var(--sf-ink-3);border-radius:11px;font-weight:700;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.sf-chip--type{padding:9px 15px;font-size:14px;}
.sf-chip--count{padding:13px 10px;font-size:15px;font-weight:800;}
.sf-chip--demo{padding:10px 15px;font-size:14px;color:var(--sf-muted);}
.sf-chip.is-on{background:var(--sf-gold-grad);border-color:var(--sf-gold);color:#fff;}

/* البطاقة (§٣٫٣) */
.sf-card{background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:var(--sf-r-xl);box-shadow:var(--sf-sh-card);padding:26px;}

/* عناوين مشتركة */
.sf-eyebrow{font-size:14px;font-weight:800;color:var(--sf-gold);letter-spacing:1px;margin-bottom:12px;}
.sf-h2{font-size:40px;font-weight:900;margin:0;letter-spacing:-.5px;}
.sf-lede{font-size:18px;line-height:1.7;color:var(--sf-ink-2);font-weight:500;}
.sf-isq{background:var(--sf-gold-grad);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}

/* =====================================================================
   صفّ الخيار التفاعلي (§٣٫٤) — مشترك بين الجلسة والتقييم
   الحالات عبر أصناف: is-correct / is-wrong (الافتراضي بلا صنف حالة)
   ===================================================================== */
.sf-orow{display:flex;align-items:center;gap:13px;width:100%;border-radius:14px;border:1.5px solid var(--sf-border);background:var(--sf-surface-tint);cursor:pointer;color:var(--sf-ink);text-align:left;font-family:var(--sf-font);transition:all .15s;}
.sf-orow.is-answered{cursor:default;}
.sf-orow__badge{display:flex;align-items:center;justify-content:center;flex:none;background:var(--sf-gold);color:#140E04;font-weight:800;} /* نصّ داكن ثابت على الذهبي (مِتوسّط في الوضعين): يجتاز AA في كليهما (الأبيض كان ~3.2–4.0)؛ يصلح للأخضر أيضًا */
.sf-orow__text{flex:1;text-align:left;font-weight:600;}
.sf-orow__mark{display:flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--sf-border-line);background:transparent;color:transparent;font-size:12px;font-weight:800;}
.sf-orow.is-correct{border-color:var(--sf-ok);background:var(--sf-ok-bg);}
.sf-orow.is-correct .sf-orow__badge{background:var(--sf-ok);}
.sf-orow.is-correct .sf-orow__mark{border-color:var(--sf-ok);background:var(--sf-ok);color:#fff;}
.sf-orow.is-wrong{border-color:var(--sf-err);background:var(--sf-err-bg);}
.sf-orow.is-wrong .sf-orow__badge{background:var(--sf-err);color:#fff;} /* الأحمر داكن → نصّ أبيض (يجتاز 7–8:1؛ الداكن يفشل عليه) */
.sf-orow.is-wrong .sf-orow__mark{border-color:var(--sf-err);background:var(--sf-err);color:#fff;}
/* أحجام/أشكال حسب الواجهة */
.sf-orow--exam{padding:16px 18px;}
.sf-orow--exam .sf-orow__badge{width:32px;height:32px;border-radius:9px;font-size:15px;}
.sf-orow--exam .sf-orow__text{font-size:18px;}
.sf-orow--exam-sm{padding:14px 15px;gap:12px;}
.sf-orow--exam-sm .sf-orow__badge{width:30px;height:30px;border-radius:8px;font-size:14px;}
.sf-orow--exam-sm .sf-orow__text{font-size:16px;}
.sf-orow--exam-sm .sf-orow__mark{width:20px;height:20px;font-size:11px;}
.sf-orow--assess{padding:13px 14px;gap:11px;}
.sf-orow--assess .sf-orow__badge{width:26px;height:26px;border-radius:50%;font-size:13px;}
.sf-orow--assess .sf-orow__text{font-size:16px;font-weight:500;}
.sf-orow--assess.is-correct .sf-orow__text,.sf-orow--assess.is-wrong .sf-orow__text{font-weight:600;}
.sf-orow--assess .sf-orow__mark{width:19px;height:19px;font-size:11px;}

/* =====================================================================
   تظليل كلمات القطعة (highlight.js)
   ضغطتان تُظلّلان الكلمة · ضغطة على المظلَّلة تُزيلها.
   ===================================================================== */
.sf-hl-text .sf-w{cursor:pointer;border-radius:3px;transition:background .12s;}
/* لمسة عند المرور تُلمّح أن الكلمة قابلة للتظليل (لا تظهر في وضع القراءة). */
.sf-hl-text:not(.is-readonly) .sf-w:hover{background:var(--sf-surface-warm);}
.sf-hl-text.is-readonly .sf-w{cursor:default;}
/* الكلمة المظلَّلة: عريضة بتسطير ذهبي (لا خلفية) — تبقى مقروءة في الوضعين. */
.sf-hl-text .sf-w.is-hl{
  font-weight:800;color:var(--sf-ink);
  border-bottom:2px solid var(--sf-gold-2);
  background:transparent;
}
.sf-hl-text:not(.is-readonly) .sf-w.is-hl:hover{background:var(--sf-surface-amber);}

/* =====================================================================
   مشغّل تسجيلات الاستماع (audio-player.js — 1.80.0)
   حالاته أصناف يضبطها الملفّ دون إعادة رسم: is-playing · is-waiting · is-ended · is-error.
   التقدّم متغيّر --sf-ap-pct يُحدَّث من أحداث الوسيط.
   ===================================================================== */
.sf-ap{--sf-ap-pct:0%;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--sf-ink-surface);color:var(--sf-on-dark);border-radius:16px;padding:14px 18px;
  box-shadow:0 4px 14px rgba(61,47,24,.25);font-family:var(--sf-font);}
.sf-ap--train-sm{padding:12px 14px;gap:11px;border-radius:14px;}

.sf-ap__play{position:relative;flex:none;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--sf-gold-grad);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(168,116,26,.5);-webkit-tap-highlight-color:transparent;}
.sf-ap--train-sm .sf-ap__play{width:44px;height:44px;}
.sf-ap__play:focus-visible,.sf-ap__tool:focus-visible,.sf-ap__rate:focus-visible{outline:2px solid var(--sf-gold-3);outline-offset:3px;}
.sf-ap__play[disabled]{cursor:not-allowed;opacity:.45;box-shadow:none;}
.sf-ap__i{width:22px;height:22px;fill:currentColor;display:none;}
/* الأيقونة المعروضة تتبع الحالة. زرّ التشغيل مُزاح 1px بصريًّا: المثلّث يبدو منحرفًا وهو في المركز الهندسيّ. */
.sf-ap__i--play{display:block;transform:translateX(1px);}
.sf-ap.is-playing .sf-ap__i--play,.sf-ap.is-ended .sf-ap__i--play{display:none;}
.sf-ap.is-playing .sf-ap__i--pause{display:block;}
.sf-ap.is-ended:not(.is-playing) .sf-ap__i--replay{display:block;}
.sf-ap__spin{display:none;position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--sf-gold-3);animation:sf-spin .8s linear infinite;}
.sf-ap.is-waiting .sf-ap__spin{display:block;}

/* الموجة تتحرّك مع الصوت الفعليّ فقط (is-playing)، لا مع مؤقّت */
.sf-ap__wave{flex:none;display:flex;gap:3px;align-items:center;height:30px;}
.sf-ap__wave i{display:block;width:3px;border-radius:3px;background:var(--sf-gold-2);opacity:.45;transform-origin:center;}
.sf-ap.is-playing .sf-ap__wave i{opacity:1;animation:sf-bars .7s ease-in-out infinite;}

.sf-ap__track{flex:1;min-width:150px;display:flex;flex-direction:column;gap:7px;}
.sf-ap__times{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;
  color:var(--sf-on-dark-2);font-variant-numeric:tabular-nums;}
.sf-ap--train .sf-ap__times,.sf-ap--train-sm .sf-ap__times{font-family:var(--sf-font-mono,monospace);}
.sf-ap__label{font-family:var(--sf-font);opacity:.85;}
.sf-ap--train-sm .sf-ap__label{display:none;}

/* الشريط: تعبئة بعرض --sf-ap-pct، وفوقها range شفّاف يلتقط السحب واللمس */
.sf-ap__bar{position:relative;height:7px;border-radius:999px;background:rgba(255,255,255,.14);}
.sf-ap__fill{position:absolute;inset-block:0;inset-inline-start:0;width:var(--sf-ap-pct);border-radius:inherit;
  background:linear-gradient(90deg,var(--sf-gold-2),var(--sf-gold-3));}
.sf-ap__seek{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);width:100%;height:28px;margin:0;
  background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:none;}
.sf-ap__seek::-webkit-slider-runnable-track{height:28px;background:transparent;}
.sf-ap__seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:6px;border-radius:50%;
  background:#fff;border:3px solid var(--sf-gold-2);box-shadow:0 1px 4px rgba(0,0,0,.35);}
.sf-ap__seek::-moz-range-track{height:28px;background:transparent;}
.sf-ap__seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--sf-gold-2);}
.sf-ap__seek:focus-visible{outline:2px solid var(--sf-gold-3);outline-offset:2px;border-radius:999px;}

.sf-ap__tools{flex:none;display:flex;align-items:center;gap:6px;}
.sf-ap__tool,.sf-ap__rate{height:36px;min-width:36px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:var(--sf-on-dark);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:2px;font-family:var(--sf-font);font-size:12.5px;font-weight:800;padding:0 8px;
  -webkit-tap-highlight-color:transparent;}
.sf-ap__tool svg{width:17px;height:17px;fill:currentColor;}
.sf-ap__tool small{font-size:10px;font-weight:800;}
.sf-ap__rate{font-variant-numeric:tabular-nums;min-width:48px;}
@media (hover:hover){ .sf-ap__tool:hover,.sf-ap__rate:hover{background:rgba(255,255,255,.14);} }

.sf-ap__msg{flex:1 0 100%;font-size:12.5px;font-weight:700;color:var(--sf-gold-3);}
.sf-ap.is-error .sf-ap__msg{color:#FFB4A2;}

/* لا تسجيل بعد: بطاقة صادقة بدل مشغّل يتظاهر */
.sf-ap--none{background:var(--sf-surface-soft);color:var(--sf-ink-2);border:1px dashed var(--sf-border);
  box-shadow:none;align-items:flex-start;font-size:14px;line-height:1.7;}
.sf-ap--none b{display:block;color:var(--sf-ink);font-weight:800;}
.sf-ap__none-ic{flex:none;width:36px;height:36px;border-radius:50%;background:var(--sf-surface-warm);
  color:var(--sf-gold-deep);display:flex;align-items:center;justify-content:center;font-size:17px;}
.sf-ap__none-sub{display:block;font-size:12.5px;color:var(--sf-muted);font-weight:600;}

/* الجوال: الأدوات تنزل صفًّا تحت الشريط، وأهداف اللمس ≥ 44px */
@media (max-width:560px){
  .sf-ap{padding:12px 14px;gap:10px 12px;}
  .sf-ap__wave{display:none;}
  .sf-ap__track{min-width:0;}
  .sf-ap__tools{flex:1 0 100%;justify-content:center;gap:10px;}
  .sf-ap__tool,.sf-ap__rate{height:44px;min-width:52px;}
}

/* =====================================================================
   نافذة التعليمات وزرّ (!) — مشتركة بين التقييم (1.87.1) والتدريب (1.88.3).
   نُقلت من assessment.css بلا تغيير في القواعد: الصفحتان تستعملان البنية نفسها،
   ونسخُها مرّتين يعني إصلاحًا في موضعين عند أي تعديل.
   ===================================================================== */
/* علامة التعجّب — مفتاح التعليمات */
.sf-info{width:30px;height:30px;flex:none;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--sf-gold-3);background:transparent;color:var(--sf-gold-3);
  font-family:var(--sf-font);font-size:17px;font-weight:900;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.sf-info:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:2px;}
@media (hover:hover){ .sf-info:hover{background:var(--sf-gold-3);color:var(--sf-ink-surface);} }

/* النافذة */
.sf-modal{position:fixed;inset:0;z-index:60;background:rgba(10,7,3,.62);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;}
.sf-modal__box{width:100%;max-width:620px;max-height:88vh;overflow:auto;
  background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;}
.sf-modal__head{position:sticky;top:0;background:var(--sf-ink-surface);color:var(--sf-on-dark);
  padding:16px 22px;display:flex;align-items:center;gap:12px;}
.sf-modal__head h2{flex:1;margin:0;font-size:17px;font-weight:800;}
.sf-modal__x{width:34px;height:34px;flex:none;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--sf-on-dark);
  font-size:14px;font-family:var(--sf-font);}
.sf-modal__body{padding:20px 22px;display:flex;flex-direction:column;gap:14px;}
.sf-modal__foot{padding:0 22px 20px;}
.sf-modal__ok{width:100%;padding:14px;border-radius:12px;border:none;cursor:pointer;
  background:var(--sf-gold-grad);color:#fff;font-family:var(--sf-font);font-size:15px;font-weight:800;}
.sf-rules{list-style:none;margin:0;padding:0;}
.sf-rules li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;}
.sf-rules li + li{border-top:1px solid var(--sf-border-soft);}
.sf-rule__n{width:26px;height:26px;flex:none;border-radius:7px;border:1px solid var(--sf-border);
  background:var(--sf-surface-warm);color:var(--sf-gold);font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;}
.sf-rule__t{font-size:15px;line-height:1.65;color:var(--sf-ink-2);font-weight:500;}
.sf-note--time{background:var(--sf-surface-amber);border:1px solid var(--sf-border-soft);
  border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.6;color:var(--sf-ink-3);font-weight:600;}

/* نافذة التأكيد (confirm.js — الدفعة (ب)): صندوقٌ صغير بزرّين متجاورين. الأوّل «البقاء»
   بلون الفعل الأساسيّ لأنّه الافتراضيّ، والثاني محايد، وأحمر حين يُضيّع شيئًا (danger). */
.sf-modal--confirm{z-index:80;}
.sf-modal--confirm .sf-modal__box{max-width:440px;}
.sf-confirm__text{margin:0;font-size:15px;line-height:1.85;font-weight:600;color:var(--sf-ink-2);}
.sf-confirm__foot{display:flex;gap:10px;}
.sf-confirm__foot .sf-modal__ok{flex:1;}
.sf-confirm__leave{flex:1;padding:14px;border-radius:12px;cursor:pointer;background:var(--sf-surface);
  border:1px solid var(--sf-border);color:var(--sf-ink-2);font-family:var(--sf-font);font-size:15px;font-weight:800;}
.sf-confirm__leave:hover{background:var(--sf-surface-warm);}
.sf-confirm__leave.is-danger{color:var(--sf-err-ink);border-color:var(--sf-err-ink);}
.sf-confirm__foot button:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:2px;}

@media (max-width:640px){
  .sf-modal{padding:0;align-items:stretch;}
  .sf-modal__box{max-width:none;max-height:100vh;border-radius:0;border:none;}
  /* التأكيد يبقى صندوقًا وسط الشاشة: سؤالٌ من سطرين لا يستحقّ شاشةً كاملة. */
  .sf-modal--confirm{padding:16px;align-items:center;}
  .sf-modal--confirm .sf-modal__box{max-height:none;border-radius:16px;border:1px solid var(--sf-border);}
}

/* ══ بطاقة تبويب الشرح (1.94.3) — stepface.js: tabCardHtml ══
   الحالة صنفٌ واحد `.is-open` على البطاقة: الحدّ والخلفيّة والأيقونة والسهم
   والارتفاع كلّها تتبعه، فالتبديل لا يحتاج إعادة رسمٍ ولا أنماطًا سطريّة.

   الارتفاع بـgrid لا بـmax-height: الأخيرة تحتاج رقمًا مخمَّنًا — إن قصر قُصّ
   النصّ الطويل، وإن طال بدا الإغلاق متأخّرًا لأنّ الانتقال يقطع مسافةً فارغة.
   و`0fr ⇄ 1fr` يقيسه المتصفّح بنفسه مهما طال المحتوى. */
.sf-tab{border:1px solid var(--sf-border);border-radius:13px;background:var(--tab-bg,var(--sf-surface-2));
  overflow:hidden;transition:border-color .2s ease,background-color .2s ease;}
.sf-tab.is-open{border-color:var(--sf-gold-2);background:var(--sf-surface-tint);}
.sf-tab__head{width:100%;display:flex;align-items:center;gap:11px;padding:13px 14px;background:transparent;
  border:none;cursor:pointer;color:var(--sf-ink);text-align:start;font-family:inherit;}
.sf-tab__ico{width:30px;height:30px;border-radius:9px;background:var(--sf-cream);color:var(--sf-gold-deep);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;
  transition:background .2s ease,color .2s ease;}
.sf-tab.is-open .sf-tab__ico{background:var(--sf-grad);color:#fff;}
.sf-tab__lbl{flex:1;text-align:start;font-size:15px;font-weight:700;}
.sf-tab__caret{color:var(--sf-muted-2);font-size:13px;flex:none;transform:rotate(-90deg);
  transition:transform .26s cubic-bezier(.3,.8,.4,1);}
.sf-tab.is-open .sf-tab__caret{transform:rotate(0deg);}

/* الارتفاع يُقاس ويُضبط من الـJS (انظر animateTab في stepface.js).

   جُرّبت حيلة `grid-template-rows: 0fr ⇄ 1fr` أوّلًا — وهي الأنيقة في هذه
   الحالة — فسقطت في هذا الـDOM من الطرفين، مقيسًا بلا انتقال:
     • مع `min-height:0` على العنصر الداخليّ: `1fr` يُحسب **0px** فلا يفتح.
     • بدونها: `0fr` يُحسب **156px** (الحدّ الأدنى التلقائيّ للعنصر) فلا يغلق.
   الارتفاع بالبكسل لا يعتمد على شيءٍ من ذلك: يُقاس قبل كل حركة فلا رقم مخمَّن،
   وبعد انتهاء الفتح يصير `auto` كي ينمو الصندوق مع أيّ تغيّر في محتواه. */
.sf-tab__wrap{height:0;overflow:hidden;visibility:hidden;
  transition:height .26s cubic-bezier(.3,.8,.4,1),visibility 0s linear .26s;}
.sf-tab.is-open .sf-tab__wrap{visibility:visible;transition-delay:0s;}
.sf-tab.is-open .sf-tab__wrap:not([style*="height"]){height:auto;}
.sf-tab__pad{padding:4px 14px 15px;}
.sf-tab__txt{font-size:15px;line-height:1.75;color:var(--sf-ink-2);font-weight:500;
  border-top:1px dashed var(--sf-border);padding-top:11px;white-space:pre-line;}

/* من يطلب تقليل الحركة يرى التبديل فوريًّا — لا حركة ولا تأخير في الإظهار. */
@media (prefers-reduced-motion:reduce){
  .sf-tab,.sf-tab__ico,.sf-tab__caret,.sf-tab__wrap{transition:none;}
  .sf-tab__wrap{transition-delay:0s;}
  .sf-tab.is-open .sf-tab__wrap{height:auto;}
}

/* ══ زرّ «تبويبات السؤال» والورقة السفليّة (1.97.5) — stepface.js: viewMobile ══
   الفتح كان متحرّكًا والإغلاق قفزة: `render()` يمحو الورقة من الـDOM فورًا.
   الآن للخروج مقطعه، وJS يؤجّل تحديث الحالة حتى ينتهي (مع مهلة احتياطيّة). */
.sf-sheet__box{animation:sf-sheet .25s cubic-bezier(.2,.8,.3,1);}
.sf-sheet__bd{animation:sf-fade-in .25s ease;}
.sf-sheet.is-closing .sf-sheet__box{animation:sf-sheet-out .22s cubic-bezier(.4,0,.8,.4) forwards;}
.sf-sheet.is-closing .sf-sheet__bd{animation:sf-fade-out .22s ease forwards;}
@keyframes sf-sheet-out{from{transform:translateY(0);}to{transform:translateY(100%);}}
@keyframes sf-fade-out{from{opacity:1;}to{opacity:0;}}

/* الزرّ نفسه: استجابةٌ للضغط، وسهمٌ ينقلب مع حالة الورقة.
   الانقلاب بالـtransform لا بتبديل الرمز: التبديل يقع مع إعادة الرسم فيقفز. */
.sf-tabs-toggle{transition:background-color .18s ease,border-color .18s ease,transform .12s ease;}
.sf-tabs-toggle:hover{border-color:var(--sf-gold-2);}
.sf-tabs-toggle:active{transform:scale(.985);}
.sf-tabs-toggle__caret{display:inline-block;transition:transform .22s cubic-bezier(.3,.8,.4,1);}
.sf-tabs-toggle[aria-expanded="true"] .sf-tabs-toggle__caret{transform:rotate(180deg);}

@media (prefers-reduced-motion:reduce){
  .sf-sheet__box,.sf-sheet__bd,.sf-sheet.is-closing .sf-sheet__box,.sf-sheet.is-closing .sf-sheet__bd{animation:none;}
  .sf-tabs-toggle,.sf-tabs-toggle__caret{transition:none;}
}

/* ══ «قريبًا» في تبويب فيديو الشرح (1.97.10) — stepface.js: videoSoon ══
   بدل مستطيلٍ بزرّ ▶ واسم ملفّ يوحيان بمقطعٍ لا وجود له. الألوان رموزٌ، فالداكن من dark.css. */
.sf-tab__soon{flex:none;font-size:11px;font-weight:700;line-height:1;padding:4px 9px;border-radius:999px;
  background:var(--sf-cream);color:var(--sf-gold-deep);border:1px solid var(--sf-border-soft);}
.sf-vsoon{border:1px dashed var(--sf-border);border-radius:11px;background:var(--sf-surface-warm);padding:14px 16px;text-align:center;}
.sf-vsoon__t{font-size:14.5px;font-weight:800;color:var(--sf-gold-deep);}
.sf-vsoon__p{margin:6px 0 0;font-size:13px;line-height:1.8;color:var(--sf-ink-2);font-weight:500;}
/* فيديو الشرح — واجهة خفيفة (المهمّة ④): صورة المقطع 16:9 وفوقها زرّ تشغيل، والنقر يضع iframe مكانها
   بالمقاس نفسه، فلا تقفز البطاقة. والصورة الفاشلة تُخفى فتبقى خلفيّة السطح والزرّ. */
.sf-yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  background:var(--sf-surface-warm);border:1px solid var(--sf-border);}
.sf-yt__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.sf-yt__img.is-broken{display:none;}
.sf-yt__play{position:absolute;inset:0;margin:auto;width:68px;height:48px;padding:0;border:none;background:transparent;
  color:#CC0000;cursor:pointer;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));transition:transform .15s,color .15s;}
.sf-yt__play svg{width:100%;height:100%;display:block;}
.sf-yt__play:hover{transform:scale(1.06);color:#FF0000;}
.sf-yt__play:focus-visible{outline:3px solid var(--sf-gold-2);outline-offset:4px;border-radius:12px;}
.sf-yt__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
/* تكبير فيديو الشرح (الصفّ 107) — stepface.js: bigVideo/smallVideo. المقطع نفسه يصير fixed في الوسط،
   فلا يُعاد تحميل الـiframe. 70% من عرض المكتب، و90% على اللوحيّ، ولا يتجاوز ارتفاع الشاشة في الحالتين. */
.sf-vbig{margin-top:9px;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 12px;border-radius:10px;border:1px solid var(--sf-border);background:var(--sf-surface-2);
  color:var(--sf-gold-deep);font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;}
.sf-vbig:hover{border-color:var(--sf-gold-2);}
.sf-vbig:focus-visible,.sf-vbox__x:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:2px;}
.sf-vbig span{font-size:16px;line-height:1;}
.sf-vbox__bg,.sf-vbox__x{display:none;}
.sf-vbox.is-big .sf-vbox__bg{display:block;position:fixed;inset:0;z-index:80;background:rgba(10,7,3,.78);cursor:zoom-out;}
.sf-vbox.is-big .sf-yt{position:fixed;z-index:81;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(90vw,calc((100vh - 120px) * 16 / 9));border-radius:14px;border-color:rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.55);}
@media (min-width:1100px){ .sf-vbox.is-big .sf-yt{width:min(70vw,calc((100vh - 120px) * 16 / 9));} }
.sf-vbox.is-big .sf-vbox__x{display:flex;align-items:center;justify-content:center;position:fixed;z-index:82;
  top:18px;inset-inline-end:18px;width:42px;height:42px;border-radius:12px;cursor:pointer;font-size:16px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.12);color:#fff;font-family:inherit;}
.sf-vbox.is-big .sf-vbox__x:hover{background:rgba(255,255,255,.22);}
html.sf-vbig-lock{overflow:hidden;}
/* أمثلة السؤال (البند 108) — stepface.js: exampleBody. مثالٌ واحد، والنقر يعرض التالي. الصندوق زرٌّ حين
   تكون الأمثلة أكثر من واحد، فيصله Tab ويُضغط بـEnter، ويبقى نصًّا عاديًّا حين يكون مثالًا واحدًا. */
.sf-ex{display:flex;flex-direction:column;gap:6px;width:100%;text-align:start;font-family:inherit;
  border-top:1px dashed var(--sf-border);padding:11px 0 2px;background:none;border-inline:0;border-bottom:0;color:inherit;}
.sf-ex--many{cursor:pointer;border-radius:0;}
.sf-ex--many:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:3px;border-radius:8px;}
/* الإنجليزيّ يُحاذى يمينًا مع العربيّ تحته: محاذاته يسارًا تشقّ الصندوق عمودين لا رابط بينهما. */
.sf-ex__en{font-size:15.5px;line-height:1.7;font-weight:600;color:var(--sf-ink);text-align:right;}
.sf-ex__ar{font-size:14.5px;line-height:1.8;font-weight:500;color:var(--sf-ink-2);}
.sf-ex__foot{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:12.5px;font-weight:800;}
.sf-ex__n{color:var(--sf-muted);font-variant-numeric:tabular-nums;}
.sf-ex__more{margin-inline-start:auto;color:var(--sf-gold-deep);}
@media (hover:hover){ .sf-ex--many:hover .sf-ex__more{text-decoration:underline;text-underline-offset:3px;} }
/* اسم الدرس المرتبط (الصفّ 77) تحت المقطع أو تحت «قريبًا». */
.sf-vlesson{margin-top:10px;font-size:13.5px;line-height:1.8;color:var(--sf-ink-2);font-weight:600;}
.sf-vlesson span{color:var(--sf-muted);font-weight:700;}
.sf-vlesson a{color:var(--sf-gold-deep);font-weight:800;text-decoration:underline;text-underline-offset:3px;}

/* ══ زرّ Google في لوحة الزائر بالتدريب (1.97.12) — stepface.js: googleSlot ══
   منذ 1.97.13 دائرةٌ في صفّ الزرّين لا زرٌّ كامل تحت فاصل «أو» (طلب المستخدم). الحاوية
   مربّع 44px — ارتفاع الزرّين — فلا يقفز الصفّ حين يصل الـiframe (دائرة GIS الكبيرة 40px
   تتوسّطه). رسالة الخطأ سطرٌ كامل في آخر الصفّ برمز --sf-err-ink (تباينه AA في المظهرين). */
.sf-gicon{flex:none;width:44px;height:44px;align-self:center;display:flex;align-items:center;justify-content:center;}
.sf-gmsg{flex-basis:100%;margin:0;font-size:12.5px;font-weight:700;color:var(--sf-err-ink);text-align:center;}
.sf-gmsg:empty{display:none;}

/* =====================================================================
   زرّ الرجوع (الصفّ 96) — في الموضع نفسه من كلّ صفحة: أوّل رأسها من جهة البداية،
   أي أعلى اليمين. يرجع إلى الصفحة الأعلى منطقيًّا لا إلى سجلّ المتصفّح (قرار المستخدم):
   من جاء من رابطٍ خارجيّ أو من بحثٍ لا سجلّ له في الموقع، والزرّ يجب أن يقوده إلى مكانٍ فيه.
   السهم SVG يشير يمينًا في كلّ سياق — `dir="ltr"` في رأس التدريب لا يقلبه كما يقلب «›».
   على الجوال تُخفى التسمية ويبقى القرص، والاسم المتاح «رجوع إلى …» في aria-label.
   ===================================================================== */
.sf-back{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;
  min-height:38px;padding:0 14px 0 12px;border-radius:var(--sf-r-pill);text-decoration:none;
  background:var(--sf-surface);border:1px solid var(--sf-border);color:var(--sf-ink-2);
  font-family:var(--sf-font);font-size:13px;font-weight:800;line-height:1;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;}
.sf-back:visited{color:var(--sf-ink-2);}
.sf-back:hover{background:var(--sf-surface-warm);border-color:var(--sf-gold-2);color:var(--sf-ink);}
.sf-back:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:2px;}
.sf-back svg{width:16px;height:16px;flex:none;display:block;}
/* على شريطٍ داكن في الوضعين (شريط أسئلة التقييم ورأسه). */
.sf-back--on-dark,.sf-back--on-dark:visited{background:transparent;border-color:#6B5A38;color:var(--sf-on-dark);}
.sf-back--on-dark:hover{background:rgba(255,255,255,.08);border-color:var(--sf-gold-2);color:#fff;}
@media (max-width:560px){
  .sf-back{width:38px;padding:0;}
  .sf-back__t{display:none;}
}

/* ══ ملخّص التدريب (البند 89) — vocab-summary.js. انتقل من صفحة الحساب إلى صفحة التدريب (?view=summary).
   كلّ جلسة طيّةٌ، وكلماتها بطريقة مذكّرات اللانغو. ══ */
.sf-voc-lead{margin:-6px 0 14px;font-size:.86rem;line-height:1.8;color:var(--sf-muted);}
.sf-voc-empty{margin:0;padding:14px 0;font-size:.9rem;color:var(--sf-muted);text-align:center;}
.sf-voc-retry{margin-inline-start:6px;font:inherit;font-weight:800;color:var(--sf-gold-deep);
  background:none;border:none;text-decoration:underline;cursor:pointer;padding:0;}
.sf-voc-sess{border:1px solid var(--sf-border);border-radius:14px;background:var(--sf-surface-soft);}
.sf-voc-sess + .sf-voc-sess{margin-top:10px;}
.sf-voc-sess summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px;
  cursor:pointer;list-style:none;font-size:.9rem;font-weight:800;color:var(--sf-ink-2);}
.sf-voc-sess summary::-webkit-details-marker{display:none;}
.sf-voc-sess summary::before{content:"◂";color:var(--sf-gold-2);font-size:.8rem;transition:transform .15s;}
.sf-voc-sess[open] summary::before{transform:rotate(-90deg);}
.sf-voc-sess summary:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:-2px;border-radius:14px;}
.sf-voc-date{font-weight:600;color:var(--sf-muted);font-size:.84rem;}
.sf-voc-n{margin-inline-start:auto;font-size:.8rem;font-weight:800;color:var(--sf-gold-deep);
  background:var(--sf-surface-warm);border:1px solid var(--sf-border);border-radius:999px;padding:3px 10px;}
.sf-voc-list{list-style:none;margin:0;padding:0 16px 6px;}
.sf-voc-word{padding:13px 0;border-top:1px solid var(--sf-border);}
.sf-voc-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.sf-voc-lemma{font-size:1.05rem;font-weight:900;color:var(--sf-ink);}
.sf-voc-mean{font-size:.95rem;font-weight:700;color:var(--sf-ink-2);}
.sf-voc-form{margin-top:5px;font-size:.87rem;color:var(--sf-gold-deep);font-weight:700;}
/* الإنجليزيّ يُحاذى يمينًا مع الكلمة ومعناها: محاذاته يسارًا تشقّ البطاقة عمودين لا رابط بينهما. */
.sf-voc-ctx{margin:7px 0 0;font-size:.88rem;line-height:1.7;color:var(--sf-muted);text-align:right;}
.sf-voc-hit{background:var(--sf-surface-warm);color:var(--sf-gold-deep);font-weight:800;
  border-radius:4px;padding:0 3px;}
.sf-voc-ex{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.sf-voc-ex li{display:flex;flex-direction:column;gap:2px;padding-inline-start:12px;
  border-inline-start:3px solid var(--sf-gold-2);}
.sf-voc-en{font-size:.89rem;line-height:1.6;color:var(--sf-ink);text-align:right;}
.sf-voc-ar{font-size:.87rem;line-height:1.7;color:var(--sf-ink-2);}
/* زرّ «ملخّص التدريب» تحت بطاقة البداية — يظهر بعد عشر جلسات مكتملة (stepface.js: summaryEntry). */
.sf-voc-entry{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--sf-ink);
  background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:16px;padding:16px 18px;
  box-shadow:var(--sf-shadow);transition:border-color .18s ease,background-color .18s ease;}
.sf-voc-entry:hover{border-color:var(--sf-gold-2);background:var(--sf-surface-tint);}
.sf-voc-entry:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:3px;}
.sf-voc-entry__ico{width:40px;height:40px;flex:none;border-radius:12px;background:var(--sf-gold-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;}
.sf-voc-entry__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.sf-voc-entry__t b{font-size:15.5px;font-weight:900;color:var(--sf-gold-deep);}
.sf-voc-entry__t span{font-size:13px;line-height:1.6;color:var(--sf-ink-2);font-weight:600;}
.sf-voc-entry__go{flex:none;font-size:18px;font-weight:800;color:var(--sf-gold-deep);}