.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); }
/* Centred rather than stretched, so the siblings keep their own height and the nested frame can
   stand taller than the row, above and below it. */
.c-pipeline--nested { align-items: center; }
.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;
}
/* The arrows get grid tracks of their own rather than being positioned into the gaps, so each one
   centres itself between the two boxes it joins and no percentage has to be tuned by hand. */
.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";
}
/* The cells are placed by source order, so the markup has to emit its six sub-stages in exactly
   this sequence — build, test, plan, review, merge, fix — or the cycle the arrows draw is wrong. */
.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); } }

/* A step box that links to a docs page keeps the box's look; only the name takes the link colour on hover. */
a.c-pipeline__stage--link { text-decoration: none; }
a.c-pipeline__stage--link:hover { border-color: var(--accent); }
a.c-pipeline__stage--link:hover .c-pipeline__name { color: var(--accent); }