/* membership.css - Ameer - M3 */
#registration-progress {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#registration-progress li {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    color: var(--muted);
    transition: color var(--transition), border-color var(--transition);
}

/* The step you're on now. */
#registration-progress .is-current {
    color: var(--accent-text);
    border-color: var(--accent);
    font-weight: 700;
}

/* Steps completed. */
#registration-progress .is-done {
    color: var(--text);
    border-color: var(--text);
}

#registration-progress .is-done::before {
    content: "✓ ";
}

/* Question boxes, matched to the site's cards: same surface,
   hairline border, corner radius and padding as every card on
   the home page. Grid puts each tick box beside its wording so
   nothing stacks up. */
#registration-form fieldset {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
    transition: border-color var(--transition);
}

/* The question */
#registration-form legend {
    grid-column: 1 / -1;
    padding: 0;
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text);
}


#registration-form fieldset label {
    display: block;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--text);
}

#registration-form input[type="checkbox"],
#registration-form input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Buttons get breathing room instead of touching. */
.step .btn {
    margin-top: var(--space-3);
    margin-right: var(--space-2);
}

/* Form vertical rhythm (PR #15). Labels hug their field (8px), the
   field-to-field rhythm is a steady 18px, and the login section is
   separated from the sign-up form so the two never blur together.
   Width-independent. Fixes the same staccato on mobile and desktop. */
#registration-form .step > label,
#login-form label {
    margin: 18px 0 8px;
}

#login-area {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--hairline);
}

#login-area h2 {
    margin: 0;
}

#login-form .btn {
    margin-top: var(--space-3);
}

/* Empty error slots are placeholders for validation messages; they
   must not stretch the form when no message is showing. */
#registration-form .field-error:empty,
#login-form .field-error:empty {
    display: none;
}

/* Motion. Step swaps and success states enter with the shared
   fadeInUp; the progress pill steps forward on .is-current. */
.step:not([hidden]) { animation: fadeInUp .3s ease both; }
#login-greeting:not([hidden]) { animation: fadeInUp .3s ease both; }
#registration-progress li {
    transition: color var(--transition), border-color var(--transition),
                transform var(--transition);
}
/* the current pill pulses forward once when updateProgress() swaps
   it in; transient, so nothing about the resting look changes */
@keyframes pill-step {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
#registration-progress .is-current { animation: pill-step .4s ease-in-out backwards; }
#registration-form fieldset {
    transition: border-color var(--transition), transform var(--transition);
}
#registration-form fieldset:focus-within { transform: translateY(-1px); }