@layer components {

    /* ── Modal footer ────────────────────────────────── */
    .modal-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: var(--space-2);
    }
    .modal-footer .vl-btn--link,
    .modal-footer .vl-btn--ghost { align-self: center; }
    .modal-footer--end  { align-items: flex-end; }
    .modal-footer--col  { flex-direction: column; align-items: stretch; }

    /* ── Auth modal ──────────────────────────────────── */

    /* State sections — JS toggles .active. Fade on transition. */
    .auth-state { display: none; }
    .auth-state.active {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        animation: authStateFade var(--dur-fast) var(--ease);
    }
    @keyframes authStateFade {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Inline code expansion — slides in below current state */
    .auth-inline-code {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        /* max-height not in transition: jumps to 340px instantly so getComputedStyle
           reflects the final value immediately (avoids smoke SIGNUP-5 timing race where
           600ms check fires before the animated value advances past 0px). */
        transition: opacity 0.22s var(--ease);
    }
    .auth-inline-code.visible {
        max-height: 340px;
        opacity: 1;
    }
    .auth-inline-divider {
        height: 1px;
        background: hsl(var(--line) / 0.35);
        margin: var(--space-4) 0 var(--space-3);
    }
    /* Visual lock — dimmed, non-interactive during code step */
    .auth-state--locked {
        opacity: 0.45;
        pointer-events: none;
        user-select: none;
    }
    /* 3-class specificity (0,3,0) beats .auth-state.active (0,2,0) to collapse gap */
    .auth-state.active.auth-state--locked { gap: 0; }
    .auth-state--locked .auth-subtitle      { display: none; }
    .auth-state--locked .auth-privacy-note  { display: none; }

    /* Center-align inputs inside auth modal */
    #authModal .vl-input { text-align: center; }
    #authModal .auth-fields { text-align: left; }

    .auth-subtitle       { font-size: var(--modal-subtitle-size); color: var(--text-muted); line-height: 1.6; }
    .auth-privacy-note   { font-size: var(--modal-note-size); color: var(--text-muted); line-height: 1.5; }
    .auth-privacy-note a { color: hsl(var(--accent)); text-decoration: underline; text-underline-offset: 2px; }
    .auth-upgrade-hint   { font-size: var(--modal-note-size); color: hsl(var(--accent)); }
    .auth-fields         { display: flex; flex-direction: column; gap: var(--space-3); }
    .auth-field-error    { font-size: var(--modal-note-size); font-weight: 500; color: hsl(var(--danger)); min-height: 1.1em; text-align: center; margin-top: 2px; }

    /* TOS */
    .tos-checkbox        { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--modal-fine-size); color: var(--text-muted); cursor: pointer; }
    .tos-checkbox input  { margin-top: 2px; flex-shrink: 0; accent-color: hsl(var(--cta)); }
    .tos-checkbox a      { color: hsl(var(--accent)); }

    /* Code entry */
    .auth-code-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-2) 0; }
    .auth-code-hint { font-size: var(--modal-subtitle-size); color: var(--text); line-height: 1.5; }
    .auth-code-hint strong { color: var(--text); font-weight: 600; }
    .code-input {
        width: 140px;
        padding: 0.6rem;
        text-align: center;
        font-size: var(--modal-subtitle-size);
        font-weight: 700;
        letter-spacing: 0.2em;
        border-radius: var(--radius-md);
        border: 1px solid hsl(var(--line));
        background: hsl(var(--surface-sunken));
        color: var(--text);
        font-family: inherit;
        outline: none;
        transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    }
    .code-input:focus {
        border-color: hsl(var(--accent));
        box-shadow: 0 0 0 2px hsl(var(--accent) / 0.15);
    }

    /* Reset sent */
    .auth-sent-wrap { display: flex; flex-direction: column; gap: var(--space-3); text-align: center; padding: var(--space-3) 0; }
    .auth-sent-wrap strong { color: var(--text); font-weight: 600; }

    /* ── Upgrade modal ───────────────────────────────── */

    .upgrade-tab-bar {
        display: flex;
        border-bottom: 1px solid hsl(var(--line));
        margin-bottom: 1rem;
    }
    .upgrade-tab {
        flex: 1;
        padding: 0.375rem 0.5rem;
        font-size: var(--modal-note-size);
        font-weight: 500;
        color: var(--text-muted);
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        font-family: inherit;
        transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    }
    .upgrade-tab:hover { color: var(--text); }
    .upgrade-tab.active { color: hsl(var(--cta)); border-bottom-color: hsl(var(--cta)); font-weight: 600; }

    .upgrade-content         { display: none; }
    .upgrade-content.active  { display: block; }

    .upgrade-headline {
        font-size: var(--modal-note-size);
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.75rem;
    }
    .upgrade-features {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.875rem;
    }
    .upgrade-features li {
        font-size: var(--modal-note-size);
        color: var(--text-muted);
        padding-left: 1.25rem;
        position: relative;
    }
    .upgrade-features li::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: hsl(var(--success));
        font-weight: 700;
    }
    .upgrade-price     { font-size: var(--modal-subtitle-size); font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
    .upgrade-footnote  { font-size: var(--modal-fine-size); color: var(--text-muted); margin-bottom: 0.75rem; }

    /* ── Reset password page ─────────────────────────── */
    .reset-page {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--space-5);
        gap: var(--space-4);
        background: hsl(var(--surface));
    }
    .reset-logo   { height: 36px; width: auto; display: block; }
    /* .reset-card extends .modal-card (shared.css) — no visual overrides */
    .reset-title  { font-family: var(--font-heading); font-size: var(--modal-title-size); font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.25; }
    .reset-sub    { font-size: var(--modal-note-size); color: var(--text-muted); }
    .reset-form   { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
    .reset-hint   { font-size: var(--modal-fine-size); color: var(--text-muted); text-align: center; }
    .reset-action { margin-top: var(--space-2); }

}