/* 06-components/_treadmill.css */
/* ── c-treadmill — the "handover treadmill": a chain of fresh agent boxes wired by manual
   handovers. Each agent carries a context meter that fills as it works; the middle one is
   full (red), which is what forces the by-hand handoff to the next fresh agent.

   Drawn by app/views/posts/figures/_treadmill.html.erb, which any post reaches by writing
   {% figure treadmill %} (the allowlist in app/models/post/renderer.rb). It is a component
   rather than a page's own styles because nothing scopes it to one page: the shortcode is
   the post engine's, so any post in the corpus can put this diagram on its page. Today the
   Ideas post is the only one that does. */
.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 failure state — red border, red meter, red note */
.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); }
/* the manual handoff between two agents: label over an arrow over "by hand" */
.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; }
/* Small screens: stack the chain vertically, rotate the handoff arrow to point down. */
@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); }
}