/* ═══════════════════════════════════════════════════════════════════════════
   CAMPO CODICE — NON MODIFICARE
   Fa parte di uicore/core: al prossimo riallineamento questo file viene
   sovrascritto.
   ═══════════════════════════════════════════════════════════════════════════

   Le caselle per un codice a più cifre: verifica in due passaggi, conferma
   via email, attivazione dell'autenticatore.

   Un campo di testo unico funzionerebbe, ma le caselle separate dicono
   quante cifre servono senza doverlo scrivere, e mostrano a colpo d'occhio
   a che punto si è.
   ═══════════════════════════════════════════════════════════════════════════ */

.ui-code {
    display: flex;
    gap: var(--ui-space-2);
    justify-content: center;
}

.ui-code-box {
    width: 48px;
    height: 58px;
    padding: 0;
    text-align: center;
    font-family: var(--ui-font-display);
    font-size: var(--ui-text-xl);
    font-weight: var(--ui-weight-bold);
    /* Cifre a larghezza fissa: senza, un 1 e un 8 spostano il centro. */
    font-variant-numeric: tabular-nums;
    color: var(--ui-ink);
    background: var(--ui-panel);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ui-radius-sm);
    transition:
        border-color var(--ui-duration-fast) var(--ui-ease),
        box-shadow var(--ui-duration-fast) var(--ui-ease),
        transform var(--ui-duration-fast) var(--ui-ease-spring);
}
.ui-code-box:focus {
    outline: none;
    border-color: color-mix(in oklab, var(--ui-brand) 60%, transparent);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
    transform: translateY(-1px);
}
.ui-code-box:disabled { opacity: .55; }

/* Casella piena: il bordo si accende, così si vede quante ne mancano. */
.ui-code-box.is-filled {
    border-color: color-mix(in oklab, var(--ui-brand) 45%, transparent);
}

/* Codice rifiutato: le caselle scattano una volta e si colorano.
   Lo scatto è breve — un'animazione lunga sembra un guasto, non un "no". */
.ui-code.is-error .ui-code-box {
    border-color: var(--ui-danger);
    animation: uiCodeShake 320ms var(--ui-ease);
}
@keyframes uiCodeShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .ui-code.is-error .ui-code-box { animation: none; }
}

/* Su schermi stretti sei caselle da 48px non ci stanno: si restringono
   invece di andare a capo, che spezzerebbe il codice su due righe. */
@media (max-width: 400px) {
    .ui-code { gap: var(--ui-space-1); }
    .ui-code-box { width: 44px; height: 54px; font-size: var(--ui-text-lg); }
}