/* password-rules — the password policy as a short list under the field,
   each line going green as the typed value satisfies it
   (partials/pat_form_field_password_rules.html +
   static/libraries/kikaron/password-rules/password-rules.js).

   Deliberately NOT a .pat-message: the rules are not a warning. The box they
   replaced was a `pat-message notice` — an orange bordered panel sitting on
   screen before the user had typed anything — and the whole point of the
   change is that a form nobody has touched yet must not look like it is
   already complaining. So: no border, no fill, list type at the size of the
   field's own help text, and the only colour on it is the green a met rule
   earns.

   The mark is a ::before on the item rather than an element in the markup —
   it is decoration for the eye, and the same fact is in the `.rule-state`
   span in words for a screen reader. */

/* The login name a set-password form is about, carried for the password
   manager alone (partials/pat_form_username_hint.html). It lives here rather
   than in a component of its own because it appears on exactly the forms this
   sheet already dresses, and it is loaded globally from quaive_head.html —
   which the change-password MODAL needs, since a pat-injected panel gets no
   stylesheet of its own.

   Clipped rather than hidden: `type="hidden"`, `display: none` and
   `visibility: hidden` are all skipped by autofill engines, which is the whole
   reason the field exists. Same recipe as `.rule-state` below. */
.password-account-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.password-rules {
    list-style: none;
    margin: 0.4em 0 0;
    padding: 0;
    display: grid;
    gap: 0.15em;
    font-size: var(--pat-form-help-font-size, 0.85em);
    line-height: 1.45;
    color: var(--gray-600, #57534e);

    li {
        display: flex;
        align-items: baseline;
        gap: 0.5em;
        margin: 0;

        /* An unmet rule is a ring, a met one a tick. Both occupy the same
           box so the list does not shift by a pixel as rules are met. */
        &::before {
            content: '○';
            flex: none;
            width: 1em;
            text-align: center;
            opacity: 0.55;
        }

        &.is-met {
            color: var(--colour-success, #16a34a);

            &::before {
                content: '✓';
                opacity: 1;
            }
        }
    }

    /* The screen-reader half of a rule's state. Read, never drawn — the
       ::before mark above says the same thing to the eye. `sr-only` is not
       a global class in this codebase, so the recipe is written out here. */
    .rule-state {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}