/*
 * The sign-in cards (sign in, two-step, set a password, and the OIDC
 * pages: can't go on, not given the app, sign out of everything, signed
 * out), on top of the kit's css/site/login.css. Kit tokens only.
 */

.sso-auth-eyebrow {
    margin: 0 0 0.35rem;
    font-size: var(--portal-label-size-sm, 0.72rem);
    font-weight: var(--portal-weight-strong, 700);
    letter-spacing: var(--portal-label-tracking, 0.08em);
    text-transform: uppercase;
    color: var(--portal-c-accent);
}

.sso-auth-app {
    color: var(--portal-c-text);
    font-weight: var(--portal-weight-medium, 500);
}

.sso-auth-text {
    margin: 0 0 1rem;
    color: var(--portal-c-text);
}

.sso-auth-hint {
    margin: 1rem 0 0;
    font-size: var(--portal-text-sm, 0.875rem);
    color: var(--portal-c-text-muted);
    text-align: center;
}

.sso-auth-hint .btn-link {
    padding: 0;
    font-size: inherit;
    vertical-align: baseline;
}

.sso-auth-code {
    font-family: var(--portal-font-mono, var(--bs-font-monospace));
    letter-spacing: 0.2em;
}

.sso-auth-code[inputmode="text"] {
    letter-spacing: 0.08em;
}

.sso-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sso-auth-message {
    overflow-wrap: anywhere;
}

/* ── Passkeys ────────────────────────────────────────────────────────── */

.sso-auth-passkey[hidden],
[data-passkey-unsupported][hidden] {
    display: none !important;
}

/* "or" between two ways in: a rule each side of the word. */
.sso-auth-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    font-size: var(--portal-text-sm, 0.875rem);
    color: var(--portal-c-text-muted);
}

.sso-auth-or::before,
.sso-auth-or::after {
    content: "";
    flex: 1 1 0;
    min-width: 1rem;
    border-top: 1px solid var(--portal-c-border);
}

.sso-auth-or span {
    flex: none;
}