@scope (agent-reasoning-ui) {
  :where(:scope) {
    /* Grid — same columns as timeline-ui so they align via subgrid */
    --agent-reasoning-marker-w:        1rem;
    --agent-reasoning-gap-col:         var(--a-space-2);
    --agent-reasoning-gap-row:         var(--a-space-2);

    /* Typography */
    --agent-reasoning-font:            var(--a-ui-sm);
    --agent-reasoning-weight-heading:  var(--a-weight-medium);

    /* Colors */
    --agent-reasoning-fg:              var(--a-fg);
    --agent-reasoning-fg-muted:        var(--a-fg-muted);
    --agent-reasoning-fg-subtle:       var(--a-fg-subtle);
    --agent-reasoning-border:          var(--a-border-subtle);
    --agent-reasoning-spinner-track:   var(--a-border-subtle);
    --agent-reasoning-spinner-head:    var(--a-accent-bg);
    --agent-reasoning-iter-bg:         var(--a-bg-subtle);
    --agent-reasoning-iter-bg-active:  var(--a-bg-muted);
    --agent-reasoning-iter-border:     var(--a-border-subtle);

    /* Sizes */
    --agent-reasoning-marker-size:     var(--a-icon-size);
    --agent-reasoning-radius:          var(--a-radius);
    --agent-reasoning-iter-padding:    var(--a-space-3);

    /* Motion */
    --agent-reasoning-duration:        var(--a-duration-fast);
    --agent-reasoning-easing:          var(--a-easing-out);
    --agent-reasoning-spin-duration:   0.8s;
  }

  :scope {
    display: grid;
    grid-template-columns:
      [marker] var(--agent-reasoning-marker-w)
      [content] 1fr
      [aside] auto;
    column-gap: var(--agent-reasoning-gap-col);
    row-gap: var(--agent-reasoning-gap-row);
    min-width: 0;
    font-size: var(--agent-reasoning-font);
    color: var(--agent-reasoning-fg);
  }

  /* ═══════ Summary row ═══════ */

  [data-reasoning-summary] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding-bottom: var(--a-space-1);
    color: var(--agent-reasoning-fg-muted);
    border-radius: var(--a-radius-sm);
    transition: color var(--agent-reasoning-duration) var(--agent-reasoning-easing);
  }

  [data-reasoning-summary]:hover {
    color: var(--agent-reasoning-fg);
  }

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

  [data-reasoning-summary] > [data-reasoning-check],
  [data-reasoning-summary] > [data-reasoning-spinner] {
    grid-column: marker;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    flex-shrink: 0;
  }

  [data-reasoning-spinner] {
    width: var(--agent-reasoning-marker-size);
    height: var(--agent-reasoning-marker-size);
    border: 1.5px solid var(--agent-reasoning-spinner-track);
    border-top-color: var(--agent-reasoning-spinner-head);
    border-radius: 50%;
    animation: _ar-spin var(--agent-reasoning-spin-duration) linear infinite;
    box-sizing: border-box;
  }

  [data-reasoning-spinner][data-small] {
    width: calc(var(--agent-reasoning-marker-size) * 0.75);
    height: calc(var(--agent-reasoning-marker-size) * 0.75);
  }

  [data-reasoning-check] {
    --a-icon-size: var(--agent-reasoning-marker-size);
  }

  [data-reasoning-summary] > [data-reasoning-label] {
    grid-column: content;
    grid-row: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  [data-reasoning-summary] > [data-reasoning-meta] {
    grid-column: aside;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--agent-reasoning-gap-col);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* ═══════ Body ═══════ */

  [data-reasoning-body] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    row-gap: var(--agent-reasoning-gap-row);
    position: relative;
  }

  [data-reasoning-body][hidden] { display: none; }

  /* ═══════ Connector spine ═══════
     A single continuous line down the marker column from the first step dot to
     the last, bridging plan / thought / iteration interstitials so the run
     reads as one timeline rather than fragmented per-block stubs. Endpoints are
     JS-measured into --reasoning-spine-top / -h (#layoutSpine) — interstitial
     heights are dynamic, so pure CSS can't place them. The x matches the step
     dot center (timeline-item uses var(--timeline-marker-w, 1.25rem) for its
     dot math). Sits behind the dots (z-index 0 < the dots' z-index 1). The
     per-item timeline connectors are suppressed below so they don't double-draw. */
  [data-reasoning-body][data-spine]::before {
    content: '';
    position: absolute;
    left: calc(var(--timeline-marker-w, 1.25rem) / 2 - var(--agent-reasoning-line-w, 1.5px) / 2);
    top: var(--reasoning-spine-top, 0);
    height: var(--reasoning-spine-h, 0);
    width: var(--agent-reasoning-line-w, 1.5px);
    background: var(--agent-reasoning-border);
    z-index: 0;
  }

  /* All direct children of body span the grid */
  [data-reasoning-body] > * {
    grid-column: 1 / -1;
  }

  /* Step rows + their readouts use the mono family — a technical step trace
     (generate:/validate:/…) reads better fixed-width, matching the reference.
     The iteration header ([data-reasoning-iter-n]) keeps the UI sans font. */
  [data-reasoning-body] timeline-item-ui {
    font-family: var(--a-font-family-code);
  }

  /* ═══════ Thought — horizontal dash in marker column, text in content ═══════ */

  /* Thoughts are free-form annotations beside the spine — text in the content
     column, no marker dot/dash (the continuous spine passes behind them). */
  [data-reasoning-thought] {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    line-height: 1.5;
    color: var(--agent-reasoning-fg-muted);
    animation: _ar-fade var(--agent-reasoning-duration) var(--agent-reasoning-easing);
  }

  [data-reasoning-thought] > [data-reasoning-thought-text] {
    grid-column: content / -1;
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* ═══════ Plan — card in content+aside, marker empty ═══════ */

  /* Plan reads as a flat up-front checklist in the content column — no bordered
     box (that competed with the now-flattened iteration sections, the original
     bug-03 "inconsistent card hierarchy" complaint). The PLAN label + ordered
     list carry the distinction; the spine passes down its left. */
  [data-reasoning-plan] {
    grid-column: content / -1;
    display: flex;
    flex-direction: column;
    gap: var(--a-space-1);
  }

  [data-reasoning-plan-label] {
    font-size: var(--agent-reasoning-font);
    color: var(--agent-reasoning-fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--agent-reasoning-weight-heading);
  }

  [data-reasoning-plan-list] {
    margin: 0;
    padding-inline-start: var(--a-space-5);
    font-size: var(--agent-reasoning-font);
    color: var(--agent-reasoning-fg);
  }

  [data-reasoning-plan-list] > li {
    padding-block: 1px;
  }

  /* ═══════ Iteration — card with its own grid ═══════ */

  /* Iterations read as continuous timeline sections (a status-icon header row
     + its nested steps tied by the timeline connector), NOT as bordered cards
     that compete with the PLAN block. Flattened: no border / no fill / no box
     padding — just the grid + row rhythm. (bug-03) */
  [data-reasoning-iteration] {
    display: grid;
    grid-template-columns:
      [marker] var(--agent-reasoning-marker-w)
      [content] 1fr
      [aside] auto;
    column-gap: var(--agent-reasoning-gap-col);
    row-gap: var(--a-space-2);
  }

  [data-reasoning-iter-header] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    color: var(--agent-reasoning-fg-muted);
  }

  [data-reasoning-iter-header] > [data-reasoning-spinner],
  [data-reasoning-iter-header] > icon-ui {
    grid-column: marker;
    justify-self: center;
    align-self: center;
  }

  [data-reasoning-iter-n] {
    grid-column: content;
    font-variant-numeric: tabular-nums;
    color: var(--agent-reasoning-fg-subtle);
    font-weight: var(--agent-reasoning-weight-heading);
    white-space: nowrap;
  }

  [data-reasoning-iter-label] {
    grid-column: content;
    justify-self: start;
    margin-inline-start: var(--a-space-2);
    color: var(--agent-reasoning-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Compact: pack iter-n + label into a single row cell */
  [data-reasoning-iter-header] {
    display: flex;
    align-items: center;
    gap: var(--a-space-2);
    grid-column: 1 / -1;
  }

  [data-reasoning-iter-header] > [data-reasoning-iter-n] {
    grid-column: auto;
  }
  [data-reasoning-iter-header] > [data-reasoning-iter-label] {
    grid-column: auto;
    margin-inline-start: 0;
    flex: 1;
  }

  [data-reasoning-iter-summary] {
    color: var(--agent-reasoning-fg-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: var(--agent-reasoning-font);
  }

  /* ═══════ Animations ═══════ */

  @keyframes _ar-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes _ar-fade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-reasoning-spinner] { animation: none; }
  }
}

/* ═══════ Suppress timeline's own per-row connector inside agent-reasoning ═══════
   The continuous body spine (see [data-reasoning-body][data-spine]::before)
   owns the connector here; timeline-item's own ::after would double-draw and
   fragment at every block boundary (each timeline-ui block stamps data-last on
   its own last item, dropping that segment mid-run). This lives OUTSIDE @scope
   and carries [data-step-id] (stamped on every step by #makeStepItem) to clear
   timeline.css's :scope::after specificity ([0,1,1] → this is [0,1,3]). The
   step dots (::before) are untouched. */
agent-reasoning-ui timeline-item-ui[data-step-id]::after { display: none; }
