/* Login-Überarbeitung: Lade-Panel mit Kegel-Bowling-Szene
   (docs/spec-20261005-login-bowling-animation.md).
 *
 * Beide Kartenzustände — Formular und Lade-Panel — belegen dieselbe
 * Grid-Zelle: Die Kartenhöhe ist immer max(Formular, Lade-Panel) und springt
 * beim Umschalten nicht. Das inaktive Panel ist über visibility unsichtbar
 * und per inert nicht interaktiv (Felder/Link/Checkbox/Submit bleiben während
 * der Anmeldung versteckt und unfokussierbar). Ohne JavaScript bleibt allein
 * das Formular aktiv. Bewegung steckt ausschließlich in
 * js/loginBowlingScene.js (Attribut-Transforms) — hier gibt es nur Farben,
 * Layout und einen weichen Opacity-Wechsel beim Panel-Tausch. */

/* ── Karten-Panels ──────────────────────────────────────────────────────── */

.app-login-panels {
  display: grid;
}

.app-login-panel {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity 0.18s ease-out;
}

.app-login-panel--loading {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.45rem;

  /* Szenen-Farben (hell) */
  --kb-pin-fill: #fbfbfd;
  --kb-pin-stroke: #c3c5cb;
  --kb-pin-band: rgba(0, 102, 204, 0.3);
  --kb-ball-fill: var(--apple-primary, #0066cc);
  --kb-ball-marker: rgba(255, 255, 255, 0.85);
  --kb-lane: var(--apple-hairline, #d8d8dc);
  --kb-lane-surface: rgba(120, 120, 128, 0.07);
  --kb-shadow: rgba(0, 0, 0, 0.09);
}

.app-login-panels.is-loading .app-login-panel--loading {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.app-login-panels.is-loading .app-login-panel--form {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Lade-Panel: Typografie & Schloss-Statusfläche ──────────────────────── */

.app-login-loading-club {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apple-ink-muted-48, #7a7a7a);
}

.app-login-loading-heading {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--apple-ink, #1d1d1f);
}

.app-login-loading-heading:focus {
  outline: none;
}

.app-login-loading-heading:focus-visible {
  outline: 2px solid var(--apple-primary, #0066cc);
  outline-offset: 4px;
  border-radius: 4px;
}

.app-login-loading-subtitle {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--apple-ink-muted-48, #7a7a7a);
}

.app-login-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--apple-ink-muted-80, #333333);
  background: var(--apple-canvas-parchment, #f5f5f7);
}

html.apple-dark .app-login-lock {
  background: rgba(235, 235, 245, 0.08);
  color: var(--apple-ink-muted-80, #d2d2d7);
}

.app-login-lock-icon {
  display: inline-flex;
  color: var(--apple-primary, #0066cc);
}

html.apple-dark .app-login-lock-icon {
  color: var(--apple-primary-on-dark, #2997ff);
}

/* ── Statuszeile (aria-live über Inhaltswechsel, startet leer) ──────────── */

.login-bowling-status {
  margin: 0.2rem 0 0;
  min-height: 1.2em;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--apple-ink-muted-48, #7a7a7a);
  text-align: center;
  /* Bewusst nie versteckt: Die Region (role=status, aria-live) steht von
     Anfang an im Accessibility-Tree und startet leer – loginBowling.js setzt
     den Statustext als Inhaltswechsel und leert ihn beim Reset. */
}

/* ── Kegel-Szene: Farben & responsive Geometrie ─────────────────────────── */

/* Flache Seitenansicht: Kegel und Kugel behalten die Basisfarben, aber mit
   klarerer Kontur (Icon-Stil) — die Szene lebt von Silhouetten auf einer
   Grundlinie, nicht von Tiefe. */
.login-bowling-scene {
  width: 100%;
}

.login-bowling-scene svg {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 520 / 160;
  margin-inline: auto;
}

/* Kegel: hell mit Hairline-Kontur; Halsband färbt sich über currentColor
   (CSS auf <use>-Klonen erreicht den Schattenbaum nur über Vererbung). */
.app-login-panel--loading .kb-pin-shape {
  fill: var(--kb-pin-fill);
  stroke: var(--kb-pin-stroke);
  stroke-width: 1.5;
  color: var(--kb-pin-band);
}

.app-login-panel--loading .kb-pin-shadow {
  fill: var(--kb-shadow);
}

/* Kugel: Körper in Primary, Oberflächen-Markierung hell, Gloss über
   Gradient (stationäres Licht — liegt außerhalb der Rotationsgruppe). */
.app-login-panel--loading .kb-ball-body {
  fill: var(--kb-ball-fill);
}

.app-login-panel--loading .kb-ball-marker {
  fill: var(--kb-ball-marker);
}

.app-login-panel--loading .kb-ball-shadow {
  fill: var(--kb-shadow);
}

/* Bahn: flache Grundlinie + zweite, halbtransparente Linie (Seitenansicht,
   keine Fluchtlinien mehr) */
.app-login-panel--loading .kb-lane {
  stroke: var(--kb-lane);
  stroke-width: 1;
  stroke-linecap: round;
}

/* Dark Mode */
html.apple-dark .app-login-panel--loading {
  --kb-pin-fill: #d7d7dc;
  --kb-pin-stroke: #62646a;
  --kb-pin-band: rgba(41, 151, 255, 0.35);
  --kb-ball-fill: var(--apple-primary-on-dark, #2997ff);
  --kb-lane: #3a3a3f;
  --kb-lane-surface: rgba(235, 235, 245, 0.05);
  --kb-shadow: rgba(0, 0, 0, 0.32);
}

/* ── Clientseitiger Fehlerbereich des asynchronen Logins ────────────────── */

.app-login-error {
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--apple-radius-md, 11px);
  font-size: 0.875rem;
  line-height: 1.45;
  color: #b3264e;
  background: #fdecec;
}

.app-login-error:focus {
  outline: none;
}

.app-login-error:focus-visible {
  outline: 2px solid var(--apple-primary, #0066cc);
  outline-offset: 2px;
}

html.apple-dark .app-login-error {
  color: #ffb4ab;
  background: rgba(255, 105, 97, 0.16);
}

/* Serverseitige Feldfehler (status=invalid): je Feld eine Meldung, per
   aria-describedby mit dem Eingabefeld verknüpft (loginBowling.js). */
.app-login-field-errors {
  margin: -0.4rem 0 1rem;
}

.app-login-field-error {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #b3264e;
}

html.apple-dark .app-login-field-error {
  color: #ffb4ab;
}

/* ── Reduced Motion: keine Bewegung, keine Weichblenden ────────────────────
   Die Timeline (loginBowlingScene.js) läuft unter reduced motion gar nicht
   erst — das Markup zeigt die statische Ruhepose. Hier bleiben nur die
   Panel-Übergänge hart, damit nichts nachschwingt. */
@media (prefers-reduced-motion: reduce) {
  .app-login-panel {
    transition: none;
  }
}