/* Password Generator: extras on top of encoders.css (the card, bar, checks and actions) and tools.css.
   Uses the shared slider, dropdown, progress bar and privacy note as they are. */

.pg-out .textarea {
  min-height: 0;
  resize: none;
  font-size: var(--text-md);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.pg-out .textarea.is-single {
  font-size: var(--text-lg);
}

/* Strength meter: the shared .progress bar plus a line of text under it */
.pg-meter-wrap {
  margin-top: var(--space-3);
}
.pg-meter-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: var(--space-2) var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.pg-meter-text strong {
  color: var(--color-ink);
}
.pg-meter-wrap .progress > div {
  transition: width 0.2s, background-color 0.2s;
}

/* Settings panels */
/* Both Type choices get the width of the wider one */
#pg-mode {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/* The divider sits 24px from what is above it and 24px from what is below it */
.pg-panel {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
#pg-chars-panel {
  padding-top: calc(var(--space-6) - var(--space-2)); /* the first checkbox row already has 8px of its own padding */
}
/* An empty status line takes no room, so it does not add to the gap above the divider */
#pg-status:empty {
  min-height: 0;
  margin: 0;
}
/* Length / words slider sits in the top bar and takes the room left beside Type and How many */
.pg-len {
  flex: 1 1 14rem;
}
.pg-len[hidden] {
  display: none;
}
.pg-len .slider {
  min-height: 2.5rem; /* matches the height of the Type and How many controls */
}
.pg-panel .enc-bar {
  margin-bottom: 0;
}
.pg-sep {
  width: 12rem;
}
.pg-sep .dropdown {
  width: 100%;
}
.pg-panel > .enc-checks {
  max-width: 100%;
}
/* Character options: three columns, two rows, with tighter rows */
#pg-chars-panel > .enc-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 0 var(--space-8, 3rem);
  justify-content: start;
}
#pg-chars-panel > .enc-checks .check-row {
  padding-block: var(--space-2);
}
@media (max-width: 760px) {
  #pg-chars-panel > .enc-checks {
    grid-template-columns: minmax(0, max-content);
  }
}
/* Buttons with the privacy note beside them, wrapping to two lines */
.pg-actions {
  align-items: center;
  column-gap: var(--space-4);
}
/* The Copy button keeps one width for "Copy" and "Copied", so nothing shifts when the label changes */
#pg-copy {
  min-width: 7.5rem;
  justify-content: center;
}
.pg-actions .privacy-note {
  flex: 1 1 18rem; /* takes the rest of the row, then wraps under the buttons when it gets narrow */
  margin: 0;
}


@media (max-width: 760px) {
  .pg-sep {
    width: 100%;
  }
  .enc-qty {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-meter-wrap .progress > div {
    transition: none;
  }
}