/* Shared one-time-code field.
 *
 * Styled against the consuming app's own tokens where they exist, with literal
 * fallbacks — this library is installed by apps with different design systems
 * (int_lms uses --color-*, prac_com is Bootstrap/Volt), and a rule written
 * against one app's custom properties silently falls back to the wrong colour
 * in the other. Never `var(--bs-*)`: those are Bootstrap's, not any app's palette.
 */

.int-otp-code {
  /* Wide tracking makes six digits readable as six digits rather than as a
   * number. `ch` so it scales with the font rather than fighting it. */
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* Room for the code plus its tracking, and no more: a full-width box invites
   * the eye to expect a sentence. */
  max-width: 12ch;
}

/* The tracking pushes the caret off-centre on an empty field, so the placeholder
 * state gets its own alignment. */
.int-otp-code:placeholder-shown {
  letter-spacing: normal;
}

.int-otp-status {
  min-height: 1.25rem;   /* reserve the line, or "Code detected." shifts the
                          * button under a finger already moving towards it */
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #6c757d);
}

.int-otp-resend[disabled] {
  /* Visibly waiting, not visibly broken: the countdown in the label says why. */
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .int-otp-code {
    transition: border-color 120ms ease-in-out;
  }
}