/* Quizzes: the quiz page, its results page, and the player's quiz layer on the stage.
   Everything uses the theme tokens (light and dark), the layer over the stage included. */
.quiz h1{margin:0 0 6px}
.quiz .lead{margin:0 0 28px;color:var(--muted)}
.quiz-card{background:var(--surface,var(--panel));border:1px solid var(--line);border-radius:var(--radius,14px);padding:22px 26px;margin:0 0 24px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 32px -18px rgba(0,0,0,.3)}
.quiz-card p{margin:0 0 10px}
.quiz-stats{color:var(--muted);font-variant-numeric:tabular-nums}
.quiz-score{font-family:var(--font-display,Georgia,serif);font-size:34px;font-weight:500;letter-spacing:-.01em;margin:0 0 10px;font-variant-numeric:tabular-nums}
.quiz-form{display:grid;gap:20px;max-width:820px}
.quiz-q{background:var(--surface,var(--panel));border:1px solid var(--line);border-radius:var(--radius,14px);padding:22px 26px;margin:0 0 20px;max-width:820px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 32px -18px rgba(0,0,0,.3)}
.quiz-form .quiz-q{margin:0}
/* a floated legend renders INSIDE the fieldset box; a normal legend straddles the top border */
.quiz-q legend{float:left;width:100%;font-weight:600;font-size:18px;padding:0;margin:0 0 10px;line-height:1.45}
.quiz-q legend + *{clear:both}
.quiz-q .num{color:var(--accent-ink);font-weight:700;margin-right:6px;font-variant-numeric:tabular-nums}
.quiz-q .note{margin:4px 0 12px;color:var(--muted)}
.quiz-choice{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm,10px);cursor:pointer;line-height:1.45;
  transition:background-color .15s ease}
.quiz-choice:hover{background:var(--surface-2,var(--hover-bg))}
.quiz-choice:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.quiz-choice input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent);cursor:pointer}
.quiz-q-text{font-weight:600;font-size:18px;margin:0 0 12px;line-height:1.45}
.quiz-mark{margin-left:10px;font-size:14px;font-weight:700}
.quiz-result.right .quiz-mark{color:var(--ok)}
.quiz-result.wrong .quiz-mark{color:var(--err)}
.quiz-answers{margin:0 0 14px;padding-left:22px;line-height:1.7}
.quiz-answers li.is-correct{font-weight:700}
.quiz-answers .tag{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--pill-none-bg);color:var(--pill-none-ink)}
.quiz-answers .tag.ok-tag{background:var(--pill-good-bg);color:var(--pill-good-ink)}
.quiz-expl{margin:0;color:var(--muted);line-height:1.6;border-left:3px solid var(--accent);padding-left:14px}

/* nav entry in the lesson's section list */
#sectionNav li.nav-quiz a{color:var(--accent-ink);font-weight:700}

/* player: questions between sections and the end card, over the stage. The layer follows the theme toggle
   (redesign phase R3): a scrim of the page colour dims the scene, and the solid .q-box carries all the text, so
   contrast never depends on the 3D scene behind it. Green (--ok) = right, red (--err) = wrong or failed only. */
.quiz-layer{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--bg);background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink)}
.quiz-layer.hidden{display:none}
.quiz-layer .q-box{width:min(760px,100%);max-height:100%;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius,14px);padding:26px 30px;box-shadow:var(--shadow-lift)}
.quiz-layer h2{margin:0 0 8px;font-size:clamp(22px,2.4vw,32px);color:var(--ink)}
.quiz-layer p{margin:0 0 12px;color:var(--muted);line-height:1.55}
.quiz-layer .q-item{border-top:1px solid var(--line);padding:14px 0}
.quiz-layer .q-text{font-weight:600;color:var(--ink);margin:0 0 8px}
.quiz-layer .quiz-choice{color:var(--ink)}
.quiz-layer .quiz-choice:hover{background:var(--surface-2)}
.quiz-layer .quiz-choice:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.quiz-layer .quiz-choice input{accent-color:var(--accent)}
.quiz-layer .q-result{font-weight:700;margin:6px 0}
.quiz-layer .q-result.right{color:var(--ok)}
.quiz-layer .q-result.wrong{color:var(--err)}
.quiz-layer .q-expl{border-left:3px solid var(--accent);padding-left:14px}
.quiz-layer .q-score{font-family:var(--font-display,Georgia,serif);font-size:34px;font-weight:500;color:var(--ink-hi);margin:4px 0 12px;font-variant-numeric:tabular-nums}
.quiz-layer .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.quiz-layer .q-error{color:var(--err)}
@media (prefers-reduced-motion:reduce){.quiz-choice{transition:none}}