/* Sign-in and two-factor pages (Components/Account). These pages render as static SSR, so the styles are global. */

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 27.5rem;
    padding: 2.5rem 2.25rem 2rem;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.875rem;
    box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 12px 32px -12px rgba(9, 9, 11, 0.14);
}

.auth-card-wide {
    max-width: 36rem;
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 2rem 1.25rem 1.5rem;
        border-radius: 0.75rem;
    }
}

/* Brand lockup */
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.auth-brand img {
    display: block;
    width: auto;
    height: 1.375rem;
}

.auth-brand-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--bs-border-color);
}

.auth-brand-name {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--bs-emphasis-color);
}

/* Header */
.auth-header {
    margin-bottom: 1.75rem;
    text-align: center;
}

.auth-title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
    text-wrap: balance;
}

.auth-lead {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--bs-secondary-color);
    text-wrap: pretty;
}

.auth-lead strong {
    font-weight: 600;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
}

.auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.auth-icon .material-symbols-rounded {
    font-size: 1.625rem;
}

.auth-icon-danger {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.08);
}

/* Form */
.auth-card .alert {
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
}

.auth-field {
    margin-bottom: 1rem;
}

.auth-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

.auth-card .validation-message {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    text-align: left;
    color: var(--bs-danger);
}

.auth-field-meta {
    display: flex;
    justify-content: flex-end;
    margin: -0.25rem 0 1.25rem;
}

.auth-btn {
    padding: 0.6875rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: none;
}

/* The theme's outline-primary blue is too light for text contrast on white. */
.auth-btn.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.auth-mono {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.04em;
}

.auth-link {
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--bs-primary);
    text-decoration: none;
    text-transform: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.auth-link:hover {
    color: var(--bs-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.auth-link:focus-visible {
    border-radius: 0.125rem;
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}

.auth-note {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: left;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius-lg);
}

.auth-note .material-symbols-rounded {
    flex-shrink: 0;
    font-size: 1.125rem;
    line-height: 1.2;
}

.auth-help {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* Secondary actions under the main form */
.auth-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    font-size: 0.875rem;
    text-align: center;
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--bs-border-color);
}

.auth-footer p {
    margin: 0;
}

.auth-footer form {
    display: inline;
    margin: 0;
}

.auth-footer form .auth-link {
    display: inline;
    vertical-align: baseline;
}

/* Two-factor method chooser */
.auth-options {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.25rem;
    text-align: left;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

.auth-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.375rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-radius: 0.625rem;
}

.auth-option-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.125rem 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.auth-option-text {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--bs-secondary-color);
}

.auth-option-text strong {
    font-weight: 600;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
}

.auth-badge {
    padding: 0.1875rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
    border-radius: var(--bs-border-radius-pill);
}

.auth-badge-neutral {
    color: var(--bs-secondary-text-emphasis);
    background: var(--bs-tertiary-bg);
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
}

.auth-badge-warning {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
}

.auth-badge-danger {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
}

.auth-icon-success {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.1);
}

/* Two-factor settings (Manage/TwoFactorAuthentication): one grouped list, rows split by hairlines. */
.auth-settings {
    margin: 0;
    padding: 0;
    text-align: left;
    list-style: none;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    overflow: hidden;
}

.auth-setting {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.25rem;
}

.auth-settings > li + li {
    border-top: 1px solid var(--bs-border-color);
}

/* A whole settings row that navigates (Manage/Index). */
.auth-setting-link {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.auth-setting-link:hover {
    color: inherit;
    background: var(--bs-tertiary-bg);
}

.auth-setting-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.auth-setting-link .auth-option-title {
    margin-top: 0;
}

.auth-setting-link .auth-option-text {
    display: block;
    margin: 0;
}

.auth-setting-chevron {
    font-size: 1.25rem;
    color: var(--bs-secondary-color);
    transition: transform 0.15s ease;
}

.auth-setting-link:hover .auth-setting-chevron {
    transform: translateX(2px);
}

.auth-option-icon-warning {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
}

.auth-option-icon-danger {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.auth-actions form {
    margin: 0;
}

.auth-actions .auth-link {
    padding: 0.25rem 0;
}

.auth-btn-sm {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
}

/* The theme's danger rose is under 4.5:1 on white, so text uses a deeper shade. */
.auth-link-danger,
.auth-link-danger:hover {
    color: #be123c;
}

.auth-link-danger:focus-visible {
    outline-color: #be123c;
}

[data-bs-theme="dark"] .auth-link-danger,
[data-bs-theme="dark"] .auth-link-danger:hover {
    color: var(--bs-danger-text-emphasis);
}

/* Destructive confirm button. The theme's danger rose is under 4.5:1 with white text. */
.auth-btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #be123c;
    --bs-btn-border-color: #be123c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9f1239;
    --bs-btn-hover-border-color: #9f1239;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #881337;
    --bs-btn-active-border-color: #881337;
    --bs-btn-focus-shadow-rgb: 190, 18, 60;
}

/* Stacked-label inputs on the manage forms. 16px text stops iOS zooming on focus. */
.auth-input {
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    border-radius: var(--bs-border-radius-lg);
}

.auth-field-hint {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--bs-secondary-color);
}

/* What happens when the user confirms a security change. */
.auth-points {
    display: grid;
    gap: 0.875rem;
    margin: 0 0 1.75rem;
    padding: 0;
    text-align: left;
    list-style: none;
}

.auth-points li {
    display: flex;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.55;
}

.auth-points .material-symbols-rounded {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--bs-secondary-color);
}

.auth-points a {
    font-weight: 500;
    color: var(--bs-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Recovery codes */
.auth-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem 1rem;
    margin: 0 0 1.25rem;
    padding: 1.125rem 1.25rem;
    list-style: none;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

.auth-codes li {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--bs-emphasis-color);
    user-select: all;
}

.auth-stack {
    display: grid;
    gap: 0.75rem;
}

.auth-btn > .material-symbols-rounded {
    margin-right: 0.375rem;
    font-size: 1.25rem;
    vertical-align: -0.3125rem;
}

/* Profile sections */
.auth-section + .auth-section {
    margin-top: 1.75rem;
}

.auth-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    color: var(--bs-emphasis-color);
}

.auth-details {
    margin: 0;
    text-align: left;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

.auth-detail {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.25rem 1rem;
    padding: 0.875rem 1.25rem;
}

.auth-detail + .auth-detail {
    border-top: 1px solid var(--bs-border-color);
}

.auth-detail dt {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.auth-detail dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
}

@media (max-width: 399.98px) {
    .auth-setting {
        gap: 0.875rem;
        padding: 1rem;
    }

    .auth-detail {
        grid-template-columns: 1fr;
        padding: 0.875rem 1rem;
    }

    .auth-codes {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-setting-link,
    .auth-setting-chevron {
        transition: none;
    }
}

/* Authenticator setup steps. The numbers carry the order the user must follow. */
.auth-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    counter-reset: auth-step;
}

.auth-step {
    position: relative;
    padding: 0 0 1.75rem 2.75rem;
    counter-increment: auth-step;
}

.auth-step:last-child {
    padding-bottom: 0;
}

.auth-step::before {
    content: counter(auth-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 50%;
}

.auth-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.25rem;
    bottom: 0.5rem;
    left: 0.875rem;
    width: 1px;
    background: var(--bs-border-color);
}

.auth-step-title {
    margin: 0.1875rem 0 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.auth-step-text {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--bs-secondary-color);
}

.auth-step-text:last-child {
    margin-bottom: 0;
}

.auth-step-text a {
    color: var(--bs-primary);
}

.auth-qr {
    display: block;
    width: 10.5rem;
    height: 10.5rem;
    margin: 0.25rem 0 1rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

.auth-qr img {
    display: block;
    width: 100%;
    height: 100%;
}

.auth-key {
    display: inline-block;
    padding: 0.375rem 0.625rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    word-spacing: 0.25em;
    overflow-wrap: anywhere;
    color: var(--bs-emphasis-color);
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
    user-select: all;
}

/* Segmented one-time-code input (js/otp-input.js). Until the custom element is defined it is a plain field. */
otp-input {
    position: relative;
    display: block;
}

otp-input .otp-native {
    height: 3.5rem;
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5em;
    text-align: center;
}

otp-input .otp-slots {
    display: none;
}

otp-input:defined .otp-slots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.auth-step otp-input:defined .otp-slots {
    justify-content: flex-start;
}

otp-input:defined .otp-native {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 1rem;
    letter-spacing: normal;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
}

otp-input:defined .otp-native::selection {
    background: transparent;
}

otp-input:defined .otp-native:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px transparent inset;
    transition: background-color 600000s 0s;
}

.otp-slot {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 3.25rem;
    height: 3.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-emphasis-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    transition: border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.otp-slot-group {
    margin-left: 0.5rem;
}

.otp-slot.is-filled {
    border-color: #a1a1aa;
}

.otp-slot.is-active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}

.otp-slot.is-caret::after {
    content: "";
    width: 2px;
    height: 1.5rem;
    background: var(--bs-emphasis-color);
    animation: otp-caret-blink 1.1s steps(1) infinite;
}

otp-input:has(.otp-native.invalid) .otp-slot {
    border-color: var(--bs-danger);
}

@keyframes otp-caret-blink {
    50% {
        opacity: 0;
    }
}

@media (max-width: 399.98px) {
    otp-input:defined .otp-slots {
        gap: 0.375rem;
    }

    .otp-slot-group {
        margin-left: 0.25rem;
    }

    .otp-slot {
        height: 3.25rem;
        font-size: 1.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .otp-slot {
        transition: none;
    }

    .otp-slot.is-caret::after {
        animation: none;
    }
}