/* Account-creation supplementary styles. Tailwind handles the bulk; this
   file only adds rules Tailwind utilities can't express cleanly (focus
   rings, smooth-scroll, custom form animations). Keep it small. */

html { scroll-behavior: smooth; }

/* Make all interactive controls have a visible, branded focus ring —
   Tailwind's defaults are fine but inconsistent across browsers. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #F26422;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Hide scrollbar on horizontal chip scrollers (motivation step) without
   losing scroll behavior — used together with `overflow-x-auto`. */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* OTP-style 6-digit input cells. Used on the verify step. */
.otp-cell {
  width: 100%;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  background: white;
  color: #0F1720;
  caret-color: #F26422;
}
.otp-cell:focus {
  outline: none;
  border-color: #F26422;
}
.otp-cell:disabled {
  background: #F8FAFC;
  color: #94A3B8;
}