/* Shared helper text used by the Terms and PDF layout pages. */
.wuf-flow-help{color:var(--wuf-muted);font-size:12px;line-height:1.55}
.wuf-flow-ok{color:var(--wuf-success);font-weight:700}

/* ===================================================== Process designer */
.wuf-fd-page{
	--fd-line:#c7d0dc;
	--fd-canvas:#f3f5f9;
	--fd-ink:#0f2a55;
	--fd-text:#3a4d6b;
	--fd-muted:#7387a3;
	--fd-border:#dfe6ee;
	--fd-orange:#f5822f;
	--fd-green:#14a06a;
	--fd-blue:#3a77ee;
	--fd-violet:#7a5af0;
	--fd-cyan:#0e9fb0;
	--fd-danger:#d14343;
	max-width:none;
	padding-bottom:28px;
}
.wuf-fd-page svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.wuf-fd-top{align-items:flex-end}
.wuf-fd-actions{display:flex;flex-wrap:wrap;gap:8px}
.wuf-fd-icon-btn{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer}
.wuf-fd-icon-btn:hover{background:rgba(15,42,85,.08)}
.wuf-fd-icon-btn svg{width:14px;height:14px}
.wuf-fd-link{padding:0;border:0;background:none;color:var(--wuf-orange-dark,#e45400);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.wuf-fd-link:hover{text-decoration:underline}
.wuf-fd-help{margin:0;color:var(--fd-muted);font-size:12px;line-height:1.55}
.wuf-fd-ok{margin:10px 0 0;color:var(--wuf-success,#19835e);font-size:12px;font-weight:650}

/* Settings */
.wuf-fd-settings{margin:14px 0 12px;border:1px solid var(--fd-border);border-radius:10px;background:#fff}
.wuf-fd-settings summary{display:flex;align-items:center;gap:8px;padding:11px 14px;color:var(--fd-text);font-size:12.5px;font-weight:650;cursor:pointer;list-style:none}
.wuf-fd-settings summary::-webkit-details-marker{display:none}
.wuf-fd-settings[open] summary{border-bottom:1px solid #edf1f5}
.wuf-fd-settings-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 18px;padding:12px 14px}

/* Layout */
.wuf-fd-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.wuf-fd-workspace.has-inspector{grid-template-columns:minmax(0,1fr) minmax(360px,420px)}
.wuf-fd-board{min-width:0;border:1px solid var(--fd-border);border-radius:12px;background:#fff;overflow:hidden}
.wuf-fd-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid #edf1f5}
.wuf-fd-legend{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--fd-ink)}
.wuf-fd-legend em{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-style:normal;font-weight:600}
.wuf-fd-legend em.is-warn{color:#b86a00}
.wuf-fd-legend em.is-ok{color:var(--wuf-success,#19835e)}
.wuf-fd-legend svg{width:14px;height:14px}
.wuf-fd-zoom{display:inline-flex;align-items:center;border:1px solid var(--fd-border);border-radius:8px;overflow:hidden}
.wuf-fd-zoom button{width:30px;height:28px;border:0;background:#fff;color:var(--fd-text);font-size:16px;cursor:pointer}
.wuf-fd-zoom button:hover{background:#f4f7fa}
.wuf-fd-zoom span{min-width:46px;text-align:center;font-size:12px;color:var(--fd-muted)}
.wuf-fd-canvas{height:calc(100vh - 290px);min-height:560px;overflow:auto;background:var(--fd-canvas)}
.wuf-fd-flow{display:flex;flex-direction:column;align-items:center;width:max-content;min-width:100%;padding:28px 48px 64px;box-sizing:border-box}

/* Start / end */
.wuf-fd-terminal{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-width:200px;padding:10px 18px 10px 10px;border:1px solid var(--fd-border);border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(15,42,85,.06)}
.wuf-fd-terminal i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--fd-ink);color:#fff}
.wuf-fd-terminal.is-end i{background:#8a99ad}
.wuf-fd-terminal i svg{width:14px;height:14px}
.wuf-fd-terminal.is-start i svg{fill:currentColor}
.wuf-fd-terminal b{display:block;color:var(--fd-ink);font-size:13px}
.wuf-fd-terminal small{display:block;color:var(--fd-muted);font-size:11px}

/* Connector + add button */
.wuf-fd-add{position:relative;display:flex;justify-content:center;width:100%;min-height:86px;padding:0;box-sizing:border-box}
.wuf-fd-add::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--fd-line)}
.wuf-fd-add::after{content:"";position:absolute;left:50%;bottom:0;margin-left:-5px;border:5px solid transparent;border-top:7px solid var(--fd-line);border-bottom:0}
.wuf-fd-col-inner>.wuf-fd-add:last-child{flex:1}
.wuf-fd-col-inner>.wuf-fd-add:last-child::after{display:none}
.wuf-fd-add-btn{position:relative;z-index:2;align-self:center;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--wuf-orange,#ff6b18);color:#fff;box-shadow:0 3px 10px rgba(255,107,24,.35);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.wuf-fd-add-btn:hover,.wuf-fd-add.is-open .wuf-fd-add-btn{transform:scale(1.12);box-shadow:0 5px 14px rgba(255,107,24,.45)}
.wuf-fd-add-btn svg{width:15px;height:15px;stroke-width:2.6}
.wuf-fd-menu{position:absolute;z-index:30;top:calc(50% + 20px);left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:360px;padding:10px;border:1px solid var(--fd-border);border-radius:12px;background:#fff;box-shadow:0 18px 40px rgba(15,42,85,.18)}
.wuf-fd-menu button{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid transparent;border-radius:9px;background:#fff;text-align:left;cursor:pointer}
.wuf-fd-menu button:hover{border-color:var(--fd-border);background:#f8fafc}
.wuf-fd-menu i{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:#fff}
.wuf-fd-menu b{display:block;color:var(--fd-ink);font-size:12.5px}
.wuf-fd-menu small{display:block;color:var(--fd-muted);font-size:11px}
.wuf-fd-menu .is-orange i{background:var(--fd-orange)}.wuf-fd-menu .is-green i{background:var(--fd-green)}.wuf-fd-menu .is-blue i{background:var(--fd-blue)}.wuf-fd-menu .is-violet i{background:var(--fd-violet)}.wuf-fd-menu .is-cyan i{background:var(--fd-cyan)}

/* Step cards */
.wuf-fd-step{position:relative;z-index:1;display:flex;justify-content:center}
.wuf-fd-node{position:relative;width:248px;border:1px solid transparent;border-radius:9px;background:#fff;box-shadow:0 2px 8px rgba(15,42,85,.08);cursor:pointer;overflow:hidden;transition:box-shadow .15s ease,border-color .15s ease}
.wuf-fd-node:hover{box-shadow:0 8px 20px rgba(15,42,85,.13)}
.wuf-fd-node:focus-visible,.wuf-fd-cond:focus-visible{outline:2px solid var(--wuf-orange,#ff6b18);outline-offset:2px}
.wuf-fd-node>header{display:flex;align-items:center;gap:7px;padding:7px 8px 7px 11px;color:#fff;font-size:12.5px;font-weight:650}
.wuf-fd-node>header i{display:inline-flex}
.wuf-fd-node>header i svg{width:14px;height:14px}
.wuf-fd-node>header span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wuf-fd-node>header .wuf-fd-icon-btn{opacity:0;width:20px;height:20px}
.wuf-fd-node:hover>header .wuf-fd-icon-btn,.wuf-fd-node.is-selected>header .wuf-fd-icon-btn{opacity:1}
.wuf-fd-node>header .wuf-fd-icon-btn:hover{background:rgba(255,255,255,.2)}
.wuf-fd-node.is-orange>header{background:var(--fd-orange)}.wuf-fd-node.is-green>header{background:var(--fd-green)}.wuf-fd-node.is-blue>header{background:var(--fd-blue)}
.wuf-fd-node-body{display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 10px 9px 12px;color:var(--fd-text);font-size:12.5px}
.wuf-fd-node-body p,.wuf-fd-cond p{display:-webkit-box;flex:1;margin:0;overflow:hidden;line-height:1.45;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}
.wuf-fd-node-body>i{display:inline-flex;color:#a3b0c2}
.wuf-fd-node-body>i svg{width:14px;height:14px}
.wuf-fd-node footer,.wuf-fd-cond footer{display:flex;align-items:flex-start;gap:6px;padding:6px 10px;border-top:1px solid #fbe1e1;background:#fff6f6;color:var(--fd-danger);font-size:11.5px;line-height:1.4}
.wuf-fd-node footer svg,.wuf-fd-cond footer svg{width:13px;height:13px;margin-top:1px}
.wuf-fd-node.is-selected,.wuf-fd-cond.is-selected{border-color:var(--wuf-orange,#ff6b18);box-shadow:0 0 0 3px rgba(255,107,24,.16),0 8px 20px rgba(15,42,85,.12)}
.wuf-fd-node.has-issue:not(.is-selected),.wuf-fd-cond.has-issue:not(.is-selected){border-color:#f2b8b8}

/* Branch groups */
.wuf-fd-group{position:relative;display:flex;flex-direction:column;align-items:center;width:max-content}
.wuf-fd-add-branch{position:absolute;z-index:3;top:-15px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 14px;border:1px solid var(--fd-border);border-radius:999px;background:#fff;color:var(--fd-violet);font:inherit;font-size:12px;font-weight:650;white-space:nowrap;box-shadow:0 3px 10px rgba(15,42,85,.08);cursor:pointer}
.wuf-fd-group.is-parallel>.wuf-fd-add-branch{color:var(--fd-cyan)}
.wuf-fd-add-branch:hover{border-color:currentColor}
.wuf-fd-add-branch svg{width:13px;height:13px}
.wuf-fd-cols{display:flex;border-top:2px solid var(--fd-line);border-bottom:2px solid var(--fd-line)}
.wuf-fd-col{position:relative;display:flex;flex-direction:column;align-items:center;min-width:280px;padding:0 22px}
.wuf-fd-col::before{content:"";position:absolute;z-index:0;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--fd-line)}
.wuf-fd-cover{display:none;position:absolute;z-index:1;width:50%;height:4px;background:var(--fd-canvas)}
.wuf-fd-cover.is-top{top:-3px}.wuf-fd-cover.is-bottom{bottom:-3px}
.wuf-fd-col:first-child>.wuf-fd-cover{display:block;left:0}
.wuf-fd-col:last-child>.wuf-fd-cover{display:block;right:0}
.wuf-fd-col-inner{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;align-items:center;width:100%;padding-top:36px}

/* Condition / parallel branch cards */
.wuf-fd-cond{position:relative;z-index:1;width:248px;padding:10px 12px 11px;border:1px solid var(--fd-border);border-radius:9px;background:#fff;box-shadow:0 2px 8px rgba(15,42,85,.07);cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease}
.wuf-fd-cond:hover{box-shadow:0 8px 20px rgba(15,42,85,.13)}
.wuf-fd-cond>header{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.wuf-fd-cond>header b{flex:1;min-width:0;overflow:hidden;color:var(--fd-violet);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.wuf-fd-cond.is-parallel>header b{color:var(--fd-cyan)}
.wuf-fd-cond.is-default>header b{color:var(--fd-muted)}
.wuf-fd-cond>header em{color:#98a6b9;font-size:11px;font-style:normal;white-space:nowrap}
.wuf-fd-cond>header .wuf-fd-icon-btn{opacity:0;width:20px;height:20px;color:#8a99ad}
.wuf-fd-cond:hover>header .wuf-fd-icon-btn,.wuf-fd-cond.is-selected>header .wuf-fd-icon-btn{opacity:1}
.wuf-fd-cond p{color:var(--fd-text);font-size:12px}
.wuf-fd-cond footer{margin:8px -12px -11px;border-radius:0 0 9px 9px}
.wuf-fd-move{position:absolute;inset:0;pointer-events:none}
.wuf-fd-move button{position:absolute;top:50%;display:grid;place-items:center;width:22px;height:34px;margin-top:-17px;padding:0;border:1px solid var(--fd-border);background:#fff;color:var(--fd-muted);opacity:0;pointer-events:auto;cursor:pointer;transition:opacity .15s ease}
.wuf-fd-move .is-left{left:-1px;border-radius:9px 0 0 9px}
.wuf-fd-move .is-right{right:-1px;border-radius:0 9px 9px 0}
.wuf-fd-cond:hover .wuf-fd-move button{opacity:1}
.wuf-fd-move svg{width:13px;height:13px}

/* Inspector */
.wuf-fd-inspector{position:sticky;top:76px;min-width:0}
.wuf-fd-inspector:empty{display:none}
.wuf-fd-drawer{display:flex;flex-direction:column;max-height:calc(100vh - 96px);border:1px solid var(--fd-border);border-radius:12px;background:#fff;overflow:hidden}
.wuf-fd-drawer>header{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-bottom:1px solid #edf1f5}
.wuf-fd-drawer>header>i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#fff;background:var(--fd-orange)}
.wuf-fd-drawer>header.is-green>i{background:var(--fd-green)}.wuf-fd-drawer>header.is-blue>i{background:var(--fd-blue)}.wuf-fd-drawer>header.is-violet>i{background:var(--fd-violet)}.wuf-fd-drawer>header.is-cyan>i{background:var(--fd-cyan)}
.wuf-fd-drawer>header>div{flex:1;min-width:0}
.wuf-fd-drawer>header small{display:block;color:var(--fd-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.wuf-fd-drawer>header strong{display:block;overflow:hidden;color:var(--fd-ink);font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.wuf-fd-title-input{width:100%;padding:2px 0;border:0;border-bottom:1px dashed transparent;background:transparent;color:var(--fd-ink);font:inherit;font-size:15px;font-weight:700;outline:0}
.wuf-fd-title-input:hover,.wuf-fd-title-input:focus{border-bottom-color:#c9d3df}
.wuf-fd-drawer-body{overflow:auto}
.wuf-fd-tabs{position:sticky;top:0;z-index:2;display:flex;gap:2px;padding:0 10px;border-bottom:1px solid #edf1f5;background:#fff;overflow-x:auto}
.wuf-fd-tabs button{flex:0 0 auto;padding:11px 9px 9px;border:0;border-bottom:2px solid transparent;background:none;color:var(--fd-muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.wuf-fd-tabs button.is-active{border-bottom-color:var(--wuf-orange,#ff6b18);color:var(--fd-ink)}
.wuf-fd-section{display:grid;gap:10px;padding:14px;border-bottom:1px solid #f0f3f6}
.wuf-fd-section:last-child{border-bottom:0}
.wuf-fd-section>b{color:var(--fd-ink);font-size:13px}
.wuf-fd-section-head{display:flex;align-items:center;justify-content:space-between}
.wuf-fd-section-head b{color:var(--fd-ink);font-size:13px}
.wuf-fd-field{display:grid;gap:5px;color:var(--fd-text);font-size:12px;font-weight:600}
.wuf-fd-field small{color:var(--fd-muted);font-weight:400}
.wuf-fd-page .wuf-fd-field input,.wuf-fd-page .wuf-fd-field select,.wuf-fd-cond-grid input,.wuf-fd-cond-grid select{width:100%;min-height:36px;padding:6px 9px;border:1px solid var(--fd-border);border-radius:7px;background:#fff;color:var(--fd-ink);font:inherit;font-size:13px;font-weight:400;box-sizing:border-box}
.wuf-fd-page .wuf-fd-field input:focus,.wuf-fd-page .wuf-fd-field select:focus,.wuf-fd-cond-grid input:focus,.wuf-fd-cond-grid select:focus{border-color:var(--wuf-orange,#ff6b18);outline:0;box-shadow:0 0 0 3px rgba(255,107,24,.12)}
.wuf-fd-approver{display:flex;align-items:flex-start;gap:6px;padding:10px;border:1px solid #e8edf3;border-radius:9px;background:#fafbfd}
.wuf-fd-approver-main{display:grid;flex:1;gap:8px;min-width:0}
.wuf-fd-radio-list,.wuf-fd-check-list{display:grid;gap:6px}
.wuf-fd-radio{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border:1px solid #e8edf3;border-radius:9px;cursor:pointer}
.wuf-fd-radio:has(input:checked){border-color:#ffc6a1;background:#fff8f3}
.wuf-fd-radio input,.wuf-fd-check input{margin-top:2px;accent-color:var(--wuf-orange,#ff6b18)}
.wuf-fd-radio b{display:block;color:var(--fd-ink);font-size:12.5px}
.wuf-fd-radio small{display:block;color:var(--fd-muted);font-size:11.5px}
.wuf-fd-check{display:flex;align-items:flex-start;gap:8px;color:var(--fd-text);font-size:12.5px;cursor:pointer}
.wuf-fd-perm-table{display:grid;border:1px solid #e8edf3;border-radius:9px;overflow:hidden}
.wuf-fd-perm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-bottom:1px solid #eef2f6;font-size:12.5px;color:var(--fd-text)}
.wuf-fd-perm-row:last-child{border-bottom:0}
.wuf-fd-perm-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wuf-fd-seg{display:inline-flex;flex:0 0 auto;padding:2px;border-radius:7px;background:#eef2f7}
.wuf-fd-seg button{padding:4px 9px;border:0;border-radius:5px;background:transparent;color:var(--fd-muted);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.wuf-fd-seg button.is-active{background:#fff;color:var(--fd-ink);box-shadow:0 1px 3px rgba(15,42,85,.12)}
.wuf-fd-seg button:disabled{opacity:.35;cursor:not-allowed}
.wuf-fd-cond-group{display:grid;gap:8px;padding:10px;border:1px solid #e3e9f0;border-radius:9px;background:#fafbfd}
.wuf-fd-cond-group>header{display:flex;align-items:center;gap:8px}
.wuf-fd-cond-group>header b{color:var(--fd-ink);font-size:12.5px}
.wuf-fd-cond-group>header small{flex:1;color:var(--fd-muted);font-size:11px}
.wuf-fd-cond-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
.wuf-fd-and{flex:0 0 100%;color:var(--fd-muted);font-size:11px;font-style:normal;font-weight:700;text-transform:uppercase}
.wuf-fd-cond-grid{display:grid;flex:1;gap:6px;min-width:0}
.wuf-fd-multi{display:grid;gap:4px;max-height:160px;padding:6px 8px;border:1px solid var(--fd-border);border-radius:7px;background:#fff;overflow:auto}
.wuf-fd-multi label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fd-text)}
.wuf-fd-multi input{accent-color:var(--wuf-orange,#ff6b18)}
.wuf-fd-or{display:flex;align-items:center;gap:8px;color:var(--fd-muted);font-size:11px;font-weight:700;text-transform:uppercase}
.wuf-fd-or::before,.wuf-fd-or::after{content:"";flex:1;height:1px;background:#e3e9f0}

/* Test panel */
.wuf-fd-preview{position:fixed;z-index:1001;right:24px;bottom:24px;display:flex;flex-direction:column;width:min(380px,calc(100vw - 32px));max-height:72vh;border:1px solid var(--fd-border);border-radius:14px;background:#fff;box-shadow:0 24px 60px rgba(15,42,85,.22);overflow:hidden}
.wuf-fd-preview>header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #edf1f5;color:var(--fd-ink);font-size:14px}
.wuf-fd-preview-body{display:grid;gap:10px;padding:14px;overflow:auto}
.wuf-fd-preview-steps{display:grid;gap:6px;margin:4px 0 0;padding-left:18px;font-size:12.5px;color:var(--fd-text)}
.wuf-fd-preview-steps small{display:block;color:var(--fd-muted)}
.wuf-fd-status{margin:10px 2px 0;color:var(--fd-muted);font-size:12px}

@media (max-width:1180px){
	.wuf-fd-workspace.has-inspector{grid-template-columns:minmax(0,1fr)}
	.wuf-fd-inspector{position:fixed;z-index:1000;top:0;right:0;bottom:0;width:min(420px,100vw)}
	.wuf-fd-inspector .wuf-fd-drawer{height:100%;max-height:none;border-radius:0;box-shadow:-20px 0 50px rgba(15,42,85,.2)}
}
@media (max-width:640px){
	.wuf-fd-canvas{height:calc(100vh - 240px);min-height:460px}
	.wuf-fd-flow{padding:22px 16px 48px}
	.wuf-fd-menu{width:min(300px,calc(100vw - 40px));grid-template-columns:1fr}
	.wuf-fd-col{min-width:250px;padding:0 14px}
	.wuf-fd-actions{width:100%}
	.wuf-fd-actions .wuf-button{flex:1}
}
