/* Sign-in: the account menu under the avatar in the top bar (base.html, when signed in), the
   sign-in and invite pages (rendered without the top bar) and /admin/users. Tokens from
   style.css only. */

/* --- the account menu ----------------------------------------------------------------- */
.account { position: relative; }
.account > summary { list-style: none; cursor: pointer; }
.account > summary::-webkit-details-marker { display: none; }
.account > summary:hover { filter: brightness(1.08); }
.account-menu { position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: 50; min-width: 220px; margin: 0; padding: var(--s1) 0; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); }
.account-menu .account-name { padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s1); font-weight: 600; overflow-wrap: anywhere; }
.account-menu a, .account-menu button { display: block; width: 100%; padding: var(--s2) var(--s4); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: var(--soft); text-decoration: none; }
.account-menu form { margin: 0; }

/* --- the sign-in and invite pages ---------------------------------------------------------- */
.auth { max-width: 420px; margin: var(--s7) auto 0; }
.auth-brand { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); font-weight: 700; }
.auth-brand::before { content: ""; width: 16px; height: 16px; border-radius: var(--r-sm); background: var(--acc); }
.auth h1 { font-size: var(--t-h2); }
.auth-form { display: grid; gap: var(--s2); }
.auth-form label { margin-top: var(--s2); font-weight: 600; }
.auth-form .field { width: 100%; }
.auth-form .field[readonly] { background: var(--soft); color: var(--muted); }
.auth-form .btn { margin-top: var(--s3); }
.auth-help { margin: var(--s4) 0 0; color: var(--muted); }

/* --- /admin/users ------------------------------------------------------------------------- */
.invite-link p { margin: 0 0 var(--s3); }
.invite-copy { display: flex; gap: var(--s2); }
.invite-copy .field { flex: 1 1 auto; min-width: 0; }
.users-invite-fields { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.users-invite-fields .field { flex: 1 1 200px; min-width: 0; }
.users-check { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.user-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.user-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); min-width: 0; }
.user-name { font-weight: 600; }
.user-email { color: var(--muted); overflow-wrap: anywhere; }
.user-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.user-actions form { margin: 0; }

@media (max-width: 700px) {
  .auth { margin-top: var(--s5); }
  .account-menu { right: calc(-1 * var(--s1)); }
}