/* Operian OS — Sperrbildschirm: KONTO SUCHEN statt die Reihe durchzuwischen.
 *
 * ═══ DER BEFUND ═══
 *
 * lock-konten.css hat die Konten-Reihe zentriert und wischbar gemacht — damit ist
 * jedes Konto ERREICHBAR. Erreichbar ist aber nicht auffindbar: ein Betrieb mit
 * dreissig Mitarbeitenden zeigt auf 1512 px neun Kacheln, auf dem Telefon zwei, und
 * wer sich anmelden will, schiebt eine waagerechte Reihe durch, bis sein Gesicht
 * vorbeikommt. Das ist jeden Morgen dieselbe Arbeit, und sie wächst mit dem Betrieb.
 *
 * Die Antwort ist die, die jedes Betriebssystem an dieser Stelle gibt: ein Feld,
 * in das man tippt. Zwei Buchstaben genügen, und in der Reihe steht ein Konto.
 *
 * ═══ SIE ERSCHEINT NUR, WENN SIE GEBRAUCHT WIRD ═══
 *
 * Entschieden wird an der GEMESSENEN Fläche (`scrollWidth > clientWidth`, siehe
 * assets/lock-suche.js), nie an einer Kontozahl und nie am Gerätenamen: dieselben
 * fünf Konten passen auf dem Schreibtisch nebeneinander und auf dem Telefon nicht.
 * Ein kleiner Betrieb mit zwei Konten sieht also weiterhin genau den Schirm von
 * vorher — ein Suchfeld über zwei Kacheln wäre Bedienung ohne Anlass.
 *
 * ═══ FAIL-CLOSED: EIN VERSTECKTES KONTO IST EIN MENSCH, DER NICHT REINKOMMT ═══
 *
 * Das Ausblenden hängt an ZWEI Bedingungen zugleich: am Merker der Kachel UND daran,
 * dass die Suchfläche wirklich im Dokument steht (`:has()`). Verschwindet die Fläche —
 * React baut den Schirm neu, das Skript lädt nicht, ein Fehler unterbricht es —, greift
 * die Regel nicht mehr und ALLE Konten stehen wieder da. Ein Merker, der seine Fläche
 * überlebt, wäre sonst genau der Fehler, den niemand mehr rückgängig machen kann:
 * versteckte Konten ohne Feld, in das man tippen könnte.
 *
 * Ohne `:has()` verwirft der Browser die Regel vollständig — dann filtert die Suche
 * nichts und die Reihe ist die von vorher. Kein halber Zustand.
 *
 * Aus demselben Grund steht hier KEIN `justify-content` und KEIN `overflow` auf der
 * Reihe: die gehören lock-konten.css, und zwei Eigentümer einer Zusage laufen
 * auseinander (lock-konten-zentriert.test.js §4 hält das für die anderen Schichten).
 *
 * ═══ DIE TÖNE SIND GERECHNET, GEGEN DEN KOMPONIERTEN PIXEL ═══
 *
 * Der Grund des Sperrbildschirms ist exakt `#0a0a10` (`.desktop-bg` im Bundle-CSS) —
 * er trägt KEINE Motiv-Ebene, der Lock-Root führt kein `wallpaper-<id>`. Gerechnet
 * ist deshalb gegen diesen einen Wert:
 *
 *   Platzhalter   rgba(255,255,255,.55) auf der Pille (7 % Weiss)   → 5.95:1
 *   Standzeile    rgba(255,255,255,.62) auf dem Grund              → 7.74:1
 *   Leermeldung   rgba(255,255,255,.80) auf dem Grund              → 12.3:1
 *   Kante         rgba(255,255,255,.38) gegen Grund / Pille        → 3.50 / 3.04:1
 *
 * Die Kante ist der Fall, den man sonst zu leise setzt: der Nachbarknopf „Betrieb
 * wechseln" trägt .16 und hält damit 1.6:1. An IHM hängt keine Aussage, er trägt sein
 * eigenes Wort; die Kante eines Eingabefeldes ist nach WCAG 1.4.11 die Grenze des
 * Bedienelements und braucht 3:1 gegen BEIDE Nachbarn — deshalb .38 und nicht .16.
 * `lock-suche.test.js` §5 rechnet alle vier Werte selbst aus, statt den Zahlen in
 * diesem Kommentar zu glauben.
 *
 * Gepinnt durch mockups/tests/lock-suche.test.js.
 */

/* ── Die Fläche ───────────────────────────────────────────────────────────────── */

/* Das Feld steht am BODEN, direkt über „Betrieb wechseln" (Vorgabe Betreiber) —
   nicht über der Konten-Reihe. Zwei Gründe, und beide gelten auf jeder Breite: auf
   dem Telefon liegt der Daumen unten, und die Reihe bleibt dort stehen, wo sie
   gelernt ist. Es ist dieselbe Bauart wie der Knopf darunter (body-fixed, Bodenmitte,
   safe-area-bewusst) — zwei verschiedene Verfahren für zwei benachbarte Flächen
   derselben Leiste wären eine Sprache zu viel.

   `column-reverse` ist dabei kein Schmuck: die Standzeile wächst nach OBEN, sonst
   schöbe sie sich bei jedem Tippen zwischen Feld und Knopf und der Abstand zu
   „Betrieb wechseln" wäre mal 18 px und mal 0. Die Reihenfolge im MARKUP bleibt
   Feld → Standzeile, also die, in der Vorlesehilfen sie brauchen. */
.vilo-lock-suche {
  position: fixed;
  left: 50%;
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 66px));
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  width: min(380px, calc(100vw - 40px));
  margin: 0;
}

.vilo-lock-suche__feld {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.vilo-lock-suche__lupe {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: rgba(255, 255, 255, .55);
}

.vilo-lock-suche input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: 500 15px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.vilo-lock-suche input::placeholder {
  color: rgba(255, 255, 255, .55);
}

/* Chromiums eigenes Löschkreuz ist ein dunkles Zeichen und auf dieser Fläche
   unsichtbar — die Fläche bringt ihr eigenes mit (44 px, auch für den Daumen). */
.vilo-lock-suche input::-webkit-search-cancel-button,
.vilo-lock-suche input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.vilo-lock-suche__leeren {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .80);
  cursor: pointer;
  font: 500 15px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.vilo-lock-suche__leeren:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.vilo-lock-suche__leeren[hidden] {
  display: none;
}

/* Ein Fokusring gehört an ein BEDIENELEMENT — hier an die Pille, weil das Feld
   darin keine eigene Kante hat (die Pille IST seine sichtbare Grenze). */
.vilo-lock-suche__feld:focus-within {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
}

.vilo-lock-suche__leeren:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
}

/* Die Standzeile steht NUR, wenn wirklich gefiltert wird. Ein „30 von 30" über einer
   vollständigen Reihe ist eine Meldung, die nach drei Tagen niemand mehr liest —
   und `:empty` nimmt ihr dann auch den Platz, sonst rückte die Reihe grundlos nach
   unten. Als `aria-live`-Fläche bleibt das Element trotzdem im Dokument stehen:
   eine Fläche, die erst beim Tippen ENTSTEHT, sagt Vorlesehilfen nichts an. */
.vilo-lock-suche__stand {
  margin: 0;
  min-height: 0;
  color: rgba(255, 255, 255, .62);
  font: 500 13px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  text-align: center;
}

.vilo-lock-suche__stand:empty {
  display: none;
}

.vilo-lock-suche__stand[data-leer="1"] {
  color: rgba(255, 255, 255, .80);
}

/* ── Das Filtern selbst: zwei Bedingungen, nie eine ──────────────────────────── */

html:has(> body > .vilo-lock-suche) .desktop-bg.justify-center .flex.gap-8 > button[data-vilo-lock-treffer="0"] {
  display: none !important;
}

/* ── Das Telefon reserviert den Platz, den diese Fläche wirklich braucht ─────────
 *
 * mobile-shell.css M2 hält unten `max(88px, safe+80px)` frei — genau die Höhe des
 * fixen „Betrieb wechseln". Eine zweite fixe Fläche darüber braucht ihren eigenen
 * Anteil: der Wrapper ist dort senkrecht ZENTRIERT (`min-height:100%` +
 * `justify-content:center`), und ein Polster, das die zweite Fläche nicht kennt,
 * schiebt die Konten-Reihe unter das Suchfeld — auf einem kurzen Telefon (375 × 667)
 * ist das der Normalfall, nicht die Ausnahme.
 *
 * Reserviert wird deshalb NUR, solange die Fläche wirklich steht (`:has()`, dieselbe
 * Bedingung wie beim Filtern) — in der PIN-Ansicht gibt es sie nicht, und ein
 * dauerhaft höherer Boden schöbe dort das Tastenfeld grundlos nach oben. Die
 * Medienbedingung ist WORTGLEICH die von M2: liefen die beiden auseinander, gäbe es
 * einen Bereich dazwischen mit Feld und ohne Reservierung.
 *
 * Die Zahl ist gemessen, nicht geschätzt: Feld 48 + Lücke 8 + Standzeile 17 = 73,
 * darüber der Abstand zum Knopf, darunter dessen eigene 88 → 176. */
@media (max-width: 600px), (max-height: 500px) and (max-width: 932px) {
  html:has(> body > .vilo-lock-suche) .desktop-bg.justify-center {
    padding-bottom: max(176px, calc(env(safe-area-inset-bottom) + 168px));
  }
}