/* Drawn by app/views/posts/figures/_treadmill.html.erb, which any post in the corpus reaches by
   writing its figure shortcode — the names are Post::Figure's registry — so this is a component
   rather than a page's styles: nothing scopes it to one page. */
.c-treadmill { display: flex; flex-direction: column; gap: var(--space-md); align-items: stretch; margin: 0; }
.c-treadmill__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-xs);
}
.c-treadmill__actor {
  flex: 1 1 0;
  min-width: 9rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border: var(--bw) solid var(--line);
  background: var(--surface-raised);
}
.c-treadmill__actor-name { color: var(--text-bright); font-weight: var(--fw-medium); font-size: var(--text-sm); }
.c-treadmill__meter { display: block; height: 0.5rem; border: var(--bw) solid var(--line); background: var(--surface); }
.c-treadmill__meter-fill { display: block; height: 100%; background: var(--accent); }
.c-treadmill__actor-note { color: var(--text-dim); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
/* A full context is the figure's failure state, and the template sets is-full to draw it. */
.c-treadmill__actor.is-full { border-color: var(--bad); }
.c-treadmill__actor.is-full .c-treadmill__meter-fill { background: var(--bad); }
.c-treadmill__actor.is-full .c-treadmill__actor-note { color: var(--bad); }
.c-treadmill__handoff {
  flex: none;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  padding-inline: var(--space-2xs);
  color: var(--text-dim);
}
.c-treadmill__handoff-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.c-treadmill__handoff-arrow { color: var(--text-muted); font-size: var(--text-lg); line-height: 1; }
.c-treadmill__handoff-by { color: var(--text-dim); font-size: var(--text-xs); font-style: italic; }
.c-treadmill__caption { color: var(--text-muted); font-size: var(--text-sm); text-wrap: balance; }
/* Stacked on small screens, so the arrow between two agents is turned to point down the chain. */
@media (max-width: 56rem) {
  .c-treadmill__chain { flex-direction: column; align-items: stretch; }
  .c-treadmill__actor { min-width: 0; }
  .c-treadmill__handoff-arrow { transform: rotate(90deg); }
}