/* ============================================================================
   ToolBench — password.css
   Password Generator + Password Strength Checker (one Vue app, two pages —
   same pattern as hash.css powering all eleven hashing pages).

   .card/.panel/.prow/.plbl/.seg/.opts/.opt/.field/.field-top/.lbl/.err/
   .actions/.results/.row/.rhead/.rmain/.rname/.rbtns/.faq details/summary/
   .section-label all already exist in tools.css/site.css — reused as-is.

   .pmeter is duplicated from aes.css rather than shared cross-file, following
   this project's established convention for small tool-local blocks (see
   image-compressor.css's own header comment on the same tradeoff).
   ============================================================================ */

.inp{
  display:block;width:100%;padding:11px 12px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  color:var(--ink);
  font:400 16px/1.5 var(--mono);
}
.inp:focus{outline:0;border-color:var(--blueprint);box-shadow:0 0 0 3px rgba(44,110,142,.14)}
.inp-sm{padding:8px 10px;font-size:14px}
.keywrap{position:relative}
.keywrap .inp{padding-right:78px}
.keywrap > .btn{position:absolute;right:6px;bottom:6px}

.pwval{font:600 18px/1.4 var(--mono);word-break:break-all}

/* ------------------------------------------------------- strength meter -- */
.pmeter{display:flex;gap:4px;margin:8px 0 4px}
.pmeter i{flex:1;height:5px;border-radius:2px;background:var(--paper-line)}
.pmeter.s0 i.filled{background:var(--danger)}
.pmeter.s1 i.filled{background:var(--amber-dim)}
.pmeter.s2 i.filled{background:var(--amber)}
.pmeter.s3 i.filled{background:#6FA8C9}
.pmeter.s4 i.filled{background:var(--success)}
.strength-label{margin:4px 0 14px;font:600 14px/1.3 var(--display);color:var(--ink)}

.warn-list{margin:6px 0 18px;padding:0;list-style:none;font-size:13px;color:var(--warn-ink)}
.warn-list li{display:flex;gap:6px;align-items:flex-start;margin:0 0 4px}

/* ------------------------------------------------------------ crack time -- */
.crack-table{margin:8px 0 14px;border:1px solid var(--paper-line);border-radius:var(--radius);overflow:hidden}
.crack-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;background:#fff}
.crack-row + .crack-row{border-top:1px solid var(--paper-line)}
.crack-label{font-size:13.5px;color:var(--slate)}
.crack-time{font:600 13.5px/1.4 var(--mono);color:var(--ink)}

/* ---------------------------------------------------------- policy list -- */
.policy-list{margin:12px 0 0;padding:0;list-style:none;font-size:13.5px}
.policy-list li{display:flex;gap:8px;align-items:center;padding:6px 0}
.policy-list li.is-pass{color:var(--success-ink)}
.policy-list li.is-fail{color:var(--danger-ink)}