/* Readable process sequences, not miniature application screens. */
#workflow-example { scroll-margin-top:100px; }
.usecase-flow { list-style:none; margin:2rem 0; padding:0; }
.usecase-flow > li { position:relative; display:grid; grid-template-columns:minmax(180px,1fr) 2fr; gap:2rem; margin:0 0 1.5rem; padding:1.5rem 2rem; border:1px solid var(--theme-line); background:var(--theme-surface); }
.usecase-flow > li:not(:last-child)::after { content:""; position:absolute; left:2rem; top:100%; height:1.5rem; border-left:2px solid var(--orange); }
.usecase-stage { display:flex; align-items:baseline; gap:1rem; }
.usecase-stage > span { color:var(--orange); font-size:.875rem; font-weight:800; }
.usecase-stage h3 { margin:0; font-size:1.4rem; line-height:1.25; }
.usecase-step-body { min-width:0; }
.usecase-step-body p { font-size:1rem; margin:0 0 1rem; }
.usecase-step-body .usecase-owner { color:var(--theme-muted); }
.usecase-step-body .usecase-gate { margin-bottom:0; padding-top:1rem; border-top:1px solid var(--theme-line); color:var(--theme-muted); }
.usecase-scope { color:var(--theme-muted); margin-top:1.5rem; font-size:1rem; }
.usecase-measures { padding-left:1.5rem; max-width:900px; font-size:1.1rem; }
.usecase-measures li { margin:1rem 0; padding-left:.5rem; }
.usecase-measures li::marker { color:var(--orange); }
.usecase-demo-note a,.usecase-related a { text-decoration:underline; text-underline-offset:.25em; }
.usecase-related h2 { font-size:2rem; }
.usecase-related-links { display:flex; flex-wrap:wrap; gap:1rem 2rem; }
.usecase-related a { display:inline-flex; align-items:center; min-height:44px; font-size:1rem; }
.usecase-page a:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
@media (max-width:800px) {
  .usecase-flow > li { grid-template-columns:1fr; gap:1rem; padding:1.25rem; }
  .usecase-flow > li:not(:last-child)::after { left:1.25rem; }
  .usecase-related-links { flex-direction:column; align-items:flex-start; }
}