/* Quizzes (views/quizzes.js). Everything here is prefixed quiz-. */

.quiz-row { display: block; color: inherit; text-decoration: none; min-height: 44px; }
.quiz-row h3 { margin: 0; }
.quiz-row-top { align-items: flex-start; }
.quiz-row-top .tag { flex: none; margin-top: 2px; }
.tag.quiz-kind-awareness { background: var(--halo-soft); color: var(--ink); }
.quiz-past { margin-top: 6px; color: var(--ink); }
.quiz-cw { font-style: italic; }

.quiz-q, .quiz-result { margin-top: 8px; }
.quiz-progress { margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.quiz-question { font-size: 1.25rem; line-height: 1.3; margin: 0 0 14px; outline: none; }
.quiz-options { margin-bottom: 14px; }

/* Answers wrap, so they get a taller, left-aligned button instead of a pill. */
.btn.quiz-opt {
  justify-content: flex-start; text-align: left; height: auto;
  padding: 12px 16px; border-radius: var(--radius); line-height: 1.35;
  background: var(--surface); white-space: normal;
}
.btn.quiz-opt:hover, .btn.quiz-opt:focus-visible { border-color: var(--halo); box-shadow: 0 0 0 3px var(--halo-soft); }
.quiz-back { margin-top: 4px; }

.quiz-result {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px; box-shadow: 0 0 0 4px var(--halo-soft);
}
.quiz-result > p:first-child { margin: 0 0 6px; }
.quiz-result-title { line-height: 1.15; margin: 0; outline: none; overflow-wrap: anywhere; }
.quiz-result-text { margin: 12px 0 0; line-height: 1.5; }
.quiz-tip {
  margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--halo);
  background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; line-height: 1.45;
}
.quiz-link { margin-top: 14px; }
.quiz-actions { flex-wrap: wrap; margin-top: 16px; }