/* flow-product: page styles */

/* converted from inline style attributes (CSP: style-src 'self') */
.sx-9e3c4cc{margin-top:6px !important}
.sx-ba97d13{background:var(--card-bg) !important;border:1px solid var(--accent2) !important}
.sx-a2c3d2b{background:var(--card-bg) !important;opacity:.25 !important}
.sx-31fc37c{border:1px dashed var(--muted) !important}
.sx-002535c{margin-top:12px !important}
.sx-cb45893{display:none !important}
.sx-d431697{margin-top:8px !important}
.sx-5419cbd{display:flex !important;gap:10px !important;flex-wrap:wrap !important;margin-top:14px !important}

/* ── flow-page family (identical in all 5 flow-*.css). Diagram scroll/hint, stacked tables
      and stage-toggle sizing come from diagrams.css; this only adds the flow sub-nav + rhythm. ── */
.flow-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0 0 16px;border-bottom:1px solid var(--line);}
.flow-nav a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;
  text-decoration:none;color:var(--body-ink);border:1px solid var(--line);background:var(--card-bg);}
.flow-nav a:hover,.flow-nav a:focus-visible{border-color:var(--accent2);color:var(--accent2);}
.flow-nav a[aria-current="page"]{background:var(--accent2);border-color:var(--accent2);color:#fff;}
.flow-nav a.fn-all{border-style:dashed;color:var(--muted);}
.arch-lede{margin:12px 0 0;}
.stage-toggle{margin:24px 0 16px;}
.sx-a2c3d2b{border:1px solid var(--line) !important;opacity:.6 !important;}
/* stage rationale: a quiet full-width card; setStage() toggles the [hidden] attribute */
.stage-note{max-width:none;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--accent2);border-radius:12px;padding:12px 16px;}
.stage-note[hidden]{display:none;}
.stage-note p{max-width:80ch;}
.flowstory code,table.cmp code{overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.arch-sec{margin:32px 0 0;}
.arch-sec > h2{margin:0 0 12px;}
.arch-sec > p{margin:12px 0 0;max-width:80ch;}
.flow-pager{margin-top:32px !important;gap:12px !important;}
@media (max-width:640px){
  .flow-nav{gap:6px;margin-bottom:16px;}
  .flow-nav a{font-size:12.5px;padding:0 10px;}
  .stage-toggle{display:grid;grid-template-columns:1fr 1fr;}
  .stage-toggle button{min-height:40px;}
  table.cmp.stack code{overflow-wrap:normal;word-break:normal;}
  .flow-pager .btn{flex:1 1 100%;}
}
.nw{white-space:nowrap;}