/**
 * أساس تصميم Tapio: الرموز (DESIGN.md §1) وقطعة الشريط العلوي المشتركة.
 *
 * ملفٌّ واحد تشترك فيه شاشات التصميم الجديدة كلها (شاشة المتدرب، ورئيسية
 * المعلّم، وما يأتي بعدهما). كل رمزٍ مسبوق بـ `--tp-` ومعرَّف على الصنف
 * `.tp` وحده، فلا يلمس رموز app.css ولا بقية الصفحات.
 *
 * القاعدة: لا لون ولا قياس خط ولا مسافة ولا استدارة يُكتب مباشرةً في أي
 * قاعدة — كلها من هنا.
 */

/* ------------------------------------------------------------ الرموز */

.tp {
  /*
   * العلامة — الألوان الأربعة من الشعار نفسه.
   * القاعدة التي تحكمها: التركوازي مسار الطالب، والبنفسجي مسار المعلّم،
   * ولا يختلطان. الكحلي للنصّ وللخلفية الداكنة.
   */
  --tp-navy: #221b5b;
  --tp-purple: #7a5fe0;
  /* بنفسجيٌّ مرفوع السطوع للسِمَة الداكنة — كما يرفع الثيم سطوع التركوازي
     هناك. يبلغ 5.03:1 على خلفية الداكن مقابل 4.43 قبله. */
  --tp-purple-light: #8f78e8;
  --tp-purple-tint: #b7a6f5;
  --tp-cyan: #00a3a3;

  /* الأسطح والنصوص — السِمَة الفاتحة */
  --tp-bg: #faf9f6;
  /* البطاقة أبيض نقيّ فوق خلفيةٍ عاجية: الثيم يفرّق بينهما */
  --tp-surface: #ffffff;
  --tp-border: #e2e0dc;
  --tp-track: #e2e0dc;
  --tp-slot: #f2f0ec;
  --tp-neutral-fill: #ecebe7;
  --tp-text: #221b5b;
  --tp-muted: #6e6a8f;
  /*
   * الخافت يحمل رقم المؤقّت المنتهي ونصّ الإجابة الباهت — معلومةً لا زخرفة.
   * لذا لا يأخذ لون الشرطات البديلة في المخطوطة (‎#b9b6cb‎، وتباينه 1.88:1)
   * بل صبغته نفسها عند 4.51:1.
   */
  --tp-faded: #746e98;
  --tp-white: #ffffff;

  /* درجات الإجابات — واحدة في السِمَتين */
  --tp-a: #d6403f;
  --tp-b: #0e8fa0;
  --tp-c: #c8811a;
  --tp-d: #7a5fe0;
  --tp-correct: #1f9d55;

  /* ما يختلف بين السِمَتين من أدوارٍ لا ألوان */
  --tp-accent: var(--tp-purple);
  --tp-waiting: var(--tp-purple);
  --tp-select-ring: var(--tp-navy);
  --tp-chip-bg: var(--tp-navy);
  --tp-chip-text: var(--tp-white);
  /* أغمق من ‎--tp-faded‎ عمداً: هذا النصّ يقع على ‎--tp-neutral-fill‎ لا على
     الخلفية، وهو سطحٌ أغمق يبتلع الدرجة الأفتح (3.98:1 مقابل 4.91:1). */
  --tp-neutral-text: #666086;
  --tp-neutral-badge-bg: var(--tp-white);
  --tp-neutral-badge-text: #666086;
  --tp-status-correct: var(--tp-correct);
  --tp-status-wrong: var(--tp-a);
  /* بنفسجيٌّ أغمق درجةً من لون العلامة: النصّ الشبَحي 13px، ولون العلامة
     نفسه يقف عند 4.39:1 على الفاتح — أي تحت العتبة بقليل. */
  --tp-ghost-text: #785ce0;
  --tp-menu-btn-bg: rgba(122, 95, 224, 0.08);
  --tp-scrim: rgba(34, 27, 91, 0.45);
  --tp-canvas: #edecea;
  --tp-dim: 0.35;

  /* المسافات — القيم المستعملة في DESIGN.md وحدها */
  --tp-s-2: 2px;
  --tp-s-4: 4px;
  --tp-s-6: 6px;
  --tp-s-8: 8px;
  --tp-s-10: 10px;
  --tp-s-12: 12px;
  --tp-s-14: 14px;
  --tp-s-16: 16px;
  --tp-s-18: 18px;
  --tp-s-20: 20px;
  --tp-s-24: 24px;

  /* الاستدارات */
  --tp-r-pill: 99px;
  --tp-r-frame: 28px;
  --tp-r-16: 16px;
  --tp-r-14: 14px;
  --tp-r-12: 12px;
  --tp-r-10: 10px;

  /* قياسات الخط والأوزان */
  --tp-fs-26: 26px;
  --tp-fs-22: 22px;
  --tp-fs-19: 19px;
  --tp-fs-18: 18px;
  --tp-fs-17: 17px;
  --tp-fs-16: 16px;
  --tp-fs-15: 15px;
  --tp-fs-14: 14px;
  --tp-fs-13: 13px;
  --tp-fs-12: 12px;
  --tp-w-700: 700;
  --tp-w-600: 600;
  --tp-w-500: 500;
  --tp-lh: 1.7;

  /* قياسات المكوّنات */
  --tp-tap: 56px; /* الحد الأدنى لخيار الإجابة */
  --tp-tap-min: 44px; /* الحد الأدنى لكل زرٍّ آخر */
  --tp-opt-min: 60px;
  --tp-badge: 34px;
  --tp-mark: 30px;
  --tp-num-w: 30px;
  --tp-bar-h: 6px;
  --tp-dot: 6px;
  --tp-ring: 3px;
  --tp-hair: 1px;
  --tp-media-h: 110px;
  --tp-btn-h: 48px; /* زرّ البطاقة الأساسي */
  --tp-avatar: 36px;
  --tp-skel-h: 132px; /* هيكل انتظارٍ بمقاس بطاقة النشاط */
  --tp-menu-row: 48px;
  --tp-tab-h: 52px; /* خطوة التبويب */
  --tp-tab-num: 24px;
  --tp-pill: 34px; /* حبّة رقم السؤال — داخل هدفٍ 44px */
  --tp-panel-w: 280px; /* اللوحة الجانبية للمصمّم */
  --tp-textarea-h: 72px;
  --tp-review-h: 64px; /* صفّ المراجعة */
  --tp-switch-w: 28px;
  --tp-switch-h: 28px;
  --tp-s-11: 11px;
  --tp-r-20: 20px;
  --tp-menu-min: 220px;
  --tp-menu-max: 280px;
  /* مقاس إطار المخطوطة — لصفحة المعاينة وحدها، لا للشاشة الحقيقية */
  --tp-frame-w: 390px;
  --tp-frame-h: 780px;

  /* الحركة */
  --tp-t-press: 80ms;
  --tp-t-fade: 150ms;
  --tp-t-timer: 1s;
  --tp-t-pulse: 1.2s;
  --tp-t-breathe: 1.6s;

  line-height: var(--tp-lh);
  color: var(--tp-text);
}

/* السِمَة الداكنة: سِمَة الجلسة `.stage` وسِمَة الزائر `.dark` كلتاهما داكنة.
   `:where` تُصفّر الأولوية فيبقى الفرضُ الصريح `.tp-dark` / `.tp-light` أعلى. */
:where(html.dark, html.stage) .tp,
.tp.tp-dark {
  --tp-bg: #171240;
  --tp-surface: #1f1852;
  --tp-border: #322a6e;
  --tp-track: #322a6e;
  --tp-slot: #1f1852;
  --tp-neutral-fill: #1f1852;
  --tp-text: #ffffff;
  --tp-muted: #a29dc6;
  --tp-faded: #a29dc6;
  --tp-accent: var(--tp-purple-light);
  --tp-waiting: var(--tp-purple-tint);
  --tp-select-ring: var(--tp-white);
  --tp-chip-bg: var(--tp-white);
  --tp-chip-text: var(--tp-navy);
  --tp-neutral-text: #a29dc6;
  --tp-neutral-badge-bg: #322a6e;
  --tp-neutral-badge-text: #a29dc6;
  --tp-status-correct: #4fce85;
  --tp-status-wrong: #ff7a72;
  --tp-ghost-text: var(--tp-purple-tint);
  --tp-menu-btn-bg: rgba(143, 120, 232, 0.18);
  --tp-canvas: #171240;
  --tp-dim: 0.3;
}

/* الفرض الصريح للسِمَة الفاتحة داخل صفحةٍ داكنة (صفحة المعاينة تعرض السِمَتين معاً) */
.tp.tp-light {
  --tp-bg: #faf9f6;
  --tp-surface: #ffffff;
  --tp-border: #e2e0dc;
  --tp-track: #e2e0dc;
  --tp-slot: #f2f0ec;
  --tp-neutral-fill: #ecebe7;
  --tp-text: #221b5b;
  --tp-muted: #6e6a8f;
  --tp-faded: #746e98;
  --tp-accent: var(--tp-purple);
  --tp-waiting: var(--tp-purple);
  --tp-select-ring: var(--tp-navy);
  --tp-chip-bg: var(--tp-navy);
  --tp-chip-text: var(--tp-white);
  /* نصّ الخيار المحايد بعد الكشف يقع على ‎--tp-neutral-fill‎ لا على الخلفية،
     وهو سطحٌ أغمق — فيحتاج درجةً أغمق ليبلغ العتبة فوقه (4.91:1). */
  --tp-neutral-text: #666086;
  --tp-neutral-badge-bg: #ffffff;
  --tp-neutral-badge-text: #666086;
  --tp-status-correct: #1f9d55;
  --tp-status-wrong: #d6403f;
  --tp-ghost-text: #785ce0;
  --tp-menu-btn-bg: rgba(122, 95, 224, 0.08);
  --tp-canvas: #edecea;
  --tp-dim: 0.35;
}

/* ------------------- قائمة الشريط العلوي — مشتركة بين الشاشتين */

/* ------------------- طرفا الشريط العلوي — مشتركان بين الصفحتين */

/* بداية الشريط: زرّ القائمة ثم الهوية — كلاهما في جهة بداية القراءة */
.tp-bar-start {
  display: flex;
  align-items: center;
  gap: var(--tp-s-8);
  /*
   * ينكمش بالقصّ الأنيق (…) لا بالاختفاء تحت شارات الطرف الآخر.
   * `min-width: 0` وحده يكفي لذلك، والقصّ نفسه في ‎.tp-who__name‎.
   * لا تُعِد ‎overflow: hidden‎ هنا أبداً: قائمة النقاط الثلاث تنسدل من
   * داخل هذا الطرف وتقع **تحت** الشريط، فيبتلعها القصّ فلا تظهر أصلاً —
   * والزرّ يبدو معطّلاً وهو يعمل. الفحص في ‎menu-visible‎ يقيس ذلك بضغطةٍ
   * وسؤال elementFromPoint، لا بالأبعاد التي لا يغيّرها القصّ.
   */
  flex: 1 1 auto;
  min-width: 0;
}

.tp-bar-end {
  display: flex;
  align-items: center;
  gap: var(--tp-s-8);
  /* يبقى في طرف الشريط حتى لو غابت هوية المعلّم (زائرٌ بلا حساب)، وإلا
     انزلق إلى الوسط وانزلقت معه قائمته فخرجت عن حافة الشاشة */
  margin-inline-start: auto;
}

/*
 * قائمةٌ من سطورٍ كاملة العرض، سطرٌ فوق سطر. لا شبكة ولا أعمدة أبداً:
 * جرّبنا صفّاً من الأزرار داخلها فانضغط كل زرٍّ إلى بضعة أحرف وانكسرت
 * كلماته حرفاً في كل سطر على شاشة الجوال.
 */

.tp-menu {
  position: relative;
}

/*
 * تنسدل من بداية القراءة: يمين الشاشة بالعربية ويسارها بالإنجليزية — من
 * الجهة التي تبدأ منها العين، ومن الجهة التي فيها زرّها.
 */
.tp-menu__panel {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: auto;
  top: calc(100% + var(--tp-s-6));
  z-index: 30;
  /* مربوطةٌ بالزرّ، ولا تتجاوز الشاشة مهما ضاقت */
  width: max-content;
  min-width: var(--tp-menu-min);
  max-width: min(var(--tp-menu-max), calc(100vw - var(--tp-s-24)));
  padding: var(--tp-s-8);
  border-radius: var(--tp-r-12);
  border: var(--tp-hair) solid var(--tp-border);
  background: var(--tp-bg);
  display: flex;
  flex-direction: column;
  gap: var(--tp-s-2);
  /*
   * تمرٌّ داخلها لا تحت الشاشة.
   *
   * كانت تنسدل بطولها كاملاً: على جوّالٍ قصير — وعلى حاسوبٍ نافذتُه غير
   * ممدودة — تسقط سطورها الأخيرة تحت حافة الشاشة، والصفحةُ خلفها لا تُمرَّر
   * لأن اللوحة مطلقةُ الموضع. فيضطرّ صاحبها إلى تصغير الصفحة ليرى «تسجيل
   * الخروج». فصار السقفُ ما تبقّى من الشاشة، وما زاد يُمرَّر داخلها.
   */
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tp-menu__panel[hidden] {
  display: none;
}

/* هوية الحساب: اسمٌ وبريد — بطاقة تعريفٍ لا سطرٌ يُضغط */
.tp-menu__account {
  display: flex;
  flex-direction: column;
  gap: var(--tp-s-2);
  padding: var(--tp-s-8) var(--tp-s-12);
  min-width: 0;
}

.tp-menu__name {
  font-size: var(--tp-fs-13);
  font-weight: var(--tp-w-700);
  color: var(--tp-text);
}

.tp-menu__mail {
  font-size: var(--tp-fs-12);
  color: var(--tp-muted);
  direction: ltr;
  text-align: start;
}

.tp-menu__name,
.tp-menu__mail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* فاصلٌ بين المجموعات: شعرةٌ واحدة، بلا عنوانٍ يزيد الضجيج */
.tp-menu__sep {
  height: var(--tp-hair);
  margin: var(--tp-s-6) var(--tp-s-8);
  background: var(--tp-border);
}

/* السطر: نصٌّ أولاً، وحالةٌ أو رمزٌ ثانويّ في آخره — في سطرٍ واحد لا يلتفّ */
.tp-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tp-s-8);
  width: 100%;
  min-height: var(--tp-menu-row);
  padding: 0 var(--tp-s-12);
  border-radius: var(--tp-r-10);
  border: 0;
  background: transparent;
  color: var(--tp-text);
  font: inherit;
  font-size: var(--tp-fs-14);
  font-weight: var(--tp-w-600);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.tp-menu__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* الحالة («داكنة»، «مكتوم») والرمز: ثانويّان، فلا يزاحمان النصّ */
.tp-menu__state {
  flex: 0 0 auto;
  font-size: var(--tp-fs-12);
  font-weight: var(--tp-w-600);
  color: var(--tp-muted);
}

.tp-menu__icon {
  flex: 0 0 auto;
  font-size: var(--tp-fs-14);
  opacity: 0.75;
}

@media (hover: hover) {
  .tp-menu__item:hover {
    background: var(--tp-neutral-fill);
  }
}

.tp-menu__item:focus-visible {
  outline: var(--tp-s-2) solid var(--tp-purple);
  outline-offset: calc(-1 * var(--tp-s-2));
}

.tp-menu__item--danger {
  color: var(--tp-status-wrong);
}

/*
 * زرّ القائمة: مميَّزٌ بلون العلامة لا رماديٌّ كبقية الشريط — هو المدخل
 * الوحيد إلى الإعدادات والحساب، فلا يصحّ أن يختفي بين الشارات.
 */
.tp-menu__btn,
.tp-menu > .icon-btn {
  min-height: var(--tp-tap-min);
  min-width: var(--tp-tap-min);
  border: var(--tp-hair) solid var(--tp-purple);
  background: var(--tp-menu-btn-bg);
  color: var(--tp-ghost-text);
  font-weight: var(--tp-w-700);
}

/* مفتوحة: يمتلئ الزرّ بلون العلامة فيقول أين أنت */
.tp-menu__btn[aria-expanded='true'] {
  background: var(--tp-purple);
  border-color: var(--tp-purple);
  color: var(--tp-white);
}

.tp-menu__btn:focus-visible {
  outline: var(--tp-s-2) solid var(--tp-purple);
  outline-offset: var(--tp-s-2);
}

/* ------------------- ورقة سفلية — مشتركة (التفاعلات، وأنواع الأسئلة) */

.tp-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--tp-scrim);
}

.tp-sheet[hidden] {
  display: none;
}

.tp-sheet__panel {
  width: min(540px, 100%);
  padding: var(--tp-s-16);
  padding-bottom: max(var(--tp-s-16), env(safe-area-inset-bottom));
  border-top-left-radius: var(--tp-r-16);
  border-top-right-radius: var(--tp-r-16);
  background: var(--tp-bg);
  border-top: var(--tp-hair) solid var(--tp-border);
  display: flex;
  flex-direction: column;
  gap: var(--tp-s-12);
}

.tp-sheet__title {
  margin: 0;
  font-size: var(--tp-fs-14);
  font-weight: var(--tp-w-600);
  color: var(--tp-muted);
  text-align: center;
}

.tp-sheet__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-s-8);
  justify-content: center;
}

.tp-sheet__react {
  min-height: var(--tp-tap-min);
  min-width: var(--tp-tap-min);
  border-radius: var(--tp-r-pill);
  border: var(--tp-hair) solid var(--tp-border);
  background: var(--tp-neutral-fill);
  font-size: var(--tp-fs-22);
  line-height: 1;
  cursor: pointer;
}

.tp-sheet__close {
  min-height: var(--tp-tap-min);
  border-radius: var(--tp-r-pill);
  border: var(--tp-hair) solid var(--tp-border);
  background: transparent;
  color: var(--tp-text);
  font: inherit;
  font-size: var(--tp-fs-15);
  font-weight: var(--tp-w-600);
  cursor: pointer;
}