/* Made by the components tool from code-check 1.4. 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.

   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-high: 58px;
  --nsys-code-step: calc(var(--nsys-code-box) + var(--nsys-code-gap));
  display: grid;
  gap: 8px;
  justify-items: start;
}
.nsys-code .nsys-label { margin-bottom: 0; }
.nsys-code__boxes {
  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-box); height: var(--nsys-code-high);
  /* 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-box)); height: 100%;
  padding: 0 0 0 calc((var(--nsys-code-box) - 1ch) / 2);
  background: transparent; color: var(--text); caret-color: transparent;
  font: 700 26px/var(--nsys-code-high) 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-high: 50px; }
  .nsys-code .nsys-code__boxes > input.nsys-code__input { font-size: 22px; }
}