/*
  Version 3, round 2: the desk's sign-in and lock screen (templates/v3/accounts/login.html, lock.html; static/v3/signin.js).
  Served only to a computer; the phone keeps today's screens. v3's look: Inter, the paper, the white card, the ink pill,
  the wordmark with its green "ap". No new colour: the tokens are followap.css's :root, the error red is today's .autherr.
  Every rule is under body.v3-auth.
*/
/* followap.css draws the app's shell on html and body (a fixed-height flex row on the desk, the ink stage behind it);
   this page is a plain document on the paper */
html.v3-authdoc{height:auto;overflow:auto}
body.v3.v3-auth{display:block;height:auto;overflow:visible;background:var(--paper);color:var(--ink);min-height:100vh;min-height:100dvh;margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;letter-spacing:-.011em}
body.v3-auth .v3-auth-main{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 16px;gap:22px}
body.v3-auth .v3-auth-brand{text-align:center;max-width:440px;animation:v3-auth-rise 520ms var(--ease-out-expo) both}
body.v3-auth .v3-wm{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
body.v3-auth .v3-wm b{color:var(--green);font-weight:800}
body.v3-auth .v3-auth-tag{margin-top:8px;color:var(--grey-d);font-size:15px;line-height:1.45}
body.v3-auth .v3-auth-card{width:100%;max-width:440px;background:var(--white);border-radius:22px;padding:32px 32px 28px;
  box-shadow:0 1px 0 var(--line-soft),0 18px 48px -30px color-mix(in srgb,var(--ink) 45%,transparent);
  animation:v3-auth-rise 520ms var(--ease-out-expo) 60ms both}
body.v3-auth .v3-auth-h1{font-size:30px;line-height:1.05;font-weight:800;letter-spacing:-.04em}
body.v3-auth .v3-auth-lede{margin-top:6px;color:var(--grey-d);font-size:15px;line-height:1.45}
body.v3-auth .v3-auth-note{margin-top:12px;color:var(--grey-d);font-size:13.5px;background:var(--sunken);border-radius:12px;padding:10px 12px}
body.v3-auth .v3-auth-form{display:flex;flex-direction:column;margin-top:20px}
body.v3-auth .v3-auth-lab{display:block;font-size:13px;font-weight:650;color:var(--grey-d);margin:14px 2px 6px}
body.v3-auth .v3-auth-lab:first-of-type{margin-top:0}
body.v3-auth .v3-auth-fld{width:100%;height:50px;border:1px solid var(--line);border-radius:14px;background:var(--sunken);padding:0 14px;
  font:inherit;font-size:16px;color:var(--ink);outline:none;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
body.v3-auth .v3-auth-fld:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(56,202,95,.16);background:var(--white)}
body.v3-auth .v3-auth-err.autherr{margin:12px 2px 0;text-align:left;font-size:13.5px;color:#B4462F}
body.v3-auth .v3-auth-pill{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:18px;border:0;
  border-radius:99px;background:var(--ink);color:var(--white);font:inherit;font-weight:650;font-size:16px;cursor:pointer;
  transition:transform 120ms var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
body.v3-auth .v3-auth-pill:active{transform:scale(.97)}
body.v3-auth .v3-auth-pill:focus-visible{outline:2px solid var(--green);outline-offset:3px}
body.v3-auth .v3-auth-pill.light{background:var(--sunken);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
body.v3-auth .v3-auth-pill.busy{opacity:.6;pointer-events:none}
body.v3-auth .v3-auth-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
body.v3-auth .v3-auth-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;align-self:center;color:var(--grey-d);
  font-weight:600;font-size:14px;text-decoration:none}
body.v3-auth .v3-auth-link:hover{color:var(--ink);text-decoration:underline}
body.v3-auth .v3-auth-card>.v3-auth-link{display:flex;justify-content:center}
body.v3-auth .v3-auth-or{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--grey);font-size:13px}
body.v3-auth .v3-auth-or::before,body.v3-auth .v3-auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
body.v3-auth .v3-auth-bio .v3-auth-or+.v3-auth-pill{margin-top:14px}
body.v3-auth .v3-auth-quiet{margin-top:10px;text-align:center;color:var(--grey-d);font-size:13.5px}
body.v3-auth .v3-auth-foot{color:var(--grey-d);font-size:14px}
body.v3-auth .v3-auth-foot a{color:var(--ink);font-weight:650}
/* the lock */
body.v3-lock .v3-auth-lockico{width:48px;height:48px;border-radius:14px;background:var(--sunken);display:grid;place-items:center;margin-bottom:16px}
body.v3-lock .v3-auth-bio .v3-auth-pill{margin-top:22px}
body.v3-lock .v3-auth-form{margin-top:6px}
body.v3-lock .v3-auth-bio[hidden]+.v3-auth-form{margin-top:20px}
body.v3-lock .v3-auth-bio[hidden]+.v3-auth-form .v3-auth-pill.light{background:var(--ink);color:var(--white);box-shadow:none}
/* the desk's widths: a little more air at 1440 and up */
@media (min-width:1400px){
  body.v3-auth .v3-auth-card{max-width:460px;padding:36px 36px 30px}
  body.v3-auth .v3-wm{font-size:38px}
}
@keyframes v3-auth-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ body.v3-auth .v3-auth-brand,body.v3-auth .v3-auth-card{animation:none} }
