/* codefield — поле для кода из письма: по цифре в каждой ячейке.

   Отдельные ячейки, а не одно поле: так видно, сколько цифр ждут ввода,
   и вставленный из письма код раскладывается по ним наглядно.

   Ширина и высота заданы отдельно: ячейка вытянута по вертикали —
   так ряд из шести цифр занимает меньше места и целиком помещается
   в окне входа. Размеры в переменных, поэтому пропорцию легко
   поменять: --cf-w ширина, --cf-h высота, --cf-gap промежуток. */

.codefield {
    --cf-w: 38px;
    --cf-h: 48px;
    --cf-gap: 8px;

    display: flex;
    gap: var(--cf-gap);
    /* Ширина по содержимому, а не по родителю: ряд ячеек сам знает,
       сколько ему нужно места. Своего места по краям поле не просит —
       отступы задаёт тот, кто его вставил. */
    width: max-content;
    margin: 0 auto;
}

.codefield__cell {
    width: var(--cf-w);
    height: var(--cf-h);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    /* В покое обводка — разведённый акцент, как у поля ввода.
       В фокусе акцент льётся целиком. */
    --ring-color: var(--color-border);
    /* Утопленное поле: тёмный, разбавленный панелью. */
    --fill: var(--color-surface-inset);

    background: linear-gradient(var(--fill), var(--fill)) padding-box,
                linear-gradient(var(--ring-color), var(--ring-color)) border-box;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    /* Каретку скрываем: в одной цифре она не нужна, а на узкой ячейке
       сбивает с толку. Выделение оставляем — иначе не видно, что
       ячейка именно выбрана. */
    caret-color: transparent;
    transition: border-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

/* Поле в фокусе обведено акцентом целиком: видно, куда попадёт цифра.
   Заливка при этом не меняется — фон ячейки одинаков в покое и в фокусе
   и равен фону строки ввода. Состояние читается обводкой, а не подложкой:
   подложка сделала бы ячейку светлее соседнего поля. */
.codefield__cell:focus {
    outline: none;
    --ring-color: var(--color-accent);
}

/* Ячейки, в которые вписали больше одной цифры, не бывает: лишние
   уходят в следующую. Но если браузер всё же вставил две, покажем
   это как ошибку — обводкой акцента на всю силу. */
.codefield__cell.is-full {
    --ring-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
    .codefield__cell {
        transition: none;
    }
}

.codefield.is-error-feedback { animation:codefield-error-nudge 450ms ease-out; }
.codefield.is-error-feedback .codefield__cell { --ring-color:var(--color-danger); }
@keyframes codefield-error-nudge { 0%,100% {transform:translateX(0);} 20% {transform:translateX(6px);} 45% {transform:translateX(1px);} 65% {transform:translateX(3px);} }
@media(prefers-reduced-motion:reduce) { .codefield.is-error-feedback { animation:none; } }

.codefield.is-code-pending .codefield__cell {
    background:linear-gradient(var(--fill),var(--fill)) padding-box,
        linear-gradient(110deg,var(--ring-color) 20%,var(--color-shine) 45%,var(--color-ink) 50%,var(--ring-color) 75%) border-box;
    background-size:100% 100%,250% 100%;
    animation:codefield-pending-shine 1.2s linear infinite;
}
@keyframes codefield-pending-shine { from {background-position:0 0,180% 0;} to {background-position:0 0,-80% 0;} }
@media(prefers-reduced-motion:reduce) { .codefield.is-code-pending .codefield__cell { animation:none; } }