/* pb-password-toggle.css - the show/hide "eye" on password boxes (2026-09-13).

   Pairs with js/pb-custom/pb-password-toggle.js, which wraps each
   input[data-pb-password-toggle] in .pb-pw-field and appends the button.
   The button is absolutely positioned over the input's right edge and
   stretches to the input's own height, so it needs no per-theme sizing;
   the input just gains right padding so text never runs under the icon.
   Loaded by the home subscription and school licence views (PageStyles). */

.pb-pw-field {
    position: relative;
}

.pb-pw-field > .form-control {
    padding-right: 2.75rem;
}

/* Edge on Windows adds its own reveal "eye" to any password box once the
   user types, which would put two eyes on the field. Hide Edge's on the
   boxes that carry ours. Kept as its own rule on purpose: a browser that
   does not know ::-ms-reveal drops the whole rule it appears in, so it must
   never share a selector list with anything that has to work everywhere. */
.pb-pw-field > .form-control::-ms-reveal {
    display: none;
}

.pb-pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
}

.pb-pw-toggle:hover {
    color: #1f2d3d;
}

.pb-pw-toggle:focus {
    outline: none;
}

.pb-pw-toggle:focus-visible {
    outline: 2px solid #009EF7;
    outline-offset: -4px;
    border-radius: 6px;
}

.pb-pw-toggle .pb-pw-icon {
    display: block;
}

.pb-pw-toggle svg {
    display: block;
    width: 1.2em;
    height: 1.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Which icon shows follows the button's pressed state. */
.pb-pw-toggle .pb-pw-icon-hide {
    display: none;
}

.pb-pw-toggle[aria-pressed="true"] .pb-pw-icon-show {
    display: none;
}

.pb-pw-toggle[aria-pressed="true"] .pb-pw-icon-hide {
    display: block;
}