/* layout-auth.css — dark background with centered white form card */

/* Hard guard: the auth pages must never scroll horizontally. The centered card
 * plus the fixed-width Turnstile can, on some browsers/devices, nudge a child
 * past the viewport edge; clip it at the document root so no horizontal
 * scrollbar can ever appear (mirrors the marketing pages' safety net). */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

.auth-shell {
    height: 100dvh;
    /* No-JS fallback: a card taller than the viewport stays reachable by scrolling.
       auth-fit.js swaps this for clipping (.auth-shell--fit) once it can guarantee
       the card is scaled to fit, so the enhanced path never scrolls. */
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background-color: #1b1b1b;
    background-image: url(/static/img/bg-login.png);
    background-image: image-set(url(/static/img/bg-login.webp) type("image/webp"), url(/static/img/bg-login.png) type("image/png"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: var(--font-body);
    position: relative;
}

/* Overlay darkens the photo background */
.auth-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* White form panel floats centered */
.auth-shell__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    border-radius: 16px;
    padding: var(--space-6) var(--space-8);   /* trimmed vertical padding so tall forms (signup) fit */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    /* --fit-scale is set by auth-fit.js only when the card would exceed the
       viewport height (the Turnstile iframe + fixed input heights set a floor
       CSS spacing can't cross). Defaults to 1: no JS, or a card that already
       fits, is pixel-identical to before. Scale from the centre so an
       overflowing layout box, centred by the flex shell, stays fully in view. */
    transform: scale(var(--fit-scale, 1));
    transform-origin: center center;
}

/* JS present + card scaled to fit → clip instead of scroll (no page scroll ever). */
.auth-shell--fit {
    overflow: hidden;
}

.auth-shell__logo {
    max-width: 150px;
    height: auto;
    margin-bottom: var(--space-4);
    display: block;
}

/* ── Height-proportional compaction ───────────────────────────────────────
   As the viewport gets shorter the panel/logo shed vertical space so the card
   stays crisp (less work left for the scale fallback). Tall screens are
   untouched — these only ever tighten, never grow. Mirror steps for the form
   rhythm live in auth.css. */
@media (max-height: 820px) {
    .auth-shell {
        padding: var(--space-4);
    }
    .auth-shell__panel {
        padding: var(--space-4) var(--space-8);
    }
    .auth-shell__logo {
        margin-bottom: var(--space-2);
    }
}

@media (max-height: 660px) {
    .auth-shell {
        padding: var(--space-3);
    }
    .auth-shell__panel {
        padding: var(--space-3) var(--space-6);
    }
    .auth-shell__logo {
        max-width: 120px;
        margin-bottom: var(--space-1);
    }
}

.auth-shell__panel p {
    font-family: var(--font-body);
    color: var(--color-text);
}

/* Mobile: the desktop insets (24px shell + 32px panel padding per side) leave
 * only ~278px of content on a 390px phone — narrower than the fixed ~300px
 * Cloudflare Turnstile iframe, which then bleeds past the card and off the
 * screen. Trim the insets so the card uses the available width, and clip any
 * residual horizontal overflow on the narrowest devices. */
@media (max-width: 600px) {
    .auth-shell {
        padding: var(--space-3);
        overflow-x: hidden;
    }
    .auth-shell__panel {
        padding: var(--space-4) var(--space-5);
    }
}