/* OrbitRelay flow-first UX. Flat, restrained, and intentionally free of gradients. */
.flow-shell{display:grid;gap:16px;max-width:1000px}.flow-toolbar{display:flex;gap:10px;align-items:end;justify-content:space-between;flex-wrap:wrap}.flow-toolbar-group{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.flow-toolbar label{min-width:190px}.flow-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.flow-stat{border:1px solid var(--border,#34343b);border-radius:8px;padding:14px;background:var(--panel,#17171b)}.flow-stat strong{display:block;font-size:1.5rem}.flow-list{display:grid;gap:10px}.flow-card{border:1px solid var(--border,#34343b);border-radius:8px;padding:16px;background:var(--panel,#17171b)}.flow-card-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}.flow-card-title{font-size:1.05rem;font-weight:700}.flow-card-lines{display:grid;gap:6px;margin-top:12px}.flow-line{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:start}.flow-key{font-weight:800;letter-spacing:.04em;font-size:.78rem}.flow-key.when{color:#bca7ff}.flow-key.if{color:#e7cf84}.flow-key.do{color:#9dd7ad}.flow-key.then{color:#9fc4e8}.flow-empty{border:1px dashed var(--border,#34343b);border-radius:8px;padding:24px;text-align:center}.flow-status-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border,#34343b);border-radius:999px;padding:4px 9px;font-size:.78rem}.flow-status-dot{width:7px;height:7px;border-radius:50%;background:#777}.flow-status-dot.on{background:#7fc28f}.flow-editor{display:grid;gap:12px}.flow-editor-head{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;gap:12px;align-items:end;flex-wrap:wrap;padding:12px;border:1px solid var(--border,#34343b);border-radius:8px;background:var(--panel,#17171b)}.flow-editor-head label{flex:1;min-width:220px}.flow-stack{display:grid;gap:8px}.flow-step{position:relative;border:1px solid var(--border,#34343b);border-radius:8px;padding:16px;background:var(--panel,#17171b)}.flow-step::after{content:'';position:absolute;left:28px;bottom:-9px;width:1px;height:9px;background:var(--border,#34343b)}.flow-step:last-child::after{display:none}.flow-step-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.flow-step-label{font-size:.76rem;font-weight:900;letter-spacing:.08em}.flow-step h3{margin:4px 0 4px}.flow-step p{margin:0}.flow-choice{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--border,#34343b);border-radius:7px;padding:12px;margin-top:10px}.flow-choice-main{min-width:0}.flow-choice-title{font-weight:700}.flow-choice-copy{font-size:.86rem;opacity:.72}.flow-condition-row,.flow-action-fields{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-top:10px}.flow-condition-row label,.flow-action-fields label{grid-column:span 4}.flow-action-fields .wide,.flow-condition-row .wide{grid-column:1/-1}.flow-action-card{border:1px solid var(--border,#34343b);border-radius:7px;padding:12px;margin-top:10px}.flow-action-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.flow-add{width:100%;margin-top:10px}.flow-advanced{border:1px solid var(--border,#34343b);border-radius:8px;padding:12px}.flow-advanced summary{cursor:pointer;font-weight:700}.flow-advanced-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}.flow-variable-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.flow-variable-chips button{font-size:.78rem;padding:5px 8px}.flow-picker{width:min(760px,94vw);max-height:84vh;border:1px solid var(--border,#34343b);border-radius:10px;background:var(--panel,#17171b);color:inherit;padding:0}.flow-picker::backdrop{background:rgba(0,0,0,.7)}.flow-picker-shell{display:grid;grid-template-rows:auto auto 1fr;max-height:84vh}.flow-picker-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--border,#34343b)}.flow-picker-search{padding:12px 16px;border-bottom:1px solid var(--border,#34343b)}.flow-picker-results{overflow:auto;padding:12px;display:grid;gap:14px}.flow-picker-group{display:grid;gap:7px}.flow-picker-group h4{margin:0;font-size:.76rem;letter-spacing:.08em;opacity:.68}.flow-picker-item{display:block;width:100%;text-align:left;border:1px solid var(--border,#34343b);border-radius:7px;padding:12px;background:transparent;color:inherit}.flow-picker-item:hover,.flow-picker-item:focus{border-color:currentColor}.flow-picker-item strong{display:block}.flow-picker-item span{display:block;font-size:.85rem;opacity:.7;margin-top:3px}.flow-future{border-top:1px solid var(--border,#34343b);padding-top:12px;font-size:.85rem;opacity:.7}.flow-test-panel{border:1px solid var(--border,#34343b);border-radius:8px;padding:14px;background:var(--panel,#17171b)}.flow-test-steps{display:grid;gap:8px;margin-top:10px}.flow-test-step{display:flex;gap:9px;align-items:flex-start}.flow-test-icon{font-weight:900;width:18px}.flow-test-pass .flow-test-icon{color:#7fc28f}.flow-test-fail .flow-test-icon{color:#d98989}.flow-test-detail{margin-top:10px}.flow-connection-grid,.flow-overlay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:920px}.flow-connection-card,.flow-overlay-card{display:flex;flex-direction:column;min-height:150px;border:1px solid var(--border,#34343b);border-radius:8px;padding:15px;background:var(--panel,#17171b)}.flow-connection-card h3,.flow-overlay-card h3{margin:7px 0 6px}.flow-connection-card p,.flow-overlay-card p{margin:0 0 14px;line-height:1.45}.flow-connection-card button,.flow-overlay-card button{margin-top:auto;align-self:flex-start}.flow-specialized-note{border-left:3px solid currentColor;padding:10px 12px;margin:10px 0 16px;opacity:.9}.flow-hidden-quick{display:none!important}body[data-ux-mode="quick"] .tabs .nav-section{display:none!important}

/* Keep the sidebar compact. Flow tabs are created after the account/mode blocks in DOM order,
   so explicit flex order keeps every navigation item together without a giant auto-margin spacer. */
.tabs .nerdspace-nav-brand{order:-100}.tabs .tab{order:0}.tabs #session-bar{order:90;margin:12px 0 0}.tabs .ux-mode-card{order:91;margin-top:0}

@media(max-width:900px){.flow-connection-grid,.flow-overlay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs #session-bar{margin:0}}
@media(max-width:720px){.flow-line{grid-template-columns:62px 1fr}.flow-condition-row,.flow-action-fields{grid-template-columns:1fr}.flow-condition-row label,.flow-action-fields label,.flow-action-fields .wide,.flow-condition-row .wide{grid-column:1}.flow-editor-head{position:static}.flow-toolbar-group{width:100%}.flow-toolbar label{flex:1;min-width:150px}.flow-connection-grid,.flow-overlay-grid{grid-template-columns:1fr}}

.flow-mode-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border,#34343b);border-radius:8px}
.flow-mode-switch button{min-width:86px}
.flow-mode-switch button.active{border-color:#8b5cf6;background:#8b5cf6;color:#fff}
.flow-editor-controls{display:flex;align-items:end;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.flow-simple-intro{display:none;border:1px solid var(--border,#34343b);border-left:4px solid #8b5cf6;border-radius:8px;padding:12px 14px}
.flow-summary{margin:14px 0 0;line-height:1.55;font-size:1rem}
.flow-editor[data-editor-mode="simple"] .flow-simple-intro{display:block}
.flow-editor[data-editor-mode="simple"] .flow-key{display:none}
.flow-editor[data-editor-mode="simple"] .flow-step h3{font-size:0;margin:0 0 10px}
.flow-editor[data-editor-mode="simple"] .flow-step:nth-child(1) h3::after{content:"When this happens";font-size:1rem}
.flow-editor[data-editor-mode="simple"] .flow-step:nth-child(2) h3::after{content:"Only do this when…";font-size:1rem}
.flow-editor[data-editor-mode="simple"] .flow-step:nth-child(3) h3::after{content:"OrbitRelay will…";font-size:1rem}
.flow-editor[data-editor-mode="simple"] .flow-step:nth-child(4) h3::after{content:"Then it will…";font-size:1rem}
.flow-editor[data-editor-mode="simple"] .flow-advanced{display:none}
@media(max-width:720px){.flow-editor-controls{width:100%;justify-content:flex-start}}

.react-flow-host{width:100%;height:100%;min-height:0;background:#0d0d12;overflow:hidden}.react-flow-host iframe{display:block;width:100%;height:100%;border:0;background:#0d0d12}
@media(max-width:900px){.react-flow-host{height:100%;min-height:0}}

/* Embedded visual Flows inherits its height from the dashboard view. Never impose document-style sizing here. */
#view-flows .react-flow-host{height:100%!important;min-height:0!important}
#view-flows .react-flow-host iframe{height:100%!important;min-height:0!important;vertical-align:top}