/* The eye on every password box (designs/eye.js, 29 Oct 2026): the same on the Office, the floor, the App and the
   Team App. The box and the eye share one cell, the eye inside the box's right edge, sized to the box's own type so a
   small code box carries a small eye and the sign-in a large one. Walnut at rest; burgundy while the password shows,
   because the house's red is how a screen says "look here". */
.peek { position: relative; display: inline-grid; align-items: center; max-width: 100%; box-sizing: border-box; }
.peek.is-whole { display: grid; width: 100%; }
.peek.is-own-line { display: grid; width: fit-content; }
.peek.is-centred { margin-left: auto; margin-right: auto; }
.peek > input { grid-area: 1 / 1; margin: 0 !important; padding-right: 2.6em !important; min-width: 0; }
.peek.is-whole > input { width: 100%; box-sizing: border-box; }
.peek-eye {
  grid-area: 1 / 1; justify-self: end; align-self: stretch; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4em; min-width: 30px; margin: 0; padding: 0; line-height: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-size: inherit; cursor: pointer;
}
.peek-eye svg { width: 1.2em; height: 1.2em; min-width: 18px; min-height: 18px; }
.peek-eye:hover, .peek.is-showing .peek-eye { color: var(--wine); }
.peek-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.peek.is-showing .peek-slash { display: none; }