/* password-input.css — password field with reveal toggle and optional strength meter. Block alias: .password
   Builds on .input--affixed (text-field.css), so border, focus ring and invalid states are shared:
     <div class="input input--affixed password">
       <input class="input__control" type="password" id="pw" autocomplete="current-password|new-password">
       <button type="button" class="password__toggle" aria-controls="pw" aria-pressed="false" hidden>Show</button>
     </div>
   The toggle ships hidden and js/password-input.js reveals and wires it (progressive enhancement).
   Parts:     .password__toggle (text button inside the border; aria-pressed="true" while visible)
              .password__strength (wrapper) > .password__meter (<meter>) + .password__strength-text
              .password__rules (requirement list) > li[data-met="true|false"] with .password__rule-icon
   States:    toggle :hover, :focus-visible, aria-pressed; meter tone follows <meter> low/high/optimum.
              Docs-only freeze classes on the toggle: .is-hover, .is-focus-visible. */
@layer components {
  .password { padding-inline-end: var(--space-1); }

  .password__toggle {
    --_bg: var(--color-action-ghost-bg);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: calc(var(--size-control-md) - var(--space-2));
    min-inline-size: var(--size-control-md);
    margin: 0;
    padding-block: 0;
    padding-inline: var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--_bg);
    color: var(--color-action-ghost-fg);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
  }
  .password__toggle .icon { inline-size: var(--icon-size-sm); block-size: var(--icon-size-sm); }
  .password__toggle:hover,
  .password__toggle.is-hover { --_bg: var(--color-action-ghost-bg-hover); }
  .password__toggle:active { --_bg: var(--color-action-ghost-bg-active); }
  .password__toggle:focus-visible,
  .password__toggle.is-focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 0;
  }
  .password:has(.input__control:disabled) .password__toggle { color: var(--color-text-disabled); cursor: not-allowed; }

  /* Strength meter: bar + text (never color alone) */
  .password__strength {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
  }
  .password__meter {
    appearance: none;
    inline-size: 100%;
    block-size: var(--space-2);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    overflow: hidden;
  }
  .password__meter::-webkit-meter-bar { border: 0; border-radius: var(--radius-full); background: var(--color-bg-muted); block-size: var(--space-2); }
  .password__meter::-webkit-meter-optimum-value { background: var(--color-feedback-success-icon); }
  .password__meter::-webkit-meter-suboptimum-value { background: var(--color-feedback-warning-icon); }
  .password__meter::-webkit-meter-even-less-good-value { background: var(--color-feedback-danger-icon); }
  .password__meter:-moz-meter-optimum::-moz-meter-bar { background: var(--color-feedback-success-icon); }
  .password__meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--color-feedback-warning-icon); }
  .password__meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-feedback-danger-icon); }
  .password__strength-text {
    color: var(--color-text-default);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }

  /* Requirements: icon + text, met items get a check */
  .password__rules {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--font-line-height-snug);
  }
  .password__rules li { display: flex; align-items: flex-start; gap: var(--space-1-5); }
  .password__rule-icon {
    flex-shrink: 0;
    inline-size: var(--icon-size-sm);
    block-size: var(--icon-size-sm);
    margin-block-start: var(--space-px);
  }
  .password__rules li[data-met="true"] { color: var(--color-feedback-success-fg); }
  .password__rules li[data-met="true"] .password__rule-icon--todo,
  .password__rules li:not([data-met="true"]) .password__rule-icon--met { display: none; }

  @media (forced-colors: active) {
    .password__toggle { border: var(--border-width-thin) solid ButtonText; }
    .password__meter { border: var(--border-width-thin) solid CanvasText; }
  }
}