/* Quiz section — interactive multiple-choice
   Uses shared CSS vars: --bg, --paper, --paper-2, --ink, --ink-2, --ink-3, --rule, --rule-2, --accent, --accent-soft */

.quiz-wrap { width: 100%; }

.quiz-lede {
  font-family: "Newsreader","Instrument Serif",serif;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 70ch;
  margin: 0 0 28px;
}
.quiz-lede em { color: var(--accent); font-style: italic; }

/* ── START SCREEN ── */
.quiz-start {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) { .quiz-start { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; } }

.quiz-start-head {
  font-family: "JetBrains Mono","IBM Plex Mono",monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.quiz-start-title {
  font-family: "Newsreader","Instrument Serif",serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 0.95; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.quiz-start-text {
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
  max-width: 48ch; margin-bottom: 24px;
}
.quiz-stats {
  display: flex; gap: 32px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
}
.quiz-stat-num {
  font-family: "Newsreader",serif;
  font-size: 36px; line-height: 0.9; color: var(--accent);
  letter-spacing: -0.02em;
}
.quiz-stat-label {
  font-family: "JetBrains Mono",monospace;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 2px;
}

.quiz-options {
  display: flex; flex-direction: column; gap: 22px;
}
.quiz-opt-group {
  display: flex; flex-direction: column; gap: 8px;
}
.quiz-opt-label {
  font-family: "JetBrains Mono",monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.quiz-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.quiz-pill {
  padding: 7px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  font-family: "JetBrains Mono",monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.quiz-pill:hover { color: var(--ink); border-color: var(--ink); }
.quiz-pill[data-active="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

.quiz-start-cta {
  margin-top: 8px;
  padding: 15px 24px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: "JetBrains Mono",monospace;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-start;
}
.quiz-start-cta:hover { background: var(--ink); border-color: var(--ink); }

/* ── QUESTION SCREEN ── */
.quiz-question-wrap {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 40px 44px;
}
@media (max-width: 760px) { .quiz-question-wrap { padding: 28px 22px; } }

.quiz-progress {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-2);
}
.quiz-progress-bar {
  flex: 1; height: 4px;
  background: var(--rule);
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%; background: var(--accent);
  transition: width 0.4s ease-out;
}
.quiz-progress-text {
  font-family: "JetBrains Mono",monospace;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-2);
  min-width: 70px; text-align: right;
}
.quiz-score-mini {
  font-family: "JetBrains Mono",monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--accent);
  padding-left: 12px; border-left: 1px solid var(--rule);
}

.quiz-q-meta {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px;
}
.quiz-q-num {
  font-family: "Newsreader",serif;
  font-style: italic;
  font-size: 36px; line-height: 1; color: var(--accent);
  letter-spacing: -0.02em;
}
.quiz-q-category {
  font-family: "JetBrains Mono",monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 10px;
  border: 1px solid var(--rule);
}
.quiz-q-text {
  font-family: "Newsreader",serif;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 70ch;
  letter-spacing: -0.005em;
}

.quiz-answers {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 700px) { .quiz-answers { grid-template-columns: 1fr; } }

.quiz-answer {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: flex; align-items: flex-start; gap: 14px;
  font-family: inherit;
}
.quiz-answer:hover:not([disabled]) { border-color: var(--ink); background: var(--paper); }
.quiz-answer:disabled { cursor: default; }
.quiz-answer-letter {
  font-family: "JetBrains Mono",monospace;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  min-width: 24px;
}
.quiz-answer-text {
  font-size: 15px; line-height: 1.5; color: var(--ink);
}

.quiz-answer[data-state="correct"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.quiz-answer[data-state="correct"] .quiz-answer-letter::after {
  content: " ✓"; color: var(--accent);
}
.quiz-answer[data-state="wrong"] {
  background: rgba(184, 52, 28, 0.07);
  border-color: #b8341c;
}
.quiz-answer[data-state="wrong"] .quiz-answer-letter {
  color: #b8341c;
}
.quiz-answer[data-state="wrong"] .quiz-answer-letter::after {
  content: " ✗"; color: #b8341c;
}
.quiz-answer[data-state="dim"] {
  opacity: 0.4;
}

.quiz-feedback {
  margin-top: 18px; padding: 18px 22px;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  font-size: 14px; line-height: 1.6;
  color: var(--ink);
}
.quiz-feedback.wrong { border-left-color: #b8341c; }
.quiz-feedback-label {
  font-family: "JetBrains Mono",monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  display: block; margin-bottom: 6px;
}
.quiz-feedback.wrong .quiz-feedback-label { color: #b8341c; }

.quiz-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-2);
  gap: 16px;
}
.quiz-btn {
  font-family: "JetBrains Mono",monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.quiz-btn:hover { background: var(--ink); color: var(--paper); }
.quiz-btn.accent {
  background: var(--accent); color: var(--paper); border-color: var(--accent);
}
.quiz-btn.accent:hover { background: var(--ink); border-color: var(--ink); }
.quiz-btn.ghost { color: var(--ink-3); border-color: var(--rule); }
.quiz-btn.ghost:hover { color: var(--ink); background: transparent; border-color: var(--ink); }
.quiz-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── RESULT SCREEN ── */
.quiz-result {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 48px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .quiz-result { grid-template-columns: 1fr; padding: 32px 22px; gap: 28px; } }

.quiz-result-score {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.quiz-result-score-num {
  font-family: "Newsreader",serif;
  font-size: clamp(96px, 14vw, 180px);
  line-height: 0.85; color: var(--accent);
  letter-spacing: -0.04em;
}
.quiz-result-score-num em {
  font-family: "Instrument Serif",serif;
  font-style: italic; font-size: 0.5em;
  color: var(--ink-3); margin-left: 6px;
}
.quiz-result-score-label {
  font-family: "JetBrains Mono",monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 16px;
}
.quiz-result-rank {
  font-family: "Newsreader",serif;
  font-style: italic; font-size: 24px;
  color: var(--ink); margin-top: 4px;
}

.quiz-result-details { }
.quiz-result-eyebrow {
  font-family: "JetBrains Mono",monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.quiz-result-title {
  font-family: "Newsreader","Instrument Serif",serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 16px;
}
.quiz-result-text {
  font-size: 14px; line-height: 1.65; color: var(--ink-2);
  max-width: 42ch; margin-bottom: 24px;
}
.quiz-result-breakdown {
  display: grid; gap: 8px;
  padding: 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  margin-bottom: 22px;
}
.quiz-breakdown-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px;
  font-family: "JetBrains Mono",monospace;
  font-size: 11px;
}
.quiz-breakdown-cat { color: var(--ink-2); text-transform: capitalize; }
.quiz-breakdown-score {
  color: var(--ink); font-weight: 600;
}
.quiz-result-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}