@scope (agent-trace-ui) {
  :where(:scope) {
    /* ── Typography ── */
    --agent-trace-font:          var(--a-ui-sm);
    --agent-trace-label-font:    var(--a-ui-sm);

    /* ── Colors ── */
    --agent-trace-fg:            var(--a-fg);
    --agent-trace-fg-muted:      var(--a-fg-muted);
    --agent-trace-fg-subtle:     var(--a-fg-subtle);
    --agent-trace-sep:           var(--a-fg-subtle);
    --agent-trace-border:        var(--a-border-subtle);

    /* ── Layout ── */
    --agent-trace-pill-gap:      var(--a-space-1);
    --agent-trace-inline-gap:    var(--a-space-2);
    --agent-trace-block-gap:     var(--a-space-3);
    --agent-trace-padding-y:     var(--a-space-2);
    /* Component-intrinsic measurement; no --a-space-* equivalent */
    --agent-trace-dot-size:      6px;
    /* STAGE column width — `max-content` lets the longest label set the
       track so multi-word labels ("Rows returned", "Query duration",
       "Drift vs. SFDC") stay on one line; the `7rem` floor stops the
       column from collapsing when only short labels are present. */
    --agent-trace-row-label-col: minmax(7rem, max-content);
    /* Shared across every detail DL so values tabulate at the same x. */
    --agent-trace-detail-label-col: 9rem;

    /* ── Motion ── */
    --agent-trace-caret-dur:   var(--a-duration-fast);
  }

  :scope {
    display: block;
    font-size: var(--agent-trace-font);
    color: var(--agent-trace-fg-muted);
  }

  [data-trace-root] {
    padding-block: var(--agent-trace-padding-y);
  }

  [data-trace-root] > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--agent-trace-inline-gap);
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--a-radius-sm);
    padding: var(--a-space-0-5) var(--a-space-1);
    margin: calc(var(--a-space-0-5) * -1) calc(var(--a-space-1) * -1);
    transition: background var(--agent-trace-caret-dur);
  }

  [data-trace-root] > summary:hover {
    background: var(--a-bg-subtle);
  }

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

  [data-trace-root] > summary::-webkit-details-marker { display: none; }
  [data-trace-root] > summary::marker { content: ''; }

  [data-trace-status] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--agent-trace-inline-gap);
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
  }

  [data-trace-pill] {
    display: inline-flex;
    align-items: center;
    gap: var(--agent-trace-pill-gap);
    white-space: nowrap;
  }

  [data-trace-dot] {
    --a-icon-size: var(--agent-trace-dot-size);
    flex-shrink: 0;
    line-height: 0;
  }

  [data-trace-sep] {
    color: var(--agent-trace-sep);
    margin-inline: 2px;
  }

  [data-trace-caret] {
    flex-shrink: 0;
    transition: transform var(--agent-trace-caret-dur);
  }

  [data-trace-root][open] [data-trace-caret] {
    transform: rotate(90deg);
  }

  [data-trace-body] {
    display: flex;
    flex-direction: column;
    gap: var(--agent-trace-block-gap);
    margin-block-start: var(--agent-trace-block-gap);
  }

  /* Rows container — one grid, every row participates via subgrid.
     This is the only way to get score + detail to land on the same X
     across all rows; per-row grids let `max-content` widen the score
     track row-by-row, and "94/100" pushes its row's detail column ~16px
     right of "7%"'s detail column. Subgrid pulls the track widths up
     to the parent so every row sees the same column stops. */
  [data-trace-rows] {
    /* Track plan:
         [STAGE max-content]  ← label column; widened from 80px so multi-word
                                labels ("Rows returned", "Query duration",
                                "Drift vs. SFDC") stay on one line
         [SCORE max-content]  ← value column, right-aligned
         [DETAIL 1fr]         ← detail column, right-aligned content
       The DETAIL column still takes the leftover width, but its text is
       right-anchored ([data-trace-aux] { text-align: end }) so the
       previously-empty right edge becomes the alignment edge for detail
       text. The whitespace between SCORE and DETAIL reads as breathing
       room between key-value and qualifier rather than dead air. */
    --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr;
    display: grid;
    grid-template-columns: var(--trace-row-cols);
    column-gap: var(--agent-trace-block-gap);
  }

  [data-trace-rows][data-has-details] {
    --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr auto;
  }

  /* Each row + the headers row + each <details>'s <summary> all use
     subgrid so they inherit the parent's column stops. <details> itself
     is also a grid child so its open-state body can span all columns. */
  [data-trace-headers],
  div[data-trace-row],
  details[data-trace-row],
  details[data-trace-row] > summary {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: var(--agent-trace-block-gap);
    align-items: baseline;
    min-width: 0;
  }

  details[data-trace-row] > [data-trace-row-body] {
    grid-column: 1 / -1;
  }

  /* Column headers — small caps with subtle underline */
  [data-trace-headers] {
    padding-block-end: var(--a-space-1);
    border-block-end: 1px solid var(--agent-trace-border);
    margin-block-end: var(--a-space-1);
  }

  [data-trace-header] {
    font-size: calc(var(--agent-trace-font) * 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--a-weight-medium);
    color: var(--agent-trace-fg-subtle);
  }

  [data-trace-header]:nth-of-type(2),
  [data-trace-header]:nth-of-type(3) {
    text-align: end;
  }

  /* Rows */
  [data-trace-row] {
    padding-block: var(--a-space-0-5);
    border-radius: var(--a-radius-sm);
  }

  details[data-trace-row] > summary {
    cursor: pointer;
    list-style: none;
    padding-block: var(--a-space-0-5);
    border-radius: var(--a-radius-sm);
    transition: background var(--a-duration-fast);
  }

  details[data-trace-row] > summary::-webkit-details-marker { display: none; }
  details[data-trace-row] > summary::marker { content: ''; }

  details[data-trace-row] > summary:hover {
    background: var(--a-bg-subtle);
  }

  details[data-trace-row] > summary:focus-visible {
    outline: none;
    box-shadow: var(--a-focus-ring);
  }

  [data-trace-label] {
    color: var(--agent-trace-fg-subtle);
  }

  [data-trace-value] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--agent-trace-fg);
  }

  [data-trace-aux] {
    /* Right-anchor the detail text so it sits flush with the right edge
       of the row. Without this, the 1fr detail column left-aligns its
       content (typically a 1-3 word qualifier like "warehouse" or
       "reconciled") and the rest of the column reads as dead width. */
    color: var(--agent-trace-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: end;
  }

  /* Caret in the trailing column */
  [data-trace-row-caret] {
    --a-icon-size: 0.875em;
    justify-self: end;
    align-self: center;
    transition: transform var(--a-duration-fast) var(--agent-trace-caret-dur, var(--a-duration-fast));
    color: var(--agent-trace-fg-muted);
  }

  details[data-trace-row][open] > summary > [data-trace-row-caret] {
    transform: rotate(90deg);
  }

  [data-trace-row-caret-spacer] {
    width: 0.875em;
    justify-self: end;
  }

  [data-trace-header-spacer] { justify-self: end; }

  /* Details body — tree-style: line hangs under the first column, children
     indent off it. Matches the chain-of-thought reasoning affordance. */
  [data-trace-row-body] {
    margin-block: var(--a-space-1) var(--a-space-2);
    margin-inline-start: var(--a-space-2);
    padding-inline-start: var(--agent-trace-block-gap);
    border-inline-start: 1px solid var(--agent-trace-border);
  }

  [data-trace-dl] {
    display: grid;
    grid-template-columns: var(--agent-trace-detail-label-col) 1fr;
    column-gap: var(--agent-trace-block-gap);
    row-gap: var(--a-space-0-5);
    margin: 0;
    align-items: baseline;
  }

  [data-trace-dl] > dt {
    color: var(--agent-trace-fg-subtle);
    font-size: calc(var(--agent-trace-font) * 0.95);
  }

  [data-trace-dl] > dd {
    margin: 0;
    color: var(--agent-trace-fg);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow-wrap: break-word;
  }

  [data-trace-feedback] {
    display: flex;
    flex-direction: column;
    gap: var(--a-space-1);
    padding-block-start: var(--agent-trace-inline-gap);
    border-block-start: 1px solid var(--agent-trace-border);
  }

  [data-trace-feedback-label] {
    color: var(--agent-trace-fg-subtle);
    font-size: calc(var(--agent-trace-label-font) * 0.85);
    font-weight: var(--a-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-block-end: var(--a-space-1);
  }

  /* Feedback lines — icon sits like a list bullet, sized to 1em so it
     scales with the line's font-size. Grid gives a consistent indent
     regardless of icon or text length. */
  [data-trace-feedback] [data-trace-line] {
    display: grid;
    grid-template-columns: 1em 1fr;
    column-gap: var(--agent-trace-inline-gap);
    align-items: baseline;
    line-height: 1.5;
    font-size: var(--agent-trace-font);
    color: var(--agent-trace-fg);
  }

  [data-trace-feedback] [data-trace-line] > icon-ui {
    --a-icon-size: 1em;
    align-self: center;
    line-height: 0;
  }

  [data-trace-feedback] [data-trace-line] > span {
    min-width: 0;
    overflow-wrap: break-word;
    color: var(--agent-trace-fg-muted);
  }
}
