/* Workflow Planner (/workflow-planner/); shared pieces in engine.css */
.wp-job{min-height:5rem; font-size:1.08rem}
.wp-try{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:0 1.1rem .9rem}
.wp-try .lab{margin-right:.2rem}
.wp-mat{border-top:1px solid var(--line-2)}
.wp-mat summary{cursor:pointer; padding:.65rem 1.1rem; font:500 var(--t-sm)/1.3 var(--f-ui); color:var(--ink-3)}

.wp-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; padding:1.1rem 1.2rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl)}
.wp-head h2{font:400 1.6rem/1.15 var(--f-head); color:var(--ink); margin:0}
.wp-head p{font:400 1rem/1.5 var(--f-serif); color:var(--ink-2); margin-top:.35rem; max-width:44rem}
.wp-offer{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
.wp-prog{display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; font:500 var(--t-sm)/1.2 var(--f-ui); color:var(--ink-2)}
.wp-dots{display:flex; gap:.3rem}
.wp-dots i{width:1.6rem; height:.45rem; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); transition:background .2s}
.wp-dots i[data-done="true"]{background:var(--good); border-color:var(--good)}

.wp-gather{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.2rem}
@media (max-width:44rem){ .wp-gather{grid-template-columns:minmax(0,1fr)} }
.wp-gather .field{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.wp-gather .wp-long{grid-column:1 / -1}
.wp-gather .lab small{font-weight:400; color:var(--ink-3)}

/* the chain: a line runs down the left through every step */
.wp-chain{position:relative; display:flex; flex-direction:column; gap:.9rem; margin-top:.4rem}
.wp-chain::before{content:""; position:absolute; left:1.05rem; top:1.2rem; bottom:1.2rem; width:2px; background:linear-gradient(var(--line),var(--line)) center/2px 100% no-repeat}
.wp-step{position:relative; padding:1rem 1.1rem 1rem 3.1rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color .2s, box-shadow .2s}
.wp-step.ready{border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.wp-step[data-done="true"]{background:linear-gradient(var(--good-wash),var(--good-wash)),var(--panel); border-color:color-mix(in srgb, var(--good) 45%, var(--line))}
.wp-step-head{display:flex; gap:.8rem; align-items:flex-start}
.wp-num{position:absolute; left:.35rem; top:.9rem; width:1.45rem; height:1.45rem; border-radius:50%; display:grid; place-items:center; font:600 var(--t-xs)/1 var(--f-ui); color:var(--ink); background:var(--bg); border:2px solid var(--line); box-shadow:0 0 0 3px var(--bg)}
.wp-step.ready .wp-num{border-color:var(--accent); color:var(--accent)}
.wp-step[data-done="true"] .wp-num{border-color:var(--good); background:var(--good); color:var(--panel)}
.wp-step-t{flex:1; min-width:0}
.wp-step-t h4{font:600 1.05rem/1.35 var(--f-ui); color:var(--ink); margin:0}
.wp-step-t p{font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2); margin-top:.15rem}
.wp-takes{font:500 var(--t-sm)/1.3 var(--f-ui) !important; color:var(--accent) !important}
.wp-done{flex:none; font:500 var(--t-sm)/1 var(--f-ui)}
.wp-step-body{margin-top:.7rem}
.wp-chips{display:flex; flex-wrap:wrap; gap:.3rem}
.wp-chip{font:500 var(--t-2xs)/1 var(--f-ui); padding:.35rem .55rem; border-radius:999px; border:1px dashed var(--ink-4); color:var(--ink-3)}
.wp-chip[data-src="step"]{border-style:solid; border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent)}
.wp-chip.on{border-style:solid; border-color:color-mix(in srgb, var(--good) 50%, transparent); background:var(--good-wash); color:var(--ink)}
.wp-acts{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .6rem; margin-top:.7rem}
.wp-left{margin-left:auto}
.wp-ans{margin-top:.6rem; border-top:1px solid var(--line-2)}
.wp-ans summary{cursor:pointer; padding:.55rem 0; font:500 var(--t-sm)/1.3 var(--f-ui); color:var(--ink-2)}
.wp-others{margin-top:.6rem; font:400 var(--t-sm)/1.45 var(--f-ui); color:var(--ink-3)}
.wp-others a{color:var(--accent)}
.wp-own{margin-top:.6rem; border-top:1px solid var(--line-2)}
.wp-own summary{cursor:pointer; padding:.55rem 0; font:500 var(--t-sm)/1.3 var(--f-ui); color:var(--ink-2)}
.wp-own .wp-gather{padding:.3rem 0 .5rem}