/* Personalisation quiz ("You") — one question per screen.
 * The shell rules mirror org-wizard.css (which says the same of the calculator it replaced); the
 * quiz keeps its own class names so a B2C page never has to load the B2B stylesheet. */

.quiz {
    max-width: 720px;
    padding-block: var(--sp-5);
    /* Room under the last panel so the sticky nav never sits on the mobile tab bar. */
    padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
}

.quiz__heading {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

/* --- Progress (sixteen step dots would be unreadable, so: a count and a bar) --- */
.quiz__progress {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--fs-200);
    font-weight: 600;
    color: var(--color-text-muted);
}

.quiz__bar {
    height: 6px;
    margin-bottom: var(--sp-5);
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.quiz__bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--c-green);
    transition: width 0.25s ease;
}

/* --- Panels --- */
.quiz__panel {
    margin-bottom: var(--sp-5);
}

.quiz__intro {
    margin: 0 0 var(--sp-4);
    color: var(--color-text-muted);
}

.quiz__title {
    margin-bottom: var(--sp-3);
    font-size: clamp(1.15rem, 3vw, 1.5rem);
}

/* The step change itself is the visible feedback; the focus ring would only add noise. */
.quiz__title:focus {
    outline: none;
}

.quiz__reference {
    margin: 0 0 var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--fs-200);
}

.quiz__note {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-200);
    color: var(--color-text-muted);
}

.quiz__lead {
    margin: 0 0 var(--sp-4);
}

.quiz__source {
    margin: var(--sp-5) 0 0;
    font-size: var(--fs-100);
    color: var(--color-text-muted);
    overflow-wrap: anywhere; /* the external sources are long bare URLs */
}

/* --- Options: real radios, styled as full-width cards --- */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.quiz-options.is-invalid {
    outline: 2px solid #b3261e;
    outline-offset: var(--sp-2);
    border-radius: var(--radius);
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 3rem;
    padding: var(--sp-3) var(--sp-4);
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.quiz-option:hover {
    border-color: var(--c-green);
}

.quiz-option:has(input:checked) {
    border-color: var(--c-navy);
    background: #FFFBEB; /* the same light yellow the calculator inputs use */
}

.quiz-option:has(input:focus-visible) {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}

/* --- Number screens (household size, babies) --- */
.quiz-number {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
}

.quiz-number .input {
    max-width: 7rem;
}

.quiz-number__unit {
    color: var(--color-text-muted);
}

/* --- Nav --- */
.quiz__nav {
    position: sticky;
    bottom: var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}

/* --- Final panel --- */
/* The last panel is the sign-up form. Nothing here is capped: the answer options on every question
   screen run the full width of the card and put Back/Next on its two edges, so the fields and the
   Back/Submit row do the same. Narrowing only part of it is what reads as bolted on — a full-width
   heading over short fields, or Submit floating out past the inputs it belongs to. */

/* This panel ends with a line of text under the buttons, so the nav must not stick to the bottom
   of the viewport and float over it. The form's own gap already separates it from the fields. */
#quizDone .quiz__nav {
    position: static;
    margin-top: var(--sp-2);
}

.quiz__gate-login {
    margin: var(--sp-4) 0 0;
}