/* ============================================================================
   CSS/PASSWORD-FIELD.CSS
   One show/hide control per password field, never two.

   THE DOUBLE EYE
   -------------
   A type="password" input makes the browser draw its OWN reveal eye inside
   the field - Chromium still does, and Firefox and Chrome can add one through
   the password manager. That control is not part of this page, cannot be
   styled to match, and sits in the same corner as the page's own toggle
   button. The user sees two show-password buttons side by side, and there is
   no way to tell from the markup which one the page controls.

   login.php worked around this for itself: its field is type="text" with a
   CSS mask (-moz-text-security / -webkit-text-security), so the browser never
   draws a native eye. Every other page kept type="password", which is why the
   double eye appeared on the Change Password and user-management forms and
   not on the login screen.

   WHAT THIS DOES
   --------------
   Two layers, because neither alone is enough:

   1. Suppress the browser's own controls where pseudo-elements exist
      (::-ms-reveal, ::-ms-clear, and the WebKit autofill buttons). This is
      the only lever Chromium offers for its native eye.

   2. For the remaining cases, a field that has opted in with data-masked="1"
      is kept visually masked with -moz-text-security / -webkit-text-security
      even though its type is "text", so the value is hidden AND the browser
      stops advertising a password field.

   A page opts in per field by giving the input type="text" data-masked="1".
   That is a deliberate change, not a default: it must not happen silently, so
   the markup is explicit about which fields take it. See login.php.

   Loading this file alone does NOT change any field. A field still needs
   data-masked="1" before its type is treated as masked - this stylesheet
   removes the browser's duplicate control and provides the masking, and the
   markup decides where that applies.
   ========================================================================= */

/* ── 1. The browser's own controls, wherever they are ────────────────────
   Scoped to inputs that take the page's own toggle rather than to a class, so
   a field keeps the suppression even if its wrapper is renamed. The
   [data-masked] attribute is what marks it as ours. */
input[data-masked="1"]::-ms-reveal,
input[data-masked="1"]::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

input[data-masked="1"]::-webkit-credentials-manager-button,
input[data-masked="1"]::-webkit-contacts-auto-fill-button,
input[data-masked="1"]::-webkit-inner-spin-button,
input[data-masked="1"]::-webkit-search-cancel-button,
input[data-masked="1"]::-webkit-search-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

/* ── 2. Keep a data-masked field visually masked ─────────────────────────
   Chromium has no pseudo-element for the native eye, so the only way to stop
   it drawing one is to stop advertising a password field. The type is "text"
   for that reason; these properties are what keep the characters hidden.

   -moz-text-security      Firefox
   -webkit-text-security   Chromium and Safari
   text-security           the standard, for anything newer

   !important because a field is free to carry its own rules, and losing the
   mask would show the password in plain text - which is the one outcome this
   file exists to make impossible. */
input[data-masked="1"] {
    -moz-text-security: disc !important;
    -webkit-text-security: disc !important;
    text-security: disc !important;
}