/* agentfenster: one action, end to end. A real sequence, so it is numbered. */
.flow { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.flow li { counter-increment: step; position: relative; padding: 0.75rem 0 0.75rem 2.6rem; border-left: 1px solid var(--rule); margin-left: 0.85rem; }
.flow li::before {
  content: counter(step);
  position: absolute; left: -0.85rem; top: 0.7rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--rule);
  font-size: 0.875rem; font-weight: 500; color: var(--graphite);
}
.flow li:nth-child(4)::before { border-color: var(--measure); color: var(--measure); }
.flow li:last-child { border-left-color: transparent; }
.flow b { display: block; font-weight: 600; }
.flow span { color: var(--graphite); }
.flow em { font-style: normal; font-weight: 500; }
.flow em.ok { color: var(--result); }
.flow em.bad { color: var(--symptom); }

@media (min-width: 56rem) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1rem; }
  .flow li { border-left: 0; margin-left: 0; padding: 2.4rem 0 0; border-top: 1px solid var(--rule); }
  .flow li:last-child { border-top-color: var(--rule); }
  .flow li::before { left: 0; top: -0.85rem; }
  .flow span { display: block; font-size: 0.9375rem; margin-top: 0.25rem; }
}