/* TSU-178: password strength meter.
 *
 * A standalone stylesheet, not part of application.sass, because the same
 * partial renders on the Foundation-era signup and profile pages and inside the
 * Tailwind admin -- and the admin layout loads only tailwind.css. One file,
 * linked by both layouts, beats the same rules maintained twice.
 *
 * Plain CSS for the same reason: Tailwind utilities are not available on the
 * front-end pages. */

/* Shown only once there is a score to show.
 *
 * Two reasons, and the second is the one that bit: a page where the controller
 * never runs (or where the selector matched nothing) must not leave a dead grey
 * track under the field -- and neither must a field the user has not typed in
 * yet. A 4px empty track reads as a horizontal divider, not as a meter, which
 * is exactly how it was first reported. `data-connected` stays on the element
 * as the wiring signal; visibility keys off the reading. */
.ts-password-strength {
  display: none;
}

.ts-password-strength[data-reading="true"] {
  display: block;
  margin-top: 6px;
  margin-bottom: 10px;
}

.ts-password-strength__track {
  background: #e6e6e6;
  border-radius: 2px;
  height: 4px;
  overflow: hidden;
  width: 100%;
}

.ts-password-strength__bar {
  background: #c0392b;
  border-radius: 2px;
  height: 100%;
  transition: width 150ms ease, background-color 150ms ease;
  width: 0;
}

/* weak (red) and fair (amber) are both refusals; the split is there so the bar
 * shows progress while the advice is being followed. */
.ts-password-strength__bar[data-strength="weak"] {
  background: #c0392b;
}

.ts-password-strength__bar[data-strength="fair"] {
  background: #e08b00;
}

.ts-password-strength__bar[data-strength="ok"] {
  background: #2e7d4f;
}

.ts-password-strength__readout {
  font-size: 12px;
  line-height: 1.4;
  margin: 4px 0 0;
}

.ts-password-strength__label {
  font-weight: 600;
}

.ts-password-strength__label:not(:empty) {
  margin-right: 4px;
}

.ts-password-strength__advice {
  color: #767676;
}