/* ============================================================
   AUTH PAGE — sign-in / sign-up (/login, /signup).
   Pitch panel = PAPER, form = chrome RAIL at the chat panel's
   proportion, never 50/50. auth.js stamps body[data-auth-mode].
   Reuses site.css text grammar and account.css .acct-login-*.
   ============================================================ */

body.auth-body { min-height: 100vh; }

.auth-split {
    position: relative; z-index: 1;
    display: flex; min-height: 100vh;
}

/* ---- Left: the paper (dominant side) ---- */
.auth-pitch {
    position: relative; flex: 1; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding: var(--space-19) clamp(var(--space-17), 5vw, var(--space-22));
    background: radial-gradient(ellipse at 50% 40%, var(--doc-bg-light) 0%, var(--doc-bg) 75%);
}
/* gold seam, the one gold anchor on the divide */
.auth-pitch::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(224,173,78,0.5) 28%, rgba(224,173,78,0.5) 72%, transparent);
}

.auth-pitch-body { max-width: 36rem; }
/* Landing text grammar re-inked for paper: document ink, not chrome cream.
 * No max-width on the heading, the <br> controls the break. */
.auth-pitch .chapter-heading { margin: 0 0 var(--space-8); max-width: none; color: var(--td1); }
/* Gold .accent washes out on papyrus; brick is the paper's accent. */
.auth-pitch .chapter-heading .accent {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: var(--doc-accent); color: var(--doc-accent);
}
/* margin: 0 because landing's later .chapter-desc rule sets `margin: 0 auto`,
 * which pushes the text right of the heading. The size is restated because the
 * class is frozen at the pre-redesign scale for auth and admin_login alone. */
.auth-pitch .chapter-desc {
    max-width: 34ch; margin: 0; color: var(--td3);
    font: 400 clamp(18px, 0.5vw + 15px, 23px)/1.5 var(--sans);
    letter-spacing: -0.008em;
}

/* The landing's ticked fact list (§5 `#anywhere .facts li`) at the same cut.
 * The size sits on the LIST, not the row: `36ch` is a measure in the list's
 * own type, so declaring it a level down leaves the box at the old width. */
.auth-pitch-points {
    list-style: none; margin: var(--space-14) 0 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--space-7);
    max-width: 36ch;
    font: 400 clamp(15px, 0.44vw + 12.4px, 19px)/1.5 var(--sans);
}
.auth-pitch-points li {
    position: relative; padding-left: var(--space-13);
    color: var(--td2); letter-spacing: -0.005em;
}
/* em, not px, so the tick holds its offset as the row grows. */
.auth-pitch-points li::before {
    content: ''; position: absolute; left: 0; top: 0.4em;
    width: 14px; height: 14px;
    background: var(--doc-accent);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* The landing's arrow artwork aimed across the seam at the form. Sign-in and
 * signup only, forgot/reset get no gesture. */
.auth-curl {
    /* top: calc(), not translateY: the entrance animation animates transform,
     * and a base transform would snap off when it ends. */
    position: absolute; right: clamp(28px, 3.5vw, 64px); top: calc(50% - 54px);
    width: 150px; text-align: center;
    color: var(--doc-accent);
    pointer-events: none;
    display: none;
}
body[data-auth-mode="login"] .auth-curl,
body[data-auth-mode="signup"] .auth-curl { display: block; }
.auth-curl svg { width: 130px; transform: rotate(32deg); opacity: 0.85; }
/* One note, both modes; the mode gate is on .auth-curl above. */
.auth-curl-note {
    font: italic 400 14.5px var(--serif); color: var(--doc-accent);
    transform: rotate(-3deg); margin: var(--space-5) 0 0;
}
@media (max-width: 1150px) { .auth-curl { display: none !important; } }

/* the landing's ink lockup (.doc-brand); keyframe in site.css. */
.auth-brand-pin {
    position: absolute; top: 24px; left: 28px; z-index: 3;
    animation: plaque-appear 600ms var(--ease) 140ms backwards;
}

/* The phone's letterhead. Hidden on the desk, where .auth-brand-pin on the
 * paper already carries the lockup. */
.auth-masthead { display: none; }
/* One brick word per heading on the paper (auth.js names which). The chrome
 * rail shows the same heading plain, so the desk is untouched. */
.auth-h-accent { color: inherit; }
/* The label/input pair is a phone object: `contents` keeps the input a direct
 * flex child of the form on the desk, so its 12px column spacing is unchanged. */
.acct-login-field { display: contents; }
.acct-login-label { display: none; }

/* staggered entrance, top to bottom. The bullets cascade individually so the
 * sub-line can't backfill after the list. */
.auth-pitch-body > * { animation: auth-rise 700ms var(--ease) both; }
.auth-pitch .chapter-desc { animation-delay: 90ms; }
.auth-pitch-points { animation: none; }
.auth-pitch-points li { animation: auth-rise 600ms var(--ease) both; }
.auth-pitch-points li:nth-child(1) { animation-delay: 170ms; }
.auth-pitch-points li:nth-child(2) { animation-delay: 240ms; }
.auth-pitch-points li:nth-child(3) { animation-delay: 310ms; }
body[data-auth-mode="login"] .auth-curl,
body[data-auth-mode="signup"] .auth-curl { animation: auth-rise 700ms var(--ease) 420ms backwards; }
@keyframes auth-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Right: the form rail (the chat panel's place and proportion) ---- */
.auth-form-side {
    position: relative; z-index: 1;
    flex: 0 0 clamp(420px, 34vw, 500px);
    display: flex; align-items: center; justify-content: center;
    background: var(--chrome-bg);
    padding: var(--space-19) clamp(var(--space-14), 3vw, var(--space-19));
}
/* One full-width column: Google, inputs and the gold submit all match width.
 * Vertical spacing is the form's own flex gap (account.css). */
.auth-form-wrap { width: 100%; max-width: 360px; text-align: left; }
/* Under the token's 1.22 so title and sub group as one header. */
.auth-form-title { font: var(--font-title); line-height: 1.12; color: var(--t1); letter-spacing: var(--track-heading); margin: 0 0 var(--space-4); padding-bottom: 0.04em; }
.auth-form-sub { font: var(--font-body); color: var(--t2); margin: 0 0 var(--space-14); }
/* What just happened, named above the heading it changes. Gold is the chrome's
 * anchor signal; the --bad variant is the one thing on this panel that is
 * broken, so it takes the chrome's red. Plain colored text, never a chip. */
.auth-form-eyebrow {
    font: 700 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 var(--space-5);
}
.auth-form-eyebrow--bad { color: var(--red); }
/* The verified eyebrow is an ECHO: wide, the paper beside it already says this
 * in 76px type. It survives only under 861px, where .auth-pitch is hidden and
 * the rail is the whole page; the --bad variant has no counterpart. */
@media (min-width: 861px) { .auth-form-eyebrow--echo { display: none; } }
.auth-form-wrap .acct-login-google { display: flex; width: 100%; }
.auth-form-wrap .acct-login-form .acct-login-submit { align-self: stretch; width: 100%; margin-top: var(--space-3); }
/* The UA's default dim on the gold gradient reads muddy brown. */
.auth-form-wrap .acct-login-submit:disabled {
    opacity: 0.4; box-shadow: none; transform: none; cursor: not-allowed;
}

/* Terms not agreed on signup submit: the button stays live and the error goes
 * to the form's error box; this flags the checkbox too. */
.acct-login-terms--error { color: var(--red); }
.acct-login-terms--error input[type="checkbox"] {
    outline: 2px solid var(--red);
    outline-offset: 1px;
    border-color: var(--red);
}
/* ticking it while the error shows keeps fill and outline agreeing */
.acct-login-terms--error input[type="checkbox"]:checked {
    background: var(--red);
    border-color: var(--red);
}

/* The explicit :hover is needed: this file loads after account.css at equal
 * specificity and would otherwise beat .acct-login-link:hover. */
.acct-login-forgot { text-align: right; margin: -8px var(--space-1) var(--space-2); }
.acct-login-forgot .acct-login-link { color: var(--t3); font-size: var(--fs-sm); }
.acct-login-forgot .acct-login-link:hover { color: var(--t1); }

/* Matches the forgot link (12px / --t3), one quiet helper tier. */
.auth-form-wrap .acct-login-hint { font-size: var(--fs-sm); }

/* bottom mode-switch link */
.auth-form-wrap .acct-login-alt--center {
    margin-top: var(--space-12); padding-top: var(--space-9);
    border-top: 1px solid var(--chrome-border-subtle);
    justify-content: center;
}
.auth-form-wrap .acct-login-alt--center .acct-login-link { color: var(--t2); }
.auth-form-wrap .acct-login-alt--center .acct-login-link strong { color: var(--accent); font-weight: 600; transition: color var(--dur); }
.auth-form-wrap .acct-login-alt--center .acct-login-link:hover,
.auth-form-wrap .acct-login-alt--center .acct-login-link:hover strong { color: var(--t1); }

/* "Back to sign in" is a return, not a mode switch, so no divider rule. */
.auth-form-wrap .acct-login-alt--back {
    border-top: none;
    padding-top: 0;
    margin-top: var(--space-10);
}

/* PHONES — the rail becomes the top of a paper: papyrus, the letterhead, the
   manuscript serif, the brick primary. The column is remapped to the paper's
   tokens in ONE block, the move #acct-main makes; above 861px nothing moves. */
@media (max-width: 860px) {
    .auth-split { display: block; }
    .auth-pitch { display: none; }

    /* The ground is painted on the body, not the section, so an overscroll
       rubber-band shows paper rather than the dark stage under it. */
    body.auth-body.agent-bg {
        background: radial-gradient(ellipse at 50% 34%, var(--doc-bg-light) 0%, var(--doc-bg) 72%);
        background-attachment: fixed;
    }
    .auth-form-side {
        display: flex; flex-direction: column;
        /* Both are needed: the desk rule centres on BOTH axes, and left alone in
           a column that centres the cross axis, so the whole page shrank to its
           widest line and sat in the middle of the screen. */
        justify-content: flex-start; align-items: stretch;
        width: 100%;
        /* svh, not vh: `vh` is iOS's LARGE viewport, so a page sized to it is taller
           than first paint shows. Unlike dvh it is fixed, so nothing reflows when the
           address bar comes and goes; the vh line is the fallback. */
        min-height: 100vh; min-height: 100svh;
        background: transparent;
        padding: var(--space-9) var(--space-11) var(--space-19);
        /* Captured HERE, one level above the remap, so the brick pill's ink is still the
           chrome cream: a custom property substitutes the element's OWN final value, so
           declaring it beside the remap resolves against the remapped --t1. */
        --btn-ink: var(--t1);
    }
    .auth-form-wrap {
        /* `auto` vertically too: letterhead, title and form are ONE object in the middle
           of the page, and auto margins go to 0 once the content is taller than the
           room. An explicit width, since an auto cross-axis margin kills stretch. */
        width: 100%; max-width: 380px; margin: auto;
        --t1: var(--td1); --t2: var(--td2); --t3: var(--td3);
        --accent: var(--doc-accent);
        /* One red per ground: on papyrus there is only brick. */
        --red: var(--doc-accent);
    }
    .auth-masthead { display: flex; margin-bottom: var(--space-16); }

    /* ---- title block, at the paper's cut ---- */
    .auth-form-title {
        font: 500 33px/1.16 var(--serif);
        letter-spacing: var(--track-heading);
        margin-bottom: var(--space-6);
    }
    .auth-h-accent { color: var(--doc-accent); }
    /* --font-body is 17px; every other hero subtitle is 15px. */
    .auth-form-sub { font-size: 15.5px; margin-bottom: var(--space-15); max-width: 32ch; }

    /* ---- The two login actions are a PAIR at the foot of the form: fields first,
       the brick submit as the form's last word, Google under it as the alternative.
       CSS order only, so the desk keeps its DOM, layout and tab order. ---- */
    #auth-content { display: flex; flex-direction: column; }
    #auth-content .acct-login-divider { display: none; }
    #auth-content .acct-login-google { order: 2; margin-top: 12px; }
    #auth-content .acct-login-alt { order: 3; }

    /* ---- Google: a foreign object by design, and its own guidance puts it on
       white; against the papyrus it is quieter than the brick primary. LIT the way
       that pill is, since a flat fill reads as pasted on, and with NO outline. ---- */
    .auth-form-wrap .acct-login-google {
        background: var(--grad-white-pill);
        border: none;
        border-radius: 14px;
        color: var(--td1);
        font: 600 15px var(--sans);
        padding: 14px 16px;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.6),
            inset 0 -1px 0 rgba(60,40,20,0.10),
            0 5px 16px -7px rgba(60,40,20,0.45);
    }
    /* Brightening a white fill does nothing, so hover is the lift alone, the
       move .paper-btn makes without its brightness step. */
    .auth-form-wrap .acct-login-google:hover {
        filter: none;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.6),
            inset 0 -1px 0 rgba(60,40,20,0.10),
            0 9px 24px -9px rgba(60,40,20,0.5);
    }

    /* ---- the paper's own hairlines, in place of the chrome's white washes.
       Hidden on auth.html above; still worn by admin_login.html's door. ---- */
    .auth-form-wrap .acct-login-divider { margin: var(--space-11) 0; font-size: 12.5px; }
    .auth-form-wrap .acct-login-divider::before,
    .auth-form-wrap .acct-login-divider::after { background: rgba(16,16,10,0.16); }
    .auth-form-wrap .acct-login-alt--center { border-top-color: rgba(16,16,10,0.14); }

    /* ---- fields: a ruled line you write on, with its printed label above.
       The wrapper stops being `contents` so the pair reads as one block. ---- */
    .auth-form-wrap .acct-login-form { gap: var(--space-11); }
    .auth-form-wrap .acct-login-field { display: block; }
    .auth-form-wrap .acct-login-label {
        display: block;
        font: 500 11.5px var(--sans); letter-spacing: 0.02em;
        color: var(--td3); margin-bottom: 5px;
    }
    .auth-form-wrap .acct-field-input {
        border-bottom: 1px solid var(--doc-border-strong);
        padding: 6px 2px 8px;
        font: 400 16px var(--sans);   /* 16 floor, or iOS zooms the page on focus */
    }
    .auth-form-wrap .acct-field-input:hover { border-bottom-color: var(--doc-border-strong); }
    .auth-form-wrap .acct-field-input:focus { border-bottom-color: var(--doc-accent); }
    /* This block restates the field's padding shorthand, which drops the
       reveal reserve components.css sets; the phone's is 2px wider. */
    .auth-form-wrap .pw-field .acct-field-input { padding-right: 44px; }
    /* The chrome's placeholder ink is a hardcoded cream at 35% and disappears
       on papyrus. Remapped the way #acct-main already remaps it. */
    .auth-form-wrap .acct-field-input::placeholder { color: var(--td3); opacity: 0.7; }
    /* The placeholder IS the field's name on the desk, where there is no visible
       label; here the label above says it. Scoped to the labelled pair, since
       admin_login.html wears the same shell with bare inputs. */
    .auth-form-wrap .acct-login-field .acct-field-input::placeholder { color: transparent; }

    /* ---- the primary, brick per "one red per ground". The 15px radius is the
       pill's own 0.27 ratio at this height, the same scaling .paper-btn does. ---- */
    .auth-form-wrap .acct-login-submit {
        background: var(--grad-brick-pill);
        color: var(--btn-ink);
        border-radius: 15px;
        padding: 15px 20px;
        font-size: 16px;
        box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 6px 18px -8px rgba(60,20,12,0.7);
    }
    .auth-form-wrap .acct-login-submit:hover {
        filter: brightness(1.06);
        box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 26px -10px rgba(60,20,12,0.75);
    }
    /* --on-gold is the gold pill's dark ink and vanishes on brick. */
    .auth-form-wrap .acct-login-submit.is-loading::after {
        border-color: rgba(255,255,255,0.3);
        border-top-color: var(--btn-ink);
    }
}

/* SHORT PHONES — a first-paint viewport (address bar up) is ~553px on the
   smallest phones, and at the block above's rhythm the submit landed under the
   trim. Taller screens keep the rhythm untouched. */
@media (max-width: 860px) and (max-height: 720px) {
    .auth-masthead { margin-bottom: 18px; }
    .auth-form-title { font-size: 29px; margin-bottom: 8px; }
    .auth-form-sub { margin-bottom: 20px; }
    .auth-form-side { padding-top: 14px; padding-bottom: 24px; }
    .auth-form-wrap .acct-login-form { gap: 16px; }
    .auth-form-wrap .acct-login-google { padding: 12px 16px; }
    .auth-form-wrap .acct-login-submit { padding: 13px 20px; }
    .auth-form-wrap .acct-login-alt--center { margin-top: 18px; padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-pitch-body > *,
    .auth-pitch-points li,
    .auth-curl { animation: none !important; }
}