/* A quiz page (/quizzes/<slug>/) in the purple theme; markup changes in includes/purple/tool-page.php
   (docs/purple-rollout.md, step 5). Started as a copy of the mockup's live/quiz-live.css. */
/* Live quizzes in the purple site (2026-10-01), built by quizShell() in
   scripts/purple-live-snapshots.mjs into live/quizzes/<slug>.html. No sidebar: a quiz is one card.
   The look is the teaching tools': cream page, Fredoka headings, white card, pill buttons, and the
   tools' palette (orange #f97316, green #22c55e, blue #3b82f6, violet #634bf5). The quiz's own
   markup and script are untouched; everything here is an override, hence the !important. */
body.pv-quiz { background: var(--pv-cream) !important; }
body.pv-quiz .quiz-wrapper { background: none !important; min-height: calc(100vh - 76px) !important; padding: 28px 20px 56px !important; font-family: 'DM Sans', sans-serif; }
body.pv-quiz .quiz-title-wrap { margin-bottom: 20px !important; }
body.pv-quiz .crumb { margin-bottom: 12px; }
body.pv-quiz .crumb a { font: 700 12.5px 'DM Sans', sans-serif; color: var(--pv-violet); text-decoration: none; }
body.pv-quiz .crumb a:hover { text-decoration: underline; }
body.pv-quiz .quiz-title { font: 600 32px/1.1 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0 0 6px !important; }
body.pv-quiz .quiz-subtitle { font-size: 14px !important; color: var(--pv-muted) !important; }

/* Up to 5 | 10 | 20: the Point | Jump switch on the Number Line tool */
body.pv-quiz .range-pills { gap: 4px !important; padding: 4px; background: #fff; border-radius: 999px; box-shadow: 0 4px 14px rgba(52,30,96,.06); flex-wrap: nowrap !important; margin-bottom: 22px !important; }
body.pv-quiz .range-pill { border: 0 !important; background: none !important; padding: 8px 20px !important; font: 700 13.5px 'DM Sans', sans-serif !important; color: var(--pv-plum) !important; border-radius: 999px !important; }
body.pv-quiz .range-pill:hover { background: var(--pv-bg) !important; }
body.pv-quiz .range-pill.active { background: var(--pv-plum) !important; color: #fff !important; }

/* the card */
body.pv-quiz .quiz-card { border: 0 !important; border-radius: 28px !important; box-shadow: 0 10px 30px rgba(52,30,96,.08) !important; padding: 30px 34px 34px !important; max-width: 560px !important; }
body.pv-quiz .progress-wrap { margin-bottom: 26px !important; }
body.pv-quiz .progress-label { font: 700 11.5px 'DM Sans', sans-serif !important; letter-spacing: 1px !important; color: var(--pv-muted) !important; }
body.pv-quiz .progress-bar { height: 8px !important; border-radius: 999px !important; background: var(--pv-bg) !important; }
body.pv-quiz .progress-fill { background: #634bf5 !important; border-radius: 999px !important; }

/* the question: big Fredoka numbers; dots are the tools' flat orange */
body.pv-quiz .question-equation { font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; color: var(--pv-plum) !important; }
body.pv-quiz .question-text { font: 600 20px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; }
body.pv-quiz .dot { background: #f97316 !important; box-shadow: none !important; }

/* answers: white tiles like the tools' block tiles; right is the palette green, wrong a flat red */
body.pv-quiz .choice-btn { font: 600 30px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; background: #fff !important; border: 2px solid var(--pv-line) !important; border-radius: 18px !important; box-shadow: none !important; }
body.pv-quiz .choice-btn:hover:not(:disabled) { border-color: var(--pv-lav) !important; background: #faf8fe !important; box-shadow: none !important; transform: translateY(-2px); }
body.pv-quiz .choice-btn.correct { background: #22c55e !important; border-color: #22c55e !important; color: #fff !important; }
body.pv-quiz .choice-btn.wrong { background: #fee2e2 !important; border-color: #ef4444 !important; color: #b91c1c !important; }
body.pv-quiz .feedback { font: 700 16px 'DM Sans', sans-serif !important; }
body.pv-quiz .feedback.correct-msg { color: #15803d !important; }
body.pv-quiz .feedback.wrong-msg { color: #b91c1c !important; }

/* Next / Play Again: the orange pill (Print on a maker, Apply on the Number Line) */
body.pv-quiz .next-btn, body.pv-quiz .play-again-btn { background: var(--pv-orange) !important; color: var(--pv-plum) !important; border: 0 !important; border-radius: 999px !important; font: 700 16px 'DM Sans', sans-serif !important; padding: 15px 28px !important; box-shadow: none !important; }
body.pv-quiz .next-btn:hover, body.pv-quiz .play-again-btn:hover { background: var(--pv-orange-d) !important; opacity: 1 !important; }
body.pv-quiz .score-number { font: 600 60px/1 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; }
body.pv-quiz .score-label { color: var(--pv-muted) !important; }
/* the quizzes made with js/quiz-kit.js: word and picture answers, stories, the read-aloud button */
body.pv-quiz .choice-btn.word { font-size: 21px !important; line-height: 1.25 !important; padding: 16px 12px !important; }
body.pv-quiz .choice-btn.pic { padding: 10px !important; }
body.pv-quiz .choice-btn.pic.correct { background: #dcfce7 !important; border-color: #22c55e !important; box-shadow: 0 0 0 3px #22c55e inset !important; }
body.pv-quiz .choice-btn.pic.wrong { box-shadow: 0 0 0 3px #ef4444 inset !important; }
body.pv-quiz .question-text.story { font-size: 19px !important; line-height: 1.45 !important; text-align: left; }
body.pv-quiz .say-btn { border-color: var(--pv-line); color: var(--pv-violet); }
body.pv-quiz .say-btn:hover, body.pv-quiz .say-btn.on { border-color: var(--pv-lav); background: #faf8fe; color: var(--pv-violet); }
body.pv-quiz .range-pill { white-space: nowrap; }
@media (max-width: 540px) {
  /* longer level names ("10 More, 10 Less"): smaller pills, and a second row rather than a name broken in two */
  body.pv-quiz .range-pills { flex-wrap: wrap !important; justify-content: center; border-radius: 22px; max-width: 100%; }
  body.pv-quiz .range-pill { padding: 8px 12px !important; font-size: 13px !important; }
  body.pv-quiz .choice-btn.word { font-size: 18px !important; padding: 14px 8px !important; }
  body.pv-quiz .question-text.story { font-size: 17px !important; }
}
@media (max-width: 540px) {
  body.pv-quiz .quiz-card { padding: 24px 18px 26px !important; border-radius: 24px !important; }
  body.pv-quiz .quiz-title { font-size: 26px !important; }
  body.pv-quiz .range-pill { padding: 8px 14px !important; }
  body.pv-quiz .choice-btn { font-size: 26px !important; }
}