/*
 * 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, .field,
 * .input, .field-error, .flash-*, .btn-icon) — only auth-specific layout and
 * decoration lives here.
 */

/* ---------------------------------------------------------------------- */
/* 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) 28px 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;
}

.auth-invite-badge {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--green);
    font-size: 13px;
    font-weight: 700;
    align-self: flex-start;
    margin-top: 8px;
}

.auth-hero-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    margin-top: 8px;
}

.auth-hero-quote {
    font-size: 15px;
    font-weight: 500;
    font-style: italic;
    color: #3d3357;
}

.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: 28px 28px 0 0;
    padding: 26px 24px calc(env(safe-area-inset-bottom, 0px) + 28px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-panel .flash {
    margin-bottom: 0;
}

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

.auth-forgot-link {
    font-size: 14px;
    font-weight: 600;
    align-self: flex-end;
    margin-top: -4px;
}

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

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

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

.auth-links a {
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Consent checkbox row (registration: AI processing agreement). */
.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border-radius: var(--radius-tile);
    padding: 14px 16px;
    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: 18px;
}

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

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

.auth-plain-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

/* ---------------------------------------------------------------------- */
/* 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-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

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

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