/* Sign-in screens and the users pages: what Bootstrap and app.css do not give. */
@layer modules {
    .password-field { position: relative; display: flex; align-items: center; }
    .password-field .form-control { padding-right: 44px; }
    .password-field__toggle { position: absolute; right: 4px; color: var(--color-muted); }
    .password-field__toggle[aria-pressed="true"] { color: var(--color-primary); }

    .logout-user { min-width: 0; }
    .logout-user .avatar { width: 44px; height: 44px; font-size: var(--text-lg); }
    .logout-user__text { min-width: 0; }
    .logout-user__name { font-weight: 650; overflow-wrap: anywhere; }

    /* The list beside its create form; one column below the desktop width. */
    .access-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: start; }
    .access-split__aside { position: sticky; top: var(--sticky-top); }
    @media (max-width: 1023px) {
        .access-split { grid-template-columns: minmax(0, 1fr); }
        .access-split__aside { position: static; }
    }

    .user-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 0; max-width: min(380px, 48vw); color: var(--color-text); font-weight: 600; }
    /* the link colour, not the primary: on the hovered row the primary falls below 4.5:1 */
    .user-cell:hover { text-decoration: none; color: var(--color-link); }
    .user-cell .avatar { width: 28px; height: 28px; font-size: var(--text-xs); }
    .user-cell .badge { flex: none; }
    .user-cell__role { margin: 4px 0 0 40px; }
    @media (max-width: 639px) {
        .user-cell { max-width: 56vw; }
    }

    /* the lock an administrator's row shows where the delete button would be */
    .user-lock { display: inline-grid; place-items: center; width: var(--control-height-sm); height: var(--control-height-sm); color: var(--color-muted); }
}