/*
 * Auth zone — login, invitation-only registration, forgot/reset password.
 * Source: design-tokens.md + Maquettes-P1 sections 2a/2b/2c.
 * 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.
 *
 * Titles across the zone use the shared .screen-title (28/800) rather than a
 * per-screen size: the violet hero already carries the welcome, it does not
 * need a second, larger type scale to do it.
 */

/* ---------------------------------------------------------------------- */
/* Full-bleed violet hero screens (login, register) — 2a / 2b             */
/* ---------------------------------------------------------------------- */

.auth-screen {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--violet);
    display: flex;
    flex-direction: column;
}

.auth-hero {
    padding: calc(env(safe-area-inset-top, 0px) + 48px) 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--ink);
}

.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 (ink on violet
   hero, green text) are specific to this zone. */
.auth-invite-badge {
    background: var(--ink);
    color: var(--green);
    font-weight: 700;
    align-self: flex-start;
    margin-top: 8px;
}

.auth-hero-title {
    margin-top: 8px;
}

.auth-wave {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 40px;
    margin: 4px 0 18px;
}

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

.auth-wave span:nth-child(1) { height: 45%; }
.auth-wave span:nth-child(2) { height: 70%; }
.auth-wave span:nth-child(3) { height: 100%; }
.auth-wave span:nth-child(4) { height: 55%; }
.auth-wave span:nth-child(5) { height: 80%; }
.auth-wave span:nth-child(6) { height: 40%; }
.auth-wave span:nth-child(7) { height: 65%; }

.auth-panel {
    flex: 1;
    background: var(--bg);
    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;
}

/* ---------------------------------------------------------------------- */
/* 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, not just a font size: the bare 14px line was an ~18px tap
       target and sat flush against the password field above it. */
    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). Built from
   the shared .tile + .choice-row; only the top alignment is specific, the
   label wraps over several lines and must not centre against the box. */
.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) — 2c               */
/* ---------------------------------------------------------------------- */

.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);
}