/* Made by the components tool from code-check 1.6. Change it in shared/components/code-check instead. */
/* Code check: boxes drawn over one real field. The typed digits are the field's own
   text, spaced to sit in the boxes, so they show even without scripts, and phones
   can fill the code in by themselves. Load the brand component's theme.css and
   base.css first: every colour and corner comes from them.

   The boxes are 50 by 58 pixels on a computer, 43 wide on a phone and 33 wide on
   a small phone, 8 apart, measured from the client portal's drawings. From 1.6,
   when the field has less room than its boxes need, such as 8 digits on a phone,
   the boxes share the room, and get shorter with smaller digits as they narrow:
   58 high with 26 pixel digits down to 43 wide, and 50 with 22 at 33 wide. With
   nsys-code--fill, they share all the room they're given. Browsers without
   container queries keep the fixed boxes.

   Settings a project can give .nsys-code: --nsys-code-box (the most a box is
   wide), --nsys-code-gap, --nsys-code-high (the boxes' height) and
   --nsys-code-type (the digits' size).

   The field's rules are written to outweigh a project's own rules for text fields,
   such as .app input[type="text"], and set everything those rules usually change,
   so the boxes keep their look on any site. */

.nsys-code {
  --nsys-code-box: 50px;
  --nsys-code-gap: 8px;
  --nsys-code-digits: 6;
  display: grid;
  gap: 8px;
  justify-items: start;
}
/* How many boxes, from entry_html's data-digits, so the boxes can share the room. */
.nsys-code[data-digits="4"] { --nsys-code-digits: 4; }
.nsys-code[data-digits="5"] { --nsys-code-digits: 5; }
.nsys-code[data-digits="7"] { --nsys-code-digits: 7; }
.nsys-code[data-digits="8"] { --nsys-code-digits: 8; }
.nsys-code[data-digits="9"] { --nsys-code-digits: 9; }
.nsys-code[data-digits="10"] { --nsys-code-digits: 10; }
.nsys-code .nsys-label { margin-bottom: 0; }
.nsys-code__boxes {
  /* Each box's width, height and digit size, worked out where they're used. */
  --nsys-code-size: var(--nsys-code-box);
  --nsys-code-tall: var(--nsys-code-high, 58px);
  --nsys-code-digit: var(--nsys-code-type, 26px);
  --nsys-code-step: calc(var(--nsys-code-size) + var(--nsys-code-gap));
  position: relative; display: flex; gap: var(--nsys-code-gap);
  /* Clip, so the browser can't scroll the boxes to show the cursor after the 6th digit.
     Browsers too old for clip use hidden, and code.js puts the boxes back if they scroll. */
  overflow: hidden; overflow: clip;
  border-radius: min(var(--corner), 8px);
}
.nsys-code .nsys-code__box {
  flex: none; box-sizing: border-box; width: var(--nsys-code-size); height: var(--nsys-code-tall);
  /* The quiet text colour, which the brand keeps at 4.5 to 1 or more against the page, so each box's edge stands out. */
  border: 1.5px solid var(--muted); border-radius: min(var(--corner), 8px); background: var(--page);
}
.nsys-code .nsys-code__box--next { border: 2px solid var(--accent-text); }
.nsys-code.nsys-code--error .nsys-code__box { border-color: var(--bad-text); }
.nsys-code .nsys-code__boxes > input.nsys-code__input,
.nsys-code .nsys-code__boxes > input.nsys-code__input:focus {
  display: block; position: absolute; top: 0; left: 0; box-sizing: border-box; margin: 0; border: 0; border-radius: 0; outline: 0;
  box-shadow: none; appearance: none; -webkit-appearance: none; min-height: 0; max-width: none;
  text-align: left; text-indent: 0; text-transform: none; word-spacing: normal; transition: none;
  /* Wider than the boxes, so the last digit's spacing never makes the field scroll. */
  width: calc(100% + 2 * var(--nsys-code-size)); height: 100%;
  padding: 0 0 0 calc((var(--nsys-code-size) - 1ch) / 2);
  background: transparent; color: var(--text); caret-color: transparent;
  font: 700 var(--nsys-code-digit)/var(--nsys-code-tall) ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  letter-spacing: calc(var(--nsys-code-step) - 1ch);
}
.nsys-code__boxes:focus-within { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.nsys-code .nsys-message { justify-self: stretch; }

@media (max-width: 420px) {
  .nsys-code { --nsys-code-box: 43px; }
}
@media (max-width: 360px) {
  .nsys-code { --nsys-code-box: 33px; --nsys-code-gap: 6px; }
  .nsys-code__boxes { --nsys-code-tall: var(--nsys-code-high, 50px); --nsys-code-digit: var(--nsys-code-type, 22px); }
}

/* From 1.6: the boxes share the room when there isn't enough. The frame is as wide as
   the boxes at their most, but no wider than its room, and the boxes, the field's
   spacing and the digits are worked out from the frame's own width. The frame's width
   is set, not taken from the boxes, so it can be measured, and the field still sizes
   to its boxes in a form that sizes to its contents. Height and digits follow the box:
   58 high and 26 pixels down to 43 wide, 50 and 22 at 33 wide, as on small phones. */
@supports (width: 1cqi) {
  /* Both may shrink below the boxes' full width, in a grid or flex row too. */
  .nsys-code { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .nsys-code__boxes {
    min-width: 0;
    container-type: inline-size;
    box-sizing: border-box;
    width: calc(var(--nsys-code-digits) * var(--nsys-code-box) + (var(--nsys-code-digits) - 1) * var(--nsys-code-gap));
    max-width: 100%;
    --nsys-code-size: min(var(--nsys-code-box), calc((100cqi - (var(--nsys-code-digits) - 1) * var(--nsys-code-gap)) / var(--nsys-code-digits)));
    --nsys-code-tall: var(--nsys-code-high, clamp(48px, calc(0.8 * var(--nsys-code-size) + 23.6px), 58px));
    --nsys-code-digit: var(--nsys-code-type, clamp(22px, calc(0.4 * var(--nsys-code-size) + 8.8px), 26px));
  }
  /* nsys-code--fill: the boxes share all the room they're given, as the POS's sign-in draws them. */
  .nsys-code--fill { width: 100%; justify-items: stretch; }
  .nsys-code--fill .nsys-code__boxes { width: 100%; --nsys-code-size: calc((100cqi - (var(--nsys-code-digits) - 1) * var(--nsys-code-gap)) / var(--nsys-code-digits)); }
}