/* ============================================================================================
   Kontor am Tresen — Anordnung der Anmeldung (PIN-Pad und PIN holen), §7.5.
   Nur Anordnung. Alle Werte kommen als Token aus tokens.css.

   Diese Ansichten sind in dieser Runde NICHT verdrahtet — warum, steht im Kopf von
   public/ui/view-anmelden.js. Die Datei liegt schon hier, damit die Runde, die die alte
   Oberflaeche entfernt, nichts mehr gestalten muss.

   DREI MASSE, DIE NICHT VERHANDELBAR SIND (§7.5):
     - Das versteckte Feld ist 16 px gross (.feldschrift) und hat eine Flaeche. Kleiner
       zoomt iOS Safari beim Fokus; ohne Flaeche bekommt es dort keinen Fokus.
     - Tasten >= 60 x 60 px.
     - Ziffern in Plex (.z4 .num), nie in Fraunces.
   ============================================================================================ */

.k-anmelden {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + env(safe-area-inset-top)) var(--pad) calc(20px + env(safe-area-inset-bottom));
}

.k-anmelden::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--paper);
}

.k-anmelden-karte {
  width: 100%;
  max-width: 320px;
  text-align: center;
}

/* §4.2 kennt genau 1 · 2 · 4 · 8 · 14 · 20 · 9999 px. Hier standen 16 px — eine erfundene
   Zahl, und damit derselbe Eckbogen in drei Werten (14 in der Bibliothek, 16 und 12 hier).
   Die Tabelle in §4.2 sagt fuer "Karte, Widget, Symbolkachel": 14 px. Das Logo ist eine
   Kachel. Genau DARUM steht der Bogen jetzt in parts.css und nicht mehr hier: solange eine
   Ansicht ihn selbst setzen darf, erfindet die naechste wieder 16. */
.k-anmelden-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.k-anmelden-karte > h1 {
  padding-top: 8px;
}

.kontor .k-anmelden-karte > .v1 {
  color: var(--ink-3);
}

.k-anmelden-titel {
  padding: 20px 0 8px;
}

.kontor .k-anmelden-satz {
  color: var(--ink-2);
  padding-bottom: 12px;
}

/* §7.5: Fehler als Zeile UEBER der Punktreihe, in --ember-ink. Leer ist die Zeile ohne
   Hoehe — sonst huepfte das Pad beim ersten Fehlversuch nach unten. */
.kontor .k-anmelden-fehler {
  color: var(--ember-ink);
  min-height: 20px;
  padding: 4px 0;
}

.kontor .k-anmelden-fehler:empty {
  min-height: 20px;
}

.k-anmelden-punkte {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 20px;
}

.k-anmelden-punkt {
  width: 12px;
  height: 12px;
  border: 1px solid var(--rule);
  background: transparent;
  transition: background-color var(--t-knopf) var(--ease), border-color var(--t-knopf) var(--ease);
}

.k-anmelden-punkt.k-an {
  background: var(--brass);
  border-color: var(--brass);
}

/* Das versteckte Feld: da, aber unsichtbar. 1 px Flaeche statt display:none, damit iOS ihm
   den Fokus gibt und die Tastatur oeffnet. */
.k-anmelden-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* §7.5: Zifferntastatur 3 x 4. */
.k-anmelden-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Zwei Masse, zwei verschiedene Urteile — beide gehoeren aufgeschrieben:

   border-radius: §4.2 sagt fuer "Knopf, Eingabefeld, Auswahl" 8 px. Eine PIN-Taste ist ein
   Knopf. Die 12 px hier waren erfunden; sie sind weg — und die 8 px stehen jetzt in
   parts.css, wo §11.2 Regel 1 sie haben will.

   min-height 60px BLEIBT und ist KEIN Verstoss, obwohl 60 in keiner Skala steht:
   §7.5 nennt das Mass woertlich — "Zifferntastatur 3 x 4 (Tasten >= 60 x 60 px)" — und
   §4.1 nimmt woertlich genannte Bauteilmasse ausdruecklich von der Abstandsskala aus.
   Zurueckholen liesse es sich auch gar nicht: der groesste Wert der Skala ist 40 px, und
   2 x 28 = 56 px unterschreitet die Zusage aus §7.5. Der Befund A-01 ("§5 kennt kein
   Ziffernfeld") stimmt — nur steht das Mass eben in §7, nicht in §5. */
.k-anmelden-taste {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: background-color var(--t-gedrueckt) var(--ease);
}

.k-anmelden-taste:active {
  background: var(--brass-wash);
}

.kontor .k-anmelden-loeschen {
  color: var(--ink-2);
}

.k-anmelden-ok {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.k-anmelden-ok:disabled {
  opacity: .3;
}

.k-anmelden-holen {
  padding-top: 20px;
}

/* PIN holen: dieselbe Karte, vier Eingaben statt Pad. Linksbuendig, weil Beschriftungen
   ueber Feldern zentriert nicht lesbar sind. */
.k-anmelden-holen-karte {
  max-width: 340px;
}

.k-anmelden-holen-karte .k-eingabe-block {
  text-align: left;
}

.k-anmelden-fuss {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}