/*
 * Auth zone — login, invitation-only registration, forgot/reset password.
 * Redesigned: warm pastel gradient hero, mascot illustration, glass card form,
 * subtle floating decorations.
 *
 * Reuses shared tokens/components from assets/styles/app.css (.btn, .card,
 * .tile, .choice-row, .field, .field-password, .input, .field-error, .alert,
 * .screen-title, .text-secondary, .chip-ink, .btn-icon, .sr-only) — only
 * auth-specific layout and decoration lives here.
 */

/* ---------------------------------------------------------------------- */
/* Full-bleed gradient hero screens (login, register)                     */
/* ---------------------------------------------------------------------- */

.auth-screen {
    min-height: 100vh;
    min-height: 100dvh;
    /* Warm pastel gradient: lavender → soft peach → light teal */
    background: linear-gradient(165deg, #d4c8f5 0%, #f5d4d4 40%, #c8e8e0 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Decorative floating circles */
.auth-screen::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(162, 142, 249, .12);
    top: -80px;
    right: -60px;
    pointer-events: none;
}

.auth-screen::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 179, 167, .15);
    bottom: 160px;
    left: -50px;
    pointer-events: none;
}

.auth-hero {
    padding: calc(env(safe-area-inset-top, 0px) + 32px) 24px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--ink);
    position: relative;
    z-index: 1;
}

/* Mascot illustration in the hero */
.auth-mascot {
    width: 120px;
    height: auto;
    margin-bottom: 4px;
    border-radius: var(--radius-tile);
    animation: dsSlideUp .5s var(--ease) both;
}

.auth-hero-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-hero-badge {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-tile);
    background: var(--ink);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-hero-brand-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
}

/* Composes with the shared .chip; only the inverted colours are specific. */
.auth-invite-badge {
    background: var(--ink);
    color: var(--green);
    font-weight: 700;
    align-self: flex-start;
    margin-top: 8px;
}

.auth-hero-title {
    margin-top: 4px;
    animation: dsSlideUp .5s var(--ease) .08s both;
}

.auth-hero-sub {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.5;
    margin-top: 2px;
    animation: dsSlideUp .5s var(--ease) .12s both;
}

/* Decorative sound-wave elements */
.auth-wave {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 36px;
    margin: 8px 0 0;
    animation: dsSlideUp .5s var(--ease) .16s both;
}

.auth-wave span {
    width: 4px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    opacity: .18;
}

.auth-wave span:nth-child(1) { height: 40%; }
.auth-wave span:nth-child(2) { height: 65%; }
.auth-wave span:nth-child(3) { height: 95%; }
.auth-wave span:nth-child(4) { height: 50%; }
.auth-wave span:nth-child(5) { height: 75%; }
.auth-wave span:nth-child(6) { height: 35%; }
.auth-wave span:nth-child(7) { height: 60%; }

.auth-panel {
    flex: 1;
    /* Glass card effect */
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    padding: 26px 24px calc(env(safe-area-inset-bottom, 0px) + 28px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, .5);
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-forgot-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--link);
    align-self: flex-end;
    padding: 6px 2px;
    margin: -6px 0;
}

.auth-note {
    font-size: 13px;
    color: var(--ink-2);
    text-align: center;
}

.auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.auth-links a {
    font-size: 14px;
    font-weight: 600;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 6px 2px;
}

/* Consent checkbox row (registration: AI processing agreement). */
.auth-consent {
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-2);
}

.auth-consent input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--violet);
}

/* ---------------------------------------------------------------------- */
/* Plain grey screens (forgot password, reset, resend) — keep existing    */
/* ---------------------------------------------------------------------- */

.auth-plain-screen {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 44px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
    gap: 20px;
}

.auth-back {
    margin-top: 4px;
}

.auth-plain-hero {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------------------------------------------------------------------- */
/* Centered result screens (email sent, invitation invalid, link expired) */
/* ---------------------------------------------------------------------- */

.auth-result {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 0 8px;
}

.auth-result-icon {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dsPop .5s ease-out both;
}

.auth-result-icon.is-success {
    background: var(--green);
    color: var(--ink);
}

.auth-result-icon.is-warning {
    background: var(--yellow);
    color: var(--ink);
}

.auth-result-text {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.45;
}

.auth-result-text b {
    color: var(--ink);
}