.ops-canvas { margin-top:24px;color:var(--text);background:var(--surface); }
.ops-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin:20px 0}.ops-controls label{display:grid;gap:6px}.ops-controls select,.ops-canvas button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px;cursor:pointer}.ops-canvas button:focus-visible,.ops-canvas select:focus-visible,.ops-graph-scroll:focus-visible{outline:3px solid var(--green);outline-offset:3px}.ops-graph-scroll{overflow:auto;max-height:540px;background:var(--bg);border:1px solid var(--line);border-radius:12px}.ops-graph-scroll svg{width:100%;display:block}.ops-node{fill:var(--surface);stroke:var(--line);stroke-width:2}.ops-node.running,.ops-node.completed{stroke:var(--green)}.ops-node.failed,.ops-node.blocked{stroke:var(--amber)}.ops-graph-scroll text{fill:var(--text);font:14px sans-serif}.ops-graph-scroll .ops-svg-sub{fill:var(--muted);font-size:12px}.ops-causal-edge{fill:none;stroke:var(--green);stroke-width:2}#ops-arrow path{fill:var(--green)}.ops-canvas-columns{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;margin-top:22px}.ops-water-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:12px;align-items:center;margin:12px 0}.ops-water-row button{text-align:left;overflow-wrap:anywhere}.ops-water-track{height:24px;background:var(--bg);position:relative}.ops-water-track span{position:absolute;top:5px;height:14px;border-radius:3px;background:var(--green)}.ops-water-track .failed,.ops-water-track .blocked{background:var(--amber)}.ops-water-track .waiting_approval,.ops-water-track .queued{background:var(--muted)}.ops-node-detail{padding:16px;background:var(--bg);border-radius:10px;min-width:0}.ops-node-detail dt{font-size:12px;color:var(--muted);margin-top:12px}.ops-node-detail dd{margin:4px 0;overflow-wrap:anywhere;font-size:14px}.ops-canvas h3{font-size:18px}.ops-canvas p{overflow-wrap:anywhere}
@media(max-width:700px){.ops-canvas-columns{grid-template-columns:1fr}.ops-controls{display:grid;grid-template-columns:1fr}.ops-controls select{max-width:100%}.ops-water-row{grid-template-columns:130px 1fr}}
.ops-canvas h2{font-size:28px}.ops-management-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.ops-management-cards article{display:grid;gap:9px;padding:20px;background:var(--bg);border:1px solid var(--line);border-radius:14px}.ops-management-cards small,.ops-next-action small{color:var(--muted);font-size:13px}.ops-management-cards strong{font-size:28px}.ops-next-action{display:flex;gap:14px;align-items:center;padding:20px;background:var(--card-soft);border-radius:14px}.ops-next-action div{display:grid;gap:7px}.ops-next-action strong{font-size:19px}.ops-icon-legend{display:flex;flex-wrap:wrap;gap:16px;margin:22px 0;color:var(--muted);font-size:13px}.ops-icon-legend span,.ops-inspector summary,.ops-node-detail h3,.ops-report-button{display:flex;align-items:center;gap:8px}.ops-graph-scroll svg{color:var(--text)}.ops-graph-scroll .ops-svg-title{font-size:18px;font-weight:600}.ops-graph-scroll text{font-size:15px}.ops-graph-scroll .ops-svg-sub{font-size:13px}.ops-duration-cards{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}.ops-duration-cards div{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px}.ops-duration-cards small{font-size:12px;color:var(--muted)}.ops-duration-cards strong{font-size:18px}.ops-inspector{margin-top:22px;color:var(--muted)}.ops-inspector summary{cursor:pointer;padding:10px 0;color:var(--text)}.ops-status-text{font-weight:600}.ops-empty{display:grid;justify-items:center;text-align:center;padding:40px 16px;background:var(--bg);border-radius:14px}.ops-empty p{max-width:450px}.ops-demo-note{color:var(--muted)}.ops-observation-note{font-size:14px;color:var(--muted)}.ops-time-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin-bottom:18px}.ops-time-legend span:nth-child(1){color:var(--green)}.ops-time-legend span:nth-child(2){color:var(--muted)}.ops-time-legend span:nth-child(3){color:var(--amber)}
@media(max-width:700px){.ops-management-cards{grid-template-columns:1fr}.ops-management-cards article{grid-template-columns:30px 1fr auto;align-items:center;padding:16px}.ops-management-cards strong{font-size:22px}.ops-duration-cards{grid-template-columns:1fr}.ops-duration-cards div{grid-template-columns:1fr auto}.ops-icon-legend{gap:12px}.ops-canvas .card-heading{display:grid;gap:10px}.ops-canvas h2{font-size:25px}.ops-next-action strong{font-size:18px}}

.ops-water-track .waiting_approval{background:var(--amber)}.ops-graph-scroll g[role=button]{cursor:pointer}.ops-graph-scroll g[role=button]:focus-visible rect{stroke:var(--text);stroke-width:4}
.ops-report-dialog{box-sizing:border-box;inline-size:min(600px,calc(100vw - 32px));max-inline-size:calc(100vw - 32px);min-inline-size:0;width:min(600px,calc(100vw - 32px));max-width:calc(100vw - 32px);min-width:0;padding:20px;max-height:calc(100dvh - 32px);overflow:auto}
.ops-report-dialog :where(h2,h3,p,pre,details,button){max-inline-size:100%;min-inline-size:0;overflow-wrap:anywhere}
.ops-report-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere}
.ops-business-detail{margin:20px 0}.ops-business-detail dt{color:var(--muted);font-size:12px;margin-top:14px}.ops-business-detail dd{margin:5px 0;font-size:15px}.ops-business-detail small{display:block;color:var(--muted);font-size:11px}.ops-segment-list{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 20px}.ops-segment-list button{font-size:12px;padding:7px 10px}.ops-segment-detail{padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px}.ops-segment-detail h4{margin:0 0 8px}.ops-feedback{padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px}