/* ═══════════════════════════════════════════════════════════════════════════
   PREFERENCE SETUP MODULE — MODERN DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════════════

   Mobile-first participant onboarding / preference setup landing page.
   Light theme by default, fully themeable via CSS custom properties.
   Token prefix: --ps-*

   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1: DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup {
    /* Accent */
    --ps-accent: var(--scm-accent, #3b82f6);
    --ps-accent-hover: var(--scm-accent-hover, #2563eb);
    --ps-accent-soft: #eff6ff;
    --ps-accent-ring: rgba(59, 130, 246, 0.15);
    --ps-accent-glow: rgba(59, 130, 246, 0.3);

    /* Surfaces */
    --ps-bg: var(--scm-surface, #ffffff);
    --ps-bg-elevated: #f9fafb;
    --ps-bg-card: rgba(0, 0, 0, 0.02);

    /* Text */
    --ps-text: var(--scm-surface-contrast, #1a1a2e);
    --ps-text-secondary: var(--scm-text-secondary, #374151);
    --ps-text-muted: var(--scm-text-muted, #6b7280);
    --ps-text-hint: #9ca3af;

    /* Border */
    --ps-border: var(--scm-border, #e5e7eb);

    /* Semantic — Success */
    --ps-success-bg: linear-gradient(135deg, #ecfdf5, #d1fae5);
    --ps-success-icon: #059669;
    --ps-success-heading: #065f46;
    --ps-success-value: var(--ps-accent);

    /* Semantic — Error */
    --ps-error-bg: #fef2f2;
    --ps-error-text: #991b1b;
    --ps-error-icon: #ef4444;

    /* Radius */
    --ps-radius-sm: 8px;
    --ps-radius-md: 12px;
    --ps-radius-lg: 16px;
    --ps-radius-full: 999px;

    /* Transition */
    --ps-transition-fast: 150ms ease;
    --ps-transition-base: 200ms ease;

    /* Base styles */
    font-family: inherit;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 1.25rem;
    color: var(--ps-text);
    background: var(--ps-bg, #ffffff);
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2: LOADING
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.scm-mod-PreferenceSetup .ps-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--ps-border);
    border-top-color: var(--ps-accent);
    border-radius: 50%;
    animation: ps-spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes ps-spin {
    to { transform: rotate(360deg); }
}

.scm-mod-PreferenceSetup .ps-loading p {
    color: var(--ps-text-muted);
    font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3: ERROR / INVALID STATES
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-error,
.scm-mod-PreferenceSetup .ps-invalid,
.scm-mod-PreferenceSetup .ps-booking-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem 1rem;
}

.scm-mod-PreferenceSetup .ps-error-icon {
    font-size: 3.5rem;
    color: var(--ps-error-icon);
    margin-bottom: 1rem;
}

.scm-mod-PreferenceSetup .ps-error h2,
.scm-mod-PreferenceSetup .ps-invalid h2,
.scm-mod-PreferenceSetup .ps-booking-error h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ps-text);
    margin-bottom: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-error p,
.scm-mod-PreferenceSetup .ps-invalid p,
.scm-mod-PreferenceSetup .ps-booking-error p {
    color: var(--ps-text-muted);
    margin-bottom: 1.5rem;
}

/* Inline, non-destructive per-step error banner (P0.4): keeps the guest on the step engine
   with an actionable reason (e.g. a minor's waiver needs a guardian) instead of replacing the flow. */
.scm-mod-PreferenceSetup .ps-step-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--ps-error-bg);
    color: var(--ps-error-text);
    border: 1px solid var(--ps-error-icon);
    border-radius: var(--ps-radius-md);
    font-size: 0.95rem;
    line-height: 1.4;
}

.scm-mod-PreferenceSetup .ps-step-error i {
    color: var(--ps-error-icon);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4: CODE ENTRY
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-code-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem 1rem;
}

.scm-mod-PreferenceSetup .ps-code-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 300px;
}

.scm-mod-PreferenceSetup .ps-code-input {
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: var(--ps-bg-elevated);
    border: 2px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    padding: 0.875rem;
    color: var(--ps-text);
    outline: none;
    transition: border-color var(--ps-transition-fast);
}

.scm-mod-PreferenceSetup .ps-code-input:focus {
    border-color: var(--ps-accent);
    box-shadow: 0 0 0 3px var(--ps-accent-ring);
}

.scm-mod-PreferenceSetup .ps-code-input::placeholder {
    color: var(--ps-text-hint);
    letter-spacing: normal;
}

.scm-mod-PreferenceSetup .ps-code-error {
    color: var(--ps-error-text);
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.scm-mod-PreferenceSetup .ps-help-text {
    color: var(--ps-text-hint);
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5: HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.scm-mod-PreferenceSetup .ps-header h1 {
    font-size: 1.25rem;
    color: var(--ps-text-muted);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.scm-mod-PreferenceSetup .ps-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ps-text);
    margin-bottom: 0.25rem;
}

.scm-mod-PreferenceSetup .ps-header p {
    color: var(--ps-text-muted);
    font-size: 0.9rem;
}

.scm-mod-PreferenceSetup .ps-returning-guest {
    background: var(--ps-accent-soft);
    color: var(--ps-accent);
    padding: 0.5rem 1rem;
    border-radius: var(--ps-radius-sm);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: inline-block;
}

/* Deferred / group-organizer roster confirmation (Flexible Booking Platform §9.8):
   reassures a racer who completed one of a group booking's open seats which seat they
   claimed and how many remain. Informational only — the venue floor is enforced at start. */
.scm-mod-PreferenceSetup .ps-deferred-seat {
    background: var(--ps-success-soft, rgba(34, 197, 94, 0.12));
    color: var(--ps-success, #16a34a);
    padding: 0.5rem 1rem;
    border-radius: var(--ps-radius-sm);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.scm-mod-PreferenceSetup .ps-deferred-seat-remaining {
    width: 100%;
    color: var(--ps-text-muted, #475569);
    font-size: 0.825rem;
}

.scm-mod-PreferenceSetup .ps-link-action {
    border: 1px solid rgba(22, 163, 74, 0.28);
    border-radius: var(--ps-radius-full);
    background: rgba(255, 255, 255, 0.78);
    color: var(--ps-success, #16a34a);
    font-size: 0.825rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    cursor: pointer;
    transition: background var(--ps-transition-fast), border-color var(--ps-transition-fast);
}

.scm-mod-PreferenceSetup .ps-link-action:hover,
.scm-mod-PreferenceSetup .ps-link-action:focus-visible {
    background: #ffffff;
    border-color: var(--ps-success, #16a34a);
    outline: none;
}

/* Read-only participant-data capture summary (Flexible Booking Platform §9.2/§9.7):
   confirms what is already on file and reminds about anything still needed at the desk.
   Purely informational — the venue floor still enforces requiredness at session start. */
.scm-mod-PreferenceSetup .ps-requirements-summary {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.scm-mod-PreferenceSetup .ps-requirement-confirmed {
    background: var(--ps-success-soft, rgba(34, 197, 94, 0.12));
    color: var(--ps-success, #16a34a);
    padding: 0.45rem 0.85rem;
    border-radius: var(--ps-radius-sm);
    font-size: 0.875rem;
}

.scm-mod-PreferenceSetup .ps-requirement-reminder {
    background: var(--ps-accent-soft);
    color: var(--ps-accent);
    padding: 0.45rem 0.85rem;
    border-radius: var(--ps-radius-sm);
    font-size: 0.875rem;
}

/* U3 — actionable link inside a capture-requirement reminder */
.scm-mod-PreferenceSetup .ps-requirement-action {
    color: var(--ps-accent);
    font-weight: 600;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6: BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--ps-radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ps-transition-fast);
    border: none;
    text-decoration: none;
}

.scm-mod-PreferenceSetup .ps-btn-primary {
    background: var(--ps-accent);
    color: #fff;
}

.scm-mod-PreferenceSetup .ps-btn-primary:hover:not(:disabled) {
    background: var(--ps-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ps-accent-ring);
}

.scm-mod-PreferenceSetup .ps-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.scm-mod-PreferenceSetup .ps-btn-secondary {
    background: var(--ps-bg-elevated);
    color: var(--ps-text);
    border: 1px solid var(--ps-border);
}

.scm-mod-PreferenceSetup .ps-btn-secondary:hover {
    background: var(--ps-border);
}

.scm-mod-PreferenceSetup .ps-btn-outline {
    background: transparent;
    border: 2px solid var(--ps-border);
    color: var(--ps-text);
}

.scm-mod-PreferenceSetup .ps-btn-outline:hover {
    border-color: var(--ps-accent);
    color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .ps-btn-ghost {
    background: transparent;
    border: 2px solid var(--ps-border);
    color: var(--ps-text-secondary);
    padding: 0.625rem 1.25rem;
    border-radius: var(--ps-radius-full);
    font-size: 0.9rem;
}

.scm-mod-PreferenceSetup .ps-btn-ghost:hover {
    border-color: var(--ps-accent);
    color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .ps-btn-skip {
    background: none;
    border: none;
    color: var(--ps-text-hint);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.625rem;
}

.scm-mod-PreferenceSetup .ps-btn-skip:hover {
    color: var(--ps-text-muted);
}

.scm-mod-PreferenceSetup .ps-btn-save {
    width: 100%;
    max-width: 300px;
    padding: 0.875rem 2rem;
    border-radius: var(--ps-radius-full);
    font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7: QUESTIONS / FORM
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-form {
    padding-bottom: 5rem;
}

.scm-mod-PreferenceSetup .ps-questions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.scm-mod-PreferenceSetup .ps-question {
    background: var(--ps-bg-card);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-lg);
    padding: 1.25rem;
}

.scm-mod-PreferenceSetup .ps-question h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ps-text);
    margin-bottom: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-question-help {
    font-size: 0.85rem;
    color: var(--ps-text-hint);
    margin-bottom: 0.75rem;
}

.scm-mod-PreferenceSetup .ps-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.625rem;
}

.scm-mod-PreferenceSetup .ps-option {
    position: relative;
    background: var(--ps-bg);
    border: 2px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    padding: 0.875rem 0.75rem;
    color: var(--ps-text);
    cursor: pointer;
    transition: all var(--ps-transition-fast);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scm-mod-PreferenceSetup .ps-option:hover {
    border-color: color-mix(in oklch, var(--ps-accent) 40%, var(--ps-border) 60%);
    background: var(--ps-bg-elevated);
}

.scm-mod-PreferenceSetup .ps-option.selected {
    background: var(--ps-accent-soft);
    border-color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .ps-option-value {
    font-weight: 600;
    font-size: 1rem;
}

.scm-mod-PreferenceSetup .ps-option-desc {
    font-size: 0.75rem;
    color: var(--ps-text-hint);
}

.scm-mod-PreferenceSetup .ps-option.selected .ps-option-desc {
    color: var(--ps-text-muted);
}

.scm-mod-PreferenceSetup .ps-option-check {
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--ps-accent);
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8: ACTIONS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-actions {
    position: sticky;
    bottom: 0;
    padding: 1rem 0;
    background: linear-gradient(transparent, var(--ps-bg) 30%);
    display: flex;
    justify-content: center;
    z-index: 10;
}

.scm-mod-PreferenceSetup .ps-spinner-small {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ps-spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9: SUCCESS STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem 1rem;
}

.scm-mod-PreferenceSetup .ps-success-icon {
    font-size: 4rem;
    color: var(--ps-success-icon);
    margin-bottom: 1rem;
}

.scm-mod-PreferenceSetup .ps-success h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ps-text);
    margin-bottom: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-success-summary {
    background: var(--ps-bg-elevated);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    padding: 1.25rem;
    width: 100%;
    max-width: 300px;
    margin-bottom: 1.5rem;
}

.scm-mod-PreferenceSetup .ps-pref-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ps-border);
}

.scm-mod-PreferenceSetup .ps-pref-item:last-child {
    border-bottom: none;
}

.scm-mod-PreferenceSetup .ps-pref-type {
    color: var(--ps-text-muted);
}

.scm-mod-PreferenceSetup .ps-pref-value {
    font-weight: 600;
    color: var(--ps-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10: PRE-CLAIM / AUTH
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-preclaim-prompt,
.scm-mod-PreferenceSetup .ps-preclaim-success,
.scm-mod-PreferenceSetup .ps-preclaim-error,
.scm-mod-PreferenceSetup .ps-preclaim-confirm,
.scm-mod-PreferenceSetup .ps-preclaim-processing {
    background: var(--ps-bg-elevated);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-lg);
    padding: 1.5rem 1.25rem;
    margin: 1.25rem 0;
    width: 100%;
    max-width: 350px;
    text-align: center;
}

.scm-mod-PreferenceSetup .ps-preclaim-prompt h3,
.scm-mod-PreferenceSetup .ps-preclaim-success h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-preclaim-prompt p,
.scm-mod-PreferenceSetup .ps-preclaim-success p,
.scm-mod-PreferenceSetup .ps-preclaim-confirm p,
.scm-mod-PreferenceSetup .ps-preclaim-error p {
    color: var(--ps-text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.scm-mod-PreferenceSetup .ps-preclaim-success {
    background: var(--ps-accent-soft);
    border-color: color-mix(in oklch, var(--ps-accent) 30%, transparent 70%);
}

.scm-mod-PreferenceSetup .ps-preclaim-icon {
    font-size: 2.5rem;
    color: var(--ps-accent);
    margin-bottom: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-preclaim-success h3 {
    color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .ps-preclaim-error {
    background: var(--ps-error-bg);
    border-color: color-mix(in oklch, var(--ps-error-icon) 30%, transparent 70%);
}

.scm-mod-PreferenceSetup .ps-preclaim-error > i {
    font-size: 2rem;
    color: var(--ps-error-icon);
    margin-bottom: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-email-mismatch {
    color: var(--ps-text-muted) !important;
    font-size: 0.85rem !important;
}

.scm-mod-PreferenceSetup .ps-email-mismatch strong {
    color: var(--ps-error-text);
}

.scm-mod-PreferenceSetup .ps-auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.scm-mod-PreferenceSetup .ps-preclaim-confirm p strong {
    color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .ps-preclaim-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}

.scm-mod-PreferenceSetup .ps-return-notice {
    color: var(--ps-text-hint) !important;
    font-size: 0.85rem !important;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 11: PROFILE / NOTICES
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-save-to-profile {
    margin-bottom: 1rem;
}

.scm-mod-PreferenceSetup .ps-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--ps-text-secondary);
    cursor: pointer;
}

.scm-mod-PreferenceSetup .ps-saved-to-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--ps-success-icon);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.scm-mod-PreferenceSetup .ps-saved-prefs-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ps-accent-soft);
    color: var(--ps-accent);
    padding: 0.625rem 1rem;
    border-radius: var(--ps-radius-sm);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.scm-mod-PreferenceSetup .ps-already-set {
    text-align: center;
    color: var(--ps-text-hint);
    font-size: 0.85rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-footer {
    margin-top: 1.5rem;
    text-align: center;
}

.scm-mod-PreferenceSetup .ps-expires {
    color: var(--ps-text-hint);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 12: SIZE VARIANTS
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup.scm-mod-compact {
    max-width: 400px;
    padding: 0.75rem;
}

.scm-mod-PreferenceSetup.scm-mod-compact .ps-question {
    padding: 0.875rem;
}

.scm-mod-PreferenceSetup.scm-mod-compact .ps-option {
    padding: 0.625rem 0.5rem;
    font-size: 0.875rem;
}

.scm-mod-PreferenceSetup.scm-mod-compact .ps-btn-save {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
}

.scm-mod-PreferenceSetup.scm-mod-compact .ps-questions {
    gap: 1rem;
}

.scm-mod-PreferenceSetup.scm-mod-large {
    max-width: 600px;
    padding: 1.5rem;
}

.scm-mod-PreferenceSetup.scm-mod-large .ps-question {
    padding: 1.5rem;
}

.scm-mod-PreferenceSetup.scm-mod-large .ps-option {
    padding: 1rem 1rem;
}

.scm-mod-PreferenceSetup.scm-mod-large .ps-questions {
    gap: 2rem;
}

.scm-mod-PreferenceSetup.scm-mod-fullheight {
    max-width: 600px;
    padding: 1.5rem;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 13: RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
    .scm-mod-PreferenceSetup {
        padding: 0.75rem;
    }

    .scm-mod-PreferenceSetup .ps-question {
        padding: 0.875rem;
    }

    .scm-mod-PreferenceSetup .ps-options {
        grid-template-columns: 1fr 1fr;
    }

    .scm-mod-PreferenceSetup .ps-option {
        padding: 0.75rem 0.625rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 14: REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .scm-mod-PreferenceSetup,
    .scm-mod-PreferenceSetup * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════════
   SECTION 15: IDENTITY STEP & STEP ENGINE
   Styling for the booking-flow identity capture (IdentityCollectionStep) and the
   dynamic onboarding step chrome (OnboardingStepEngine). These components were
   migrated off Bootstrap onto the ps-* design system so the public onboarding flow
   matches the rest of the module (waivers, preferences) and renders correctly on the
   website where Bootstrap utility classes are not guaranteed to be present.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── Identity step ─────────────────────────────────────────────────────────────── */
.scm-mod-PreferenceSetup .ps-identity-step {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.scm-mod-PreferenceSetup .ps-identity-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.scm-mod-PreferenceSetup .ps-identity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ps-radius-full);
    background: var(--ps-accent-soft);
    color: var(--ps-accent);
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.scm-mod-PreferenceSetup .ps-identity-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ps-text);
    margin-bottom: 0.25rem;
}

.scm-mod-PreferenceSetup .ps-identity-header p {
    color: var(--ps-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.scm-mod-PreferenceSetup .ps-identity-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── Form fields ───────────────────────────────────────────────────────────────── */
.scm-mod-PreferenceSetup .ps-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.scm-mod-PreferenceSetup .ps-field-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ps-text-secondary);
}

.scm-mod-PreferenceSetup .ps-field-required {
    color: var(--ps-error-icon);
    margin-left: 0.125rem;
}

.scm-mod-PreferenceSetup .ps-field-optional {
    color: var(--ps-text-hint);
    font-weight: 500;
    font-size: 0.8rem;
    margin-left: 0.125rem;
}

.scm-mod-PreferenceSetup .ps-field-input {
    width: 100%;
    font-size: 1rem;
    background: var(--ps-bg-elevated);
    border: 2px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    padding: 0.75rem 0.875rem;
    color: var(--ps-text);
    outline: none;
    transition: border-color var(--ps-transition-fast), box-shadow var(--ps-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.scm-mod-PreferenceSetup .ps-field-input:focus {
    border-color: var(--ps-accent);
    box-shadow: 0 0 0 3px var(--ps-accent-ring);
}

.scm-mod-PreferenceSetup .ps-field-input::placeholder {
    color: var(--ps-text-hint);
}

.scm-mod-PreferenceSetup .ps-field-input-compact {
    max-width: 220px;
}

/* Block (not flex) so mixed text + <strong> children flow as ONE sentence: flex turned every
   text run and <strong> into a separate flex item, fracturing hints into broken columns. */
.scm-mod-PreferenceSetup .ps-field-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--ps-text-muted);
    line-height: 1.4;
}

.scm-mod-PreferenceSetup .ps-field-hint i {
    color: var(--ps-text-hint);
    margin-right: 0.3rem;
}

/* Informational notice (e.g. weight handled at the desk) — never an input. */
.scm-mod-PreferenceSetup .ps-field-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--ps-accent-soft);
    color: var(--ps-text-secondary);
    border: 1px solid color-mix(in oklch, var(--ps-accent) 25%, var(--ps-border) 75%);
    border-radius: var(--ps-radius-md);
    padding: 0.75rem 0.875rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.scm-mod-PreferenceSetup .ps-field-notice i {
    color: var(--ps-accent);
    margin-top: 0.1rem;
    flex-shrink: 0;
    font-size: 1rem;
}

/* Satisfied on-file field (§9.2 — DOB/height already captured by the booking):
   a quiet confirmation row with an inline Update affordance instead of an input. */
.scm-mod-PreferenceSetup .ps-field-onfile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ps-accent-soft);
    color: var(--ps-text-secondary);
    border: 1px solid color-mix(in oklch, var(--ps-accent) 25%, var(--ps-border) 75%);
    border-radius: var(--ps-radius-md);
    padding: 0.625rem 0.875rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.scm-mod-PreferenceSetup .ps-field-onfile i {
    color: var(--ps-accent);
    flex-shrink: 0;
    font-size: 1rem;
}

.scm-mod-PreferenceSetup .ps-onfile-update {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0.125rem 0.25rem;
    color: var(--ps-accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.scm-mod-PreferenceSetup .ps-onfile-update:hover {
    color: color-mix(in oklch, var(--ps-accent) 80%, black 20%);
}

.scm-mod-PreferenceSetup .ps-field-error {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ps-error-bg);
    color: var(--ps-error-text);
    border-radius: var(--ps-radius-md);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
}

.scm-mod-PreferenceSetup .ps-field-error i {
    color: var(--ps-error-icon);
    flex-shrink: 0;
}

/* Full-width button modifier used by the step flows. */
.scm-mod-PreferenceSetup .ps-btn-block {
    width: 100%;
    margin-top: 0.25rem;
}

/* ── Step engine chrome ────────────────────────────────────────────────────────── */
.scm-mod-PreferenceSetup .ps-step-engine {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.scm-mod-PreferenceSetup .ps-step-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--ps-text-muted);
}

.scm-mod-PreferenceSetup .ps-step-progress {
    margin-bottom: 1.5rem;
}

.scm-mod-PreferenceSetup .ps-step-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ps-border);
    transition: background var(--ps-transition-base), transform var(--ps-transition-base);
}

.scm-mod-PreferenceSetup .ps-step-dot.active {
    background: var(--ps-accent);
    transform: scale(1.15);
}

.scm-mod-PreferenceSetup .ps-step-dot.completed {
    background: var(--ps-success-icon);
}

.scm-mod-PreferenceSetup .ps-step-counter {
    text-align: center;
    font-size: 0.8rem;
    color: var(--ps-text-muted);
    margin: 0;
}

.scm-mod-PreferenceSetup .ps-step-complete,
.scm-mod-PreferenceSetup .ps-step-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: 1.75rem 1rem;
}

.scm-mod-PreferenceSetup .ps-step-complete h3,
.scm-mod-PreferenceSetup .ps-step-fallback h4 {
    font-weight: 700;
    color: var(--ps-text);
    margin: 0;
}

.scm-mod-PreferenceSetup .ps-step-complete p,
.scm-mod-PreferenceSetup .ps-step-fallback p {
    color: var(--ps-text-muted);
    margin: 0;
}

.scm-mod-PreferenceSetup .ps-step-complete-icon {
    font-size: 3rem;
    color: var(--ps-success-icon);
    line-height: 1;
}

.scm-mod-PreferenceSetup .ps-step-fallback-icon {
    font-size: 2.25rem;
    color: var(--ps-accent);
    line-height: 1;
}

.scm-mod-PreferenceSetup .ps-step-fallback-icon-equipment {
    color: #8b5cf6;
}

.scm-mod-PreferenceSetup .ps-step-complete .ps-btn-block,
.scm-mod-PreferenceSetup .ps-step-fallback .ps-btn-block {
    max-width: 320px;
}

/* U3 — remaining in-venue steps listed on the completion screen */
.scm-mod-PreferenceSetup .ps-step-invenue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 360px;
    text-align: left;
}

.scm-mod-PreferenceSetup .ps-step-invenue-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ps-border, rgba(0, 0, 0, 0.12));
    border-radius: 0.5rem;
    background: var(--ps-surface, rgba(0, 0, 0, 0.03));
}

.scm-mod-PreferenceSetup .ps-step-invenue-item i {
    color: var(--ps-accent);
    font-size: 1.1rem;
    line-height: 1.3;
}

.scm-mod-PreferenceSetup .ps-step-invenue-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.scm-mod-PreferenceSetup .ps-step-invenue-label {
    font-weight: 600;
    color: var(--ps-text);
}

.scm-mod-PreferenceSetup .ps-step-invenue-detail {
    font-size: 0.85rem;
    color: var(--ps-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION: EMBEDDED KIOSK WAIVER STEP

   The booking/onboarding flow renders the shared KioskWaiver component
   (Components/Kiosk/KioskWaiver.razor) as the "Waiver" step. That component
   was authored for the dark kiosk shell: its structural styles live in
   KioskContainer.razor.css (::deep .kiosk-screen-header, .screen-title,
   .kiosk-back-btn) and KioskFooter/KioskLogin (.kiosk-btn-primary), none of
   which reach this page because there is no KioskContainer ancestor here.
   KioskWaiver.razor.css also relies on --kiosk-* custom properties that are
   only defined on the kiosk container.

   To make the waiver step look professional inside this light-themed landing
   page, map the --kiosk-* tokens onto the --ps-* palette and provide the
   structural / button styling the embedded component expects. Scoped to
   .scm-mod-PreferenceSetup so the standalone kiosk experience is unaffected.
   ══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .kiosk-waiver {
    /* Light-theme mapping for the kiosk tokens KioskWaiver.razor.css consumes */
    --kiosk-surface: var(--ps-bg-elevated);
    --kiosk-border: var(--ps-border);
    --kiosk-text: var(--ps-text);
    --kiosk-text-muted: var(--ps-text-muted);
    --kiosk-primary: var(--ps-accent);
    --kiosk-success: var(--ps-success-icon);
    --kiosk-warning: #d97706;
    --kiosk-radius: var(--ps-radius-md);

    padding: 0;
}

.scm-mod-PreferenceSetup .kiosk-screen-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ps-border);
}

.scm-mod-PreferenceSetup .kiosk-screen-header .screen-title {
    flex: 1;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--ps-text);
}

.scm-mod-PreferenceSetup .kiosk-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    background: var(--ps-bg-elevated);
    color: var(--ps-text-secondary);
    cursor: pointer;
    transition: all var(--ps-transition-fast);
}

.scm-mod-PreferenceSetup .kiosk-back-btn:hover {
    border-color: var(--ps-accent);
    color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .kiosk-back-btn i {
    font-size: 1.25rem;
}

/* Kiosk buttons reuse the ps-btn visual language for consistency */
.scm-mod-PreferenceSetup .kiosk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--ps-radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ps-transition-fast);
    border: none;
    text-decoration: none;
}

.scm-mod-PreferenceSetup .kiosk-btn-primary {
    background: var(--ps-accent);
    color: #fff;
}

.scm-mod-PreferenceSetup .kiosk-btn-primary:hover:not(:disabled) {
    background: var(--ps-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ps-accent-ring);
}

.scm-mod-PreferenceSetup .kiosk-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.scm-mod-PreferenceSetup .kiosk-btn-outline {
    background: transparent;
    border: 2px solid var(--ps-border);
    color: var(--ps-text);
}

.scm-mod-PreferenceSetup .kiosk-btn-outline:hover {
    border-color: var(--ps-accent);
    color: var(--ps-accent);
}

/* The signature pad. KioskWaiver.razor.css frames this on the kiosk, but that file is a Blazor
   CSS-isolation stylesheet and the public site does not load the isolation bundle — so without
   these rules the pad renders here as a bare white rectangle with no edge. The canvas carries its
   own inline height, so this is the frame only. */
.scm-mod-PreferenceSetup .signature-section h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ps-text);
    margin: 0 0 0.25rem 0;
}

.scm-mod-PreferenceSetup .signature-instructions {
    color: var(--ps-text-muted);
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
}

.scm-mod-PreferenceSetup .signature-container {
    background: #ffffff;
    border: 2px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    overflow: hidden;
}

.scm-mod-PreferenceSetup .signature-canvas {
    cursor: crosshair;
}

.scm-mod-PreferenceSetup .signature-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.scm-mod-PreferenceSetup .kiosk-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION: BOOKING ONBOARDING HUB (multi-participant "party" home, plan §6.1)

   One row per participant with an honest per-participant readiness summary
   (server-personalized steps), a group progress strip, and the share-link /
   Activity Guide affordances. Rows are full-width buttons for a large touch
   target. Privacy: only names, chips, and masked/boolean facts render here.
   ══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-booking-hub {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.scm-mod-PreferenceSetup .ps-booking-hub h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ps-text);
    margin: 0;
}

.scm-mod-PreferenceSetup .ps-hub-sub {
    color: var(--ps-text-muted);
    font-size: 0.9rem;
    margin: 0 0 0.25rem 0;
}

.scm-mod-PreferenceSetup .ps-hub-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-hub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    background: var(--ps-bg-elevated);
    color: var(--ps-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ps-transition-fast), box-shadow var(--ps-transition-fast),
                transform var(--ps-transition-fast);
}

.scm-mod-PreferenceSetup .ps-hub-row:hover,
.scm-mod-PreferenceSetup .ps-hub-row:focus-visible {
    border-color: var(--ps-accent);
    box-shadow: 0 2px 10px var(--ps-accent-ring);
    transform: translateY(-1px);
    outline: none;
}

.scm-mod-PreferenceSetup .ps-hub-row.is-ready {
    border-color: rgba(5, 150, 105, 0.35);
    background: var(--ps-success-soft, rgba(34, 197, 94, 0.08));
}

.scm-mod-PreferenceSetup .ps-hub-row-identity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.scm-mod-PreferenceSetup .ps-hub-row-identity > i {
    font-size: 1.5rem;
    color: var(--ps-text-hint);
    flex-shrink: 0;
}

.scm-mod-PreferenceSetup .ps-hub-row.is-ready .ps-hub-row-identity > i {
    color: var(--ps-success-icon);
}

.scm-mod-PreferenceSetup .ps-hub-row-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.scm-mod-PreferenceSetup .ps-hub-row-name {
    font-weight: 600;
    color: var(--ps-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-mod-PreferenceSetup .ps-hub-row-racing {
    font-size: 0.8rem;
    color: var(--ps-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-mod-PreferenceSetup .ps-hub-row-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.scm-mod-PreferenceSetup .ps-hub-row-status > i {
    color: var(--ps-text-hint);
}

.scm-mod-PreferenceSetup .ps-hub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--ps-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.scm-mod-PreferenceSetup .ps-hub-chip-ready {
    background: var(--ps-success-soft, rgba(34, 197, 94, 0.12));
    color: var(--ps-success-icon);
}

.scm-mod-PreferenceSetup .ps-hub-chip-progress {
    background: var(--ps-accent-soft);
    color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .ps-hub-chip-pending {
    background: var(--ps-bg-card);
    color: var(--ps-text-muted);
    border: 1px dashed var(--ps-border);
}

.scm-mod-PreferenceSetup .ps-hub-chip-minor {
    background: #fef3c7;
    color: #92400e;
}

/* Minor family-task strip under a roster row (B4/B5): actionable chips (guardian link /
   remote ID) look tappable; info chips (at-venue disclosures) stay quiet. */
.scm-mod-PreferenceSetup .ps-hub-row-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.scm-mod-PreferenceSetup .ps-hub-row-notices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 0.5rem;
}

.scm-mod-PreferenceSetup .ps-hub-chip-action {
    background: var(--ps-accent-soft);
    color: var(--ps-accent);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--ps-transition-fast), box-shadow var(--ps-transition-fast);
}

.scm-mod-PreferenceSetup .ps-hub-chip-action:hover,
.scm-mod-PreferenceSetup .ps-hub-chip-action:focus-visible {
    border-color: var(--ps-accent);
    box-shadow: 0 1px 6px var(--ps-accent-ring);
    color: var(--ps-accent);
    text-decoration: none;
    outline: none;
}

.scm-mod-PreferenceSetup .ps-hub-chip-info {
    background: var(--ps-bg-card);
    color: var(--ps-text-muted);
    border: 1px solid var(--ps-border);
    font-weight: 500;
}

.scm-mod-PreferenceSetup .ps-hub-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ps-border);
}

.scm-mod-PreferenceSetup .ps-hub-group-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ps-text-secondary);
    font-size: 0.875rem;
}

.scm-mod-PreferenceSetup .ps-hub-group-progress i {
    color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .ps-hub-guide-btn {
    margin-top: 0.25rem;
}

/* In-flow navigation strip (back to hub / edit details) shown above a selected
   participant's step flow. */
.scm-mod-PreferenceSetup .ps-flow-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION: PHASE 5 LAYOUT (§6.3) — context header + labeled stepper + cards

   One venue/booking context card for the whole booking flow, a named-stop
   progress stepper replacing the bare dots, and a card wrapper around the
   current step. All inside the --ps-* token contract (D4) so venue theme
   overrides keep working.
   ══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-context-card {
    text-align: center;
    padding: 1rem 1rem 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-lg);
    background: var(--ps-bg-elevated);
}

.scm-mod-PreferenceSetup .ps-context-venue {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ps-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.scm-mod-PreferenceSetup .ps-context-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1rem;
    margin: 0.4rem 0 0 0;
    color: var(--ps-text-secondary);
    font-size: 0.875rem;
}

.scm-mod-PreferenceSetup .ps-context-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.scm-mod-PreferenceSetup .ps-context-meta-item i {
    color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .ps-context-subtitle {
    margin: 0.35rem 0 0 0;
    color: var(--ps-text-muted);
    font-size: 0.9rem;
}

/* Labeled stepper — named stops with connector lines; mobile-first (labels stay tiny). */
.scm-mod-PreferenceSetup .ps-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.scm-mod-PreferenceSetup .ps-stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 1 1 0;
    min-width: 0;
    max-width: 96px;
}

/* Connector line between stops (drawn to the LEFT of every stop but the first). */
.scm-mod-PreferenceSetup .ps-stepper-item + .ps-stepper-item::before {
    content: "";
    position: absolute;
    top: 13px;
    right: calc(50% + 15px);
    width: calc(100% - 30px);
    height: 2px;
    background: var(--ps-border);
}

.scm-mod-PreferenceSetup .ps-stepper-item.completed + .ps-stepper-item::before,
.scm-mod-PreferenceSetup .ps-stepper-item.completed + .ps-stepper-item.completed::before {
    background: var(--ps-success-icon);
}

.scm-mod-PreferenceSetup .ps-stepper-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--ps-border);
    background: var(--ps-bg);
    color: var(--ps-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 1;
    transition: background var(--ps-transition-base), border-color var(--ps-transition-base),
                color var(--ps-transition-base);
}

.scm-mod-PreferenceSetup .ps-stepper-item.active .ps-stepper-dot {
    border-color: var(--ps-accent);
    color: var(--ps-accent);
    box-shadow: 0 0 0 4px var(--ps-accent-ring);
}

.scm-mod-PreferenceSetup .ps-stepper-item.completed .ps-stepper-dot {
    border-color: var(--ps-success-icon);
    background: var(--ps-success-icon);
    color: #fff;
}

.scm-mod-PreferenceSetup .ps-stepper-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ps-text-hint);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.scm-mod-PreferenceSetup .ps-stepper-item.active .ps-stepper-label {
    color: var(--ps-accent);
}

.scm-mod-PreferenceSetup .ps-stepper-item.completed .ps-stepper-label {
    color: var(--ps-success-icon);
}

/* Current-step card: one consistent surface around whatever step renders (§6.3 card system). */
.scm-mod-PreferenceSetup .ps-step-engine {
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-lg);
    background: var(--ps-bg);
    padding: 1.1rem 1rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

@media (max-width: 420px) {
    .scm-mod-PreferenceSetup {
        padding: 0.9rem;
    }

    .scm-mod-PreferenceSetup .ps-step-engine {
        padding: 0.9rem 0.75rem 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION: ONBOARDING PREFERENCES STEP (Phase 3)

   The always-optional simulator-settings step inside the step engine. Reuses
   the kiosk-flow ps-question / ps-options visual language; adds the header,
   "Recommended" badge, save-to-profile row, and the skip affordance.
   ══════════════════════════════════════════════════════════════════════════ */

.scm-mod-PreferenceSetup .ps-prefs-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.scm-mod-PreferenceSetup .ps-prefs-step h4 {
    font-weight: 700;
    color: var(--ps-text);
    margin: 0;
}

.scm-mod-PreferenceSetup .ps-prefs-sub {
    color: var(--ps-text-muted);
    font-size: 0.9rem;
    margin: 0 0 0.25rem 0;
}

.scm-mod-PreferenceSetup .ps-prefs-step .ps-questions {
    width: 100%;
    text-align: left;
}

.scm-mod-PreferenceSetup .ps-option-recommended {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--ps-radius-full);
    background: var(--ps-accent-soft);
    color: var(--ps-accent);
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
}

.scm-mod-PreferenceSetup .ps-prefs-save-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ps-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
}