/* Quiz styles. They sit on top of the site stylesheet (assets/css/styles.css) and use its tokens, fonts and button classes,
   so the quiz looks like the rest of the site. Fallback values match the site so the file also works on its own.
   Site rules followed: gold only for italic headline endings, thin rules, active states and the primary button;
   tap targets at least 48px; no pop-ups or auto-playing anything; photos and images follow the site filter unless .in-color. */
.quiz-page {
  --q-bg: var(--color-bg, #0A0A0A);
  --q-surface: var(--color-surface, #131211);
  --q-ink: var(--color-ink, #EDE6DA);
  --q-muted: var(--color-muted, #9C948A);
  --q-line: var(--color-hairline, rgba(237, 230, 218, 0.14));
  --q-accent: var(--color-accent, #C9A96E);
  --q-accent-ink: var(--color-accent-ink, #0A0A0A);
}
.quiz-draft { margin: 0; padding: 0.7rem var(--gutter, 1.25rem); background: var(--q-accent); color: var(--q-accent-ink); text-align: center; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.quiz-head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.quiz-head .lede { margin-bottom: 1rem; }
.quiz-section { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.quiz-section > * { max-width: 44rem; }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn[hidden] { display: none; }

/* One question per screen */
.quiz-step { margin: 0 0 0.75rem; }
.quiz-progress { height: 2px; background: var(--q-line); margin: 0 0 2rem; }
.quiz-progress-bar { height: 100%; background: var(--q-accent); transition: width 300ms ease; }
.quiz-fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.quiz-fieldset legend { font-family: var(--font-display, Georgia, serif); font-weight: 300; font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.15; letter-spacing: -0.01em; padding: 0; margin: 0 0 1.5rem; }
.quiz-fieldset legend:focus { outline: none; }
.quiz-answer { display: flex; align-items: center; gap: 1rem; min-height: 56px; padding: 0.9rem 1.15rem; margin: 0 0 0.75rem; border: 1px solid var(--q-line); background: transparent; cursor: pointer; transition: border-color 250ms ease, background 250ms ease; }
.quiz-answer:hover { border-color: var(--q-accent); }
.quiz-answer:has(input:checked) { border-color: var(--q-accent); background: var(--q-surface); }
.quiz-answer:has(input:focus-visible) { outline: 2px solid var(--q-accent); outline-offset: 3px; }
.quiz-answer input { width: 1.25rem; height: 1.25rem; flex: none; margin: 0; accent-color: var(--q-accent); }
/* The site docks a Book / Call bar at the bottom of phone screens. Leave room for it when something scrolls into view. */
.quiz-fieldset legend, .quiz-answer, .quiz-nav .btn, .quiz-actions .btn { scroll-margin-block: 8rem; }
.quiz-nav { display: flex; justify-content: space-between; gap: 1rem; }

/* Result page */
.quiz-figure { margin: 0 0 2rem; background: var(--q-surface); }
.quiz-figure img { width: 100%; height: auto; }
.quiz-result .lede { color: var(--q-ink); opacity: 0.9; }
.quiz-block { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--q-line); }
.quiz-block .label { margin-bottom: 0.9rem; }
.quiz-tips { margin: 0; padding-left: 1.2rem; }
.quiz-tips li { margin: 0 0 0.6rem; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.quiz-again { margin-top: 2.5rem; }
.quiz-page .note { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) { .quiz-progress-bar, .quiz-answer { transition: none; } }