/*!
 * Room Boom Auth · Stilblatt · v1.0.0
 * ------------------------------------------------------------------
 * Design-Guide: Room Boom UI v2 (Charts Version), Abschnitte 2, 3, 4, 7.
 *
 * Zwei Regeln, die dieses Blatt einbaufähig machen:
 *
 *   1. JEDER Selektor beginnt mit `.rb-auth`. Nichts wirkt außerhalb
 *      der Modulwurzel — auch nicht `body`, `*` oder ein Reset.
 *   2. Die Design-Tokens stehen auf `.rb-auth`, NICHT auf `:root`.
 *      Ein Host, der zufällig gleich benannte Variablen setzt, kann
 *      das Modul damit nicht umfärben (bewiesen in Beispiel 02).
 *
 * Die Schrift „Outfit" lädt das Modul absichtlich nicht selbst nach —
 * das ist Sache des Hosts (CSP, Ladezeit, Datenschutz). Ist sie nicht
 * da, greift der System-Stack darunter; das Layout hält.
 */

/* ══════════════════════════════════════════════════════════════════
   1. Wurzel + Tokens
   ══════════════════════════════════════════════════════════════════ */

.rb-auth {
  /* Farben — Guide 2.1 */
  --rb-akzent:      #C7FC3D;   /* Grün-Schema (Standard) */
  --rb-auf-akzent:  #15141A;   /* Textfarbe AUF der Akzentfarbe */
  --rb-ink:         #15141A;   /* Primärtext, schwarzer Button */
  --rb-ink-hover:   #2B283A;
  --rb-muted:       #7B85A5;   /* Sekundärtext, Platzhalter */
  --rb-karte:       #FFFFFF;
  --rb-feld:        #F0F1F5;   /* Inputs, Segmented-Track */
  --rb-feld-hover:  #E3E6EE;
  --rb-linie:       #D9D9D9;   /* Ringe an Hinweisboxen */
  --rb-fehler:      #FE3332;
  --rb-info:        #FFDC5F;   /* Demo-Chip */
  --rb-disabled:    #C6CAD6;

  /* Geometrie — Guide 4.2 / 4.3 */
  --rb-r-karte:     24px;
  --rb-r-pill:      999px;
  --rb-r-box:       12px;
  --rb-schatten:    0 8px 24px rgba(21, 20, 26, .08);

  /* Schrift — Guide 3 */
  --rb-schrift: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                Roboto, Helvetica, Arial, sans-serif;
  --rb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  display: block;
  width: 100%;
  background: transparent;          /* die Fläche des Slots bleibt dem Host */
  font-family: var(--rb-schrift);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--rb-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* Blau-Schema — Guide 2.2: NUR Akzent und Textfarbe darauf tauschen. */
.rb-auth[data-schema="blau"] {
  --rb-akzent:     #1364FF;
  --rb-auf-akzent: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════
   2. Lokaler Reset
   Setzt zurück, was ein Host über `*`, `body` oder Element-Selektoren
   vererbt. Steht bewusst VOR den Komponentenregeln — bei gleicher
   Spezifität gewinnt die spätere Regel.
   ══════════════════════════════════════════════════════════════════ */

.rb-auth *,
.rb-auth *::before,
.rb-auth *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-align: inherit;
  text-transform: none;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  box-shadow: none;
  list-style: none;
  vertical-align: baseline;
  white-space: normal;
  float: none;
  animation: none;
  transition: none;
  transform: none;   /* ein Host-`svg { transform: rotate(…) }` erwischt sonst das Logo */
  filter: none;
}

/* ══════════════════════════════════════════════════════════════════
   3. Karte
   ══════════════════════════════════════════════════════════════════ */

.rb-auth-karte {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--rb-karte);
  border-radius: var(--rb-r-karte);
  padding: 30px 28px;
  box-shadow: var(--rb-schatten);
}

/* ── Kopf: Logo-Kreis 44 + Marke/Produkt, rechts optional der Demo-Chip ── */

.rb-auth-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.rb-auth-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rb-auth-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rb-akzent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rb-auth-logo svg { display: block; }

.rb-auth-marke-name {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: var(--rb-ink);
  line-height: 1.25;
}

.rb-auth-marke-produkt {
  font-size: 12px;
  font-weight: 300;
  color: var(--rb-muted);
  line-height: 1.35;
}

/* Status-Badge — Guide 7.7: Pill, 12/600, Padding 3 11. */
.rb-auth-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--rb-info);
  color: #15141A;
  border-radius: var(--rb-r-pill);
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Überschrift und Vorspann ── */

.rb-auth-titel {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--rb-ink);
  margin: 0 0 8px;
}

.rb-auth-lead {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--rb-muted);
  margin: 0 0 22px;
}

.rb-auth-lead strong {
  font-weight: 400;
  color: var(--rb-ink);
  word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════════
   4. Meldungsboxen
   Ring statt Schatten, kein Flächen-Grau — Guide 4.3.
   ══════════════════════════════════════════════════════════════════ */

.rb-auth-box {
  border-radius: var(--rb-r-box);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 14px;
  box-shadow: 0 0 0 1px var(--rb-linie);
  color: var(--rb-muted);
}

.rb-auth-box--fehler {
  box-shadow: 0 0 0 1px var(--rb-fehler);
  color: var(--rb-fehler);
}

/* ══════════════════════════════════════════════════════════════════
   5. Segmented Control (Passwort ↔ Magic-Link)
   Guide 7.6: Track r24, Innenabstand 4, aktives Item als Pill.
   Hier auf grauem Track, weil er auf der weißen Karte sitzt.
   ══════════════════════════════════════════════════════════════════ */

.rb-auth-seg {
  display: flex;
  gap: 6px;
  background: var(--rb-feld);
  border-radius: var(--rb-r-karte);
  padding: 4px;
  margin-bottom: 18px;
}

.rb-auth-seg-item {
  flex: 1 1 0;
  height: 40px;
  border-radius: var(--rb-r-pill);
  background: transparent;
  color: var(--rb-muted);
  font-size: 15px;
  font-weight: 300;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.rb-auth-seg-item:hover { background: var(--rb-feld-hover); }

.rb-auth-seg-item.is-aktiv {
  background: var(--rb-karte);
  color: var(--rb-ink);
  font-weight: 400;
}

.rb-auth-seg-item:focus-visible { box-shadow: 0 0 0 1.5px var(--rb-ink); }

/* ══════════════════════════════════════════════════════════════════
   6. Formular und Eingaben
   Guide 7.3: Pill h48, grau #F0F1F5, Fokus-Ring 1.5px #15141A.
   ══════════════════════════════════════════════════════════════════ */

.rb-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rb-auth-feld { position: relative; }

.rb-auth-input {
  width: 100%;
  height: 48px;
  border-radius: var(--rb-r-pill);
  background: var(--rb-feld);
  color: var(--rb-ink);
  font-family: var(--rb-schrift);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
  padding: 0 18px;
  display: block;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 150ms ease-out, background 150ms ease-out;
}

/* Platz für den Augen-Knopf, wenn einer im Feld sitzt. */
.rb-auth-input--mit-knopf { padding-right: 50px; }

.rb-auth-input::placeholder { color: var(--rb-muted); opacity: 1; }
.rb-auth-input:hover { box-shadow: 0 0 0 1.5px var(--rb-linie); }
.rb-auth-input:focus { box-shadow: 0 0 0 1.5px var(--rb-ink); }
.rb-auth-input:disabled { color: var(--rb-disabled); box-shadow: none; }

.rb-auth-feld--fehler .rb-auth-input,
.rb-auth-feld--fehler .rb-auth-input:focus { box-shadow: 0 0 0 1.5px var(--rb-fehler); }

/* Autofill des Browsers würde die Pille sonst blau/gelb überfärben. */
.rb-auth-input:-webkit-autofill,
.rb-auth-input:-webkit-autofill:hover,
.rb-auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--rb-ink);
  -webkit-box-shadow: 0 0 0 100px var(--rb-feld) inset;
  caret-color: var(--rb-ink);
}

/* Feldfehler — Guide 7.3: 11px rot, 5px darunter, 20 eingerückt. */
.rb-auth-feldfehler {
  font-size: 11px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--rb-fehler);
  padding: 5px 0 0 20px;
}

.rb-auth-feldhinweis {
  font-size: 11px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--rb-muted);
  padding: 5px 0 0 20px;
}

/* Sichtbarkeits-Umschalter im Passwortfeld */
.rb-auth-augen {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--rb-muted);
  -webkit-appearance: none;
  appearance: none;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.rb-auth-augen:hover { background: var(--rb-feld-hover); color: var(--rb-ink); }
.rb-auth-augen:focus-visible { box-shadow: 0 0 0 1.5px var(--rb-ink); }
.rb-auth-augen svg { display: block; }

/* Code-Eingabe: ein Feld, breit gesperrt. Bewusst kein Sechs-Kästchen-
   Muster — Einfügen aus der Zwischenablage und Passwortmanager-Autofill
   funktionieren mit einem Feld zuverlässig, mit sechs nicht. */
.rb-auth-input--code {
  text-align: center;
  font-family: var(--rb-mono);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 8px;
  text-indent: 8px;          /* gleicht die Laufweite hinter der letzten Ziffer aus */
  padding: 0 12px;
}

/* ══════════════════════════════════════════════════════════════════
   7. Buttons
   Guide 7.1: Pill h48, schwarz als einzige Primäraktion je Ansicht.
   ══════════════════════════════════════════════════════════════════ */

.rb-auth-btn {
  width: 100%;
  height: 48px;
  border-radius: var(--rb-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rb-schrift);
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
}

.rb-auth-btn--primaer { background: var(--rb-ink); color: #FFFFFF; }
.rb-auth-btn--primaer:hover:not(:disabled) { background: var(--rb-ink-hover); }
.rb-auth-btn--primaer:active:not(:disabled) { background: var(--rb-ink-hover); box-shadow: 0 0 0 1.5px var(--rb-disabled); }
.rb-auth-btn--primaer:disabled { opacity: .25; cursor: default; }

.rb-auth-btn--grau { background: var(--rb-feld); color: var(--rb-ink); }
.rb-auth-btn--grau:hover:not(:disabled) { background: var(--rb-feld-hover); }
.rb-auth-btn--grau:active:not(:disabled) { box-shadow: 0 0 0 1.5px var(--rb-ink); }
.rb-auth-btn--grau:disabled { color: #B9BFCE; cursor: default; }

.rb-auth-btn:focus-visible { box-shadow: 0 0 0 1.5px var(--rb-ink); }

/* Ladezustand — Guide 12.2: 0.8s linear infinite. */
.rb-auth-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: rb-auth-dreh .8s linear infinite;
  flex-shrink: 0;
}

@keyframes rb-auth-dreh { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .rb-auth-spinner { animation-duration: 2.4s; }
  .rb-auth * { transition-duration: 1ms; }
}

/* ══════════════════════════════════════════════════════════════════
   8. Sekundärlinks und Fußnote
   ══════════════════════════════════════════════════════════════════ */

.rb-auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 16px;
}

.rb-auth-link {
  font-size: 13px;
  font-weight: 300;
  color: var(--rb-muted);
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  transition: color 150ms ease-out;
}

.rb-auth-link:hover { color: var(--rb-ink); }
.rb-auth-link:focus-visible { box-shadow: 0 0 0 1.5px var(--rb-ink); }

.rb-auth-fuss {
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--rb-muted);
}

/* ══════════════════════════════════════════════════════════════════
   9. Zwei-Faktor-Einrichtung: Geheimnis und otpauth-URI
   Kein externer QR-Dienst — das Secret verlässt die Seite nicht und
   eine strenge CSP bleibt heil. Der Text ist auswählbar und kopierbar.
   ══════════════════════════════════════════════════════════════════ */

.rb-auth-geheim {
  background: var(--rb-feld);
  border-radius: var(--rb-r-box);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.rb-auth-geheim-label {
  font-size: 11px;
  font-weight: 300;
  color: var(--rb-muted);
  margin-bottom: 4px;
}

.rb-auth-geheim-wert {
  font-family: var(--rb-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rb-ink);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.rb-auth-geheim-wert--klein { font-size: 11.5px; }

.rb-auth-kopieren {
  margin-top: 10px;
  height: 32px;
  padding: 0 16px;
  width: auto;
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   10. Enge Einbauplätze
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
  .rb-auth-karte { padding: 24px 20px; border-radius: 20px; }
  .rb-auth-titel { font-size: 24px; }
}