/* auth.css — BEM block: auth-form */

/* ── Form card (sits inside the white auth panel) ────────────────── */
.auth-form__card {
    width: 100%;
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Title ─────────────────────────────────────────────────────────── */
/* Figma: Unbounded 22px/600 */
.auth-form__title {
    margin: 0 0 var(--space-3) 0;
    font-family: var(--font-brand);
    font-size: var(--font-size-3xl);   /* 22 px */
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

/* ── Error banner (shown above the submit button) ─────────────────── */
.auth-form__error {
    margin: 0 0 var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-error-bg);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
}

/* ── Field group ──────────────────────────────────────────────────── */
.auth-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

/* Pairs two fields side by side to keep tall forms (signup) within the viewport.
   auto-fit collapses to a single column on narrow/mobile widths. */
.auth-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.auth-form__row .auth-form__field {
    margin-bottom: 0;
}

/* Figma: label text in Unbounded 15px/600 #777777 */
.auth-form__label {
    font-family: var(--font-brand);
    font-size: var(--font-size-base);  /* 14 px — trimmed from 15 to keep tall forms compact */
    font-weight: var(--font-weight-semibold);
    /* Real label text, bound by WCAG AA — the placeholder token (#777777) is 4.48:1 on white, just
       under. --color-text-muted #636370 clears it (5.92:1). Same fix as the profile-note/-helper prose. */
    color: var(--color-text-muted);
}

/* Figma: inputs are white rectangles with subtle border */
.auth-form__input {
    height: var(--input-height);       /* 44 px */
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.auth-form__input::placeholder {
    color: var(--color-text-placeholder);
}

.auth-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* Locked email on the moderator-invite signup: prefilled, not editable. */
.auth-form__input--locked {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.auth-form__hint {
    margin: var(--space-2) 0 0;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ── Checkbox row ─────────────────────────────────────────────────── */
.auth-form__checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    cursor: pointer;
}

.auth-form__checkbox-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Submit button ────────────────────────────────────────────────── */
/* Figma: red (#F00000) rectangle, white Unbounded 15px/600 text */
.auth-form__submit {
    display: block;
    width: 100%;
    height: var(--input-height);       /* 44 px */
    padding: 0 var(--space-4);
    background-color: var(--color-primary);
    color: var(--color-surface);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-brand);
    font-size: var(--font-size-md);    /* 15 px */
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-bottom: var(--space-4);
}

.auth-form__submit:hover {
    background-color: var(--color-primary-hover);
}

.auth-form__submit:active {
    background-color: #aa0000;
}

/* ── Side-by-side name row ────────────────────────────────────────── */
.auth-form__name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* ── Terms link (inline, within checkbox label) ───────────────────── */
.auth-form__terms-link {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

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

/* ── Footer links ─────────────────────────────────────────────────── */
/* Figma: Poppins 15px/600 #777777 */
.auth-form__link {
    display: block;
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--font-size-md);    /* 15 px */
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: var(--space-2);
    transition: color 0.15s ease;
}

.auth-form__link:hover {
    color: var(--color-text-secondary);
}

.auth-form__link--primary {
    color: var(--color-primary);
}

.auth-form__link--primary:hover {
    color: var(--color-primary-hover);
}

/* Modifiers replacing former inline styles (CSP style-src has no unsafe-inline). */
.auth-form__submit--spaced {
    margin-bottom: 1rem;
}

.auth-form__link--block {
    display: block;
    margin-bottom: 0.5rem;
}

.auth-form__card--wide {
    max-width: 42rem;
}

.auth-form__text {
    font-family: var(--font-body);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

/* ── Cloudflare Turnstile ─────────────────────────────────────────── */
/* The widget renders a fixed ~300px iframe that cannot reflow. Center it in
 * the card, and on the narrowest phones (< 360px content) scale it down so it
 * fits fully instead of overflowing/clipping its interactive checkbox. */
.cf-turnstile {
    display: flex;
    justify-content: center;
    max-width: 100%;
    margin-bottom: var(--space-4);
}

/* The widget's inner ~300px box can't reflow, so on mobile we scale the whole
 * .cf-turnstile down a touch: this shrinks the rendered widget (300 → ~285px)
 * while its layout box stays at the card's width, so it always sits inside the
 * card instead of poking past the right edge. A tighter step handles the
 * narrowest phones where the card drops below ~285px. */
@media (max-width: 600px) {
    .cf-turnstile {
        transform: scale(0.95);
        transform-origin: top center;
    }
}

@media (max-width: 359px) {
    .cf-turnstile {
        transform: scale(0.82);
        transform-origin: top center;
    }
}

.auth-form__link--spaced-top {
    margin-top: var(--space-6);
}

/* ── Inline footer links row (login) ──────────────────────────────── */
.auth-form__links-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* ── Password show/hide toggle ────────────────────────────────────── */
.auth-form__password {
    position: relative;
}

.auth-form__input--with-toggle {
    padding-right: 2.75rem;
}

.auth-form__password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
}

.auth-form__password-toggle:hover {
    color: var(--color-text);
}

.auth-form__eye--hide {
    display: none;
}

.auth-form__password--visible .auth-form__eye--show {
    display: none;
}

.auth-form__password--visible .auth-form__eye--hide {
    display: inline;
}

/* ── Mobile: compact vertical rhythm ──────────────────────────────── */
/* The signup form is tall (5 inputs + 2 consent rows + Turnstile + button),
 * so on phones it overflows the viewport. Tighten the per-field spacing and
 * shrink the inputs slightly so the whole form fits with far less scrolling.
 * Login (same block, fewer fields) just gets a bit more breathing room. */
@media (max-width: 600px) {
    .auth-form__title {
        margin-bottom: var(--space-3);
    }
    .auth-form__field {
        gap: var(--space-1);
        margin-bottom: var(--space-3);
    }
    .auth-form__input {
        height: 2.5rem;   /* 40px, down from 44px */
    }
    .auth-form__checkbox-row {
        margin-bottom: var(--space-3);
    }
    .cf-turnstile {
        margin-bottom: var(--space-2);
    }
}

/* ── Google OAuth button (login + signup) ────────────────────────────────
   Styling lives here, NEVER inline: the strict CSP (style-src without
   unsafe-inline) silently blocks inline styles. The Google "G" is inline SVG
   markup (allowed). Official-button treatment (Option A), tokenized to the
   auth form's sizing. */
.auth-oauth {
    margin-top: var(--space-2);
}
.auth-oauth__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
}
.auth-oauth__divider::before,
.auth-oauth__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border-subtle);
}
.auth-oauth__google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    height: var(--input-height);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid #dadce0;                 /* Google's spec grey */
    border-radius: var(--radius-md);
    font-family: system-ui, -apple-system, "Roboto", sans-serif;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.auth-oauth__google:hover {
    background: var(--color-surface-alt);
    border-color: #d2e3fc;
}
.auth-oauth__google-icon {
    flex: 0 0 auto;
    display: inline-flex;
}
.auth-oauth__terms {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-text-muted);
    text-align: center;
}
.auth-oauth__terms a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

/* ── Height-proportional compaction ───────────────────────────────────────
   The form rhythm sheds vertical space as the viewport gets shorter, so the
   whole card (esp. the tall partner-apply form) fits with far less scaling.
   Complements the width-based (max-width: 600px) mobile rules above and the
   panel/logo steps in layout-auth.css. Tall screens are untouched; these only
   tighten. auth-fit.js then scales any residual overflow (the fixed Turnstile
   iframe is the one piece no spacing rule can shrink). */
@media (max-height: 820px) {
    .auth-form__card {
        gap: var(--space-1);
    }
    .auth-form__title {
        margin-bottom: var(--space-2);
    }
    .auth-form__lede {
        margin-bottom: var(--space-2);
    }
    .auth-form__field {
        margin-bottom: var(--space-2);
    }
    .auth-form__row {
        gap: var(--space-2);
        margin-bottom: var(--space-2);
    }
    .auth-form__checkbox-row {
        margin-bottom: var(--space-2);
    }
    .cf-turnstile {
        margin-bottom: var(--space-2);
    }
    .auth-form__submit {
        margin-bottom: var(--space-3);
    }
    .auth-oauth {
        margin-top: var(--space-1);
    }
    .auth-oauth__divider {
        margin: var(--space-2) 0;
    }
}

@media (max-height: 660px) {
    .auth-form__title {
        font-size: var(--font-size-xl);   /* 22 → 18 px */
        margin-bottom: var(--space-1);
    }
    .auth-form__field {
        margin-bottom: var(--space-1);
    }
    .auth-form__row {
        gap: var(--space-2);
        margin-bottom: var(--space-1);
    }
    .auth-form__input {
        height: 2.5rem;   /* 40px */
    }
    .auth-form__checkbox-row {
        margin-bottom: var(--space-1);
    }
    .cf-turnstile {
        margin-bottom: var(--space-1);
    }
    .auth-form__submit {
        height: 2.5rem;
        margin-bottom: var(--space-2);
    }
    .auth-oauth__divider {
        margin: var(--space-1) 0;
    }
    .auth-form__link {
        margin-bottom: var(--space-1);
    }
}