/* Auth and account pages (login, register, forgot-password, the reset flow, unsubscribe): the
   rules only they use. Linked from views/partials/auth-head.ejs after
   assets/css/site.css, which holds the page base they share with the homepage. Light only. The 404 and
   the legal pages load it through that shared head without using its rules. */

/* Toasts built by showToast() in assets/js/authUi.js; keep 180ms in sync with its removal timer. */
@keyframes gmd-toast-in  { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gmd-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px) scale(0.98); } }
.animate-slide-in  { animation: gmd-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.animate-slide-out { animation: gmd-toast-out 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Login 2FA step: segmented OTP cells built by assets/js/login.js
   (vanilla port of frontend/islands/Settings/components/OtpInput.tsx). */
#twofa-otp-cells { display: flex; gap: 0.5rem; width: 100%; justify-content: center; }
/* The id selector outranks Tailwind's .hidden, so restate it for the recovery-mode toggle. */
#twofa-otp-cells.hidden { display: none; }
.otp-cell {
  flex: 1 1 0; min-width: 0; max-width: 3rem; height: 3rem;
  border: 1px solid #D4D4D8; border-radius: 0.5rem; background: #FFFFFF;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.125rem; color: #18181b;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 200ms, box-shadow 200ms;
}
.otp-cell.otp-active { border-color: #5B47E5; box-shadow: 0 0 0 1px #5B47E5; }
.otp-cell.otp-error  { border-color: #EF4444; }
.otp-caret { width: 1px; height: 1.25rem; background: #18181b; animation: gmd-caret-blink 1s steps(1, start) infinite; }
@keyframes gmd-caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes gmd-digit-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.otp-digit-pop { animation: gmd-digit-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* The real input sits invisibly over the cells so native paste and one-time-code autofill work. */
#twofa-code.otp-hidden-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: default; border: 0; padding: 0; background: transparent;
  font-size: 16px; /* keep >=16px so focusing the cells never triggers iOS zoom */
}

@media (prefers-reduced-motion: reduce) {
  .animate-slide-in, .animate-slide-out, .otp-caret, .otp-digit-pop { animation: none !important; }
  .otp-caret { opacity: 1; }
}