/* ═══════════════════════════════════════════════════════════════
   STEPPER-UI + STEPPER-ITEM-UI

   Two-element component. Each gets its own @scope block —
   stepper-item-ui is co-located in stepper.js but is a real
   custom element and must follow the two-block @scope pattern.

   Wizard-style numbered circles, auto-checkmark on completed,
   connector line. Parent `step` index drives child state.
   ═══════════════════════════════════════════════════════════════ */

@scope (stepper-ui) {
  :where(:scope) {
    /* ── Circle ── */
    --stepper-size:            2rem;
    --stepper-bg:              var(--a-bg);
    --stepper-border:          var(--a-border);
    --stepper-fg:              var(--a-fg-muted);
    --stepper-font:            var(--a-ui-sm);
    --stepper-weight:          var(--a-weight-medium);
    --stepper-border-size:     2px;

    --stepper-bg-active:       var(--a-bg);
    --stepper-border-active:   var(--a-accent);
    --stepper-fg-active:       var(--a-accent);

    --stepper-bg-done:         var(--a-accent);
    --stepper-border-done:     var(--a-accent);
    --stepper-fg-done:         var(--a-accent-fg);

    --stepper-line:            var(--a-border-subtle);
    --stepper-line-done:       var(--a-accent);
    --stepper-line-size:       2px;

    /* ── Layout ──
       Parent tokens use the bare `--stepper-*` name (no `-item-` infix)
       so the child's `:where(stepper-item-ui)` block can pull from
       parent → child via `var(--stepper-X, …)` without name collisions.
       A self-named child declaration like
       `--stepper-item-gap-sm: var(--stepper-item-gap-sm, …)` resolves
       to invalid (cycle), which silently breaks any calc() that
       consumes it. */
    --stepper-radius-full:     var(--a-radius-full);
    --stepper-gap:             var(--a-space-3);
    --stepper-gap-sm:          var(--a-space-2);
    --stepper-pad-x:           var(--a-space-4);
    --stepper-pad-y:           var(--a-space-6);
    --stepper-offset-xs:       var(--a-space-1);
    --stepper-min-width:       5rem;
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    counter-reset: step;
    gap: 0;
    min-width: 0;
  }

  :scope[orientation="vertical"] {
    flex-direction: column;
  }
}

@scope (stepper-item-ui) {
  :where(:scope) {
    /* Inherit parent stepper-ui's circle/line tokens by name —
       co-located item legitimately reads parent tokens (the same
       scope pattern as menu-item-ui inside menu-ui's popover). */
    --stepper-item-size:           var(--stepper-size, 2rem);
    --stepper-item-bg:             var(--stepper-bg, var(--a-bg));
    --stepper-item-border:         var(--stepper-border, var(--a-border));
    --stepper-item-fg:             var(--stepper-fg, var(--a-fg-muted));
    --stepper-item-font:           var(--stepper-font, var(--a-ui-sm));
    --stepper-item-weight:         var(--stepper-weight, var(--a-weight-medium));
    --stepper-item-border-size:    var(--stepper-border-size, 2px);

    --stepper-item-bg-active:      var(--stepper-bg-active, var(--a-bg));
    --stepper-item-border-active:  var(--stepper-border-active, var(--a-accent));
    --stepper-item-fg-active:      var(--stepper-fg-active, var(--a-accent));

    --stepper-item-bg-done:        var(--stepper-bg-done, var(--a-accent));
    --stepper-item-border-done:    var(--stepper-border-done, var(--a-accent));
    --stepper-item-fg-done:        var(--stepper-fg-done, var(--a-accent-fg));

    --stepper-item-line:           var(--stepper-line, var(--a-border-subtle));
    --stepper-item-line-done:      var(--stepper-line-done, var(--a-accent));
    --stepper-item-line-size:      var(--stepper-line-size, 2px);

    --stepper-item-radius-full:    var(--a-radius-full);
    --stepper-item-gap:            var(--stepper-gap, var(--a-space-3));
    --stepper-item-gap-sm:         var(--stepper-gap-sm, var(--a-space-2));
    --stepper-item-pad-x:          var(--stepper-pad-x, var(--a-space-4));
    --stepper-item-pad-y:          var(--stepper-pad-y, var(--a-space-6));
    --stepper-item-offset-xs:      var(--stepper-offset-xs, var(--a-space-1));
    --stepper-item-min-width:      var(--stepper-min-width, 5rem);

    --stepper-item-label-weight:   var(--a-weight-medium);
    --stepper-item-label-size:     var(--a-ui-size);
    --stepper-item-label-fg:       var(--a-fg);
    --stepper-item-pending-fg:     var(--a-fg-muted);
    --stepper-item-desc-fg:        var(--a-fg-subtle);
    --stepper-item-desc-size:      var(--a-ui-sm);

    --stepper-item-icon-size:      0.625rem;
  }

  :scope {
    box-sizing: border-box;
    position: relative;
    display: block;
    counter-increment: step;
    flex: 1;
    min-width: var(--stepper-item-min-width);
    text-align: center;
    padding-top: calc(var(--stepper-item-size) + var(--stepper-item-gap-sm));
    padding-left: 0;
    padding-bottom: 0;
  }

  /* Numbered circle */
  :scope::after {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--stepper-item-size);
    height: var(--stepper-item-size);
    border-radius: var(--stepper-item-radius-full);
    border: var(--stepper-item-border-size) solid var(--stepper-item-border);
    background: var(--stepper-item-bg);
    color: var(--stepper-item-fg);
    font-size: var(--stepper-item-font);
    font-weight: var(--stepper-item-weight);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 1;
  }

  /* Connector line */
  :scope::before {
    content: '';
    position: absolute;
    top: calc(var(--stepper-item-size) / 2);
    left: calc(50% + var(--stepper-item-size) / 2 + 2px);
    right: calc(-50% + var(--stepper-item-size) / 2 + 2px);
    height: var(--stepper-item-line-size);
    background: var(--stepper-item-line);
  }

  :scope[data-last]::before {
    display: none;
  }

  /* Active state */
  :scope[status="active"]::after {
    border-color: var(--stepper-item-border-active);
    color: var(--stepper-item-fg-active);
    background: var(--stepper-item-bg-active);
  }

  :scope[status="active"] [slot="label"] {
    color: var(--stepper-item-label-fg);
    font-weight: var(--stepper-item-label-weight);
  }

  /* Completed state — checkmark replaces number */
  :scope[status="completed"]::after {
    content: '\2713';
    background: var(--stepper-item-bg-done);
    border-color: var(--stepper-item-border-done);
    color: var(--stepper-item-fg-done);
  }

  :scope[status="completed"]::before {
    background: var(--stepper-item-line-done);
  }

  :scope[status="completed"] [slot="label"] {
    color: var(--stepper-item-label-fg);
  }

  /* Pending label */
  :scope:not([status="active"]):not([status="completed"]) [slot="label"] {
    color: var(--stepper-item-pending-fg);
  }

  /* Icon replaces number */
  :scope:has([slot="icon"])::after {
    content: '';
    font-size: 0;
  }

  :scope [slot="icon"] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--stepper-item-size);
    height: var(--stepper-item-size);
    border-radius: var(--stepper-item-radius-full);
    border: var(--stepper-item-border-size) solid var(--stepper-item-border);
    background: var(--stepper-item-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    --a-icon-size: var(--stepper-item-icon-size);
    color: var(--stepper-item-fg);
    z-index: 1;
  }

  :scope[status="active"] [slot="icon"] {
    border-color: var(--stepper-item-border-active);
    color: var(--stepper-item-fg-active);
    background: var(--stepper-item-bg-active);
  }

  :scope[status="completed"] [slot="icon"] {
    background: var(--stepper-item-bg-done);
    border-color: var(--stepper-item-border-done);
    color: var(--stepper-item-fg-done);
  }

  /* ── Content slots ── */

  :scope [slot="label"] {
    display: block;
    font-weight: var(--stepper-item-label-weight);
    font-size: var(--stepper-item-label-size);
    line-height: 1.4;
    color: var(--stepper-item-label-fg);
    min-width: 0;
    overflow-wrap: break-word;
  }

  :scope [slot="description"] {
    display: block;
    margin-top: var(--stepper-item-offset-xs);
    color: var(--stepper-item-desc-fg);
    font-size: var(--stepper-item-desc-size);
    line-height: 1.5;
  }

  :scope [slot]:empty {
    display: none;
  }
}

/* ── Vertical orientation rules — must reach across stepper-ui →
       stepper-item-ui boundary, kept outside @scope. ── */

stepper-ui[orientation="vertical"] > stepper-item-ui {
  flex: none;
  text-align: left;
  padding-top: 0;
  padding-left: calc(var(--stepper-item-size) + var(--stepper-item-pad-x));
  padding-bottom: var(--stepper-item-pad-y);
  min-height: var(--stepper-item-size);
}

stepper-ui[orientation="vertical"] > stepper-item-ui::after {
  left: 0;
  top: 0;
  transform: none;
}

stepper-ui[orientation="vertical"] > stepper-item-ui::before {
  left: calc(var(--stepper-item-size) / 2 - 1px);
  transform: none;
  top: calc(var(--stepper-item-size) + var(--stepper-item-offset-xs));
  right: auto;
  width: var(--stepper-item-line-size);
  height: auto;
  bottom: 0;
}

stepper-ui[orientation="vertical"] > stepper-item-ui [slot="icon"] {
  left: 0;
  transform: none;
}

stepper-ui[orientation="vertical"] > stepper-item-ui[data-last] {
  padding-bottom: 0;
}
