/* Amos, Clean-Sheet 2026: the way in - login, signup, password reset,
   the crew invite, the terms interstitial and the error page. Standalone
   documents (no session, no tenant, sometimes a failing app), loaded
   after _auth_shell.html's own block so this is the last word. The door
   stays dark (the shell pins data-theme, per the owner, Sept 14).

   Borrowed: Cash App / Apple Wallet - one calm panel, one obvious
   action, the mark as the only decoration. */

body.cs-auth {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100dvh; margin: 0;
  padding: max(var(--s-8), env(safe-area-inset-top)) var(--gutter) max(var(--s-8), env(safe-area-inset-bottom));
  background: var(--canvas); color: var(--ink-1);
  font: var(--t-body);
}
body.cs-auth .wrap { width: 100%; max-width: 400px; display: grid; justify-items: center; gap: var(--s-4); }

/* The mark, as the app's own icon tile. */
body.cs-auth .logo { width: 88px; height: 88px; border-radius: 22px; display: block; }

body.cs-auth .card {
  width: 100%; display: grid; gap: var(--s-1);
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-sheet);
  padding: var(--s-6) var(--s-5) var(--s-5);
}
body.cs-auth h1 { font: var(--t-display); letter-spacing: var(--track-display); margin: 0; text-align: center; }
body.cs-auth .card > h1 { font-size: 2rem; }
body.cs-auth .subtitle { font: var(--t-body); color: var(--ink-2); text-align: center; margin: 0 0 var(--s-3); }
body.cs-auth .hint { font: var(--t-meta); font-weight: 450; color: var(--ink-3); margin: 6px 0 0; }
body.cs-auth form { display: grid; gap: 0; }
body.cs-auth label { margin-top: var(--s-4); }
body.cs-auth form > label:first-of-type { margin-top: var(--s-1); }

/* The one action: a real button, full width, at the thumb. */
body.cs-auth button, body.cs-auth input[type=submit] {
  appearance: none; width: 100%; min-height: var(--hit-lg); margin-top: var(--s-5);
  border: 0; border-radius: var(--r-control);
  background: var(--accent); color: var(--on-accent);
  font: var(--t-body); font-size: 1.125rem; font-weight: 650; cursor: pointer;
}
body.cs-auth button:hover { background: var(--accent-pressed); }
body.cs-auth button.btn-secondary { background: var(--panel); color: var(--ink-1); border: 1px solid var(--line-strong); }
body.cs-auth a { color: var(--live-text); }

/* What went wrong, and what went right. */
body.cs-auth .error {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3); border-radius: var(--r-control);
  background: var(--attention-fill); color: var(--attention-ink); font: var(--t-meta); font-weight: 650;
}
body.cs-auth .error svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
body.cs-auth .success { padding: var(--s-3); border-radius: var(--r-control); background: var(--money-in-fill); color: var(--money-in-ink); font: var(--t-meta); font-weight: 650; }
body.cs-auth .back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--live-text); text-decoration: none; font-weight: 600; }

/* Signup's extras. */
body.cs-auth .checkbox-row { display: flex !important; align-items: flex-start; gap: var(--s-3); font: var(--t-meta) !important; font-weight: 500 !important; color: var(--ink-2); }
body.cs-auth .checkbox-row input { margin-top: 2px; flex: none; }
body.cs-auth .signup-turnstile, body.cs-auth .cf-turnstile { margin-top: var(--s-4); }

/* The terms interstitial. */
body.cs-auth .doc-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 52px; border-top: 1px solid var(--hairline); }
body.cs-auth .doc-row:first-child { border-top: 0; }
body.cs-auth .doc-name { font-weight: 650; }
body.cs-auth .doc-link a { font: var(--t-meta); font-weight: 700; text-decoration: none; }

/* The error page: the mark (for a signed-in operator only), the code,
   what happened, and the way back. */
body.cs-auth .mascot-error { width: 120px; height: 120px; }
body.cs-auth .personality-line { font: var(--t-meta); font-weight: 700; color: var(--live-text); margin: 0; }
body.cs-auth .code { font: var(--t-display); font-size: 4rem; line-height: 1; color: var(--ink-3); margin: 0; font-variant-numeric: tabular-nums; }
body.cs-auth .wrap > p { margin: 0; text-align: center; color: var(--ink-2); max-width: 36ch; }
body.cs-auth .home {
  display: flex; align-items: center; justify-content: center; width: 100%; max-width: 320px;
  min-height: var(--hit-lg); border-radius: var(--r-control);
  background: var(--accent); color: var(--on-accent); font-weight: 650; text-decoration: none;
}

/* Polish pass, 6: the footer's Terms and Privacy, and the way-in pages'
   own links ("Forgot password?", "Sign up") drew 18-22px tall. Each
   takes a 44px tap, centred on it, without moving a pixel of layout. */
body.cs-auth p a:not(.btn), body.cs-auth .hint a { position: relative; }
body.cs-auth p a:not(.btn)::after, body.cs-auth .hint a::after {
  content: ""; position: absolute;
  top: min(0px, calc((100% - 44px) / 2)); bottom: min(0px, calc((100% - 44px) / 2));
  left: min(0px, calc((100% - 44px) / 2)); right: min(0px, calc((100% - 44px) / 2));
}