/* 06-components/_loop.css */
/* ── c-loop — a labelled, dashed band that reads as "this repeats". It wraps one or more rows,
   each a lead label + an inner c-pipeline, so a run can show several sprints (or several
   milestones, each holding its own full sprint cycle) without pretending it's a single line. */
.c-loop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: var(--bw) dashed var(--line-strong);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: var(--surface);
}
.c-loop__label {
  position: absolute;
  top: 0;
  left: var(--space-sm);
  transform: translateY(-50%);
  padding-inline: 1ch;
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.c-loop__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.c-loop__lead {
  min-width: 12ch;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.c-loop__tag { color: var(--text-dim); font-size: var(--text-xs); white-space: nowrap; }