/* =============================================================================
   AUTH PAGES -- login, register, forgot, totp-*. Loaded after each page's
   own CSS (which keeps only its layout) so every auth form shares the
   button and input kinds of components.css:
     submit (login, verify, register, reset)  = primary teal
     secondary links (forgot, register on login, back, pricing) = normal
     errors = magenta on light blue (00b §1)
   ============================================================================= */
:is(.login-container, .register-container, .forgot-container) {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
:is(.login-container, .register-container, .forgot-container) :is(h1, h2, h3) {
  font-size: var(--fs-xl);
  font-weight: 600;
}
:is(.login-container, .register-container, .forgot-container) label { color: var(--muted); }

:is(.login-container, .register-container, .forgot-container) .login-input {
  box-sizing: border-box;
  width: 100%;
  height: 2rem;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--well);
  color: var(--ink);
  font-size: var(--fs-md);
  color-scheme: dark;
}
:is(.login-container, .register-container, .forgot-container) .login-input:focus {
  outline: none;
  border-color: var(--orange);
}

:is(.login-container, .register-container, .forgot-container, body) .button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
:is(.login-container, .register-container, .forgot-container, body) .button:hover {
  background: var(--surface-3);
  border-color: var(--ink);
  color: var(--ink);
}
:is(.login-container, .register-container, .forgot-container) .button:is(.login-button, .register-button, .reset-request-button),
:is(.login-container, .register-container, .forgot-container) button[type="submit"].button {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--on-teal);
  font-weight: 600;
}
:is(.login-container, .register-container, .forgot-container) .button:is(.login-button, .register-button, .reset-request-button):hover,
:is(.login-container, .register-container, .forgot-container) button[type="submit"].button:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--ink);
}
/* On the login page "Register" is a link, not the form's submit. */
.login-container .buttons .button.register-button {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
  font-weight: 400;
}

.error-message, .forgot-status-error, .modal-error {
  justify-content: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--magenta);
  font-weight: 600;
}