/* ==========================================================================
   public/src/features/quiz/quiz.css
   Unified Quiz Application - Core Examination Layout
   CSS variables at themes.css 
   ========================================================================== */

/* ─── 1. Global Resets & Foundations ────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

body {
  font-family:
    "Tajawal",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    Roboto,
    sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  /*
   * PROTECT GLOBAL SIDEBAR: DO NOT use padding shorthand here.
   * It would override padding-right set by side-menu.css (80px for collapsed sidebar).
   * Set only the three sides owned by this layout view.
   */
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  /* Physical left side opposite the sidebar */
  position: relative;
  overflow-x: hidden;
}

/* ─── 2. Container Layout ───────────────────────────────────────────────── */
.container {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 50px;
  position: relative;
  z-index: 1;
}

/* ─── 3. Gamification Stats Bar ─────────────────────────────────────────── */
.stats-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: var(--z-header);
  box-shadow: var(--shadow-sm);
  background-color: var(--color-surface);
}

.stats-content {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
  direction: ltr;
}

.hamburger-stats {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  background: var(--color-background, #fff);
  color: var(--color-text-primary, #111);
  z-index: calc(var(--z-overlay, 500) + 2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.hamburger-stats:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.hamburger-stats:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.hamburger-icon {
  display: block;
  overflow: visible;
}

.hamburger-icon .bar {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
}

.hamburger-stats[aria-expanded="true"] .bar-top {
  transform: translateY(6px) rotate(45deg);
}

.hamburger-stats[aria-expanded="true"] .bar-mid {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-stats[aria-expanded="true"] .bar-bottom {
  transform: translateY(-6px) rotate(-45deg);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.stat-icon {
  font-size: 1.25rem;
}

/* ============================================================================
   QUIZ PAGE — Isolated Side Navigation
   Self-contained: does not rely on side-menu.css. Desktop: 64px collapsed ↔
   240px expanded icon-rail (right-anchored, RTL). Mobile (≤768px): bottom
   sheet with backdrop. Layout/behavior is unchanged from the previous
   shared-sidebar implementation — only the source of these rules changed.
   ============================================================================ */
/* ── Body padding shifts with sidebar (RTL: sidebar is on the right) ────── */
body {
  padding-right: calc(var(--sidebar-collapsed-width) + 16px);
  transition: padding-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-expanded {
  padding-right: calc(var(--sidebar-expanded-width) + 16px);
}

/* ── Sidebar Panel ────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  /* RTL: anchored to right edge */
  left: auto;
  height: 100%;
  width: var(--sidebar-collapsed-width);
  background: var(--color-background);
  border-left: 1px solid var(--color-border);
  z-index: var(--z-overlay, 500);
  display: flex;
  flex-direction: column;
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.expanded {
  width: var(--sidebar-expanded-width);
}

/* Drag handle only exists for the mobile bottom-sheet; not part of the
   desktop rail layout at all. Styled for real inside the
   @media (max-width: 768px) block below. */
.sidebar-drag-handle {
  display: none;
}

/* ── Nav Scroll Container ────────────────────────────────────────────────── */
.sidebar nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: clip;
  padding: 8px 8px 24px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  direction: ltr;
}

.sidebar nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar nav::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

/* ── Sidebar Header (Expanded Mode) ──────────────────────────────────────── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-width 250ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 150ms ease,
    min-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.expanded .sidebar-header {
  max-width: 100%;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  padding: 14px 10px 8px 14px;
  /* Floor only — actual height is padding (14+8=22px) + the 36px icon =
     58px, taller than this min-height, so min-height no longer drives the
     box; it just guards against ever collapsing shorter than 52px if the
     icon/padding values change later. */
  min-height: 52px;
  transition:
    max-width 250ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 150ms ease 100ms,
    min-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* Brand wordmark text: fades in/out in sync with the sidebar's own
   expand/collapse timing instead of popping in instantly. Previously an
   SVG <text> element baked into the same coordinate system as the
   favicon <image>; now a plain <span> so the favicon can be a regular
   CSS-sized <img> instead (see .sidebar-logo, .sidebar-favicon-img
   below) — pixel parity between collapsed/expanded icon states no longer
   depends on two different coordinate systems happening to agree. */
.sidebar-brand-text {
  opacity: 0;
  transition: opacity 150ms ease;
  font-family: Tajawal, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: currentColor;
  white-space: nowrap;
}

.sidebar.expanded .sidebar-brand-text {
  opacity: 1;
  transition: opacity 150ms ease 100ms;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  pointer-events: none;
  gap: 5px;
}

/* Expanded-header favicon: the SAME class/sizing rule the collapsed rail's
   .sidebar-favicon-img already uses (36×36px, see that rule further down),
   so the icon is pixel-identical and never resizes/shifts when toggling
   .expanded — there is exactly one place that defines this size. */
.sidebar-logo .sidebar-favicon-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
}

/* In-header collapse button when sidebar is expanded */
.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--border-radius-md, 8px);
  cursor: pointer;
  position: relative;
  color: var(--color-text-secondary, #94a3b8);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible {
  background: var(--color-background-secondary, rgba(255, 255, 255, 0.08));
  color: var(--color-primary, #6366f1);
  outline: none;
}

.sidebar-collapse-btn svg {
  width: 20px;
  height: 20px;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-collapse-btn .icon-default {
  opacity: 1;
  transform: scale(1);
}

.sidebar-collapse-btn .icon-hover {
  position: absolute;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.sidebar-collapse-btn:hover .icon-default,
.sidebar-collapse-btn:focus-visible .icon-default {
  opacity: 0;
  transform: scale(0.85);
}

.sidebar-collapse-btn:hover .icon-hover,
.sidebar-collapse-btn:focus-visible .icon-hover {
  opacity: 1;
  transform: scale(1);
}

/* ── Sidebar Favicon (Collapsed Rail Mode) ────────────────────────────────── */
.sidebar-favicon {
  display: none;
}

.sidebar:not(.expanded) .sidebar-favicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 10px auto 4px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  color: var(--color-text);
  transition: background-color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.sidebar:not(.expanded) .sidebar-favicon:hover,
.sidebar:not(.expanded) .sidebar-favicon:focus-visible {
  background: var(--color-background-secondary, rgba(255, 255, 255, 0.08));
  outline: none;
}

.sidebar-favicon .sidebar-favicon-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: scale(1);
}

.sidebar-favicon .sidebar-expand-icon {
  position: absolute;
  width: 22px;
  height: 22px;
  color: var(--color-primary, #6366f1);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.sidebar-favicon:hover .sidebar-favicon-img,
.sidebar-favicon:focus-visible .sidebar-favicon-img {
  opacity: 0;
  transform: scale(0.8);
}

.sidebar-favicon:hover .sidebar-expand-icon,
.sidebar-favicon:focus-visible .sidebar-expand-icon {
  opacity: 1;
  transform: scale(1);
}

.sidebar.expanded .sidebar-favicon {
  display: none !important;
}

.sidebar:not(.expanded) .sidebar-logo {
  display: none;
}

/* ── Menu Items ──────────────────────────────────────────────────────────── */
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  border-radius: 10px;
  margin-bottom: 2px;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: right;
  direction: rtl;
  white-space: nowrap;
  position: relative;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.menu-item svg {
  flex-shrink: 0;
  min-width: 22px;
  transition:
    transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.12s ease;
  transform: scale(1) translateY(0);
}

.menu-item:active svg {
  transform: scale(0.94) translateY(0);
  transition-duration: 0.12s;
}

/* ── Icon line-draw animation ─────────────────────────────────────────────
   Quiz page ports its sidebar markup/CSS standalone rather than sharing
   side-menu.css, so this mirrors the fix made there rather than importing it:
   see side-menu.css for the full rationale. In short — profile.css's fixed
   `stroke-dasharray: 60` doesn't generalise across this icon set (a keyboard
   glyph mixes a ~60-unit rect with 0.01-unit dot paths), so
   menu-icon-draw.js stamps `pathLength="1"` + `.menu-icon-line` onto every
   drawable shape at runtime, letting one dash length cover any icon.
   One pass per hover, not an infinite loop — a nav rail gets hovered
   constantly en route elsewhere, and a permanently cycling icon under the
   cursor reads as a glitch rather than a flourish. */
.menu-icon-line {
  --menu-icon-draw-length: 1;
  stroke-dasharray: var(--menu-icon-draw-length, 1);
  stroke-dashoffset: 0;
}

.menu-item:hover .menu-icon-line,
.menu-item:focus-visible .menu-icon-line,
.menu-item:active .menu-icon-line {
  animation: menu-item-draw 1.2s cubic-bezier(0.45, 0, 0.55, 1) both;
}

/* Sub-shapes trail each other slightly so a multi-part icon redraws stroke by
   stroke instead of snapping back as one flat block. `both` fill-mode holds
   each shape at the 0% frame (fully drawn) through its delay, so the stagger
   never causes a flash of missing strokes. */
.menu-item:hover .menu-icon-line:nth-child(2),
.menu-item:focus-visible .menu-icon-line:nth-child(2),
.menu-item:active .menu-icon-line:nth-child(2) {
  animation-delay: 55ms;
}

.menu-item:hover .menu-icon-line:nth-child(3),
.menu-item:focus-visible .menu-icon-line:nth-child(3),
.menu-item:active .menu-icon-line:nth-child(3) {
  animation-delay: 110ms;
}

.menu-item:hover .menu-icon-line:nth-child(n + 4),
.menu-item:focus-visible .menu-icon-line:nth-child(n + 4),
.menu-item:active .menu-icon-line:nth-child(n + 4) {
  animation-delay: 165ms;
}

@keyframes menu-item-draw {
  0% {
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dashoffset: var(--menu-icon-draw-length, 1);
  }

  100% {
    stroke-dashoffset: 0;
  }
}

/* Collapsed: center icons perfectly. gap must be 0 — the .menu-label still
   exists in the DOM with max-width: 0, but the flex gap would still push
   the icon off-center otherwise. */
.sidebar:not(.expanded) .menu-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}

/* Labels: hidden when collapsed */
.menu-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition:
    opacity 0s,
    max-width 0s;
  pointer-events: none;
  flex: 1;
}

.sidebar.expanded .menu-label {
  opacity: 1;
  max-width: 180px;
  pointer-events: auto;
  transition:
    opacity 120ms ease 80ms,
    max-width 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.menu-item:hover {
  background: var(--color-background-secondary, #f5f5f5);
}

.menu-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: 10px;
}

.menu-item.active {
  background: var(--color-primary-light, #e8f0fe);
  color: var(--color-primary);
}

[data-theme="dark-slate"] .menu-item.active {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
}

[data-theme="dark"] .menu-item.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* ── Tooltips (collapsed state, desktop only) ────────────────────────────── */
.sidebar-hover-tooltip {
  position: fixed;
  background: var(--color-surface, #fff);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--shadow-md);
  transition: opacity 0.15s ease 0.35s;
  z-index: 1000;
  direction: rtl;
}

.sidebar-hover-tooltip.visible {
  opacity: 1;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.menu-divider {
  height: 1px;
  background: var(--color-border);
  margin-block: 8px;
  margin-inline: 4px;
  flex-shrink: 0;
}

/* ── Section header labels: must NOT stretch (flex:1 is for menu-items only) */
.theme-section-header .menu-label {
  flex: none;
}

/* ── Theme Controls Section ──────────────────────────────────────────────── */
.sidebar:not(.expanded) .theme-controls-section {
  margin-bottom: 0;
}

.theme-section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-tertiary, #888);
  white-space: nowrap;
  position: relative;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.12s ease;
}

.theme-section-header:hover {
  background: var(--color-background-secondary, #f5f5f5);
}

.theme-section-header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.sidebar:not(.expanded) .theme-section-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

/* ── Items visible only when expanded ────────────────────────────────────── */
.sidebar:not(.expanded) .animation-toggle-container,
.sidebar:not(.expanded) .animation-toggle-label,
.sidebar:not(.expanded) .theme-selector-grid,
.sidebar:not(.expanded) .menu-divider.sidebar-expanded-only,
.sidebar:not(.expanded) .toggle-switch,
.sidebar:not(.expanded) .theme-controls-toggle,
.sidebar:not(.expanded) .quiz-nav-toggle,
.sidebar:not(.expanded) .view-toggle-btn {
  display: none;
}

.sidebar-expanded-only {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  /* margin: 0; */
  transition:
    opacity 0s,
    max-height 0s;
}

.sidebar.expanded .sidebar-expanded-only {
  opacity: 1;
  max-height: 600px;
  overflow: visible;
  /* allow theme-selector-btn translateY(-2px) not to clip */
  pointer-events: auto;
  transition:
    opacity 150ms ease 100ms,
    max-height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

/* ── Items visible only when collapsed (inverse of the above) ───────────── */
.sidebar-collapsed-only {
  display: none;
}

.sidebar:not(.expanded) .sidebar-collapsed-only {
  display: flex;
}

/* ── View Style Switcher (pagination vs vertical) ────────────────────────── */
.quiz-view-style-section {
  padding: 4px 4px 6px;
}

.quiz-view-style-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 10px;
  color: var(--color-text-secondary);
  direction: rtl;
}

.quiz-view-style-label .menu-label {
  opacity: 1;
  max-width: none;
  pointer-events: auto;
  flex: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.quiz-view-style-toggle {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: var(--color-background-secondary, #f5f5f5);
  border: 1px solid var(--color-border);
}

.quiz-view-style-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 9px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.quiz-view-style-btn:hover {
  color: var(--color-text);
}

.quiz-view-style-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.quiz-view-style-btn[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ── Retractable / Accordion Section (question navigation) ────────────────── */
.sidebar:not(.expanded) .quiz-nav-section {
  margin-bottom: 0;
}

.quiz-nav-header {
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-tertiary, #888);
  white-space: nowrap;
  position: relative;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.12s ease;
}

.quiz-nav-header:hover {
  background: var(--color-background-secondary, #f5f5f5);
}

.quiz-nav-header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.sidebar:not(.expanded) .quiz-nav-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  gap: 0;
}

.quiz-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-tertiary, #888);
  font: inherit;
  text-align: right;
  direction: rtl;
  transition: background-color 0.12s ease;
}

.quiz-nav-toggle:hover {
  background: var(--color-background-secondary, #f5f5f5);
}

.quiz-nav-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: 8px;
}

.quiz-nav-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.quiz-nav-toggle-label .menu-label {
  flex: none;
  opacity: 1;
  max-width: none;
  pointer-events: auto;
}

.quiz-nav-toggle-chevron {
  flex-shrink: 0;
  transition: transform 240ms ease;
}

/* Chevron points down when open (default markup state, aria-expanded="true"),
   rotates to point up (toward the content, since it collapses upward) when
   closed. */
.quiz-nav-toggle[aria-expanded="false"] .quiz-nav-toggle-chevron {
  transform: rotate(-90deg);
}

/* The panel is #menuNavContainer itself — its innerHTML is fully rebuilt by
   quiz.js on every render, but this class (and the "collapsed" state below)
   live on the element itself, so they persist across re-renders. */
.quiz-nav-panel {
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition:
    max-height 400ms ease,
    opacity 240ms ease;
}

/* Sidebar rail is collapsed: the whole question-nav section (including its
   toggle) is hidden via .sidebar-expanded-only on .quiz-nav-toggle already,
   but #menuNavContainer itself no longer carries that class (see above), so
   it needs its own explicit rule here to stay hidden too — regardless of
   the accordion's own open/closed state, which is irrelevant while the
   rail is collapsed. */
.sidebar:not(.expanded) .quiz-nav-panel {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Accordion manually collapsed (sidebar itself may still be expanded). */
.quiz-nav-panel.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* #viewToggle sits inside .quiz-nav-section as a sibling of #menuNavContainer
   (not a child of it — #menuNavContainer's innerHTML is fully rebuilt by
   quiz.js on every render, so #viewToggle has to live outside it to survive
   those re-renders). It's still meant to retract/expand together with the
   rest of the section, so it gets the same "collapsed" class treatment,
   toggled by the same accordion click handler in quiz.js. Uses display:none
   directly rather than the max-height/opacity animation .quiz-nav-panel
   uses, since #viewToggle is a single fixed-height row with nothing to
   visually collapse — it should just disappear/reappear with the panel. */
.view-toggle-btn.collapsed {
  display: none;
}

/* ── Theme Controls Accordion ────────────────────────────────────────────────
   Retractable "المظهر والأداء" (appearance & performance) section — mirrors
   the main side-menu's theme-controls accordion styling exactly. Only
   meaningful in the expanded sidebar / mobile sheet; the collapsed 64px rail
   hides this whole toggle via the existing .sidebar:not(.expanded) rules and
   shows its own single icon-only entry point instead (.sidebar-collapsed-only),
   which just expands the sidebar on click. */
.theme-controls-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-tertiary, #888);
  font: inherit;
  text-align: right;
  direction: rtl;
  transition: background-color 120ms ease;
}

.theme-controls-toggle:hover {
  background: var(--color-background-secondary, #f5f5f5);
}

.theme-controls-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: 8px;
}

.theme-controls-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.theme-controls-toggle-label .menu-label {
  flex: none;
  opacity: 1;
  max-width: none;
  pointer-events: auto;
}

.theme-controls-toggle-chevron {
  flex-shrink: 0;
  transition: transform 240ms ease;
}

/* Chevron points down when open (default markup state, aria-expanded="true"),
   rotates to point up (toward the content, since it collapses upward) when
   closed. */
.theme-controls-toggle[aria-expanded="false"] .theme-controls-toggle-chevron {
  transform: rotate(-90deg);
}

.theme-controls-panel {
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition:
    max-height 400ms ease,
    opacity 240ms ease;
}

.theme-controls-panel.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Theme Selector Grid ─────────────────────────────────────────────────── */
.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-block: 4px 6px;
  margin-inline: 4px;
  padding-top: 4px;
  overflow: visible;
}

/*
 * Theme picker buttons — each renders a tiny non-interactive preview of the
 * HOME PAGE (header/search bar + a couple of card-list rows) painted in that
 * theme's own fixed palette, so the button doubles as an accurate swatch —
 * not just an icon. Colors below are intentionally hardcoded per theme
 * (not var(--color-*)) since a swatch must always show ITS theme's colors,
 * regardless of which theme is currently active.
 */
.theme-selector-btn {
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 0 0 6px;
  cursor: pointer;
  background: none;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
}

.theme-selector-btn:hover {
  
  box-shadow: var(--shadow-sm);
}

.theme-selector-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  border-width: 2.5px;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Mini home-page preview ──────────────────────────────────────────────── */
.theme-btn-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  height: 44px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}

/* Header row: search-bar pill + a small accent dot (mirrors the home
   page's search area) */
.theme-btn-preview-header {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 8px;
  flex-shrink: 0;
}

.theme-btn-preview-header::before {
  content: "";
  flex: 1;
  height: 100%;
  border-radius: 4px;
}

.theme-btn-preview-header::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Card-list silhouette: two stacked rows, each an icon-circle + text lines —
   mirrors .category-card's mobile list-row (.icon + .card-text) */
.theme-btn-preview-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.theme-btn-preview-row {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 11px;
  border-radius: 3px;
  padding-inline: 3px;
}

.theme-btn-preview-row::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.theme-btn-preview-row::after {
  content: "";
  flex: 1;
  height: 4px;
  border-radius: 2px;
}

/* ── Per-theme fixed palettes ─────────────────────────────────────────────
   Each swatch always renders in its OWN theme's colors, independent of the
   currently-applied site theme (data-theme on <html>). */
.theme-selector-btn[data-theme="light"] .theme-btn-preview {
  background: #fafbfc;
}

.theme-selector-btn[data-theme="light"] .theme-btn-preview-header::before {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.theme-selector-btn[data-theme="light"] .theme-btn-preview-header::after {
  background: #6366f1;
}

.theme-selector-btn[data-theme="light"] .theme-btn-preview-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.theme-selector-btn[data-theme="light"] .theme-btn-preview-row::before {
  background: #6366f1;
}

.theme-selector-btn[data-theme="light"] .theme-btn-preview-row::after {
  background: #e5e7eb;
}

.theme-selector-btn[data-theme="dark-slate"] .theme-btn-preview {
  background: #0f172a;
}

.theme-selector-btn[data-theme="dark-slate"] .theme-btn-preview-header::before {
  background: #1e293b;
  border: 1px solid #334155;
}

.theme-selector-btn[data-theme="dark-slate"] .theme-btn-preview-header::after {
  background: #818cf8;
}

.theme-selector-btn[data-theme="dark-slate"] .theme-btn-preview-row {
  background: #1e293b;
  border: 1px solid #334155;
}

.theme-selector-btn[data-theme="dark-slate"] .theme-btn-preview-row::before {
  background: #818cf8;
}

.theme-selector-btn[data-theme="dark-slate"] .theme-btn-preview-row::after {
  background: #334155;
}

.theme-selector-btn[data-theme="dark"] .theme-btn-preview {
  background: #121212;
}

.theme-selector-btn[data-theme="dark"] .theme-btn-preview-header::before {
  background: #1e1e1e;
  border: 1px solid #333333;
}

.theme-selector-btn[data-theme="dark"] .theme-btn-preview-header::after {
  background: #60a5fa;
}

.theme-selector-btn[data-theme="dark"] .theme-btn-preview-row {
  background: #1e1e1e;
  border: 1px solid #333333;
}

.theme-selector-btn[data-theme="dark"] .theme-btn-preview-row::before {
  background: #60a5fa;
}

.theme-selector-btn[data-theme="dark"] .theme-btn-preview-row::after {
  background: #333333;
}

/* Selected-state check badge (mirrors the reference design's ✓ pill) */
.theme-btn-check {
  position: absolute;
  bottom: 20px;
  inset-inline-end: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.theme-btn-check svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
}

.theme-selector-btn[aria-pressed="true"] .theme-btn-check {
  opacity: 1;
  transform: scale(1);
}

.theme-btn-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  padding-top: 5px;
}

.theme-selector-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Animation Toggle ────────────────────────────────────────────────────── */
.animation-toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  margin-block-end: 8px;
  margin-inline: 4px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  user-select: none;
}

.animation-toggle-container:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.animation-toggle-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: var(--color-border, #ccc);
  transition: background 0.3s ease;
  flex-shrink: 0;
}

.toggle-switch.active {
  background: var(--color-primary);
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.toggle-input:checked~.toggle-switch {
  background: var(--color-primary, #4f6ef7);
}

.toggle-input:checked~.toggle-switch::after {
  left: 23px;
}

.toggle-input:focus-visible~.toggle-switch {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Responsive: Mobile (≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Slide up from BOTTOM — full-width bottom sheet */
  .sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: auto;
    max-height: 85dvh;
    /* respects mobile browser chrome */
    border-left: none;
    border-top: 1px solid var(--color-border);
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    /* hidden below the viewport */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    overflow-y: hidden;
    /* nav handles scrolling so header can stay sticky */
    overflow-x: hidden;
  }

  .sidebar.expanded {
    transform: translateY(0);
    /* slide up into view */
    box-shadow: var(--shadow-xl);
  }

  /* Bug 5 Fix — Mobile draggability. This used to be a `::before`
     pseudo-element: purely decorative, painted on `.sidebar` itself, and
     therefore unable to receive pointer events, so it could never be
     grabbed or dragged even after wiring up JS. quiz.html already renders
     a real `#sidebarDragHandle`/`.sidebar-drag-handle` element for exactly
     this purpose; style that real element instead so the pointerdown
     listener added in quiz.js has something visible and grabbable to
     attach to. Matches the reference side-menu.css implementation. */
  .sidebar-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    flex-shrink: 0;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-drag-handle:active,
  .sidebar.dragging .sidebar-drag-handle {
    cursor: grabbing;
  }

  .sidebar-drag-handle-bar {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    transition:
      background-color var(--duration-fast, 120ms) ease,
      width var(--duration-fast, 120ms) ease;
  }

  .sidebar-drag-handle:hover .sidebar-drag-handle-bar,
  .sidebar-drag-handle.dragging .sidebar-drag-handle-bar,
  .sidebar.dragging .sidebar-drag-handle-bar {
    background: var(--color-text-tertiary);
    width: 48px;
  }

  /* While the user is actively dragging, kill the transform transition so
     the sheet tracks the finger 1:1 with zero lag. Restored the instant the
     gesture ends (quiz.js removes this class on pointerup). */
  .sidebar.dragging {
    transition: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    will-change: transform;
  }

  /* No body padding shift on mobile — sidebar is an overlay */
  body,
  body.sidebar-expanded {
    padding-right: 16px !important;
  }

  /* Always show the full logo in the mobile sheet — the collapsed-rail
     favicon is a desktop-only affordance. */
  .sidebar .sidebar-logo {
    display: flex !important;
    align-items: center;
  }

  /* Favicon and collapse button hidden on mobile — full logo always shows */
  .sidebar .sidebar-favicon,
  .sidebar-collapse-btn {
    display: none !important;
  }

  /* Sidebar header on mobile: sits above the nav, full-width, sticky with
     separator, and always visible — grabbable and draggable along with
     .sidebar-drag-handle for an expanded drag zone. */
  .sidebar .sidebar-header,
  .sidebar-header {
    display: flex !important;
    max-width: 100% !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transition: none !important;
    justify-content: center;
    border-top: none;
    height: auto;
    min-height: 0;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
    position: sticky;
    top: 0;
    z-index: 3;
    flex-shrink: 0;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar .sidebar-header:active,
  .sidebar.dragging .sidebar-header {
    cursor: grabbing;
  }

  .sidebar .sidebar-header * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  /* Full labels always visible on mobile */
  .sidebar .menu-item {
    justify-content: flex-start !important;
    padding: 11px 14px !important;
  }

  .sidebar .menu-label {
    opacity: 1 !important;
    max-width: 200px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .sidebar-expanded-only {
    opacity: 1 !important;
    max-height: 600px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .sidebar-brand-text {
    opacity: 1 !important;
    transition: none !important;
  }

  .theme-section-header {
    justify-content: center !important;
    padding: 8px 14px !important;
  }

  /* Nav: logo lives above nav in-flow (sticky), so nav itself just scrolls */
  .sidebar nav {
    padding-top: 8px;
    overflow-y: auto;
    overflow-x: visible;
  }

  /* Suppress desktop tooltips on mobile */
  .sidebar-hover-tooltip {
    display: none !important;
  }
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
html[data-motion="reduced"] {

  .sidebar,
  .hamburger-icon .bar,
  .toggle-switch,
  .toggle-switch::after,
  .side-menu-backdrop,
  .menu-item,
  .theme-selector-btn,
  .sidebar-collapse-btn,
  .sidebar-favicon,
  .sidebar-favicon img,
  .sidebar-favicon svg,
  .sidebar-collapse-btn svg,
  .menu-label,
  .sidebar-expanded-only,
  body {
    transition: none !important;
  }

  /* .menu-item svg / the icon hover+draw animation are intentionally left
     out of the reduced-motion kill switch above: the sidebar and menu-item
     icon hover state stays active even under "الأداء الفائق"
     (High Performance / reduced motion) mode. */
}

/* ─── 4. Sidebar Menu & Navigation ──────────────────────────────────────── */
.menu-nav-header {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 12px;
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}


.menu-nav-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.75rem;
  direction: rtl;
}

.menu-nav-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Legend dots */
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.current {
  background: var(--color-primary);
}

.legend-dot.answered {
  background: var(--color-text-tertiary);
}

.legend-dot.correct {
  background: var(--color-success);
}

.legend-dot.wrong {
  background: var(--color-error);
}

/* Menu flag count */
.menu-flag-count {
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.menu-flag-count {
  color: var(--color-warning);
}

/* Grid View Navigation */
.menu-nav-grid {
  margin-bottom: 15px;
}

.menu-nav-items.grid-view {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

/* List View Navigation */
.menu-nav-items.list-view::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}

.menu-nav-items.list-view::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

.menu-nav-items.list-view::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* Question navigator items */
.menu-nav-item.current {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.menu-nav-item.answered {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.menu-nav-item.correct {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
}

[data-theme="dark-slate"] .menu-nav-item.correct,
[data-theme="dark"] .menu-nav-item.correct {
  color: #6ee7b7;
}

.menu-nav-item.wrong {
  background: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error);
}

[data-theme="dark-slate"] .menu-nav-item.wrong,
[data-theme="dark"] .menu-nav-item.wrong {
  color: #f87171;
}

.menu-nav-item.unanswered {
  background: var(--color-background-secondary);
  border-color: var(--color-border);
}

.menu-nav-item.grid-item {
  aspect-ratio: 1;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 0.875rem;
  position: relative;
}

.menu-nav-item.grid-item:hover {
  transform: scale(1.05);
}

.menu-nav-status.grid-status {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.625rem;
}

.menu-nav-badges {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 1px;
  font-size: 0.5rem;
}

.mini-badge {
  font-size: 0.625rem;
  line-height: 1;
}

/* List View Navigation */
.menu-nav-list {
  margin-bottom: 15px;
}

.menu-nav-items.list-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  padding-right: 4px;
}

.menu-nav-item.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 0.875rem;
}

.menu-nav-item.list-item:hover { box-shadow: var(--shadow-md, 0 6px 16px rgba(0,0,0,0.14)); }

.menu-nav-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.menu-nav-number {
  font-weight: 700;
  min-width: 30px;
}

.menu-nav-status.list-status {
  font-size: 0.75rem;
  opacity: 0.8;
}

.menu-nav-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-nav-icon {
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  opacity: 0.5;
  line-height: 1;
}

.menu-nav-icon:hover {
  opacity: 1;
  transform: scale(1.2);
}

.menu-nav-icon.active {
  opacity: 1;
}

/* Action buttons in menu */
.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.action-btn {
  color: var(--color-text-primary);
}

.action-btn.bookmarked {
  color: var(--color-warning);
}

.action-btn.flagged {
  color: var(--color-error);
}

/* ─── 5. Examination Page Header ─────────────────────────────────────────── */
.header {
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  padding: 32px;
  margin-bottom: 24px;
  border: 1px solid var(--color-border-light);
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-accent);
  border-radius: 20px 20px 0 0;
}

.header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.header-title-section {
  flex: 1;
  min-width: 0;
}

.header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #0f6e56;
}

[data-theme="dark"] .header h1 {
  color: #5dcaa5;
  text-shadow: 0 0 8px rgba(93, 202, 165, 0.35);
}

[data-theme="dark-slate"] .header h1 {
  color: #85b7eb;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-secondary, #6b7280);
  margin-bottom: 8px;
  font-weight: 500;
  opacity: 0.85;
}

.header-subtitle {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  border: 1px solid;
  background: linear-gradient(135deg,
      var(--color-primary-light) 0%,
      #fce7f3 100%);
  color: var(--color-primary);
  border-color: rgba(99, 102, 241, 0.1);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

[data-theme="dark-slate"] .timer-badge,
[data-theme="dark"] .timer-badge {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border);
}

.timer-badge.hidden {
  display: none;
}

.timer-icon {
  width: 16px;
  height: 16px;
}

.date-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border, #ccc);
  background: var(--color-background-secondary, #f9fafb);
}

/* ─── Title / Info Button Row ─────────────────────────────────────────────── */
.title-date-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.title-date-container h1 {
  margin-bottom: 0 !important;
  flex: 0 1 auto;
  min-width: 0;
}

.title-date-container:has(h1:dir(ltr)) {
  direction: ltr;
}

/* Info icon button next to the quiz title */
.quiz-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--color-text-secondary, #6b7280);
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.15s ease;
}

.quiz-info-btn:hover {
  color: var(--color-primary, #6366f1);
  background: var(--color-primary-light, rgba(99, 102, 241, 0.1));
  border-color: var(--color-primary, #6366f1);
  transform: scale(1.1);
}

.quiz-info-btn:focus-visible {
  outline: 2px solid var(--color-primary, #6366f1);
  outline-offset: 2px;
}

.quiz-info-btn svg {
  pointer-events: none;
}

/* ─── Quiz Info Dialog styles moved to: src/components/quiz-info-modal/quiz-info-modal.css ─── */



/* ─── Quiz Password Lock Dialog ─────────────────────────────────────────── */
dialog.quiz-password-dialog {
  border: none;
  border-radius: 20px;
  padding: 0;
  background: var(--color-background, #fff);
  box-shadow: var(--shadow-xl);
  max-width: min(420px, 92vw);
  width: 100%;
  color: var(--color-text-primary, #111);
  overflow: hidden;
  position: fixed;
  inset: 0;
  margin: auto;
}

.quiz-password-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.quiz-password-dialog[open] {
  animation: dialog-pop-in 0.22s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.quiz-password-dialog.shake {
  animation: password-shake 0.4s ease;
}

@keyframes password-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

.quiz-password-dialog-inner {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  gap: 16px;
}

.quiz-password-dialog-header {
  position: relative;
  text-align: center;
}

.quiz-password-dialog-header::before {
  content: "";
  position: absolute;
  top: -28px;
  left: -24px;
  right: -24px;
  height: 4px;
  background: var(--gradient-accent);
}

.quiz-password-dialog-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.quiz-password-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-password-dialog-hint {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6b7280);
  text-align: center;
  margin: 0;
}

.quiz-password-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  text-align: center;
  letter-spacing: 0.05em;
  background: var(--color-background, #fff);
  color: var(--color-text-primary, #111);
  direction: ltr;
}

.quiz-password-input:focus {
  outline: none;
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.quiz-password-error {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-error, #ef4444);
  text-align: center;
  margin: 0;
}

.quiz-password-dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.quiz-password-submit-btn,
.quiz-password-cancel-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.quiz-password-submit-btn {
  background: var(--gradient-accent);
  color: white;
  box-shadow: var(--shadow-sm);
}

.quiz-password-submit-btn:hover {
  
  box-shadow: var(--shadow-md);
}

.quiz-password-cancel-btn {
  background: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text-secondary, #6b7280);
}

.quiz-password-cancel-btn:hover {
  background: var(--color-background-secondary, #f3f4f6);
}

@media (max-width: 480px) {
  dialog.quiz-password-dialog {
    border-radius: 16px;
    max-width: 94vw;
  }

  .quiz-password-dialog-inner {
    padding: 24px 18px;
  }
}

.finish-btn {
  background: var(--gradient-warm);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}

.finish-btn:hover {
  
  box-shadow: var(--shadow-lg);
  filter: brightness(1.06);
}

/* ─── 6. Exam Completion Progress ───────────────────────────────────────── */
.progress-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.progress-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.progress-percentage {
  font-size: 1rem;
  font-weight: 700;
}

.progress-container {
  width: 100%;
  height: 12px;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.progress-fill {
  height: 100%;
  background: var(--gradient-accent);
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

/* ─── 7. Interactive Question Cards ────────────────────────────────────── */
.question-card {
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border-light);
  margin-bottom: 24px;
  background-color: var(--color-surface);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.question-card:focus-within {
  border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-border-light));
}

.question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.question-number {
  background: var(--gradient-accent);
  color: white;
  font-size: 0.875rem;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 10px;
  min-width: 50px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.question-text {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Reading Comprehension Passages */
.question-card--large {
  padding: 32px;
}

.question-card--large .reading-passage {
  max-height: min(480px, 60vh);
}

.media-center-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* Wraps the interactive portion of the question card (header text, reading
   passage, question text, options/essay, check button, feedback). Only this
   element is replaced on every answer interaction; .media-center-wrap siblings
   above it are never touched so audio/video/YouTube never remounts. */
.reloadable-context {
  display: block;
}

.question-image-container {
  text-align: center;
  min-height: 160px;
}

.media-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 52px;
  width: 100%;
  max-width: 100%;
  /* Fix B: default alignment is centered; flex parent (.media-center-wrap)
     handles the horizontal centering so we never dock to one edge. */
  margin-left: auto;
  margin-right: auto;
}

.question-image {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.question-image-container.resizable-media .question-image {
  height: 100%;
  object-fit: contain;
}

.question-image.media-loaded {
  opacity: 1;
}

/* Media Shimmer Skeletons */
.media-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 120px;
  padding: 24px;
  border-radius: 12px;
  border: 2px dashed var(--color-border);
  background: var(--color-background-secondary);
}

.media-skeleton--hidden {
  display: none;
}

.media-skeleton--error {
  border-style: solid;
  border-color: var(--color-error);
  background: var(--color-error-light);
}

.skeleton-media {
  width: 100%;
  max-width: 320px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(90deg,
      var(--color-border) 0%,
      var(--color-border-light) 40%,
      var(--color-border) 80%);
  background-size: 1200px 100%;
}

/* Unconditional for the same reason as .skeleton-badge/.skeleton-icon/
   .skeleton-text/.skeleton-option above: loading skeletons keep
   shimmering even in High Performance mode, matching the home page's
   .skeleton-block. */
.skeleton-media {
  animation: media-shimmer 1.6s ease-in-out infinite;
}

@keyframes media-shimmer {
  0% {
    background-position: -1200px 0;
  }

  100% {
    background-position: 1200px 0;
  }
}

.media-skeleton-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.media-error {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-error);
  text-align: center;
}

/* Audio Player Elements */
.question-audio-container .question-audio {
  display: block;
  width: 100%;
  height: 52px;
  min-width: 300px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.question-audio-container .media-skeleton {
  min-height: 52px;
}

@media (max-width: 480px) {
  .question-audio-container .question-audio {
    min-width: 250px;
  }
}

/* Video Player Elements */
.question-video-container .question-video {
  display: block;
  width: 100%;
  max-height: min(420px, 55vh);
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-background);
  box-shadow: var(--shadow-sm);
}

.question-video-container.resizable-media .question-video,
.question-video-container.resizable-media .youtube-embed {
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}

.question-video-container .media-skeleton {
  min-height: 200px;
}

.question-video-container .skeleton-media {
  max-width: 100%;
  height: 180px;
}

/* YouTube Embeds — iframes have no intrinsic size, so without an explicit
   height they default to ~150px. Force a responsive 16:9 box instead. */
.question-video-container .youtube-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 200px;
  max-height: min(420px, 55vh);
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-background);
  box-shadow: var(--shadow-sm);
}

.question-card--large .question-video-container .youtube-embed {
  max-height: min(480px, 60vh);
}

@media (max-width: 768px) {
  .hamburger-stats {
    display: flex;
  }

  .question-video-container .youtube-embed {
    max-height: min(280px, 45vh);
  }
}

/* Native Theme Controls Adaptation */
[data-theme="dark"] .question-audio,
[data-theme="dark-slate"] .question-audio,
[data-theme="dark"] .question-video,
[data-theme="dark-slate"] .question-video {
  color-scheme: dark;
}

.question-audio::-webkit-media-controls-panel,
.question-video::-webkit-media-controls-panel {
  background: var(--color-surface);
}

.media-container.resizable-media {
  max-width: 100%;
  touch-action: none;
  width: fit-content;
}

.media-container.resizable-media>img,
.media-container.resizable-media>audio,
.media-container.resizable-media>video,
.media-container.resizable-media>iframe {
  width: 100%;
  height: 100%;
}

.question-audio-container.resizable-media {
  min-height: 52px;
  max-height: 200px;
}

.question-image-container.resizable-media,
.question-video-container.resizable-media {
  min-height: 120px;
}

.resize-handle {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resize-handle::before {
  content: "";
  display: block;
  background: var(--color-primary, #6366f1);
  border: 2px solid var(--color-background, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  /* Shape is overridden per-handle below */
}

.media-container.resizable-media:hover .resize-handle,
.media-container.resizable-media:focus-within .resize-handle,
.resize-handle.is-active {
  opacity: 1;
}

/* ── Corner handles (16×16 hit area, 10×10 circle dot) ─────────────────── */
.resize-handle--nw,
.resize-handle--ne,
.resize-handle--sw,
.resize-handle--se {
  width: 20px;
  height: 20px;
}

.resize-handle--nw::before,
.resize-handle--ne::before,
.resize-handle--sw::before,
.resize-handle--se::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.resize-handle--nw {
  top: -10px;
  left: -10px;
  cursor: nwse-resize;
}

.resize-handle--ne {
  top: -10px;
  right: -10px;
  cursor: nesw-resize;
}

.resize-handle--sw {
  bottom: -10px;
  left: -10px;
  cursor: nesw-resize;
}

.resize-handle--se {
  bottom: -10px;
  right: -10px;
  cursor: nwse-resize;
}

/* ── Side handles — pill bars (desktop / fine-pointer only) ─────────────── */
.resize-handle--n,
.resize-handle--s {
  width: 44px;
  height: 12px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.resize-handle--e,
.resize-handle--w {
  width: 12px;
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.resize-handle--n {
  top: -6px;
}

.resize-handle--s {
  bottom: -6px;
}

.resize-handle--e {
  right: -6px;
}

.resize-handle--w {
  left: -6px;
}

.resize-handle--n::before,
.resize-handle--s::before {
  width: 32px;
  height: 4px;
  border-radius: 100px;
}

.resize-handle--e::before,
.resize-handle--w::before {
  width: 4px;
  height: 32px;
  border-radius: 100px;
}

@media (pointer: coarse) {

  .resize-handle--n,
  .resize-handle--s,
  .question-image-container .resize-handle--e,
  .question-image-container .resize-handle--w,
  .question-video-container .resize-handle--e,
  .question-video-container .resize-handle--w {
    display: none;
  }

  .question-audio-container .resize-handle--e,
  .question-audio-container .resize-handle--w {
    width: 28px;
    opacity: 1;
  }

  .question-audio-container .resize-handle--e::before,
  .question-audio-container .resize-handle--w::before {
    width: 6px;
    height: 40px;
  }
}

/* While actively dragging, suppress text selection / image-drag ghosting
   across the whole page so the resize gesture feels solid. */
body.is-resizing-media {
  user-select: none;
  cursor: nwse-resize;
}

body.is-resizing-media .media-container.resizable-media {
  outline: 2px solid var(--color-primary, #6366f1);
  outline-offset: 2px;
}

/* Card Actions */
.question-actions {
  display: flex;
  gap: 8px;
}

.bookmark-btn,
.flag-btn,
.report-question-btn {
  background: none;
  border: 2px solid var(--color-border);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bookmark-btn:hover,
.flag-btn:hover,
.report-question-btn:hover {
  transform: scale(1.1);
}

.bookmark-btn:focus-visible,
.flag-btn:focus-visible,
.report-question-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 2px;
}

.bookmark-btn svg,
.flag-btn svg {
  width: 21px;
  height: 21px;
  transition: transform .18s ease, fill .18s ease;
}

.bookmark-btn.active {
  color: #d79b12;
  border-color: color-mix(in srgb, #d79b12 55%, var(--color-border));
  background: color-mix(in srgb, #d79b12 12%, transparent);
}

.flag-btn.active {
  color: var(--color-error, #dc3545);
  border-color: color-mix(in srgb, var(--color-error, #dc3545) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-error, #dc3545) 10%, transparent);
}

.report-question-btn {
  color: var(--color-text-muted, #888);
}

.report-question-btn:hover {
  color: #e07a1f;
  border-color: #e07a1f;
}

.report-question-btn.active {
  color: #e07a1f;
  border-color: #e07a1f;
  background: rgba(224, 122, 31, 0.1);
}

/* ─── 9. Free Text & Essay Workspace ────────────────────────────────────── */
.essay-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.essay-textarea {
  width: 100%;
  min-height: 180px;
  padding: 16px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  transition: all 0.3s ease;
  direction: ltr;
  unicode-bidi: plaintext;
  /* text-align: start; */
  direction: rtl;
}

/* The rich-text mirror is clipped to the essay field's viewport. Without this
   field-level clip, the mirror's long highlighted value paints outside the
   scrollable textarea and overlaps the answer controls below it. */
.essay-container > .rich-input-highlighter--field {
  min-height: 180px;
  overflow: hidden;
  border-radius: 12px;
}
.essay-container > .rich-input-highlighter--field .rich-input-highlighter__mirror {
  overflow: hidden;
}

[data-theme="dark-slate"] .essay-textarea,
[data-theme="dark"] .essay-textarea {
  background: var(--color-background-secondary);
}

.essay-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

[data-theme="dark-slate"] .essay-textarea:focus,
[data-theme="dark"] .essay-textarea:focus {
  background: var(--color-surface);
}

.essay-textarea.locked {
  cursor: not-allowed;
  opacity: 0.8;
}

.formal-answer {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 5px solid;
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  border-color: #0ea5e9;
  /* Always present in the DOM once rendered (pre-rendered alongside the
     question), shown only once the essay is locked/checked — a pure CSS
     toggle via .show, matching .feedback below, so checking the answer
     never has to re-render (and re-fetch media inside) the question
     card's markdown. */
  display: none;
}

.formal-answer.show {
  display: block;
}

[data-theme="dark-slate"] .formal-answer,
[data-theme="dark"] .formal-answer {
  background: linear-gradient(135deg,
      rgba(14, 165, 233, 0.2) 0%,
      rgba(14, 165, 233, 0.1) 100%);
}

[data-theme="dark-slate"] .formal-answer strong,
[data-theme="dark-slate"] .formal-answer-text,
[data-theme="dark"] .formal-answer strong,
[data-theme="dark"] .formal-answer-text {
  color: #7dd3fc;
}


.formal-answer>strong {
  direction: ltr;
  unicode-bidi: isolate;
  display: block;
  text-align: left;
}

.formal-answer strong {
  margin-bottom: 10px;
  font-size: larger;
}

.formal-answer-text {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
}

/* ─── 10. Multiple Choice Selection Options ──────────────────────────────── */
.options-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--color-surface);
  border-color: var(--color-border);
}

.option-row:hover {
  /* No sideways slide: the row never moves, so hovering along its border can't flicker. */
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}

.option-row:focus-within {
  outline: 3px solid var(--color-primary, #6366f1);
  outline-offset: 2px;
}

.option-row input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.option-label {
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  flex: 1;
  line-height: 1.5;
}

.option-row.selected {
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.option-row.correct {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.option-row.wrong {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.option-row.locked {
  cursor: not-allowed;
  opacity: 0.75;
}

.option-row.locked.correct {
  background: var(--color-success-light) !important;
  border-color: var(--color-success);
}

.option-row.locked.wrong {
  background: var(--color-error-light) !important;
  border-color: var(--color-error);
}

/* Submission CTA Controls */
.check-answer-btn {
  background: var(--gradient-accent);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
  width: 100%;
  margin-top: 20px;
  /* Override the `text-rtl` values set by the RTL/LTR Engine */
  text-align: center !important;
}

.check-answer-btn:hover {
  
  box-shadow: var(--shadow-lg);
  filter: brightness(1.06);
}

.check-answer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.check-answer-btn.hidden {
  display: none;
}

/* ─── 11. Instant Evaluation Feedback ───────────────────────────────────── */
.feedback {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  display: none;
  font-size: 0.95rem;
  font-weight: 600;
  border-left: 5px solid;
  box-shadow: var(--shadow-sm);
}

/* Complex Two-column Layout: [status icon] [explanation framework] */
.feedback.show {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  align-items: start;
  gap: 0 12px;
}

.feedback.correct {
  background: var(--color-success-light);
  color: var(--color-success);
  border-left-color: var(--color-success);
}

.feedback.wrong {
  background: var(--color-error-light);
  color: var(--color-error);
  border-left-color: var(--color-error);
}

[data-theme="dark-slate"] .feedback.correct,
[data-theme="dark"] .feedback.correct {
  color: #6ee7b7;
}

[data-theme="dark-slate"] .feedback.wrong,
[data-theme="dark"] .feedback.wrong {
  color: #f87171;
}

.feedback>div,
.feedback-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  margin-top: 0 !important;
}

.feedback>strong {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.mcq-explanation-label {
  text-align: center !important;
}

.feedback .feedback-body>strong {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  display: inline-block;
}

.feedback.essay-feedback.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.feedback.essay-feedback.show>.feedback-body {
  align-self: stretch;
  width: 100%;
}

/* Footer Navigation Controls */
.navigation {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.nav-btn {
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  /* box-shadow: var(--shadow-md); */
  flex: 1;
  max-width: 200px;
}

.nav-btn:hover:not(:disabled) {
  
  box-shadow: var(--shadow-lg);
  filter: brightness(1.06);
}

.nav-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.nav-btn#prevBtn,
.nav-btn#nextBtn {
  background: var(--color-text-primary);
  color: white;
}

.nav-btn#prevBtn:hover:not(:disabled),
.nav-btn#nextBtn:hover:not(:disabled) {
  background: var(--color-text-secondary);
}

[data-theme="dark-slate"] .nav-btn#prevBtn,
[data-theme="dark-slate"] .nav-btn#nextBtn,
[data-theme="dark"] .nav-btn#prevBtn,
[data-theme="dark"] .nav-btn#nextBtn {
  background: var(--color-primary);
}

[data-theme="dark-slate"] .nav-btn#prevBtn:hover:not(:disabled),
[data-theme="dark-slate"] .nav-btn#nextBtn:hover:not(:disabled),
[data-theme="dark"] .nav-btn#prevBtn:hover:not(:disabled),
[data-theme="dark"] .nav-btn#nextBtn:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

@media (max-width: 768px) {

  .nav-btn#prevBtn:hover:not(:disabled),
  .nav-btn#nextBtn:hover:not(:disabled) {
    background: var(--color-text-primary);
  }
}

/* Core System Asynchronous Loading Indicator */
.loading {
  text-align: center;
  padding: 40px 28px;
  font-size: 1.125rem;
}

.loading::after {
  content: "...";
  animation: dots 1.5s infinite;
}

/* ── Advanced loading skeleton ────────────────────────────────────────────
   Structural placeholder mimicking a real question card (header, title/body
   lines, four option rows) while the quiz data loads. Base state is a flat
   gray placeholder with no motion — the shimmer sweep is opt-in and strictly
   scoped to [data-animations="enabled"] so "High Performance" mode always
   gets the calm, static version, matching .skeleton-media's pattern. */
.skeleton-card {
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border-light);
  background-color: var(--color-surface);
  text-align: initial;
}

.loading::after {
  display: none;
}

.skeleton-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.skeleton-badge,
.skeleton-icon,
.skeleton-text,
.skeleton-option {
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg,
      var(--color-border) 0%,
      var(--color-border-light) 40%,
      var(--color-border) 80%);
  background-size: 1200px 100%;
}

.skeleton-badge {
  width: 60px;
  height: 32px;
  border-radius: 10px;
}

.skeleton-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.skeleton-text {
  height: 16px;
  margin-bottom: 12px;
}

.skeleton-text--title {
  width: 85%;
  height: 20px;
}

.skeleton-text--line {
  width: 55%;
  margin-bottom: 24px;
}

.skeleton-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.skeleton-option {
  height: 54px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
}

/* Loading skeletons stay animated regardless of "الأداء الفائق" /
   reduced-motion mode (see the html[data-motion="reduced"] exclusion
   list in themes.css, which excludes [class*="skeleton"]), matching
   .skeleton-block's pattern on the home page — so this is
   unconditional rather than gated behind [data-animations="enabled"]. */
.skeleton-badge,
.skeleton-icon,
.skeleton-text,
.skeleton-option {
  animation: media-shimmer 1.6s ease-in-out infinite;
}

/* ─── 12. Responsive Breakpoint Adaptations ─────────────────────────────── */
@media (max-width: 768px) {
  body {
    padding: 60px 12px 16px 12px;
  }

  .loading {
    padding: 0px;
  }

  .stats-bar {
    padding: 0 12px;
    z-index: calc(var(--z-overlay, 4000) + 1);
  }

  .stats-content {
    gap: 16px;
  }

  .hamburger-stats {
    font-size: 1.1rem;
    padding: 6px 12px;
  }

  .stat-item {
    font-size: 0.8125rem;
  }

  .stat-icon {
    font-size: 1.1rem;
  }

  .header {
    padding: 24px;
    margin-bottom: 20px;
    border-radius: 16px;
  }

  .header-top {
    flex-direction: column;
    align-items: stretch;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .finish-btn {
    width: 100%;
  }

  .question-card {
    padding: 20px;
    border-radius: 14px;
  }

  .question-header {
    flex-wrap: wrap;
  }

  .question-text {
    font-size: 1.1rem;
  }

  .question-card--large {
    padding: 22px;
  }

  .question-video-container .question-video {
    max-height: min(280px, 45vh);
  }

  .essay-textarea {
    min-height: 150px;
  }

  .nav-btn {
    max-width: none;
    padding: 12px 20px;
  }

  .menu-nav-items.grid-view {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-bar {
    gap: 12px;
    padding: 0 8px;
  }

  .stats-content {
    gap: 12px;
  }

  .stat-item {
    font-size: 0.75rem;
  }

  .stat-icon {
    font-size: 1rem;
  }

  .header h1 {
    font-size: 1.375rem;
  }

  .question-card {
    padding: 18px;
  }

  /* Structural Shift: Stack Status Elements Vertically on Mobile Viewports */
  .feedback.show {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 6px 0;
    padding: 14px;
  }

  .feedback>div,
  .feedback-body,
  .feedback>strong {
    grid-column: 1;
    grid-row: 2;
  }
}

/* ─── 13. Markdown Text Containment Controls ────────────────────────────── */
.question-text,
.option-label,
.feedback,
.formal-answer,
.formal-answer-text,
.md-content {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.md-content {
  width: 100%;
  overflow-x: hidden;
}

/* Markdown-rendered lists: use logical (direction-aware) padding instead of
   the browser's default physical padding-left. Without this, RTL lists keep
   indenting from the left (the wrong side for RTL), pushing list content
   past the right edge of its container and causing horizontal overflow.

   Bug fix: this rule previously also set `padding-left: 0` and
   `padding-right: 0` after the logical declarations. In RTL,
   `padding-inline-start` resolves to the *physical* `padding-right`
   property - so the later `padding-right: 0` declaration was clobbering
   the very padding just set (same physical property, later in source
   order wins), leaving RTL lists with no inline-start padding at all and
   causing the bullets/numbers to overflow past the container edge. The
   physical padding-left/padding-right resets are removed; the logical
   start/end declarations are sufficient and direction-safe on their own. */
.md-content ol,
.md-content ul,
.feedback-body ol,
.feedback-body ul,
.formal-answer-text ol,
.formal-answer-text ul {
  padding-inline-start: 1.5em;
  padding-inline-end: 0;
  margin-block: 0.5em;
}

.md-content ol ol,
.md-content ol ul,
.md-content ul ol,
.md-content ul ul,
.feedback-body ol ol,
.feedback-body ol ul,
.feedback-body ul ol,
.feedback-body ul ul {
  padding-inline-start: 1.25em;
}

.md-content li,
.feedback-body li,
.formal-answer-text li {
  margin-block: 0.25em;
}

/* ─── 14. Lucide & Vector Icon Infrastructure ───────────────────────────── */
.stat-icon i,
.stat-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.mini-badge i,
.mini-badge svg {
  width: 8px;
  height: 8px;
  display: inline-block;
  vertical-align: middle;
}

.menu-nav-icon i,
.menu-nav-icon svg {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
}

.bookmark-btn i,
.bookmark-btn svg,
.flag-btn i,
.flag-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

.menu-flag-count i,
.menu-flag-count svg {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}

/* ─── 15. Scrollable Single-Page Layout Style ───────────────────────────── */
#questionContainer.vertical-style {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 32px;
}

#questionContainer.vertical-style .vertical-question-card {
  scroll-margin-top: 80px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.ltr {
  direction: ltr;
}

.math-block,
.katex-display {
  overflow-y: hidden;
}

/* GFM Markdown Table Styles */
.md-table th,
.md-table td {
  border: 1px solid var(--color-border);
  vertical-align: top;
  overflow-wrap: break-word;
}

.md-table th {
  background: var(--color-primary-light, rgba(99, 102, 241, 0.08));
}

/* ─── 16. Option Interactions & Micro-animations ───────────────────────── */
@keyframes option-select {
  from {
    transform: scale(0.96);
  }

  to {
    transform: scale(1);
  }
}

@keyframes reveal-correct {
  from {
    transform: translateX(-8px);
    opacity: 0.5;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes shimmer-sweep {
  from {
    transform: translateX(-150%) skewX(-15deg);
  }

  to {
    transform: translateX(350%) skewX(-15deg);
  }
}

@keyframes glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
  }

  50% {
    box-shadow:
      0 0 28px rgba(99, 102, 241, 0.85),
      0 0 50px rgba(139, 92, 246, 0.45);
  }
}

.option-row.selected {
  animation: option-select var(--duration-fast) var(--ease-spring) both;
}

.option-row.correct {
  animation: reveal-correct var(--duration-base) var(--ease-out-expo) both;
}

/* Shimmer Button Stacking Context Setup */
.check-answer-btn {
  position: relative;
  overflow: hidden;
}

.check-answer-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.28) 50%,
      transparent 100__);
  transform: translateX(-150%) skewX(-15deg);
  pointer-events: none;
  opacity: 0;
}

.check-answer-btn:not(:disabled):not(.is-loading):hover::after {
  opacity: 1;
  animation: shimmer-sweep var(--duration-base) var(--ease-out-expo) forwards;
}

.check-answer-btn.is-loading {
  cursor: wait;
  pointer-events: none;
}

.check-answer-btn.is-loading::after {
  opacity: 1;
  animation: shimmer-sweep calc(var(--duration-base) * 5) linear infinite;
}

.progress-fill.progress-near-complete {
  animation: glow-pulse calc(var(--duration-slow) * 3) var(--ease-spring) infinite;
}

/* Dynamic Direction Helpers */
[dir="rtl"] {
  text-align: right;
}

[dir="ltr"] {
  text-align: left;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

/* ─── 17. Quiz Page — Mobile Hamburger & Sidebar Overrides ─────────────────
   Scoped strictly to phone viewports so desktop layout is never touched.
   We do NOT modify side-menu.css or side-menu.js.
   (Core sidebar/nav rules now live in the isolated section near the top of
   this file — see "QUIZ PAGE — Isolated Side Navigation".)
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .sidebar-logo.sidebar-expanded-only {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
    position: sticky;
    top: 0;
    z-index: 3;
    flex-shrink: 0;
  }
}

/* Icon feedback on locked options — colour alone isn't enough for colour-blind
   users or grayscale screens. A green check marks every correct option, a red
   cross marks the user's wrong pick. Pure CSS so every render path
   (full render + in-place lock update) gets it. */
.option-row.locked.correct::after,
.option-row.locked.wrong::after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-inline-start: auto;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.option-row.locked.correct::after {
  background-color: var(--color-success, #10b981);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.option-row.locked.wrong::after {
  background-color: var(--color-error, #ef4444);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}