/*
 * T180.7 quiz styles.
 *
 * Pairs with quiz.js / quiz-dom.js / quiz-test.js to style inline
 * formative quizzes and the end-of-lesson test.
 *
 * Theme: reuses lesson custom properties (--accent, --bg, --ink,
 * --ink-dim, --ink-faint, --rule, --mono, --serif, --p2). No new color
 * tokens. All copy in the JS uses plain ASCII (no em dashes); arrows use
 * the "->" sequence to keep the brand voice constraint.
 *
 * Tier-0 deterrent (T157.1): the lesson body sets user-select: none.
 * Quiz choice buttons and inputs are interactive, so they opt back into
 * normal pointer/keyboard behavior without needing text selection.
 */

/* ----- shared ----- */
.quiz-stem {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 12px;
}

/* ----- inline (formative) self-check ----- */
.quiz-inline-block {
  margin: 28px 0;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: rgba(212, 255, 58, 0.03);
}

.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-choice {
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    color 120ms ease;
}

.quiz-choice:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.quiz-choice.is-selected {
  border-color: var(--accent);
  color: var(--ink);
  background: rgba(212, 255, 58, 0.08);
}

/* Verdicts after submitting: the correct choice is traffic-light green so
 * it stands out from the lime selection state; a wrong pick is red. */
.quiz-choice.is-correct {
  border-color: var(--correct);
  color: #e4f7e8;
  background: rgba(41, 185, 74, 0.16);
}

.quiz-choice.is-incorrect {
  border-color: var(--incorrect);
  color: #f7e2e3;
  background: rgba(229, 72, 77, 0.13);
}

.quiz-inline-feedback {
  margin: 12px 0 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 12px;
  font-style: italic;
}

/* ----- end-of-lesson test (the gate) ----- */
[data-quiz-test] {
  margin: 48px 0 24px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.quiz-test-question {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
}

.quiz-test-question legend.quiz-stem {
  padding: 0;
}

.quiz-test-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
}

.quiz-test-choice input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
}

.quiz-test-choice:hover {
  color: var(--ink);
}

.quiz-test-submit {
  margin-top: 8px;
  padding: 12px 26px;
  background: var(--accent);
  color: #000;
  border: 0;
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.quiz-test-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ----- result ----- */
.quiz-test-result {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-dim);
}

.quiz-test-result.is-pass .quiz-test-score {
  color: var(--accent);
}

.quiz-test-result.is-fail .quiz-test-score {
  color: var(--ink);
}

.quiz-test-score {
  font-weight: 600;
  margin: 0 0 10px;
}

.quiz-continue {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 22px;
  background: var(--accent);
  color: #000;
  text-decoration: none;
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* ----- wrap moment (T199.6): fires on test PASS ----- */
.quiz-wrap-moment {
  margin: 4px 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--accent);
  border-left: 4px solid var(--correct, var(--accent));
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.02);
}

.quiz-wrap-clap {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--correct, var(--accent));
}

.quiz-wrap-headline {
  margin: 8px 0 2px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
}

.quiz-wrap-sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
}

.quiz-wrap-moment.is-animated {
  animation: quiz-wrap-in 480ms ease-out both;
}

.quiz-wrap-moment.is-animated .quiz-wrap-clap {
  animation: quiz-wrap-clap-in 360ms ease-out 120ms both;
}

@keyframes quiz-wrap-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes quiz-wrap-clap-in {
  from {
    opacity: 0;
    letter-spacing: 0.5em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.22em;
  }
}

.quiz-missed-label {
  margin: 12px 0 6px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
}

.quiz-missed {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--ink-dim);
}

.quiz-missed-item {
  margin: 4px 0;
}

.quiz-remediation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.quiz-tutor-link {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}

.quiz-remedial-step {
  padding: 10px 18px;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}

.quiz-remedial-step:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.quiz-remedial-step.is-done {
  border-color: var(--p2);
  color: var(--p2);
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .quiz-choice {
    transition: none;
  }
  .quiz-wrap-moment.is-animated,
  .quiz-wrap-moment.is-animated .quiz-wrap-clap {
    animation: none;
  }
}

/* T213.1 — ≥44px tap targets on mobile. The inline self-check buttons
 * (~37px) and the end-of-lesson test radio rows (~30px) are below the 44px
 * touch-target floor; give both a 44px min-height and enlarge the radio glyph
 * so it is comfortable to tap on a phone. Desktop sizing is untouched. */
@media (max-width: 640px) {
  .quiz-choice {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .quiz-test-choice {
    min-height: 44px;
  }
  .quiz-test-choice input[type="radio"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
}