* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
/* ارتفاع الشِّل: على متصفحات الأجهزة اللوحية/الجوال `100vh` هو ارتفاع الشاشة وشريط العنوان
   منسحبٌ — لا المساحة المرئية. فمع `overflow:hidden` يسقط أسفل الصفحة (الشريط السفلي
   «السابق · انطلق · التالي») تحت الحافة بلا سبيل للوصول إليه. `dvh` هو المرئيّ فعلاً،
   ويساوي `vh` تماماً على سطح المكتب فأثره هناك صفر. متصفحٌ لا يعرف dvh يُسقط السطر
   الثاني عند التحليل فيبقى على vh، ويتكفّل به احتياطيُّ app.js (‎initShellHeight‎).
   ⚠ لا تُكتب بصيغة `var(--x, 100dvh)`: لو غاب المتغيّر صار الإعلان باطلاً وقت الحساب
      فيسقط الارتفاع إلى `auto` بدل الرجوع إلى `100vh` — عكس المقصود تماماً. */
body { height: 100vh; height: 100dvh;
       padding: 2%; font-family: var(--font-family); line-height: var(--lh-base); overflow: hidden; }

/* ══════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════ */
:root {
  /* ── الصواب والخطأ ── */
  --color-correct:      #16a34a;
  --color-correct-bg:   #dcfce7;
  --color-correct-text: #15803d;
  --color-wrong:        #dc2626;
  --color-wrong-bg:     #fee2e2;
  --color-wrong-text:   #b91c1c;

  /* ── الخلفية والأسطح ── */
  --color-bg:          #eef2f9;
  --color-surface:     #ffffff;
  --color-surface-alt: #f5f8ff;

  /* ── النص ── */
  --color-text:       #1e293b;
  --color-text-muted: #64748b;

  /* ── العلامة التجارية ── */
  --color-primary:      #0d47a1;
  --color-primary-deep: #0a1f6b;
  --color-accent:       #1976d2;
  --color-highlight:    #e65100;
  --color-border:       #e2e8f0;
  --color-on-primary:   #fff;

  /* أ125: رقاقات الأزرق الفاتح (أزرار التنقل/الشريط العلوي) — كانت hex متناثرة */
  --color-chip-bg:      #e8f0fe;
  --color-chip-hover:   #bbdefb;

  /* ── الخط ── Tajawal مضمَّن محلّياً (لا شبكة على file://) فلا يظهر تاهوما */
  --font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
  --lh-base: 1.6;

  /* ── مقياس الخط (متجاوب — السقف = 75% من المقياس التاريخي بطلب المالك 2026-07-06،
        يلتحم عند منفذ عرضٍ ارتفاعُه ≥940px تقريباً (شاشة 1080p بمتصفح مكبَّر)،
        وينكمش تدريجياً على الشاشات الأقصر حتى أرضية مقروءة) ── */
  --fs-heading: clamp(1.05rem,   2.55vh,  1.5rem);
  --fs-body:    clamp(0.9375rem, 2.25vh,  1.3125rem);
  --fs-sub:     clamp(0.85rem,   2.1vh,   1.22rem);
  --fs-sm:      clamp(0.75rem,   1.6vh,   0.9375rem);
  --fs-xs:      clamp(0.61rem,   1.28vh,  0.75rem);

  /* ── التباعد ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* ── KIT: المسرح والهوامش ── */
  --stage-w:     min(1040px, 94vw);
  --prose-w:     62ch;
  --stage-pad:   var(--sp-6) var(--sp-4);
  --mentor-size: clamp(140px, 22vh, 240px);
  --bubble-max:  clamp(240px, 32vh, 300px);
  --radius:      14px;
  --radius-lg:   18px;
  --shadow-card: 0 2px 10px rgba(13,71,161,0.08);
  --shadow-pop:  0 8px 28px rgba(0,0,0,0.25);
}

/* ══════════════════════════════════════════════
   FOCUS VISIBILITY — outline موحّد للأزرار والبطاقات عند التنقّل بلوحة المفاتيح
══════════════════════════════════════════════ */
button:focus-visible,
.card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Screens ── */
.screen { display: none; }
#screen-login.active  { display: block; height: 100%; overflow: hidden; }
#screen-nav.active    { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* ══════════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════════ */
.layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.panel-brand {
  flex: 0 0 42%;
  background: linear-gradient(160deg, var(--color-primary-deep) 0%, var(--color-primary) 55%, #1565c0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vh, 60px) clamp(28px, 3vw, 48px);
  position: relative;
  overflow: hidden;
}

.panel-brand::before,
.panel-brand::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.panel-brand::before { width: 480px; height: 480px; bottom: -160px; left: -120px; }
.panel-brand::after  { width: 300px; height: 300px; top: -90px; right: -70px; }

.brand-icon {
  font-size: clamp(112px, 18vh, 220px);
  line-height: 1;
  margin-bottom: clamp(18px, 3vh, 36px);
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35));
}

.brand-title {
  font-size: clamp(52px, 8vh, 92px);
  font-weight: 700;
  color: var(--color-on-primary);
  text-align: center;
  line-height: 1.45;
}

.brand-subtitle {
  font-size: clamp(36px, 5.2vh, 60px);
  font-weight: 600;
  color: #ffd54f;
  margin-top: clamp(10px, 1.6vh, 18px);
  text-align: center;
}

.brand-divider {
  width: 64px;
  height: 5px;
  background: rgba(255,213,79,0.55);
  border-radius: 3px;
  margin: clamp(16px, 2.5vh, 28px) auto 0;
}

/* كتلة معلّم المادة — تحت الصف الدراسي مباشرةً في عمود العلامة (شاشة البداية).
   القيمة تأتي من window.SUBSCRIBER (ملف subscriber.js) وتحقنها app.js. */
.brand-teacher {
  margin-top: clamp(16px, 2.5vh, 28px);
  text-align: center;
  line-height: 1.5;
}
.brand-teacher-label {
  font-size: clamp(22px, 3vh, 34px);
  font-weight: 600;
  color: var(--color-on-primary);
  opacity: 0.85;
}
.brand-teacher-name {
  font-size: clamp(28px, 4vh, 46px);
  font-weight: 700;
  color: #ffd54f;
  margin-top: clamp(4px, 0.8vh, 10px);
}

/* كتلة المدرسة — تتبع كتلة المعلّم بفاصلٍ أضيق واسمٍ أهدأ: المعلّم هو صاحب
   الشاشة، والمدرسة سياقُه. الكتلتان تشتركان في `.brand-teacher` فتبقى
   المحاذاة وسطر الأساس واحداً، وهذه تعدّل الحجم واللون فقط.
   تظهر متى حقن عاملُ التوزيع `school`؛ وإلا لا تُنشأ العقدة أصلاً. */
.brand-school {
  margin-top: clamp(8px, 1.2vh, 14px);
}
.brand-school .brand-teacher-name {
  font-size: clamp(22px, 3.1vh, 36px);
  color: var(--color-on-primary);
  opacity: 0.95;
}

/* رقم الإصدار الداخليّ — صغيرٌ في أسفل عمود العلامة الأزرق (شاشة البداية).
   موضعٌ مطلقٌ في الزاوية السفلى، لا يزاحم المحتوى المتمركز. */
.brand-version {
  position: absolute;
  bottom: clamp(10px, 1.6vh, 20px);
  right: clamp(14px, 1.8vw, 26px);
  font-size: clamp(13px, 1.5vh, 17px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
  z-index: 1;
  user-select: none;
  pointer-events: none;
}

.panel-form {
  flex: 1;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vh, 40px) clamp(24px, 3vw, 48px);
  overflow: hidden;
}

/* البطاقةُ هي الممرِّرة — لا اللوحُ الحاوي. كانت تفيض عن المنفذ فيُقَصُّ طرفاها
   بـ`overflow:hidden` على اللوح، ولا تُمرِّرها العجلةُ إطلاقاً، فلا يبلغ الطالبُ زرَّ «دخول»
   إلا بـTab (يمرِّر كرومُ الحاويةَ المخفيّةَ عند تركيز حقلٍ فيها) — وهو ما رُصد حيّاً عند
   معلّم. والفيضُ يقع عند كل ارتفاعِ نافذةٍ متى ظهرت كتلةُ الطالب السابق (~300px)، لأنّ خطوط
   clamp(..vh..) تكبر مع المنفذ فتبقى النسبة. بـ`max-height:100%` لا تتجاوز البطاقةُ اللوحَ
   أبداً فيبقى التوسيطُ سليماً حين تسع، ويقع التمريرُ داخلها حين لا تسع. */
.form-card {
  background: var(--color-surface);
  border-radius: 20px;
  /* حشوةُ الأسفل يملكها الصفُّ اللاصق (field-row-bottom) لا البطاقة، وإلّا انزلق المحتوى
     في الفجوة تحته حين يُمرَّر. */
  padding: clamp(24px, 3.5vh, 44px) clamp(28px, 3vw, 48px) 0;
  width: 100%;
  max-width: 700px;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 48px rgba(13,71,161,0.13);
}

/* ⚠ أ236 — قشرةُ الشِّل (الدخول · الشريط العلويّ · بطاقاتُ الوحدات/الدروس/المحطات) مقلَّمةٌ
   ٢٥٪ لتلتحق بتقليم توكنات المحتوى (٢٠٢٦-٠٧-٠٦). كانت مستثناةً لأنّ خطة-التحجيم صنّفتها
   «تتكيّف فعلاً» — فحُكِم عليها بالتجاوب لا بالحجم. عمودُ العلامة الأزرق (`.brand-*`)
   مستثنًى عمداً: لوحةُ بطلٍ على ٤٢٪ من العرض، كِبَرُه مقصود. */
.form-greeting {
  font-size: clamp(25px, 3.3vh, 36px);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: clamp(16px, 2.5vh, 32px);
  text-align: center;
}

#prev-section {
  display: none;
  margin-bottom: clamp(14px, 2vh, 26px);
}

#prev-section h3 {
  font-size: clamp(19px, 2.4vh, 25px);
  color: var(--color-text-muted);
  margin-bottom: clamp(8px, 1.2vh, 14px);
  text-align: center;
}

#prev-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-height: clamp(80px, 14vh, 140px);
  overflow-y: auto;
}

.prev-btn {
  background: var(--color-chip-bg);
  color: #1a237e;
  border: 1.5px solid #90caf9;
  border-radius: 22px;
  padding: clamp(7px, 1vh, 12px) clamp(18px, 2vw, 28px);
  font-size: clamp(19px, 2.4vh, 24px);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
  white-space: nowrap;
}

.prev-btn:hover    { background: var(--color-chip-hover); transform: translateY(-1px); }
.prev-btn.selected { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

.device-note {
  text-align: center;
  font-size: clamp(16px, 1.95vh, 19px);
  color: var(--color-text-muted);
  margin: clamp(6px, 0.9vh, 10px) 0 0;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(10px, 1.4vh, 16px) 0;
  color: var(--color-text-muted);
  font-size: clamp(18px, 2.1vh, 21px);
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--color-border);
}

.field { margin-bottom: clamp(14px, 2vh, 22px); }

.field label {
  display: block;
  font-size: clamp(22px, 3vh, 30px);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: clamp(6px, 0.9vh, 10px);
}

.field input {
  width: 100%;
  padding: clamp(12px, 1.8vh, 20px) clamp(16px, 1.8vw, 24px);
  border: 2px solid #dce3ef;
  border-radius: 12px;
  font-size: clamp(21px, 2.85vh, 28px);
  font-family: inherit;
  color: var(--color-text);
  transition: border-color 0.2s;
  outline: none;
  direction: rtl;
  background: #f8fafd;
}

.field input:focus { border-color: var(--color-accent); background: var(--color-surface); }
.field input.error { border-color: #e53935; }

.field-note {
  background: #fff8e1;
  border-right: 4px solid #ffc107;
  border-radius: 8px;
  padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.5vw, 18px);
  font-size: clamp(18px, 2.25vh, 22px);
  color: #5d4037;
  margin-top: clamp(6px, 0.9vh, 10px);
  line-height: 1.65;
}
.field-note strong { color: var(--color-highlight); }

/* زرُّ «دخولُ مجموعة» (خطّة المجموعات §٢) — سطرٌ نصّيٌّ تحت حقل الرقم لا مِفتاحُ وضع:
   الفرديُّ هو الافتراض، فلا يظهر للمجموعات إلّا مدخلٌ صغيرٌ يُضغَط عمداً. ويُبنى في
   `_shared/app.js › injectGroupLogin` فلا يحتاج سطراً في أيّ index.html. */
.group-login-toggle {
  display: inline-block;
  margin-top: clamp(6px, 0.9vh, 10px);
  padding: clamp(4px, 0.6vh, 7px) clamp(10px, 1.2vw, 14px);
  background: transparent;
  border: 1px dashed var(--color-highlight, #ff9800);
  border-radius: 999px;
  color: var(--color-highlight, #ff9800);
  font-family: inherit;
  font-size: clamp(16px, 1.9vh, 19px);
  cursor: pointer;
  line-height: 1.5;
}
.group-login-toggle:hover,
.group-login-toggle:focus-visible { background: #fff8e1; }

.error-msg { font-size: clamp(18px, 2.1vh, 21px); color: #e53935; margin-top: 5px; display: none; }
.error-msg.show { display: block; }

/* رقم الجهاز (أ229) — يشارك صفّ زرّ الدخول بدل صفٍّ مستقلّ، فلا يُضيف ارتفاعاً يُذكَر.
   ولاصقٌ بأسفل البطاقة: وهي أطولُ من المنفذ عند كل ارتفاعٍ متى ظهرت كتلةُ الطالب
   السابق، وأطولُ منه عند ٦٠٠px حتى بدونها — فلولا اللصقُ لبقي «دخول» تحت الطيّة يلزمه
   تمرير. يمتدّ عرضُه بهوامشَ سالبةٍ تُساوي حشوةَ البطاقة كي لا ينزلق المحتوى في جانبيه. */
.field-row-bottom {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.5vw, 16px);
  margin-top: clamp(4px, 0.6vh, 8px);
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--color-surface);
  margin-inline: calc(-1 * clamp(28px, 3vw, 48px));
  padding-inline: clamp(28px, 3vw, 48px);
  padding-bottom: clamp(24px, 3.5vh, 44px);
  padding-top: clamp(6px, 1vh, 12px);
  border-radius: 0 0 20px 20px;
}
.field-row-bottom .btn-login { flex: 1 1 auto; margin-top: 0; }

.field-compact {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.field-compact label {
  font-size: clamp(16px, 1.9vh, 20px);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-bottom: clamp(3px, 0.5vh, 6px);
}
.field-compact-hint { font-weight: 400; }
.field-compact input {
  width: clamp(76px, 8vw, 108px);
  padding: clamp(8px, 1.2vh, 14px) clamp(8px, 1vw, 12px);
  border: 2px solid #dce3ef;
  border-radius: 10px;
  font-size: clamp(17px, 2.1vh, 21px);
  font-family: inherit;
  color: var(--color-text);
  text-align: center;
  outline: none;
  background: #f8fafd;
  transition: border-color 0.2s;
}
.field-compact input:focus { border-color: var(--color-accent); background: var(--color-surface); }
.field-compact input.error { border-color: #e53935; }
/* رسالة خطأ رقم الجهاز (أ230) — نسخةٌ مصغَّرة من .error-msg العامّة كي لا تكسر إحكام الصفّ
   المضغوط (لا تظهر أصلاً إلا في أوّل استخدامٍ لجهازٍ لم يُسجَّل رقمه بعد). */
.field-compact .error-msg {
  font-size: clamp(13px, 1.5vh, 16px);
  white-space: nowrap;
  margin-top: clamp(2px, 0.4vh, 5px);
}

.btn-login {
  width: 100%;
  padding: clamp(14px, 2.2vh, 22px);
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-accent));
  color: var(--color-on-primary);
  border: none;
  border-radius: 13px;
  font-size: clamp(25px, 3.3vh, 33px);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: clamp(4px, 0.6vh, 8px);
  letter-spacing: 1px;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-login:hover  { opacity: 0.9; transform: translateY(-2px); }
.btn-login:active { transform: translateY(0); }

/* ══════════════════════════════════════════════
   NAV — top bar
══════════════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 72px;
  background: var(--color-surface);
  box-shadow: 0 2px 10px rgba(0,0,0,0.09);
  flex-shrink: 0;
  z-index: 10;
}

#btn-back {
  background: var(--color-chip-bg);
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: clamp(19px, 2.55vh, 22px);
  color: var(--color-primary);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
#btn-back:hover    { background: var(--color-chip-hover); }
#btn-back:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

#breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-size: clamp(15px, 1.9vh, 19px);
  color: var(--color-text-muted);
  overflow: hidden;
  direction: rtl;
}

#breadcrumb .bc-sep     { color: var(--color-border); flex-shrink: 0; }
#breadcrumb .bc-item    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#breadcrumb .bc-current { color: var(--color-primary); font-weight: 600; white-space: nowrap; }

#student-chip {
  background: var(--color-chip-bg);
  border-radius: 20px;
  padding: 7px 18px;
  font-size: clamp(18px, 2.25vh, 21px);
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

#btn-change-student {
  background: #fff3e0;
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: clamp(15px, 1.8vh, 18px);
  color: var(--color-highlight);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
#btn-change-student:hover { background: #ffe0b2; }

/* اسم الطالب زرٌّ بقائمة منسدلة (رقم · صف · إحصائيات · خروج) — أغنى عن زرّ «تغيير» المستقل */
#btn-change-student { display: none; }

.student-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
.student-menu-wrap #student-chip { cursor: pointer; }
.student-menu-caret {
  color: var(--color-primary);
  font-size: clamp(14px, 1.8vh, 18px);
  line-height: 1;
  transition: transform 0.18s;
}
.student-menu-wrap.open .student-menu-caret { transform: rotate(180deg); }

.student-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 8px;
  z-index: 200;
  display: none;
}
.student-menu.open { display: block; }
.student-menu-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 12px;
  font-size: var(--fs-sm);
}
.student-menu-info .k { color: var(--color-text-muted); font-weight: 600; }
.student-menu-info .v { color: var(--color-text); font-weight: 800; }
.student-menu-sep { height: 1px; background: var(--color-border); margin: 6px 4px; }
.student-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius);
  text-align: start;
}
.student-menu-item:hover { background: var(--color-surface-alt); }
.student-menu-item.danger { color: var(--color-highlight); }

/* شبكة إحصائيات الطالب داخل حوار التطبيق */
.stats-grid { display: flex; flex-direction: column; gap: 4px; text-align: start; }
.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--color-border);
}
.stats-row:last-child { border-bottom: none; }
.stats-k { color: var(--color-text); font-weight: 700; }
.stats-v { color: var(--color-primary-deep); font-weight: 800; white-space: nowrap; }

.topbar-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.stat-item {
  font-size: clamp(15px, 1.95vh, 18px);
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-chip-bg);
  padding: 5px 14px;
  border-radius: 16px;
}

.stat-item span {
  color: var(--color-highlight);
}

/* ── Scrollable area ── */
.nav-content {
  flex: 1;
  overflow-y: auto;
  background: var(--color-bg);
  padding: 18px 24px 28px;
}

/* activity screen manages its own scroll — disable nav-content scroll */
#screen-nav.active:has(#ns-activity.active) .nav-content {
  overflow: hidden;
  padding: 0;
}

.nav-screen        { display: none; }
.nav-screen.active { display: block; }

/* ── Section heading ── */
.section-head { text-align: center; margin-bottom: 16px; }

.level-tag {
  display: inline-block;
  background: var(--color-chip-bg);
  color: #1565c0;
  font-size: clamp(13px, 1.8vh, 16px);
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 16px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.section-head h1 {
  font-size: clamp(33px, 5.25vh, 48px);
  font-weight: 700;
  color: var(--color-primary-deep);
}

.section-head p {
  font-size: clamp(21px, 2.7vh, 24px);
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* ── Cards grid ── */
.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ── Card ── */
.card {
  background: var(--color-surface);
  border-radius: 18px;
  padding: 22px 18px 18px;
  flex: 0 1 320px;
  box-shadow: 0 2px 12px rgba(13,71,161,0.08);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(13,71,161,0.16);
}

.card-locked {
  opacity: 0.52;
  cursor: default;
  pointer-events: none;
}

.card-locked .card-accent {
  background: #b0bec5;
}

.card-locked .card-icon {
  filter: grayscale(1);
}

/* القرار 39 — الدرسُ المقفول برمزه يُنقَر (يفتح حوار رمز الدرس) */
.card-locked.card-gated {
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.72;
}

/* القرار 39 — رقمُ المهارة في درسٍ مفتوحِ المهارات: يدلّ على الترتيب الصحيح */
.card-seq {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 17px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  line-height: 34px;
  text-align: center;
  z-index: 1;
}

/* القرار 39 — «عرض الرمز» في الشريط العلويّ داخل الدرس */
.btn-topbar-qr {
  font-family: inherit;
  cursor: pointer;
  font-weight: 800;
  border-radius: 10px;
  min-height: 44px;
  padding: 6px 14px;
  font-size: clamp(15px, 1.8vh, 18px);
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  color: var(--color-primary-deep);
  white-space: nowrap;
  flex-shrink: 0;
}

.card-accent {
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary-deep), var(--color-accent));
}

.card-icon     { font-size: clamp(2.45rem, 5.7vh, 3.3rem); line-height: 1; margin-top: 4px; }
.card-title    { font-size: clamp(24px, 3.3vh, 28px); font-weight: 700; color: var(--color-primary-deep); }
.card-subtitle { font-size: clamp(19px, 2.4vh, 22px); color: var(--color-text-muted); line-height: 1.5; }

.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: clamp(13px, 1.8vh, 16px);
  font-weight: 600;
}

.badge-video    { background: #e3f2fd; color: #1565c0; }
.badge-exercise { background: #f3e5f5; color: #7b1fa2; }
.badge-duration { background: #fff3e0; color: var(--color-highlight); }

.card-count {
  font-size: clamp(14px, 1.95vh, 18px);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════
   أ169: تذييلات بطاقات التقييم (المحطات/الدروس/الوحدات) + رمز الدرس
══════════════════════════════════════════════ */
.card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1.5px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.card-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.card-donuts {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: flex-start;
}

.completion-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(18px, 2.4vh, 22px);
  font-weight: 800;
  color: var(--color-correct-text);
}
.completion-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: var(--color-correct-bg);
  color: var(--color-correct-text);
  font-weight: 900;
}

.card-note {
  font-size: clamp(16px, 2.2vh, 21px);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* شريط تقدّم الأنشطة المنجَزة (رسمٌ بيانيّ أفقيّ للنسبة المئوية) */
.progress-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  --bar-color: var(--color-primary);
}
.progress-bar.band-good { --bar-color: var(--color-correct); }
.progress-bar.band-mid  { --bar-color: var(--color-highlight); }
.progress-bar.band-low  { --bar-color: var(--color-primary); }
.progress-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.progress-bar-label {
  font-size: clamp(14px, 1.9vh, 18px);
  font-weight: 700;
  color: var(--color-text-muted);
}
.progress-bar-value {
  font-size: clamp(15px, 2.1vh, 20px);
  font-weight: 800;
  color: var(--color-text);
}
.progress-bar-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--bar-color);
  transition: width .4s ease;
  min-width: 0;
}

.mastery-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 800;
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
}
.mastery-pill-label {
  font-size: clamp(15px, 2vh, 19px);
  color: var(--color-text-muted);
  font-weight: 700;
}
.mastery-pill-value {
  font-size: clamp(19px, 2.6vh, 24px);
  color: var(--color-text);
}
.mastery-pill.band-good { background: var(--color-correct-bg); border-color: var(--color-correct); }
.mastery-pill.band-good .mastery-pill-value { color: var(--color-correct-text); }
.mastery-pill.band-mid  { background: #fff3e0; border-color: var(--color-highlight); }
.mastery-pill.band-mid  .mastery-pill-value { color: var(--color-highlight); }
.mastery-pill.band-low  { background: var(--color-wrong-bg); border-color: var(--color-wrong); }
.mastery-pill.band-low  .mastery-pill-value { color: var(--color-wrong-text); }

.btn-redo, .btn-lesson-qr {
  font-family: inherit;
  cursor: pointer;
  font-weight: 800;
  border-radius: var(--radius);
  padding: 6px 16px;
  font-size: clamp(15px, 2vh, 19px);
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  color: var(--color-primary-deep);
  transition: background 0.15s, color 0.15s;
}
.btn-redo:hover, .btn-lesson-qr:hover {
  background: var(--color-primary);
  color: #fff;
}

/* أ234 — «مراجعة الشرح»: فعلٌ محايدٌ لا يمسّ درجة، فيبقى **أخفتَ** من «أعِد» بحدٍّ رفيعٍ
   ولونٍ ثانويّ — لئلّا يزاحم الفعلَ الأهمَّ في البطاقة بصرياً. */
.btn-review {
  font-family: inherit;
  cursor: pointer;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 5px 14px;
  font-size: clamp(14px, 1.85vh, 18px);
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  transition: border-color 0.15s, color 0.15s;
}
.btn-review:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* أ334 — «إلغاء الإتمام» (وضعُ المعلّم وحدَه): فعلٌ **هادمٌ** لا رجعةَ فيه، فهيئتُه هيئةُ
   «مراجعة الشرح» الخافتة — حدٌّ رفيعٌ وخلفيّةٌ شفّافة — لا هيئةُ «أعِد» الرئيسة: لئلّا
   يُنقَر بالعادة في بطاقةٍ يُنقَر فيها زرٌّ آمنٌ بالموضع نفسِه عند الطالب. واللونُ لونُ
   التنبيه لا الخطأ: الفعلُ مقصودٌ من المعلّم لا خطأٌ وقع. */
.btn-uncomplete {
  font-family: inherit;
  cursor: pointer;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 5px 14px;
  font-size: clamp(14px, 1.85vh, 18px);
  background: transparent;
  /* ⚠ كان بحدٍّ رماديٍّ كـ«مراجعة الشرح» فلم يُعثَر عليه (بلاغُ مالك): لونُ التنبيه من
     السكون لا عند المرور — فيُميَّز عن الأزرار المجاورة بلا أن يزاحم «أعِد» المصمَتَ. */
  border: 1.5px solid var(--color-highlight);
  color: var(--color-highlight);
  transition: background 0.15s, color 0.15s;
}
.btn-uncomplete:hover {
  background: var(--color-highlight);
  color: #fff;
}

/* رمز QR لكلّ درس — تُبنى النافذة ديناميكياً في app.js (بلا تعديل index.html) */
.lesson-qr-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lesson-qr-overlay.active { display: flex; }
.lesson-qr-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-pop);
  text-align: center;
}
.lesson-qr-name  {
  font-size: clamp(24px, 3.4vh, 32px); font-weight: 900; color: var(--color-text);
  max-width: 42ch; line-height: 1.3;
}
.lesson-qr-grade {
  font-size: clamp(15px, 2vh, 19px); font-weight: 700; color: var(--color-text-muted);
  margin-top: -6px;
}
.lesson-qr-title { font-size: clamp(22px, 3vh, 28px); font-weight: 800; color: var(--color-primary-deep); }
.lesson-qr-sub   { font-size: clamp(15px, 2vh, 19px); color: var(--color-text-muted); max-width: 42ch; line-height: 1.5; }
.lesson-qr-code  { width: min(300px, 70vw); }
.lesson-qr-code svg { width: 100%; height: auto; display: block; }
.lesson-qr-hint  { font-size: clamp(14px, 1.9vh, 18px); color: var(--color-text); }
.lesson-qr-close {
  font-family: inherit; cursor: pointer; margin-top: 4px;
  padding: 8px 26px; border: none; border-radius: var(--radius);
  background: var(--color-primary); color: #fff; font-weight: 800;
  font-size: clamp(16px, 2.1vh, 20px);
}

/* متصفّح رموز الدروس (Ctrl×3): سهمان حول الصندوق + مؤشّر الموضع */
.lesson-qr-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
}
.qr-nav-arrow {
  font-family: inherit; cursor: pointer; flex-shrink: 0;
  width: clamp(48px, 7vh, 66px); height: clamp(48px, 7vh, 66px);
  border: none; border-radius: 50%;
  background: var(--color-surface); color: var(--color-primary-deep);
  box-shadow: var(--shadow-card);
  font-size: clamp(26px, 3.4vh, 34px); line-height: 1; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.qr-nav-arrow:hover:not(:disabled) { background: var(--color-surface-alt); transform: scale(1.06); }
.qr-nav-arrow:disabled { opacity: 0.28; cursor: default; box-shadow: none; }
.lesson-qr-pos {
  font-size: clamp(14px, 1.9vh, 18px); font-weight: 700;
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════
   ACTIVITY VIEWER — two-column layout
══════════════════════════════════════════════ */

/* Activity screen: full-height flex column */
#ns-activity.active {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Progress strip */
.activity-progress {
  text-align: center;
  padding: 8px 24px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.progress-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}

.progress-dot {
  width: 16px; height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d0d9ef;
  font: inherit;
  transition: background 0.25s, transform 0.25s;
}

.progress-dot.active {
  background: var(--color-primary);
  transform: scale(1.25);
}

/* أ222: نشاطٌ أُنجز — لونٌ مميّزٌ (أخضر الصواب). يلي .active ليغلبه في الخلفية،
   فتبقى الخلفيةُ دلالةَ الإنجاز وحدها والحلقةُ أدناه دلالةَ الموضع الحاليّ. */
.progress-dot.done { background: var(--color-correct); }

/* منجزٌ وهو الحاليّ: يحتفظ بالأخضر، وتميّزه حلقةٌ بلون المنهج */
.progress-dot.done.active {
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-primary-deep);
}

/* أ222: نشاطٌ يمكن الانتقال إليه — مؤشّرٌ يدويّ وتكبيرٌ عند المرور */
.progress-dot.reachable { cursor: pointer; }

.progress-dot.reachable:not(.active):hover {
  background: var(--color-primary-deep);
  transform: scale(1.15);
}

/* المنجزُ عند المرور يغمَق خضرةً — لا يستحيل أزرقَ فيضيع معناه */
.progress-dot.done.reachable:not(.active):hover {
  background: var(--color-correct-text);
}

.progress-dot.locked {
  cursor: default;
  opacity: 0.55;
}

.progress-dot:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* أ234 — نقطةُ شريحةِ شرح: **مربّعةٌ** لا دائرية، فيقرأ الطالبُ قسمَي المحطة من الشكل وحده
   قبل أن يقرأ العدّاد. الشكلُ فارقٌ مستقلٌّ عن اللون، فلا يضيع على من لا يميّز الألوان
   ولا يزاحم دلالةَ الأخضر (منجَز) والأزرق (الموضع الحاليّ). */
.progress-dot.slide { border-radius: 4px; }

.progress-label {
  font-size: clamp(18px, 2.6vh, 24px);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Activity content — outer theater frame: centers when short, scrolls when tall */
.activity-col-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  background: var(--color-bg);
}

/* Inner content stage — fixed-width centered column, natural size */
.activity-area {
  width: 100%;
  max-width: var(--stage-w);
  margin: auto;
}

/* Exception: full-bleed activities (maze, 3D scene, drag zone) */
.activity-area.full-bleed {
  max-width: none;
  width: 100%;
  flex: 1;
  min-height: 0;
  margin: 0;
  align-self: stretch;
}

.activity-col-content:has(.activity-area.full-bleed) {
  padding: 0;
  overflow: hidden;
}

/* Content cards */
.av-card {
  background: var(--color-surface);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(13,71,161,0.08);
}

.av-card h3 {
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--color-primary-deep);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-bg);
}

.av-card > p {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 1.75;
}

.points-list {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.points-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-surface-alt);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 1.5;
}

.pt-bullet { color: var(--color-accent); font-weight: 700; font-size: clamp(20px, 2.9vh, 27px); line-height: 1.2; flex-shrink: 0; }

/* Q&A */
.qa-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }

.qa-item {
  background: var(--color-surface-alt);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.15s;
}

.qa-item:hover { background: #eaf0ff; }

.qa-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary-deep);
}

.qa-marker {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 50%;
  width: clamp(23px, 3.1vh, 28.5px); height: clamp(23px, 3.1vh, 28.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 1.8vh, 16.5px);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.qa-hint { font-size: clamp(13px, 1.8vh, 16.5px); color: var(--color-text-muted); margin-top: 6px; padding-right: 50px; }

.qa-a {
  font-size: var(--fs-sub);
  color: var(--color-correct-text);
  margin-top: 8px;
  padding-right: 50px;
  display: none;
}

.qa-a::before { content: 'ج: '; font-weight: 700; }

.qa-item.open .qa-hint { display: none; }
.qa-item.open .qa-a    { display: block; }

/* ── Bottom navigation bar ── */
.activity-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  gap: 12px;
  flex-shrink: 0;
}

.btn-nav {
  background: var(--color-chip-bg);
  border: none;
  border-radius: 12px;
  padding: clamp(12px, 1.8vh, 18px) clamp(24px, 2.5vw, 36px);
  font-size: clamp(28px, 3.6vh, 32px);
  color: var(--color-primary);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s, transform 0.12s;
  min-width: 140px;
  text-align: center;
}

.btn-nav:hover:not(:disabled)  { background: var(--color-chip-hover); transform: translateY(-1px); }
.btn-nav:active:not(:disabled) { transform: translateY(0); }
.btn-nav:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.btn-nav.btn-finish {
  background: linear-gradient(135deg, #1b5e20, #388e3c);
  color: var(--color-on-primary);
}
.btn-nav.btn-finish:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }

/* ══════════════════════════════════════════════
   TOPBAR BADGES
══════════════════════════════════════════════ */
#topbar-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}

.topbar-badge-counter {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 1.5px solid #ffc107;
  color: #b45309;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: clamp(18px, 2.2vh, 22px);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(255,193,7,0.25);
  cursor: pointer;
  font-family: inherit;
}

.topbar-badge-popup {
  display: none;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 8px;
  min-width: 220px;
  z-index: 50;
}

.topbar-badge-popup.open { display: flex; }

.topbar-badge-popup-item {
  font-size: clamp(16px, 2vh, 20px);
  color: var(--color-text);
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   BADGE CELEBRATION OVERLAY
══════════════════════════════════════════════ */
.badge-celebration-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.badge-celebration-overlay.active {
  display: flex;
}

.badge-celebration-card {
  background: var(--color-surface);
  border-radius: 24px;
  padding: 40px 36px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  animation: badge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.celebration-fireworks {
  font-size: clamp(2.25rem, 5.2vh, 3rem);
  margin-bottom: 8px;
}

.celebration-icon {
  font-size: clamp(3.75rem, 8.6vh, 5rem);
  line-height: 1;
  margin-bottom: 12px;
}

.celebration-badge-label {
  font-size: clamp(18px, 2.2vh, 22px);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.celebration-title {
  font-size: clamp(28px, 3.6vh, 36px);
  font-weight: 700;
  color: var(--color-primary-deep);
  margin-bottom: 14px;
}

.celebration-msg {
  font-size: clamp(22px, 2.8vh, 28px);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 28px;
}

.celebration-btn {
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-accent));
  color: var(--color-on-primary);
  border: none;
  border-radius: 14px;
  padding: 14px 40px;
  font-size: clamp(24px, 3vh, 30px);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}

.celebration-btn:hover  { opacity: 0.9; transform: translateY(-2px); }
.celebration-btn:active { transform: translateY(0); }

/* ══════════════════════════════════════════════
   UNIT CERTIFICATE — شهادة الوحدة (طبقة محقونة من app.js)
══════════════════════════════════════════════ */
/* خطّ Tajawal — خطّ الواجهة الأساسيّ (‎--font-family‎) والشهادة، مضمَّن محلّياً (لا طلبات شبكة على file://) */
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:400;
  src:url('tajawal-400.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:500;
  src:url('tajawal-500.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:700;
  src:url('tajawal-700.woff2') format('woff2'); font-display:swap; }

/* احتفاليّة الأشرطة المتطايرة عند أول ظهورٍ للشهادة */
.cert-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; }
.cert-ribbon {
  position:absolute; top:-6%; border-radius:2px; opacity:.95;
  animation-name:cert-ribbon-fall; animation-timing-function:cubic-bezier(.35,.15,.5,1);
  animation-iteration-count:1; animation-fill-mode:forwards;
}
@keyframes cert-ribbon-fall {
  0%   { transform:translate(0,-12vh) rotate(0deg);            opacity:0; }
  8%   { opacity:1; }
  100% { transform:translate(var(--dx,0), 112vh) rotate(720deg); opacity:.12; }
}

.unit-cert-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.68);
  z-index: 2600;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  box-sizing: border-box;
}
.unit-cert-overlay.active { display: flex; }

.unit-cert-card {
  background: var(--color-surface);
  border-radius: 22px;
  padding: 22px 22px 18px;
  text-align: center;
  max-width: 940px;
  width: 100%;
  max-height: 96vh;
  max-height: 96dvh;   /* كالشِّل: المرئيّ لا الشاشة — وإلا خرج زرّا «حفظ/إغلاق» تحت الحافة على اللوحي */
  overflow: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  animation: badge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.unit-cert-fireworks {
  font-size: clamp(2rem, 4.6vh, 2.75rem);
  margin-bottom: 4px;
}
.unit-cert-heading {
  font-size: clamp(22px, 3vh, 30px);
  font-weight: 800;
  color: var(--color-primary-deep);
  margin-bottom: 14px;
}

.unit-cert-canvas {
  display: block;
  width: min(880px, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

.unit-cert-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}
.unit-cert-btn {
  border: none;
  border-radius: 12px;
  padding: 12px 34px;
  font-size: clamp(18px, 2.4vh, 24px);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.unit-cert-btn.save {
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-accent));
  color: var(--color-on-primary);
  border: none;
}
.unit-cert-btn:hover  { opacity: 0.92; transform: translateY(-2px); }
.unit-cert-btn:active { transform: translateY(0); }

.unit-cert-note {
  margin-top: 12px;
  font-size: clamp(13px, 1.7vh, 16px);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* «شهاداتي» — قائمة داخل حوار الشِّل */
.certs-empty {
  font-size: clamp(16px, 2.1vh, 20px);
  color: var(--color-text-muted);
  line-height: 1.7;
  text-align: center;
  padding: 10px 4px;
}
.certs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow: auto;
}
.certs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: right;
}
.certs-row-title { font-size: clamp(15px, 2vh, 19px); font-weight: 700; color: var(--color-text); }
.certs-row-sub   { font-size: clamp(13px, 1.7vh, 16px); color: var(--color-text-muted); margin-top: 3px; }
.certs-row-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  padding: 9px 20px;
  font-size: clamp(14px, 1.9vh, 17px);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: var(--color-primary);
  color: var(--color-on-primary);
  transition: opacity 0.2s;
}
.certs-row-btn:hover { opacity: 0.9; }

/* ══════════════════════════════════════════════
   CUSTOM DIALOG — يحلّ محلّ alert/confirm/prompt
══════════════════════════════════════════════ */
.app-dialog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.app-dialog-overlay.active { display: flex; }

.app-dialog-box {
  background: var(--color-surface);
  border-radius: 20px;
  padding: 32px 28px 24px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  animation: dialog-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  direction: rtl;
  text-align: right;
}

@keyframes dialog-pop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.app-dialog-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary-deep);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--color-border);
}

.app-dialog-msg {
  font-size: var(--fs-sub);
  color: var(--color-text);
  line-height: 1.65;
  margin-bottom: var(--sp-6);
}

.app-dialog-btns {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
}

.app-dialog-btn {
  padding: var(--sp-3) var(--sp-6);
  border: none;
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  min-width: 110px;
}
.app-dialog-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.app-dialog-btn:active { transform: translateY(0); }

.app-dialog-btn-confirm {
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-accent));
  color: var(--color-on-primary);
}

.app-dialog-btn-cancel {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}

/* ═══ وضع المعلّم السرّي — كلمة المرور + منتقي الدروس ═══ */
.teacher-pw-wrap { display: flex; flex-direction: column; gap: var(--sp-2); text-align: start; }
.teacher-pw-label { font-size: var(--fs-sm); color: var(--color-text-muted); font-weight: 700; }
.teacher-pw-input {
  font-size: var(--fs-body);
  font-family: inherit;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  letter-spacing: 3px;
  text-align: center;
}
.teacher-pw-input:focus { outline: none; border-color: var(--color-primary); }
.teacher-pw-err { min-height: 1.2em; font-size: var(--fs-sm); color: var(--color-wrong-text); font-weight: 700; }

/* لوحُ هويّة الحساب فوق حقل الرمز (أ285) — يقرأ الطالبُ اسمَه قبل كتابة رمزه فيتبيّن
   أنّه على حسابه لا على حساب من سبقه على الجهاز. حدُّه مرسومٌ لا مسطَّح: سطحُ
   surface-alt وحدَه يذوب في خلفيّة الحوار فيُقرأ فراغاً لا بطاقة. */
.ask-code-who {
  text-align: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-primary);
}
.ask-code-who-cap {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}
.ask-code-who-name {
  display: block;
  font-size: var(--fs-heading);
  font-weight: 800;
  color: var(--color-primary-deep);
  line-height: 1.5;
  overflow-wrap: anywhere;      /* اسمٌ ثلاثيٌّ طويل ينكسر داخلَ اللوح ولا يمدّه فوق الحوار */
}

.teacher-pick-hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-3); text-align: start; }
.teacher-lesson-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; text-align: start; }
.teacher-unit-head {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--color-primary-deep);
  padding: var(--sp-2) 4px 2px;
  position: sticky; top: 0;
  background: var(--color-surface);
}
.teacher-lesson-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%;
  font-size: var(--fs-sub);
  font-family: inherit;
  color: var(--color-text);
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  text-align: start;
  transition: background 0.12s, border-color 0.12s;
}
.teacher-lesson-btn:hover { background: var(--color-surface-alt); border-color: var(--color-primary); }
.teacher-lesson-btn.current { border-color: var(--color-primary); background: var(--color-surface-alt); }
/* الخيار الجامع في رأس القائمة — يُميَّز عن صفّ درسٍ عاديّ بثقل الخطّ وفاصلٍ أسفله */
.teacher-all-lessons {
  font-weight: 800;
  border-style: dashed;
  border-color: var(--color-primary);
  margin-bottom: var(--sp-2);
}
.teacher-cur-tag { font-size: var(--fs-xs); font-weight: 800; color: var(--color-primary-deep); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════════
   م0 — شاشةُ الدخول على الشاشات القصيرة (الجوّال بالوضع العرضي)
   reports/PLAN-shell-landscape.md §4-م0 · reports/CHANGES.md ت15 · أمر مالك 2026-09-04

   العطل الذي تعالجه (مقيسٌ لا مفترَض، ملفٌّ نظيف، محاكي جهاز 800×360):
   `.field-row-bottom` لاصقٌ بأسفل بطاقة الدخول وكلُّ مقاساته عند أرضياتها الثابتة،
   فارتفاعه لا يكاد يتغيّر بين المعمل والجوّال (274 ← 249) بينما تنكمش البطاقةُ حوله
   (649 ← 288) — فيبتلع ٨٦٪ منها ولا تبقى إلا نافذةُ تمريرٍ عرضُها ٣٩ بكسلًا، فيقع
   تحته أبدًا حقلُ «الرقم التسلسلي» (أوّلُ حقلٍ مطلوب) فلا يُبلَغ بأيّ تمرير.

   عتبةُ الاستعلام ٦٢٠px — **مقيسةٌ لا مختارة:** مسحُ ارتفاعاتٍ من ٣٢٠ إلى ٩٠٠ (خطوة ٢٠)
   أثبت أنّ الخانةَ محجوبةٌ عند ٥٤٠ و٥٦٠ و٥٨٠ أيضًا (البطاقةُ ٤٦٨–٥٠٨ والصفُّ اللاصق ٢٤٩)،
   وتنفرج من ٦٠٠ فأعلى. فأوّلُ عتبةٍ آمنةٍ فوق نطاق العطل هي ٦٢٠ — **وهي `SAFE_H` نفسها**
   في `initShellZoom` (أ226)، أي حدُّ «المنفذ القصير» الذي عايره المحرّك أصلًا بمسحٍ حيّ.
   (بلاغُ عائض «خانة إدخال رقم الطالب لا تظهر» بعد ت15 — كانت العتبةُ ٥٢٠ فتركت هذا النطاق.)

   المنهج: **إضافةٌ محضةٌ في ذيل الملفّ** — لا يُلمَس أيُّ سطرٍ أصليٍّ من نصّ الأمّ،
   فالانحرافُ كتلةٌ واحدةٌ تُرفَع دفعةً واحدةً متى شئنا. وكلُّ قاعدةٍ هنا مقصورةٌ على
   `#screen-login` داخل `@media (max-height:620px)` — فشاشةُ المحطة وشاشاتُ الاختيار
   وسطحُ المكتب (١٣٦٦×٧٦٨) خارجَ نطاقها تمامًا، ومعالجتها في م1–م3 بعد اعتمادها.

   ⚠ الرابطان `#id-teacher-link`/`#id-newreg-link` يبقيان **داخل** الصفّ اللاصق:
     أ221-ب في app.js وثّق أنّ الموضعَين البديلَين جُرّبا وأخفقا بالقياس (بعده يُرسَم
     خارج حدّ قصّ البطاقة فلا يُلمَس، وقبله يعلوه اللاصقُ فيحجبه). فالمعالجةُ هنا أن
     يتقاسما سطرًا واحدًا بدل سطرين، لا أن يُنقلا. وأنماطُهما مضمَّنةٌ في app.js
     (`flex:1 1 100%`) فتغلب الورقةَ بالخصوصية — ولذلك `!important` هنا عمدًا.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-height: 620px) {

  /* الحشوةُ النسبيّة تُحسب من **العرض**، فتنزف في الوضع العرضيّ أكثرَ ما يكون الارتفاعُ
     شحيحًا (٢٦.٧ أعلى + ٢٦.٧ أسفل على منفذٍ عرضُه ٨٠٠). مقصورةٌ على شاشة الدخول:
     شاشةُ المحطة تتبع م1 بعد اعتمادها. */
  body:has(#screen-login.active) { padding: 4px 2%; }

  /* لوحُ العلامة: بطلٌ على ٤٢٪ من العرض بأيقونةٍ ١١٢px — يضيّق عمودَ النموذج فيلتفّ
     نصُّه أسطرًا، والالتفافُ ارتفاعٌ لا نملكه. */
  #screen-login .panel-brand    { flex: 0 0 30%; padding: 10px 12px; }
  #screen-login .brand-icon     { font-size: 44px; margin-bottom: 6px; }
  #screen-login .brand-title    { font-size: 20px; }
  #screen-login .brand-subtitle { font-size: 14px; margin-top: 4px; }
  #screen-login .brand-divider  { margin: 8px auto 0; }

  #screen-login .panel-form { padding: 6px 10px; }
  #screen-login .form-card  { padding: 8px 14px 0; border-radius: 14px; }

  /* أطولُ عنصرٍ منفردٍ في البطاقة: لافتةُ «الدخول السريع» تلتفّ ٤–٥ أسطرٍ بخطّ ٢٥px
     فتبلغ ١٦٠ بكسلًا — وهي أوّلُ ما يعلو حقلَ الرقم التسلسلي فيدفعه تحت اللاصق. */
  #screen-login .form-greeting { font-size: 14px; line-height: 1.45; margin-bottom: 6px; }

  #screen-login .field       { margin-bottom: 6px; }
  #screen-login .field label { font-size: 14px; margin-bottom: 3px; }
  /* ٤٤px أرضيةُ لمسٍ صريحةٌ لا ناتجَ حشوٍ — فالحشوُ ينكمش والهدفُ لا ينكمش معه. */
  #screen-login .field input { min-height: 44px; padding: 4px 10px; font-size: 16px; }

  #screen-login .field-note         { font-size: 12px; line-height: 1.45; padding: 5px 10px; margin-top: 4px; }
  #screen-login .error-msg          { font-size: 13px; margin-top: 2px; }
  #screen-login .group-login-toggle { font-size: 12px; padding: 4px 10px; margin-top: 4px; }
  #screen-login .device-note        { font-size: 12px; }
  #screen-login .divider            { font-size: 13px; margin: 6px 0; }

  /* الصفُّ اللاصق نفسُه — أصلُ العطل: حشوةٌ سفليّةٌ ٢٤px وسطران للرابطَين وزرٌّ بخطّ ٢٥px. */
  #screen-login .field-row-bottom      { padding-top: 4px; padding-bottom: 6px; gap: 8px; margin-top: 0; }
  #screen-login .field-compact label   { font-size: 12px; margin-bottom: 2px; }
  #screen-login .field-compact input   { min-height: 44px; padding: 4px 6px; font-size: 15px; }
  #screen-login .field-compact .error-msg { font-size: 11px; margin-top: 1px; }
  #screen-login .btn-login             { min-height: 44px; padding: 6px 14px; font-size: 18px; margin-top: 0; }

  #screen-login #id-teacher-link,
  #screen-login #id-newreg-link { flex: 1 1 auto !important; font-size: 11px !important; margin-top: 2px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ت17 — بطاقات الاختيار على الجوّال العرضي (أمر مالك 2026-09-05)

   **العلّة المقيسة** على 844×390 قبل هذه الكتلة: الترويسة وحدها ١٢٩ بكسلًا من
   ٣٩٠، والبطاقة ٣٢٠×٢٣٧ باثنتين في الصف — فلا بطاقة **واحدة** تظهر كاملة، ويبدأ
   الطالب رحلته أمام شريحةٍ من بطاقتين مقطوعتين. والسبب أن كل مقاسات هذه الشاشات
   `clamp()` حدُّها الأدنى مُعايَرٌ للبروجكتور (عنوان الشاشة ٣٣px · عنوان البطاقة
   ٢٤px · الأيقونة ٣٩px)، والحدُّ الأدنى هو ما يسري حين يقصر الارتفاع.

   **والحدّ ٥٠٠px لا ٦٢٠px** كنظيره في كتلة `#screen-login` أعلاه: ٦٢٠ يلتقط حاسوبًا
   محمولًا صغيرًا (1280×720 ⇒ منفذُ عرضٍ ~٦٠٠) فيُصغِّر بطاقات حصّةٍ تُعرض على
   بروجكتور. والجوّال العرضي ٣٦٠–٤٣٠ ارتفاعًا، فـ٥٠٠ يفصل الاثنين بلا التباس.

   ولا تُمَسّ شاشة المحطة (`#ns-activity`): لها معالجتها في ت14.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px), (max-width: 500px) {
  /* ── الترويسة: ١٢٩px ← ~٥٥px ── */
  #screen-nav .section-head    { margin-bottom: 8px; }
  #screen-nav .level-tag       { font-size: 11px; padding: 2px 10px; margin-bottom: 4px; letter-spacing: 0; }
  #screen-nav .section-head h1 { font-size: 18px; }
  #screen-nav .section-head p  { font-size: 12px; margin-top: 1px; }

  /* حشوُ اللوح ٢٤px على الجانبين يقتطع ٤٨ من عرضٍ لا يحتملها.
     ⚠ **وشاشةُ المحطة مستثناة صراحةً**: هي داخل `.nav-content` نفسِه، وعرضُها
     مقيسٌ في تحقّق كل محطة (مسحُ المقاسات في `tools/verify.mjs`) — فتضييقُ الحشو
     يزيح ٢٠px تحت رسمٍ اعتُمد عليها. والنمطُ نظيرُ ما في السطر ٦٢٧ أعلاه. */
  #screen-nav.active:not(:has(#ns-activity.active)) .nav-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* ── البطاقة: ٣٢٠px ← ١٨٠px، فأربعٌ في الصف بدل اثنتين ──
     والرقم مقيسٌ لا مذوق: عرضُ الشبكة على 844 يصير ٧٨٢ بعد الحشو أعلاه،
     و٤×١٧٦+٣×٨ = ٧٢٨ في شبكةٍ عرضها ٧٤٨ — بهامشٍ لا يسقط بكسلين. فتظهر شاشة الوحدات الأربع **كاملةً بلا تمرير**،
     وهي أول ما يرى الطالب. وما زاد على صفٍّ (دروسٌ أو محطاتٌ كثيرة) يُمرَّر في
     `.nav-content` كما هو.
     والخطُّ يُقرأ من مسافة الذراع لا من آخر الفصل. وهدفُ اللمس يبقى فوق ٤٤px
     بفارقٍ كبير (البطاقة ~١٣٠px ارتفاعًا) فلا يُشترط له حدٌّ صريح. */
  #screen-nav .cards-grid    { gap: 8px; }
  #screen-nav .card          { flex: 0 1 176px; padding: 12px 12px 10px; border-radius: 14px; gap: 4px; }
  #screen-nav .card-icon     { font-size: 26px; margin-top: 2px; }
  #screen-nav .card-title    { font-size: 15px; }
  #screen-nav .card-subtitle { font-size: 12px; line-height: 1.4; }

  /* الرفعُ عند التحويم أثرٌ لا معنى له بلا فأرة، ويزيح البطاقة تحت الإصبع. */
  #screen-nav .card:hover { transform: none; box-shadow: 0 2px 12px rgba(13,71,161,0.08); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ت18 — قشرة الجوّال: زرّ الرجوع وحده (أمر مالك 2026-09-05)

   **المقيس قبل:** `.topbar` ارتفاعها ٧٢px ثابتة — **١٨٪ من شاشة ٣٩٠**، وتحمل على
   جوالٍ سبعةَ عناصر: رجوع · فتات الطريق (٥٥٥px عرضًا) · النجوم · الشارات · قائمة
   الطالب · تغيير الطالب · مقياس العرض. والمساحة المستثمَرة في المحطة هي ما بقي.

   **بعد:** ٤٨px — والحدُّ ليس ذوقًا: هدف اللمس ٤٤px شرطٌ في العقد، فلا تنزل القشرة
   تحت ٤٨ ما دام الزرّ فيها. الكسب ٢٤px = ٦٪ من الشاشة تذهب إلى لوح المحطة.

   ⚠ **ومقياس العرض يُحجَب ولا يُعطَّل:** على الجوال ينزل تلقائيًا إلى ٦٠٪ داخل
   المحطة (`autoFit` في app.js) وهو ما يُدخلها في الشاشة أصلًا — والمحجوب واجهتُه
   لا آليّتُه. والثمن المعلن: يفقد الطالب الضبط اليدوي (+/−)، والتلقائي يكفيه.

   وتُحجَب معها قائمة الطالب (إحصائياتي · شهاداتي) — لا موضع لها في قشرة بزرّ واحد.
   ولا شيء من هذا يمسّ سطح المكتب ولا البروجكتور: الحدُّ ٥٠٠px كما في ت17.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px), (max-width: 500px) {
  #screen-nav .topbar { height: 48px; padding: 0 10px; gap: 8px; }

  /* الزرّ الوحيد الباقي — ٤٤px هدفًا صريحًا لا ناتجَ حشو، فالحشو ينكمش والهدف لا. */
  #screen-nav #btn-back {
    min-height: 44px;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* كل ما عداه يخرج من القشرة. ومقياس العرض `div` بلا صنف ولا معرّف في المحرّك،
     فيُلتقط بعنوانه — وهو أثبت ما فيه. */
  #screen-nav #breadcrumb,
  #screen-nav .topbar-stats,
  #screen-nav #topbar-badges,
  #screen-nav .student-menu-wrap,
  #screen-nav .topbar > div[title^="مقياس العرض"] { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ت19 — قشرة الجوّال: زرّ رجوعٍ عائم بلا صفٍّ محجوز (أمر مالك 2026-09-05)

   ت18 قلّصت الصفّ إلى ٤٨px؛ وهذا يُلغيه. `.topbar` تخرج من عمود `#screen-nav`
   بـ`position:absolute` فلا تحجز ارتفاعًا أصلًا، ويرث `.nav-content` **كامل**
   الشاشة (٣٠٨ ← ٣٩٠ على منفذٍ ٣٩٠ — كسب ٢٧٪ فوق ما كسبته ت18).

   والزرّ يعوم في الزاوية العليا اليمنى **فوق** لوح المحطة:
   • `pointer-events:none` على الشريط و`auto` على الزرّ وحده — فالشريط الشفّاف
     الممتدّ لا يبتلع لمسةً موجّهةً إلى المحطة تحته. بدونه يصير عرضُ الشريط كلّه
     حاجزًا ميّتًا فوق أعلى المحطة.
   • خلفيةٌ صلبة وظلٌّ خفيف للزرّ: يعوم فوق رسمٍ قد يكون أيَّ لون، فلا يُقرأ بلا لوح.
   • `z-index:30` فوق لوح المحطة ودون طبقة «أدر جهازك» (2147483647).

   ⚠ **والثمن المعلن: الزرّ يغطّي زاوية المحطة العليا اليمنى.** عقد المحطة يمنع
   التراكب **داخلها**، وهذا تراكبٌ من القشرة فوقها — لا يلتقطه `verify.mjs` لأنه
   يقيس داخل جذر المحطة وحده. فحُصّ يدويًّا على المحطات المبنية كلها عند مقاسات
   الجوال (انظر reports/CHANGES.md ت19).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px), (max-width: 500px) {
  #screen-nav.active { position: relative; }

  #screen-nav .topbar {
    position: absolute;
    top: 0; right: 0; left: auto;
    width: auto;
    height: auto;
    padding: 6px 8px;
    background: transparent;
    box-shadow: none;
    z-index: 30;
    pointer-events: none;          /* الشريط لا يعترض؛ الزرّ وحده يستقبل */
  }

  #screen-nav #btn-back {
    pointer-events: auto;
    min-height: 44px;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: 0 1px 6px rgba(13,71,161,0.18);
  }

  /* اللوح يرث الشاشة كاملةً — لا صفَّ فوقه يقتطع منها. */
  #screen-nav .nav-content { padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ت20 — حارس تضخيم الخطّ التلقائي (2026-09-05)

   **العلّة:** متصفحات الجوال تكبّر النصوص من تلقائها (text autosizing) حين ترى
   نصًّا صغيرًا في كتلةٍ عريضة — وشرطُه متحقّقٌ عندنا بامتياز: المحرّك يضع
   `zoom:0.6` على الجذر داخل المحطة على الجوال. فتفيض الحروف خارج صناديق البطاقات
   الثابتة: بطاقاتٌ تتراكب، ونصٌّ يُقصّ («الكاميرا الرقمية (Digital» في لقطة مالك
   على جهازٍ حقيقي، محطة u1-l1-s3).

   **ولماذا لم يلتقطه أي مسحٍ آلي عندنا:** محاكاة Chrome على الحاسب **لا تُطبّق**
   هذا التضخيم إطلاقًا. فمسحُ ثمانية مقاسات جوّالية أعطى صفر تراكبٍ بطاقةٍ ببطاقة،
   بينما الجهاز الحقيقي يتراكب. الفجوةُ في أداة القياس لا في المقاس.

   والحارس يُلغي التكبير التلقائي **ولا يمسّ تكبير المستخدم بأصابعه**. وأثره على
   سطح المكتب معدوم (المتصفحات هناك لا تضخّم أصلًا) — فهو تصحيحُ سلوكٍ لا تصميم.
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ت21 — تراجعٌ مقيَّد عن ت19: لا عَوَمَ فوق المحطة (2026-09-05)

   **القياس:** الزرّ العائم يغطّي محتوى **١٠ محطات من ١٠** عند ٧٧٦×٣١٠ و٧٧٦×٤٢٠
   و٨٤٤×٣٩٠ — «الشاشة (Monitor)» · «الطابعة (Printer)» · «شريط المهام» · شارات
   الخطوات المرقّمة. ليست حالةً حدّية بل قاعدة: المحطات ترسم إلى حافة مسرحها.

   ⚠ **وفحصي الأول قال «صفر تغطية» وكان خطأً**: كان يفتح كل محطة ويقيس على شاشة
   المقدمة (م1) قبل الدخول إلى المسرح. الدرس مسجَّل: قياسُ التغطية يلزمه تجاوز
   المقدمة، وإلا قِيست شاشةٌ فارغةٌ وأُعلن نجاح.

   فيبقى العَوَم على شاشات الاختيار (الوحدات/الدروس/المحطات — لا تراكب فيها،
   وعنوانها موسَّط)، ويعود الصفّ المحجوز ٤٨px **داخل المحطة وحدها**.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px), (max-width: 500px) {
  #screen-nav.active:has(#ns-activity.active) .topbar {
    position: static;
    height: 48px;
    background: var(--color-surface);
    box-shadow: 0 2px 10px rgba(0,0,0,0.09);
    pointer-events: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ت23 — شريط تنقّل المحطة على الجوّال (2026-09-05)

   **المقيس على ٧٧٦×٤٢٠** (منفذ التطبيق المثبَّت عند مالك): شريط «السابق/التالي»
   يأخذ **٩١ بكسلًا من ٣٤١** — ٢٧٪ من اللوح لزرَّين. والسبب نفسه المتكرر:
   `.btn-nav` خطّه `clamp(28px, 3.6vh, 32px)` — حدُّه الأدنى ٢٨px مُعايَرٌ ليُقرأ
   من آخر الفصل، فيسري كاملًا حين يقصر الارتفاع.

   بعد: الزرّ ٤٤px (هدف العقد صريحًا) والشريط ~٥٧ — **٣٤ بكسلًا تعود إلى مسرح
   المحطة**، والرسم محبوسٌ بالارتفاع فينمو بها كلّها.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px), (max-width: 500px) {
  #screen-nav .activity-nav-bar { padding: 6px 12px; gap: 8px; }
  #screen-nav .btn-nav {
    min-height: 44px;
    padding: 0 18px;
    font-size: 15px;
    border-radius: 10px;
  }
  #screen-nav .btn-nav:hover:not(:disabled) { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ت24 — حذف هامش الجسم على الجوّال (أمر مالك 2026-09-05 · صُحّح 2026-09-06)

   `body { padding: 2% }` إطارٌ تجميليّ يقتطع ٣١ بكسلًا في كل اتجاه على ٧٧٦×٤٢٠.

   ⚠ **والنسخة الأولى استبدلته بـ`env(safe-area-inset-*)` احتياطًا — وكان خطأً.**
   في وضع التطبيق المثبَّت يُزيح النظام منفذَ العرض بعيدًا عن قصّة الكاميرا **ثم**
   يُبلغ عن الإزاحة في `env()` — فالحشو يُضاف فوق إزاحةٍ قائمة، أي إزاحة مضاعفة.
   وهو ما رآه مالك: هامشٌ علويّ وأيسر باقيان بعد «حذف» الهامش. (وفي سفاري كانت
   `env()` أصفارًا فلم يظهر الأثر — ولذلك لم يلتقطه أي قياس عندي.)

   فالصواب **صفرٌ صريح**: المتصفح وحده يتولّى الإبعاد عن القصّة، ولا نضاعفه.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px), (max-width: 500px) {
  body { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ت25 — حشو اللوح الرأسي على الجوّال (أمر مالك 2026-09-05)

   ت17 خفّضت حشو `.nav-content` **الجانبي** ونسيت الرأسي (`18px 24px 28px`).
   والكسب **على شاشات الاختيار وحدها**: أول عنصر ينتقل من ٦٦ إلى ٣ — ١٨ بكسلًا.

   ⚠ **ولا تكسب شيئًا داخل المحطة**، وكنت ظننتها تكسب. تشريح السلسلة كاملةً:
   شريط القشرة ٠→٤٨ · لوح المحتوى top=48 وحشوه **صفرٌ أصلًا** بقاعدةٍ قائمة ·
   جذر المحطة top=48 · **وأول حبرٍ عند ٧٤**. فالـ٢٦ الباقية حشوٌ داخل بطاقة
   تعليمة المحطة نفسها — محتوى محطة لا قشرة، ولا يُمسّ من هنا.
   وبقيت القاعدة لأن كسب شاشات الاختيار حقيقي مقيس.
   */
@media (max-height: 500px), (max-width: 500px) {
  #screen-nav .nav-content { padding-top: 0; padding-bottom: 0; }
}