/* pipeline.js: the #/pipeline page. The head and the count tiles reuse
 * work.css (.work-head, .work-tiles); this file draws the funnel, the
 * filter chips, the rows with their agent tracks, the legend and the agent
 * table a row opens. One colour per agent state, the same in the track,
 * the pills and the legend; a row's state is its word, never an edge bar.
 * Rows, tiles and the funnel are one fill step off the page, no border.
 * Tokens only. */

.transcript:has(> .pipeline-page) { --reading: 76rem; }
.pipeline-page { --pipe-done: var(--ws-working); --pipe-run: var(--sv-ink-secondary); --pipe-stall: var(--sv-attention); --pipe-help: var(--sv-danger); --pipe-wait: var(--sv-fill-3); }
.pipe-lede { margin: 0; max-width: 60ch; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }

.pipeline-page .work-tile { border: 0; background: var(--sv-fill-2); }
.pipeline-page .work-tile[data-tone="bad"] .work-tile-value { color: var(--pipe-help); }
.pipeline-page .work-tile[data-tone="review"] .work-tile-value { color: var(--pipe-stall); }
.pipeline-page .work-tile[data-tone="good"] .work-tile-value { color: var(--ws-working-ink); }

/* ---- the funnel ---- */
.pipe-funnel { display: flex; flex-wrap: wrap; gap: 2px; margin: var(--sv-space-3) 0 0; padding: 0; list-style: none; border-radius: var(--sv-radius); overflow: hidden; }
.pipe-stage { flex: 1 1 7rem; display: grid; gap: 2px; padding: var(--sv-space-2) var(--sv-space-3); background: var(--sv-fill-2); }
.pipe-stage b { font-size: var(--sv-text-h4); font-weight: 600; font-variant-numeric: tabular-nums; }
.pipe-stage span { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }

/* ---- the filters ---- */
.pipe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2) var(--sv-space-3); margin: var(--sv-space-3) 0 0; }
.pipe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pipe-chip { min-height: 32px; padding: 0 var(--sv-space-3); border: 0; border-radius: 999px; background: var(--sv-fill-1); color: var(--sv-ink-secondary); font-size: var(--ui-meta); cursor: pointer; }
.pipe-chip:hover { background: var(--sv-fill-3); color: var(--sv-ink); }
.pipe-chip[aria-pressed="true"] { background: var(--sv-ink); color: var(--sv-surface); }
.pipe-search { flex: 1 1 14rem; min-height: 32px; padding: 0 var(--sv-space-3); }

/* ---- the legend ---- */
.pipe-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sv-space-3); margin: var(--sv-space-2) 0 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.pipe-key { display: inline-flex; align-items: center; gap: 6px; }
.pipe-key .pipe-seg { flex: 0 0 auto; width: 14px; }

/* ---- the rows ---- */
.pipe-body { display: grid; gap: var(--sv-space-2); margin-top: var(--sv-space-3); }
.pipe-shown { margin: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.pipe-row { border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-fill-2); overflow: hidden; }
.pipe-main { display: grid; gap: 6px; width: 100%; padding: var(--sv-space-3); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--sv-dur-instant) var(--sv-ease-out); }
.pipe-main:hover { background: var(--sv-fill-1); }
.pipe-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sv-space-2); min-width: 0; }
.pipe-name { font-weight: 600; overflow-wrap: anywhere; }
.pipe-kind, .pipe-new { padding: 1px 8px; border-radius: 999px; background: var(--sv-fill-2); color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.pipe-new { background: color-mix(in srgb, var(--ws-working) 14%, transparent); color: var(--ws-working-ink); font-weight: 600; }
.pipe-where, .pipe-meta, .pipe-count { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow-wrap: anywhere; }
.pipe-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sv-space-3); }
.pipe-count { font-variant-numeric: tabular-nums; }

/* The state pill: the item's word and each agent's in the table. */
.pipe-state { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--sv-fill-2); color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-weight: 600; white-space: nowrap; }
.pipe-state[data-state="finished"] { background: color-mix(in srgb, var(--pipe-done) 14%, transparent); color: var(--ws-working-ink); }
.pipe-state[data-state="running"] { background: color-mix(in srgb, var(--pipe-run) 14%, transparent); color: var(--sv-ink); }
.pipe-state[data-state="stalled"], .pipe-state[data-state="needs_person"] { background: color-mix(in srgb, var(--pipe-stall) 16%, transparent); color: var(--sv-attention); }
.pipe-state[data-state="needs_help"] { background: color-mix(in srgb, var(--pipe-help) 12%, transparent); color: var(--sv-danger); }

/* The agent track: one segment per step. */
.pipe-track { display: flex; flex: 1 1 16rem; gap: 2px; min-width: 10rem; max-width: 34rem; }
.pipe-seg { flex: 1 1 0; display: block; height: 10px; border-radius: 2px; background: var(--pipe-wait); }
.pipe-seg[data-state="finished"] { background: var(--pipe-done); }
.pipe-seg[data-state="running"] { background: var(--pipe-run); animation: sv-breathe var(--pulse) var(--sv-ease-inout) infinite; }
.pipe-seg[data-state="stalled"] { background: var(--pipe-stall); }
.pipe-seg[data-state="needs_help"] { background: var(--pipe-help); }
.pipe-seg[data-state="blocked"], .pipe-seg[data-state="cancelled"] { background: repeating-linear-gradient(135deg, var(--pipe-wait) 0 3px, var(--sv-fill-5) 3px 5px); }
.pipe-none { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }

.pipe-note { display: grid; gap: 4px; padding: 0 var(--sv-space-3) var(--sv-space-3); }
.pipe-note > p { margin: 0; font-size: var(--ui-meta); overflow-wrap: anywhere; }
.pipe-why { color: var(--sv-danger); }
.pipe-row[data-state="stalled"] .pipe-why { color: var(--sv-attention); }
.pipe-next { color: var(--sv-ink-secondary); }
.pipe-link { justify-self: start; font-size: var(--ui-meta); }
.pipe-more { justify-self: start; min-height: 40px; padding: 0 var(--sv-space-3); }

/* ---- the agent table a row opens ---- */
.pipe-detail { padding: 0 var(--sv-space-3) var(--sv-space-3); overflow-x: auto; }
.pipe-steps { width: 100%; border-collapse: collapse; font-size: var(--ui-meta); }
.pipe-steps th { padding: 6px 8px; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); color: var(--sv-ink-tertiary); font-weight: 500; text-align: left; white-space: nowrap; }
.pipe-steps td { padding: 6px 8px; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); vertical-align: top; }
.pipe-steps td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pipe-err { max-width: 28rem; color: var(--sv-danger); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .pipe-chip, .pipe-search { min-height: 44px; }
  .pipe-track { flex-basis: 100%; max-width: none; }
  .pipe-stage { flex-basis: 33%; }
}