.workflows-toolbar{display:grid;grid-template-columns:minmax(240px,2fr) repeat(5,minmax(120px,1fr));gap:10px;align-items:end}.workflows-summary{margin:12px 0;color:var(--muted,#64748b)}.workflows-table-wrap{overflow:auto;border:1px solid var(--line,#d9e2ef);border-radius:12px}.workflows-table{width:100%;border-collapse:collapse;min-width:1120px}.workflows-table th,.workflows-table td{padding:12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line,#e5eaf1)}.workflows-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#64748b)}.workflow-badge{display:inline-flex;padding:3px 8px;border-radius:999px;background:#eef2f7;color:#334155;font-size:12px;font-weight:700}.workflow-badge--ok{background:#dcfce7;color:#166534}.workflow-badge--bad{background:#fee2e2;color:#991b1b}.workflow-row-actions{display:flex;flex-wrap:wrap;gap:6px}.workflows-state{padding:18px;text-align:center;color:var(--muted,#64748b)}.workflows-state--error{margin:10px 0;border:1px solid #fecaca;border-radius:10px;background:#fff7f7;color:#991b1b}.workflows-history{margin-top:16px;padding:14px;border:1px solid var(--line,#d9e2ef);border-radius:12px;background:#fff}.workflow-legacy-notice{margin:12px 0;padding:10px 12px;border-radius:10px;background:#f8fafc;color:#475569;font-size:13px}.workflow-studio{min-height:calc(100vh - 190px)}.workflow-studio-head{margin-bottom:10px}.workflow-studio-head h2{display:inline;margin:0 0 0 14px}.workflow-studio-head p{margin:6px 0 0}

.workflow-graph-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;position:sticky;top:0;z-index:20;padding:8px 0;background:var(--card,#fff)}.workflow-graph-layout{display:grid;grid-template-columns:250px minmax(560px,1fr) 310px;gap:12px;align-items:start;min-height:680px}.workflow-graph-palette,.workflow-graph-inspector{border:1px solid var(--line,#d7deea);border-radius:12px;background:var(--card,#fff)}.workflow-graph-palette{max-height:calc(100vh - 250px);overflow:auto}.workflow-palette-search{position:sticky;top:0;z-index:3;padding:10px;background:#fff;border-bottom:1px solid var(--line,#e2e8f0)}.workflow-palette-search input,.workflow-quick-add input{box-sizing:border-box;width:100%;padding:9px 10px;border:1px solid #cbd5e1;border-radius:8px}.workflow-palette-group{border-bottom:1px solid var(--line,#e2e8f0)}.workflow-palette-group summary{display:flex;justify-content:space-between;gap:8px;padding:11px;cursor:pointer}.workflow-palette-group summary>span:first-child{display:grid;gap:2px}.workflow-palette-group summary small{font-weight:400;color:#64748b}.workflow-palette-items{display:grid;gap:6px;padding:0 9px 8px}.workflow-palette-items button,.workflow-quick-add button{display:flex;justify-content:space-between;gap:8px;text-align:left;border:1px solid #d7deea;border-radius:9px;padding:9px;background:#fff;cursor:grab}.workflow-palette-items button:hover,.workflow-quick-add button:hover{border-color:#6b7fe8;background:#f8f9ff}.workflow-palette-more{margin:0 9px 10px;border:0;background:transparent;color:#2452d6;cursor:pointer}.workflow-issues{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px;padding:10px 12px;border:1px solid #fed7aa;border-radius:10px;background:#fffaf3;color:#9a3412}.workflow-issues span{font-size:13px}
.workflow-palette-domains{display:grid;gap:7px;padding:0 8px 10px}.workflow-palette-domain{overflow:hidden;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}.workflow-palette-domain>summary{padding:8px 9px;font-size:13px}.workflow-palette-domain>summary small{font-size:11px}.workflow-palette-domain .workflow-palette-items{padding:1px 7px 7px}.workflow-palette-domain .workflow-palette-more{margin:0 7px 8px}

.workflow-graph-stage-wrap{min-width:0}.workflow-graph-stage{position:relative;height:calc(100vh - 280px);min-height:560px;overflow:hidden;border:1px solid var(--line,#cad3e2);border-radius:12px;background-color:#fbfcff;background-image:radial-gradient(#d9e1ee 1px,transparent 1px);background-size:24px 24px;touch-action:none}.workflow-graph-world{position:absolute;inset:0;width:2400px;height:1600px;transform-origin:0 0}.workflow-graph-edges{position:absolute;inset:0;overflow:visible;pointer-events:none}.workflow-graph-edge,.workflow-connection-preview{fill:none;stroke:#8190a5;stroke-width:2.5;pointer-events:stroke;cursor:pointer}.workflow-graph-edge:hover,.workflow-graph-edge:focus{stroke:#2452d6;stroke-width:4;outline:none}.workflow-graph-edge.is-invalid{stroke:#b42318}.workflow-connection-preview{stroke:#2452d6;stroke-dasharray:6 5;pointer-events:none}.workflow-graph-edges marker path{fill:#8190a5}.workflow-graph-node{--node-accent:#2563eb;--node-tint:#f8fbff;position:absolute;box-sizing:border-box;width:184px;min-height:68px;display:flex;align-items:center;text-align:left;border:1px solid color-mix(in srgb,var(--node-accent) 45%,#cbd5e1);border-left:5px solid var(--node-accent);border-radius:11px;padding:15px 24px 15px 14px;background:var(--node-tint);box-shadow:0 5px 14px rgba(15,23,42,.1);cursor:grab;user-select:none}.workflow-graph-node[data-node-category="trigger"]{--node-accent:#7c3aed;--node-tint:#faf7ff}.workflow-graph-node[data-node-category="condition"]{--node-accent:#d97706;--node-tint:#fffaf0}.workflow-graph-node[data-node-category="action"]{--node-accent:#2563eb;--node-tint:#f7faff}.workflow-graph-node[data-node-category="integration"]{--node-accent:#0f766e;--node-tint:#f2fbfa}.workflow-graph-node[data-node-category="control"]{--node-accent:#475569;--node-tint:#f8fafc}.workflow-graph-node:active{cursor:grabbing}.workflow-graph-node.is-selected{box-shadow:0 0 0 3px color-mix(in srgb,var(--node-accent) 22%,transparent),0 6px 18px rgba(15,23,42,.12)}.workflow-graph-node[data-node-state="not-configured"],.workflow-graph-node[data-node-state="unavailable"]{outline:2px dashed #d97706;outline-offset:2px}.workflow-graph-node.is-invalid{outline:2px solid #b42318;outline-offset:2px}.workflow-graph-node.is-traced:not(.is-invalid){box-shadow:0 0 0 3px rgba(22,163,74,.2)}.workflow-node-title{line-height:1.25;overflow-wrap:anywhere}.workflow-port{position:absolute;box-sizing:border-box;width:26px;height:26px;border:2px solid var(--node-accent,#64748b);border-radius:50%;background:#fff;color:var(--node-accent,#2452d6);font-size:17px;font-weight:800;line-height:20px;padding:0;cursor:crosshair}.workflow-port span{position:relative;top:-1px}.workflow-port--input{left:-15px;top:50%;transform:translateY(-50%)}.workflow-port--input.is-connectable{border-color:#2452d6;box-shadow:0 0 0 5px rgba(36,82,214,.13)}.workflow-port--input.is-connect-rejected,.workflow-port--input.is-drop-rejected{border-color:#b42318}.workflow-port--input.is-drop-target{border-color:#15803d;background:#dcfce7;box-shadow:0 0 0 6px rgba(21,128,61,.16)}.workflow-output{position:absolute;right:-42px;top:var(--port-position);display:flex;align-items:center;gap:3px;transform:translateY(-50%);color:#475569;font-size:11px}.workflow-output-label{position:absolute;right:56px;min-width:38px;text-align:right;font-weight:700;color:#475569}.workflow-port--output{position:relative;inset:auto}.workflow-port--output.is-pending{border-color:#2452d6;background:#2452d6;color:#fff}.workflow-output-add{box-sizing:border-box;width:23px;height:23px;border:1px solid #aeb9ca;border-radius:7px;padding:0;background:#fff;color:#334155;font-weight:800;line-height:19px;opacity:0;pointer-events:none;cursor:pointer;transition:opacity .12s ease}.workflow-graph-node:hover .workflow-output-add,.workflow-output:focus-within .workflow-output-add{opacity:1;pointer-events:auto}.workflow-output-add:disabled{visibility:hidden}.workflow-graph-empty{position:absolute;left:50%;top:42%;display:grid;gap:6px;transform:translate(-50%,-50%);text-align:center;color:#64748b}.workflow-quick-add{position:absolute;z-index:12;width:230px;max-height:390px;overflow:auto;padding:10px;border:1px solid #b8c3d5;border-radius:12px;background:#fff;box-shadow:0 14px 38px rgba(15,23,42,.2)}.workflow-quick-add-head{display:flex!important;align-items:center;justify-content:space-between;gap:8px;margin:0!important}.workflow-quick-add-head button{width:28px;height:28px;border:0;border-radius:7px;background:#eef2f7;color:#334155;font-size:18px;line-height:1}.workflow-quick-add>div:not(.workflow-quick-add-head){display:grid;gap:5px;margin-top:8px}.workflow-quick-add button{cursor:pointer}

.workflow-graph-inspector{display:grid;gap:10px;position:sticky;top:68px;max-height:calc(100vh - 250px);overflow:auto;padding:12px}.workflow-graph-inspector-head{display:grid;gap:3px}.workflow-trigger-filters{border:1px solid var(--line,#d7deea);border-radius:10px;background:#f8fafc}.workflow-trigger-filters summary{padding:10px 11px;font-weight:700;cursor:pointer}.workflow-trigger-filter-fields{display:grid;gap:10px;padding:2px 11px 11px}.workflow-trigger-filter-help{display:block;margin-top:4px;color:#64748b;font-weight:400;line-height:1.35}.workflow-condition-list{display:grid;gap:8px}.workflow-condition-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.workflow-condition-row input{grid-column:1/-2}.workflow-data-contract,.workflow-technical-details{border-top:1px solid var(--line,#d7deea);padding-top:10px}.workflow-data-contract summary,.workflow-technical-details summary{font-weight:700;cursor:pointer}.workflow-data-contract-schema{margin:7px 0;color:#64748b;font-size:12px}.workflow-data-contract-fields{display:grid;gap:7px}.workflow-data-contract-fields>div{display:grid;grid-template-columns:minmax(110px,.8fr) 1.2fr;gap:8px;align-items:start}.workflow-data-contract-fields code{overflow-wrap:anywhere;color:#334155}.workflow-data-contract-fields span{display:grid;gap:2px}.workflow-data-contract-fields small{color:#64748b;line-height:1.35}.workflow-data-contract pre{max-height:260px;overflow:auto;padding:9px;border-radius:8px;background:#0f172a;color:#e2e8f0;font-size:11px;white-space:pre-wrap}.workflow-technical-details code{display:block;margin-top:7px;overflow-wrap:anywhere;color:#64748b}.workflow-graph-preview,.workflow-graph-history{display:grid;gap:7px;border-top:1px solid var(--line,#d7deea);padding-top:10px}.workflow-graph-history>div{display:flex;justify-content:space-between;gap:8px;align-items:center}.workflow-graph-history time{color:#64748b;font-size:12px}

@media(max-width:1180px){.workflow-graph-layout{grid-template-columns:220px minmax(480px,1fr)}.workflow-graph-inspector{grid-column:1/-1;position:static;max-height:none}}
@media(max-width:900px){.workflows-toolbar{grid-template-columns:1fr 1fr}.workflows-search{grid-column:1/-1}.workflows-table{min-width:0}.workflows-table thead{display:none}.workflows-table,.workflows-table tbody,.workflows-table tr,.workflows-table td{display:block;width:100%}.workflows-table tr{padding:10px;border-bottom:1px solid var(--line,#e5eaf1)}.workflows-table td{display:grid;grid-template-columns:110px 1fr;gap:10px;border:0;padding:6px}.workflows-table td::before{content:attr(data-label);font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted,#64748b)}.workflow-graph-layout{grid-template-columns:1fr}.workflow-graph-palette{max-height:330px}.workflow-graph-inspector{grid-column:auto}.workflow-graph-stage{height:560px}}
@media(max-width:620px){.workflow-graph-toolbar{align-items:stretch}.workflow-graph-toolbar button{min-height:44px}.workflow-graph-stage{min-height:440px;height:60vh}.workflow-condition-row{grid-template-columns:1fr}.workflow-condition-row input{grid-column:auto}}

/* Workflow data visibility: keep trigger output discoverable on the canvas and reusable from the inspector. */
.workflow-graph-node{flex-direction:column;align-items:flex-start;justify-content:center;padding-top:11px;padding-bottom:11px}.workflow-node-data-badge{margin-top:5px;color:var(--node-accent,#475569);font-size:10px;font-weight:700}.workflow-data-contract-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.workflow-data-contract-title span{border-radius:999px;padding:2px 7px;background:#eef2ff;color:#3730a3;font-size:11px;font-weight:700}.workflow-data-path{max-width:100%;border:0;padding:0;background:transparent;text-align:left;cursor:copy}.workflow-data-path code{display:block}.workflow-data-path:hover code,.workflow-data-path:focus code{color:#2452d6;text-decoration:underline}.workflow-data-contract>details{margin-top:9px}
.workflow-legacy-notice p{margin:5px 0 9px}.workflow-legacy-list{display:grid;gap:6px}.workflow-legacy-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border:1px solid #e2e8f0;border-radius:8px;background:#fff}.workflow-legacy-list span{display:grid;gap:2px}.workflow-legacy-list small{color:#64748b}
.workflow-port:disabled{cursor:not-allowed;opacity:.45}.workflow-port:disabled span{top:-1px}@media(hover:none){.workflow-output-add{opacity:1;pointer-events:auto}}

[data-webhook-sample-editor]{border-top:1px solid var(--line,#d7deea);padding-top:10px;min-width:0}
[data-webhook-sample-editor] summary{cursor:pointer;font-weight:700}
[data-webhook-sample-editor] textarea{width:100%;box-sizing:border-box;font-family:monospace;font-size:12px}
[data-webhook-sample-result]{max-height:360px;overflow:auto;overflow-wrap:anywhere}
[data-webhook-sample-result] table{table-layout:fixed;width:100%;font-size:12px;border-collapse:collapse}
[data-webhook-sample-result] td,[data-webhook-sample-result] th{text-align:left;padding:5px;border-bottom:1px solid var(--line,#d7deea);vertical-align:top}

.workflow-data-mapping { display: grid; gap: 10px; margin-top: 14px; }
.workflow-data-mapping fieldset { min-width: 0; display: grid; gap: 8px; border: 1px solid #dce2ee; border-radius: 8px; padding: 10px; }
.workflow-data-mapping legend { font-weight: 600; padding: 0 4px; }
.workflow-data-mapping input:not([type="checkbox"]), .workflow-data-mapping select { max-width: 100%; min-width: 0; }

.workflow-received-data,.workflow-crm-preview{display:grid;gap:10px;min-width:0;border-top:1px solid #dce2ee;padding-top:12px;margin-top:12px}
.workflow-received-fields{display:grid;gap:10px;max-height:360px;overflow:auto}
.workflow-received-fields>div{display:grid;gap:5px;border:1px solid #dce2ee;border-radius:8px;padding:8px;min-width:0}
.workflow-received-fields code,.workflow-received-fields small{overflow-wrap:anywhere;white-space:pre-wrap}
.workflow-crm-preview>div{display:grid;gap:6px;overflow:auto}
.workflow-crm-preview table{border-collapse:collapse;width:100%;min-width:0;table-layout:fixed;font-size:12px}
.workflow-crm-preview th,.workflow-crm-preview td{text-align:left;padding:6px;border:1px solid #dce2ee;overflow-wrap:anywhere}

/* Size against the workspace, including the merchant navigation, rather than the viewport. */
.workflow-graph-layout[data-pane-layout]{min-width:0;max-width:100%;gap:0;row-gap:12px}
.workflow-graph-layout[data-pane-layout="wide"]{grid-template-columns:var(--workflow-palette-width) 12px minmax(0,1fr) 12px var(--workflow-inspector-width)}
.workflow-graph-layout[data-pane-layout="medium"]{grid-template-columns:var(--workflow-palette-width) 12px minmax(0,1fr)}
.workflow-graph-layout[data-pane-layout="stacked"]{grid-template-columns:minmax(0,1fr)}
.workflow-pane-divider{align-self:stretch;position:relative;cursor:col-resize;touch-action:none;min-height:44px;outline-offset:-2px}
.workflow-pane-divider::after{content:"";position:absolute;top:0;bottom:0;left:5px;width:2px;border-radius:2px;background:#d7deea}
.workflow-pane-divider:hover::after,.workflow-pane-divider:focus-visible::after,.workflow-pane-divider.is-resizing::after{background:#2452d6;width:4px;left:4px}
.workflow-pane-divider:focus-visible{outline:2px solid #2452d6;border-radius:5px}
.workflow-graph-layout[data-pane-layout="medium"] [data-workflow-pane="inspector"],.workflow-graph-layout[data-pane-layout="stacked"] .workflow-pane-divider{display:none}
.workflow-graph-layout[data-pane-layout="wide"] .workflow-graph-inspector{grid-column:auto;position:sticky;max-height:calc(100vh - 250px)}
.workflow-graph-layout:not([data-pane-layout="wide"]) .workflow-graph-inspector{grid-column:1/-1;position:static;max-height:none}
.workflow-graph-layout[data-pane-layout="stacked"] .workflow-graph-palette{max-height:330px}
.workflow-graph-palette,.workflow-graph-inspector,.workflow-graph-inspector *{box-sizing:border-box;min-width:0}
.workflow-graph-inspector{grid-template-columns:minmax(0,1fr);overflow-wrap:anywhere;line-height:1.45}
.workflow-graph-inspector :is(input,select,textarea,button){max-width:100%}
.workflow-graph-inspector :is(button,code,pre){white-space:pre-wrap;overflow-wrap:anywhere}
.workflow-graph-inspector .workflows-state--error{display:grid;gap:6px;text-align:left;padding:12px}
.workflow-data-contract-fields>div{grid-template-columns:minmax(0,1fr);gap:2px;padding:7px 0;border-bottom:1px solid #eef2f7}
.workflow-data-contract-fields span{font-size:12px}
.workflow-data-contract-fields small{font-size:12px}
.workflow-graph-history>div{flex-wrap:wrap}
.workflow-condition-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.workflow-graph-toolbar>strong{min-width:0;max-width:100%;overflow-wrap:anywhere}
.workflow-palette-items button,.workflow-palette-group summary>span{min-width:0;overflow-wrap:anywhere;white-space:normal}
@media(max-width:620px){.workflow-condition-row{grid-template-columns:minmax(0,1fr)}}
.workflow-execution-explainer{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:8px;align-items:center;margin:0 0 12px;padding:9px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;color:#475569;font-size:12px;line-height:1.35}.workflow-execution-explainer strong{color:#0f172a}.workflow-execution-explainer span{padding-left:8px;border-left:1px solid #dbe3ee}
