/* Settings-Seite (Spec, Schritt 14): einzige scrollbare Seite mit
   getrennten Sektionen, jede in einer .box. */

.settings__title {
  font-family: var(--font-special);
  font-size: var(--s3);
  font-weight: 700;
  letter-spacing: 0;
  margin-block-end: var(--s1);
}

/* Bug 33 + 52: Settings-Sektionen ohne dicke Box-Borders. Stattdessen
   dünne Trennlinie zwischen Sektionen plus großzügiger Vertikal-
   abstand. Wirkt ruhiger, passt zum Atem-Vibe. */
[data-section] {
  display: flex;
  flex-direction: column;
  gap: var(--s0);
  padding-block: var(--s2);
  margin-block: var(--s2);
  border: 0;
  background: transparent;
}

[data-section] + [data-section] {
  border-block-start: 1px solid var(--color-lightish);
  margin-block-start: 0;
  padding-block-start: var(--s4);
}

/* Bug 71: prominenter Safekeep-Hinweis in der Phrase-Sektion. */
.settings__phrase-notice {
  margin: 0;
  padding: var(--s0) var(--s1);
  border-inline-start: var(--border-thin) solid var(--color-dark);
  background: var(--color-light);
  color: var(--color-dark);
  line-height: var(--ratio);
}

/* Bug 104: Phrase-Eingabe-Reihe (Input + „Vorschlag erzeugen").
   Auf Desktop nebeneinander mit Input-flex:1, auf Mobile (<600 px)
   stackt sie sich vertikal mit beiden Children volle Breite — das
   .input--phrase-Feld nimmt sonst nur ~45 % der Bildschirmbreite
   ein, „mond-tau-hain" passt nicht mehr lesbar rein. */
.settings__phrase-row .input--phrase {
  flex: 1;
}

@media (max-width: 600px) {
  .settings__phrase-row {
    flex-direction: column;
    align-items: stretch;
  }
  .settings__phrase-row > * {
    inline-size: 100%;
  }
}

/* Bug 74: H3-Subheading innerhalb einer Sektion (z.B. „Phrase ändern"). */
.settings__subheading {
  font-family: var(--font-special);
  font-size: var(--s1);
  font-weight: 700;
  letter-spacing: 0;
  margin-block: var(--s1) 0;
}

[data-section] h2 {
  font-family: var(--font-special);
  font-size: var(--s2);
  font-weight: 700;
  letter-spacing: 0;
  margin-block: 0;
}

/* Bug 70: Sprach-Auswahl als Bubble-Pair (eckig, 4 px, gleiche
   Optik wie Inspirations-Bubbles und alle anderen Buttons).
   Aktive Bubble invertiert. */
.settings__lang-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
}

.settings__lang-bubble {
  appearance: none;
  background: var(--color-light);
  color: var(--color-dark);
  border: var(--border-thin) solid var(--color-dark);
  border-radius: 0;
  padding-block: var(--s-1);
  padding-inline: var(--s1);
  font: inherit;
  font-size: var(--s0);
  cursor: pointer;
  transition:
    background 150ms ease-out,
    color 150ms ease-out,
    border-color 200ms ease-out;
}

.settings__lang-bubble:hover {
  border-color: var(--color-darkish);
}

.settings__lang-bubble[aria-checked="true"] {
  background: var(--color-dark);
  color: var(--color-light);
}

/* Bug 88: dezenter Counter unter dem Regenerate-Button.
   Bug 111: rechts ausgerichtet, damit er optisch zum
   „Speichern und neu generieren"-Button gehört (rechte Seite des
   cluster--end). „Nur speichern" zählt nicht zum Limit, also
   gehört der Counter klar zum Primary-Button rechts daneben.
   Auf Mobile wrappt der Cluster, der Primary-Button steht zuletzt
   im Source und damit unten — der right-aligned Counter sitzt
   weiterhin unter dem richtigen Button. */
.settings__regenerate-counter {
  color: var(--color-mid);
  display: block;
  text-align: right;
}

/* Bug 75: drei PayPal-Spende-Bubbles, gleicher Stil wie die
   Lang-Bubbles. <a> statt <button>, weil sie zu paypal.me führen. */
.settings__donate-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
}

.settings__donate-bubble {
  display: inline-block;
  background: var(--color-light);
  color: var(--color-dark);
  border: var(--border-thin) solid var(--color-dark);
  border-radius: 0;
  padding-block: var(--s-1);
  padding-inline: var(--s1);
  font: inherit;
  font-size: var(--s0);
  text-decoration: none;
  transition:
    background 150ms ease-out,
    color 150ms ease-out,
    border-color 200ms ease-out;
}

.settings__donate-bubble:hover,
.settings__donate-bubble:focus-visible {
  background: var(--color-dark);
  color: var(--color-light);
  text-decoration: none;
}

.settings__select {
  font-family: var(--font-plain);
  font-size: var(--s0);
  padding: var(--s-1) var(--s0);
  background-color: var(--color-light);
  color: var(--color-dark);
  inline-size: max-content;
  /* Border kommt jetzt aus forms.css (Bug 55) — kein eigener
     dicker dark-Border mehr (Bug 52). */
}

.settings__status {
  color: var(--color-darkish);
  font-style: italic;
}

.settings__status[data-tone="error"] {
  color: var(--color-dark);
  font-style: normal;
  font-weight: 700;
}

.settings__subs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.settings__subs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s0);
  padding-block: var(--s-2);
  border-block-start: var(--border-thin) solid var(--color-lightish);
}

.settings__subs li:first-child {
  border-block-start: none;
}

.settings__sub-meta {
  font-size: var(--s-1);
  color: var(--color-mid);
}

.settings__sub-this-device {
  font-size: var(--s-1);
  color: var(--color-darkish);
  font-style: italic;
}

.settings__danger {
  color: var(--color-dark);
}

.settings__danger:hover,
.settings__danger:focus-visible {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.settings__modal {
  border: var(--border-thin) solid var(--color-dark);
  background-color: var(--color-light);
  color: var(--color-dark);
  padding: var(--s2);
  max-inline-size: 50ch;
}

.settings__modal::backdrop {
  background-color: rgba(5, 5, 5, 0.6);
}

.settings__modal p {
  margin-block: 0 var(--s1);
}