/* ---------- Connection points + connectors ---------- */
.cps {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cp {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1.5px solid var(--accent-1);
  pointer-events: auto;
  cursor: crosshair;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  z-index: 3;
}
.cps.visible .cp,
.el:hover .cp {
  opacity: 0.55;
  transform: translate(-50%, -50%) scale(1);
}
.el .cps.visible .cp { opacity: 0.9; }
.cp:hover {
  opacity: 1 !important;
  background: var(--accent-1);
  transform: translate(-50%, -50%) scale(1.25);
}
.cp-top    { top: 0;    left: 50%; }
.cp-right  { top: 50%;  left: 100%; }
.cp-bottom { top: 100%; left: 50%; }
.cp-left   { top: 50%;  left: 0; }

/* While dragging an anchor, force-show ALL anchors so the user can aim. */
.canvas.connecting .cp {
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(1);
}
.canvas.connecting .cp:hover { opacity: 1; }

/* SVG layer must always sit above all canvas elements, including groups. */
.connectors-layer {
  z-index: 1000;
}

/* Connector top toolbar: anchor by the bottom edge so `top` sets where the
   toolbar's bottom sits, giving a consistent gap above the connector midpoint. */
.conn-toolbar-top {
  transform: translateX(-50%) translateY(-100%);
}

.connector path[stroke="transparent"] { cursor: pointer; }
.connector:hover path:not([stroke="transparent"]) {
  filter: brightness(1.1);
}