/* Rare UI OTP interaction, using the existing LinguaForge neutral surfaces. */
.otp-input-row{position:relative;display:flex;gap:12px;justify-content:flex-start;margin:0;max-width:100%;min-width:0}
.otp-group{display:flex;gap:4px;min-width:0}
.otp-cell{position:relative;flex:0 0 44px;width:44px;height:48px;overflow:hidden;border-radius:8px}
.otp-cell input{width:100%;height:100%;min-height:44px;padding:0;border:1px solid #bdbdbd;background:var(--fog);border-radius:8px;text-align:center;font-size:18px;color:transparent;caret-color:transparent;outline-offset:-2px;transition:border-color .2s,background .2s}
.otp-cell input:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;background:white}
.otp-cell input::selection{background:transparent;color:transparent}
.otp-char{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-size:19px;font-weight:600;pointer-events:none}
.otp-char-old{z-index:1}.otp-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.otp-ring rect{fill:none;stroke:#34a35c;stroke-width:2;stroke-dasharray:180;stroke-dashoffset:180}
.otp-caret{position:absolute;left:0;top:0;width:2px;height:20px;border-radius:2px;background:var(--ink);pointer-events:none;transition:transform .22s cubic-bezier(.2,.8,.2,1);animation:otp-blink 1.1s step-end infinite}
.otp-input-row[data-status=error]{animation:otp-shake .32s ease-out}.otp-input-row[data-status=error] input{border-color:#b7352b;box-shadow:inset 0 0 0 1px #b7352b}
.otp-input-row[data-status=success] input{opacity:1;background:var(--fog)}
.otp-input-row[data-status=success] .otp-ring{opacity:1}.otp-input-row[data-status=success] .otp-ring rect{animation:otp-success .45s ease-out calc(.15s + var(--slot-index)*.03s) both}
@keyframes otp-blink{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes otp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}@keyframes otp-success{to{stroke-dashoffset:0}}
@media(max-width:520px){.otp-input-row{flex-direction:column;align-items:flex-start;gap:10px}.otp-cell{width:48px;flex-basis:48px}.otp-group{gap:8px}}
@media(prefers-reduced-motion:reduce){.otp-input-row[data-status=error],.otp-caret{animation:none}.otp-caret{transition:none}.otp-input-row[data-status=success] .otp-ring rect{animation:none;stroke-dashoffset:0}}

/* One visibility control: beside cells on desktop, beside the label on phones. */
.code-access{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"label label" "cells visibility";column-gap:12px;row-gap:10px;align-items:center;margin-bottom:6px}
.code-access .code-label{grid-area:label}
.code-access .otp-input-row{grid-area:cells;justify-self:start}
.code-access .code-visibility{grid-area:visibility;width:44px;height:44px;min-height:44px;justify-self:end}
@media(max-width:600px){.code-access{grid-template-areas:"label visibility" "cells cells";row-gap:10px}}