/**
 * Password-field controls (companion of /js/password-ui.js): the label row carrying
 * the reveal/generate buttons, and the last-typed-character peek chip. App-owned CSS —
 * tokens only, never a vendored-file edit.
 */

.pw-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.pw-label-row .form-label {
  margin-bottom: 0;
}

.pw-label-actions {
  display: flex;
  gap: var(--spacing-xs);
}

/* JS wraps a [data-password-peek] input in this host so the chip can anchor to the
   field's own box instead of the form group's. */
.pw-peek-host {
  position: relative;
  display: block;
}

.pw-peek {
  position: absolute;
  top: 50%;
  right: var(--spacing-sm);
  transform: translateY(-50%);
  padding: 0 var(--spacing-xs);
  background: var(--color-surface-sunk);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
  pointer-events: none;
}

/* The two auth-card rules the PANEL pages reuse around password fields — the peek/generate
   buttons carry .auth-card__toggle-visibility and the new-password field renders
   .auth-card__password-rules. auth-card.css sits in the STOREFRONT bundle
   (design css-manifest.txt), and panel pages load core+panel, so without this copy those
   controls lose their compact float sizing exactly where password-ui.js runs. On the auth
   layout the same rules also arrive via storefront.css — identical values, harmless.
   Verbatim from components/auth-card/auth-card.css @ f784382. */

.auth-card__password-rules {
  list-style: disc;
  padding-left: var(--spacing-lg);
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
}

.auth-card__password-rules li {
  margin-bottom: var(--spacing-xs);
}

.auth-card__toggle-visibility {
  float: right;
  font-size: var(--font-size-micro);
  padding: var(--spacing-xs) var(--spacing-sm);
  min-height: 0;
  min-width: 0;
}