/* Quiz runtime family — play/basic/intermediate/NIM shared shell and a11y */

.quiz-family-page:not(.lms-app) {
  background: var(--quiz-bg-page);
}

.quiz-family-page .quiz-container .option,
.quiz-family-page .quiz-container .btn,
.quiz-family-page .quiz-container .control-btn,
.quiz-family-page .quiz-container .toggle-btn,
.quiz-family-page .quiz-container .home-btn,
.quiz-family-page .quiz-dialog-btn,
.quiz-family-page .top-nav .nav-links a {
  min-height: 44px;
}

.quiz-family-page .theme-toggle,
.quiz-family-page .nav-toggle,
.quiz-family-page .site-footer .footer-social a {
  width: 44px;
  height: 44px;
}

.quiz-family-page a:focus-visible,
.quiz-family-page button:focus-visible,
.quiz-family-page select:focus-visible,
.quiz-family-page .option:focus-visible,
.quiz-family-page .quiz-related-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Progress — shared with LMS token naming */
.quiz-family-page .progress-container {
  background: var(--quiz-progress-track);
}

.quiz-family-page .progress-bar {
  background: var(--quiz-progress-fill);
  box-shadow: var(--quiz-progress-glow);
}

/* Error state shell (loader fallback) */
.quiz-family-page .result.quiz-error-state {
  padding: var(--space-5);
  border: 1px dashed var(--color-border-accent);
  border-radius: var(--radius-medium);
  background: var(--color-surface-alt);
}

@media (prefers-reduced-motion: reduce) {
  .quiz-family-page .progress-bar,
  .quiz-family-page .option,
  .quiz-family-page .result-score-ring {
    transition: none;
    animation: none;
  }
}


/* Crawlable quiz landing copy (SEO remediation) */
.quiz-seo-panel {
  text-align: left;
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--color-border, rgba(148,163,184,.2));
  border-radius: 12px;
  background: var(--color-surface-alt, rgba(15,23,42,.45));
}
.quiz-seo-panel h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--color-heading, #e2e8f0);
}
.quiz-seo-panel p,
.quiz-seo-panel li {
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.92rem;
  line-height: 1.55;
}
.quiz-seo-panel ul {
  margin: 0 0 12px 1.1rem;
  padding: 0;
}
.quiz-seo-panel .quiz-related {
  margin: 12px 0 0;
}
.quiz-seo-faq details {
  margin: 8px 0;
  border-top: 1px solid rgba(148,163,184,.15);
  padding-top: 8px;
}
.quiz-seo-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-heading, #e2e8f0);
}