/* Login UI shared by every page (site/auth.js). Colors come from each page's :root tokens. */
.auth{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--slate)}
.auth .tag{white-space:nowrap}
.auth button{font:inherit;font-size:13px;height:32px;padding:0 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
.auth button.primary{border-color:var(--blue);background:var(--blue);color:var(--on-blue);font-weight:600}
.gate{display:grid;gap:10px}
.gate p{margin:0}
dialog.login{border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);padding:24px;max-width:min(420px,calc(100vw - 32px))}
dialog.login::backdrop{background:rgba(23,32,51,.45)}
dialog.login h2{font-size:18px;margin:0 0 8px}
dialog.login p{margin:0 0 14px;font-size:14px;color:var(--slate)}
dialog.login .fine{font-size:12px;margin:14px 0 0}
dialog.login .close{float:right;border:0;background:none;color:var(--slate);font-size:20px;cursor:pointer;line-height:1}
.auth .link{color:var(--blue);text-decoration:none;font-weight:600;white-space:nowrap}
.pw-login{display:grid;gap:8px;margin-top:10px;max-width:420px}
.pw-login .mode{display:flex;gap:4px;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--paper)}
.pw-login .mode button{flex:1;height:32px;border:0;border-radius:7px;background:transparent;color:var(--slate);font:inherit;font-size:14px;cursor:pointer}
.pw-login .mode button[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pw-login input{height:42px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);padding:0 12px;font:inherit;font-size:15px}
.pw-login input:focus{outline:2px solid var(--blue);outline-offset:1px}
.pw-login button[type=submit]{height:42px;border-radius:9px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid var(--blue);background:var(--blue);color:var(--on-blue)}
.pw-login button:disabled{opacity:.6}
.pw-login .forgot{font-size:13px;color:var(--slate);justify-self:start}
.pw-login .note,dialog.login .pw-login .note{font-size:13px;color:var(--slate);margin:0;min-height:0}
.pw-login .note:empty{display:none}
.pw-sent{display:grid;gap:10px;max-width:420px}
.pw-sent h2{font-size:18px;margin:0}
.pw-sent p,dialog.login .pw-sent p{margin:0;font-size:14px;color:var(--slate)}
.pw-sent p b{color:var(--ink);word-break:break-all}
.pw-sent button{height:42px;border-radius:9px;font:inherit;font-size:15px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.pw-sent button.primary{background:var(--blue);border-color:var(--blue);color:var(--on-blue);font-weight:600}
.pw-sent button:disabled{opacity:.6}
.pw-sent .back{border:0;background:none;height:auto;font-size:13px;color:var(--slate);justify-self:start;padding:0;text-decoration:underline}
.pw-sent .note{font-size:13px}
.pw-sent .note:empty{display:none}
.account-menu{position:relative}
.account-menu .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:168px;display:grid;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(23,32,51,.12)}
.account-menu .menu[hidden]{display:none}
.account-menu .menu a,.account-menu .menu button{display:block;width:100%;height:auto;text-align:left;padding:9px 12px;border:0;border-radius:8px;
  background:none;color:var(--ink);font:inherit;font-size:14px;text-decoration:none;cursor:pointer}
.account-menu .menu a:hover,.account-menu .menu button:hover,.account-menu .menu [aria-current]{background:var(--paper)}
.account-menu .menu [aria-current]{color:var(--blue);font-weight:600}
.account-menu .menu [data-logout]{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;color:var(--slate)}