/* ORVO CODE INPUT — the one 5-box code entry, for anywhere a numeric code (an ORVO
   Authenticator code, a PIN, an OTP) is typed by hand. Built 2026-09-22, ROUND 19 S19-3,
   for my/till-receipt.html's card-off gate (his "much sexier" than the single 5-char text
   field my/login.html and this gate both wore). THE THREE GREPS found no shipping 5-box
   entry anywhere on the platform: `.code-input` (my.css) is a single text box, `.code-digits`
   (auth/css/auth.css) is a READ-ONLY display of the authenticator app's own rotating code,
   and `.pin-box` (shared/css/orvo-wizard.css) is unused dead CSS nothing has ever rendered.
   This file is new rather than a fourth thing — see shared/js/orvo-code-input.js for the
   behaviour. Values follow the house dark-theme number-box treatment (the till keypad,
   the unused .pin-box) rather than inventing a new one.

   EVERY RULE IS SCOPED `.oci-row .oci-box` AND NOT BARE `.oci-box` — measured, not assumed:
   the host mounts these boxes inside the house `.field` wrapper (for its margin/spacing), and
   my.css's `.field input, .field select, .field textarea` (width/padding/background/font-size)
   and `.field input:focus` (border/glow) are BOTH one class + one element = higher specificity
   than a bare single-class `.oci-box` rule, so a bare rule here would lose the cascade and the
   boxes would render at the wrong size with the wrong type. `.oci-row .oci-box` is two classes
   with no element, which outranks both at the SPECIFICITY-B level regardless of source order.
   Usage: OrvoCodeInput.mount(el, opts) fills `el` with this markup and wires it.
   (c) 2026 ORVO Software -- orvopos.com */

.oci-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.oci-row .oci-box {
    box-sizing: border-box;
    width: 52px;
    height: 60px;
    padding: 0;
    background: #1a1a1a;
    border: 2px solid #333333;
    border-radius: 10px;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    outline: none;
    -webkit-text-security: none;
    transition: border-color .15s, box-shadow .15s;
}

.oci-row .oci-box.is-filled { border-color: #444444; }

.oci-row .oci-box:focus {
    border-color: #188796;
    box-shadow: 0 0 0 3px rgba(24, 135, 150, 0.18);
}

.oci-row .oci-box:hover:not(:focus) { border-color: #444444; }

.oci-row .oci-box.is-error {
    border-color: #B52B2B;
    animation: ociShake .3s;
}

@keyframes ociShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

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

@media (max-width: 400px) {
    .oci-row { gap: 8px; }
    .oci-row .oci-box { width: 44px; height: 52px; font-size: 22px; }
}