/*
  DiagramCanvas engine styles (Agent 2). Layout/structure only; brand color/spacing tokens
  (--accent-*, --surface-*, --fg-*, --border) come from the Studio design-system sheet ported
  by Agent 1. Fallback values keep the canvas legible if mounted standalone (e.g. tests).
*/

.lg-canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    user-select: none;
    touch-action: none;
    background: var(--ink, #0c0c10);
    outline: none;
}

/* ---- Grid ---------------------------------------------------------------- */
.lg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lg-grid[data-style="dots"] {
    background-image:
        radial-gradient(var(--border, #2a2a33) 1px, transparent 1px),
        radial-gradient(var(--border, #2a2a33) 1px, transparent 1px);
    opacity: 0.6;
}
.lg-grid[data-style="lines"] {
    background-image:
        linear-gradient(var(--border, #2a2a33) 1px, transparent 1px),
        linear-gradient(90deg, var(--border, #2a2a33) 1px, transparent 1px);
    opacity: 0.4;
}
.lg-grid[data-style="off"] { background-image: none; }

/* ---- SVG layer ----------------------------------------------------------- */
.lg-svg {
    position: absolute;
    inset: 0;
    pointer-events: none; /* only edge hit-paths re-enable */
}
.lg-edge__hit {
    fill: none;
    stroke: transparent;
    stroke-width: 12;
    pointer-events: stroke;
    cursor: pointer;
}
.lg-edge__path {
    fill: none;
    pointer-events: none;
    transition: stroke-width 80ms ease;
}
.lg-edge__label-bg { fill: var(--surface-1, #16161c); }
.lg-edge__label {
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 11px;
    fill: var(--fg-2, #b8b8c4);
}
.lg-marquee {
    fill: var(--accent-a12, rgba(99, 102, 241, 0.12));
    stroke: var(--accent-500, #6366f1);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    pointer-events: none;
}

/* ---- Node layer ---------------------------------------------------------- */
.lg-nodes {
    position: absolute;
    inset: 0;
    pointer-events: none; /* frames re-enable */
}
.lg-node {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: move;
}
.lg-node__body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.lg-node__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px dashed var(--border, #3a3a44);
    border-radius: var(--radius-md, 6px);
    background: var(--surface-1, #16161c);
    color: var(--fg-3, #8a8a96);
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 12px;
    text-align: center;
}
.lg-node.is-selected { outline: 2px solid var(--accent-500, #6366f1); outline-offset: 2px; border-radius: 4px; }
.lg-node.is-hover:not(.is-selected) { outline: 1px solid var(--accent-a28, rgba(99, 102, 241, 0.28)); outline-offset: 1px; border-radius: 3px; }

/* Anchors */
.lg-anchor {
    position: absolute;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--surface-1, #16161c);
    border: 1.5px solid var(--accent-500, #6366f1);
    cursor: crosshair;
    pointer-events: auto;
}
.lg-anchor:hover { background: var(--accent-500, #6366f1); }

/* Quick-connect arrows */
.lg-quick {
    position: absolute;
    width: 14px; height: 14px;
    background: var(--accent-a18, rgba(99, 102, 241, 0.18));
    border: 1px solid var(--accent-500, #6366f1);
    border-radius: 3px;
    cursor: crosshair;
    pointer-events: auto;
}
.lg-quick--n { left: 50%; top: -22px; transform: translateX(-50%); }
.lg-quick--s { left: 50%; bottom: -22px; transform: translateX(-50%); }
.lg-quick--e { right: -22px; top: 50%; transform: translateY(-50%); }
.lg-quick--w { left: -22px; top: 50%; transform: translateY(-50%); }

/* Resize handles */
.lg-handle {
    position: absolute;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--surface-1, #fff);
    border: 1.5px solid var(--accent-500, #6366f1);
    pointer-events: auto;
}
.lg-handle--nw { left: 0;   top: 0;    cursor: nwse-resize; }
.lg-handle--n  { left: 50%; top: 0;    cursor: ns-resize; }
.lg-handle--ne { left: 100%;top: 0;    cursor: nesw-resize; }
.lg-handle--e  { left: 100%;top: 50%;  cursor: ew-resize; }
.lg-handle--se { left: 100%;top: 100%; cursor: nwse-resize; }
.lg-handle--s  { left: 50%; top: 100%; cursor: ns-resize; }
.lg-handle--sw { left: 0;   top: 100%; cursor: nesw-resize; }
.lg-handle--w  { left: 0;   top: 50%;  cursor: ew-resize; }

/* ---- Overlay layer ------------------------------------------------------- */
.lg-ctxmenu {
    position: absolute;
    z-index: 1000;
    min-width: 160px;
    padding: 4px;
    background: var(--surface-2, #1c1c24);
    border: 1px solid var(--border, #2a2a33);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.4));
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 13px;
}
.lg-ctxmenu__item { padding: 6px 10px; border-radius: 4px; cursor: pointer; color: var(--fg-1, #e8e8ef); }
.lg-ctxmenu__item:hover { background: var(--accent-a18, rgba(99, 102, 241, 0.18)); }
.lg-ctxmenu__sep { height: 1px; margin: 4px 6px; background: var(--border, #2a2a33); }