/* THE SHOW BUTTON BESIDE A PASSWORD BOX (shared/_password_peek, the one partial
   every password box is drawn by; password_peek_controller turns it on).

   Its look is the masked-number Show button's (w9s/_mask_style, .kf-mask-toggle):
   a white button with a thin warm border, 48px tall, amber when the box is
   showing. Plain unlayered rules, like legacy.css, so it draws the same on the
   old phones that threw Tailwind's layers away; no flex gap (Safari before
   14.1 has none), so the button keeps its own left margin.

   The content security policy forbids a style="" attribute and an inline
   <style>, which is why this is a stylesheet and not a few styles on the tag. */
.kf-peek { display: flex; align-items: stretch; margin-top: 0.375rem; }
.kf-peek > input { flex: 1 1 0%; min-width: 0; }
.kf-peek-toggle { flex: none; position: relative; min-width: 5.5rem; min-height: 48px; margin-left: 0.5rem; padding: 0 0.875rem;
                  border: 1px solid #d3ccc0; border-radius: 8px; background: #fff; font-size: 0.9375rem; font-weight: 600;
                  color: #1f1a14; cursor: pointer; }
.kf-peek-toggle[hidden] { display: none; }
.kf-peek-toggle[aria-pressed="true"] { border-color: #b45309; background: #fdf8ee; }
.kf-peek-toggle:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }

/* "Show" says "Show password" to a screen reader, and nothing more to the eye. */
.kf-peek-for { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
               white-space: nowrap; border: 0; }

/* The owner's setup page is a black card: a see-through button with white words. */
.kf-peek-dark .kf-peek-toggle { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); color: #fff; }
.kf-peek-dark .kf-peek-toggle[aria-pressed="true"] { border-color: #f59e0b; background: rgba(245, 158, 11, 0.2); }
.kf-peek-dark .kf-peek-toggle:focus-visible { outline-color: #f59e0b; }