/* ═══════════════════════════════════════════════════════════════════════
   🧠 [RECALL-DECK rd1 2026-07-30] طبقة 117 — «اختبر نفسك»: مجموعة مراجعة
   أسئلة وبطاقات المقاطع التفاعلية (iv-review.js).
   تعيش داخل overlay الخدمات (.exss-box) — تكمل كلاسات exss-*/svc-card
   القائمة ولا تلمسها. اللغة البصرية من 115-interactive-video (بنفسجي
   المنصة) بكلاسات ivr- معزولة. 116 محجوز لatlas-services ⇒ هذه 117.
   للإزالة: احذف هذا الملف + سطره بindex.html + iv-review.js وسطره.
   ═══════════════════════════════════════════════════════════════════════ */

/* 🎨 نطاق الألوان: الشاشة تعيش داخل #exsSvcOv.exss-ov وهو **داكن دائماً**
   (background:#0a0f17; color:#e8eaed — bundle-lazy.css:6143) أياً كان ثيم
   المنصة. لذلك كل سطح فاتح هنا يعلن لون نصه صراحةً، وإلا ورث الفاتح فاختفى.
   المتغيرات المحلية تجعل الدهس لاحقاً بموضع واحد. */
#exsSvcOv .ivr-cards,
#exsSvcOv .ivr-lessons,
#exsSvcOv .ivr-filters,
#exsSvcOv .ivr-empty {
  --ivr-surface: #fdfcff;
  --ivr-ink: #2b1a4d;          /* ≈12.6:1 على السطح الفاتح */
  --ivr-ink-soft: #5b4a7d;     /* ≈6.1:1 */
  --ivr-ov-bg: #0a0f17;        /* خلفية الoverlay — للشريط اللاصق */
}

/* ── skeleton فوري (<100مل) — لا اهتزاز layout: أبعاد محجوزة ── */
.ivr-skel {
  height: 64px; border-radius: 14px; margin: 10px 0;
  background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(124,58,237,0.12), rgba(124,58,237,0.06));
  background-size: 200% 100%;
  animation: ivrSkel 1.1s ease infinite;
}
.ivr-skel.tall { height: 140px; }
@keyframes ivrSkel { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

.ivr-empty {
  text-align: center; padding: 28px 14px; color: #cbb8ee;   /* على الoverlay الداكن — AA */
  font-size: 0.95rem; line-height: 1.9;
}
/* التلميح داخل بطاقة فاتحة ⇒ حبر ناعم داكن (كان يرث الفاتح فيختفي) */
.ivr-card .ivr-hint { color: var(--ivr-ink-soft, #5b4a7d); }
.ivr-hint { color: #cbb8ee; font-size: 0.78rem; line-height: 1.8; }

/* ── شاشة الدروس ── */
.ivr-lessons { display: flex; flex-direction: column; gap: 10px; }
.ivr-lesson {
  display: flex; flex-direction: column; gap: 8px; text-align: right;
  background: rgba(124,58,237,0.14); border: 1.5px solid rgba(167,139,250,0.42);
  border-radius: 14px; padding: 14px; cursor: pointer; min-height: 44px;
  color: inherit;                      /* على الoverlay الداكن — نص فاتح */
  font-family: inherit; font-size: 1rem;   /* بلا وراثة خط النظام للأزرار */
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ivr-lesson:hover { border-color: rgba(124,58,237,0.5); transform: translateY(-1px); }
.ivr-lesson-title { font-weight: 700; font-size: 0.95rem; }
.ivr-lesson-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ivr-chip {
  background: rgba(167,139,250,0.18); color: #e9deff; border-radius: 999px;
  padding: 3px 10px; font-size: 0.72rem; font-weight: 700;
}
.ivr-chip-pct { background: rgba(52,211,153,0.18); color: #a7f3d0; }

/* ── فلاتر chips ── */
.ivr-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px;
  position: sticky; top: 0; z-index: 2; padding: 8px 0;
  /* خلفية صريحة: background:inherit من أب بلا خلفية = شريط شفاف تخترقه
     البطاقات بصرياً ويبتلع نقراتها (سطح لاصق غير مرئي) */
  background: var(--ivr-ov-bg, #0a0f17);
}
.ivr-fchip {
  border: 1.5px solid rgba(167,139,250,0.45); background: transparent;
  color: #d6c7f5; border-radius: 999px; padding: 6px 14px;
  font-family: inherit;
  font-size: 0.8rem; font-weight: 700; cursor: pointer; min-height: 34px;
}
.ivr-fchip.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* ── البطاقات ── */
.ivr-cards { display: flex; flex-direction: column; gap: 14px; }
.ivr-card {
  background: var(--ivr-surface, #fdfcff); border: 1px solid rgba(124,58,237,0.2);
  border-radius: 16px; padding: 14px 16px;
  /* الحبر الصريح إلزامي: الoverlay يفرض color:#e8eaed فاتحاً */
  color: var(--ivr-ink, #2b1a4d);
  box-shadow: 0 8px 26px rgba(30,10,60,0.28);
}
/* نمط «معرفة» — نفس لغة iv-card--know بالمحرك (شريط علوي متدرج) */
.ivr-card--know {
  background:
    linear-gradient(90deg, #6d28d9, #a855f7 55%, #d8b4fe) top / 100% 4px no-repeat,
    linear-gradient(180deg, #fdfcff, #faf7ff 34%, #fdfcff);
  border-color: rgba(124, 58, 237, 0.34);
}
.ivr-card-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ivr-kchip {
  background: rgba(124,58,237,0.1); color: #5b21b6;
  border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; font-weight: 800;
}
.ivr-at { margin-inline-start: auto; color: #6b5a91; font-size: 0.72rem; font-weight: 700; }  /* AA على السطح الفاتح */
.ivr-badge {
  border-radius: 999px; padding: 3px 10px; font-size: 0.7rem; font-weight: 800;
  background: rgba(124,58,237,0.08); color: #6d28d9;
}
.ivr-badge.good { background: rgba(52,211,153,0.14); color: #166534; }
.ivr-badge.warn { background: rgba(245,158,11,0.14); color: #92400e; }
.ivr-badge.poll { background: rgba(59,130,246,0.12); color: #1d4ed8; }

.ivr-card-q { font-size: 0.98rem; line-height: 1.95; margin-bottom: 10px; color: var(--ivr-ink, #2b1a4d); }
.ivr-b-text { white-space: pre-wrap; }
.ivr-b-math { direction: ltr; text-align: left; overflow-x: auto; padding: 4px 0; }
.ivr-b-img { max-width: 100%; border-radius: 10px; margin: 6px 0; }
.ivr-ack {
  background: rgba(124,58,237,0.07); border-radius: 10px; padding: 8px 12px;
  color: #5b21b6; font-weight: 700; font-size: 0.85rem;
}

/* ── الخيارات (لغة .iv-choice من 115 بكلاسات معزولة) ── */
.ivr-choices { display: flex; flex-direction: column; gap: 8px; }
.ivr-choice {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  text-align: right; background: rgba(124,58,237,0.05);
  border: 1.5px solid rgba(124,58,237,0.25); border-radius: 12px;
  padding: 12px; min-height: 44px; cursor: pointer;
  color: var(--ivr-ink, #2b1a4d);      /* داخل بطاقة فاتحة */
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ivr-choice:not(:disabled):hover { border-color: rgba(124,58,237,0.55); background: rgba(124,58,237,0.09); }
.ivr-choice:disabled { cursor: default; }
.ivr-choice.busy { opacity: 0.6; }
.ivr-choice.correct { border-color: rgba(52,211,153,0.65); background: rgba(52,211,153,0.08); }
.ivr-choice.picked { box-shadow: 0 0 0 2px rgba(124,58,237,0.25); }
.ivr-choice.wrongpick { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.06); }
.ivr-choice-letter {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(124,58,237,0.12); color: #5b21b6;
  font-size: 0.78rem; font-weight: 800;
}
.ivr-choice.correct .ivr-choice-letter { background: rgba(52,211,153,0.2); color: #166534; }
.ivr-choice.wrongpick .ivr-choice-letter { background: rgba(239,68,68,0.15); color: #b91c1c; }
.ivr-choice-body { flex: 1; line-height: 1.85; font-size: 0.9rem; }

.ivr-fb {
  background: rgba(124,58,237,0.06); border-radius: 10px; padding: 8px 12px;
  font-size: 0.8rem; line-height: 1.8; color: #4c1d95;
  margin: -2px 4px 2px;
}
.ivr-verdict {
  margin-top: 10px; border-radius: 10px; padding: 9px 12px;
  font-size: 0.85rem; font-weight: 700;
}
.ivr-verdict.good { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.4); color: #166534; }
.ivr-verdict.bad { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.35); color: #b91c1c; }
.ivr-verdict.neutral { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.3); color: #1d4ed8; }

/* ── echo ── */
.ivr-echo-state { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ivr-echo-text {
  background: rgba(124,58,237,0.06); border-radius: 10px; padding: 10px;
  white-space: pre-wrap; line-height: 1.8; font-size: 0.85rem; width: 100%;
  color: var(--ivr-ink, #2b1a4d);
}

/* ── استجابة الشاشات الصغيرة ── */
@media (max-width: 480px) {
  .ivr-card { padding: 12px; }
  .ivr-card-q { font-size: 0.92rem; }
}

/* ── احترام تقليل الحركة ── */
@media (prefers-reduced-motion: reduce) {
  .ivr-skel { animation: none; }
  .ivr-lesson, .ivr-choice { transition: none; }
}