/* 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. */

.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;
    }
}