/* 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; }
}

.swipe-finger { display:inline-block; animation:swipeFinger 1.2s ease-in-out infinite; }
.swipe-session-hint { position:fixed; left:50%; bottom:86px; z-index:2600; transform:translateX(-50%); padding:10px 16px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:#101b18; color:#fff; font-weight:800; box-shadow:0 10px 35px rgba(0,0,0,.3); }
@keyframes swipeFinger { 50% { transform:translateX(14px); } }

@media (min-width: 981px) {
  #quizView.view-fill { height:100vh; overflow:hidden; }
  .quiz-body { display:block; overflow-y:auto; }
  .question-area { height:auto; min-height:calc(100vh - 150px); overflow:visible; }
  .col-divider { display:none; }
  .nav-panel { height:auto; margin-top:18px; overflow:visible; }
  .nav-grid-container { overflow:visible; }
  body.focus-mode .nav-panel, body.focus-clean .nav-panel { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-finger { animation:none !important; }
}

/* 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;
}

/* The landing footer and consent notice keep dark surfaces in every mode. */
html[data-site-scope="selfquiz"] body.selfquiz-home-page .site-footer,
html[data-site-scope="selfquiz"] body.selfquiz-home-page .site-footer :is(.brand, p, a) {
  color: #ded8cc !important;
}
html[data-site-scope="selfquiz"] body.selfquiz-home-page .privacy-notice strong {
  color: #f7fffc !important;
}
html[data-site-scope="selfquiz"] body.selfquiz-home-page .privacy-notice p {
  color: #c9d7d2 !important;
}
html[data-site-scope="selfquiz"][data-theme="sepia"] body.selfquiz-home-page .eyebrow {
  color: #684f39 !important;
}
html[data-site-scope="selfquiz"][data-theme="sepia"] body.selfquiz-home-page .nav-action {
  color: #173c37 !important;
}

/* The landing is dark-locked, but these two sections intentionally use light
   cards. Keep their local controls and eyebrow text readable on those cards. */
html[data-site-scope="selfquiz"] body.selfquiz-home-page[data-theme-lock="dark"] .creator-section .button.secondary {
  color: #17312b !important;
  background: rgba(255, 255, 255, .58) !important;
  border-color: rgba(23, 49, 43, .24) !important;
}
html[data-site-scope="selfquiz"] body.selfquiz-home-page[data-theme-lock="dark"] .faq-section .eyebrow {
  color: #0b665f !important;
}

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

/* Results use an H2 so each application document keeps one semantic H1. */
.results-title {
  margin: 0 0 10px;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 900;
}

@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; }
}

/* Once-only, first-question gesture tutorial. */
.swipe-intro {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(18, 25, 22, .72);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease;
}
.swipe-intro.show { opacity: 1; }
.swipe-intro-card {
  width: min(100%, 430px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: clamp(22px, 6vw, 34px);
  border: 1px solid rgba(46, 91, 76, .2);
  border-radius: 28px;
  color: #17372e;
  background: #fffaf0;
  box-shadow: 0 28px 80px rgba(9, 27, 22, .32);
  text-align: center;
  transform: translateY(12px) scale(.98);
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
}
.swipe-intro.show .swipe-intro-card { transform: translateY(0) scale(1); }
.swipe-intro-kicker {
  margin: 22px 0 7px;
  color: #74405f;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.swipe-intro h2 {
  margin: 0;
  color: #17372e;
  font-size: clamp(1.8rem, 8vw, 2.55rem);
  line-height: 1.05;
}
.swipe-intro p:not(.swipe-intro-kicker) {
  margin: 14px auto 22px;
  color: #4b625a;
  font-size: 1rem;
  line-height: 1.55;
}
.swipe-intro-button {
  width: 100%;
  min-height: 52px;
  color: #fff;
  background: #246451;
  box-shadow: 0 12px 28px rgba(36, 100, 81, .24);
}
.swipe-intro-demo {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg, #e4f2ea, #f2e8ef);
}
.swipe-demo-card {
  width: min(74%, 250px);
  padding: 24px 20px;
  border: 1px solid rgba(36, 100, 81, .18);
  border-radius: 18px;
  background: #fffdf7;
  box-shadow: 0 16px 34px rgba(38, 66, 57, .16);
  animation: swipeDemo 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
.swipe-demo-card i {
  display: block;
  height: 8px;
  margin: 8px 0;
  border-radius: 999px;
  background: #c8dcd4;
}
.swipe-demo-card i:first-child { width: 82%; background: #4d8c7a; }
.swipe-demo-card i:nth-child(2) { width: 66%; }
.swipe-demo-card i:last-child { width: 74%; }
.swipe-demo-arrow {
  position: absolute;
  bottom: 10px;
  color: #74405f;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
}
@keyframes swipeDemo {
  0%, 14%, 50%, 100% { transform: translate3d(0,0,0) rotate(0); opacity: 1; }
  30% { transform: translate3d(-30px,8px,0) rotate(-2deg); opacity: .72; }
  70% { transform: translate3d(30px,8px,0) rotate(2deg); opacity: .72; }
}
.swipe-intro-demo.is-touch .swipe-finger { display:inline-block; transform-origin:50% 100%; animation:swipeFingerBoth 3.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes swipeFingerBoth { 0%,14%,50%,100%{transform:translate3d(0,0,0)}30%{transform:translate3d(-30px,6px,0)}70%{transform:translate3d(30px,6px,0)} }

@media (max-width: 360px) {
  .swipe-intro { padding: 10px; }
  .swipe-intro-card { max-height: calc(100dvh - 20px); padding: 18px; border-radius: 22px; }
  .swipe-intro-demo { min-height: 126px; }
  .swipe-demo-card { padding-block: 18px; }
  .swipe-intro-kicker { margin-top: 16px; }
  .swipe-intro p:not(.swipe-intro-kicker) { margin-block: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-intro,
  .swipe-intro-card,
  .swipe-demo-card,
  .swipe-finger { animation: none !important; transition-duration: 60ms !important; }
}