/* login page */
.auth{min-height:100dvh;display:grid;align-content:start}
.auth .wrap{max-width:520px;padding-top:92px;padding-bottom:48px;display:grid;gap:14px}.auth .wrap > *,.auth .form-shell,.auth .form,.auth .social{min-width:0}.auth .btn-social{white-space:normal;text-align:center}
.auth h1{font-size:clamp(1.9rem,2.4vw + 1rem,2.8rem)}
.auth .lede{color:var(--ink-2);max-width:40ch}
.auth .en{opacity:0;transform:translateY(32px);animation:enter 1.1s var(--ease) forwards;animation-delay:calc(.1s + var(--i,0) * 110ms)}
.remember{display:flex;gap:10px;align-items:center;font-size:.92rem;font-weight:500;cursor:pointer;min-height:44px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.row .tlink{min-height:40px;font-size:.9rem}
.fine{display:grid;gap:0;color:var(--ink-2);font-size:.92rem}
.fine a{font-weight:600;display:inline-flex;align-items:center;min-height:44px}
#signin{display:grid;gap:14px}
.auth .field .msg{display:none;color:#b42318;font-size:.84rem;font-weight:500}
.auth .state:target{display:grid;gap:14px}
.auth:has(.state:target) #signin{display:none}
.auth:has(#reset:target) #signin{display:none}
.auth:has(#reset-sent:target) #signin{display:none}
.auth .state .form-shell{animation:enter .9s var(--ease)}
.done .core{padding:20px 18px;display:grid;gap:8px}
.done p{color:var(--ink-2)}
@media (min-width:640px){.auth .wrap{padding-top:140px}.form-shell .core{padding:28px}}
/* the two lines under the form: one sentence each, the link inline in it (the address never breaks across lines) */
.auth .help{display:grid;gap:2px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:.92rem}
.auth .help p{margin:0}
.auth .help a{font-weight:600;padding:12px 0;display:inline-block}
.auth .help a.mail{white-space:nowrap}