/* Forgot password: on top of login.css (same screen on phones, same narrow card on desktop). */
.login.forgot .login-form + .login-form { margin-top: var(--space-4); }
.login.forgot form:first-child { margin: 0; }
.login.forgot .login-back { cursor: pointer; }
.form-notice { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-tint); color: var(--color-primary-dark); }
.login.forgot .terms { display: flex; align-items: flex-start; gap: var(--space-2); }
.login.forgot .terms input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-card) center / 14px no-repeat; cursor: pointer; }
.login.forgot .terms input:checked { border-color: var(--color-primary); background-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.login.forgot .terms input.is-invalid { border-color: var(--color-danger); }
.login.forgot .terms label { flex: 1; }
.login.forgot .terms a { color: var(--color-primary); text-decoration: underline; }

@media (min-width: 1041px) {
  /* The same narrow white card as the Login page (login.css); only the back button stays, inside the card. */
  .login.forgot .login-back { display: flex; margin-bottom: var(--space-3); }
  .login.forgot .login-head h1 { margin-top: 0; }
  .login.forgot .terms a { text-decoration: underline; }
}