/* =========================================================
   SEMANTIC BRAIN — CONNECTION ENGINE (visual layer)
   ---------------------------------------------------------
   This file is the SINGLE source of truth for how any relationship
   between two canvas objects looks and animates across its five
   states: idle, hover, selected, creating, disabled. Pairs with
   `connection-engine.js`, which builds/updates the DOM these rules
   style and drives `data-sb-connection-state` on `.sb-connection*`
   elements.

   Do NOT add a second, competing definition of `.sb-connection*`
   anywhere else in the project. Every connection in
   knowledge-views.js is drawn through this Engine's `render()` —
   any future object type's relationships must be too, instead of a
   bespoke edge-drawing routine of its own.
   ========================================================= */

/* ---------------------------------------------------------
   1. LAYERS
   Mirrors the layering already established by interaction-engine.css
   / knowledge-views.css for the Canvas: connections render BELOW the
   node layer (`.kv-connections`) so a node visually sits on top of
   the lines that touch it, while the interactive hit-path/handle/
   delete-button live ABOVE the node layer (`.kv-edge-interaction`,
   pre-existing) so a click near — but not on — a node still reaches
   the connection under it, never swallowed by the node's own hit box.
   --------------------------------------------------------- */
.kv-connections {
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

/* ---------------------------------------------------------
   2. THE CURVE — always a quadratic Bézier, never a straight line
   (mission requirement, CONNECTION RENDERING). Colour is set inline
   per-instance (connection-engine.js) from the source object's own
   colour, matching the project's existing "a connection is an
   extension of the concept's own identity" rule for node connections
   (see ARCHITECTURE_DECISION.md) — never a fixed relation-type
   palette. Relation TYPE continues to be encoded only by stroke
   pattern (dasharray), never colour.
   --------------------------------------------------------- */
.sb-connection {
  fill:none;
  stroke-width:2.15;
  stroke-linecap:round;
  opacity:.94;
  filter:drop-shadow(0 0 4px currentColor);
  transition:
    stroke-width var(--sb-duration-fast) var(--sb-ease-standard),
    opacity var(--sb-duration-fast) var(--sb-ease-standard),
    filter var(--sb-duration-fast) var(--sb-ease-standard);
}
.sb-connection.related { stroke-dasharray:none; }
.sb-connection.analogy { stroke-dasharray:10 6; }
.sb-connection.discovery { stroke-dasharray:4 5; stroke-width:2.7; }
.sb-connection.answer { stroke-dasharray:2 5; }

/* ---------------------------------------------------------
   3. STATES — Idle / Hover / Selected / Creating / Disabled
   Transitions must be smooth (mission requirement, VISUAL STATES) —
   every property that changes between states above is already
   listed in the `transition` on `.sb-connection`, so no state switch
   ever jumps.
   --------------------------------------------------------- */

/* Hover — a connection highlights on its own, independent of any
   node's hover (mission requirement: "Connection Highlighting").
   Brighter + very slightly thicker, never a colour change (relation
   colour stays the source object's own colour at every state). */
.sb-connection[data-sb-connection-state="hover"] {
  stroke-width:2.6;
  opacity:1;
  filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 5px var(--connection-color, currentColor));
}

/* Selected — brightest treatment, the same visual language used for
   selected nodes (interaction-engine.css §1) so selection reads
   consistently across every kind of canvas object, connections
   included. */
.sb-connection[data-sb-connection-state="selected"] {
  stroke-width:2.5;
  opacity:1;
  filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 7px var(--connection-color, currentColor));
}

/* Creating — the live preview while a ring-drag is in progress. A
   faster, looser dash than any committed connection type so it never
   reads as "already a real relationship" while it's still a gesture
   in progress. */
.sb-connection[data-sb-connection-state="creating"] {
  stroke-dasharray:7 7;
  opacity:.85;
  animation:sb-connection-flow .6s linear infinite;
}
@keyframes sb-connection-flow {
  to { stroke-dashoffset:-28; }
}

/* Disabled — reserved for a future Engine (e.g. a rule that makes a
   relationship temporarily invalid) to use without inventing its own
   dimmed treatment; nothing in this mission's own flows sets it yet,
   mirroring interaction-engine.css's own `disabled` state, which the
   Interaction Foundation Engine defines for the same "future use"
   reason. */
.sb-connection[data-sb-connection-state="disabled"] {
  opacity:.35;
  filter:none;
  pointer-events:none;
}

/* ---------------------------------------------------------
   4. HIT AREA — invisible, wide, never affects what's painted
   --------------------------------------------------------- */
.sb-connection-hit {
  fill:none;
  stroke:transparent;
  stroke-width:26px;
  cursor:grab;
  pointer-events:stroke;
}
.sb-connection-hit:active { cursor:grabbing; }
.kv-canvas.insert-connection .sb-connection-hit { cursor:copy; }

/* ---------------------------------------------------------
   5. BEND HANDLE — only visible (and only receives events) while its
   connection is selected; a hover-only affordance would let an
   invisible point from an unrelated, unselected connection steal a
   click meant for something else.
   --------------------------------------------------------- */
.sb-connection-handle {
  fill:color-mix(in srgb, var(--sb-primary) 22%, white);
  stroke:var(--sb-primary);
  stroke-width:2;
  opacity:0;
  cursor:grab;
  transition:opacity var(--sb-duration-fast) var(--sb-ease-standard), r var(--sb-duration-fast) var(--sb-ease-standard);
}
.sb-connection-handle[data-sb-connection-state="selected"] { opacity:.6; }
.sb-connection-handle[data-sb-connection-state="selected"]:hover { opacity:1; r:7; }

/* ---------------------------------------------------------
   6. DELETE AFFORDANCE — appears only while a connection is
   selected (mission: "Connections can be independently deleted").
   Deliberately NOT gated behind the node-delete confirmation dialog
   (interaction-engine.js `confirmDelete`) — removing a relationship
   carries none of the cascade risk deleting a node's subtree does,
   so an immediate, single-click action is the right weight here; the
   curve fades out on removal (see `.sb-connection-hit`'s sibling
   fade below) rather than vanishing instantly, so the action still
   registers as deliberate, never jarring.
   --------------------------------------------------------- */
.sb-connection-delete {
  position:absolute;
  z-index:11;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  padding:0;
  transform:translate(-50%,-50%);
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-circle);
  background:var(--sb-surface-1);
  color:var(--sb-text-secondary);
  box-shadow:var(--sb-shadow-1);
  cursor:pointer;
  transition:
    background var(--sb-duration-fast) var(--sb-ease-standard),
    color var(--sb-duration-fast) var(--sb-ease-standard),
    border-color var(--sb-duration-fast) var(--sb-ease-standard);
}
.sb-connection-delete svg { width:11px; height:11px; stroke:currentColor; stroke-width:2.2; fill:none; }
.sb-connection-delete:hover {
  background:color-mix(in srgb, var(--sb-error) 22%, var(--sb-surface-1));
  border-color:var(--sb-error);
  color:var(--sb-error);
}

/* ---------------------------------------------------------
   7. LABEL — unchanged visual language from the pre-existing
   `.kv-edge-label`, now under this Engine's namespace.
   --------------------------------------------------------- */
.sb-connection-label,
.sb-connection-label-input {
  position:absolute;
  z-index:10;
  transform:translate(-50%,-50%);
  max-width:140px;
  padding:4px 8px;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-sm);
  background:var(--sb-surface-1);
  color:var(--sb-text-secondary);
  font-size:10px;
}
.sb-connection-label { cursor:text; }
.sb-connection-label-input { outline:none; color:var(--sb-text); }