/* A calm diagram layer over the warehouse, with the narrative kept in the UI. */
body.flow-mode main{grid-template-columns:minmax(0,1fr) 316px!important}
body.flow-mode .left,body.flow-mode .editbar,body.flow-mode .workflow-strip,body.flow-mode .scene-label,body.flow-mode .hint,body.flow-mode .notice,body.flow-mode .inspector-heading{display:none}
body.flow-mode .right{display:flex;position:relative;inset:auto;width:auto;box-shadow:none;background:#f9fbfa;border-left:1px solid #dde7e2}
.flow-mode #panel{padding:24px 20px}.flow-mode #panel h2{font-size:23px;line-height:1.2;letter-spacing:-.8px;margin:10px 0}.flow-mode .muted{font-size:12px;line-height:1.65;margin:0 0 20px}.flow-mode .eyebrow{font-size:8px;letter-spacing:1.8px;color:#718b80}
.flow-switch{display:flex;gap:3px;padding:4px;border:1px solid #e0e8e3;background:#edf2ef;border-radius:11px}.flow-switch button{flex:1;border:0;background:transparent;font-size:10px;padding:9px 3px;border-radius:8px;color:#6d8076;white-space:nowrap}.flow-switch button[aria-pressed=true]{background:#fff;color:#244f42;box-shadow:0 2px 6px #204e3a10;font-weight:600}
.flow-key{display:flex;gap:18px;margin:13px 2px 21px;font-size:10px;color:#708278}.flow-key span{display:flex;align-items:center;gap:6px}.flow-key span:before{content:'';width:16px;height:3px;border-radius:2px;background:#3cbaa1}.flow-key span:last-child:before{background:#dcab57}
.flow-controls{display:grid;grid-template-columns:1fr auto 31px;gap:5px}.flow-controls button{font-size:10px;padding:10px 7px;border-radius:9px;border:1px solid #dce7e0;white-space:nowrap}#flow-play{background:#255846;border-color:#255846;color:#fff;font-weight:500;box-shadow:0 3px 8px #28564015}#flow-play:hover{background:#1e493a}#flow-reset{font-size:17px;padding:5px}.flow-speed{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#829187;margin:12px 0 20px}.flow-speed select{width:91px;margin:0;padding:6px 8px;font-size:10px;background:transparent;border-color:#e2e9e4}
.flow-steps{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.flow-steps li:last-child{grid-column:1/-1}.flow-steps button{width:100%;height:37px;display:flex;align-items:center;gap:7px;padding:5px 6px;text-align:left;font-size:10px;border:1px solid transparent;background:transparent;border-radius:9px;color:#87958e}.flow-steps button span{flex-shrink:0;display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#edf2ee;border:1px solid #e3ebe5;color:#8b9c91;font-size:9px;font-variant-numeric:tabular-nums}.flow-steps button:hover{background:#eef5f0;color:#325a46}.flow-steps button[aria-current=true]{border-color:#b8ded0;background:#ebf6f0;color:#244e3e;font-weight:600}.flow-steps button[aria-current=true] span{background:#2c6d57;color:#fff;border-color:#2c6d57}.flow-steps button[data-kind=out][aria-current=true]{background:#fcf6ea;border-color:#ead9b5;color:#876225}.flow-steps button[data-kind=out][aria-current=true] span{background:#ae8136;border-color:#ae8136}.flow-steps button[data-done=true]{color:#557664}
.flow-detail{position:relative;background:#fff;border:1px solid #dce8df;border-radius:13px;padding:17px;box-shadow:0 5px 18px #28433205;line-height:1.7;font-size:11px;color:#62786a}.flow-detail-label{font-size:8px;letter-spacing:1.5px;color:#7e9588;margin-bottom:6px}.flow-detail b{display:block;font:600 19px 'Manrope',sans-serif;color:#2b5140;letter-spacing:-.5px}.flow-detail p{margin:10px 0 0}#flow-question{margin-top:14px;padding-top:12px;border-top:1px solid #e9efea;font-size:11px;color:#3b6651}.flow-detail[data-kind=out]{border-top:3px solid #d4ac67}.flow-detail[data-kind=in]{border-top:3px solid #6bb99e}.flow-detail[data-held=true]{border-top-color:#d27768}#flow-hold{width:100%;margin-top:10px;background:#fffbf4;border-color:#eadbc2;color:#8b7044;font-size:10px;padding:10px;border-radius:8px}.flow-note{font-size:9px;line-height:1.7;color:#91a096;margin:18px 2px 0}
.flow-hud{position:absolute;z-index:4;left:20px;top:20px;width:232px;pointer-events:none;padding:16px 17px 13px;border-radius:14px;background:#152f37ed;border:1px solid #a9d0c126;box-shadow:0 12px 32px #0b21272b;backdrop-filter:blur(12px);color:#eaf4ef;--flow-color:#7bdec6}.flow-hud[hidden]{display:none}.flow-hud[data-kind=out]{--flow-color:#ecc789}.flow-hud[data-held=true]{--flow-color:#f0a294}.flow-hud-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.flow-hud-type{font-size:7px;letter-spacing:1.4px;color:var(--flow-color)}.flow-hud-state{font-size:8px;color:#a8bcb6}.flow-hud-main{display:flex;align-items:center;gap:10px;margin:12px 0 15px}.flow-hud-number{display:grid;place-items:center;width:29px;height:29px;border:1px solid #ffffff20;border-radius:9px;font-size:11px;color:var(--flow-color);font-variant-numeric:tabular-nums;background:#ffffff07}.flow-hud strong{font:500 17px 'Manrope',sans-serif;letter-spacing:-.3px}.flow-hud-progress{height:2px;overflow:hidden;background:#ffffff14;border-radius:2px}.flow-hud-progress i{display:block;height:100%;width:0;background:var(--flow-color)}
.flow-detail{margin-bottom:18px}.flow-mode .flow-speed{margin-bottom:16px}.flow-mode .flow-steps{margin-bottom:8px}
@media(max-width:1100px){nav>div{gap:10px}#save-status{display:none}}
@media(max-width:900px){body.flow-mode main{grid-template-columns:minmax(0,1fr) 290px!important}.flow-mode #panel{padding:20px 16px}.flow-hud{left:14px;top:14px;width:215px;padding:12px 14px}.flow-hud strong{font-size:15px}}
@media(max-width:640px){body.flow-mode main{display:flex;flex-direction:column;overflow:auto}body.flow-mode .workspace{height:460px;flex-shrink:0}body.flow-mode .right{height:auto;overflow:visible;max-height:none;flex-shrink:0}.flow-mode .viewbar .viewport-tools{display:none}.flow-hud{width:205px}.flow-hud-main{margin:8px 0 12px}}
@media(max-width:560px){nav>div{overflow-x:auto;gap:6px}nav button{white-space:nowrap;font-size:10px}}