/* 06-components/_pipeline.css */
/* ── c-pipeline — the plan ▸ test ▸ 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); }
/* when a flow contains a nested stage, siblings keep their natural height so the nested
   frame can stand taller than them — extending both above and below the row */
.c-pipeline--nested { align-items: center; }
/* a stage that unfolds into its own sub-pipeline: a dashed page-coloured frame, taller than
   the surrounding stages, holding a 2×3 grid of child stages that each look like a normal cell */
.c-pipeline__stage--nested {
  border: 2px dashed var(--line);
  background: var(--surface);
  min-width: 20ch;
  padding: var(--space-lg) var(--space-lg);
  justify-content: center;
}
/* a 3×5 grid: three box columns/rows with dedicated arrow tracks between them, so every
   cycle arrow is self-centred in its gap — no magic percentages. Clockwise:
   build ▸ test ▾ review ▾ fix ◂ merge ▴ plan ▴ build. */
.c-pipeline__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: var(--space-sm);
  row-gap: var(--space-xs);
  align-items: center;
  justify-items: stretch;
  grid-template-areas:
    "build  top   test"
    "up1    .     dn1"
    "plan   .     review"
    "up2    .     dn2"
    "merge  bot   fix";
}
.c-pipeline__sub:nth-child(1) { grid-area: build; }
.c-pipeline__sub:nth-child(2) { grid-area: test; }
.c-pipeline__sub:nth-child(3) { grid-area: plan; }
.c-pipeline__sub:nth-child(4) { grid-area: review; }
.c-pipeline__sub:nth-child(5) { grid-area: merge; }
.c-pipeline__sub:nth-child(6) { grid-area: fix; }
.c-pipeline__cycle { color: var(--text-dim); font-size: var(--text-sm); line-height: 1; justify-self: center; align-self: center; }
.c-pipeline__cycle--top { grid-area: top; }  /* build → test */
.c-pipeline__cycle--r1  { grid-area: dn1; }  /* test → review */
.c-pipeline__cycle--r2  { grid-area: dn2; }  /* review → fix */
.c-pipeline__cycle--bot { grid-area: bot; }  /* fix → merge */
.c-pipeline__cycle--l2  { grid-area: up2; }  /* merge → plan */
.c-pipeline__cycle--l1  { grid-area: up1; }  /* plan → build */
.c-pipeline__sub {
  border: var(--bw) solid var(--line);
  background: var(--surface-raised);
  padding: var(--space-xs) var(--space-md);
  text-align: center;
  color: var(--text-bright);
  font-weight: var(--fw-medium);
}
.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); } }