/* Shared layout for the four full-page auth screens:
   Log In.html, Sign Up.html, forgot-password.html, reset-password.html.

   Extracted 2026-08-27 (DEC-150). Every rule here was previously written out
   in full, twice, page-locally in Log In.html and Sign Up.html; adding the two
   password-reset pages would have made four copies of the same 24 lines and
   four places for the auth screens to drift apart. That is the duplication the
   project's engineering rules exist to prevent.

   Deliberately NOT folded into spoolbase.css, for the same reason legal.css
   is not: these rules serve four standalone public pages that load no app
   chrome, and the design system should not carry layout only they use.

   Load order matters -- this must come AFTER spoolbase.css (it depends on that
   file's custom properties) and BEFORE any page-local <style> block, so a page
   can still override a rule locally.

   What stays page-local, on purpose:
     Log In.html   .label-row        (the "Forgot password?" row)
     Sign Up.html  .feat-*, .pwbar,  (feature ticks, password strength meter)
                   .pwhint
   Anything used by two or more of the four belongs here instead. */

body { background: var(--bg-deep); }

/* ── Two-column shell ──────────────────────────────────────────────────── */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* ── Left: brand panel ─────────────────────────────────────────────────── */
.brandside { position: relative; padding: 40px 48px; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border); }
.brandside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 25% 20%, var(--accent-soft), transparent 65%); pointer-events: none; }
.brandside > * { position: relative; z-index: 1; }
.bs-top { display: flex; align-items: center; gap: 11px; }
.bs-top .name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.bs-top .name b { color: var(--accent); }
.bs-mid { margin-top: auto; }
.bs-quote { font-size: 27px; font-weight: 750; letter-spacing: -.025em; line-height: 1.18; max-width: 440px; }
.bs-quote .ac { color: var(--accent); }
.bs-sub { color: var(--text-2); font-size: 14px; margin-top: 18px; max-width: 400px; line-height: 1.55; }
.bs-foot { margin-top: 28px; font-size: 12px; color: var(--text-4); }

/* Stat pills — Log In.html today, available to any of the four. */
.stat-pills { display: flex; gap: 12px; margin-top: 30px; }
.sp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 18px; }
.sp .v { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.sp .k { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* ── Right: form panel ─────────────────────────────────────────────────── */
.formside { display: flex; align-items: center; justify-content: center; padding: 40px; }
.formwrap { width: 100%; max-width: 380px; }
.formwrap h1 { font-size: 27px; font-weight: 750; letter-spacing: -.025em; }
.formwrap .lead { color: var(--text-2); font-size: 14px; margin: 8px 0 30px; }
.form { display: flex; flex-direction: column; gap: 16px; }

/* ── Shared chrome ─────────────────────────────────────────────────────── */
.swap { text-align: center; margin-top: 22px; font-size: 13px; color: var(--text-2); }
.swap a { color: var(--accent); font-weight: 600; text-decoration: none; }
.legal { font-size: 11.5px; color: var(--text-4); text-align: center; margin-top: 18px; line-height: 1.6; }
.legal a { color: var(--text-2); text-decoration: underline; }

.err-banner { display: none; background: color-mix(in oklab,var(--low) 10%,transparent); border: 1px solid var(--low); border-radius: 10px; padding: 11px 14px; font-size: 13px; color: var(--low); }

/* Success counterpart to .err-banner. New with the reset pages: "we've sent
   you an email" and "your password is changed" are both good news, and
   colouring them with the error banner would read as a failure. */
.ok-banner { display: none; background: color-mix(in oklab,var(--good) 10%,transparent); border: 1px solid var(--good); border-radius: 10px; padding: 11px 14px; font-size: 13px; color: var(--good); line-height: 1.55; }

@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .brandside { display: none; } }