/* w-pipeline: Diagrams I and II. Scoped to the mounts; tokens only (assets/tokens.css).
   Engraved look: hairline ink outlines, line hatching inside shapes only, labels on a
   paper-coloured halo; the specimen card is graph paper with text on solid paper. */
[data-widget="w-pipeline"] { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); }
[data-widget="w-pipeline"] .wp-strip { flex: none; }
[data-widget="w-pipeline"] .wp-svg { display: block; max-width: 100%; height: auto; }

/* hatching patterns */
[data-widget="w-pipeline"] .wp-pat-h line { stroke: var(--hatch); stroke-width: 1; }
[data-widget="w-pipeline"] .wp-pat-s line { stroke: var(--c1); stroke-width: 1; opacity: .4; }
[data-widget="w-pipeline"] .wp-pat-a line { stroke: var(--accent); stroke-width: 1.1; opacity: .6; }

/* stage nodes: shape carries the role, ink carries the role, hatching carries the state */
[data-widget="w-pipeline"] .wp-shape,
[data-widget="w-pipeline"] .wp-shape-act,
[data-widget="w-pipeline"] .wp-outline,
[data-widget="w-pipeline"] .wp-name,
[data-widget="w-pipeline"] .wp-chip,
[data-widget="w-pipeline"] .wp-flow,
[data-widget="w-pipeline"] .wp-ov,
[data-widget="w-pipeline"] .wp-caption { transition: opacity var(--dur-2) ease, fill var(--dur-2) ease, visibility var(--dur-2); }
[data-widget="w-pipeline"] .wp-shape { stroke: none; }
[data-widget="w-pipeline"] .wp-shape-act { opacity: 0; stroke: none; }
[data-widget="w-pipeline"] .wp-outline { fill: none; stroke-width: var(--stroke); }
[data-widget="w-pipeline"] .wp-k-agent .wp-outline { stroke: var(--role-agent); }
[data-widget="w-pipeline"] .wp-k-script .wp-outline { stroke: var(--role-script); }
[data-widget="w-pipeline"] .wp-k-human .wp-outline { stroke: var(--role-human); }
[data-widget="w-pipeline"] .wp-name { font-family: var(--font-serif); font-weight: 600; fill: var(--ink);
  paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
[data-widget="w-pipeline"] .wp-node.is-active .wp-shape { opacity: 0; }
[data-widget="w-pipeline"] .wp-node.is-active .wp-shape-act { opacity: 1; }
[data-widget="w-pipeline"] .wp-node.is-active .wp-outline { stroke-width: calc(var(--stroke) * 1.8); }
[data-widget="w-pipeline"] .wp-node.is-dim .wp-shape,
[data-widget="w-pipeline"] .wp-node.is-dim .wp-outline { opacity: .35; }
[data-widget="w-pipeline"] .wp-node.is-dim .wp-name { fill: var(--ink-3); font-weight: 400; }

/* flow (sequence) arrows */
[data-widget="w-pipeline"] .wp-flow.is-dim { opacity: .4; }
[data-widget="w-pipeline"] .wp-flow.is-off { opacity: 0; }

/* file chips */
[data-widget="w-pipeline"] .wp-chip { opacity: .55; }
[data-widget="w-pipeline"] .wp-chip.is-lit { opacity: 1; }
[data-widget="w-pipeline"] .wp-chip.is-hidden { opacity: 0; visibility: hidden; }
[data-widget="w-pipeline"] .wp-chip-t { font-family: var(--font-mono); fill: var(--ink-2);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
[data-widget="w-pipeline"] .wp-chip.is-lit .wp-chip-t { fill: var(--ink); font-weight: 500; }
[data-widget="w-pipeline"] .wp-doc { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1; }
[data-widget="w-pipeline"] .wp-chip.is-lit .wp-doc { stroke: var(--ink); fill: var(--surface-2); }

/* overview caption */
[data-widget="w-pipeline"] .wp-caption { font-family: var(--font-serif); font-style: italic; fill: var(--ink-2); opacity: 0;
  paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
[data-widget="w-pipeline"] .wp-caption.is-on { opacity: 1; }

/* "why" overlays */
[data-widget="w-pipeline"] .wp-ov { opacity: 0; visibility: hidden; }
[data-widget="w-pipeline"] .wp-ov.is-on { opacity: 1; visibility: visible; }
[data-widget="w-pipeline"] .wp-title { font-family: var(--font-serif); font-style: italic; fill: var(--ink-2); }
[data-widget="w-pipeline"] .wp-bar { fill: var(--surface); stroke: var(--role-agent); stroke-width: calc(var(--stroke) * 1.4); }
[data-widget="w-pipeline"] .wp-bar-t { font-family: var(--font-serif); font-weight: 600; fill: var(--ink); }
[data-widget="w-pipeline"] .wp-mono { font-family: var(--font-mono); font-weight: 500; }
[data-widget="w-pipeline"] .wp-leader { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 2; }
[data-widget="w-pipeline"] .wp-leader-s { stroke: var(--c1); }
[data-widget="w-pipeline"] .wp-note { font-family: var(--font-serif); font-style: italic; fill: var(--ink); }
[data-widget="w-pipeline"] .wp-note .wp-mono { font-style: normal; font-weight: 400; }
[data-widget="w-pipeline"] .wp-note-key { fill: var(--accent); }
[data-widget="w-pipeline"] .wp-pair { fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
[data-widget="w-pipeline"] .wp-bracket { fill: none; stroke: var(--accent); stroke-width: calc(var(--stroke) * 1.2); }
[data-widget="w-pipeline"] .wp-bracket-t { font-family: var(--font-serif); font-style: italic; font-weight: 600; fill: var(--accent); }

/* status line (desktop only, decorative duplicate of the live region) */
[data-widget="w-pipeline"] .wp-status { margin: 0; height: 44px; font: italic 400 0.875rem/22px var(--font-serif); color: var(--ink-2);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* specimen card: lab-notebook graph paper, typed label, mono excerpt */
[data-widget="w-pipeline"] .wp-card { flex: none; border: 1px solid var(--ink-2); border-radius: 2px; background-color: var(--surface);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 16px 16px; color: var(--ink); min-width: 0; }
[data-widget="w-pipeline"] .wp-card-head { display: block; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--ink-2); background: var(--surface); min-width: 0; }
[data-widget="w-pipeline"] .wp-card-path { display: block; font: 500 0.8125rem/18px var(--font-mono); letter-spacing: .02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
[data-widget="w-pipeline"] .wp-card-tag { display: block; font: italic 400 0.75rem/16px var(--font-serif); color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
[data-widget="w-pipeline"] .wp-card.is-format { border-style: dashed; }
[data-widget="w-pipeline"] .wp-card.is-format .wp-card-head { border-bottom-style: dashed; }
[data-widget="w-pipeline"] .wp-card.is-format .wp-card-tag { color: var(--accent); font-style: normal; font-weight: 600; }
[data-widget="w-pipeline"] .wp-card-body { list-style: none; margin: 0; padding: var(--sp-1) var(--sp-2); overflow: hidden; box-sizing: border-box; }
[data-widget="w-pipeline"] .wp-card-body li { font: 400 0.8125rem/20px var(--font-mono); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
[data-widget="w-pipeline"] .wp-card-body li > span { background: var(--surface); }   /* text never sits on the ruling */
[data-widget="w-pipeline"] .wp-card.is-collapsed .wp-card-body { padding: 0; }
[data-widget="w-pipeline"] .wp-card.is-collapsed .wp-card-head { border-bottom: 0; }
[data-widget="w-pipeline"] .wp-card.is-collapsed .wp-card-tag { display: none; }
[data-widget="w-pipeline"] .wp-card.is-inking .wp-card-body,
[data-widget="w-pipeline"] .wp-card.is-inking .wp-card-head { animation: wp-ink var(--dur-2) ease-out; }
@keyframes wp-ink { from { opacity: .15; } to { opacity: 1; } }

/* narrow: smaller card type (still ≥ 11px) */
[data-widget="w-pipeline"].wp-narrow .wp-card-body { padding: var(--sp-half) var(--sp-1); }
[data-widget="w-pipeline"].wp-narrow .wp-card-body li { font-size: 0.75rem; line-height: 18px; }
[data-widget="w-pipeline"].wp-narrow .wp-card-head { padding: var(--sp-half) var(--sp-1); }
[data-widget="w-pipeline"].wp-narrow .wp-card-path { font-size: 0.75rem; line-height: 17px; }
[data-widget="w-pipeline"].wp-narrow .wp-card-tag { font-size: 0.6875rem; line-height: 14px; }

/* screen-reader sentence */
[data-widget="w-pipeline"] .wp-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-widget="w-pipeline"] .wp-card.is-inking .wp-card-body,
  [data-widget="w-pipeline"] .wp-card.is-inking .wp-card-head { animation: none; }
}
[data-widget="w-pipeline"] .wp-status[hidden] { display: none; }