/* Six-box code entry (packages/ui/otp-input.js), for the website and the phone
   app. Colours come from each app's own variables, with fallbacks, so it suits
   both themes. Movement is switched off for people who ask for reduced motion. */

.otp-source {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  overflow: hidden;
}

.otp {
  --otp-accent: var(--aqua, var(--accent, #3d81f6));
  --otp-ok: #22c55e;
  --otp-bad: #ef4444;
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 14px;
}

.otp-box {
  flex: 0 1 52px;
  width: 52px;
  min-width: 0;
  height: 60px;
  box-sizing: border-box;
  padding: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong, var(--ink, #eef1f6));
  caret-color: var(--otp-accent);
  background: rgba(0, 0, 0, .35);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, transform .15s, background .2s, color .2s;
  animation: otp-in .45s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.otp-box:focus {
  border-color: var(--otp-accent);
  box-shadow: 0 0 0 4px rgba(61, 129, 246, .22);
  transform: translateY(-2px);
}
.otp-box.has {
  border-color: rgba(61, 129, 246, .6);
  background: rgba(61, 129, 246, .08);
  animation: otp-pop .2s ease-out;
}
.otp.busy .otp-box { opacity: .75; }

/* Accepted: every box turns green, one after the other, and a tick draws in. */
.otp.ok .otp-box {
  border-color: var(--otp-ok);
  background: rgba(34, 197, 94, .1);
  color: #bbf7d0;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .16), 0 0 18px rgba(34, 197, 94, .25);
  opacity: 1;
  transition-delay: calc(var(--i, 0) * 50ms);
  animation: otp-pop .3s ease-out both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.otp-tick {
  position: absolute;
  left: 50%; top: 100%;
  width: 30px; height: 30px;
  margin: 10px 0 0 -15px;
  border-radius: 50%;
  background: var(--otp-ok);
  box-shadow: 0 0 20px rgba(34, 197, 94, .55);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s .3s, transform .35s .3s cubic-bezier(.2, 1.6, .4, 1);
  pointer-events: none;
}
.otp-tick svg {
  width: 30px; height: 30px;
  fill: none; stroke: #fff; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  transition: stroke-dashoffset .35s .5s ease-out;
}
.otp.ok .otp-tick { opacity: 1; transform: scale(1); }
.otp.ok .otp-tick svg { stroke-dashoffset: 0; }
.otp.ok { margin-bottom: 52px; transition: margin .3s; }

/* Refused: red, and a shake. */
.otp.bad { animation: otp-shake .45s cubic-bezier(.36, .07, .19, .97); }
.otp.bad .otp-box {
  border-color: var(--otp-bad);
  background: rgba(239, 68, 68, .08);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .14);
}

.otp-msg {
  min-height: 1.3em;
  margin: -4px 0 8px;
  text-align: center;
  font-size: 13px;
  color: #fca5a5;
}

/* The pages these boxes sit on style their own inputs (the welcome page sets
   a smaller font on every input in its card); these win over those. */
.otp > .otp-box {
  height: 60px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
}

@keyframes otp-in {
  from { opacity: 0; transform: translateY(10px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes otp-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes otp-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

@media (max-width: 380px) {
  .otp { gap: 7px; }
  .otp > .otp-box { height: 54px; font-size: 22px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .otp, .otp-box, .otp-tick, .otp-tick svg { animation: none !important; transition: none !important; }
  .otp.ok .otp-tick svg { stroke-dashoffset: 0; }
}