/* login: "log in with the bot" buttons and the waiting page (site/login.html, site/bot_login.html) */
.auth-bots { display: grid; gap: 10px; margin: 18px 0 6px; }
.auth-bots form { margin: 0; }
.auth-bot { justify-content: center; gap: 10px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; font-size: 13px; color: var(--text-faint); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: rgb(var(--fg) / .1); }

.auth-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.auth-wait h1 { margin: 0; }
.auth-wait p { margin: 0; }
.auth-ring { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgb(var(--fg) / .05); }
.auth-ring .brand-mark { width: 34px; height: 34px; }
.auth-ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent;
  border-top-color: var(--accent); animation: spin 1.1s linear infinite; }
.auth-code { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 14px; border-radius: var(--r-md); background: rgb(var(--fg) / .04); }
.auth-code strong { font-size: 28px; letter-spacing: .3em; color: var(--text-strong); }