/* Password strength meter, shared by the public sign-up card and the partner
   password pages.

   Colours are literal rather than tokens: this file is loaded beside two
   different design systems (.gqv2 on the website, .gq-body in the panel) whose
   variables do not agree, and a meter that inherits a red from one and a green
   from the other is a meter with no fixed meaning. These four are checked
   against both backgrounds.

   The bar is four segments rather than a percentage: a continuous bar invites
   the reading "83% secure", which is not a thing anybody can measure. Four
   steps say "this is a rough band" honestly.

   Set by password-strength.js on the wrapper: data-level = short|weak|fair|good|
   strong, or absent while the field is empty. */

.gqpw {
    margin-top: 8px;
}

.gqpw-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.gqpw-meter span {
    height: 4px;
    border-radius: 999px;
    background: #dfe4ea;
    transition: background .18s ease;
}

.gqpw-note {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
    min-height: 1em;
}

/* --- the bands --- */

.gqpw[data-level="short"] .gqpw-meter span:nth-child(-n+1),
.gqpw[data-level="weak"] .gqpw-meter span:nth-child(-n+1) {
    background: #d14343;
}

.gqpw[data-level="fair"] .gqpw-meter span:nth-child(-n+2) {
    background: #d98324;
}

.gqpw[data-level="good"] .gqpw-meter span:nth-child(-n+3) {
    background: #b8a020;
}

.gqpw[data-level="strong"] .gqpw-meter span {
    background: #3f8f5f;
}

.gqpw[data-level="short"] .gqpw-note,
.gqpw[data-level="weak"] .gqpw-note {
    color: #a3402a;
}

.gqpw[data-level="strong"] .gqpw-note {
    color: #2f6b46;
}

/* --- the confirmation field's own note --- */

.gqpw-note[data-match="no"] {
    color: #a3402a;
}

.gqpw-note[data-match="yes"] {
    color: #2f6b46;
}