@scope (pipeline-status-ui) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* State colors: the -active (accent) / -complete (success) dot-bg tokens were
     defined but never applied — these rules only set animation, so every dot
     stayed the default gray (--a-border). Now active dots read accent + pulse,
     complete dots read success. (bug-40 — "use color more") */
  [data-pipeline-dot="active"] {
    background:           var(--pipeline-status-dot-bg-active);
    animation:           pipeline-pulse var(--pipeline-status-pulse-duration) var(--pipeline-status-pulse-easing) infinite;
  }

  [data-pipeline-dot="complete"] {
    background:           var(--pipeline-status-dot-bg-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:       var(--pipeline-status-complete-fg);
    --pipeline-status-history-border: var(--pipeline-status-complete-border);
  }

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

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

  [data-pipeline-history] summary {
    cursor:              pointer;
    font-size:           var(--pipeline-status-history-size);
    color:               var(--pipeline-status-history-fg);
    user-select:         none;
    padding:             var(--pipeline-status-history-pad-y) 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-easing),
                         color      var(--pipeline-status-duration) var(--pipeline-status-easing);
  }

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

  [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);
  }

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

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

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