/* Sechsstelliger Code als sechs Kaestchen.
   Technisch bleibt es EIN Eingabefeld: Einfuegen, Autofill aus Passwortmanager
   oder SMS, Loeschen und Vorlesen verhalten sich wie bisher, und kein Skript
   muss sechs Werte zusammensetzen. Die Kaestchen liegen nur als Zeichnung
   dahinter; die Ziffern werden ueber Laufweite auf sie verteilt.

   Die Hoehe kommt weiterhin vom Eingabefeld selbst (`.field input` bzw.
   `.step-up-dialog input`). Deshalb verschiebt sich auf den Auth-Seiten
   nichts: die Zeile ist genauso hoch wie das fruehere einzeilige Feld.

   Eigenes Stylesheet, weil der Step-up-Dialog auch auf Seiten ohne main.css
   erscheinen kann (step_up.js legt es bei Bedarf selbst an). */
.otp-field {
  display: block;
}

.otp-cells {
  display: none;
}

/* Ohne Container-Einheiten laesst sich die Laufweite nicht an die Breite
   binden. Aeltere Browser behalten dann das gewoehnliche einzeilige Feld. */
@supports (width: 1cqw) {
  .otp-boxes {
    --otp-gap: 10px;
    --otp-cell: calc((100cqw - 5 * var(--otp-gap)) / 6);
    position: relative;
    box-sizing: content-box;
    width: min(100%, 338px);
    /* Rand fuer den Fokusring der Kaestchen; der Aussenabstand nimmt ihn
       wieder zurueck, damit die Zeile exakt so hoch und breit bleibt. */
    padding: 4px;
    margin: -4px;
    overflow: hidden;
    container-type: inline-size;
  }

  .otp-boxes > .otp-cells {
    position: absolute;
    inset: 4px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--otp-gap);
    pointer-events: none;
  }

  .otp-boxes > .otp-cells > i {
    border: 1px solid #d8dfda;
    border-radius: 12px;
    background: #f8faf8;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }

  .otp-boxes:focus-within > .otp-cells > i {
    border-color: var(--accent, #ff875c);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 135, 92, 0.14);
  }

  /* Gesperrtes Feld (PIN-Sperre der Mitmachliste): Kaestchen sichtbar blasser. */
  .otp-boxes:has(> input.otp-input:disabled) > .otp-cells > i {
    opacity: 0.55;
  }

  /* Eine Zelle breiter als die Reihe: nach der sechsten Ziffer steht die
     Schreibmarke auf Platz sieben. Laege der ausserhalb des Feldes, wuerde
     der Browser den Inhalt nach links schieben und die Ziffern aus ihren
     Kaestchen ziehen. Der Ueberstand wird von `.otp-boxes` abgeschnitten. */
  .otp-field.otp-boxes > input.otp-input,
  .otp-field.otp-boxes > input.otp-input:focus {
    position: relative;
    z-index: 1;
    display: block;
    box-sizing: border-box;
    width: calc(100cqw + var(--otp-cell) + var(--otp-gap));
    max-width: none;
    padding: 0 0 0 calc((var(--otp-cell) - 1ch) / 2);
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--text-dark, #173a3b);
    caret-color: var(--accent-strong, #c4552d);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: calc(var(--otp-cell) + var(--otp-gap) - 1ch);
    /* Die Laufweite verteilt die Ziffern von links; zentrierte Formulare
       (Mitmachliste) duerfen das nicht verschieben. */
    text-align: left;
  }

  /* Autofill faerbt das Feld sonst deckend ein und verdeckt die Kaestchen. */
  .otp-boxes > input.otp-input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-dark, #173a3b);
    transition: background-color 100000s ease-out;
  }
}