/* ==========================================================================
   Password-strength meter — SHARED COMPONENT

   Extracted from `pages/_t22.css` when T23 turned out to render the same control on
   `customer/account/createpassword`. It is here rather than duplicated because this one
   element cost T22 **five consecutive review gates**, and copying the result into a second
   page sheet would have copied the bugs' shape with it.

   WHAT IT COST TO GET RIGHT, so nobody re-derives it:

   1. The label is `<span id="password-strength-meter-label">` — an **ID, not a class**. A
      `.password-strength-meter-label` selector matches nothing and reports no error.
   2. The label is a **descendant of the bar**, not a sibling. With the bar 6px tall and
      `overflow: hidden`, 6px of its 14px box survived. It needs a containing block ABOVE the
      clipper: the CONTAINER is positioned and the bar deliberately is NOT, so the label
      resolves against the container and the bar's clip cannot reach it.
   3. Escaping the clip was still not enough — the label INHERITS the bar's deliberately
      collapsed `line-height`, so it measured 6px tall for a 12px glyph until given its own.
   4. Making the bar `static` re-parents Blank's `::before` FILL as well, which then resolved
      `height: 100%` against the 26px container and painted a slab under the word. The fill's
      box is therefore pinned explicitly and must stay pinned.
   5. There are **FIVE** state classes, not four. `password-none` is applied when a user types
      a password and CLEARS it, and it shipped on Blank's `#f4f4f4` through four gates because
      every round enumerated states from the theme's own rules. The framework's list is
      authoritative: `grep -o "password-[a-z-]*" styles-m.css | sort -u`.

   And the meta-lesson, which is why this file exists: **every one of those rounds measured the
   state the page loads in.** Drive the control — `jQuery('#password').trigger('keyup')` — through
   all five states before believing any of it.

   SCOPED TO THE CONTROL, NOT TO BODY CLASSES (S1 MINOR 5). The first version enumerated
   `.customer-account-create` and `.customer-account-createpassword` - and Magento renders this
   meter from THREE templates: register.phtml, resetforgottenpassword.phtml and
   form/edit.phtml (`/customer/account/edit/`). An enumeration needs an edit per route and had
   already missed one on the task that created the component, which is exactly the failure the
   extraction was meant to end. `#password-strength-meter-container` and
   `.password-strength-meter` are page-unique and globally registered, so scoping to the
   control covers every route Magento renders it on, including ones added later.

   Blank's own geometry, for reference:
     .password-strength-meter        { background:#f4f4f4; height:32px; line-height:32px;
                                       position:relative; z-index:1 }
     .password-strength-meter::before{ content:''; position:absolute; left:0; top:0;
                                       height:100%; z-index:-1 }
     .password-<state> …::before     { width: 100/25/50/75/100% ; hardcoded hex fill }
   ========================================================================== */

#password-strength-meter-container {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 6px;      /* the bar was otherwise flush against the input, zero gap */
  /* 21, not 20: the label sits at top:12px with line-height 1.2 on 12px, so it needs 26.4px
     and 20+6 reserved 26. Measured 0.39px short - invisible today, but the comment claimed
     the padding reserves the label's row and it did not quite. (S3 SUGGESTION 1.) */
  padding-bottom: 21px;
}

.password-strength-meter {
  flex: 1;
  /* LOAD-BEARING AND IT CUTS BOTH WAYS — see 2 and 4 in the header. Leave it static. */
  position: static;
  background-color: var(--hrv-border);
  height: 6px;
  line-height: 6px;
  padding: 0;
  border-radius: var(--hrv-radius-pill);
  overflow: hidden;
  font-size: 0; /* suppresses Blank's in-bar "Password Strength:" prefix */
}

#password-strength-meter-label {
  position: absolute;
  left: 0;
  top: 12px;
  font-size: 12px;
  line-height: 1.2; /* NOT inherited from the collapsed bar — see 3 */
  font-weight: 600;
  color: var(--hrv-text-muted);
  white-space: nowrap;
}

/* The fill's box, pinned rather than inherited: `height: 100%` and `top` are Blank's and both
   resolve against the CONTAINER once the bar is static, so they are stated. The pill radius is
   restated because the bar's `overflow: hidden` can no longer clip the fill either. */
.password-strength-meter::before {
  height: 6px;
  top: 0;
  border-radius: var(--hrv-radius-pill);
}

/* FIVE states. `password-none` is the one that shipped un-themed through four gates. */
.password-none .password-strength-meter::before {
  background-color: var(--hrv-border);
}

.password-weak .password-strength-meter::before {
  background-color: var(--hrv-error);
}

.password-medium .password-strength-meter::before {
  background-color: var(--hrv-warning);
}

/* Blank distinguishes strong from very-strong (`#c5eeac` / `#81b562`); one success token
   collapses that. Kept — the states stay separable by width (75% vs 100%) and by the word —
   but declared, because it is a change to the control's encoding. */
.password-strong .password-strength-meter::before,
.password-very-strong .password-strength-meter::before {
  background-color: var(--hrv-success);
}