/* ==========================================================================
   The password strength meter, the three rules and the „passwords match" line.
   Drawn by password-strength.js under a new-password field.

   ITS OWN FILE, NOT A SECTION OF components.css. components.css is linked by
   eight pages and every one of them carries its own ?v=, so a rule added there
   means eight edits and a test (sharedAssetVersions.test.ts) that fails until all
   eight agree. This one is asked for only by the pages that have a password to
   choose, and they say so by linking it.

   Tokens only. Colour is never the only carrier: the bar has a text label and
   every rule and the match line carry a mark (✓ ○ ✕) and, for a screen reader,
   a word. Nothing animates, so there is nothing for prefers-reduced-motion to
   turn off. Measured at 375px: the bar is a flex row that takes the width it is
   given, the labels wrap, and nothing has a width of its own.
   ========================================================================== */

.b-pw { margin: 8px 0 12px; }
.b-pw[hidden], .b-pw-match[hidden] { display: none; }

.b-pw-bar { display: flex; gap: 4px; }
.b-pw-seg {
  flex: 1 1 0;
  min-width: 0;
  height: 6px;
  border-radius: 100px;
  background: var(--panel2);
}
.b-pw-seg.is-on.is-level-1 { background: var(--neg); }
.b-pw-seg.is-on.is-level-2 { background: var(--warn); }
.b-pw-seg.is-on.is-level-3 { background: var(--pos); }

.b-pw-status {
  margin: 6px 0 0;
  font-size: var(--type-meta);
  color: var(--fg2);
  overflow-wrap: anywhere;
}
.b-pw-level { font-weight: 600; color: var(--fg); }

.b-pw-rules {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.b-pw-rule {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--type-meta);
  color: var(--fg2);
  overflow-wrap: anywhere;
}
.b-pw-rule.is-done { color: var(--fg); }
.b-pw-rule.is-done .b-pw-mark { color: var(--pos); }
.b-pw-mark {
  flex: none;
  width: 1.2em;
  text-align: center;
  font-weight: 700;
}

/* Empty until the person has typed in the repeat field, and 0 tall until then --
   a live region has to be in the page before its words change, so it is never
   display:none. The gap above it only exists while it has something to say. */
.b-pw-match {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--type-meta);
  color: var(--fg2);
}
.b-pw-match.is-shown { margin: 6px 0 10px; }
.b-pw-match.is-match { color: var(--pos); }
.b-pw-match.is-mismatch { color: var(--neg); }

/* Read by a screen reader, drawn nowhere. */
.b-pw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}