/* ═══════════════════════════════════════════════════════════════════════════
   Umlook — auth pages (Sign up / Sign in)
   Two-pane split per design/design_handoff_umlook_ui/README.md screen 2.
   Depends on landing.css tokens (--ink/--sienna/--graphite/--oat/--paper,
   --serif/--sans/--display) and its .btn/.field/.logo/.wrap primitives —
   load landing.css first.
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-split { display: flex; min-height: 100vh; }

/* The campaign photo pane (sign in + sign up).

   Wanted asset: app/static/img/auth_split.jpg — 1400x1750 (4:5), JPEG q75,
   <=350 KB. 4:5 because this pane is NOT tall: it is flex 1.1 against the
   form's flex 1 at 100vh, so it renders between 0.80 and 0.93 wide-to-high
   depending on the viewport (716x768 at 1366, 1006x1080 at 1920). `cover` then
   takes ~15% off the top and bottom on a wide screen, or ~8% off the sides on a
   short one, so the subject has to sit inside the middle 80% of the frame.

   Two background layers: the photo paints over the diagonal-stripe placeholder.
   Until the file exists the first layer 404s silently and the stripes show, so
   the pane is never a blank white void — drop the JPEG in and it takes over
   with no CSS change. Delete the gradient layer once the photo is real. */
.auth-split__photo {
  flex: 1.1;
  background-image:
    url("../img/auth_split.jpg"),
    repeating-linear-gradient(
      135deg, var(--oat-lt) 0px, var(--oat-lt) 10px, var(--oat-dk) 10px, var(--oat-dk) 20px
    );
  background-size: cover, auto;
  background-position: center center, 0 0;
  background-repeat: no-repeat, repeat;
  display: flex;
  align-items: flex-end;
  padding: 56px;
}

.auth-split__col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.auth-form { max-width: 360px; width: 100%; }
.auth-form .logo { margin-bottom: 20px; }

.auth-form h1 { font-size: 38px; color: var(--ink); margin-bottom: 8px; }
.auth-form__sub { font-size: 14px; color: var(--graphite); margin-bottom: 32px; }

.auth-form .field:last-of-type { margin-bottom: 24px; }
.auth-form .field-hint { font-size: 11px; color: var(--graphite-lt); }
.auth-form .field-row { display: flex; justify-content: flex-end; margin: -10px 0 16px; }
.auth-form .field-row a { font-size: 12px; color: var(--graphite); text-decoration: underline; text-underline-offset: 2px; }
.auth-form .field-row a:hover { color: var(--sienna); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--graphite-lt);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--oat); }

.btn--white { background: #fff; border: 1px solid var(--oat); color: var(--ink); }
.btn--white:hover { background: var(--oat-lt); }
.btn--google { display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Google sign-in while it's still "Coming soon" (routes/auth.py
   GOOGLE_OAUTH_ENABLED). Deliberately not a .btn: it keeps the button's height
   and the row's shape so nothing shifts when the real one comes back, but it is
   flat, muted and has no hover or pointer — nothing about it should read as
   clickable. The Settings rows use the same treatment; the badge is restated
   here because the auth pages load landing.css + auth.css, never app.css. */
.auth-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 14px 20px;
  border: 1px dashed var(--oat);
  background: var(--oat-lt);
  font-size: 13px;
  color: var(--graphite);
  cursor: default;
}
.auth-soon img { opacity: 0.45; filter: grayscale(1); }

.auth-soon__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sienna);
  border: 1px solid var(--sienna);
  padding: 2px 8px;
}

.auth-form__footer { font-size: 13px; color: var(--graphite); text-align: center; margin-top: 28px; }
.auth-form__footer a { text-decoration: underline; text-underline-offset: 2px; font-weight: 500; color: var(--ink); }
.auth-form__footer a:hover { color: var(--sienna); }

/* A muted aside under the form — how long the reset link lasts, what saving a
   new password does to open sessions. Sits between the button and the footer
   link, so it owns the gap on both sides rather than borrowing __footer's. */
.auth-form__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--graphite-lt);
  text-align: center;
  margin-top: 18px;
}
.auth-form__note + .auth-form__footer { margin-top: 18px; }

.auth-form__legal { font-size: 11px; color: var(--graphite-lt); text-align: center; margin-top: 16px; }
.auth-form__legal a { color: var(--graphite-lt); text-decoration: underline; }
.auth-form__legal a:hover { color: var(--sienna); }

/* Flash messages, restated in the umlook palette (main.css's are indigo/red-lt
   and assume the old rounded/shadowed system). Destructive red matches the
   one non-palette semantic color the design handoff allows (Settings ▸ Delete
   Account). */
.auth-form .alert { padding: 12px 14px; font-size: 13px; margin-bottom: 20px; border: 1px solid; }
.auth-form .alert--error   { border-color: oklch(0.75 0.09 25); color: oklch(0.5 0.14 25); background: oklch(0.97 0.02 25); }
.auth-form .alert--success { border-color: var(--sienna); color: var(--ink); background: oklch(0.97 0.03 75); }
.auth-form .alert--info    { border-color: var(--oat); color: var(--graphite-dk); background: var(--paper); }
.auth-form .alert--warning { border-color: var(--sienna); color: var(--ink); background: oklch(0.97 0.03 75); }

@media (max-width: 860px) {
  .auth-split__photo { display: none; }
  .auth-split__col { padding: 40px 24px; }
}