/* zen_pw.css v1.0.0 2026-10-12 Claude Code
   Title:      The little eye on every password box of every Zen app: its looks (behaviour: zen_pw.js)
   File:       /home/wang/tools/zen_nav/zen_pw.css (THE source; each app keeps a copy in its static folder made by zn_sync.py)
   Copies:     Zen HQ app/static/zen_pw.css, Zen Desk app/static/zen_pw.css, Zen Booking app/static/zen_pw.css,
               Zen Ledger web/static/zen_pw.css, Zen OODA app/static/zen_pw.css. Never edit a copy: edit this file and run
               python3 /home/wang/tools/zen_nav/zn_sync.py --copy.
   Purpose:    Owner order 2026-10-12: the same eye in the same place in every app: inside the right end of the box, 38 x 38 px, the
               icon 20 px in the muted ink (on a box lower than 42 px the eye is 4 px lower than the box), the ink on hover, a 2 px focus ring; the box keeps 46 px free on its right for it. The
               "Caps Lock is on" note sits under the box, 13 px, 600, in the accent ink. Scoped to .pw-wrap / .pw-caps and set in
               full (with !important on the few properties app button rules like to set) so no app rule leaks in.
   Colours:    only the shared theme variables --zt-*. The block :where(:root) holds China Gold's values at zero specificity (the
               same values as zen_header.css; a theme always wins); checked against themes.json by zn_sync.py --check.
   Revisions:  1.0.0 2026-10-12 Claude Code: first version (one stylesheet instead of Zen HQ's hq_style.css section 10 and
               hq_splash.css section 9, Zen Ledger's recibo_web_password.html and the styles zd_pw.js / zb_pw.js wrote in).
*/
:where(:root){--zt-ink:#1D1913; --zt-muted:#6A5F50; --zt-accent-ink:#7A5A22; --zt-focus:#7A5A22}

.pw-wrap{position:relative !important; display:block !important; width:100%; max-width:100%; margin:0; padding:0; border:0; box-sizing:border-box}
.pw-wrap > input{width:100% !important; max-width:100%; box-sizing:border-box !important; padding-right:46px !important; margin-right:0 !important}
.pw-wrap > .pw-eye{position:absolute !important; right:4px !important; left:auto !important; top:50% !important; bottom:auto !important;
  transform:translateY(-50%) !important; width:38px !important; height:min(38px, calc(100% - 4px)) !important; min-width:0 !important; min-height:0 !important;
  display:grid !important; place-items:center; margin:0 !important; padding:0 !important; border:0 !important; border-radius:8px !important;
  background:transparent !important; box-shadow:none !important; color:var(--zt-muted) !important; cursor:pointer; line-height:0 !important;
  font-size:0 !important; text-indent:0; opacity:1; z-index:1}
.pw-wrap > .pw-eye svg{display:block; width:20px; height:20px; flex:none; pointer-events:none}
.pw-wrap > .pw-eye:hover{color:var(--zt-ink) !important}
.pw-wrap > .pw-eye:focus{outline:none}
.pw-wrap > .pw-eye:focus-visible{outline:2px solid var(--zt-focus) !important; outline-offset:1px}
.pw-caps{display:block; margin:4px 0 0; font-size:13px; font-weight:600; line-height:1.3; color:var(--zt-accent-ink)}
.pw-caps[hidden]{display:none !important}