/* Shared layout for the auth forms (login/register/forgot/reset/…) — Lucent's own components
   don't lay out a <form>'s direct children, so this fills that one gap. */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--dimension--primitive--spacing-4);
}

/* The bare centered block used by check-email, forgot/reset (both states), signed-out,
   link-invalid — no card, just centered content (Figma: "Block / …" at w-352). */
.auth-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 352px;
    text-align: center;
}

.auth-block__title {
    margin: 0;
    width: 100%;
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 28px;
    color: var(--color--semantic--text-strong);
}

.auth-block__subtitle {
    margin: 0;
    width: 100%;
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 14px;
    color: var(--color--semantic--text-subtle);
}

/* The bare (no background) icon glyph on check-email / reset-sent. */
.auth-icon--flat {
    color: var(--color--semantic--accent-default);
}

/* The neutral gray tile icon on signed-out / link-invalid. */
.auth-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    /* No semantic "neutral chip" surface token exists yet (surfaces are all near-white) — see Lucent gap. */
    background: var(--color--primitive--sage-95);
    color: var(--color--semantic--text-subtle);
}

/* A plain, non-underlined text link (e.g. "back to sign in") — distinct from LucentButton's
   Text variant, which underlines. */
.auth-link {
    font-family: var(--font--primitive--sans);
    font-size: 13px;
    color: var(--color--semantic--accent-default);
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

/* Login content column — plain stack, no card (glass/border/shadow dropped by request). */
.auth-login {
    display: flex;
    flex-direction: column;
    gap: var(--dimension--primitive--spacing-4);
    width: 384px;
}

/* The sign-in submit fills the column. LucentButton forwards inline styles to the inner
   <button>, so we drive width from the host span only: a single-column grid stretches the
   inner pill edge-to-edge without setting any width on the inner element itself. */
.auth-login__submit {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

/* Create-account link — same stretch technique as .auth-login__submit: the <a> becomes a
   single-column grid host, so its inner pill (the actual visual) is grid-stretched to fill
   the full width instead of sitting at its natural content size. */
.auth-login__create {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

/* Register content column — plain stack, no card (same rationale as .auth-login). */
.auth-register {
    display: flex;
    flex-direction: column;
    gap: var(--dimension--primitive--spacing-4);
    width: 400px;
}

/* Invitation-accept content column — plain stack, no card, centered (same rationale as
   .auth-login, but this screen's content is itself center-aligned, unlike login/register). */
.auth-invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--dimension--primitive--spacing-4);
    width: 360px;
}

/* Card header used by Login/Register (title weight 400, distinct from .auth-block__title's 300). */
.auth-card__title {
    margin: 0;
    font-family: var(--font--primitive--sans);
    font-weight: 400;
    font-size: var(--dimension--primitive--fs-heading-lg, 28px);
    color: var(--color--semantic--text-strong);
}

.auth-card__subtitle {
    margin: 0;
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: var(--dimension--primitive--fs-body-sm, 14px);
    color: var(--color--semantic--text-muted);
}

.auth-center-row {
    display: flex;
    justify-content: center;
    width: 100%;
}

.auth-divider {
    border: none;
    height: 1px;
    width: 100%;
    margin: 0;
    background: var(--color--semantic--border-subtle);
}

.auth-divider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.auth-divider-row .auth-divider {
    flex: 1;
}

.auth-divider-row span {
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 11px;
    color: var(--color--semantic--text-subtle);
    white-space: nowrap;
}

.auth-sso-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.auth-sso-row > * {
    flex: 1;
}

/* Figma node 73:535 "Screen / Invitation accept" — cross-project override (LucentAvatar lives in
   the Lucent RCL), so this must stay in a global stylesheet, not a scoped .razor.css. */
.invitation-avatar .lucent-avatar__circle {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--color--semantic--accent-subtle);
}

.invitation-avatar .lucent-avatar__initials {
    font-size: 20px;
    color: var(--color--semantic--accent-strong);
}

.invitation-accept-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}

.invitation-accept-actions > * {
    flex: 1;
}