/* Interactive practice quiz, driven by /js/practice-quiz.js.
   Loaded only by posts that carry a quiz. Everything here is scoped under .quiz so it
   cannot reach the static .question-block styling in blog.css, which is what the same
   markup falls back to when JavaScript does not run. */

.quiz {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 28px 26px;
  margin: 0 0 30px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.quiz::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gradient);
}

/* The script hides the progress bar, the nav, and individual buttons with the `hidden`
   attribute. The UA rule for [hidden] is display:none, but it loses to any author
   `display` declaration -- and .quiz-bar, .quiz-nav and .quiz-btn all set one -- so
   without this the "Next question" button stays clickable on an unanswered question
   and the progress bar survives onto the results screen. */
.quiz [hidden] { display: none !important; }

/* ----- jump card -----
   Sits near the top of the article and points at the quiz, which otherwise sits far
   enough down the page that readers never learn it is there. The whole card is the
   link, not just the button, so the tap target is the full width of the column.
   .post-body a:not(.cta-btn) in blog.css would underline it, hence the explicit
   text-decoration reset. */
.post-body a.quiz-jump {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
  padding: 18px 20px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.post-body a.quiz-jump:hover {
  color: var(--ink);
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.quiz-jump-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
}
.quiz-jump-body { flex: 1 1 auto; min-width: 0; }
.quiz-jump-title {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.quiz-jump-note {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.quiz-jump-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
}
.post-body a.quiz-jump:hover .quiz-jump-go { background: var(--brand-hover); }
.quiz-jump-go::after { content: "\2193"; }

.quiz-kicker {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--purple);
  margin-bottom: 8px;
}
.post-body .quiz-title {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 10px;
  scroll-margin-top: 20px;
}
.post-body .quiz-lede {
  font-size: 15.5px;
  color: var(--muted);
  margin: 0 0 22px;
}
.post-body .quiz-lede:last-of-type { margin-bottom: 24px; }

/* ----- progress bar ----- */
.quiz-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.quiz-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}
.quiz-counter {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}
.quiz-level {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.quiz-level[data-level="1"],
.quiz-level[data-level="2"] { background: var(--good-tint); color: var(--good-ink); border-color: #bbf7d0; }
.quiz-level[data-level="3"] { background: var(--warn-tint); color: var(--warn-ink); border-color: #fcd34d; }
.quiz-level[data-level="4"],
.quiz-level[data-level="5"] { background: var(--bad-tint); color: var(--bad-ink); border-color: var(--bad-border); }

.quiz-clock {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--gray-400);
}
.quiz-clock.is-over { color: var(--warn-ink); }

.quiz-dots { display: flex; gap: 7px; }
.quiz-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  background: var(--card);
  cursor: default;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.quiz-dot.is-current { border-color: var(--brand); transform: scale(1.25); }
.quiz-dot.is-right { background: var(--good); border-color: var(--good); cursor: pointer; }
.quiz-dot.is-wrong { background: var(--bad); border-color: var(--bad); cursor: pointer; }

/* ----- the question ----- */
.post-body .quiz-stimulus {
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink);
  margin: 0 0 18px;
}
.post-body .quiz-stem {
  font-weight: 650;
  color: var(--ink);
  margin: 0 0 18px;
}

.post-body .quiz-choices {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quiz-choices li { margin: 0 0 10px; }
.quiz-choices li:last-child { margin-bottom: 0; }

.quiz-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--inset);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.quiz-choice:hover:not(:disabled) {
  border-color: var(--brand-border);
  background: var(--brand-tint);
}
.quiz-choice:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.quiz-choice:disabled { cursor: default; }

.quiz-letter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--gray-300);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray-600);
}
.quiz-choice:hover:not(:disabled) .quiz-letter { border-color: var(--brand); color: var(--brand); }

.quiz-choice.is-correct {
  border-color: var(--good);
  background: var(--good-tint);
  color: var(--gray-800);
}
.quiz-choice.is-correct .quiz-letter { background: var(--good); border-color: var(--good); color: #fff; }
.quiz-choice.is-wrong {
  border-color: var(--bad);
  background: var(--bad-tint);
  color: var(--gray-800);
}
.quiz-choice.is-wrong .quiz-letter { background: var(--bad); border-color: var(--bad); color: #fff; }
.quiz-choice.is-dim { color: var(--gray-500); background: var(--card); }
.quiz-choice.is-dim .quiz-letter { border-style: dashed; color: var(--gray-400); }

/* ----- feedback ----- */
.quiz-feedback {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--gray-50);
  font-size: 15.5px;
  line-height: 1.68;
}
.quiz-feedback.is-right { border-left-color: var(--good); }
.quiz-feedback.is-wrong { border-left-color: var(--bad); }

.post-body .quiz-verdict {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 12px;
}
.quiz-feedback.is-right .quiz-verdict { color: var(--good-ink); }
.quiz-feedback.is-wrong .quiz-verdict { color: var(--bad-ink); }
.quiz-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.quiz-feedback.is-right .quiz-mark { background: var(--good); }
.quiz-feedback.is-wrong .quiz-mark { background: var(--bad); }

.post-body .quiz-why { margin: 0 0 12px; color: var(--gray-600); }
.post-body .quiz-why-key { color: var(--gray-700); }
.quiz-why strong { color: var(--ink); }

.quiz-more { margin-top: 4px; }
.quiz-more > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--brand);
}
.quiz-more > summary::-webkit-details-marker { display: none; }
.quiz-more > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.quiz-more[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.quiz-more-body { margin-top: 12px; }
.post-body .quiz-more-body p {
  margin: 0 0 10px;
  font-size: 14.5px;
  color: var(--gray-500);
}
.post-body .quiz-more-body p:last-child { margin-bottom: 0; }

.post-body .quiz-family {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--gray-400);
}
.quiz-family strong { color: var(--gray-600); }

/* ----- nav ----- */
.quiz-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.quiz-hint {
  font-size: 13.5px;
  color: var(--gray-400);
  margin-right: auto;
}
.quiz-nav .quiz-btn:last-child { margin-left: auto; }

.quiz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.quiz-btn:hover { background: var(--brand-hover); }
/* .post-body a:not(.cta-btn) in blog.css also catches this button and underlines it in
   --brand-border; same trap the .cta-btn exclusion there exists to avoid. */
.post-body a.quiz-btn,
.post-body a.quiz-btn:hover { color: #fff; text-decoration: none; }
.quiz-btn-cta { background: var(--gradient); }
.quiz-btn-cta:hover { background: var(--purple-deep); }
.quiz-btn-ghost {
  background: transparent;
  border-color: var(--gray-300);
  color: var(--gray-600);
}
.quiz-btn-ghost:hover { background: var(--gray-100); border-color: var(--gray-400); color: var(--ink); }

/* ----- results ----- */
.quiz-results { text-align: left; }
.post-body .quiz-score {
  font-size: 46px;
  font-weight: 750;
  line-height: 1;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -.02em;
}
.quiz-score span { font-size: 26px; font-weight: 650; color: var(--gray-400); }
.post-body .quiz-score-note {
  font-size: 13.5px;
  color: var(--gray-400);
  margin: 0 0 18px;
}
.post-body .quiz-message {
  font-size: 16px;
  color: var(--gray-600);
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-md);
}

.quiz-recap {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 0 0 10px;
}
.quiz-recap th,
.quiz-recap td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.quiz-recap thead th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
}
.quiz-recap tbody tr { cursor: pointer; }
.quiz-recap tbody tr:hover { background: var(--gray-50); }
.quiz-recap tbody tr:last-child td { border-bottom: none; }
.quiz-recap td { color: var(--gray-600); }
.quiz-recap td:first-child { color: var(--gray-400); width: 1%; }
.quiz-tick { color: var(--good); font-weight: 700; }
.quiz-cross { color: var(--bad); font-weight: 700; }

.post-body .quiz-recap-note {
  font-size: 12.5px;
  color: var(--gray-400);
  margin: 0 0 22px;
}

.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* Shown only while the static fallback is in place; the script removes it. */
.post-body .quiz-static-note {
  font-size: 13.5px;
  color: var(--gray-400);
  margin: 0 0 22px;
}

@media (max-width: 720px) {
  .quiz { padding: 24px 20px 22px; }
  .post-body a.quiz-jump { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .quiz-jump-body { flex: 1 1 200px; }
  .quiz-jump-go { width: 100%; justify-content: center; }
  .post-body .quiz-stimulus { font-size: 16px; }
  .quiz-choice { font-size: 15.5px; padding: 11px 12px; gap: 10px; }
  .quiz-nav { flex-wrap: wrap; }
  .quiz-hint { order: 3; width: 100%; margin-right: 0; }
  .post-body .quiz-score { font-size: 40px; }
  .quiz-recap th:nth-child(2),
  .quiz-recap td:nth-child(2) { display: none; }
  .quiz-btn { padding: 11px 16px; }
}