.rapp-hierarchy { margin: 28px 0; }
.flow-entry { margin: 0 0 12px; font-weight: bold; }
.flow-entry span { display: block; color: var(--accent); font-size: 1.4rem; }
.flow-group { border: 1px solid var(--rule); padding: 20px; background: var(--panel); }
.flow-group h3 { margin: 0 0 16px; font-size: 1.1rem; }
.flow-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
.flow-nodes li { border-top: 3px solid var(--accent); padding-top: 12px; }
.flow-nodes strong, .flow-nodes span, .flow-nodes small { display: block; }
.flow-nodes strong { font-size: 1rem; }
.flow-nodes span { margin-top: 8px; font-size: .95rem; line-height: 1.5; }
.flow-nodes small { margin-top: 8px; color: var(--muted); font-size: .82rem; }
.flow-boundary { margin: 0; padding: 16px 0; font-size: .9rem; }
.flow-boundary span { color: var(--accent); font-size: 1.4rem; margin-right: 8px; }
.flow-service { border-style: dashed; }
.flow-service .flow-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rapp-hierarchy figcaption { margin-top: 14px; font-size: .87rem; color: var(--muted); }
@media (max-width: 600px) {
  .flow-nodes, .flow-service .flow-nodes { grid-template-columns: 1fr; }
  .flow-group { padding: 18px; }
  .flow-nodes li + li::before { content: "↓"; display: block; color: var(--accent); margin-bottom: 8px; }
}
