/* Password strength checker — the input and the breakdown */

.pw-field{display:flex;gap:9px;align-items:stretch;}
.pw-field input{
  flex:1;min-width:0;
  font-family:var(--f-mono);
  font-size:clamp(1rem,2.6vw,1.25rem);
  padding:16px 18px;
  letter-spacing:.02em;
}
.pw-field .btn{white-space:nowrap;}

.bd-title{
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:26px 0 12px;
}
.bd-parts{display:flex;flex-wrap:wrap;gap:8px;}
.bd-part{
  display:inline-flex;flex-direction:column;gap:3px;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  padding:8px 12px;background:var(--surface-2);
  max-width:100%;
}
.bd-text{
  font-family:var(--f-mono);font-size:.98rem;color:var(--ink);
  word-break:break-all;
}
.bd-kind{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
/* Everything that makes a password cheap to guess is flagged; the one kind
   that does not is left alone. */
.bd-part.common,.bd-part.word,.bd-part.name,.bd-part.keyboard,
.bd-part.sequence,.bd-part.repeat,.bd-part.year{
  border-color:var(--warn,#de8271);
}
.bd-part.common .bd-kind,.bd-part.word .bd-kind,.bd-part.name .bd-kind,
.bd-part.keyboard .bd-kind,
.bd-part.sequence .bd-kind,.bd-part.repeat .bd-kind,.bd-part.year .bd-kind{
  color:var(--warn,#de8271);
}
.bd-part.random{border-color:var(--accent);}
.bd-part.random .bd-kind{color:var(--accent);}

.bd-note{font-size:.85rem;color:var(--ink-3);margin-top:12px;line-height:1.7;}
.bd-list{margin:0;padding-left:20px;font-size:.93rem;color:var(--ink-2);line-height:1.75;}
.bd-list li{margin-bottom:8px;}