/* Self Quiz v11 corrective layer. Loaded last so functional state colours win. */

/* Stable semantic palettes for the three supported Self Quiz modes. */
body.light-mode {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --card: #ffffff;
  --text: #172033;
  --muted: #526176;
  --soft-border: #cbd5e1;
  --soft-bg: #eef2f7;
  color: var(--text);
  background-color: var(--bg);
}

body.sepia-mode {
  --bg: #f4ecd8;
  --panel: #fffaf0;
  --card: #fff8e8;
  --text: #382c21;
  --muted: #6b5948;
  --soft-border: #cdb892;
  --soft-bg: #eee0c5;
  color: var(--text);
  background-color: var(--bg);
}

body:not(.light-mode):not(.sepia-mode)[data-page="quiz"],
body:not(.light-mode):not(.sepia-mode)[data-page="results"],
body:not(.light-mode):not(.sepia-mode)[data-page="setup"],
body:not(.light-mode):not(.sepia-mode)[data-page="resume"] {
  --bg: #050505;
  --panel: #0c0c0d;
  --card: #121214;
  --text: #f4f4f5;
  --muted: #b0b3bb;
  --soft-border: #34343a;
  --soft-bg: #1a1a1e;
  color: var(--text);
  background: var(--bg);
}

/* Readability: use semantic text colours instead of inherited pale/white rules. */
body.light-mode :is(.q-text, .field-label, .panel-title, .quiz-title, .nav-header, .q-content, .stat-num, .score-val, .score-msg, .section-title, .chapter-name, .review-item, .explanation-box, .exp-box, .ans-val, .modal-card, .premade-about, .quiz-identity-strip),
body.sepia-mode :is(.q-text, .field-label, .panel-title, .quiz-title, .nav-header, .q-content, .stat-num, .score-val, .score-msg, .section-title, .chapter-name, .review-item, .explanation-box, .exp-box, .ans-val, .modal-card, .premade-about, .quiz-identity-strip) {
  color: var(--text);
}

body.light-mode :is(.small, .stat-label, .q-meta, .ans-label, .chapter-stat, .score-total, .modal-body, .creator-bio, .copyright-footer, .auto-time-help, .setting-help),
body.sepia-mode :is(.small, .stat-label, .q-meta, .ans-label, .chapter-stat, .score-total, .modal-body, .creator-bio, .copyright-footer, .auto-time-help, .setting-help) {
  color: var(--muted);
}

body.sepia-mode :is(textarea, input[type="number"], input[type="search"], select),
body.light-mode :is(textarea, input[type="number"], input[type="search"], select) {
  color: var(--text);
  background: var(--card);
  border-color: var(--soft-border);
}

body.sepia-mode :is(textarea, input, select)::placeholder,
body.light-mode :is(textarea, input, select)::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Answer states intentionally outrank theme and hover selectors. */
body .option-item {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  text-align: left;
}

body .option-item.selected,
body .option-item.selected:hover,
html[data-site-scope="selfquiz"] body .option-item.selected.selected,
html[data-site-scope="selfquiz"] body .option-item.selected.selected:hover,
#optionsList .option-item.selected,
#optionsList .option-item.selected:hover {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
  border: 2px solid var(--primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

body .option-item.correct,
body .option-item.correct:hover,
html[data-site-scope="selfquiz"] body .option-item.correct.correct,
html[data-site-scope="selfquiz"] body .option-item.correct.correct:hover,
#optionsList .option-item.correct,
#optionsList .option-item.correct:hover {
  color: #064e3b !important;
  background: #d1fae5 !important;
  border: 2px solid #10b981 !important;
  box-shadow: none !important;
  transform: none;
}

body .option-item.wrong,
body .option-item.incorrect,
body .option-item.wrong:hover,
body .option-item.incorrect:hover,
html[data-site-scope="selfquiz"] body .option-item.wrong.wrong,
html[data-site-scope="selfquiz"] body .option-item.incorrect.incorrect,
html[data-site-scope="selfquiz"] body .option-item.wrong.wrong:hover,
html[data-site-scope="selfquiz"] body .option-item.incorrect.incorrect:hover,
#optionsList .option-item.wrong,
#optionsList .option-item.incorrect,
#optionsList .option-item.wrong:hover,
#optionsList .option-item.incorrect:hover {
  color: #7f1d1d !important;
  background: #fee2e2 !important;
  border: 2px solid #ef4444 !important;
  box-shadow: none !important;
  transform: none;
}

body:not(.light-mode):not(.sepia-mode) .option-item.correct,
body:not(.light-mode):not(.sepia-mode) .option-item.correct:hover,
html[data-site-scope="selfquiz"][data-theme="dark"] body .option-item.correct.correct,
html[data-theme="dark"] #optionsList .option-item.correct {
  color: #d1fae5 !important;
  background: #123c2d !important;
  border-color: #34d399 !important;
}

body:not(.light-mode):not(.sepia-mode) .option-item.wrong,
body:not(.light-mode):not(.sepia-mode) .option-item.incorrect,
body:not(.light-mode):not(.sepia-mode) .option-item.wrong:hover,
body:not(.light-mode):not(.sepia-mode) .option-item.incorrect:hover,
html[data-site-scope="selfquiz"][data-theme="dark"] body .option-item.wrong.wrong,
html[data-site-scope="selfquiz"][data-theme="dark"] body .option-item.incorrect.incorrect,
html[data-theme="dark"] #optionsList .option-item.wrong,
html[data-theme="dark"] #optionsList .option-item.incorrect {
  color: #fee2e2 !important;
  background: #451a1a !important;
  border-color: #f87171 !important;
}

body .option-item.disabled,
html[data-site-scope="selfquiz"] body .option-item.disabled.disabled,
#optionsList .option-item.disabled {
  color: var(--muted) !important;
  background: var(--soft-bg) !important;
  border-color: var(--soft-border) !important;
  opacity: 0.82;
  box-shadow: none !important;
  transform: none;
}

body .option-item.correct .opt-key { color: inherit; }
body .option-item.wrong .opt-key,
body .option-item.incorrect .opt-key { color: inherit; }

body :is(.ans-correct, .stat-correct .stat-num) { color: #067647 !important; }
body :is(.ans-wrong, .stat-wrong .stat-num) { color: #b42318 !important; }
body .stat-time .stat-num { color: #7a4d00 !important; }

body:not(.light-mode):not(.sepia-mode) :is(.ans-correct, .stat-correct .stat-num) {
  color: #6ee7b7 !important;
}

body:not(.light-mode):not(.sepia-mode) :is(.ans-wrong, .stat-wrong .stat-num) {
  color: #fca5a5 !important;
}

body:not(.light-mode):not(.sepia-mode) .stat-time .stat-num {
  color: #f5d88a !important;
}

/* Containers share one content width and never touch or clip viewport edges. */
.quiz-body {
  width: min(100%, 1400px);
  max-width: 1400px;
  padding-inline: clamp(12px, 2vw, 24px);
}

.question-area,
.nav-panel,
.explanation-box,
.review-item,
.chapter-breakdown,
.score-card,
.stat-tile {
  min-width: 0;
  border-color: var(--soft-border);
}

.question-area,
.nav-panel {
  border-radius: 16px;
  overflow: hidden;
}

.question-area > :not(#drawingCanvas) {
  max-width: 100%;
}

.q-text,
.option-item > span:last-child,
.explanation-box,
.review-item,
.modal-card {
  overflow-wrap: anywhere;
  word-break: normal;
}

body:not(.light-mode):not(.sepia-mode) :is(.question-area, .nav-panel, .review-item, .score-card, .stat-tile, .chapter-breakdown) {
  background: var(--card);
  border-color: var(--soft-border);
  box-shadow: none;
}

body:not(.light-mode):not(.sepia-mode) .score-card::after {
  background: radial-gradient(circle at center, rgba(255,255,255,.045), transparent 70%);
}

@media (max-width: 980px) {
  #quizView.view-fill {
    min-height: 0;
    overflow: hidden;
  }

  .quiz-body {
    display: block;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding: 12px 12px calc(108px + env(safe-area-inset-bottom));
  }

  .question-area {
    height: auto;
    min-height: calc(100vh - 164px);
    overflow: visible;
    padding: clamp(14px, 4vw, 22px);
    background: var(--card);
    border: 1px solid var(--soft-border);
    border-radius: 14px;
  }

  .explanation-box.show {
    flex: 0 0 auto;
    margin-bottom: 20px;
  }

  #mobileFocusBtn {
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
  }

  #mobileFocusBtn svg {
    width: 18px;
    height: 18px;
  }

  .mobile-focus-label {
    display: block;
    font-size: .67rem;
    line-height: 1;
    font-weight: 850;
  }
}

@media (max-width: 430px) {
  .quiz-header { padding-inline: 10px; }
  .quiz-body { padding-inline: 8px; }
  .question-area { padding: 14px 12px; }
  .options-list { gap: 10px; }
  .option-item { padding: 13px 12px; gap: 10px; }
  .mobile-controls { padding-inline: 8px; gap: 7px; }
  .mobile-controls .btn { min-width: 0; padding-inline: 7px; font-size: .86rem; }
  .results-container { padding-inline: 10px; }
}

@media (max-width: 340px) {
  .quiz-brand-chip { display: none; }
  .timer { min-width: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .option-item { transition: none; }
}

/* Generated menu mirrors the real directory tree without flattening. */
.category-list,
.quiz-folder,
.quiz-folder-children,
.quiz-grid,
.quiz-item,
.quiz-details {
  min-width: 0;
}

.quiz-folder {
  overflow: hidden;
}

.quiz-folder .quiz-folder {
  margin: 8px 0 0 clamp(4px, 1.5vw, 10px);
  border-left: 2px solid var(--soft-border, rgba(127,127,127,.35));
  border-radius: 10px;
}

.quiz-folder-children {
  padding: 0 clamp(5px, 1.6vw, 12px) 10px;
}

.quiz-folder summary,
.quiz-folder .category-label,
.quiz-folder .category-label > span,
.quiz-folder .quiz-title,
.quiz-folder .quiz-meta,
.quiz-folder .quiz-card-description {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.quiz-folder .quiz-grid {
  width: 100%;
  margin-top: 8px;
}

html[data-theme="dark"] .quiz-folder,
body:not(.light-mode):not(.sepia-mode) .quiz-folder {
  background: #111214;
  border-color: #383a40;
  box-shadow: none;
}

/* The home hero was originally dark-only. Keep every word and brand control
   readable when the shared theme button switches it to Light. */
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page > .site-header {
  top: 0 !important;
  color: #13231f !important;
  background: rgba(244, 247, 246, .9) !important;
  border-bottom-color: rgba(20, 40, 34, .14) !important;
  backdrop-filter: blur(18px);
}
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page :is(.brand, .main-nav a) {
  color: #13231f !important;
}
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page .main-nav {
  color: #13231f !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(20, 40, 34, .18) !important;
}
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page .main-nav a:hover,
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page .main-nav a:focus-visible {
  color: #071b17 !important;
  background: rgba(13, 118, 111, .1) !important;
}
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page .nav-action {
  color: #083e38 !important;
  background: #d8f3ef !important;
  border-color: #65bdb5 !important;
}
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page .hero-copy {
  color: #40564e !important;
}
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page .button.secondary {
  color: #13231f !important;
  background: rgba(255, 255, 255, .88) !important;
  border-color: #c7d6d1 !important;
}
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page .button.primary {
  color: #061916 !important;
}
html[data-site-scope="selfquiz"][data-theme="light"] body.selfquiz-home-page .hero-mark {
  opacity: .28 !important;
  filter: drop-shadow(0 24px 42px rgba(20, 40, 34, .16)) !important;
}

/* 100vw includes the desktop scrollbar and caused a narrow horizontal strip. */
.about-premium-wrapper {
  width: 100%;
  left: auto;
  margin-left: 0;
}

@media (max-width: 430px) {
  .menu-shell { padding-inline: 8px; }
  .quiz-folder .quiz-folder { margin-left: 4px; }
  .quiz-folder-children { padding-inline: 4px; }
  .quiz-folder summary { padding-inline: 10px; }
  .quiz-folder .quiz-item { padding-inline: 10px; }
}