@layer components {
  .flow-row { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; }
  .flow-step { flex: 1; }
  .flow-step .card-label { color: var(--accent); font-size: 11.5px; }
  .flow-resolved { color: var(--accent); }
  .flow-arrow { font-family: var(--font-mono); color: var(--dim); font-size: 18px; display: flex; align-items: center; }

  @media (max-width: 900px) {
    .flow-row { flex-direction: column; }
    .flow-arrow { transform: rotate(90deg); align-self: center; }
  }
}