/*
 * Authentication journey composition. Semantic values come only from
 * dadepo-design-system.css; this file deliberately declares no --dd-* tokens.
 */

.dd-auth-body {
    min-width: 0;
    margin: 0;
    background: var(--dd-surface-canvas);
}

.dd-auth-page {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: clamp(var(--dd-space-3), 4vw, var(--dd-space-10));
}

.dd-auth-shell {
    display: grid;
    width: min(100%, 68rem);
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
}

.dd-auth-story,
.dd-auth-form-pane {
    display: grid;
    min-width: 0;
    align-content: start;
    padding: clamp(var(--dd-space-5), 5vw, var(--dd-space-12));
}

.dd-auth-story {
    gap: var(--dd-space-8);
    border-inline-end: 1px solid var(--dd-border-subtle);
    background: var(--dd-surface-subtle);
}

.dd-auth-brand {
    width: fit-content;
    min-height: 2.75rem;
}

.dd-auth-brand img {
    width: 9.5rem;
}

.dd-auth-story__copy,
.dd-auth-form-heading {
    display: grid;
    gap: var(--dd-space-3);
}

.dd-auth-story__copy > *,
.dd-auth-form-heading > * {
    margin-block: 0;
}

.dd-auth-teaser {
    display: grid;
    gap: var(--dd-space-3);
    border: 1px solid var(--dd-border-strong);
    border-radius: var(--dd-radius-md);
    padding: var(--dd-space-5);
    background: var(--dd-surface-panel);
}

.dd-auth-teaser > * {
    margin-block: 0;
}

.dd-auth-teaser__title {
    color: var(--dd-ink-primary);
    font: 500 var(--dd-text-lg)/1.3 var(--dd-font-ui);
}

.dd-auth-teaser .dd-button {
    width: fit-content;
    max-width: 100%;
}

.dd-auth-build {
    align-self: end;
    margin: 0;
    color: var(--dd-ink-secondary);
    font-size: var(--dd-text-xs);
}

.dd-auth-form-pane {
    gap: var(--dd-space-6);
    background: var(--dd-surface-panel);
}

.dd-auth-form {
    display: grid;
    gap: var(--dd-space-5);
    min-width: 0;
}

.dd-auth-password {
    position: relative;
    min-width: 0;
}

.dd-auth-password .dd-input {
    padding-inline-end: 6.5rem;
}

.dd-auth-password__toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: inline-flex;
    min-width: 5.5rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--dd-space-2);
    border: 0;
    border-inline-start: 1px solid var(--dd-border-strong);
    border-radius: 0 var(--dd-radius-sm) var(--dd-radius-sm) 0;
    padding: var(--dd-space-2) var(--dd-space-3);
    background: var(--dd-surface-subtle);
    color: var(--dd-ink-primary);
    font: 500 var(--dd-text-sm)/1 var(--dd-font-ui);
}

.dd-auth-password__toggle:hover {
    background: var(--dd-brand-soft);
}

.dd-auth-form-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dd-space-3);
}

.dd-auth-checkbox {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--dd-space-2);
    color: var(--dd-ink-primary);
}

.dd-auth-checkbox input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--dd-brand-primary);
}

.dd-auth-validation-summary:empty,
.dd-auth-validation-summary.validation-summary-valid {
    display: none;
}

.dd-auth-validation-summary::before {
    content: none;
}

.dd-auth-validation-summary ul {
    margin: 0;
    padding-inline-start: var(--dd-space-5);
}

.dd-auth-form .dd-validation:empty {
    display: none;
}

.dd-auth-submit,
.dd-auth-provider-list form,
.dd-auth-provider {
    width: 100%;
}

.dd-auth-secondary-action,
.dd-auth-account-link {
    margin: 0;
    color: var(--dd-ink-secondary);
    text-align: center;
}

.dd-auth-form-options .dd-link,
.dd-auth-secondary-action .dd-link,
.dd-auth-account-link .dd-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
}

.dd-auth-providers,
.dd-auth-provider-list {
    display: grid;
    min-width: 0;
    gap: var(--dd-space-3);
}

.dd-auth-divider {
    display: grid;
    grid-template-columns: minmax(var(--dd-space-4), 1fr) auto minmax(var(--dd-space-4), 1fr);
    align-items: center;
    gap: var(--dd-space-3);
    margin: 0;
    color: var(--dd-ink-secondary);
    font-size: var(--dd-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.dd-auth-provider {
    white-space: normal;
    overflow-wrap: anywhere;
}

.dd-auth-shell--continuation {
    width: min(100%, 58rem);
}

@media (max-width: 64rem) {
    .dd-auth-shell {
        width: min(100%, 42rem);
        grid-template-columns: minmax(0, 1fr);
    }

    .dd-auth-story {
        gap: var(--dd-space-5);
        border-inline-end: 0;
        border-block-end: 1px solid var(--dd-border-subtle);
    }

    .dd-auth-story .dd-lead {
        font-size: var(--dd-text-md);
    }
}

@media (max-width: 36rem) {
    .dd-auth-page {
        display: block;
        padding: var(--dd-space-3);
    }

    .dd-auth-shell {
        border-radius: var(--dd-radius-sm);
    }

    .dd-auth-story,
    .dd-auth-form-pane {
        padding: var(--dd-space-5) var(--dd-space-4);
    }

    .dd-auth-form-options {
        align-items: flex-start;
        flex-direction: column;
    }

    .dd-auth-teaser .dd-button,
    .dd-auth-form-options .dd-link {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dd-auth-password__toggle {
        transition: none;
    }
}

@media (forced-colors: active) {
    .dd-auth-shell,
    .dd-auth-story,
    .dd-auth-teaser,
    .dd-auth-password__toggle {
        border-color: CanvasText;
    }

    .dd-auth-password__toggle,
    .dd-auth-checkbox input {
        forced-color-adjust: auto;
    }
}