/* Password Generator — a result card (the password, the strength meter as a
   stacked row, then Regenerate / Copy in the actions tray), a length card, a
   character-class card of toggles with its error caption, and a card of
   extra passwords (layout from styles/components/form.css). Only the
   password face, the meter, the readouts and the extra rows are the page's
   own. */

/* Keep the inline code chip glued to its trailing period so the subtitle
   never breaks mid-phrase around it. */
.pg-nowrap { white-space: nowrap; }

/* The password itself — selectable in one click. */
.pg-display {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.03em;
  word-break: break-all;
  min-height: 32px;
  user-select: all;
  color: var(--text);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .pg-display { font-size: 17px; }
}

/* Strength meter */
.pg-strength__bar {
  height: 6px;
  background: var(--bg-fill);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.pg-strength__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--danger);
  transition:
    width 0.22s var(--ease-standard),
    background 0.22s var(--ease-standard);
}

.pg-strength__fill[data-tier="weak"]   { background: var(--danger); }
.pg-strength__fill[data-tier="fair"]   { background: var(--warning); }
.pg-strength__fill[data-tier="strong"] { background: var(--accent); }
.pg-strength__fill[data-tier="great"]  { background: var(--success); }

.pg-strength__label {
  justify-content: space-between;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.pg-strength__bits { color: var(--text-dim); }

/* Qualitative rating is the most scannable readout — give it weight and
   tint it with the same tier token that colors the bar fill. */
#pg-strength-text {
  color: var(--text);
  font-weight: 500;
}
#pg-strength-text[data-tier="weak"]   { color: var(--danger); }
#pg-strength-text[data-tier="fair"]   { color: var(--warning); }
#pg-strength-text[data-tier="strong"] { color: var(--accent); }
#pg-strength-text[data-tier="great"]  { color: var(--success); }

/* Slider readouts ("Length  20"). */
.pg-readout {
  color: var(--text);
  font-weight: 500;
}

/* Character-class names as small inline code chips. */
main code {
  font-size: 11.5px;
  padding: 1px 5px;
}

/* The no-class caption carries a warning glyph before its text. */
.pg-warn svg { flex-shrink: 0; }

/* Extra passwords — one row each: the password, then Copy. */
.pg-extra__pw {
  flex: 1 1 auto;
  font-family: var(--mono);
  font-size: 14px;
  word-break: break-all;
  letter-spacing: 0.01em;
}
.pg-extra__copy { flex: none; }