/* The one dark page: sign-in, set-password, invite expired, 403. Ported from
   design/ui-overhaul/mockups/a2-login.html (the locked reference). App pages stay
   light; this page is black so the ring, when it appears, has room. */
body.auth {
  color-scheme: dark;
  --ground: #000000; --surface: rgba(255, 255, 255, .04); --hover: rgba(255, 255, 255, .07); --active: rgba(255, 255, 255, .10);
  --border: rgba(244, 237, 231, .14); --rule: rgba(244, 237, 231, .10); --control: rgba(244, 237, 231, .18);
  --text: #f4ede7; --muted: #a3968b; --faint: #7d726a;
  --primary: #f4ede7; --primary-hover: #ffffff; --primary-ink: #0b0907;
  --accent: #f4ede7;                 /* focus rings stay neutral: the orange belongs to the ring */
  --negative: #f08a7c;
  --brand: #e8571e;
  background: var(--ground); color: var(--text); min-height: 100vh; min-height: 100dvh; overflow: hidden;
}
body.auth .app { display: block; }
body.auth #side { display: none; }
body.auth #main { margin: 0; padding: 0; border-radius: 0; background: var(--ground); box-shadow: none; min-height: 100vh; min-height: 100dvh; }
body.auth .fb-widget { display: none; }   /* no feedback bubble on the front door */

.hero { position: fixed; inset: 0; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 580ms var(--ease-out); }
.hero.ring-on canvas { opacity: 1; }
.hero.ring-off canvas { transition: opacity 750ms var(--ease-exit); }
.foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 max(24px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* The column: lockup, then the form or message. Centred on the viewport, which is also the ring's centre. */
.inring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 272px; display: grid; gap: 24px; text-align: center; transition: opacity 400ms var(--ease-exit), transform 400ms var(--ease-exit); }
.lockup { display: grid; justify-items: center; gap: 9px; }
.lockup img { width: 52px; height: 52px; display: block; margin-bottom: 2px; }
.lockup .name { font-family: "Bricolage Grotesque", var(--font); font-weight: 400; font-size: 19px; letter-spacing: .2em; text-indent: .2em; color: var(--text); line-height: 1; }
.lockup .sub { font-family: "Bricolage Grotesque", var(--font); font-weight: 400; font-size: 10.5px; letter-spacing: .32em; text-indent: .32em; color: var(--muted); line-height: 1; }
.lockup .product { font-family: "Bricolage Grotesque", var(--font); font-weight: 400; font-size: 10px; letter-spacing: .36em; text-indent: .36em; color: var(--faint); line-height: 1; margin-top: 6px; }

.auth-form { display: grid; gap: 12px; text-align: left; }
.auth-form .field { color: var(--muted); font-size: 12px; }
.auth-form .field input { height: 38px; background: var(--surface); border-color: var(--control); color: var(--text); font-size: 14px; border-radius: 10px; }
.auth-form .field input::placeholder { color: var(--faint); }
.auth-form .field input:focus { border-color: rgba(244, 237, 231, .6); box-shadow: none; }
.auth-form .field input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px #15110e inset; }
.auth-form .submit { width: 100%; height: 38px; margin-top: 2px; border-radius: 999px; transition: transform var(--t-press) var(--ease-out), background var(--t-hover); }
.auth-form .submit:active { transform: scale(.97); }
.auth-form .submit[disabled] { opacity: 1; cursor: progress; }
.auth-form .status { margin: 0; min-height: 18px; font-size: 12.5px; color: var(--muted); text-align: center; }
.auth-form .status.is-error { color: var(--negative); }
.auth-form .field.has-error input { border-color: var(--negative); }
.auth-who { display: grid; gap: 2px; text-align: center; margin-bottom: 2px; }
.auth-who b { font-weight: 500; font-size: 14px; }
.auth-who span { font-size: 12.5px; color: var(--muted); }

/* Messages (invite expired, 403): the words stand where the form would. */
.auth-msg { display: grid; gap: 10px; justify-items: center; }
.auth-msg .code { font-family: "Bricolage Grotesque", var(--font); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
.auth-msg h1 { font-size: 16px; font-weight: 500; margin: 0; letter-spacing: 0; white-space: normal; }
.auth-msg p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.auth-msg .btn { margin-top: 6px; border-radius: 999px; }

/* Leaving: the column fades and lifts a little as the next page is requested. */
body.leaving .inring { opacity: 0; transform: translate(-50%, -52%); }
body.leaving .foot { opacity: 0; transition: opacity 300ms; }
@media (prefers-reduced-motion: reduce) { .auth-form .submit, .inring, .hero canvas { transition: none; } }

@media (max-width: 639px), (max-height: 619px) {
  body.auth { overflow: auto; }
  .inring { width: auto; max-width: 320px; padding: 0 16px; }
  .foot { justify-content: center; text-align: center; }
}