.auto-flow{--af-line: #304363;--af-muted: #b7c6df;--af-ai: #84b9ff;--af-rule: #9aceff;--af-team: #f3c98b;box-sizing:border-box;margin:3rem 0;padding:clamp(1.15rem,3vw,2rem);background:linear-gradient(145deg,#12213d,#0a1428);border:1px solid var(--af-line);border-radius:1.25rem;color:#f5f8ff;font:400 1rem/1.6 system-ui,sans-serif;overflow-wrap:anywhere}.auto-flow *{box-sizing:border-box}.auto-flow-kicker{color:var(--af-ai);font-size:.76rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;margin:0}.auto-flow-h{font-size:clamp(1.45rem,3.6vw,1.9rem);line-height:1.2;letter-spacing:-.025em;margin:.4rem 0 1rem;color:#fff}.auto-flow-intro{margin:0 0 1rem;color:var(--af-muted);max-width:65ch}.auto-flow-note{padding:.85rem 1rem;border:1px solid #405370;border-radius:.65rem;background:#162740;font-size:.875rem;color:#d6e1f3;margin:0 0 1.4rem}.auto-flow-steps{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.5rem}.auto-flow-step{margin:0}.auto-flow-step-btn{width:100%;display:flex;align-items:center;gap:.7rem;min-height:48px;padding:.6rem .9rem;border:1px solid var(--af-line);border-radius:.7rem;background:#0c1930;color:#e0eaff;font:inherit;font-size:.94rem;text-align:left;cursor:pointer}.auto-flow-step--done .auto-flow-step-btn{border-color:#2a4a6f;background:#0f2038;color:#c9d8f0}.auto-flow-step--current .auto-flow-step-btn{border-color:var(--af-ai);background:#15294d;color:#fff}.auto-flow-step-num{flex:0 0 auto;width:1.6rem;height:1.6rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#263957;color:#deebff;font-size:.8rem;font-weight:700}.auto-flow-step--current .auto-flow-step-num{background:var(--af-ai);color:#0a1428}.auto-flow-step-label{flex:1 1 auto;font-weight:650}.auto-flow-step-actor{flex:0 0 auto;font-size:.74rem;font-weight:700;letter-spacing:.02em;padding:.15rem .5rem;border-radius:1rem;text-transform:uppercase}.auto-flow-step[data-tone=ai] .auto-flow-step-actor{background:#84b9ff29;color:var(--af-ai)}.auto-flow-step[data-tone=rule] .auto-flow-step-actor{background:#9aceff24;color:var(--af-rule)}.auto-flow-step[data-tone=team] .auto-flow-step-actor{background:#f3c98b29;color:var(--af-team)}.auto-flow-panel{padding:1.2rem;border:1px solid var(--af-line);border-radius:.9rem;background:#0c1930}.auto-flow-panel-head{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;justify-content:space-between;margin-bottom:.8rem}.auto-flow-tag{font-size:.74rem;font-weight:700;padding:.2rem .6rem;border-radius:1rem;text-transform:uppercase}.auto-flow-tag[data-tone=ai]{background:#84b9ff29;color:var(--af-ai)}.auto-flow-tag[data-tone=rule]{background:#9aceff24;color:var(--af-rule)}.auto-flow-tag[data-tone=team]{background:#f3c98b29;color:var(--af-team)}.auto-flow-step-name{font-size:.9rem;color:var(--af-muted)}.auto-flow-detail{margin:0 0 1rem;color:#e6eeff;font-size:.96rem}.auto-flow-actions{display:flex;flex-wrap:wrap;gap:.6rem}.auto-flow button,.auto-flow .auto-flow-next,.auto-flow .auto-flow-reset{font:inherit;font-size:.94rem;font-weight:650;min-height:44px;padding:.6rem 1.1rem;border-radius:.65rem;cursor:pointer;white-space:normal}.auto-flow-next{border:1px solid #638ffd;background:#275fd5;color:#fff}.auto-flow-next:hover:not(:disabled){background:#3472ed}.auto-flow-reset{border:1px solid #667c9b;background:transparent;color:#e0eaff}.auto-flow-reset:hover:not(:disabled){background:#233653}.auto-flow button:disabled,.auto-flow .auto-flow-next:disabled,.auto-flow .auto-flow-reset:disabled{opacity:.5;cursor:not-allowed}.auto-flow button:focus-visible,.auto-flow a:focus-visible,.auto-flow summary:focus-visible{outline:3px solid #9aceff;outline-offset:4px}.auto-flow-status{min-height:3rem;margin:1rem 0;padding:.8rem 1rem;border-left:3px solid var(--af-ai);background:#152640;font-size:.9rem;color:#e0eaff}.auto-flow-footer{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:.4rem}.auto-flow a{color:#a9d1ff;text-decoration:underline;text-underline-offset:.18em;font-size:.94rem}.auto-flow-scope{font-size:.8rem;margin:1.2rem 0 0;color:var(--af-muted);max-width:70ch}@media (max-width: 640px){.auto-flow-panel-head{flex-direction:column;gap:.3rem}.auto-flow-footer{flex-direction:column;align-items:stretch}.auto-flow-footer a{padding:.4rem 0}}@media (prefers-reduced-motion: reduce){.auto-flow,.auto-flow *{transition:none!important;animation:none!important}}