/* A real workflow story for each stage of the software lifecycle. */
.case-tabs{display:flex;gap:8px;padding:26px 28px 20px;flex-wrap:wrap}
.case-tabs button{position:relative;overflow:hidden;padding:9px 14px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);color:var(--muted);font:500 11px var(--mono);letter-spacing:.3px}
.case-tabs button[aria-selected="true"]{background:#6254e8;color:white;border-color:#6254e8}
.case-tab-progress{position:absolute;bottom:0;left:0;height:3px;background:#c2baff;pointer-events:none}
.case-layout{display:grid;grid-template-columns:31% minmax(0,1fr);gap:28px;padding:8px 28px 28px;align-items:start;min-height:490px}
.case-story{padding:10px 0 0}.case-eyebrow{font:10px var(--mono);color:var(--violet);letter-spacing:1px;text-transform:uppercase}
.case-story h2{font-size:clamp(25px,2.6vw,34px);line-height:1.15;margin:18px 0 18px;letter-spacing:-.035em}
.case-story>p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 18px}
.case-story ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px}.case-story li{font-size:12px;color:var(--text);padding-left:15px;position:relative}.case-story li::before{content:'↗';position:absolute;left:0;color:var(--violet)}
.case-story p.case-setup{font-size:11px;line-height:1.6;color:var(--dim);border-top:1px solid var(--line);padding-top:16px}
.case-download{display:block;width:fit-content;border-bottom:1px solid var(--line-2);padding:0 0 5px;font-size:12px;color:var(--violet)}.case-child{display:block;margin-top:12px;font-size:11px;color:var(--muted)}
.case-services{display:flex;gap:7px;flex-wrap:wrap;margin-top:28px}.case-services span{border:1px solid var(--line-2);border-radius:5px;padding:3px 7px;font:9px var(--mono);color:var(--muted)}
.case-variants{display:flex;gap:6px;margin:0 0 18px}.case-variants button{padding:5px 9px;border:1px solid var(--line-2);border-radius:6px;font-size:11px}.case-variants button[aria-pressed="true"]{color:var(--violet);background:var(--card-2);border-color:var(--violet)}
.case-visual{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0;min-height:430px}
.case-graph-tools{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font:9px var(--mono);color:var(--dim)}.case-expand{font:10px var(--mono);color:var(--violet)}
.case-graph-scroll{overflow:hidden;background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1px);background-size:16px 16px;min-height:360px}
.case-graph{position:relative;transform-origin:top left}.case-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.case-wire{fill:none;stroke:var(--violet);stroke-width:1.8;opacity:.5}.case-wire.context{stroke:var(--accent-2);stroke-dasharray:3 5;opacity:.38}.case-wire.rework{stroke:var(--amber);stroke-dasharray:5 5}
.case-packet{fill:var(--violet)}.case-packet.context{fill:var(--accent-2)}.case-packet.rework{fill:var(--amber)}
.case-node{position:absolute;display:flex;flex-direction:column;justify-content:center;width:150px;height:84px;padding:10px 12px 10px 43px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);text-align:left;box-shadow:0 3px 10px #00000008;transition:box-shadow .25s,border-color .25s}
.case-node::before,.case-node::after{content:'';position:absolute;top:38px;width:7px;height:7px;border-radius:50%;border:1px solid var(--violet);background:var(--card)}.case-node::before{left:-5px}.case-node::after{right:-5px}
.case-node-icon{position:absolute;left:11px;top:28px;color:var(--violet)}.case-node-icon svg{width:24px;height:24px}
.case-node-kind{font:8px var(--mono);text-transform:uppercase;letter-spacing:.7px;color:var(--dim)}.case-node strong{font-size:11px;line-height:1.2;margin:4px 0;overflow-wrap:anywhere}.case-node small{font:8px var(--mono);color:var(--muted)}
.case-node[data-kind="Agent"]{border-style:dashed}.case-node[data-kind="Review"]{border-color:var(--violet)}.case-node[data-kind="Gate"]{border-color:var(--amber)}.case-node[data-kind="Workflow"]{border:2px solid var(--violet)}
.case-node.tour-active{border-color:var(--violet);box-shadow:0 0 0 5px #a79bff35}.case-node.tour-done::after{background:var(--accent-2)}.case-node:hover,.case-node[aria-pressed="true"]{outline:2px solid var(--violet);outline-offset:3px}
.case-node-detail{padding:18px;border-top:1px solid var(--line);background:var(--card);position:relative}.case-node-detail>span{font:9px var(--mono);color:var(--violet);margin-right:12px}.case-node-detail>b{font-size:13px}.case-node-detail p{font-size:12px;color:var(--muted);max-height:150px;overflow:auto;white-space:pre-wrap;line-height:1.6}.case-detail-close{position:absolute;right:10px;top:8px;font-size:22px}
.case-bottom{border-top:1px solid var(--line);padding:14px 28px;display:flex;gap:15px;justify-content:space-between;align-items:center;color:var(--dim);font:10px var(--mono)}.case-bottom>div{display:flex;align-items:center;gap:14px;flex-shrink:0}.case-bottom button{font:11px var(--mono);color:var(--text)}
#realWorkflow.case-expanded{position:fixed;inset:20px;z-index:100;overflow:auto;background:var(--bg);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 0 0 40px #0009}#realWorkflow.case-expanded .case-layout{grid-template-columns:25% minmax(0,1fr)}
@media(max-width:800px){.case-layout{grid-template-columns:1fr;gap:18px;padding:0 18px 18px}.case-tabs{padding:20px 18px;gap:6px}.case-tabs button{padding:8px 11px;font-size:10px}.case-story h2{font-size:28px;max-width:540px}.case-story ul{grid-template-columns:1fr 1fr}.case-services{margin-top:18px}.case-bottom{padding:14px 18px;font-size:9px;flex-wrap:wrap}.case-visual{min-height:0}.case-graph-scroll{min-height:0}#realWorkflow.case-expanded{inset:8px}#realWorkflow.case-expanded .case-layout{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.case-node{transition:none}}

.case-graph-scroll{overflow:auto}.case-graph-tools{gap:12px}.case-counter{margin-right:auto}.case-zoom-in,.case-zoom-out{font:16px var(--mono);color:var(--violet);padding:0 3px}

.case-edge-label{font:9px var(--mono);fill:var(--muted);paint-order:stroke;stroke:var(--bg-2);stroke-width:3px;stroke-linejoin:round}.case-open-subflow{font-size:12px;color:var(--violet);border-bottom:1px solid var(--line-2);padding:4px 0}

.case-bundle{font:10px var(--mono);color:var(--violet);border-bottom:1px solid var(--line-2);padding-bottom:3px}

/* One travelling group follows a single logical route. */
.case-wire.context{opacity:.15}
.case-wire.rework{opacity:.25}
.case-wire.tour-wire{stroke:var(--violet);opacity:1;stroke-width:2.7}
.case-convoy{fill:var(--violet);pointer-events:none}
.case-services span{display:inline-flex;align-items:center;gap:6px}
.case-services svg{width:13px;height:13px;flex:none}
.case-variants button{display:inline-flex;align-items:center;gap:6px}
.case-variants svg{width:14px;height:14px}
.chip svg{width:12px;height:12px;vertical-align:-2px;margin-right:5px}
.case-back{font:10px var(--mono);color:var(--violet);padding:0}

/* Node feedback and tool labels mirror the native workflow activity treatment. */
.case-complete{position:absolute;right:6px;top:6px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#e0f2e7;color:#237849;border:1px solid #bcdcc9;opacity:0;transform:scale(.65);transition:opacity .18s,transform .18s;pointer-events:none}
.case-complete svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.case-node.tour-done .case-complete{opacity:1;transform:scale(1)}
.case-tool-label{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;min-width:88px;max-width:140px;height:22px;overflow:hidden;border:1px solid #bcdcc9;border-radius:6px;background:#e0f2e7;color:#286344;pointer-events:none;z-index:4;font:500 11px/20px var(--sans);text-align:center}
.case-tool-label>span{display:block;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.case-tool-label>.case-tool-previous{position:absolute;inset:0}
html[data-theme="dark"] .case-tool-label{border-color:#426653;background:#233d30;color:#b5dfc6}
html[data-theme="dark"] .case-complete{border-color:#426653;background:#233d30;color:#8bdeb2}
.case-node.tour-active{z-index:3}
@media(prefers-reduced-motion:reduce){.case-complete{transition:none}}

.case-wire.rework{stroke:var(--amber);stroke-width:2.2;stroke-dasharray:7 4;opacity:.95}.case-rework-direction{fill:none;stroke:var(--amber);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.case-wire.rework+text{fill:var(--amber);paint-order:stroke;stroke:var(--bg-2);stroke-width:4px;stroke-linejoin:round}

.case-wire.rework{stroke-width:1.2;stroke-dasharray:4 5;opacity:.48}.case-rework-direction{display:none}

.case-node::before,.case-node::after{top:50%}.case-node::before{left:-1px;transform:translate(-50%,-50%)}.case-node::after{right:-1px;transform:translate(50%,-50%)}

.case-wire-halo{fill:none;stroke:var(--bg-2);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.case-wire.context{stroke-width:1.1;opacity:.28}