/*
 * Identity engine — component styles.
 *
 * Import in consuming app layouts:
 *
 *   stylesheet_link_tag "identity/components"
 */

/* ============================================================
   Identity::OtpInput — six-digit code input with countdown.
   ============================================================ */

.identity-otp-input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  align-items: center;
}

.identity-otp-input__grid {
  display: flex;
  gap: var(--spacing-4);
  justify-content: space-between;
}

.identity-otp-input__digit {
  width: 68px;
  height: 62px;
  background-color: var(--color-background-inverse-lightest);
  border: 1px solid var(--color-border-neutral-light);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: var(--font-size-24);
  font-family: ui-monospace, monospace;
  color: var(--color-text-neutral-dark);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.identity-otp-input__digit:focus {
  outline: none;
  border-color: var(--color-border-brand-secondary);
  box-shadow: 0 0 0 3px var(--color-border-brand-tertiary);
}

/* small secondary caption — token-bound here so it needs no ui/text utility link. */
.identity-otp-input__countdown {
  font-family: var(--font-family-paragraph), sans-serif;
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  font-weight: 400;
  color: var(--color-text-neutral-secondary);
}

.identity-otp-input__timer {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-brand-secondary);
}