/* OTP input -6-slot verification code.
 * Paired with static/ui/js/auth/otp-input.js (focus-jump, paste,
 * backspace nav, hidden-input sync).
 *
 *   <div class="otp-input{% if error %} is-invalid{% endif %}"
 *        data-otp-input data-otp-target="#id_code">
 *     <input class="otp-input-slot" inputmode="numeric" maxlength="1"
 *            autocomplete="one-time-code" data-otp-input-slot>
 *     ... (6 total)
 *   </div>
 *   <input type="hidden" id="id_code" name="code">
 */

.otp-input {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}

.otp-input-slot {
  width: 100%;
  height: 52px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  font-family: var(--font);
  font-size: var(--font-size-stat);
  font-weight: 700;
  box-sizing: border-box;
  outline: 0;
  transition: border-color var(--duration-base) var(--ease-standard);
}

.otp-input-slot.is-filled {
  border-color: var(--primary);
}

.otp-input-slot:focus,
.otp-input-slot:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
}

.otp-input-slot:disabled {
  background: var(--surface-soft);
  cursor: not-allowed;
}

.otp-input.is-invalid .otp-input-slot {
  border-color: var(--error);
  color: var(--error);
}