/* ============================================================
   CanvasEngine — generic canvas skin (Tier A, §10 of
   docs/WORKSPACE_GRAPH_ARCHITECTURE.md).

   Design-token variables ONLY — never raw colors — so the canvas is
   automatically light/dark safe and follows the platform theme. All
   class names are generic (cnv-*): no domain vocabulary, ever.
   `--accent` falls back to `--brand` (the platform's accent token).
   ============================================================ */

/* ---- surface ---- */
.cnv-root {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ground);
  outline: none;
  cursor: default;
  touch-action: none;          /* pointer-event gestures own the surface */
  user-select: none;
  -webkit-user-select: none;
}
.cnv-root:focus-visible { box-shadow: var(--focus-ring); }
.cnv-root.is-pan { cursor: grab; }
.cnv-root.is-panning { cursor: grabbing; }

/* ---- layers ---- */
.cnv-layer { transition: opacity var(--duration-fast) var(--ease-standard); }
.cnv-layer-hidden { display: none; }

/* ---- node card ---- */
.cnv-node { cursor: grab; }
.cnv-node:active { cursor: grabbing; }

.cnv-node__bg {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
}
.cnv-node:hover .cnv-node__bg { stroke: var(--border-strong); }
.cnv-node.is-selected .cnv-node__bg {
  stroke: var(--accent, var(--brand));
  stroke-width: 1.5;
}
.cnv-node.is-match .cnv-node__bg {
  stroke: var(--warning);
  stroke-width: 1.5;
}

/* selection halo drawn behind the card */
.cnv-selection {
  fill: none;
  stroke: var(--accent, var(--brand));
  stroke-width: 1.5;
  opacity: var(--opacity-muted);
  visibility: hidden;
}
.cnv-node.is-selected .cnv-selection { visibility: visible; }

.cnv-node__stripe { fill: var(--text-faint); }
.cnv-node__icon { fill: var(--text-muted); }

.cnv-node__title {
  fill: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--text-title-weight);
}
.cnv-node__sub {
  fill: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-small-size);
  font-weight: var(--text-small-weight);
}

/* ---- badge chips ---- */
.cnv-badge__bg {
  fill: var(--surface-muted);
  stroke: var(--border);
  stroke-width: var(--border-hairline);
}
.cnv-badge__text {
  fill: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
}

/* ---- collapse chevron ---- */
.cnv-node__chevron { cursor: pointer; color: var(--text-muted); }
.cnv-node__chevron:hover { color: var(--text); }
.cnv-node__chevron-hit { fill: transparent; }
.cnv-node__chevron-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.cnv-node.is-collapsed .cnv-node__chevron-glyph { transform: rotate(-90deg); }

/* ---- ports ---- */
.cnv-port {
  fill: var(--surface);
  stroke: var(--text-muted);
  stroke-width: 1.5;
  cursor: crosshair;
  transition: stroke var(--duration-fast) var(--ease-standard);
}
.cnv-port:hover {
  fill: var(--surface-raised);
  stroke: var(--accent, var(--brand));
}

/* ---- edges ---- */
.cnv-edge {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.5;
}
.cnv-edge__arrow { fill: var(--text-muted); }
.cnv-edge--preview {
  stroke: var(--accent, var(--brand));
  stroke-dasharray: 4 4;
  pointer-events: none; /* must not block elementFromPoint on drop */
}

/* ---- marquee (screen space) ---- */
.cnv-marquee {
  fill: color-mix(in srgb, var(--accent, var(--brand)) 10%, transparent);
  stroke: var(--accent, var(--brand));
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}