/* ==========================================================================
   Smart Teacher — Mobile Components (Sprint 1)
   كل selector يبدأ بـ .st-mobile-shell أو .stm- — عزل كامل عن Desktop/Legacy.
   ========================================================================== */

/* ---------- Reset محصور داخل الطبقة فقط ---------- */
.st-mobile-shell *,
.st-mobile-shell *::before,
.st-mobile-shell *::after { box-sizing: border-box; }

.st-mobile-shell {
  margin: 0;
  font-family: var(--stm-font);
  font-size: var(--stm-fs-body);
  line-height: var(--stm-lh-body);
  color: var(--stm-text);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.st-mobile-shell img,
.st-mobile-shell svg { display: block; max-width: 100%; }

.st-mobile-shell button { font: inherit; color: inherit; }

/* ---------- الحاوية ---------- */
.stm-container {
  width: 100%;
  max-width: var(--stm-maxw);
  margin-inline: auto;
  padding-inline: calc(var(--stm-gutter) + var(--stm-safe-left));
  padding-inline-end: calc(var(--stm-gutter) + var(--stm-safe-right));
}

.stm-main {
  position: relative;
  z-index: var(--stm-z-content);
  padding-block-start: var(--stm-s5);
  /* مساحة أسفل تكفي شريط التنقل + منطقة الأمان */
  padding-block-end: calc(var(--stm-nav-h) + var(--stm-safe-bottom) + var(--stm-s7));
}

.stm-main--no-nav {
  padding-block-end: calc(var(--stm-safe-bottom) + var(--stm-s7));
}

/* ---------- Header ---------- */
.stm-header {
  position: sticky;
  top: 0;
  z-index: var(--stm-z-header);
  padding-block-start: var(--stm-safe-top);
  background: linear-gradient(180deg, rgba(5, 8, 23, .92) 0%, rgba(5, 8, 23, .68) 62%, transparent 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.stm-header__inner {
  min-height: var(--stm-header-h);
  display: flex;
  align-items: center;
  gap: var(--stm-s3);
}

.stm-header__title {
  margin: 0;
  font-size: var(--stm-fs-title);
  font-weight: 800;
  line-height: var(--stm-lh-tight);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stm-header__avatar {
  width: var(--stm-avatar-header);
  height: var(--stm-avatar-header);
  border-radius: var(--stm-r-pill);
  border: 1px solid var(--stm-border);
  background: var(--stm-glass);
  padding: 3px;
  flex: none;
}

/* ---------- زر رجوع / أيقونة ---------- */
.stm-iconbtn {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--stm-border);
  border-radius: var(--stm-r-sm);
  background: var(--stm-glass);
  cursor: pointer;
  transition: transform var(--stm-dur-press) var(--stm-ease),
              border-color var(--stm-dur-fast) var(--stm-ease);
}
.stm-iconbtn img { width: var(--stm-icon-action); height: var(--stm-icon-action); }
.stm-iconbtn:active { transform: scale(.985); }

/* ---------- GlassCard ---------- */
.stm-card {
  position: relative;
  background: var(--stm-glass);
  border: 1px solid var(--stm-border);
  border-radius: var(--stm-r-card);
  box-shadow: var(--stm-shadow);
  backdrop-filter: blur(var(--stm-blur));
  -webkit-backdrop-filter: blur(var(--stm-blur));
  padding: var(--stm-s5);
}

.stm-card--elevated { background: var(--stm-glass-strong); border-radius: var(--stm-r-card-lg); }
.stm-card--active   { border-color: var(--stm-border-highlight); box-shadow: var(--stm-shadow), var(--stm-shadow-glow); }
.stm-card--success  { border-color: rgba(69, 224, 168, .38); }
.stm-card--warning  { border-color: rgba(255, 201, 77, .38); }

.stm-card__title {
  margin: 0 0 var(--stm-s2);
  font-size: var(--stm-fs-card);
  font-weight: 800;
  line-height: var(--stm-lh-tight);
}
.stm-card__text { margin: 0; color: var(--stm-text-secondary); }

.stm-card--tappable { cursor: pointer; transition: transform var(--stm-dur-press) var(--stm-ease); }
.stm-card--tappable:active { transform: scale(.985); }

/* ---------- الأزرار ---------- */
.stm-btn {
  --_h: 54px;
  position: relative;
  width: 100%;
  min-height: var(--_h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stm-s2);
  padding: 0 var(--stm-s5);
  border: 0;
  border-radius: var(--stm-r-btn);
  font-size: var(--stm-fs-card);
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--stm-dur-press) var(--stm-ease),
              filter var(--stm-dur-fast) var(--stm-ease),
              opacity var(--stm-dur-fast) var(--stm-ease);
}

.stm-btn--primary {
  background: var(--stm-grad-cta);
  color: #fff;
  box-shadow: var(--stm-shadow-glow);
}

.stm-btn--secondary {
  background: var(--stm-glass);
  color: var(--stm-text);
  border: 1px solid var(--stm-border);
  box-shadow: none;
}

.stm-btn:active:not([disabled]):not([aria-busy="true"]) { transform: scale(.985); }
.stm-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* حالة التحميل: الارتفاع لا يتغير (عقد PrimaryButton) */
.stm-btn[aria-busy="true"] { pointer-events: none; }
.stm-btn[aria-busy="true"] .stm-btn__label { visibility: hidden; }
.stm-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: stm-spin .8s linear infinite;
}

.stm-btn--success { background: var(--stm-grad-success); color: #06251a; }

@keyframes stm-spin { to { transform: rotate(360deg); } }

/* ---------- StatCard ---------- */
.stm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--stm-s3);
}

.stm-stat { padding: var(--stm-s4); }
.stm-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--stm-s2); }
.stm-stat__label { font-size: var(--stm-fs-caption); color: var(--stm-text-muted); font-weight: 700; }
.stm-stat__icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--stm-r-sm);
  background: rgba(124, 92, 255, .16);
  border: 1px solid var(--stm-border);
}
.stm-stat__icon img { width: 20px; height: 20px; }
.stm-stat__value {
  font-size: clamp(24px, 7vw, 30px);
  font-weight: 900;
  line-height: 1.15;
  margin-block-start: var(--stm-s2);
}
.stm-stat__helper { font-size: var(--stm-fs-caption); color: var(--stm-text-muted); }

.stm-stat__progress {
  margin-block-start: var(--stm-s3);
  height: 6px;
  border-radius: var(--stm-r-pill);
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
}
.stm-stat__progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--stm-grad-premium);
}

/* ---------- StatusBadge ---------- */
.stm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--stm-r-pill);
  font-size: var(--stm-fs-caption);
  font-weight: 800;
  border: 1px solid transparent;
  white-space: nowrap;
}
.stm-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.stm-badge--neutral { background: rgba(255,255,255,.08); color: var(--stm-text-secondary); border-color: var(--stm-border); }
.stm-badge--success { background: rgba(69,224,168,.14);  color: var(--stm-success); border-color: rgba(69,224,168,.34); }
.stm-badge--warning { background: rgba(255,201,77,.14);  color: var(--stm-warning); border-color: rgba(255,201,77,.34); }
.stm-badge--error   { background: rgba(255,92,124,.14);  color: var(--stm-error);   border-color: rgba(255,92,124,.34); }
.stm-badge--gold    { background: rgba(255,184,46,.14);  color: var(--stm-gold);    border-color: rgba(255,184,46,.34); }
.stm-badge--live    { background: rgba(255,61,113,.16);  color: var(--stm-live);    border-color: rgba(255,61,113,.38); }
.stm-badge--live .stm-badge__dot { animation: stm-pulse 1800ms var(--stm-ease) infinite; }

@keyframes stm-pulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(255, 61, 113, .55); }
  50%      { opacity: .6; box-shadow: 0 0 0 6px rgba(255, 61, 113, 0); }
}

/* ---------- LoadingSkeleton ---------- */
.stm-skel {
  border-radius: var(--stm-r-sm);
  background: linear-gradient(100deg,
      rgba(255,255,255,.06) 22%,
      rgba(255,255,255,.14) 46%,
      rgba(255,255,255,.06) 70%);
  background-size: 220% 100%;
  animation: stm-shimmer 1.5s linear infinite;
}
.stm-skel--text { height: 14px; margin-block-end: var(--stm-s2); }
.stm-skel--title { height: 22px; width: 62%; margin-block-end: var(--stm-s3); }
.stm-skel--block { height: 96px; }

@keyframes stm-shimmer { to { background-position: -220% 0; } }

/* ---------- BottomNavigation ---------- */
.stm-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--stm-z-nav);
  padding-block-end: var(--stm-safe-bottom);
  background: rgba(8, 11, 36, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--stm-border);
}

.stm-nav__inner {
  max-width: var(--stm-maxw);
  margin-inline: auto;
  min-height: var(--stm-nav-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}

.stm-nav__inner--3 { grid-template-columns: repeat(3, 1fr); }

.stm-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--stm-s2) 2px;
  text-decoration: none;
  color: var(--stm-text-muted);
  font-size: var(--stm-fs-caption);
  font-weight: 700;
  min-height: 48px;              /* هدف لمس مريح */
  transition: color var(--stm-dur-fast) var(--stm-ease);
}

.stm-nav__icon {
  width: var(--stm-icon-nav);
  height: var(--stm-icon-nav);
  opacity: .62;
  transition: opacity var(--stm-dur-fast) var(--stm-ease),
              transform var(--stm-dur-fast) var(--stm-ease);
}

.stm-nav__item[aria-current="page"] { color: var(--stm-text); }
.stm-nav__item[aria-current="page"] .stm-nav__icon { opacity: 1; transform: translateY(-1px); }
.stm-nav__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  margin-block-start: -10px;
  width: 26px; height: 3px;
  border-radius: var(--stm-r-pill);
  background: var(--stm-grad-cta);
}
.stm-nav__item { position: relative; }

/* ---------- ارتفاع الشاشة: بديل لـ dvh على المتصفحات الأقدم ---------- */
.st-mobile-shell { min-height: calc(var(--stm-vh, 1vh) * 100); }
@supports (min-height: 100dvh) {
  .st-mobile-shell { min-height: 100dvh; }
}

/* ---------- لوحة المفاتيح مفتوحة: أخفِ الشريط السفلي ---------- */
.st-mobile-shell.stm-keyboard-open .stm-nav { display: none; }
.st-mobile-shell.stm-keyboard-open .stm-main {
  padding-block-end: calc(var(--stm-safe-bottom) + var(--stm-s6));
}

/* ---------- إمكانية الوصول: focus مرئي دائمًا ---------- */
.st-mobile-shell :focus-visible {
  outline: 2px solid var(--stm-cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Motion: كشف تدريجي عند التمرير (IntersectionObserver) ---------- */
/* بلا JS تبقى كل البطاقات ظاهرة — لا محتوى مخفي أبدًا */
.stm-js .st-mobile-shell .stm-enter {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--stm-dur-enter) var(--stm-ease),
              transform var(--stm-dur-enter) var(--stm-ease);
  transition-delay: var(--stm-delay, 0ms);
  will-change: opacity, transform;
}
.stm-js .st-mobile-shell .stm-enter.is-in {
  opacity: 1;
  transform: none;
}
.st-mobile-shell .stm-enter[data-i="1"] { --stm-delay: calc(var(--stm-stagger) * 1); }
.st-mobile-shell .stm-enter[data-i="2"] { --stm-delay: calc(var(--stm-stagger) * 2); }
.st-mobile-shell .stm-enter[data-i="3"] { --stm-delay: calc(var(--stm-stagger) * 3); }
.st-mobile-shell .stm-enter[data-i="4"] { --stm-delay: calc(var(--stm-stagger) * 4); }
.st-mobile-shell .stm-enter[data-i="5"] { --stm-delay: calc(var(--stm-stagger) * 5); }
.st-mobile-shell .stm-enter[data-i="6"] { --stm-delay: calc(var(--stm-stagger) * 6); }

/* ---------- رفع عند المرور (ديسكتوب فقط) + ضغط على اللمس ---------- */
.stm-lift { transition: transform var(--stm-dur-fast) var(--stm-ease),
                        box-shadow var(--stm-dur-fast) var(--stm-ease),
                        border-color var(--stm-dur-fast) var(--stm-ease); }
@media (hover: hover) and (pointer: fine) {
  .stm-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--stm-shadow), var(--stm-shadow-glow);
    border-color: var(--stm-border-highlight);
  }
}
.stm-lift:active { transform: scale(.985); }

/* ---------- أيقونات currentColor محمّلة كصور: نجبرها على الأبيض ---------- */
/* داخل <img> لا ترث الأيقونة لون الصفحة فتُحسب currentColor أسود */
.st-mobile-shell .stm-nav__icon,
.st-mobile-shell .stm-iconbtn img,
.st-mobile-shell .stm-activity__icon img,
.st-mobile-shell .stm-stat__icon img,
.st-mobile-shell .stm-activity__state img,
.st-mobile-shell .stm-action--solve .stm-action__art img {
  filter: brightness(0) invert(1);
}

/* ---------- أدوات مساعدة ---------- */
.stm-stack > * + * { margin-block-start: var(--stm-s4); }
.stm-row { display: flex; align-items: center; gap: var(--stm-s2); flex-wrap: wrap; }
.stm-muted { color: var(--stm-text-muted); }
.stm-caption { font-size: var(--stm-fs-caption); color: var(--stm-text-muted); }
.stm-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .stm-js .st-mobile-shell .stm-enter { opacity: 1; transform: none; transition: none; }
  .stm-lift:hover, .stm-lift:active { transform: none; }
  .st-mobile-shell *,
  .st-mobile-shell *::before,
  .st-mobile-shell *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .stm-skel { animation: none; background: rgba(255,255,255,.08); }
}


/* STM_HIDDEN_GLOBAL
   قواعد display في ملفاتنا تتغلب على خاصية hidden في HTML، فتظهر عناصر
   يفترض أن تكون مخفية (جولات الشجرة، الأزرار، الصناديق). القاعدة هنا
   في mobile.css لأنه الملف الوحيد المحمَّل في كل شاشات الطبقة. */
.st-mobile-shell [hidden] { display: none !important; }