/* Shared authentication controls inherit each host's canonical visual and layout roles. */
.va-auth {
    display: grid;
    gap: var(--motif-space-lg);
    max-width: var(--layout-content-width-narrow);
    color: var(--motif-color-text-primary);
    font-family: var(--motif-font-ui);
}

.va-auth [hidden] { display: none !important; }
.va-auth p { margin-block: 0; }
.va-auth-providers, .va-auth-form fieldset { display: grid; gap: var(--motif-space-md); }
.va-auth-providers:empty, .va-auth-status:empty { display: none; }
.va-auth-form { margin: 0; }
.va-auth-form fieldset { min-width: 0; padding: 0; border: 0; margin: 0; }
.va-auth-form legend { padding: 0; margin-block-end: var(--motif-space-lg); font-weight: 700; }
.va-auth-form label { font-weight: 700; }
.va-auth input, .va-auth select {
    width: 100%;
    min-width: 0;
    min-height: var(--layout-control-min-height);
    padding: var(--motif-space-sm) var(--motif-space-md);
    border: 1px solid var(--motif-field-border);
    border-radius: var(--layout-soft-radius);
    background: var(--motif-field-background);
    color: var(--motif-field-text);
    caret-color: var(--motif-field-text);
    font: inherit;
}

.va-auth input::placeholder { color: var(--motif-field-placeholder); opacity: 1; }
.va-auth input:autofill {
    background: var(--motif-field-background);
    color: var(--motif-field-text);
    caret-color: var(--motif-field-text);
}

.va-auth input:-webkit-autofill {
    -webkit-text-fill-color: var(--motif-field-text);
    caret-color: var(--motif-field-text);
    box-shadow: 0 0 0 1000px var(--motif-field-background) inset;
}

@media (forced-colors: active) {
    .va-auth input,
    .va-auth input:autofill,
    .va-auth input:-webkit-autofill {
        border-color: ButtonBorder;
        background: Field;
        color: FieldText;
        -webkit-text-fill-color: FieldText;
        caret-color: FieldText;
        box-shadow: none;
    }
}

.va-auth [data-auth-code] { letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.va-auth-actions { display: flex; flex-wrap: wrap; gap: var(--motif-space-md); }
.va-auth-button {
    min-height: var(--layout-control-min-height);
    padding: var(--motif-space-sm) var(--motif-space-lg);
    border: 1px solid var(--motif-button-primary-border);
    border-radius: var(--layout-soft-radius);
    background: var(--motif-button-primary-background);
    color: var(--motif-button-primary-text);
    font: 700 var(--motif-type-label) / var(--motif-line-body) var(--motif-font-button);
    cursor: pointer;
}

.va-auth-button:hover { background: var(--motif-button-primary-background-hover); }
.va-auth-secondary { background: var(--motif-button-secondary-background); color: var(--motif-button-secondary-text); }
.va-auth-secondary:hover { background: var(--motif-button-secondary-background-hover); }
.va-auth-button:disabled { cursor: wait; opacity: 0.65; }
.va-auth :focus-visible { outline: 3px solid var(--motif-color-focus); outline-offset: 3px; }
.va-auth-hint { color: var(--motif-color-text-secondary); }
.va-auth-status[data-error] { color: var(--motif-color-error); }
.va-auth-security { display: grid; gap: var(--motif-space-md); }
.va-auth-security ul { margin-block: 0; padding-inline-start: var(--motif-space-lg); }