/* =========================================================================
   code.css - the six boxes.

   Lifted out of `login.css` when `/security` grew a second use of them. Two pages ask for
   six digits now: signing in, and confirming an authenticator app. The markup and the
   keyboard behaviour were already the same in both; only the stylesheet was in a file one
   of them could not load, and `login.css` also carries the hero, the video and the card,
   none of which belong on a settings page.

   It depends on `--ink` and `--ease`, which both `login.css` and `dashboard.css` define, so
   it sits under either.
   ========================================================================= */

/* ==========================================================================
   THE SIX BOXES

   Sized so all six plus their gaps fit the card at its narrowest without the
   row ever scrolling: `1fr` each rather than a fixed width, so the boxes
   shrink together instead of the last one falling off.

   `tabular-nums` and centred, because six digits in a proportional face sit
   visibly off-centre from each other - a 1 and an 8 in adjacent boxes read as
   misaligned, and a row of boxes is the one place that is obvious.
   ========================================================================== */
.code{
  display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px;
}
.code__box{
  width:100%; height:56px; padding:0;
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
  background:rgba(255,255,255,.045);
  color:var(--ink); text-align:center;
  font-size:20px; font-weight:500; font-variant-numeric:tabular-nums;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
/* A filled box reads as done without shouting. The border does the work; a
   background change would make the row look like a progress bar. */
.code__box:not(:placeholder-shown){ border-color:rgba(255,255,255,.28); }
.code__box:focus{
  outline:none;
  border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.07);
}
/* Same split as the fields above: a pointer gets the quiet treatment, the
   keyboard keeps a real ring. Six small targets make this matter MORE than it
   does on one wide input - losing your place in a row of identical boxes is
   the failure mode of this whole pattern. */
.code__box:focus-visible{
  outline:2px solid rgba(255,255,255,.75); outline-offset:2px;
  border-color:rgba(255,255,255,.55);
}

@media (max-width:380px){
  .code{ gap:6px; }
  .code__box{ height:50px; font-size:18px; }
}