/* ═══════════════════════════════════════════════════════════════
   PASSWORD-STRENGTH-UI — 4-segment strength meter + label.
   ═══════════════════════════════════════════════════════════════ */

@scope (password-strength-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --password-strength-gap:            var(--a-space-1);
    --password-strength-segment-height: 4px;
    --password-strength-radius:         var(--a-radius-full);
    --password-strength-stack-gap:      var(--a-space-1);

    /* ── Colors ── */
    --password-strength-segment-bg:     var(--a-canvas-1-scrim);
    --password-strength-color-weak:     var(--a-danger-bg);
    --password-strength-color-fair:     var(--a-warning-bg);
    --password-strength-color-good:     var(--a-info-bg);
    --password-strength-color-strong:   var(--a-success-bg);

    /* ── Typography ── */
    --password-strength-label-fg:       var(--a-fg-muted);
    --password-strength-label-size:     var(--a-ui-sm);
    --password-strength-label-weight:   var(--a-weight-medium);

    /* ── Per-score label color (mirrors the lit-segment color so the
       label visually links to the bar fill state). ── */
    --password-strength-label-fg-weak:   var(--password-strength-color-weak);
    --password-strength-label-fg-fair:   var(--password-strength-color-fair);
    --password-strength-label-fg-good:   var(--password-strength-color-good);
    --password-strength-label-fg-strong: var(--password-strength-color-strong);
  }

  /* ── Host ── */
  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--password-strength-stack-gap);
    width: 100%;
  }

  /* ── Bar ── */
  [slot="bar"] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--password-strength-gap);
  }

  [slot="segment"] {
    height: var(--password-strength-segment-height);
    background: var(--password-strength-segment-bg);
    border-radius: var(--password-strength-radius);
    transition: background var(--a-duration-fast) var(--a-easing);
  }

  /* ── Lit segments — color depends on host [data-score] ── */
  :scope[data-score="0"] [slot="segment"][data-lit] { background: var(--password-strength-color-weak); }
  :scope[data-score="1"] [slot="segment"][data-lit] { background: var(--password-strength-color-fair); }
  :scope[data-score="2"] [slot="segment"][data-lit] { background: var(--password-strength-color-good); }
  :scope[data-score="3"] [slot="segment"][data-lit] { background: var(--password-strength-color-strong); }

  /* ── Label ── */
  [slot="label"] {
    font-size: var(--password-strength-label-size);
    font-weight: var(--password-strength-label-weight);
    color: var(--password-strength-label-fg);
    min-height: 1lh;  /* prevent layout jump when label appears */
  }

  :scope[data-score="0"] [slot="label"] { color: var(--password-strength-label-fg-weak); }
  :scope[data-score="1"] [slot="label"] { color: var(--password-strength-label-fg-fair); }
  :scope[data-score="2"] [slot="label"] { color: var(--password-strength-label-fg-good); }
  :scope[data-score="3"] [slot="label"] { color: var(--password-strength-label-fg-strong); }

  /* ── Hide label when [show-label] is false-y. The class.js clears
     the textContent in that case; this provides belt-and-suspenders. ── */
  :scope:not([show-label]) [slot="label"] {
    display: none;
  }
}
