/* Passwortstaerke (passwort-staerke.js): Balken mit Wort unter dem Feld, darunter ein Satz.
 *
 * EIN BLATT FUER VIER SEITEN (start.html, post_purchase.html, passwort-zuruecksetzen.html,
 * account.html) - zwei davon oeffentlich, zwei in der App, alle auch in der Mac-App (WebKit).
 *
 * FARBEN NUR UEBER DIE MARKEN VON UI v2 (tokens.css). Die gelten unter html.bp-v2 und bekommen im
 * Dunkelmodus ihre dunklen Werte (html.bp-v2[data-theme="dark"]) - hell und dunkel ohne eine eigene
 * Regel. Der Rueckfallwert ist der helle Wert derselben Marke: er greift nur im alten Aussehen
 * (?ui=v1), das keinen Dunkelmodus hat.
 *
 * NIE NUR FARBE: das Wort und die Zahl der gefuellten Abschnitte sagen die Stufe auch ohne sie.
 * Kein !important (tests/test_wichtig_sperrklinke.py) - die Klassen sind neu, niemand kaempft gegen sie.
 */
.pw-staerke {
  margin: 6px 0 0;
  font-size: var(--fs-klein, 0.8rem);
  line-height: 1.4;
  color: var(--text-secondary, #56635b);
  text-align: left;
}

/* Die Zeile hat die Hoehe des Worts auch ohne Wort: sonst wuchs die Anzeige beim ersten Tastendruck
   um 14 px und schob alles darunter (gemessen auf /start, 390 px). */
.pw-staerke-reihe {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 1.4em;
}

/* Vier Abschnitte statt eines Verlaufs: „zwei von vier" liest man auch ohne Farbe. */
.pw-staerke-balken {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.pw-staerke-balken span {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--border-default, #cbd8cf);
  transition: background-color var(--dur-fast, 120ms) ease;
}

.pw-staerke[data-stufe="1"] .pw-staerke-balken span:nth-child(-n+1) { background: var(--danger, #b84d42); }
.pw-staerke[data-stufe="2"] .pw-staerke-balken span:nth-child(-n+2) { background: var(--warning, #b57b25); }
.pw-staerke[data-stufe="3"] .pw-staerke-balken span:nth-child(-n+3) { background: var(--green-600, #3a8454); }
.pw-staerke[data-stufe="4"] .pw-staerke-balken span { background: var(--green-700, #2e6b42); }

/* Das Wort rechts neben dem Balken: feste Mindestbreite, damit der Balken beim Wechsel von
   „gut" zu „schwach" nicht springt. */
.pw-staerke-wort {
  flex: none;
  min-width: 4.6em;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.pw-staerke[data-stufe="0"] .pw-staerke-wort,
.pw-staerke[data-stufe="1"] .pw-staerke-wort { color: var(--danger-strong, #963a31); }
.pw-staerke[data-stufe="2"] .pw-staerke-wort { color: var(--warning-strong, #8f5f17); }
.pw-staerke[data-stufe="3"] .pw-staerke-wort { color: var(--green-700, #2e6b42); }
.pw-staerke[data-stufe="4"] .pw-staerke-wort { color: var(--green-800, #205236); }

/* Eine Zeile Platz auch ohne Satz (bei „stark"): sonst rueckt alles darunter beim Tippen hoch. */
.pw-staerke-tipp {
  margin-top: 3px;
  min-height: 1.4em;
}

/* „Passwortstärke:" nur fuer die Vorlesesoftware - zu sehen ist der Balken. */
.pw-staerke-vor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pw-staerke-balken span { transition: none; }
}