/*
 * FM-18 OTP / code input — app/components/ui/otp_input_component.rb
 *
 * Boxes reuse `.fm-control` from forms.css for the base shell (background,
 * transition, focus ring) — this file only adds the square sizing,
 * centred large digit text, and box gap. Token vars only — enforced by
 * test/lint/css_token_lint_test.rb.
 *
 * Radius: --radius-md (16px), not the signature --radius-lg (24px). At a
 * 44px square, --radius-lg reads almost circular on the corners — too
 * playful for a code-entry box — while --radius-md keeps a clearly
 * rounded-square shape that still matches the app's soft-corner language.
 */

.ui-otp-input__boxes {
  display: flex;
  gap: var(--space-2);
}

.ui-otp-input__box {
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 500;
  font-variant-numeric: var(--numeric-tabular);
}

.ui-otp-input.is-error .ui-otp-input__box {
  border: 1.5px solid var(--color-danger-strong);
  color: var(--color-danger-ink);
}