/* ==========================================================================
   BookTo — Zahlenschloss und Taster-Steuerung
   ========================================================================== */

/* ── Zahlenschloss ────────────────────────────────────────────────────── */

.lock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.lock__label { font-weight: 700; font-size: 1.125rem; }

.lock__slots { display: flex; gap: var(--space-3); }

.lock__slot {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
}
/* Gefüllt trägt Farbe UND Inhalt: die getippte Ziffer steht drin, damit
   man sehen kann, wo man ist — nicht nur, dass man irgendwo ist. */
.lock__slot.is-filled {
  border: 2px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.lock__next {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
}
.lock__next strong {
  font-size: 1.5rem;
  color: var(--color-primary-deep);
}

/* Vier Felder nebeneinander bei „der Reihe nach", zehn im Zahlenblock.
   `minmax(0, 1fr)` statt `1fr`: ein blankes fr-Gleis wird nie schmaler als
   sein Inhalt — bei grosser Schrift stand der Block sonst ueber dem
   Dialogrand. */
.lock__pad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.lock__pad--ten { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.lock__key {
  min-height: 104px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-hairline);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 2.375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.lock__pad--ten .lock__key { min-height: 88px; font-size: 2rem; }
.lock__key:hover { background: var(--color-primary-bg); }

/* Benutzte Ziffern bleiben lesbar — nur ruhiger. Wegnehmen würde die
   Reihenfolge verwischen, ausgrauen bis zur Unlesbarkeit wäre eine
   Barriere. */
.lock__key.is-used {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
}

/* Zwei gleich breite Knöpfe — keiner ist wichtiger als der andere. */
.lock__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.lock__foot .btn { width: 100%; }

.lock--shake { animation: lock-shake .4s var(--ease); }
@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

/* ── Taster-Steuerung ─────────────────────────────────────────────────── */

.scanbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-min);
}
.scanbar__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-focus);
  color: #fff;
  font-weight: 700;
}
.scanbar__pill svg { width: 20px; height: 20px; }
.scanbar__status { color: var(--color-text-secondary); font-weight: 600; }

/* Legende über der Blätterleiste: was welcher Taster tut. Sie steht da,
   weil niemand sich merken muss, was Leertaste und Enter bedeuten. */
.scanlegend {
  display: flex;
  gap: var(--space-5);
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-min);
  color: var(--color-text-secondary);
}
.scanlegend strong { color: var(--color-text); }

/* Restzeit im Feld bei Ein-Taster-Betrieb: die helle Fläche wächst mit.
   scan.js setzt --scan-progress im 60-ms-Takt von 0 % auf 100 %; bei
   „Bewegung reduzieren" steht sie still bei 50 %. */
.is-scan-item {
  background-image:
    linear-gradient(to right,
      var(--color-focus-fill) var(--scan-progress, 0%),
      transparent var(--scan-progress, 0%));
  /* Schaltflächen blenden ihren Hintergrund über 0,35 s ein (base.css).
     Auf der Füllung wäre das ein Nachhinken statt einer Restzeit —
     der Rahmen wäre weitergesprungen, bevor die Anzeige ankommt. */
  transition-property: border-color, box-shadow, transform;
}