/* Login refinements shared by both callers; colors come from each theme. */
body.auth-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    font-family: var(--font-ui, "IBM Plex Sans", system-ui, sans-serif);
}

.auth-body > .auth-shell {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: auto;
}

.auth-body .auth-card .auth-app-name {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
.auth-body .auth-intro { font-size: 14px; line-height: 1.5; }
.auth-body .auth-card .auth-form input.auth-input {
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    caret-color: var(--auth-text);
}
.auth-body .auth-card .auth-form input.auth-input::placeholder { letter-spacing: 0; }
.auth-body .auth-card .auth-submit {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.auth-body .auth-pill { font-family: inherit; font-size: 12px; }
.auth-body .auth-support { overflow-wrap: anywhere; }

/* Higher specificity than the generic input rules, including while focused. */
.auth-body .auth-card .auth-form input.auth-input:autofill {
    -webkit-text-fill-color: var(--auth-text) !important;
    box-shadow: 0 0 0 1000px var(--auth-input) inset !important;
    caret-color: var(--auth-text);
}
.auth-body .auth-card .auth-form input.auth-input:-webkit-autofill {
    -webkit-text-fill-color: var(--auth-text) !important;
    box-shadow: 0 0 0 1000px var(--auth-input) inset !important;
    caret-color: var(--auth-text);
}
.auth-body .auth-card .auth-form input.auth-input:autofill:focus {
    box-shadow: 0 0 0 1000px var(--auth-input) inset,
                0 0 0 3px color-mix(in srgb, var(--focus, var(--cp-primary)) 18%, transparent) !important;
}
.auth-body .auth-card .auth-form input.auth-input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--auth-input) inset,
                0 0 0 3px color-mix(in srgb, var(--focus, var(--cp-primary)) 18%, transparent) !important;
}
.auth-body .auth-card .auth-form input.auth-input.has-error:autofill:focus {
    box-shadow: 0 0 0 1000px var(--auth-input) inset,
                0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent) !important;
}
.auth-body .auth-card .auth-form input.auth-input.has-error:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--auth-input) inset,
                0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent) !important;
}

@media (max-width: 720px) {
    /* Prevent mobile Safari from zooming into the form on focus. */
    .auth-body .auth-card .auth-form input.auth-input { font-size: 16px; }
}