/* ══════════════════════════════════════════════════════════════════════
   iTestNova SIM — نظام التصميم
   ══════════════════════════════════════════════════════════════════════
   ملف واحد، بلا أدوات بناء، يعمل من file:// بلا شبكة.

   الطبقات بالترتيب:
     ١. الخطوط          ٧. البطاقات           ١٣. الفهرس (hero + مكتبة)
     ٢. الرموز (tokens)  ٨. المدخلات والمزالج   ١٤. التذييل
     ٣. الأساس          ٩. التبويبات          ١٥. الاختبار
     ٤. التخطيط         ١٠. المسرح والمنحنيات  ١٦. لوحة الهاتف
     ٥. الشريط العلوي    ١١. القراءات          ١٧. أدوات ووصولية
     ٦. الأزرار         ١٢. المعادلات والتقييم  ١٨. الطباعة
                                             ١٩. المختبر والأنشطة
     (١٩ تسبق ١٨ في الملف: قواعد الطباعة تبقى آخر ما فيه.)

   قاعدة لونية ملزمة (CLAUDE.md §5): ألوان القشرة (السماوي/البنفسجي)
   لا تُستخدم إطلاقاً على عنصر يحمل معنى فيزيائياً. المنحنيات والقراءات
   والمزالج ورقائق الإعدادات تبقى على الثلاثية: عددي/متجه/تسارع.
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ ١. الخطوط ═══════════════
   Cairo مضمّن محلياً في assets/fonts/ — لا CDN ولا شبكة، فيعمل من file://
   كما يشترط CLAUDE.md §2.4. ملف متغيّر الوزن (400–900) في نسختين:
   العربية واللاتينية، و unicode-range يجعل المتصفح يحمّل ما يحتاجه فقط.
   المجموع ٦٤ كيلوبايت. **لا تستبدلهما برابط Google Fonts.** */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: 'Cairo', 'Tajawal', 'Dubai', 'Segoe UI', system-ui, -apple-system,
          'Noto Sans Arabic', Tahoma, sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Mono', ui-monospace, Consolas, 'SF Mono', monospace;

  /* مقياس الخطوط — نسبة ثابتة، لا أرقام عشوائية */
  --fs-hero:  clamp(30px, 5.4vw, 54px);
  --fs-h1:    clamp(22px, 3vw, 30px);
  --fs-h2:    clamp(18px, 2.2vw, 23px);
  --fs-h3:    17px;
  --fs-lg:    16px;
  --fs-body:  15px;
  --fs-sm:    13.5px;
  --fs-xs:    12.5px;
  --fs-xxs:   11.5px;

  /* مقياس المسافات — 4px كوحدة أساس */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* الحواف */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 26px; --r-full: 999px;

  /* الحركة */
  --ease: cubic-bezier(.22, .68, .36, 1);
  --t-fast: .13s; --t-mid: .22s; --t-slow: .38s;

  /* ارتفاع موحّد لكل عناصر التحكّم */
  --ctl-h: 42px;
  --ctl-h-sm: 34px;
  --nav-h: 66px;
}

/* ═══════════════ ٢. الرموز — الوضع الداكن هو الأساس ═══════════════ */

:root {
  color-scheme: dark;

  /* الأسطح */
  --bg:        #071426;
  --bg-2:      #04101f;
  --surface:   #0d2137;
  --surface-2: #122a44;
  --surface-3: #18344f;
  --border:    #1e3c5c;
  --border-2:  #2a5077;

  /* النصوص */
  --text-1: #e9f2fb;
  --text-2: #9ab2cb;
  --text-3: #6a87a4;

  /* القشرة — هوية iTestNova SIM */
  --primary:    #16b8f3;
  --primary-2:  #38bdf8;
  --primary-3:  #0a91c6;
  --primary-ink: #04121d;          /* نص فوق الأزرار السماوية */
  --accent:     #7c5cfc;
  --accent-2:   #9b82ff;

  --success: #22c55e;
  --danger:  #f4526b;
  --warn:    #fbbf24;
  --warn-ink: #fbbf24;   /* نصّ سطر القفل: --warn على تِنته لا يُقرأ في الفاتح */

  /* الترميز الفيزيائي — ثابت المعنى عبر كل الدروس (CLAUDE.md §5).
     مضبوط ليبقى مميَّزاً عن سماوي القشرة على الخلفية الداكنة. */
  --scalar: #4f93f5;   /* الكميات العددية: المسافة، السرعة العددية */
  --vector: #ff8a3d;   /* الكميات المتجهة: الإزاحة، السرعة المتجهة */
  --accel:  #3ddc84;   /* التسارع */
  --car:    #fb5f7d;
  --exam:   #9b82ff;

  /* لون النص فوق خلفية ممتلئة بأحد ألوان الترميز الفيزيائي
     (الرقاقة المختارة، رقم المعادلة المُبرزة).
     في الداكن الألوان فاتحة فيُقرأ النص الغامق، وفي الفاتح تنعكس القاعدة.
     **لا تكتب #04121d مباشرة — استخدم هذا الرمز.** */
  --chip-ink: #04121d;

  /* أسماء مُبقاة للتوافق مع الكود القائم */
  --ink:       var(--text-1);
  --muted:     var(--text-2);
  --line:      var(--border);
  --grid:      #14304c;
  --axis:      #47709a;
  --ok:        var(--success);
  --err:       var(--danger);
  --brand:     var(--primary);
  --brand-1:   var(--primary-2);
  --brand-2:   var(--primary-3);
  --grad:      linear-gradient(135deg, var(--primary-2) 0%, var(--primary) 52%, var(--primary-3) 100%);
  --grad-soft: linear-gradient(135deg,
                 color-mix(in srgb, var(--primary) 18%, transparent),
                 color-mix(in srgb, var(--accent) 16%, transparent));
  --brand-sh:  0 8px 24px -10px color-mix(in srgb, var(--primary) 62%, transparent);

  /* الظلال — على الداكن نعتمد العمق لا السواد وحده */
  --sh-1: 0 1px 2px rgba(0,0,0,.34);
  --sh-2: 0 2px 6px rgba(0,0,0,.30), 0 10px 26px -16px rgba(0,0,0,.72);
  --sh-3: 0 4px 12px rgba(0,0,0,.32), 0 22px 48px -24px rgba(0,0,0,.85);
  --sh-4: 0 10px 30px rgba(0,0,0,.38), 0 40px 80px -36px rgba(0,0,0,.9);
  --shadow: var(--sh-2);

  /* توهّج مدروس — حول العناصر المهمة فقط */
  --glow:  0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent),
           0 8px 32px -12px color-mix(in srgb, var(--primary) 45%, transparent);

  /* حلقة التركيز — موحّدة في كل المشروع */
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);

  /* إظهار/إخفاء زر اللغة — انظر §١٧ */
  --lang-btn: none;
}

/* ── الوضع الفاتح ── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #eef3f9;
  --bg-2:      #e3ebf4;
  --surface:   #ffffff;
  --surface-2: #f4f8fc;
  --surface-3: #e9f0f8;
  --border:    #d6e1ee;
  --border-2:  #bccddf;

  --text-1: #0b1b2c;
  --text-2: #4e6a86;
  --text-3: #7b93ac;

  --primary:    #0a8fc4;
  --primary-2:  #16b8f3;
  --primary-3:  #0a6f99;
  --primary-ink: #ffffff;
  --accent:     #6b46f0;
  --accent-2:   #8b6bff;

  --success: #15a05c;
  --danger:  #dc2b45;
  --warn:    #c98a06;
  --warn-ink: #8a5a06;

  /* أعمق من نظائرها الداكنة: تُقرأ أفضل على الأبيض، ويصبح النص الأبيض
     فوقها ممتلئةً مقروءاً (الرقاقة المختارة كانت بنصّ غامق غير مقروء). */
  --scalar: #1a63cf;
  --vector: #c9530a;
  --accel:  #0a7d4c;
  --car:    #e11d48;
  --exam:   #5b37e0;

  --chip-ink: #ffffff;

  --grid: #e4ecf5;
  --axis: #93a9c0;

  --sh-1: 0 1px 2px rgba(13,38,66,.07);
  --sh-2: 0 1px 3px rgba(13,38,66,.07), 0 10px 26px -18px rgba(13,38,66,.30);
  --sh-3: 0 2px 8px rgba(13,38,66,.08), 0 22px 48px -26px rgba(13,38,66,.36);
  --sh-4: 0 8px 26px rgba(13,38,66,.10), 0 40px 80px -40px rgba(13,38,66,.42);

  --glow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
          0 8px 28px -14px color-mix(in srgb, var(--primary) 38%, transparent);
  --ring: 0 0 0 2px #fff, 0 0 0 4px var(--primary);
}

/* الجهاز الفاتح افتراضياً ولم يختر المستخدم شيئاً */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eef3f9; --bg-2: #e3ebf4;
    --surface: #ffffff; --surface-2: #f4f8fc; --surface-3: #e9f0f8;
    --border: #d6e1ee; --border-2: #bccddf;
    --text-1: #0b1b2c; --text-2: #4e6a86; --text-3: #7b93ac;
    --primary: #0a8fc4; --primary-2: #16b8f3; --primary-3: #0a6f99;
    --primary-ink: #ffffff;
    --accent: #6b46f0; --accent-2: #8b6bff;
    --success: #15a05c; --danger: #dc2b45; --warn: #c98a06; --warn-ink: #8a5a06;
    --scalar: #1a63cf; --vector: #c9530a; --accel: #0a7d4c;
    --car: #e11d48; --exam: #5b37e0;
    --chip-ink: #ffffff;
    --grid: #e4ecf5; --axis: #93a9c0;
    --sh-1: 0 1px 2px rgba(13,38,66,.07);
    --sh-2: 0 1px 3px rgba(13,38,66,.07), 0 10px 26px -18px rgba(13,38,66,.30);
    --sh-3: 0 2px 8px rgba(13,38,66,.08), 0 22px 48px -26px rgba(13,38,66,.36);
    --sh-4: 0 8px 26px rgba(13,38,66,.10), 0 40px 80px -40px rgba(13,38,66,.42);
    --glow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
            0 8px 28px -14px color-mix(in srgb, var(--primary) 38%, transparent);
    --ring: 0 0 0 2px #fff, 0 0 0 4px var(--primary);
  }
}

/* ═══════════════ ٣. الأساس ═══════════════ */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;      /* لا تمرير أفقي للصفحة مهما حدث */
}

/* هالة الخلفية — خفيفة جداً ومثبّتة، لا تُشتّت عن المحاكاة */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(880px 520px at 84% -12%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 70%),
    radial-gradient(760px 460px at 8% -4%,  color-mix(in srgb, var(--accent)  13%, transparent), transparent 70%),
    radial-gradient(900px 620px at 50% 104%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 72%);
}

h1, h2, h3, h4 { font-weight: 800; line-height: 1.3; letter-spacing: -.2px; margin: 0; }
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-xs);
}

::selection { background: color-mix(in srgb, var(--primary) 34%, transparent); }

/* شريط تمرير رقيق يناسب الثيم */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); }
*::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════ ٤. التخطيط ═══════════════ */

.container { max-width: 1280px; margin: 0 auto; padding-inline: var(--s-5); }
@media (max-width: 560px) { .container { padding-inline: var(--s-4); } }

.wrap { max-width: 1280px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-16); }
@media (max-width: 560px) { .wrap { padding: var(--s-4) var(--s-4) var(--s-12); } }

.screen[hidden] { display: none !important; }

/* تخطيط شاشة المحاكاة: المسرح أولاً، ولوحة التحكّم جانباً */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(330px, 1fr);
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 1020px) { .layout { grid-template-columns: 1fr; } }

.row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.sep { height: 1px; background: var(--border); margin: var(--s-4) 0; border: 0; }
.head-spacer { flex: 1 1 auto; }

/* عنوان قسم موحّد */
.sec-head { text-align: center; max-width: 660px; margin: 0 auto var(--s-8); }
.sec-head h2 { font-size: var(--fs-h1); margin-bottom: var(--s-3); }
.sec-head p { color: var(--text-2); font-size: var(--fs-lg); }

/* ═══════════════ ٥. الشريط العلوي ═══════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-inline: var(--s-5);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: var(--sh-2);
}
.nav-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* قائمة التنقّل */
.nav-links { display: flex; align-items: center; gap: var(--s-1); }
.nav-link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--text-1); background: var(--surface-2); }
.nav-link[aria-current="page"] { color: var(--primary); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--s-3);
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}
.nav-tools { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }

/* زر القائمة على الهاتف.
   يحمل الصنف .btn أيضاً، و.btn تُعرَّف بعد هذه الكتلة بالتخصيص نفسه
   فتغلب display عليها — لذلك نرفع التخصيص بـ .nav قبلها. */
.nav .nav-burger { display: none; }
@media (max-width: 940px) {
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
    padding: var(--s-4) var(--s-5) var(--s-5);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-3);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease), visibility var(--t-mid);
  }
  .nav.is-open .nav-links { transform: none; opacity: 1; visibility: visible; }
  .nav-link { padding: var(--s-3) var(--s-4); font-size: var(--fs-lg); }
  .nav-link[aria-current="page"]::after { inset-inline: auto var(--s-4); bottom: auto; top: 50%;
    width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); }
  .nav .nav-burger { display: inline-flex; }
}
/* أضيق من ذلك: الزر الرئيسي يصبح أيقونة مربّعة بدل زر عريض فارغ */
@media (max-width: 560px) {
  .nav { padding-inline: var(--s-4); }
  .nav-cta-text { display: none; }
  .nav-tools .btn-primary { width: var(--ctl-h); padding: 0; }
}

/* ═══════════════ ٦. الأزرار ═══════════════
   خمسة أنواع فقط: primary · secondary · ghost · icon · danger
   كلها بارتفاع واحد وحواف واحدة وحالات كاملة. */

.btn {
  --btn-h: var(--ctl-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  padding: 0 var(--s-4);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { background: var(--surface-3); border-color: var(--border-2); }
.btn:active { transform: translateY(1px); }

/* primary — التدرّج السماوي، للقشرة فقط */
.btn-primary {
  color: var(--primary-ink);
  background: var(--grad);
  border-color: transparent;
  box-shadow: var(--brand-sh);
}
.btn-primary:hover {
  background: var(--grad);
  border-color: transparent;
  filter: brightness(1.08) saturate(1.04);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--primary) 72%, transparent);
}
.btn-primary:active { transform: translateY(0); filter: brightness(.97); }

/* secondary — محدَّد بلون الهوية بلا تعبئة */
.btn-secondary {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--primary) 17%, transparent);
  border-color: color-mix(in srgb, var(--primary) 52%, transparent);
  color: var(--primary-2);
}

/* ghost — بلا خلفية ولا إطار */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  font-weight: 600;
}
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--text-1); }

/* danger / إعادة */
.btn-danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border-color: color-mix(in srgb, var(--danger) 48%, transparent);
}

/* icon — مربّع، للأيقونة وحدها */
.btn-icon {
  width: var(--ctl-h);
  padding: 0;
  color: var(--text-2);
}
.btn-icon:hover { color: var(--text-1); }
.btn-icon svg { width: 18px; height: 18px; }

.btn-sm { --btn-h: var(--ctl-h-sm); font-size: var(--fs-xs); padding-inline: var(--s-3); }
.btn-sm.btn-icon { width: var(--ctl-h-sm); }
.btn-lg { --btn-h: 52px; font-size: var(--fs-lg); padding-inline: var(--s-6); border-radius: var(--r-md); }
.btn-block { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}
.btn:disabled:hover {
  background: var(--surface-2);
  border-color: var(--border);
  filter: none;
  transform: none;
  box-shadow: none;
}

/* زرّ قيد الإرسال: دوّارة داخله، والنصّ والأيقونة يُخفيان ولا يُحذفان
   فيبقى عرضه كما هو — لا قفز في التخطيط. يُعطَّل لمنع الضغط المزدوج،
   لكنه لا يخفت كالمعطَّل: هو يعمل لا متوقّف. لون الدوّارة --spin-c
   (يضعه SIM2 من لون النصّ)، واحتياطه لون نصّ النوع. */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: progress;
}
.btn.is-loading:disabled { opacity: 1; }
.btn-primary.is-loading:disabled,
.btn-primary.is-loading:disabled:hover { background: var(--grad); border-color: transparent; box-shadow: var(--brand-sh); filter: none; }
.btn.is-loading:disabled { filter: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--spin-c, var(--text-1));
  border-inline-end-color: transparent;
  animation: btn-spin .7s linear infinite;
}
.btn-primary.is-loading::after { border-color: var(--spin-c, var(--primary-ink)); border-inline-end-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation-duration: 2s; } }
.btn-primary:disabled, .btn-primary:disabled:hover {
  background: var(--grad); border-color: transparent; box-shadow: none; filter: grayscale(.35);
}

/* ═══════════════ الشارات والرقائق ═══════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-xxs);
  font-weight: 700;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badge-mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
.badge-primary {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
}
.badge-accent {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.badge-success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 13%, transparent);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
}
.badge-muted { opacity: .8; }
.badge-dot::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* رقائق الإعدادات — تحمل معنى فيزيائياً فتأخذ لون --accent الموضعي للشاشة */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 0 var(--s-3);
  min-height: var(--ctl-h-sm);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.chip:hover { color: var(--text-1); border-color: var(--border-2); background: var(--surface-3); }
.chip[aria-pressed="true"] {
  color: var(--chip-ink);
  background: var(--accent-c, var(--scalar));
  border-color: var(--accent-c, var(--scalar));
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent-c, var(--scalar)) 65%, transparent);
}
.chip:disabled { opacity: .55; cursor: not-allowed; }
/* .chip:hover يطابق المعطَّل في Chrome، فيلمع قرصٌ لا يستجيب — نُلغيه
   كما في .btn:disabled:hover */
.chip:disabled:hover { color: var(--text-2); background: var(--surface-2); border-color: var(--border); }
/* المختارة مقفلةً: تبقى ممتلئة ليُعرف الإعداد الجاري، بلا هالة «حيّة» */
.chip[aria-pressed="true"]:disabled { opacity: .85; box-shadow: none; }

/* رقائق الفلترة في الفهرس — قشرة، فتأخذ لون الهوية */
.fchip[aria-pressed="true"] {
  color: var(--primary-ink);
  background: var(--grad);
  border-color: transparent;
  box-shadow: var(--brand-sh);
}

/* ═══════════════ ٧. البطاقات ═══════════════ */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--s-4);
}
/* خط ضوء رقيق أعلى البطاقة — يعطي عمقاً بلا زخرفة */
.card::before {
  content: "";
  position: absolute;
  inset-inline: var(--s-5);
  top: 0;
  height: 1px;
  background: linear-gradient(to left, transparent,
              color-mix(in srgb, var(--primary) 34%, transparent), transparent);
  pointer-events: none;
}
.card + .card { margin-top: var(--s-4); }
.card-flush { padding: 0; overflow: hidden; }

.card h2 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-2);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.card h2::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--accent-c, var(--primary));
  flex: none;
}
.card h2 svg { width: 15px; height: 15px; color: var(--text-3); }

/* نص إرشادي */
.hint {
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin-top: var(--s-3);
}
.hint b { color: var(--text-1); font-weight: 700; }
.hint-accent {
  border-inline-start: 3px solid var(--accent-c, var(--primary));
  background: color-mix(in srgb, var(--accent-c, var(--primary)) 7%, var(--surface-2));
}

/* ═══════════════ ٨. المدخلات والمزالج ═══════════════ */

/* حقل نص/بحث */
.field { position: relative; display: flex; align-items: center; }
.field svg {
  position: absolute;
  inset-inline-start: var(--s-3);
  width: 17px; height: 17px;
  color: var(--text-3);
  pointer-events: none;
}
.input {
  width: 100%;
  min-height: var(--ctl-h);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 var(--s-3);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field .input { padding-inline-start: var(--s-10); }
.input::placeholder { color: var(--text-3); }
/* حقل رمز الدخول: الرمز نفسه أحاديّ متباعد ليُقرأ من الورقة المطبوعة،
   أمّا التلميح العربي فبخطّ النصّ وبلا تباعد ومن اليمين — التباعد كان
   يفصل حروفه («الرمز الذي زوّدك به معلّمك»). */
.input-code::placeholder { font-family: var(--font); letter-spacing: 0; text-transform: none; }
.input-code:placeholder-shown { direction: rtl !important; }
/* نموذج قصير داخل بطاقة (دخول الاختبار): حقلٌ تحت عنوانه، لا صندوقٌ
   داخل صندوق — بطاقات .ctrl للمزالج في لوحة التحكّم وحدها. */
.ex-form .ctrl { background: none; border: 0; padding: 0; }
.ex-form .ctrl + .ctrl { margin-top: var(--s-4); }
.input:hover { border-color: var(--border-2); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

/* بطاقة مزلاج — لوحة التحكّم لا تكون حقولاً متراصّة */
.ctrl {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
}
.ctrl + .ctrl { margin-top: var(--s-2); }
.ctrl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.ctrl-head .name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.5;
}
.ctrl-head .val {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-c, var(--text-1));
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* المزلاج — يأخذ لون الشاشة الفيزيائي لا لون الهوية */
input[type="range"] {
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
  direction: ltr;      /* المحاور والمقاييس تبقى LTR دائماً */
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-c, var(--scalar));
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,.45),
              0 0 0 1px color-mix(in srgb, var(--accent-c, var(--scalar)) 40%, transparent);
  margin-top: -8px;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.14); }
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,.45),
              0 0 0 6px color-mix(in srgb, var(--accent-c, var(--scalar)) 22%, transparent);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--border);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--surface);
  background: var(--accent-c, var(--scalar));
}
input[type="range"]:disabled { cursor: not-allowed; }
input[type="range"]:disabled::-webkit-slider-thumb { background: var(--text-3); }
input[type="range"]:disabled::-moz-range-thumb { background: var(--text-3); }

/* مفتاح تبديل */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 40px; height: 23px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--border);
  position: relative;
  flex: none;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
/* المقبض بموضع فيزيائي (right/left) يتبع اتجاه الصفحة (<html dir>) لا
   اتجاه الحاوية: خلايا الجدول direction: ltr للأرقام، فكان المقبض في
   كشف الطلاب يبدأ يساراً ثم يُزاح ١٧px أخرى يساراً فيخرج من المسار. */
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 2px;
  left: auto;
  width: 17px;
  border-radius: 50%;
  background: var(--text-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
.switch input:checked + .switch-track { background: var(--primary); border-color: transparent; }
.switch input:checked + .switch-track::after { transform: translateX(-17px); background: #fff; }
:root[dir="ltr"] .switch-track::after { right: auto; left: 2px; }
:root[dir="ltr"] .switch input:checked + .switch-track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--ring); }

/* شريط مقسَّم (segmented) */
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 2px;
}
.seg button {
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  padding: 6px var(--s-3);
  min-height: 30px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.seg button:hover { color: var(--text-1); }
.seg button[aria-pressed="true"] {
  color: var(--text-1);
  background: var(--surface-3);
  box-shadow: var(--sh-1);
}

/* مزالج مقفلة أثناء التشغيل — تُفتح بـ«إعادة».
   ⚠ التعتيم على الأجزاء لا على البطاقة: opacity على .ctrl كان يُعتِم
   **القراءة الرقمية** أيضاً (2.0:1 في الوضع الفاتح)، والقفل لا يعني
   الإخفاء — الطالب يجب أن يقرأ القيم التي تعمل بها التجربة الآن.
   والصنف يُقبل على البطاقة نفسها (.ctrl.is-locked) أو على حاويتها. */
.is-locked .ctrl, .ctrl.is-locked { opacity: 1; }
.is-locked .ctrl-head .name, .ctrl.is-locked .ctrl-head .name { color: var(--text-2); }
.is-locked input[type="range"], .ctrl.is-locked input[type="range"] { cursor: not-allowed; opacity: .55; }
.lock-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-xxs);
  line-height: 1.7;
  color: var(--warn-ink);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
}

/* ═══════════════ ٩. التبويبات ═══════════════ */

.tabs {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-5) 0;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.tab svg { width: 16px; height: 16px; flex: none; }
.tab:hover { color: var(--text-1); background: var(--surface-2); }
.tab[aria-selected="true"] {
  color: var(--tab-color, var(--primary));
  border-bottom-color: var(--tab-color, var(--primary));
  background: linear-gradient(to bottom, transparent,
              color-mix(in srgb, var(--tab-color, var(--primary)) 12%, transparent));
}
@media (max-width: 560px) {
  .tabs { padding-inline: var(--s-3); position: static; }
  .tab { padding: var(--s-3) var(--s-3); font-size: var(--fs-xs); }
}

/* شريط عنوان الدرس أسفل الـ navbar */
.lesson-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.lesson-bar h1 { font-size: var(--fs-h2); }
.lesson-bar .sub { font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }
.lesson-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctl-h); height: var(--ctl-h);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  flex: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lesson-back:hover { color: var(--text-1); background: var(--surface-3); }
.lesson-back svg { width: 18px; height: 18px; }
/* السهم يشير لجهة الرجوع الصحيحة في RTL */
[dir="rtl"] .lesson-back svg { transform: scaleX(-1); }
/* مسار التنقّل فوق عنوان الدرس: «المحاكاة › الحركة» ثم العنوان نفسه (h1) —
   الموضوع يفتح المكتبة مصفّاةً به (?topic=)، لا صفحة مواضيع مستقلّة */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--s-1);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-3);
  margin-bottom: 2px;
}
.crumbs a {
  color: var(--text-2); text-decoration: none;
  border-radius: var(--r-xs); padding: 1px 2px;
  transition: color var(--t-fast) var(--ease);
}
.crumbs a:hover { color: var(--primary); }
.crumbs a:focus-visible { outline: none; box-shadow: var(--ring); }
.crumbs .crumb-sep { display: inline-flex; opacity: .7; }
.crumbs .crumb-sep svg { width: 13px; height: 13px; }
[dir="ltr"] .crumbs .crumb-sep svg { transform: scaleX(-1); }
@media (max-width: 560px) {
  .lesson-bar { padding: var(--s-4) var(--s-4) var(--s-3); gap: var(--s-2); }
  .lesson-bar h1 { font-size: var(--fs-h3); }
  /* شارة الصفحات تنزل سطراً وحدها على الضيق — نخفيها بدل تركها معلّقة */
  .lesson-bar > .badge { display: none; }
}

/* ═══════════════ ١٠. المسرح والمنحنيات ═══════════════ */

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 62%),
    var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
  touch-action: none;
}
/* شبكة خفيفة تعطي إحساس «مختبر» بلا تشويش على المحاكاة */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--grid) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--grid) 70%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(115% 95% at 50% 45%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(115% 95% at 50% 45%, #000 55%, transparent 100%);
}
.stage canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.stage.stage-wide { aspect-ratio: 16 / 7; }
@media (max-width: 560px) {
  .stage { aspect-ratio: 4 / 3; }
  .stage.stage-wide { aspect-ratio: 16 / 9; }
}

.plot-box {
  position: relative;
  width: 100%;
  height: 220px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
}
.plot-box canvas { display: block; width: 100%; height: 100%; }

.plot-tip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  box-shadow: var(--sh-3);
  padding: var(--s-2) var(--s-3);
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  line-height: 1.7;
  direction: ltr;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.plot-tip .tip-t { color: var(--text-2); font-weight: 700; }
.plot-tip .tip-row { display: block; font-weight: 700; }

.plots { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.plot-item { position: relative; }
.plot-title {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
  margin-bottom: var(--s-2);
}
/* العلامة الملوّنة ابنٌ مباشر وحده (> i): المحدِّد الواسع «.plot-title i»
   كان يطال رموز المعادلة داخل العنوان فيرسم «x» و«t» شرطتين ملوّنتين. */
.plot-title > i {
  width: 14px; height: 3px; border-radius: 2px;
  background: var(--pc, var(--scalar)); flex: none;
}
.plot-title > span { min-width: 0; }
.plots.single .plot-box { height: 300px; }

/* ── العرض المتزامن: المسرح والرسم الحيّ في صفٍّ واحد ──
   الطالب يجب أن يرى السبب (الحركة) والنتيجة (المنحنى) في لحظة واحدة؛ وقبل
   هذا كان الرسم يبدأ تحت المسرح بـ569px فيخرج عن الشاشة أثناء التشغيل.

   البطاقتان القائمتان تصيران عمودَي شبكة — لا بطاقة جديدة ولا فاصل ولا
   حدّ، والفجوة وحدها تفصل. ولا حجم بالـ JS إطلاقاً: `.stage` تُبقي
   aspect-ratio وfitCanvas تقيس عند كل رسم، وresize موصولٌ أصلاً.
   ⚠ عرضٌ يتذبذب بكسلٍ بين إطارين يقلب حارس canvas.width فيُعاد حجز
     الذاكرة كل إطار — فالقياس بـ grid (minmax/fr) لا بنسبةٍ من حاوية
     يعتمد عرضها على اللوحة.

   الحدّ الأدنى المقروء للرسم 290×200 (منطقة البيانات 228×152 بعد هوامش
   plot.js)، ولذلك العتبة 1240px: تحتها يبقى العمودان متراكبين كما كانا.
   والنطاق 880–1020px لوحٌ لوحته سفلية فالعمود كامل العرض — وقسمته أفضل
   من الحاسوب (الرسم 380px). */
@media (min-width: 1240px), (min-width: 880px) and (max-width: 1020px) {
  .sync {
    display: grid;
    grid-template-columns: minmax(340px, 1.25fr) minmax(334px, 1fr);
    gap: var(--s-4);
    align-items: start;
  }
  .sync > .card + .card { margin-top: 0; }
  /* 16/7 في عمودٍ نصفيّ يصير شريطاً رقيقاً (158px) — 16/9 يعطي 205px */
  .sync .stage.stage-wide { aspect-ratio: 16 / 9; }
  .sync .plots.single .plot-box { height: 220px; }
  /* رقائق اختيار المنحنى: سطرٌ واحد يُمرَّر أفقياً بدل أربعة أسطر
     (118px) كانت تُبعد المنحنى عن الحركة التي يُرافقها. */
  .sync .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sync .chips::-webkit-scrollbar { display: none; }
  .sync .chips > .chip { flex: none; }
  /* «الكل» (ثلاثة منحنيات) تعود إلى العرض الكامل المتراكب كما كانت —
     الحالة نفسها من #s3-gmodes، بلا مبدّل ثانٍ. */
  .sync:has(.plots:not(.single)) { display: block; }
  .sync:has(.plots:not(.single)) > .card + .card { margin-top: var(--s-4); }
  .sync:has(.plots:not(.single)) .stage.stage-wide { aspect-ratio: 16 / 7; }
  .sync:has(.plots:not(.single)) .chips { flex-wrap: wrap; overflow-x: visible; }
}

/* ═══ حالة التشغيل: الإعداد خلاصةٌ، والمسرح والرسم يتقاسمان الفراغ ═══
   الصنف .is-running على .layout من المُحدِّد نفسه الذي يقفل المزالج
   (lock = playing || tNow > 0) — لا حالة ثانية ولا مؤقّت ثانٍ. المزالج
   مقفلة أصلاً في هذه الحالة، فتُخفى ويبقى اسمها وقيمتها خلاصةً للقراءة.

   ⚠ الهندسة داخل الاستعلام وحدها: `.layout.is-running` (0,2,0) يتغلّب على
     `.layout` (0,1,0) في استعلام الهاتف، فينشأ عمودٌ وهميّ 260px واللوحة
     fixed — وينكمش المسرح من 363px إلى 87px على شاشة 430px.
   ⚠ ولا transition على الشبكة: عرضٌ يتغيّر كل إطار يقلب حارس canvas.width
     فيُعاد حجز ذاكرة المسرح والرسم ستين مرّة في الثانية — وهو ما يُمنع في
     تعليق .sync أعلاه. والتغيير يقع مع نقرة «تشغيل» فيُقرأ استجابةً لها،
     ولا يتزحزح شيء فوق الطيّة (الصفحة تنمو نزولاً فقط).
   ⚠ رقائق الأمثلة تبقى عاملة وظاهرة: هي التي تُلغي التجربة وتبدأ غيرها
     (بقرارٍ مكتوب في lesson.js)، وهي أيضاً ما يخبر الطالب أيّ تجربة تجري.
   ⚠ 260px لا 210: نموذج «تحقّق من فهمك» في اللوحة ينكسر أربعة أسطر تحت
     256px، وثمن الفارق 25px من عرض المسرح وحده. */
@media (min-width: 1021px) {
  .layout.is-running { grid-template-columns: minmax(0, 1fr) 260px; }
  .layout.is-running .sync { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* سطرٌ واحد يُمرَّر أفقياً بدل أربعة أسطر في عمودٍ ضيّق — كما في .sync */
  .layout.is-running .panel .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .layout.is-running .panel .chips::-webkit-scrollbar { display: none; }
  .layout.is-running .panel .chips > .chip { flex: none; }
}

/* الخلاصة نفسها في اللوحة السفلية على الهاتف: القيم تبقى والمزالج المقفلة
   تُخفى، فلا يمرّ الطالب على ثلاثة مزالج ميتة ليصل إلى القراءات.
   ⚠ على الأبناء وحدهم (input · .chips · .setup-only): الحاويات
     `#s3-sliders` و`#s3-circ` و`#s3-phases` محروسة بسمة hidden — ولو
     لمسناها لظهرت قيمُ إعدادٍ آخر (الصفوف تُكتب لأحاديّ الطور وحده). */
.layout.is-running .panel .ctrl input[type="range"],
.layout.is-running .setup-only { display: none; }
.layout.is-running .panel .ctrl {
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--s-2) 0;
  margin: 0;
}
/* --border على سطح البطاقة في الداكن تباينه 1.39:1 — يكاد لا يُرى */
.layout.is-running .panel .ctrl + .ctrl { border-top: 1px solid var(--border-2); margin-top: 0; }
/* الاسم سطراً والقيمة تحته: جنباً إلى جنب في 228px كان اسمٌ طويل
   («سرعة السيارة (أ)») يلتفّ ثلاثة أسطر بجوار قيمةٍ لا تلتفّ. */
.layout.is-running .panel .ctrl-head { display: block; margin-bottom: 0; }
.layout.is-running .panel .ctrl-head .name { display: block; }
/* end لا right: الصفحة RTL فـ right لا تفعل شيئاً، ولو عاد زرّ اللغة
   لاختلف التخطيط بين اللغتين. */
.layout.is-running .panel .ctrl-head .val { display: block; margin-top: 2px; text-align: end; }

/* الهاتف: متراكب كما هو، ورسمٌ مُصغَّر يبقى حيّاً تحت المسرح مباشرة.
   ويُخفى تلميح «مرّر المؤشر» — لا مؤشر على الهاتف، وكان يأكل 81px من
   المسافة التي تجعل الرسم والمسرح معاً في الشاشة. المفتاح اللوني يبقى:
   فيه المعنى الفيزيائي. */
@media (max-width: 700px) {
  .sync .plot-box,
  .sync .plots.single .plot-box { height: 150px; }
  .sync .hint:not(.hint-accent) { display: none; }
}

.legend {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-2);
  margin-top: var(--s-3);
}
.legend > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend > span > i,
.legend > i {
  display: inline-block; width: 16px; height: 3px;
  border-radius: 2px; flex: none;
}

/* شريط أدوات التشغيل — أزرار أيقونة + نص */
.playbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
  padding: var(--s-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.playbar .badge { margin-inline-start: auto; }
/* شارة الساعة تنزل سطراً كاملاً تحت 340px وحدها: عند 420px كانت تُضيف
   ~48px إلى شريط التشغيل على الهاتف فتُبعد الرسم الحيّ عن المسرح. */
@media (max-width: 339px) {
  .playbar .badge { margin-inline-start: 0; width: 100%; justify-content: center; }
}

/* ═══════════════ ١١. القراءات (Measurement cards) ═══════════════ */

.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-2);
}
.ro {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  overflow: hidden;
}
.ro::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--ro-color, var(--axis));
}
.ro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to left,
    color-mix(in srgb, var(--ro-color, var(--axis)) 9%, transparent), transparent 62%);
}
.ro > * { position: relative; }
.ro .k {
  font-size: var(--fs-xxs);
  color: var(--text-2);
  font-weight: 600;
  display: block;
  line-height: 1.5;
}
.ro .v {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--ro-color, var(--text-1));
  direction: ltr;
  display: block;
  unicode-bidi: isolate;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.ro .u { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.ro .note { font-size: var(--fs-xxs); color: var(--text-3); display: block; line-height: 1.55; }

/* ── عينٌ على بطاقة القراءات (ui.js › initReveal) ──
   محجوبة عند كل تحميل بلغة صندوق الإجابة (.answer): ضبابٌ وخفوت، والقيم
   تبقى تُحدَّث تحتها. الحجم لا يتغيّر بين الحالتين — لا قفزة في التخطيط.
   الزرّ بسالبٍ رأسيّ كي لا يزيد ارتفاع العنوان عمّا كان. */
.card.has-reveal > h2 .reveal-btn {
  margin-inline-start: auto;
  margin-block: calc(-1 * var(--s-2));
  letter-spacing: 0;
  text-transform: none;
}
.card.has-reveal > h2 .reveal-btn svg { width: 17px; height: 17px; color: currentColor; }
.reveal-wrap { position: relative; }
.reveal-body {
  transition: filter var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}
.card.is-concealed .reveal-body {
  filter: blur(7px);
  opacity: .55;
  user-select: none;
  pointer-events: none;
}
.reveal-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.card.is-concealed .reveal-veil { opacity: 1; visibility: visible; }
.reveal-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  padding: var(--s-1) var(--s-3);
  box-shadow: var(--sh-1);
}
.reveal-hint svg { flex: none; color: var(--accent-c, var(--primary)); }
@media (prefers-reduced-motion: reduce) {
  .reveal-body, .reveal-veil { transition: none; }
}
@media print {
  .card.is-concealed .reveal-body { filter: none; opacity: 1; }
  .reveal-veil, .reveal-btn { display: none; }
}

/* زرّ التشغيل الواحد (U.playToggle): «تشغيل» ⇄ «إيقاف مؤقت» بعرضٍ ثابت
   فلا يقفز شريط التشغيل حين يتبدّل النصّ */
.playbar .btn-play { min-width: 8.5em; }

/* ═══════════════ ١٢. المعادلات والتقييم ═══════════════ */

/* ────────── ١٢.أ الرياضيات (core/mathtex.js) ──────────
   طبقة عرض الرياضيات. كل صنف هنا يولّده mathtex.js، فلا تُعِد
   تسميته إلا مع تعديل ذلك الملف.

   ⚠ الاتجاه: `.mx` تحمل dir="ltr" في الـ HTML و`unicode-bidi: isolate`
     هنا، فلا تنقلب المعادلة داخل صفحة RTL. لا تُزِل أيّاً منهما.
   ⚠ القياسات بـ em لا px، فتتبع حجم الخط المحيط وتكبير المتصفح. */

/* خطوط TeX (Computer Modern عبر خطوط KaTeX، رخصة MIT — assets/fonts/
   KaTeX-LICENSE.txt). مضمّنة محلياً: لا CDN. الرياضيات بخطّها وحدها،
   والعربية بخطّ الواجهة: الخطّ العربي احتياطٌ في --math فيلتقط أي حرف
   عربي داخل 	ext{} ولا يمسّ الرموز. */
@font-face { font-family: 'SIM TeX Main';  src: url('../assets/fonts/KaTeX_Main-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SIM TeX Main';  src: url('../assets/fonts/KaTeX_Main-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'SIM TeX Math';  src: url('../assets/fonts/KaTeX_Math-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'SIM TeX Size1'; src: url('../assets/fonts/KaTeX_Size1-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --math: 'SIM TeX Main', 'Cambria Math', 'Times New Roman', var(--font), serif;
  --math-it: 'SIM TeX Math', 'Cambria Math', 'Times New Roman', serif;
}

.mx {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--math);
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

/* رياضيات داخل جملة (SIM.math.autoHtml): بخطّ النصّ وعلى خطّ أساسه،
   لا بالخطّ الأحاديّ ولا منتصفَ السطر كصندوق المعادلات. */
.mx.mx-in {
  font-family: var(--math);
  vertical-align: baseline;
  line-height: 1;
  font-size: 1.1em;
  padding-inline: .1em;
  /* المسافة العربية ضيّقة في Cairo: «الزمن (x – t)» كانت تلتصق */
  margin-inline: .08em;
}
/* الكمية بوحدتها («6 s») جزءٌ من الجملة: بلا هامش، وإلا انفصلت عن
   النقطة بعدها («6 s .») */
.mx.mx-in.mx-q { margin-inline: 0; padding-inline: .04em; }
/* سطر معادلة فيه كلمات («slope = …»، «مساحة المستطيل = …»): الكلمات
   بخطّ النصّ لا الأحاديّ (الأحاديّ يفكّك العربية)، واتجاه السطر من أوّل
   حرف قويّ فيه، ويلتفّ بدل أن يُقتطع على الهاتف. */
.mx-line {
  font-family: var(--font);
  unicode-bidi: plaintext;
  white-space: normal;
  line-height: 1.9;
}
/* المائل يميل فوق ما بعده: هامش رفيع يمنع التصاق «v=» */
.mx .mx-var { padding-inline-end: .03em; }
/* اليونانية الكبيرة (Δ Ω) منتصبة بخطّ TeX الرئيسي، والصغيرة (θ ω) مائلة
   بخطّ TeX الرياضي عبر .mx-var — عُرف LaTeX */
.mx .mx-gr { font-family: var(--math); }
/* الرياضيات لا تتجاوز بطاقتها: في صناديق المعادلات وخطوات الحل والتفسير
   يلتفّ السطر الطويل بعد «=» أو «→» (مواضع <wbr> التي يضعها mathtex)
   لا في وسط حدّ. وخارجها تبقى المعادلة سطراً واحداً. */
[id$="-eq"] .mx,
[id$="-areaeq"] .mx,
.answer-steps .mx,
.ex-why .mx,
.eqpick-row .f .mx { white-space: normal; max-width: 100%; }
/* احتياط أخير لحدٍّ واحد أعرض من البطاقة: تمرير أفقي لا فيضان */
/* بلا overflow على أسطر المعادلات: overflow-y: hidden كان يقصّ المقام
   وخطّ الجذر (يمتدّان خارج سطر النصّ). السطر الطويل يلتفّ بعد «=». */
[id$="-eq"] > div,
[id$="-areaeq"] > div,
.answer-steps > div { max-width: 100%; padding-block: 3px; }

/* المتغيّرات مائلة، والوحدات والأرقام منتصبة — عُرف الطباعة الرياضية
   الذي يميّز «v» المتغيّر من «m» وحدة المتر. */
.mx .mx-var { font-style: italic; font-family: var(--math-it); font-weight: 400; }
.mx .mx-up,
.mx .mx-up i,
.mx .mx-fn { font-style: normal; font-family: var(--math); font-weight: 400; }
/* النصّ العربي داخل \text{} يعود RTL داخل معادلة LTR */
.mx .mx-up { unicode-bidi: isolate; }
.mx .mx-fn { padding-inline-end: .12em; }
.mx .mx-bold { font-weight: 700; }
.mx .mx-op { padding-inline: .2em; }              /* عملية ثنائية: + − × · (TeX: 4mu) */
.mx .mx-op.mx-rel { padding-inline: .28em; }      /* علاقة: = → ≈ (TeX: 5mu) */
.mx .mx-un { padding-inline: 0; }                 /* إشارة أحادية: −20 */
/* المؤثّرات الكبيرة ∫ ∑ ∏ — أكبر من النصّ ونازلة عن خطّه كما في TeX */
.mx .mx-big {
  display: inline-block;
  font-family: 'SIM TeX Size1', var(--math);
  font-size: 1.3em;
  line-height: 1;
  vertical-align: -.32em;
  margin-inline: .04em .06em;
}
/* حدود التكامل: العليا عند رأس العلامة والسفلى عند ذيلها */
.mx .mx-big + .mx-ss { font-size: .62em; row-gap: .75em; vertical-align: 1.05em; margin-inline: -.1em .12em; }
.mx .mx-big + sub.mx-sub1 { vertical-align: -.55em; margin-inline-end: .12em; }
/* الشرطة: f′ — أُسٌّ صغير ملتصق بما قبله */
.mx .mx-prime { font-size: .9em; vertical-align: .32em; line-height: 0; margin-inline: .02em 0; }
.mx .mx-fence { padding-inline: .04em; }
.mx .mx-sp { display: inline-block; }

/* الأمر غير المعروف يُعرض بلون تحذيري بدل أن تُخفى المعادلة —
   المعلّم يجب أن يرى خطأه لا صندوقاً فارغاً. */
.mx .mx-unknown {
  color: var(--danger);
  border-radius: var(--r-xs);
  padding: 0 .16em;
}

/* الكسر: بسط وخطّ ومقام في عمود واحد */
.mx .mx-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* middle يضع منتصف الكسر — أي خطّه — على مستوى علامة «=» (مقيس:
     فرق 0.4px). كان هنا transform: translateY(.42em) يُنزل الكسر 6px تحت
     «=» ويُخرج المقام من سطره فيُقتطع؛ التحويل يُزيح الرسم لا التخطيط. */
  vertical-align: middle;
  margin-inline: .1em;
}
.mx .mx-num,
.mx .mx-den { display: block; padding: 0 .22em; font-size: .92em; }
.mx .mx-bar-line {
  display: block;
  width: 100%;
  min-width: 1.1em;
  height: 1px;
  background: currentColor;
  margin: .1em 0;
}

/* الجذر: العلامة √ ثم خطّ أفقي فوق المقدار */
/* الجذر: inline-block (خطّ أساسه خطّ ما تحت الجذر) والعلامة SVG مطلقة
   بطوله كاملاً — تتمدّد مع الكسور، وطرفها العلوي على خطّ الجذر. */
.mx .mx-sqrt {
  position: relative;
  display: inline-block;
  padding-inline-start: .62em;
  margin-inline: .08em;
  --mx-rule: max(1px, .055em);
}
.mx .mx-surd {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: .62em;
}
.mx .mx-surd svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mx .mx-surd path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--mx-rule);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mx .mx-rad {
  display: inline-block;
  border-top: var(--mx-rule) solid currentColor;
  padding: .12em .14em 0 .08em;
}
/* دليل الجذر النوني ∛: فوق ذراع العلامة القصيرة */
.mx .mx-idx { position: absolute; left: .02em; bottom: 52%; font-size: .6em; line-height: 1; }

/* الأُسس والسفليات */
.mx sup.mx-sup1,
.mx sub.mx-sub1 { font-size: .68em; line-height: 0; }
.mx sup.mx-sup1 { vertical-align: .58em; }
.mx sub.mx-sub1 { vertical-align: -.28em; }

/* أُسّ وسفلي على الحرف نفسه: عمود واحد بدل تراكب */
.mx .mx-ss {
  display: inline-flex;
  flex-direction: column;
  font-size: .68em;
  line-height: .9;
  /* خطّ أساس العمود هو سطره الأول (الأُسّ): نرفعه فيقع الأُسّ فوق خطّ
     النصّ والسفلي تحته — كانت .1em تُجلس الأُسّ على الخطّ نفسه */
  vertical-align: .36em;
  text-align: start;
}

/* الزخارف: المتجه والقبّعة والشريط. تُرسم بعنصر زائف فوق الحرف
   لا بمحرف مركّب (U+20D7)، لأن المحارف المركّبة تُزاح مع كل خط. */
.mx .mx-acc { position: relative; display: inline-block; }
.mx .mx-acc-b { display: inline-block; }
.mx .mx-acc::after {
  position: absolute;
  inset-inline: 0;
  top: -.62em;
  font-size: .8em;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.mx .mx-vec::after   { content: '\2192'; font-size: .62em; top: -.62em; left: .14em; right: 0; }   /* → صغير كـ \vec في TeX، مُزاح مع المَيل */
.mx .mx-hat::after   { content: '\005E'; top: -.52em; }
.mx .mx-tilde::after { content: '\007E'; top: -.58em; }
.mx .mx-dot::after   { content: '\02D9'; top: -.66em; }
.mx .mx-bar::after   { content: ''; height: 1px; background: currentColor; top: -.18em; }

/* داخل صندوق المعادلات يكبر قليلاً — المعادلة هي المحتوى لا الحاشية */
.eq .mx { font-size: 1.06em; }

/* ────────── ١٢.ب محرّر الرياضيات (ui/mathedit.js) ──────────
   يُستعمل في لوحة المعلّم. مبنيّ على رموز نظام التصميم نفسها
   فلا نظام ثانٍ ولا قيَم مبثوثة. */

.me {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.me-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
/* المجموعات مفصولة بصرياً فلا يضيع الزرّ في صفٍّ طويل */
.me-grp {
  display: flex;
  gap: 2px;
  padding-inline-end: var(--s-2);
  border-inline-end: 1px solid var(--border);
}
.me-grp:last-child { border-inline-end: 0; padding-inline-end: 0; }

.me-btn {
  min-width: 32px;
  height: 28px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface-1);
  color: var(--text-1);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.me-btn:hover { background: var(--surface-3); border-color: var(--border-2); }
.me-btn:focus-visible { outline: 0; box-shadow: var(--ring); }
.me-btn-math {
  background: var(--primary);
  border-color: transparent;
  color: var(--chip-ink);
  font-family: var(--font);
}
.me-btn-math:hover { filter: brightness(1.08); background: var(--primary); }

.me > textarea,
.me > input {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
  color: var(--text-1);
  padding: var(--s-3);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.9;
  min-height: 84px;
  resize: vertical;
}
.me > textarea:focus, .me > input:focus { outline: 0; box-shadow: none; }

.me-pv-lbl {
  padding: var(--s-1) var(--s-3);
  background: var(--surface-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xxs);
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .02em;
}
.me-pv {
  padding: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 2.1;
  color: var(--text-1);
  min-height: 46px;
  overflow-x: auto;
}
.me-empty { color: var(--text-3); font-size: var(--fs-xs); }

/* ────────── ١٢.ج المحرّر الغنيّ (ui/richedit.js) ──────────
   شريط أدوات ثم مساحة تحرير. الأصناف يولّدها richedit.js. */

.re {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}
.re:focus-within { border-color: var(--border-2); box-shadow: var(--ring); }

.re-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.re-grp {
  display: flex;
  gap: 2px;
  padding-inline-end: var(--s-2);
  border-inline-end: 1px solid var(--border);
}
.re-grp:last-child { border-inline-end: 0; padding-inline-end: 0; }

.re-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.re-btn { display: inline-grid; place-items: center; }
.re-btn svg { display: block; }
.re-btn:hover { background: var(--surface-3); color: var(--text-1); }
.re-btn:focus-visible { outline: 0; box-shadow: var(--ring); }
/* الزرّ المفعَّل يُبرَز بلون القشرة — حالة واجهة لا معنى فيزيائي */
.re-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}

.re-body {
  padding: var(--s-3);
  min-height: 96px;
  font-size: var(--fs-sm);
  line-height: 2.05;
  color: var(--text-1);
  outline: 0;
  overflow-wrap: break-word;
}
.re-mini .re-body { min-height: 42px; padding: var(--s-2) var(--s-3); }

/* النائب: لا يوجد placeholder في contenteditable، فنصنعه بعنصر زائف.
   الشرط :empty وحده لا يكفي لأن المتصفح يضع <br> في المحرّر الفارغ. */
.re-body:empty::before,
.re-body:has(> br:only-child)::before {
  content: attr(data-ph);
  color: var(--text-3);
  pointer-events: none;
}

/* محتوى المحرّر — وكذلك نصّ السؤال المعروض للطالب */
.re-body > *:first-child { margin-top: 0; }
.re-body > *:last-child { margin-bottom: 0; }
.re-body h2, .rich h2 { font-size: var(--fs-md); margin: var(--s-3) 0 var(--s-2); }
.re-body h3, .rich h3 { font-size: var(--fs-sm); margin: var(--s-3) 0 var(--s-2); }
.re-body blockquote, .rich blockquote {
  margin: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  border-inline-start: 3px solid var(--primary);
  background: var(--surface-2);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  color: var(--text-2);
}
.re-body ul, .re-body ol, .rich ul, .rich ol { margin: var(--s-2) 0; padding-inline-start: var(--s-5); }
.re-body li, .rich li { margin-block: 2px; }
.re-body table, .rich table {
  border-collapse: collapse;
  margin: var(--s-3) 0;
  font-size: var(--fs-xs);
}
.re-body td, .re-body th, .rich td, .rich th {
  border: 1px solid var(--border-2);
  padding: var(--s-2) var(--s-3);
  min-width: 52px;
}
.re-body a, .rich a { color: var(--primary); }

/* المقطع الرياضي داخل النصّ: غير قابل للتحرير حرفاً حرفاً، يُحرَّر
   بزرّ الرياضيات. الإطار الخفيف يُعلم المعلّم أنه كيان واحد. */
.re-body .re-tex {
  display: inline-block;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  cursor: pointer;
}
/* عند الطالب: الصيغة جزء من الجملة لا كيانٌ محاط — الإطار أداة تحرير
   تخصّ المعلّم وحده. */
.rich [data-tex] { display: inline; }

/* ── الصور: في المحرّر وعند الطالب ──
   ثلاثة أحجام نسبةً إلى عرض الحاوية، فتصحّ في السؤال وفي الخيار
   الضيّق وعلى الهاتف بلا حساب. الصورة لا تتجاوز عرضها الطبيعي أبداً. */
.re-body img, .rich img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--s-3) auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: #fff;             /* رسوم الكتاب بخلفية بيضاء — لا تذوب في الداكن */
}
.re-img-s { width: 34%; }
.re-img-m { width: 62%; }
.re-img-l { width: 100%; }
/* الخيار سطرٌ لا لوحة: صورته محدودة بسقف ثابت مهما كان حجمها، وإلا
   طغى خيار واحد على البقية واختلّ توازن القائمة (وقع هذا فعلاً). */
.re-mini .re-body img, .sx-opt-txt img, .pv-opt img {
  margin: var(--s-1) 0;
  max-width: min(100%, 220px);
  max-height: 150px;
  width: auto !important;
  object-fit: contain;
}

/* في المحرّر: الصورة قابلة للنقر لتبديل الحجم */
.re-body img { cursor: pointer; transition: box-shadow var(--t-fast) var(--ease); }
.re-body img:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent); }
.re-body.is-drop { outline: 2px dashed var(--primary); outline-offset: -6px; }

.re-uploading {
  position: absolute;
  inset-inline-end: var(--s-2);
  bottom: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--chip-ink);
  font-size: var(--fs-xxs);
  font-weight: 800;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .55; } }

/* ── السؤال مع صورته: النصّ يمنة والصورة يسرة ──
   (resources/views/exams/_stem.blade.php في SIM2)
   الشبكة في RTL تضع العمود الأول يمنة، والنصّ هو الأول في الترتيب. */
.stem-row.has-img {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  gap: var(--s-4);
  align-items: start;
}
.stem-media .rich { display: grid; gap: var(--s-2); }
/* في العمود الجانبي تملأ الصورة عمودها — العمود هو الذي يحدّد الحجم */
.stem-media img { width: 100% !important; margin: 0; }
.stem-txt .rich > p:last-child { margin-bottom: 0; }

/* الهاتف الضيّق جداً: جنباً إلى جنب يجعل الاثنين غير مقروءين، فتُرصَف
   الصورة **فوق** النصّ — لا تحته، فلا يعلو السؤالُ صورته. */
@media (max-width: 440px) {
  .stem-row.has-img { grid-template-columns: 1fr; }
  .stem-media { order: -1; }
}

/* لوحة إدراج الرياضيات */
.re-math {
  position: absolute;
  inset-inline: var(--s-2);
  bottom: var(--s-2);
  z-index: 5;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  padding: var(--s-3);
  display: grid;
  gap: var(--s-2);
}
.re-math-lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.re-math-tips { display: flex; flex-wrap: wrap; gap: 2px; }
.re-math-pv {
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-xs);
  min-height: 38px;
}
.re-math-row { display: flex; gap: var(--s-2); }

/* المعاينة المصغّرة تحت حقل الخيار — بلا إطار ولا ترويسة */
.me-pv-mini {
  min-height: 0;
  padding: var(--s-1) var(--s-3);
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-xs);
}
/* دولار بلا نظير: المعلّم في منتصف كتابة مقطع رياضي */
.me-open {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border-radius: var(--r-xs);
  padding: 0 .2em;
}

.eq {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 2;
  direction: ltr;
  text-align: center;
  color: var(--text-1);
  overflow-x: auto;
  overflow-y: hidden;
  unicode-bidi: isolate;
}
.eq > div { white-space: nowrap; }
.eq > div + div {
  border-top: 1px dashed var(--border);
  margin-top: var(--s-1);
  padding-top: var(--s-1);
}

/* منتقي المعادلة — جدول المعادلات الثلاث */
.eqpick { display: grid; gap: var(--s-2); }
.eqpick-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: start;
  font: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  cursor: pointer;
  transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease), transform var(--t-fast) var(--ease);
}
.eqpick-row:hover { border-color: var(--accel); transform: translateY(-1px); }
.eqpick-row .n {
  font-size: var(--fs-xxs); font-weight: 700; color: var(--text-2);
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 3px 10px; white-space: nowrap;
}
.eqpick-row .f {
  font-family: var(--mono); font-size: var(--fs-lg); font-weight: 700;
  color: var(--text-1); direction: ltr; unicode-bidi: isolate;
}
.eqpick-row .w { font-size: var(--fs-xxs); line-height: 1.65; color: var(--text-2); }
.eqpick-row[aria-pressed="true"] {
  border-color: var(--accel);
  background: color-mix(in srgb, var(--accel) 11%, var(--surface-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accel) 34%, transparent),
              0 10px 26px -14px color-mix(in srgb, var(--accel) 55%, transparent);
}
.eqpick-row[aria-pressed="true"] .n {
  background: var(--accel); color: var(--chip-ink); border-color: transparent;
}
.eqpick-row[aria-pressed="true"] .f { color: var(--accel); }
@media (max-width: 620px) {
  .eqpick-row { grid-template-columns: auto minmax(0, 1fr); }
  .eqpick-row .w { grid-column: 1 / -1; }
}

/* بطاقة «تحقق من فهمك» */
.quiz { border-top: 2px solid var(--accent-c, var(--primary)); }
.q-text { font-size: var(--fs-lg); line-height: 1.85; margin-bottom: var(--s-4); }
.q-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.q-row input[type="number"] {
  font: inherit;
  font-family: var(--mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  width: 132px;
  min-height: var(--ctl-h);
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-1);
  direction: ltr;
}
.q-row input[type="number"]:focus {
  outline: none;
  border-color: var(--accent-c, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-c, var(--primary)) 22%, transparent);
}
.q-unit { font-size: var(--fs-sm); color: var(--text-2); font-weight: 700; direction: ltr; }

.feedback {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: var(--s-3);
}
.feedback[hidden] { display: none; }
.feedback.ok {
  background: color-mix(in srgb, var(--success) 11%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.feedback.err {
  background: color-mix(in srgb, var(--danger) 11%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.feedback .sol {
  display: block; margin-top: var(--s-1);
  font-family: var(--mono); direction: ltr; font-size: var(--fs-xs);
}

/* صندوق الإجابة — مشوّش حتى يجيب الطالب */
.answer {
  margin-top: var(--s-3);
  border: 1px dashed color-mix(in srgb, var(--accent-c, var(--primary)) 42%, transparent);
  background: color-mix(in srgb, var(--accent-c, var(--primary)) 7%, transparent);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  transition: border-color var(--t-mid), background var(--t-mid);
}
.answer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--fs-xxs); font-weight: 700;
  color: var(--accent-c, var(--primary));
  margin-bottom: var(--s-2);
}
.answer-lock {
  font-weight: 600; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 2px 9px;
}
.answer-body {
  filter: blur(7px);
  opacity: .55;
  user-select: none;
  transition: filter var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}
.answer.revealed { border-style: solid; }
.answer.revealed .answer-body { filter: none; opacity: 1; user-select: auto; }
.answer.revealed .answer-lock { display: none; }
.answer-val {
  font-family: var(--mono); font-size: 19px; font-weight: 700;
  color: var(--accent-c, var(--primary));
  direction: ltr; unicode-bidi: isolate;
}
/* خطوات الحل: كل سطر معادلة مرسومة (setLinesMx) — والكلمات العربية فيها
   بخطّ النصّ، فالخطّ الأحاديّ كان يفكّك «ميل (v – t)». */
.answer-steps {
  font-family: var(--font); font-size: var(--fs-sm); line-height: 2;
  color: var(--text-2);
  margin-top: var(--s-1); white-space: pre-wrap;
}
.answer-steps > div + div { margin-top: 2px; }

/* التباعد والأحرف الكبيرة تناسب اللاتينية وحدها: على العربية يفصل
   الحروف المتّصلة. والجدول بخطّ النصّ بأرقام جدولية لا الأحاديّ. */
[dir="rtl"] .card h2,
[dir="rtl"] .tbl th { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .tbl td { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* جدول */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.tbl th, .tbl td { border: 1px solid var(--border); padding: var(--s-2) var(--s-3); text-align: center; }
.tbl th {
  background: var(--surface-2); color: var(--text-2);
  font-weight: 800; font-size: var(--fs-xxs);
  text-transform: uppercase; letter-spacing: .4px;
}
.tbl td { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }

/* ═══════════════ ١٣. الفهرس — Hero ومكتبة المحاكاة ═══════════════ */

.hero {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-20) var(--s-5) var(--s-16);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-12);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-8); padding-block: var(--s-12) var(--s-10); text-align: center; }
  .hero-copy { margin-inline: auto; }
}
@media (max-width: 560px) { .hero { padding-inline: var(--s-4); padding-block: var(--s-8) var(--s-8); } }

.hero-copy { max-width: 620px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--primary-2);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--r-full);
  padding: 6px 14px;
  margin-bottom: var(--s-5);
}
.hero-badge svg { width: 15px; height: 15px; }
.hero-badge .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary-2); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 70%, transparent);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -1.2px;
  margin-bottom: var(--s-5);
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--primary-2) 0%, var(--primary) 40%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead {
  font-size: clamp(15px, 1.7vw, 18.5px);
  line-height: 1.85;
  color: var(--text-2);
  margin-bottom: var(--s-8);
}
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 1000px) { .hero-cta { justify-content: center; } }

.hero-stats {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
@media (max-width: 1000px) { .hero-stats { justify-content: center; gap: var(--s-6); } }
.hero-stat .n {
  display: block;
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 700;
  color: var(--primary-2);
  line-height: 1.2;
  direction: ltr;
  unicode-bidi: isolate;
}
.hero-stat .l { font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; }

/* لوحة الرسم التوضيحي */
.hero-art {
  position: relative;
  aspect-ratio: 1 / 0.86;
  border-radius: var(--r-xl);
  background:
    radial-gradient(105% 85% at 72% 8%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 62%),
    linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--sh-4), var(--glow);
  overflow: hidden;
}
.hero-art svg { display: block; width: 100%; height: 100%; }
@media (max-width: 1000px) { .hero-art { max-width: 540px; margin-inline: auto; } }

/* ── مكتبة المحاكاة ── */
.library { max-width: 1280px; margin: 0 auto; padding: var(--s-12) var(--s-5) var(--s-20); }
@media (max-width: 560px) { .library { padding: var(--s-8) var(--s-4) var(--s-12); } }

.lib-tools {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.lib-tools .field { flex: 1 1 260px; max-width: 360px; }
.lib-count { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; margin-inline-start: auto; }
@media (max-width: 700px) {
  .lib-tools .field { max-width: none; }
  .lib-count { margin-inline-start: 0; }
}

.lib-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); }

.sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--s-5);
}
@media (max-width: 460px) { .sim-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

.sim-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.sim-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary) 16%, transparent);
}
a.sim-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--sc, var(--primary)) 52%, transparent);
  box-shadow: var(--sh-4),
              0 0 0 1px color-mix(in srgb, var(--sc, var(--primary)) 30%, transparent),
              0 18px 44px -20px color-mix(in srgb, var(--sc, var(--primary)) 42%, transparent);
}
.sim-card.is-soon { opacity: .62; }

/* الصورة المصغّرة */
.sim-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(110% 90% at 68% 6%, color-mix(in srgb, var(--sc, var(--primary)) 16%, transparent), transparent 64%),
    var(--surface-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.sim-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--grid) 80%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--grid) 80%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(100% 90% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(100% 90% at 50% 50%, #000 40%, transparent 100%);
}
.sim-thumb svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform var(--t-slow) var(--ease);
}
a.sim-card:hover .sim-thumb svg { transform: scale(1.055); }
.sim-badges {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  display: flex;
  gap: var(--s-1);
  z-index: 2;
}
.sim-badges .badge {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sim-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.sim-meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sim-topic {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-xxs); font-weight: 700;
  color: var(--sc, var(--primary));
}
.sim-topic::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sc, var(--primary)); flex: none;
}
.sim-grade { font-size: var(--fs-xxs); color: var(--text-3); font-weight: 600; }
.sim-grade::before { content: "·"; margin-inline-end: var(--s-2); color: var(--border-2); }
.sim-card h3 { font-size: var(--fs-h3); line-height: 1.45; }
.sim-desc { font-size: var(--fs-xs); line-height: 1.75; color: var(--text-2); flex: 1; }
.sim-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); margin-top: var(--s-2);
}
.sim-go {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--sc, var(--primary));
}
.sim-go svg { width: 16px; height: 16px; transition: transform var(--t-mid) var(--ease); }
[dir="rtl"] .sim-go svg { transform: scaleX(-1); }
a.sim-card:hover .sim-go svg { transform: translateX(4px); }
[dir="rtl"] a.sim-card:hover .sim-go svg { transform: scaleX(-1) translateX(4px); }
.sim-screens { display: flex; gap: var(--s-1); }
.sim-screens > i {
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--border-2);
}

/* حالة لا نتائج */
.lib-empty {
  text-align: center;
  padding: var(--s-16) var(--s-5);
  color: var(--text-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
}
.lib-empty svg { width: 38px; height: 38px; color: var(--text-3); margin-bottom: var(--s-3); }
.lib-empty h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); color: var(--text-1); }

/* قسم «عن المنصة» */
.about { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-5) var(--s-20); }
@media (max-width: 560px) { .about { padding: 0 var(--s-4) var(--s-12); } }
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-4);
}
.about-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-2);
}
.about-ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ac, var(--primary)) 14%, transparent);
  color: var(--ac, var(--primary));
  margin-bottom: var(--s-3);
}
.about-ico svg { width: 21px; height: 21px; }
.about-item h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.about-item p { font-size: var(--fs-xs); line-height: 1.8; color: var(--text-2); }

/* ═══════════════ ١٤. التذييل ═══════════════ */

.credit {
  position: relative;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  padding: var(--s-10) var(--s-5) var(--s-8);
  margin-top: var(--s-8);
}
.credit-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.credit .pb {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--text-2); font-size: var(--fs-xs); font-weight: 600;
}
.credit .pb img { height: 26px; width: auto; opacity: .9; }
.credit .pb b { color: var(--text-1); font-weight: 800; }
.credit-by { font-size: var(--fs-sm); color: var(--text-2); }
.credit-by b { color: var(--text-1); font-weight: 800; }
.credit-copy { font-size: var(--fs-xxs); color: var(--text-3); }
@media (max-width: 700px) {
  .credit { text-align: center; padding-inline: var(--s-4); }
  .credit-inner { flex-direction: column; gap: var(--s-3); }
}

/* ═══════════════ الهوية ═══════════════ */

/* الشعار — بلا إطار ولا لوح، والصورة نفسها تتبدّل مع الثيم.
   ملف الشعار يحتوي «iTestNova SIM» كاملاً، فلا تُضاف كلمة sim نصّية
   (كانت مكرّرة ومائلة وأُزيلت).

   نسختان بالنسبة نفسها (250×97):
     assets/dark.png → الوضع الداكن     assets/cc.png → الوضع الفاتح
   تُحمَّل كـ background-image لا كـ <img> حتى **لا يجلب المتصفح إلا
   الصورة المطابقة للثيم** (نسخة واحدة لا اثنتان).
   لتبديل أي نسخة: استبدل الملف نفسه ولا تلمس هذه القاعدة. */
.brand {
  direction: ltr;                /* الشعار يُقرأ من اليسار */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
  border-radius: var(--r-sm);
  transition: transform var(--t-fast) var(--ease), filter var(--t-mid) var(--ease);
}
.brand-mark {
  display: block;
  height: 34px;
  width: calc(34px * 2.577);       /* نسبة الشعار الأصلية 250×97 */
  background: url('../assets/dark.png') center / contain no-repeat;
  transition: height var(--t-mid) var(--ease), width var(--t-mid) var(--ease);
}
:root[data-theme="light"] .brand-mark { background-image: url('../assets/cc.png'); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-mark { background-image: url('../assets/cc.png'); }
}

.brand:hover { transform: translateY(-1px); filter: brightness(1.08); }
.brand:focus-visible { box-shadow: var(--ring); }

@media (max-width: 560px) {
  .brand-mark { height: 27px; width: calc(27px * 2.577); }
}

.brand-tag { font-size: var(--fs-xxs); font-weight: 700; color: var(--primary); line-height: 1.45; }
.brand-sep {
  width: 1px; align-self: stretch; margin: var(--s-2) 0; flex: none;
  background: linear-gradient(to bottom, transparent, var(--border) 25%, var(--border) 75%, transparent);
}
@media (max-width: 940px) { .brand-sep { display: none; } }

/* ═══════════════ ١٥. الاختبار ═══════════════ */

.exam-card { max-width: 840px; margin: 0 auto; padding: var(--s-6); }
@media (max-width: 560px) { .exam-card { padding: var(--s-4); } }

.ex-intro { text-align: center; padding: var(--s-4) var(--s-2) var(--s-2); }
.ex-badge {
  display: inline-block;
  background: var(--grad);
  color: var(--primary-ink);
  border: 1px solid transparent;
  box-shadow: var(--brand-sh);
  border-radius: var(--r-full);
  padding: 5px 17px;
  font-size: var(--fs-xs); font-weight: 800;
  margin-bottom: var(--s-4);
}
.ex-intro h2 { font-size: var(--fs-h1); margin-bottom: var(--s-3); }
.ex-lead { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.85; max-width: 520px; margin: 0 auto var(--s-2); }
.ex-sub { color: var(--text-3); font-size: var(--fs-xs); margin-bottom: var(--s-5); }
.ex-best {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--success);
  background: color-mix(in srgb, var(--success) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
  border-radius: var(--r-full); padding: 5px 14px; margin-bottom: var(--s-5);
}

.ex-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4);
}
/* أرقام الأسئلة للقفز: زرّ يحمل رقمه (exam.js يكتبه)، فحجمه للّمس لا
   نقطة 9px — كان الرقم يفيض فوق عنوان السؤال. */
.ex-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.ex-dot {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: var(--r-full);
  font: inherit; font-size: var(--fs-xxs); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ex-dot:hover { border-color: var(--border-2); color: var(--text-1); }
.ex-dot.done {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.ex-dot.now { color: #fff; background: var(--accent); border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ex-pts2 { font-size: var(--fs-xxs); color: var(--text-3); font-weight: 700; }
.ex-bar {
  height: 4px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: hidden; margin-bottom: var(--s-5);
}
.ex-bar > i { display: block; height: 100%; background: var(--grad); transition: width var(--t-slow) var(--ease); }
.ex-w { font-size: var(--fs-xxs); color: var(--text-3); font-weight: 700; }

.ex-stem { font-size: var(--fs-lg); line-height: 1.9; margin-bottom: var(--s-4); font-weight: 600; }
.ex-opts { display: grid; gap: var(--s-2); }
.ex-opt {
  display: flex; align-items: center; gap: var(--s-3);
  font: inherit; font-size: var(--fs-sm); text-align: start;
  color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.ex-opt:hover { border-color: var(--border-2); background: var(--surface-3); transform: translateY(-1px); }
.ex-opt[aria-pressed="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.ex-key {
  flex: none; width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: var(--fs-xxs); font-weight: 800; color: var(--text-2);
}
.ex-opt[aria-pressed="true"] .ex-key {
  background: var(--primary); border-color: transparent; color: var(--primary-ink);
}
.ex-opts.ex-tf { grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .ex-opts.ex-tf { grid-template-columns: 1fr; } }
.ex-body { min-height: 190px; }
.ex-nav { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-5); flex-wrap: wrap; }
.ex-nav .head-spacer { flex: 1 1 auto; }

/* شاشة النتيجة */
.ex-score { text-align: center; padding: var(--s-4) 0 var(--s-6); }
.ex-pct {
  font-family: var(--mono);
  font-size: clamp(48px, 12vw, 76px);
  font-weight: 700; line-height: 1.05;
  direction: ltr; unicode-bidi: isolate;
  background: linear-gradient(150deg, var(--primary-2), var(--primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ex-score.mid .ex-pct { background: linear-gradient(150deg, var(--warn), #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ex-score.low .ex-pct { background: linear-gradient(150deg, var(--danger), #be123c);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ex-of { font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-2); direction: ltr; }
.ex-grade { font-size: var(--fs-h2); font-weight: 800; margin-top: var(--s-2); }
.ex-revtitle {
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .6px;
  margin: var(--s-6) 0 var(--s-3);
}
.ex-rev {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
}
.ex-rev.ok { border-inline-start-color: var(--success); }
.ex-rev.bad { border-inline-start-color: var(--danger); }
.ex-rev-h { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.ex-rev-n { font-size: var(--fs-xxs); font-weight: 800; color: var(--text-3); }
.ex-rev-mark { font-size: var(--fs-xs); font-weight: 800; }
.ex-rev.ok .ex-rev-mark { color: var(--success); }
.ex-rev.bad .ex-rev-mark { color: var(--danger); }
.ex-rev-q { font-size: var(--fs-sm); line-height: 1.8; margin-bottom: var(--s-2); }
.ex-rev-a, .ex-rev-r { font-size: var(--fs-xs); color: var(--text-2); }
.ex-rev-r b { color: var(--success); }
.ex-why {
  font-size: var(--fs-xs); line-height: 1.8; color: var(--text-2);
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--r-xs); padding: var(--s-2) var(--s-3); margin-top: var(--s-2);
}
.ex-goto {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: inherit; font-size: var(--fs-xxs); font-weight: 700;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--r-full); padding: 5px 13px;
  margin-top: var(--s-3); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.ex-goto:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }

/* ═══════════════ ١٦. لوحة التحكّم على الهاتف ═══════════════
   على الشاشات الصغيرة تنزلق لوحة الإعدادات من الأسفل بدل أن تُدفع
   المحاكاة إلى أعلى الصفحة وتبقى الإعدادات بعيدة عنها. */

.sheet-toggle {
  display: none;
  position: fixed;
  inset-block-end: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  inset-inline: var(--s-4);
  z-index: 50;
  box-shadow: var(--sh-4), var(--brand-sh);
}
.sheet-scrim {
  position: fixed; inset: 0; z-index: 54;
  background: rgba(2, 8, 18, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.sheet-handle { display: none; }

@media (max-width: 1020px) {
  .sheet-toggle { display: inline-flex; }
  body.has-sheet { padding-bottom: 78px; }

  /* العمود الثاني في .layout يصبح لوحة منزلقة */
  .layout > .panel {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 56;
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -20px 60px -20px rgba(0,0,0,.8);
    transform: translateY(101%);
    transition: transform var(--t-slow) var(--ease);
  }
  .layout > .panel .sheet-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    position: sticky;
    top: 0;
    z-index: 2;
    margin-inline: calc(var(--s-4) * -1);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .layout > .panel .sheet-handle::before {
    content: "";
    position: absolute;
    inset-inline: 0; top: 6px;
    margin-inline: auto;
    width: 42px; height: 4px;
    border-radius: var(--r-full);
    background: var(--border-2);
  }
  .sheet-handle strong { font-size: var(--fs-sm); padding-top: var(--s-2); }
  body.sheet-open .layout > .panel { transform: none; }
  body.sheet-open .sheet-scrim { opacity: 1; visibility: visible; }
  body.sheet-open .sheet-toggle { opacity: 0; pointer-events: none; }
  body.sheet-open { overflow: hidden; }
}

/* ═══════════════ ١٧. أدوات ووصولية ═══════════════ */

/* زر اللغة — مخفي حالياً بطلب المستخدم.
   ══ لإعادة إظهاره: غيّر --lang-btn في :root (§٢) من none إلى inline-flex ══
   الزر يبقى في الصفحة وفي الكود ويعمل، فلا ينكسر شيء. وتبديل اللغة يظل
   ممكناً برمجياً: SIM.i18n.setLang('en') من الكونسول. */
#langBtn { display: var(--lang-btn) !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: var(--s-4);
  z-index: 100;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 700;
  padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: inset-block-start var(--t-mid) var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

.mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }

/* من يفضّل تقليل الحركة: نوقف الانتقالات لا الوظائف */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* تباين أعلى لمن يطلبه */
@media (prefers-contrast: more) {
  :root { --text-2: #c5d8ea; --border: #3a6389; }
}

/* ── «مشاركة النشاط» (ui/share.js — صفحات دروس SIM2): زرّ في شريط الدرس
   ونافذة <dialog> فيها الرابط ورمز QR. الرمز على أبيض في الثيمين. ── */
.share-btn { margin-inline-start: auto; }
.share-dlg {
  width: min(420px, calc(100% - var(--s-6)));
  max-height: calc(100% - var(--s-6));
  padding: 0;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  overflow: auto;
}
.share-dlg::backdrop { background: rgba(2, 8, 20, .6); }
.share-dlg-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); }
.share-dlg-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.share-dlg-titles { flex: 1; min-width: 0; }
.share-dlg-title { font-size: var(--fs-lg); font-weight: 800; line-height: 1.4; }
.share-dlg-act { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.share-dlg-close { flex: none; }
.share-dlg-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); margin-bottom: calc(-1 * var(--s-2)); }
.share-dlg-url { font-family: var(--mono); font-size: var(--fs-xs); text-align: left; }
.share-dlg-url:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.share-dlg-msg { min-height: 1.4em; font-size: var(--fs-xs); font-weight: 600; text-align: center; margin: calc(-1 * var(--s-1)) 0; }
.share-dlg-msg.is-ok { color: var(--success); }
.share-dlg-msg.is-fail { color: var(--warn-ink); }
.share-dlg-qr { display: flex; justify-content: center; }
.share-dlg-qr canvas {
  display: block;
  max-width: 100%;
  background: #fff;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--border);
  image-rendering: pixelated;
}
.share-dlg-hint { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
@media (max-width: 560px) {
  /* الزرّ أيقونة وحدها، واسمه في aria-label */
  .share-btn { width: var(--ctl-h-sm); padding: 0; }
  .share-btn .share-btn-label { display: none; }
  .share-dlg { width: calc(100% - var(--s-4)); }
  .share-dlg-body { padding: var(--s-4); }
}
@media print { .share-btn, .share-dlg { display: none !important; } }

/* ── شاشة التحميل (.page-loader) — صفحات المحاكاة وحدها ──
   منقولة كما هي من شاشة التحميل في MyES (الحلقتان والذرّة والنقاط والخلفية
   الضبابية)، والمتغيّرات مربوطة برموز SIM. الترميز في أوّل <body>، والسلوك
   في ui/ui.js (§٤): html.pl-done حين تجهز الصفحة (load + الخطوط).
   · وقتٌ حقيقي بلا حدّ أدنى مصطنع: لا تظهر إلا إن طال التحميل أكثر من 160ms
     (animation-delay مع backwards) — فالتحميل السريع لا يومض.
   · احتياط: إن لم يعلّم JS الجهوز (خطأ سكربت) تختفي بعد 8s من تلقاء نفسها،
     فلا تُقفل الصفحة أبداً.
   · الألوان ألوان MyES الأصلية: قشرة لا معنى فيزيائياً لها. ── */
.page-loader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  opacity: 1; visibility: visible;
  animation: pl-in .28s ease 160ms backwards, pl-failsafe .28s ease 8s forwards;
}
html.pl-done .page-loader {
  opacity: 0; visibility: hidden; pointer-events: none;
  animation: none;
  transition: opacity .28s ease, visibility .28s;
}
html.pl-gone .page-loader { display: none; }
@keyframes pl-in { from { opacity: 0; } }
@keyframes pl-failsafe { to { opacity: 0; visibility: hidden; } }

.pl-box {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 36px 52px; border-radius: 26px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-4);
  animation: pl-box-in .35s cubic-bezier(.2, 1.4, .4, 1) 160ms backwards;
}
html.pl-done .pl-box {
  transform: scale(.92); animation: none;
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pl-box-in { from { transform: scale(.92); } }

.pl-spinner { position: relative; width: 116px; height: 116px; }
.pl-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 25%, #06b6d4 45%, #6366f1 70%, #8b5cf6 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: pl-spin 1.1s linear infinite;
}
.pl-ring-2 {
  inset: 12px; opacity: .6; animation-duration: 1.8s; animation-direction: reverse;
  background: conic-gradient(from 90deg, transparent 0 45%, #a5b4fc 80%, #06b6d4 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.pl-orbit-wrap { position: absolute; inset: 26px; animation: pl-spin 5s linear infinite; color: var(--primary); }
.pl-orbit { width: 100%; height: 100%; opacity: .5; display: block; }
.pl-nucleus {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #6366f1 70%); box-shadow: 0 0 14px #6366f1;
  animation: pl-pulse 1.2s ease-in-out infinite;
}
.pl-electron {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%;
  background: #06b6d4; box-shadow: 0 0 10px #06b6d4;
}
.pl-e1 { animation: pl-orbit1 1.3s linear infinite; }
.pl-e2 { animation: pl-orbit2 1.3s linear infinite; background: #8b5cf6; box-shadow: 0 0 10px #8b5cf6; }
.pl-e3 { animation: pl-orbit3 1.3s linear infinite; background: #f472b6; box-shadow: 0 0 10px #f472b6; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
@keyframes pl-orbit1 { from { transform: rotate(0deg) translateX(28px); } to { transform: rotate(360deg) translateX(28px); } }
@keyframes pl-orbit2 { from { transform: rotate(120deg) translateX(28px); } to { transform: rotate(480deg) translateX(28px); } }
@keyframes pl-orbit3 { from { transform: rotate(240deg) translateX(28px); } to { transform: rotate(600deg) translateX(28px); } }
@keyframes pl-pulse { 50% { transform: scale(1.35); } }
.pl-text { font-weight: 700; font-size: var(--fs-lg); color: var(--text-1); }
.pl-dots { display: flex; gap: 6px; margin-top: -8px; }
.pl-dots i { width: 7px; height: 7px; border-radius: 50%; background: #6366f1; animation: pl-dot 1s ease-in-out infinite; }
.pl-dots i:nth-child(2) { animation-delay: .15s; background: #06b6d4; }
.pl-dots i:nth-child(3) { animation-delay: .3s; background: #8b5cf6; }
@keyframes pl-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-6px); opacity: 1; } }

/* تقليل الحركة: ذرّة ساكنة (الإلكترونات في مواضعها) والتلاشي باقٍ.
   القاعدة العامة أعلاه تجعل كل حركة .01ms، فنعيد مدّة الظهور والتلاشي
   وحدهما صراحةً — وإلا ظهرت الشاشة دفعةً بعد 160ms. */
@media (prefers-reduced-motion: reduce) {
  .page-loader { animation-duration: .28s, .28s !important; }
  html.pl-done .page-loader { transition-duration: .28s !important; }
  .pl-box, html.pl-done .pl-box { animation: none !important; transform: none; }
  .pl-ring, .pl-orbit-wrap, .pl-nucleus, .pl-electron, .pl-dots i { animation: none !important; }
  .pl-e1 { transform: rotate(0deg) translateX(28px); }
  .pl-e2 { transform: rotate(120deg) translateX(28px); }
  .pl-e3 { transform: rotate(240deg) translateX(28px); }
  .pl-dots i { opacity: .7; }
}
@media print { .page-loader { display: none !important; } }

/* ═══════════════ ١٩. المختبر والأنشطة ═══════════════
   مكوّنات الأنشطة العملية والتفاعلية (الدرس الثالث أولاً): خطوات موجَّهة،
   جدول نتائج يكمله الطالب، رسمٌ بياني يضع نقاطه ويرسم خطّه بنفسه، وبطاقات
   «أكمل بيانات الرسم».
   ⚠ لا حلّ تلقائياً: الأعمدة المشتقّة والنقاط والخط والميل عمل الطالب،
     والألوان هنا حالاتٌ (صحيح/خطأ/مقفل) لا معانٍ فيزيائية — إلا ما يرسم
     كمية (السهم --scalar، القوس --vector). */

/* الشاشة ٢: المسرح والجدول متراكبان بالعرض الكامل في كل العروض — جدولٌ
   بستة أعمدة وخانات إدخال لا يتّسع في نصف عمود. ومحدِّدٌ أقوى من
   `.sync > .card + .card` في استعلام العمودين. */
.sync.lab-sync { display: block; }
.sync.lab-sync > .card + .card { margin-top: var(--s-4); }
/* مسرح المضمار الهوائي (الدرس الأول): الكتلة المعلّقة تنزل بمقياس المضمار
   نفسه، و4/3 على الهاتف لا تتّسع لنزولها مع شاشة الحاسوب تحته. */
@media (max-width: 560px) { .stage.lab-stage { aspect-ratio: 1 / 1; } }
/* بطاقة بعد صفّ .sync (جدول (4) بعد المسرح) — كفاصل .card + .card */
.sync + .card { margin-top: var(--s-4); }

/* الساعة وشارة «عرض بطيء» معاً في طرف شريط التشغيل */
.playbar .lab-clock {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2);
}
.playbar .lab-clock .badge { margin-inline-start: 0; }
@media (max-width: 339px) {
  .playbar .lab-clock { margin-inline-start: 0; width: 100%; justify-content: center; }
  .playbar .lab-clock .badge { width: auto; }
}

/* نصوص البطاقات */
.lab-q { font-size: var(--fs-sm); font-weight: 600; line-height: 1.85; color: var(--text-1); margin: var(--s-3) 0 var(--s-2); }
.lab-q:first-child { margin-top: 0; }
.lab-note { font-size: var(--fs-xs); line-height: 1.75; color: var(--text-2); margin-top: var(--s-2); }
.lab-def { font-size: var(--fs-sm); font-weight: 700; line-height: 1.9; color: var(--text-1); }
.lab-think p { font-size: var(--fs-sm); line-height: 1.85; }
.lab-think p + p { margin-top: var(--s-1); }
.lab-think .btn { margin-top: var(--s-2); }
.lab-think .hint { margin-top: var(--s-2); }
.lab-list { margin: 0; padding-inline-start: var(--s-5); font-size: var(--fs-xs); line-height: 1.9; color: var(--text-2); }
.q-text.lab-qs { font-size: var(--fs-sm); }
.feedback .lab-fbl { display: grid; gap: 2px; min-width: 0; }
.lab-fields { display: grid; gap: var(--s-3); }
.lab-field .lab-note { margin: 0 0 var(--s-2); color: var(--text-1); font-size: var(--fs-sm); }

/* خانة إدخال الطالب — نصّ (لا number) ليقبل الفاصلة العشرية «,» */
.lab-in {
  font: inherit;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  width: 6.5em;
  min-height: var(--ctl-h-sm);
  padding: 0 var(--s-2);
  color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  direction: ltr;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lab-in::placeholder { color: var(--text-3); }
.lab-in:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.lab-in.is-ok { border-color: var(--success); background: color-mix(in srgb, var(--success) 11%, var(--surface-2)); }
.lab-in.is-err { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.lab-in:disabled { opacity: .45; cursor: not-allowed; }
.lab-in[readonly] { cursor: default; }
.q-row .lab-in { min-height: var(--ctl-h); font-size: var(--fs-lg); width: 132px; }

/* ── الخطوات الموجَّهة (الشاشة ١) ── */
.lab-flow { list-style: none; margin: 0; padding: 0; counter-reset: labf; display: grid; gap: var(--s-3); }
.lab-fstep {
  counter-increment: labf;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  transition: opacity var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.lab-fhead { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-sm); line-height: 1.7; }
.lab-fhead b { font-weight: 700; }
.lab-fn, .lab-sn {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: var(--fs-xxs); font-weight: 800; line-height: 1;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.lab-fn::before { content: counter(labf); }
[dir="rtl"] .lab-fn::before { content: counter(labf, arabic-indic); }
.lab-fbody { margin-top: var(--s-3); }
.lab-fbody > .btn { margin-bottom: var(--s-1); }
/* الخطوة الجارية وحلقة التركيز حالةُ واجهة: بلون القشرة --primary لا بلون
   الشاشة (--accent-c لونٌ فيزيائي — CLAUDE.md §٥ قاعدة الفصل) */
.lab-fstep[data-state="current"] { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.lab-fstep[data-state="locked"] { opacity: .55; }
.lab-fstep[data-state="locked"] .lab-fbody { display: none; }
.lab-fstep[data-state="current"] .lab-fn,
.lab-steps li[data-state="current"] .lab-sn {
  color: var(--chip-ink); background: var(--primary); border-color: transparent;
}
.lab-fstep[data-state="done"] .lab-fn,
.lab-steps li[data-state="done"] .lab-sn {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}
/* المنجزة: أيقونة check (ui/icons.js يُدرجها lesson.js) بدل الرقم — لا محرف «✓» */
.lab-fstep[data-state="done"] .lab-fn::before,
.lab-steps li[data-state="done"] .lab-sn::before { content: none; }
.lab-fn svg, .lab-sn svg { display: block; }

/* شكل الأنبوبتين وزرّا الاختيار تحته */
.plot-box.lab-fig { height: 180px; margin-top: var(--s-2); }
.lab-figbtns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-2); }
.lab-figbtns .btn.is-ok { border-color: var(--success); color: var(--success); }
.lab-figbtns .btn.is-err { border-color: var(--danger); color: var(--danger); }
.lab-figbtns .btn.is-ok:disabled { opacity: 1; }

/* ── شريط خطوات النشاط (الشاشة ٢) ── */
.lab-steps { list-style: none; margin: 0; padding: 0; counter-reset: labs; display: grid; gap: var(--s-1); }
.lab-steps li {
  counter-increment: labs;
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
}
.lab-sn::before { content: counter(labs); }
[dir="rtl"] .lab-sn::before { content: counter(labs, arabic-indic); }
.lab-steps li[data-state="current"] {
  color: var(--text-1);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-2));
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.lab-steps li[data-state="locked"] { opacity: .6; }

/* ── بطاقات الخطوات المقفلة ── */
.lab-step .lab-locked-note {
  display: none;
  align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--warn-ink);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}
.lab-step[aria-disabled="true"] .lab-locked-note { display: flex; }
.lab-step[aria-disabled="true"] h2 { color: var(--text-2); }
.lab-step[aria-disabled="true"] .lab-body { opacity: .42; pointer-events: none; user-select: none; }

/* ── جدول النتائج ── */
/* width: 0 + min-width: 100% — الجدول يُمرَّر داخل غلافه ولا يفرض عرضه
   الأدنى على عمود .layout (1fr): بدونه اتّسعت الصفحة على الهاتف. */
/* position: relative — حالات .sr-only (مطلقة) داخل الجدول تُقصّ مع الغلاف؛
   بدونها كانت تفلت إلى يسار الصفحة فتتّسع على الهاتف. */
.lab-table-wrap {
  position: relative;
  width: 0; min-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.lab-table, .eq-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.lab-table th, .lab-table td,
.eq-table th, .eq-table td {
  border-bottom: 1px solid var(--border);
  border-inline-start: 1px solid var(--border);
  padding: var(--s-2);
  text-align: center;
  vertical-align: middle;
}
.lab-table tr > :first-child,
.eq-table tr > :first-child { border-inline-start: 0; }
.lab-table tbody tr:last-child > *,
.eq-table tbody tr:last-child > * { border-bottom: 0; }
.lab-table thead th,
.eq-table thead th { background: var(--surface-2); color: var(--text-2); font-weight: 700; }
.lab-table thead th { white-space: nowrap; }
.lab-table .lab-n { font-weight: 800; color: var(--text-2); background: var(--surface-2); }
.lab-table .lab-in { width: 5.4em; }
.lab-table tr.is-verified td { background: color-mix(in srgb, var(--success) 6%, transparent); }
.lab-val {
  font-family: var(--mono); font-weight: 700;
  direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  white-space: nowrap;
}
.lab-chk { white-space: nowrap; }

/* جدول (4) — المعادلات */
.eq-table th, .eq-table td { padding: var(--s-2) var(--s-3); }
.eq-table tbody th { font-weight: 600; color: var(--text-1); text-align: start; }
.eq-table td .mx { font-size: 1.22em; }
.eq-table td:last-child { background: var(--surface-2); }

/* ── الرسم البياني الذي يبنيه الطالب ── */
.lab-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block: var(--s-3); }
.lab-body > .lab-tools:first-child { margin-top: 0; }
.plot-box.lab-plot { height: 340px; touch-action: none; }
.lab-plot canvas { cursor: crosshair; }
.lab-plot canvas:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
@media (max-width: 700px) { .plot-box.lab-plot { height: 300px; } }
.lab-coord { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
.lab-coord .lab-note { margin: 0; }
/* عرضٌ ثابت لشارة الإحداثي: «—» وأطول قراءة «(t², 2Δx) = (0.000, 00.00)» ≈ 17.4em
   (أرقامها جدولية) — فلا يتغيّر عرضها ولا تقفز أزرار التحريك بجوارها */
.lab-coord #s2-coord { min-width: 18em; justify-content: center; }
/* أزرار تحريك النقطة/المقبض خطوةً (اللمس): ≥ 36px، والسهمان الرأسيان
   هما سهم اليمين مُداراً — المحاور LTR فلا تُعكس في RTL */
.lab-nudge { display: inline-flex; gap: var(--s-1); }
.lab-nudge .lab-nup svg { transform: rotate(-90deg); }
.lab-nudge .lab-ndown svg { transform: rotate(90deg); }
/* رقائق النقاط بلون النقاط نفسها على الرسم (--vector) */
.chips.lab-ptsel { --accent-c: var(--vector); }

/* ── حساب الميل ── */
.lab-pcoords { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.lab-slope { display: grid; gap: var(--s-2); }
.lab-srow {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.lab-slbl { font-size: var(--fs-sm); color: var(--text-1); min-width: 11em; }
.lab-unitrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
.lab-unitrow .lab-slbl { min-width: 0; }
.lab-unitrow .seg button { min-width: 3.4em; }

/* ── أسئلة الاختيار داخل البطاقات ── */
.lab-opts { margin-top: var(--s-2); }
.lab-opts .ex-opt { font-size: var(--fs-sm); padding: var(--s-2) var(--s-3); }
.lab-opts .ex-opt:disabled { cursor: default; transform: none; }
.lab-opts .ex-opt:disabled:not(.is-ok) { opacity: .6; }
.lab-opts .ex-opt.is-ok { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface-2)); }
.lab-opts .ex-opt.is-err { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface-2)); }
.lab-opts .ex-opt.is-ok .ex-key,
.lab-opts .ex-opt.is-err .ex-key { color: #fff; border-color: transparent; }
.lab-opts .ex-opt.is-ok .ex-key { background: var(--success); }
.lab-opts .ex-opt.is-err .ex-key { background: var(--danger); }

/* الخلاصة بعد إتمام النشاط */
.lab-final p { font-size: var(--fs-sm); line-height: 1.9; color: var(--text-1); }
.lab-finaleq { text-align: center; font-size: var(--fs-lg); margin: var(--s-2) 0; }

/* ── «أكمل بيانات الرسم» — صورة الكتاب الوميضية (ص ٦٧) ──
   الشكل LTR كالكتاب: [v · التفاحة · t] وبين كل صفّين سهم الحركة وقوس
   الإزاحة. column-reverse للقذف لأعلى: البداية في الأسفل كما في الكتاب. */
.fill-diagram {
  display: flex; flex-direction: column;
  margin: var(--s-3) 0;
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.fill-diagram.is-up { flex-direction: column-reverse; }
.fill-row, .fill-gap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--s-8) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-2);
}
.fill-row { min-height: var(--ctl-h); }
.fill-gap { min-height: var(--s-12); }
.fill-v { justify-self: end; }
.fill-t { justify-self: start; }
.fill-dot {
  justify-self: center;
  width: var(--s-4); height: var(--s-4);
  border-radius: 50%;
  background: var(--car);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .18);
}
.fill-arrow { justify-self: center; align-self: stretch; display: flex; color: var(--scalar); }
.fill-arrow svg { width: 12px; height: 100%; min-height: var(--s-10); }
.is-up .fill-arrow svg { transform: rotate(180deg); }
.fill-dyc { justify-self: start; align-self: stretch; display: flex; align-items: center; gap: var(--s-2); }
.fill-brace {
  width: var(--s-2);
  align-self: stretch;
  margin-block: var(--s-1);
  border: 2px solid var(--vector);
  border-left: 0;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.fill-in { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; }
.fill-in .lab-in { width: 4.4em; }
.fill-diagram .mx { font-size: 1.04em; }
.fill-diagram + .row { margin-bottom: var(--s-1); }

/* ═══════════════ ١٨. الطباعة ═══════════════ */

/* ورقة العمل تُبنى في الصفحة ثم تُطبع، فيجب أن تبقى **مخفية على الشاشة**
   وإلا ظهرت أسئلتها مكشوفة أسفل الصفحة (ومعها الإجابات في نسخ أخرى).
   لا تحذف هذا السطر — غيابه هو ما سبّب ظهور الورقة في الواجهة. */
.print-sheet { display: none; }

/* إرشاد إزالة تذييل المتصفح عند الطباعة — على الشاشة وحدها */
.print-tip {
  position: fixed;
  inset-inline: var(--s-4);
  bottom: var(--s-4);
  max-width: 460px;
  margin-inline: auto;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--sh-4);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--text-2);
}
.print-tip p { margin: 0; }
.print-tip .btn { flex: none; }

@media print {
  body > *:not(.print-sheet) { display: none !important; }
  body::before { display: none !important; }
  /* عرض الورق 794px فتنطبق استعلامات الهاتف: body.has-sheet كان يُضيف
     78px (≈20mm) فراغاً ميتاً يدفع التذييل إلى صفحة ثانية. وخلفية الثيم
     الداكن تُطبع سوداء إن فعّل المعلّم «رسوم الخلفية» في حوار الطباعة. */
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .print-sheet { display: block !important; padding: 0; color: #000; background: #fff; }
  @page { size: A4 portrait; margin: 14mm 15mm 12mm; }

  /* ⚠ خطّ الكسر خلفيةٌ (currentColor) في القواعد العامة، و«رسوم الخلفية»
     مُطفأة افتراضياً في حوار الطباعة — فكان «½at²» يُطبع «12at²» (خطأ
     فيزيائي على الورق). الحدّ يُطبع دائماً، فنُحوّله إلى border. */
  .mx .mx-bar-line { background: none; height: 0; border-top: 1px solid currentColor; }
  /* mx-bar هو ar{}/\overline{}: لا يستعمله البنكان اليوم، والقاعدة
     تحرس أي بنكٍ قادم — الخطّ الأفقي هناك خلفيةٌ أيضاً. */
  .mx .mx-bar::after { background: none; height: 0; border-top: 1px solid currentColor; }
  /* علامة أمرٍ غير معروف: بالحبر الأسود لا بلون الثيم */
  .mx .mx-unknown { color: #000; text-decoration: underline; }

  /* الترويسة */
  .ps-head { border-bottom: 1.5pt solid #000; padding-bottom: 5pt; margin-bottom: 6pt;
             break-inside: avoid; break-after: avoid; }
  .ps-head h1 { font-size: 15pt; line-height: 1.35; margin: 0 0 5pt; }
  .ps-fields { display: flex; gap: 14pt; flex-wrap: wrap; font-size: 10.5pt; }
  /* خطٌّ مستقيم يُكتب عليه بدل صفّ نقاط غير متساوية */
  .ps-blank { display: inline-block; border-bottom: .75pt solid #000; min-width: 45mm; }
  .ps-fields span:not(:first-child) .ps-blank { min-width: 22mm; }

  /* الأسئلة — 11.5pt/1.6 بدل 12pt/2.0: سبعة أسئلة كانت تحتاج 335mm من
     261mm متاحة، فتذهب الورقة الثانية لسؤال وتذييل و٣/٤ بياض. */
  .ps-list { font-size: 11.5pt; line-height: 1.6; padding-inline-start: 18px; }
  .ps-list > li { margin-bottom: 8pt; break-inside: avoid; }
  .ps-list > li > p { margin: 0 0 3pt; font-weight: 600; line-height: 1.65; orphans: 2; widows: 2; }
  /* الرياضيات على الورق تلتفّ عند «=» و«→» (مواضع <wbr> من mathtex): على
     الشاشة يمكن التمرير، وعلى الورق يخرج الحدّ من الصفحة بلا إشارة. */
  .print-sheet .mx { white-space: normal; max-width: 100%; }

  .ps-opts { list-style: none; padding: 0; margin: 0; }
  .ps-opts li { font-size: 11pt; line-height: 1.7; }
  /* ⚠ الابن الأول وحده — حرف الخيار. المحدِّد العام `.ps-opts li span` كان
     يطابق كل مقاطع mathtex (.mx و.mx-var و.mx-unit …) فيحبس كل رقم في
     دائرة 18px فتتراكب الأرقام: كل خيار رقمي كان يُطبع مشوّهاً. */
  .ps-opts > li > span:first-child {
    display: inline-block; width: 15px; height: 15px; line-height: 14px;
    text-align: center; border: .75pt solid #000; border-radius: 50%;
    font-size: 8.5pt; margin-inline-end: 5px; vertical-align: middle;
  }

  .ps-tf { font-size: 11pt; margin-top: 2pt; }
  /* مربّع يُؤشَّر فيه: يُطبع واضحاً على أي طابعة، بخلاف قوسين رقيقين */
  .ps-box { display: inline-block; width: 3.6mm; height: 3.6mm;
            border: .75pt solid #000; margin-inline-end: 4px; vertical-align: -.5mm; }

  /* مساحة الحلّ: صندوقٌ محجوز لا يُقسَّم بين صفحتين */
  .ps-work { font-size: 11pt; margin-top: 5pt; min-height: 26mm;
             border: .75pt solid #000; padding: 4pt 6pt; break-inside: avoid;
             display: flex; align-items: flex-end; }

  .ps-foot { margin-top: 6pt; padding-top: 4pt; border-top: .75pt solid #000;
             font-size: 9pt; text-align: center; line-height: 1.5;
             break-inside: avoid; break-before: avoid; }
  .ps-foot img { height: 20px; display: block; margin: 0 auto 4px; }

  /* ورقة النشاط العملي (§١٩، core/exam.js → printLab): جدول بثلاثة صفوف
     فارغة، وشبكة رسم فارغة بلا أرقام تدريج ولا بيانات — الطالب يختار
     مقياسه كما في الكتاب. الشبكة SVG فتُطبع بلا «رسوم الخلفية». */
  .ps-lab { margin: 0 0 8pt; }
  .ps-lab h2 { font-size: 12.5pt; line-height: 1.4; margin: 0 0 4pt; }
  .ps-lab h3 { font-size: 11pt; margin: 6pt 0 2pt; }
  .ps-table { width: 100%; border-collapse: collapse; break-inside: avoid; }
  .ps-table th, .ps-table td { border: .75pt solid #000; padding: 2pt 4pt; text-align: center; }
  .ps-table th { font-size: 10pt; font-weight: 700; }
  .ps-table td { height: 9mm; font-size: 10.5pt; }
  .ps-gridwrap { display: flex; justify-content: center; align-items: flex-end; gap: 2mm;
                 margin: 2pt 0 4pt; break-inside: avoid; }
  .ps-gridcol { display: flex; flex-direction: column; align-items: flex-start; }
  .ps-ylab, .ps-xlab { font-size: 10pt; line-height: 1.3; }
  .ps-xlab { padding-bottom: 3.5mm; }
  /* الارتفاع يحدّد الحجم والعرض من viewBox: عرضٌ 100% كان يضع الشبكة وسط
     صندوقٍ أعرض منها فيبتعد وسم المحور الأفقي عن طرفه. */
  .ps-grid { display: block; width: auto; height: 92mm; max-width: 100%; max-height: 95mm; }
  .ps-lab-l { font-size: 11pt; font-weight: 600; margin: 6pt 0 0; }
  .ps-rule { height: 8mm; border-bottom: .75pt solid #000; }
  /* خطوات إجراء النشاط (ورقة الدرس الأول) — قائمة مرقّمة مضغوطة */
  .ps-steps { margin: 0 0 2pt; padding-inline-start: 16pt; font-size: 10.5pt; line-height: 1.55; }
}