@scope (pipeline-status-ui) {

  /* ─────────────────────────────────────────────
     Block 1 — TOKENS
     ───────────────────────────────────────────── */
  :where(:scope) {
    /* Layout */
    --pipeline-status-gap-default:             var(--a-space-1);
    --pipeline-status-column-gap-default:      var(--a-space-1);
    --pipeline-status-py-default:              var(--a-space-2);
    --pipeline-status-px-default:              var(--a-space-2);
    --pipeline-status-current-min-h-default:   1.5em;
    --pipeline-status-history-pt-default:      var(--a-space-1);
    --pipeline-status-history-pad-y-default:   var(--a-space-0);
    --pipeline-status-log-pt-default:          var(--a-space-1);
    --pipeline-status-log-gap-default:         var(--a-space-0);

    /* Dot sizing (aliased to spacing tokens to avoid raw px ≥ 3) */
    --pipeline-status-dot-size-default:        var(--a-space-2);    /*  8px at d=1 */
    --pipeline-status-log-dot-size-default:    var(--a-space-1-5);  /*  6px at d=1 */

    /* Typography */
    --pipeline-status-font-family-default:     var(--a-font-family);
    --pipeline-status-font-size-default:       var(--a-ui-sm);
    --pipeline-status-history-size-default:    var(--a-ui-tiny);
    --pipeline-status-log-size-default:        var(--a-ui-tiny);
    --pipeline-status-label-weight-default:    var(--a-weight-medium);

    /* Colors — keep aliases referenced via semantic tokens */
    --pipeline-status-fg-default:              var(--a-fg-subtle);
    --pipeline-status-label-fg-default:        var(--a-fg);
    --pipeline-status-msg-fg-default:          var(--a-fg-subtle);
    --pipeline-status-history-fg-default:      var(--a-fg-subtle);
    --pipeline-status-log-fg-default:          var(--a-fg-subtle);

    --pipeline-status-dot-bg-default:          var(--a-border);
    --pipeline-status-dot-bg-active-default:   var(--a-accent);
    --pipeline-status-dot-bg-complete-default: var(--a-success-strong);

    --pipeline-status-history-border-default:  var(--a-border-subtle);
    --pipeline-status-border-thin-default:     1px;

    /* Motion */
    --pipeline-status-duration-default:        var(--a-duration);
    --pipeline-status-easing-default:          var(--a-easing);
    /* Infinite-pulse durations don't map to motion scale */
    --pipeline-status-pulse-duration-default:  1.2s;
    --pipeline-status-pulse-easing-default:    ease-in-out;

    /* Variant targets */
    --pipeline-status-complete-fg-default:     var(--a-success-strong);
    --pipeline-status-complete-border-default: var(--a-success-strong);
  }

  /* ─────────────────────────────────────────────
     Block 2 — BASE styles (tokens only)
     ───────────────────────────────────────────── */
  :scope {
    display:             block;
    font-family:         var(--pipeline-status-font-family, var(--pipeline-status-font-family-default));
    font-size:           var(--pipeline-status-font-size, var(--pipeline-status-font-size-default));
    color:               var(--pipeline-status-fg, var(--pipeline-status-fg-default));
  }

  [data-pipeline-status] {
    display:             flex;
    flex-direction:      column;
    gap:                 var(--pipeline-status-gap, var(--pipeline-status-gap-default));
    padding:             var(--pipeline-status-py, var(--pipeline-status-py-default)) var(--pipeline-status-px, var(--pipeline-status-px-default));
  }

  /* Current stage */
  [data-pipeline-current] {
    display:             flex;
    align-items:         center;
    gap:                 var(--pipeline-status-column-gap, var(--pipeline-status-column-gap-default));
    min-height:          var(--pipeline-status-current-min-h, var(--pipeline-status-current-min-h-default));
  }

  [data-pipeline-label] {
    font-weight:         var(--pipeline-status-label-weight, var(--pipeline-status-label-weight-default));
    color:               var(--pipeline-status-label-fg, var(--pipeline-status-label-fg-default));
  }

  [data-pipeline-msg] {
    color:               var(--pipeline-status-msg-fg, var(--pipeline-status-msg-fg-default));
  }

  /* Dot indicator */
  [data-pipeline-dot] {
    flex-shrink:         0;
    width:               var(--pipeline-status-dot-size, var(--pipeline-status-dot-size-default));
    height:              var(--pipeline-status-dot-size, var(--pipeline-status-dot-size-default));
    border-radius:       50%;
    background:          var(--pipeline-status-dot-bg, var(--pipeline-status-dot-bg-default));
    transition:          background var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default));
  }

  [data-pipeline-dot="active"] {
    animation:           pipeline-pulse var(--pipeline-status-pulse-duration, var(--pipeline-status-pulse-duration-default)) var(--pipeline-status-pulse-easing, var(--pipeline-status-pulse-easing-default)) infinite;
  }

  [data-pipeline-dot="complete"] {
    animation:           none;
  }

  @keyframes pipeline-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
  }

  /* Complete state — override tokens only */
  :scope[status="completed"] {
    --pipeline-status-label-fg-default:       var(--pipeline-status-complete-fg, var(--pipeline-status-complete-fg-default));
    --pipeline-status-history-border-default: var(--pipeline-status-complete-border, var(--pipeline-status-complete-border-default));
  }

  /* History (expandable) */
  [data-pipeline-history] {
    border-top:          var(--pipeline-status-border-thin, var(--pipeline-status-border-thin-default)) solid var(--pipeline-status-history-border, var(--pipeline-status-history-border-default));
    padding-top:         var(--pipeline-status-history-pt, var(--pipeline-status-history-pt-default));
  }

  [data-pipeline-history][hidden] {
    display:             none;
  }

  [data-pipeline-history] summary {
    cursor:              pointer;
    font-size:           var(--pipeline-status-history-size, var(--pipeline-status-history-size-default));
    color:               var(--pipeline-status-history-fg, var(--pipeline-status-history-fg-default));
    user-select:         none;
    padding:             var(--pipeline-status-history-pad-y, var(--pipeline-status-history-pad-y-default)) var(--a-space-1);
    margin-inline:       calc(var(--a-space-1) * -1);
    border-radius:       var(--a-radius-sm);
    transition:          background var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default)),
                         color      var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default));
  }

  [data-pipeline-history] summary:hover {
    background:          var(--a-bg-subtle);
    color:               var(--pipeline-status-label-fg, var(--pipeline-status-label-fg-default));
  }

  [data-pipeline-history] summary:focus-visible {
    outline:             none;
    box-shadow:          var(--a-focus-ring);
  }

  [data-pipeline-history] summary::marker {
    color:               var(--pipeline-status-history-fg, var(--pipeline-status-history-fg-default));
  }

  /* Log list */
  [data-pipeline-log] {
    list-style:          none;
    margin:              0;
    padding:             var(--pipeline-status-log-pt, var(--pipeline-status-log-pt-default)) 0 0 0;
    display:             flex;
    flex-direction:      column;
    gap:                 var(--pipeline-status-log-gap, var(--pipeline-status-log-gap-default));
  }

  [data-pipeline-log] li {
    display:             flex;
    align-items:         center;
    gap:                 var(--pipeline-status-column-gap, var(--pipeline-status-column-gap-default));
    font-size:           var(--pipeline-status-log-size, var(--pipeline-status-log-size-default));
    color:               var(--pipeline-status-log-fg, var(--pipeline-status-log-fg-default));
  }

  [data-pipeline-log] [data-pipeline-dot] {
    width:               var(--pipeline-status-log-dot-size, var(--pipeline-status-log-dot-size-default));
    height:              var(--pipeline-status-log-dot-size, var(--pipeline-status-log-dot-size-default));
  }
}
