/* Account modal: sign up, log in, email code, password reset. Components live in components.css. */

html.auth-open,
html.auth-open body { overflow: hidden; }

/* Segmented Sign up / Log in switch. */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin-bottom: 20px; background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--radius-pill); }
.auth-tabs [role="tab"] { min-height: 34px; padding: 6px 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-secondary); font-size: 13px; font-weight: 600; }
.auth-tabs [role="tab"]:hover { color: var(--ink); }
.auth-tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.auth-sso { display: grid; gap: 0; }
.auth-sso:empty { display: none; }
.auth-sso__button { background: var(--surface); }
.auth-sso__button .icon { width: 18px; height: 18px; }

.auth-or { position: relative; margin: 16px 0; text-align: center; }
.auth-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--stroke); }
.auth-or span { position: relative; padding: 0 10px; background: var(--surface); color: var(--ink-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

.auth-form { display: grid; gap: 14px; }
.auth-form .field__hint { line-height: 1.5; }
.auth-form .form-error { margin: 0; }
.auth-form .btn[type="submit"] { margin-top: 2px; }
.auth-form .fineprint { margin-top: -4px; line-height: 1.5; }

.auth-consent { text-align: center; }
.auth-consent a { text-decoration: underline; color: var(--ink-secondary); }
.auth-consent a:hover { color: var(--ink); }
.auth-sso .auth-consent { margin-top: 8px; }

/* Six digits, large and easy to copy from a mail client. */
.auth-code {
  font: 600 22px/1.2 var(--font-chord);
  letter-spacing: .38em;
  text-align: center;
  padding-left: .38em;
}

.auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.auth-link { padding: 0; border: 0; background: transparent; color: var(--accent-strong); font-size: 13px; font-weight: 500; text-align: left; }
.auth-link:hover { color: var(--accent-hover); text-decoration: underline; }
.auth-link:disabled { color: var(--ink-tertiary); text-decoration: none; cursor: default; }
.field .auth-link { justify-self: start; }

.auth-note { margin: 0; color: var(--positive-strong); font-size: 13px; }
.auth-note:empty { display: none; }

.modal__panel .modal__reason strong { color: var(--ink); font-weight: 600; }

@media (max-width: 420px) {
  .modal { padding: 12px; }
  .modal__panel { padding: 20px; border-radius: var(--radius-md); }
  .modal__title { font-size: 19px; }
}