/* Password generator — the readout and the meter */

.pw-out{
  font-family:var(--f-mono);
  font-size:clamp(1.05rem,3.4vw,1.7rem);
  line-height:1.45;
  word-break:break-all;
  padding:20px 22px;
  min-height:76px;
  display:flex;align-items:center;
  background:var(--surface-2);
  border-radius:var(--radius-sm);
  cursor:pointer;
  user-select:all;
}
.pw-out:hover{background:var(--accent-soft);}
.pw-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;}

.pw-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px 20px;margin-top:18px;
}
.pw-note{font-size:.84rem;color:var(--ink-3);margin-top:10px;}

.pw-meter{
  height:7px;border-radius:100px;background:var(--surface-2);
  overflow:hidden;margin-top:7px;
}
.pw-meter span{display:block;height:100%;transition:width .18s,background .18s;}
.pw-meter.weak  span{background:var(--warn,#de8271);}
.pw-meter.fair  span{background:#d8b24a;}
.pw-meter.good  span{background:var(--accent);}
.pw-meter.great span{background:var(--accent);}
.pw-meter::after{
  content:attr(data-label);
  display:block;margin-top:9px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}

.pw-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px 18px;margin-top:12px;}
.pw-check{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-2);cursor:pointer;}
.pw-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}