/* Editable node canvas: restrained controls, visible ports, spatial projection. */
.cluster-scene-tools{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:10px;pointer-events:auto}
.scene-mode-toggle{display:flex;gap:2px;padding:3px;border:1px solid var(--edge);background:var(--panel);backdrop-filter:blur(16px);border-radius:8px}
.scene-mode-toggle button{font-size:9px;min-width:28px;padding:5px 7px;border-radius:5px;color:var(--muted)}
.scene-mode-toggle button.active{background:var(--white);color:var(--accent-text);box-shadow:0 2px 8px #3734520c}
.graph-arrange{display:flex;align-items:center;gap:5px;font-size:9px;padding:8px;color:var(--muted);border-radius:8px;background:var(--panel);border:1px solid var(--edge)}
.graph-arrange svg{width:12px;height:12px}
.graph-topline{pointer-events:none}.graph-topline .graph-controls{pointer-events:auto}
.graph-canvas>.node{transition:opacity .18s,border-color .18s,box-shadow .18s;will-change:left,top,transform;overflow:visible}
.node .node-contents{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:0;text-align:left;cursor:inherit;border-radius:inherit}
.node .node-contents>span:not(.person-avatar):not(.node-title):not(.proposal-badge){min-width:0}
.node.company .node-contents,.node.project .node-contents{display:block}
.node.channel .node-contents{gap:7px;font-size:10px;color:var(--muted)}
.node .node-contents:focus-visible{outline-offset:5px;outline-width:2px}
.node-port{position:absolute;right:-7px;top:50%;translate:0 -50%;height:14px;width:14px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid #a69ccc99;background:var(--panel-solid);color:var(--accent-text);z-index:20;box-shadow:0 1px 5px #4c476512;cursor:crosshair;opacity:.5;transition:opacity .15s,box-shadow .15s,scale .15s}
.node-port:before{content:'';position:absolute;inset:-6px;border-radius:50%}
.node-port svg{width:8px!important;height:8px!important;stroke-width:1.7}
.node:hover .node-port,.node:focus-within .node-port,.node.link-source .node-port,.node.link-target .node-port{opacity:1}
.node-port:hover{scale:1.2;box-shadow:0 0 0 4px #9f8ae91b}
.node.channel .node-port{right:-6px;width:12px;height:12px}
.graph-svg .editable-edge{pointer-events:stroke;cursor:pointer}
.graph-svg .edge-hit{fill:none!important;stroke:transparent!important;stroke-width:16px!important;pointer-events:stroke;filter:none!important}
.graph-svg .editable-edge:hover path:not(.edge-hit){stroke:var(--accent)!important;stroke-width:1.7!important;opacity:1!important;filter:drop-shadow(0 0 3px #8d7dd230)}
.graph-svg .edge-selected path:not(.edge-hit){stroke:var(--accent)!important;stroke-width:1.8!important;opacity:1!important;stroke-dasharray:5 4;animation:selectedCable 12s linear infinite}
.node.link-source{outline:1px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 5px #9684e30b}
.node.link-target{border-color:#8bb5a4!important;box-shadow:0 0 0 2px #80bb9d13;opacity:1!important}
.node.link-target:hover{box-shadow:0 0 0 4px #80bb9d24}
.node.link-ineligible{opacity:.22!important}
.cluster-edit-overlay{position:absolute;left:20px;right:20px;bottom:46px;display:flex;justify-content:center;z-index:5000;pointer-events:none}
.cluster-link-panel{max-width:100%;display:flex;align-items:center;gap:16px;padding:12px 13px;background:var(--panel-solid);border:1px solid var(--edge);border-radius:13px;box-shadow:0 9px 40px #2733491c;pointer-events:auto;animation:fadeIn .15s}
.cluster-link-panel>span:not(.link-panel-dot){min-width:0}
.cluster-link-panel strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}
.cluster-link-panel small{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.link-endpoints{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.link-endpoints>svg{width:13px;height:13px;color:var(--muted)}
.link-panel-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.link-panel-actions .icon-button{height:27px;width:27px}
.link-panel-actions .icon-button svg{width:12px;height:12px}
.link-panel-dot{height:6px;width:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px var(--soft-violet);flex-shrink:0}
.connection-preview{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:6000;pointer-events:none;fill:none}
.connection-preview path{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round;vector-effect:non-scaling-stroke;fill:none}
.graph-viewport.spatial-mode{background:radial-gradient(ellipse at 52% 45%,#c5bbf215,transparent 65%)}
.graph-viewport.spatial-mode .node{box-shadow:0 8px 25px -18px #45436255,inset 0 1px 0 #ffffff50}
[data-theme=dark] .graph-viewport.spatial-mode .node{box-shadow:0 10px 30px -18px #0008,inset 0 1px 0 #ffffff0a}
.node[data-type=unassigned]{border-style:dashed;border-color:var(--muted2)}
.node[data-type=unassigned] .node-contents:after{content:'frei';font-size:7px;color:var(--muted2);margin-left:auto}
.detail-channel:empty{display:none}
@keyframes selectedCable{to{stroke-dashoffset:-90}}
@media(max-width:960px){.cluster-link-panel{flex-wrap:wrap;justify-content:space-between;gap:10px}.cluster-scene-tools{gap:4px;margin-right:5px}.graph-arrange span{display:none}}
@media(max-width:700px){.graph-topline{left:13px;right:13px}.cluster-scene-tools{margin-left:auto}.graph-arrange{padding:7px}.scene-mode-toggle button{font-size:8px;padding:5px;min-width:25px}.cluster-edit-overlay{left:11px;right:11px;bottom:35px}.cluster-link-panel{padding:11px;width:100%;border-radius:11px}.link-panel-actions{width:100%;justify-content:flex-end}.cluster-link-panel strong{font-size:11px}.cluster-link-panel small{font-size:10px}.node-port{opacity:.9}.graph-title{font-size:8px}.node .node-contents{gap:8px}}
@media(prefers-reduced-motion:reduce){.graph-svg .edge-selected path{animation:none}.node-port{transition:none}.cluster-link-panel{animation:none}}

/* Relationship tools occupy the canvas header, leaving target nodes unobstructed. */
.graph-topline{z-index:4500}.cluster-edit-overlay{top:13px;bottom:auto}.cluster-link-panel{padding:8px 12px;min-height:36px}.graph-main.relationship-editing .graph-topline{visibility:hidden}.cluster-link-panel .button.small{padding:7px 9px;font-size:12px}.cluster-link-panel .icon-button{height:26px;width:26px}
@media(max-width:700px){.cluster-edit-overlay{top:10px;bottom:auto}.cluster-link-panel{padding:8px 10px;gap:8px}.link-panel-actions{width:auto}.cluster-link-panel .button.small{font-size:11px}}

#toast,#toast.visible{transform:translate(-50%,0);transition:opacity .12s}.graph-undo{padding:8px}.graph-undo:disabled{opacity:.3}

.node strong{font-size:12px;font-weight:550}.node small{font-size:9.5px;line-height:1.45}.node.channel .node-contents{font-size:11px}

/* SVG controls indicate keyboard focus on their cable, never its bounding box. */
.graph-svg g[tabindex],
.graph-svg .editable-edge,
.graph-svg .proposal-edge,
.graph-svg g[tabindex]:focus,
.graph-svg g[tabindex]:focus-visible,
.graph-svg .editable-edge:focus,
.graph-svg .editable-edge:focus-visible,
.graph-svg .proposal-edge:focus,
.graph-svg .proposal-edge:focus-visible{outline:none!important;box-shadow:none!important;border:0!important}
.graph-svg :is(g[tabindex],.editable-edge,.proposal-edge):focus-visible path:not(.edge-hit):not(.proposal-hit){stroke:var(--accent)!important;stroke-width:1.35px!important;opacity:1!important;filter:none!important}