
/* Tokens */
:root {
  --quiz-bg: var(--md-default-bg-color, #fff);
  --quiz-fg: var(--md-default-fg-color, #1f2937);
  --quiz-accent: var(--md-accent-fg-color, #4f46e5);
  --quiz-border: color-mix(in oklab, var(--quiz-fg) 12%, transparent);
  --quiz-correct: #16a34a;
  --quiz-wrong: #dc2626;
  --quiz-radius: 16px;
  --quiz-shadow: 0 4px 16px rgba(0,0,0,.06);
}

[data-md-color-scheme="slate"] {
  --quiz-bg: var(--md-default-bg-color, #0b0f19);
  --quiz-fg: var(--md-default-fg-color, #e5e7eb);
  --quiz-border: color-mix(in oklab, var(--quiz-fg) 22%, transparent);
  --quiz-shadow: 0 6px 18px rgba(0,0,0,.35);
  --quiz-correct: #22c55e;
  --quiz-wrong: #f87171;
}

/* Card */
.md-typeset .quiz {
  background: var(--quiz-bg);
  color: var(--quiz-fg);
  border: 1px solid var(--quiz-border);
  border-radius: var(--quiz-radius);
  box-shadow: var(--quiz-shadow);
  padding: 1.1rem 1.25rem;
  margin: 1rem 0;
  max-width: 820px;
}

.md-typeset .quiz h1,
.md-typeset .quiz h2,
.md-typeset .quiz h3 { margin: 0 0 1rem 0; font-weight: 700; }

/* Hide per-question native submit buttons */
.md-typeset .quiz .quiz-native-submit { display: none !important; }

/* Fieldset grid */
.md-typeset .quiz fieldset {
  border: 0 !important; padding: 0 !important; margin: 0 0 .75rem 0 !important;
  display: grid; gap: .65rem;
}

/* Clickable option row */
.md-typeset .quiz .quiz-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .7rem 1rem !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  line-height: 1.35 !important;
  cursor: pointer; user-select: none;
  background: color-mix(in oklab, var(--quiz-fg) 4%, transparent);
}
.md-typeset .quiz fieldset:not(.locked) .quiz-row:hover {
  background: color-mix(in oklab, var(--quiz-fg) 8%, transparent);
}

/* Radios */
.md-typeset .quiz input[type="radio"]{
  appearance:none;-webkit-appearance:none;width:1.15rem!important;height:1.15rem!important;
  border-radius:50%;border:2px solid color-mix(in oklab, var(--quiz-fg) 35%, transparent);
  display:grid;place-content:center;background:transparent;transition:border-color .18s ease;
  margin:0!important;flex:0 0 auto;
}
.md-typeset .quiz input[type="radio"]::after{
  content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--quiz-accent);
  transform:scale(0);transition:transform .18s ease;
}
.md-typeset .quiz input[type="radio"]:checked{ border-color:var(--quiz-accent); }
.md-typeset .quiz input[type="radio"]:checked::after{ transform:scale(1); }

/* Feedback */
.md-typeset .quiz .quiz-row.correct{
  background: color-mix(in oklab, var(--quiz-correct) 14%, transparent)!important;
  border-color: color-mix(in oklab, var(--quiz-correct) 40%, transparent)!important;
}
.md-typeset .quiz .quiz-row.wrong{
  background: color-mix(in oklab, var(--quiz-wrong) 14%, transparent)!important;
  border-color: color-mix(in oklab, var(--quiz-wrong) 40%, transparent)!important;
}

/* Lock */
.md-typeset .quiz fieldset.locked{ opacity:.98; }
.md-typeset .quiz fieldset.locked .quiz-row{ cursor:default; }

/* Page actions */
.quiz-actions{ display:flex; gap:.75rem; align-items:center; margin:.5rem 0 1rem; }
.quiz-actions--top{ justify-content:space-between; }
.quiz-actions--bottom{ justify-content:flex-start; gap:1rem; margin-top:1.25rem; }

/* Buttons */
.quiz-btn{ -webkit-tap-highlight-color:transparent; border:0; border-radius:16px;
  padding:.75rem 1.2rem; font-weight:800; font-size:1.02rem; cursor:pointer;
  transition:transform .08s ease, filter .2s ease, background .2s ease; }
.quiz-btn:disabled{ opacity:.6; cursor:default; }
.quiz-btn--primary{ background:var(--quiz-accent); color:#fff; }
.quiz-btn--primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.quiz-btn--ghost{ background:color-mix(in oklab, var(--quiz-fg) 8%, transparent);
  color:var(--quiz-fg); border:1px solid var(--quiz-border); }
.quiz-btn--ghost:hover{ background:color-mix(in oklab, var(--quiz-fg) 12%, transparent); }

/* Score pills (70% = pass) */
.quiz-score{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem;
  border-radius:999px; font-weight:800; border:1px solid var(--quiz-border);
  background:color-mix(in oklab, var(--quiz-fg) 6%, transparent);
}
.quiz-score.good{
  color:var(--quiz-correct);
  border-color: color-mix(in oklab, var(--quiz-correct) 45%, transparent);
  background: color-mix(in oklab, var(--quiz-correct) 18%, transparent);
}
.quiz-score.bad{
  color:var(--quiz-wrong);
  border-color: color-mix(in oklab, var(--quiz-wrong) 45%, transparent);
  background: color-mix(in oklab, var(--quiz-wrong) 18%, transparent);
}

/* Explanation */
.md-typeset .quiz section{ margin-top:.9rem; padding:.85rem 1rem; border-radius:12px;
  border:1px solid var(--quiz-border); background:color-mix(in oklab, var(--quiz-fg) 5%, transparent); }
.md-typeset .quiz section.hidden{ display:none!important; }

.quiz-row code {
  font-family: var(--md-code-font-family, monospace);
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}
