/*
 * Onboarding-spezifische Styles. Multi-Step-Flow, eine Frage pro Bildschirm,
 * viel Whitespace, große Schrift (Spec).
 */

.onboarding {
  display: block;
}

/* Bug 63: Inline-Banner für Rate-Limit-Hits (statt Browser-Alert).
   Sitzt oben im Form, nur sichtbar wenn JS hidden=false setzt. */
.onboarding__banner {
  margin-block: var(--s2);
  padding: var(--s1);
  border: 2px solid var(--color-darkish);
  background: var(--color-light);
  text-align: center;
}

.onboarding__banner p {
  margin: 0;
}

.onboarding__banner-reload {
  display: inline-block;
  margin-block-start: var(--s-1);
  font-size: var(--s-1);
  color: var(--color-mid);
}

.onboarding__step {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-block: var(--s1);
}

.onboarding__step[hidden] {
  display: none;
}

/* Bug 108 + 109: Begrüßungs-Schritt umgestaltet. Logo zentriert
   als visueller Anker, darunter zentrierte Lese-Spalte (Frage +
   Erklärung) in einer auf 50ch zentrierten Box. Container leicht
   oberhalb der vertikalen Mitte über mehr top- als bottom-padding.
   Stretchend statt items-center, damit `margin-inline: auto` an
   den Text-Boxes greifen kann.
   Bug 109: text-align: left aus Bug 108 zurückgenommen — bei einer
   kurzen Begrüßung wirkt linksbündig in der 50ch-Box gegen das
   zentrierte Logo nach links gekippt. Center-align hält alles auf
   einer Achse. Linksbündigkeit ist für längere Lese-Texte (Newsletter-
   Items) richtig, hier nicht. */
.onboarding__step--welcome {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: var(--s3);
  padding-block-start: var(--s4);
  padding-block-end: var(--s2);
}

.onboarding__welcome-logo {
  /* Logo bleibt zentriert über der Frage, unabhängig von der
     linksbündigen Lese-Spalte darunter. */
  align-self: center;
  display: inline-flex;
  justify-content: center;
}

.onboarding__welcome-question {
  font-family: var(--font-special);
  font-size: var(--s3);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--ratio);
  margin: 0 auto;
  max-inline-size: 50ch;
  inline-size: 100%;
}

.onboarding__welcome-intro {
  font-size: var(--s1);
  line-height: var(--ratio);
  margin: 0 auto;
  max-inline-size: 50ch;
  inline-size: 100%;
}

.onboarding__welcome-cta {
  /* Button-Cluster zentriert — klare CTA-Insel unabhängig von der
     linksbündigen Lese-Spalte. */
  justify-content: center;
}

.onboarding__question {
  font-family: var(--font-special);
  font-size: var(--s3);
  font-weight: 700;
  text-align: center;
  margin-block: 0;
  letter-spacing: 0;
}

.onboarding__input,
.onboarding__textarea {
  font-size: var(--s1);
  max-inline-size: 60ch;
  margin-inline: auto;
}

.onboarding__textarea {
  font-family: var(--font-plain);
  min-block-size: 18em;
  line-height: var(--ratio);
}

/* Bug 116: gemeinsamer Wrapper für Personalisierungs-Input
   (Onboarding-Step-3 + Settings-Personalisierung).
   - Textarea wächst mit dem Inhalt (overflow:hidden, resize:none,
     enableAutoGrow in inspirations.mjs).
   - DOM-Reihenfolge Textarea → Inspirations → Word-Counter ist die
     Desktop-Sicht (natürlicher Lesefluss von oben nach unten).
   - Mobile-Order-Swap: Bubbles oben, Counter mitte, Textarea unten
     — sonst werden die Bubbles auf Mobile von der eingeblendeten
     Tastatur verdeckt. Tab-Reihenfolge bleibt DOM-natürlich
     (Textarea bekommt Fokus zuerst), nur die optische Reihenfolge
     wechselt. */
.personalization-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.personalization-input-group textarea {
  overflow: hidden;
  resize: none;
}

@media (max-width: 768px) {
  .personalization-input-group .onboarding__inspirations { order: 1; }
  .personalization-input-group .onboarding__word-counter { order: 2; }
  .personalization-input-group textarea { order: 3; }
}

/* Bug 3: Reserved space damit das Browser-Autofill-Dropdown nicht
   den Weiter-Button verdeckt. */
.onboarding__step-spacer {
  block-size: var(--s4);
}

/* Bug 4: Größerer Abstand zwischen Frage und Textfeld auf Schritt 3
   (Personalisierung). */
.onboarding__personalization-spacer {
  block-size: var(--s2);
}

/* Wortzähler unter der Textarea (Punkt 1.A). Dezent, kein Progressbar. */
.onboarding__word-counter {
  text-align: end;
  color: var(--color-mid);
  font-size: var(--s-1);
  margin: 0;
  max-inline-size: 60ch;
  margin-inline: auto;
  inline-size: 100%;
}

/* Bug 57 + 86: Tone-Akzente per Farbe + Weight. „low" jetzt
   prominenter, damit der User erkennt, dass er noch nicht weiter
   kann. */
.onboarding__word-counter[data-tone="low"] {
  color: var(--color-dark);
  font-weight: 700;
}

.onboarding__word-counter[data-tone="ok"] {
  color: var(--color-darkish);
}

.onboarding__word-counter[data-tone="good"] {
  color: var(--color-dark);
  font-weight: 700;
}

/* Bug 86: visuell-disabled-Variante für den Submit-Button im
   Onboarding und in Settings. Reagiert auf das standard-disabled-
   Attribut, das updatePersonalizationValidity setzt. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Bug 17: Push-Buttons mit klarem Gap, vertikal auf Mobile, horizontal
   auf Desktop. Mind. 1rem Gap auch im horizontalen Layout. */
.onboarding__push-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  align-items: center;
  margin-block-start: var(--s2);
}

@media (min-width: 30rem) {
  .onboarding__push-buttons {
    flex-direction: row;
    justify-content: center;
    gap: var(--s2);
  }
}

/* Bug 18: Live-Status für own-phrase. Tone-Klassen pro Outcome. */
.onboarding__phrase-status {
  font-size: var(--s-1);
  color: var(--color-mid);
  min-block-size: 1.4em;
  margin: 0;
}

.onboarding__phrase-status[data-tone="ok"] {
  color: var(--color-darkish);
}
.onboarding__phrase-status[data-tone="error"] {
  color: var(--color-dark);
}

.onboarding__hint {
  text-align: center;
  max-inline-size: 60ch;
  margin-inline: auto;
  color: var(--color-darkish);
}

/* Inspirations-Bubbles: statisches Pool mehrerer Pill-Buttons unter der
   Textarea. Click fügt Text in die Textarea ein, Bubble fadet aus und
   wird beim Re-Render entfernt. Mobile: Buttons wrappen auf 2-3 Zeilen. */
.onboarding__inspirations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  justify-content: center;
  max-inline-size: 60ch;
  margin-inline: auto;
  inline-size: 100%;
  margin-block-start: var(--s0);
}

/* Bug 49 + 59 + 65: eckige Bubbles, einheitliche 4-px-Border mit
   color-dark, color-darkish auf hover. Kein Outline beim Focus —
   stattdessen Atem-Animation analog zu den Inputs. */
.onboarding__inspiration-bubble {
  appearance: none;
  background: var(--color-light);
  border: var(--border-thin) solid var(--color-dark);
  border-radius: 0;
  padding-block: calc(var(--s-1) * 0.7);
  padding-inline: var(--s0);
  font: inherit;
  font-size: var(--s-1);
  line-height: 1.3;
  color: var(--color-dark);
  cursor: pointer;
  transition:
    background 150ms ease-out,
    color 150ms ease-out,
    border-color 200ms ease-out,
    opacity 250ms ease-out,
    transform 250ms ease-out;
}

.onboarding__inspiration-bubble:hover {
  background: var(--color-lightish);
  border-color: var(--color-darkish);
}

.onboarding__inspiration-bubble:focus-visible {
  /* Bug 65: Bubbles sind Buttons — bekommen das gleiche
     Hover-Feedback statt Outline. */
  background: var(--color-lightish);
  border-color: var(--color-darkish);
}

.onboarding__inspiration-bubble--fading {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

/* Bug 49: deutlich Abstand zwischen Bubbles und Weiter-Button,
   damit man nicht aus Versehen statt einer Bubble den Submit
   trifft. */
.onboarding__personalization-submit {
  margin-block-start: var(--s3);
}

/* Bug 53: Atem-Animation Layout — Heading oben (h2-Größe, ruhig
   wechselnd), Tropfen mittig, Hinweis klein unten.
   Bug 62: smooth Fade zwischen Atemphasen über 600 ms ease-in-out.
   JS toggled opacity 0 ↔ 1, der Browser interpoliert. */
.onboarding__breath-heading {
  font-family: var(--font-special);
  font-size: var(--s2);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  margin: 0;
  min-block-size: 1.4em;
  opacity: 1;
  transition: opacity 600ms ease-in-out;
}

.onboarding__loader-droplet {
  font-size: var(--s5);
  line-height: 1;
  color: var(--color-dark);
  display: flex;
  justify-content: center;
}

.onboarding__breath-hint {
  text-align: center;
  margin: 0;
  color: var(--color-mid);
}

.onboarding__loader {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  align-items: center;
  padding-block: var(--s2);
  transition: opacity 400ms ease-out;
}

/* Bug 66: ohne diese Regel überschreibt das obige display:flex
   das UA-default [hidden]{display:none}, und der Loader bleibt
   nach Demo-Render sichtbar (gleicher Bug-Pattern wie Toast/Footer). */
.onboarding__loader[hidden] {
  display: none;
}

.onboarding__loader--fading {
  opacity: 0;
}

.onboarding__variants {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-inline-size: 70ch;
  margin-inline: auto;
}

/* Bug 6: hidden-Attribut hat sonst niedrigere Spezifität als die
   .onboarding__variants{display:flex}-Regel und greift nicht. */
.onboarding__variants[hidden] {
  display: none;
}

.onboarding__variants--just-shown {
  animation: onboarding-fade-in 400ms ease-out;
}

@keyframes onboarding-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.onboarding__variant {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.onboarding__variant .newsletter-content {
  font-size: var(--s0);
}

.onboarding__pickother {
  margin-inline: auto;
  max-inline-size: 50ch;
  inline-size: 100%;
}

.onboarding__pickother summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
}

.onboarding__pickother summary::-webkit-details-marker {
  display: none;
}

.onboarding__pickother[open] summary {
  margin-block-end: var(--s1);
}

.onboarding__phrase {
  font-family: var(--font-special);
  font-weight: 700;
  font-size: var(--s4);
  text-align: center;
  letter-spacing: 0;
  word-break: break-word;
  /* S7: break-all als Fallback, falls break-word bei langen Komposita
     ohne Bindestrich nicht greift. */
  overflow-wrap: anywhere;
  margin-block: var(--s1);
  padding-block: var(--s1);
  border-block: var(--border-thin) solid var(--color-lightish);
}

/* S7: Mobile (≤ 30 rem) reduziert die Phrase-Schriftgröße, damit
   3-Wort-Komposita nicht über die Viewport-Kante laufen. */
@media (max-width: 30rem) {
  .onboarding__phrase {
    font-size: var(--s3);
  }
}

.onboarding__own-phrase {
  max-inline-size: 50ch;
  margin-inline: auto;
  inline-size: 100%;
}

.onboarding__own-phrase summary {
  cursor: pointer;
  color: var(--color-darkish);
  text-align: center;
}

.onboarding__warning {
  text-align: center;
  max-inline-size: 50ch;
  margin-inline: auto;
  color: var(--color-darkish);
}


/* Newsletter-Markdown-Rendering im Demo-Schritt: kompakt */
.onboarding__variant .newsletter-content h1 {
  font-size: var(--s2);
  font-family: var(--font-special);
  margin-block: 0 var(--s0);
}

.onboarding__variant .newsletter-content h2 {
  font-size: var(--s1);
  font-family: var(--font-special);
  margin-block: var(--s1) var(--s-1);
}

.onboarding__variant .newsletter-content blockquote {
  border-inline-start: var(--border-thin) solid var(--color-darkish);
  padding-inline-start: var(--s0);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-darkish);
  margin-block: var(--s1);
}

.onboarding__variant .newsletter-content p + p {
  margin-block-start: var(--s0);
}