/* PEXim auth screens — UI migration Phase 3 (UI-305).
 *
 * The six standalone documents: login, register, forgot password, reset
 * password, the public invite landing (all states) and the consent gate.
 * Ported from the mock's .auth / .auth-brand / .auth-card / .or rules
 * (docs/ui-migration/mock/target.html lines 70–90).
 *
 * Why its own sheet and not app.css: these pages render their own <html> and
 * share nothing with the app shell. They link tokens -> components -> app ->
 * auth, so this file is LAST and wins where a name collides.
 *
 * Load order note: app.css still defines .auth-page / .auth-card / .auth-title
 * for internal/authz/orgrole.go, which serves a bare "Not available" document
 * off app.css alone. Those three rules are the only auth CSS left there.
 *
 * Nothing here may contain a colour literal (internal/web/AGENTS.md § Tokens).
 * The brand panel is permanently dark in BOTH themes, so its text reads
 * --on-dark, never --on-primary (which flips to near-black in dark mode).
 */

/* ------------------------------------------------------------------ *
 * Split layout
 * ------------------------------------------------------------------ */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    background: var(--card);
}

/* Brand panel. Below 900 it is not hidden (the mock drops it entirely) but
   collapsed to a slim header strip: the wordmark is the only thing that still
   earns its pixels on a phone, and a page with no brand at all reads as a
   phishing form. */
.auth-brand {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--navy) 0%, var(--secondary) 55%, var(--primary) 100%);
    color: var(--on-dark);
    padding: 14px 20px;
    display: flex;
    align-items: center;
}
.auth-brand .headline,
.auth-brand .stats { display: none; }

.auth-brand .wm { font-family: var(--head); font-weight: 700; font-size: 17px; }
.auth-brand .wm span {
    font-weight: 500;
    opacity: .75;
    font-size: 12px;
    margin-left: 8px;
    font-family: var(--sans);
}

.auth-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: var(--bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
    box-shadow: var(--shadow);
}
/* The consent gate is prose and a table, not a 400 px form column. */
.auth-card.wide { max-width: 680px; }
.auth-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.auth-card h3 { font-size: 14px; font-weight: 600; }
.auth-card .lead { color: var(--muted); margin: 0 0 22px; font-size: 13.5px; }
.auth-card form { margin: 0; }

@media (min-width: 900px) {
    .auth { grid-template-columns: 1.05fr 1fr; grid-template-rows: 1fr; }
    .auth-brand {
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        padding: 56px;
    }
    /* The mock's soft mint glow, bottom right. Decorative only. */
    .auth-brand::after {
        content: "";
        position: absolute;
        inset: auto -120px -160px auto;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--mint) 45%, transparent), transparent 65%);
    }
    .auth-brand .wm { font-size: 22px; }
    .auth-brand .wm span { font-size: 13px; }
    .auth-brand .headline,
    .auth-brand .stats { display: block; position: relative; }
    .auth-brand .headline h1 {
        color: var(--on-dark);
        font-family: var(--head);
        font-size: 44px;
        font-weight: 800;
        line-height: 1.08;
        max-width: 12ch;
        letter-spacing: -.01em;
    }
    .auth-brand .headline p { font-size: 16px; opacity: .85; max-width: 44ch; margin: 18px 0 0; }
    .auth-brand .stats { display: flex; gap: 36px; }
    .auth-brand .stats b { display: block; font-family: var(--head); font-size: 26px; font-weight: 700; }
    .auth-brand .stats span { font-size: 12.5px; opacity: .8; }
    .auth-form { padding: 40px 24px; }
}

/* ------------------------------------------------------------------ *
 * Card contents
 *
 * .auth-logo / .oauth-btn / .auth-divider / .auth-footer keep their names:
 * tests/e2e/specs/auth.spec.ts and landing.spec.ts address the auth screens
 * through them, and renaming the hooks would buy nothing but a spec rewrite.
 * ------------------------------------------------------------------ */

/* The wordmark's first half, so ".auth-logo" is still the string "PEXim". */
.auth-logo { font-family: var(--head); }

.oauth-btn { margin-bottom: 8px; }
.oauth-btn:last-of-type { margin-bottom: 0; }

.or,
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted-2);
    font-size: 12px;
    margin: 16px 0;
}
.or::before, .or::after,
.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    margin-top: 18px;
    color: var(--muted);
}

/* Invite / reset / consent copy. These cards are prose, not a form, and the
   global reset zeroes every margin. */
/* text-align is explicit: app.css still centres .auth-title for orgrole.go. */
.auth-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; color: var(--fg); text-align: left; }
.auth-text { font-size: 13.5px; line-height: 1.6; color: var(--fg-2); margin-bottom: 14px; }
.auth-text:last-child { margin-bottom: 0; }

.auth-coming-soon { font-size: 22px; font-weight: 700; color: var(--fg); margin: 0 0 8px; }
.auth-coming-soon-note { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* The checkbox row: the label wraps the input, so it cannot be a .field. */
.auth-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--fg-2); margin-bottom: 16px; }
.auth-consent input { margin-top: 2px; flex: none; }