/**
 * Auth — sign up, log in, verification, role selection, password reset
 *
 * Two layouts: .auth-card inside .brand-signup-right (split), or inside .ob-content-col (centred).
 */

body:has(.auth-card) .brand-signup-page,
body:has(.auth-card) .brand-signup-left {
    height: 100dvh;
}

body:has(.auth-card) .brand-signup-page {
    background: var(--auth-page-bg);
}

.auth-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    max-width: 400px;
    padding: var(--space-8);
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

/* margin:auto, not justify-content — a centred flex container clips the overflowing top */
.ob-screen:has(.auth-card) .ob-content-col,
.ob-screen:has(.auth-role) .ob-content-col {
    margin: auto;
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.ob-content-col .auth-card {
    max-width: 536px;
    border: var(--border-width-1) solid var(--color-border-default);
}

.auth-card__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-12);
    height: var(--size-12);
    padding: 0;
    color: var(--color-text-default);
    background: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.auth-card__back:hover {
    background: var(--color-bg-tertiary);
}

.auth-card__back svg {
    width: var(--size-6);
    height: var(--size-6);
}

.auth-card__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-default);
}

.ob-content-col .auth-card__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.auth-card__title--success {
    color: var(--color-text-success);
}

.auth-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-16);
    height: var(--size-16);
    color: var(--color-text-default);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
}

.auth-card__badge svg {
    width: var(--size-8);
    height: var(--size-8);
}

.auth-claim__result {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-default);
    overflow-wrap: anywhere;
}

.auth-claim__result strong {
    font-weight: var(--font-weight-bold);
}

.auth-card__sub {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-subtle);
}

.auth-card__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.auth-card__inbox {
    margin-top: var(--space-3);
}

.auth-card .ob-otp-row {
    justify-content: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.auth-form .ds-form-field {
    margin-bottom: 0;
}

.auth-form__step {
    display: none;
}

.auth-form__step.is-visible {
    display: block;
}

.auth-form__toggle {
    position: absolute;
    top: 50%;
    right: var(--space-4);
    display: flex;
    align-items: center;
    padding: 0;
    color: var(--color-text-subtlest);
    background: none;
    border: none;
    transform: translateY(-50%);
    cursor: pointer;
}

.auth-form__toggle svg {
    width: var(--size-4);
    height: var(--size-4);
}

.auth-form__hint {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-subtlest);
}

/* The class sets display, so the hidden attribute needs to win it back */
.auth-form__hint[hidden] {
    display: none;
}

.auth-form__hint--error {
    color: var(--color-text-error);
}

.auth-form__hint--success {
    color: var(--color-text-success);
}

/* The field carries the input chrome so the prefix and input read as one string; an addon
   would draw its own border and fill, i.e. a visible seam. */
.auth-claim {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: var(--space-11);
    padding: 0 var(--space-4);
    background: var(--input-bg);
    border: var(--border-width-1) solid var(--input-border);
    border-radius: var(--radius-md);
    transition: var(--transition-input);
}

.auth-claim:focus-within {
    border-color: var(--color-border-strong);
}

.auth-claim--error {
    border-color: var(--color-error-500);
}

.auth-claim__icon {
    flex-shrink: 0;
    width: var(--size-4);
    height: var(--size-4);
    margin-right: var(--space-2);
    color: var(--color-text-subtlest);
}

/* No gap or padding here — the seam must not be visible */
.auth-claim__prefix {
    flex-shrink: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-default);
}

.auth-claim__input {
    flex: 1;
    min-width: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-default);
    background: none;
    border: none;
    outline: none;
}

.auth-form__aside {
    display: block;
    margin-top: var(--space-2);
    margin-left: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-default);
    text-align: right;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Figma's field metrics differ from the ds-* defaults; scoped so no other form moves */
.auth-form .ds-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

.auth-form .ds-input {
    box-sizing: border-box;
    height: var(--space-11);
    border-width: var(--border-width-1);
}

.auth-form .ds-input-group__icon svg {
    width: var(--size-4);
    height: var(--size-4);
}

.auth-form .ds-input-group__icon--left {
    left: var(--space-2);
}

.auth-form .ds-input-group__icon--right {
    right: var(--space-2);
}

.auth-form .ds-input-group--icon-left .ds-input {
    padding-left: var(--space-8);
}

.auth-form .ds-input-group--icon-right .ds-input {
    padding-right: var(--space-8);
}

/* The toggle is an overlay, not an addon, but trailing the input still triggers the DS's
   :not(:last-child) squaring. The extra :not() out-specifies it — main.built.css loads later. */
.auth-form .ds-input-group--icon-right .ds-input:not(:last-child) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.auth-card .ds-btn {
    height: var(--space-12);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

/* A dimmed dark button reads as enabled-but-faded; the design wants a flat grey disabled state */
.auth-card .ds-btn:disabled {
    background: var(--auth-btn-disabled-bg);
    opacity: 1;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1 1 0;
    height: 0;
    border-top: var(--border-width-1) solid var(--color-border-subtle);
}

.auth-divider__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-subtlest);
}

.auth-footnote {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-subtlest);
    text-align: center;
}

.auth-footnote--start {
    text-align: left;
}

.auth-footnote__link {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-brand);
    text-decoration: underline;
}

.auth-footnote__reset {
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

.auth-legal {
    position: absolute;
    bottom: var(--space-8);
    left: 0;
    width: 100%;
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-subtlest);
    text-align: center;
}

.auth-legal a {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
    text-decoration: none;
}

/* Border-box with 24px side padding, so this must clear the cards' 664px + 48px or they wrap */
.ob-content-col:has(.auth-role) {
    max-width: 720px;
    text-align: center;
}

.auth-role {
    display: flex;
    gap: var(--space-10);
    justify-content: center;
    flex-wrap: wrap;
}

.auth-role__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    width: 312px;
    padding: var(--space-8);
    background: var(--color-bg-primary);
    border: var(--border-width-1) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.auth-role__option:hover {
    border-color: var(--color-border-strong);
}

.auth-role__option.is-selected {
    border-color: var(--color-brand-500);
}

.auth-role__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-14);
    height: var(--size-14);
    color: var(--color-text-brand);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
}

.auth-role__icon svg {
    width: var(--space-7);
    height: var(--space-7);
}

.auth-role__label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-default);
    text-align: center;
}

@media only screen and (max-width: 800px) {
    .auth-card {
        max-width: none;
        padding: var(--space-6) var(--space-4);
        border-radius: 0;
        box-shadow: none;
    }

    .ob-content-col .auth-card {
        border: none;
    }

    /* auth-legal leaves absolute flow below, so the panel must stack or it lands beside the card */
    body:has(.auth-card) .brand-signup-page {
        height: auto;
        min-height: 100dvh;
        background: var(--color-bg-primary);
    }

    body:has(.auth-card) .brand-signup-right {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 100dvh;
        padding: var(--space-20) var(--space-6) var(--space-8);
        box-sizing: border-box;
    }

    .brand-signup-right .auth-card {
        flex: 1;
        padding: 0;
    }

    .brand-signup-right .auth-card__title {
        width: 100%;
        text-align: center;
    }

    .brand-signup-right .auth-card .auth-footnote {
        margin-top: auto;
    }

    .auth-legal {
        position: static;
        margin-top: var(--space-6);
    }

    .auth-role {
        flex-direction: column;
    }

    .auth-role__option {
        width: 100%;
        max-width: 312px;
    }
}