/* static/css/auth.css — full-screen sign-in (js/auth.js showLogin). Sits above every surface; the
   app behind it is hidden outright so nothing of it shows or takes focus. Tokens only (styles.css). */
#login{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;overflow-y:auto;
  background:var(--canvas);color:var(--ink);font-family:var(--body);
  padding:calc(env(safe-area-inset-top,0px) + var(--s7)) calc(env(safe-area-inset-right,0px) + var(--s6))
          calc(var(--safe-b) + var(--s7)) calc(env(safe-area-inset-left,0px) + var(--s6))}
#login[hidden]{display:none}
body.signed-out>:not(#login):not(script){display:none !important}

.lg-col{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center}
.lg-logo{width:72px;height:72px;border-radius:var(--r-lg);box-shadow:var(--sh-md);display:block;margin-bottom:var(--s6)}
.lg-tt{font:600 34px/38px var(--disp);letter-spacing:-.02em;margin:0;color:var(--ink)}
.lg-sub{font:400 17px/26px var(--body);color:var(--body-c);margin:var(--s3) 0 0;max-width:30ch;text-wrap:balance}
.lg-btn{min-height:44px;margin-top:var(--s7);display:flex;justify-content:center;width:100%}
.lg-err{font:500 15px/22px var(--body);color:var(--red-ink);margin:var(--s4) 0 0;min-height:22px}
.lg-err[hidden]{display:block;visibility:hidden}
.lg-wm{margin-top:var(--s8);font:600 15px var(--disp);letter-spacing:-.01em;color:var(--faint);display:flex;align-items:center}
.lg-wm .dot{width:5px;height:5px;border-radius:50%;background:var(--red);margin:0 1.5px;transform:translateY(1px)}

/* Boot gate: until /api/me answers, only the splash paints (the pulsing app icon). Signed-out users see
   the login screen fade in after it; signed-in users go straight to the app. */
#gate{display:none}
html.gating #gate{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;background:var(--canvas)}
html.gating #gate img{width:72px;height:72px;border-radius:var(--r-lg);box-shadow:var(--sh-md);animation:gate-pulse 1.4s ease-in-out infinite}
@keyframes gate-pulse{50%{opacity:.55}}
#login:not([hidden]){animation:lg-in .22s ease-out}
@keyframes lg-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){html.gating #gate img,#login:not([hidden]){animation:none}}
html.gating body>:not(#gate):not(script){visibility:hidden}