/* Horizontal stage strip (used on complaints/edit) */
.stage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  list-style: none;
  padding: var(--gap-3);
  margin: 0 0 var(--gap-5);
}
.stage-strip > li { margin: 0; }
/* Stage chip used in the workflow editor / show */
.stage-chip {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  color: var(--ink-soft);
  background: var(--surface);
}
.stage-chip--active   { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.stage-chip--approved { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.stage-chip--rejected { background: var(--err-soft); color: var(--err); border-color: var(--err); }
.stage-chip--locked   { color: var(--ink-faint); }

/* Stepper used on the workflow review section */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  list-style: none;
  margin: 0 0 var(--gap-4);
  padding: 0;
}
.stepper > li {
  flex: 1 1 12rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--gap-3);
  margin: 0;
}
.stepper > li.is-active { background: var(--bg); border-color: var(--ink); }
.stepper > li.is-faded  { opacity: 0.55; }
.stepper__name {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: var(--gap-2);
}
.stepper__note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: var(--gap-2);
}