/* 06-components/_pipeline.css */
/* ── c-pipeline — the plan ▸ gate ▸ fix ▸ review stage flow. Cells light by state. */
.c-pipeline { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; font-size: var(--text-sm); }
.c-pipeline__stage {
  position: relative;
  padding: var(--space-xs) var(--space-md);
  border: var(--bw) solid var(--line);
  background: var(--surface-raised);
  color: var(--text-muted);
  display: flex; flex-direction: column; gap: var(--space-3xs);
  min-width: 14ch;
}
.c-pipeline__stage + .c-pipeline__stage { border-left: 0; }
.c-pipeline__arrow { align-self: center; color: var(--text-dim); padding-inline: var(--space-2xs); }
.c-pipeline__name { color: var(--text-bright); font-weight: var(--fw-medium); }
.c-pipeline__note { color: var(--text-dim); font-size: var(--text-xs); }
.c-pipeline__stage.is-active { border-color: var(--accent); color: var(--text-bright); box-shadow: inset 0 0 0 1px var(--accent); }
.c-pipeline__stage.is-active .c-pipeline__name { color: var(--accent); }
.c-pipeline__stage.is-done { border-color: var(--good); }
.c-pipeline__stage.is-done .c-pipeline__name { color: var(--good); }
.c-pipeline__stage.is-stop { border-color: var(--bad); }
.c-pipeline__stage.is-stop .c-pipeline__name { color: var(--bad); }
@media (max-width: 56rem) { .c-pipeline { flex-direction: column; } .c-pipeline__stage + .c-pipeline__stage { border-left: var(--bw) solid var(--line); border-top: 0; } .c-pipeline__arrow { transform: rotate(90deg); } }