/* Canvas (S10). The diagram itself is self-contained: the scene carries its
   paint as var(--dg-*) / var(--fc-*) references to tokens.css, so
   design/diagram.css is not loaded (its state rules would apply twice). This
   file gives the SVG its text settings and styles the canvas's own overlays. */

.cg-canvas { position: absolute; inset: 0; outline: none; }
.cg-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring, var(--accent)); }

.cg-svg { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; will-change: transform; touch-action: none;
  font-family: var(--font-diagram); font-feature-settings: var(--font-feature-ui); user-select: none; -webkit-user-select: none; }
.cg-svg text { white-space: pre; }

/* cursors, set by the pointer handlers through data-cursor */
.cg-svg { cursor: default; }
.cg-canvas[data-cursor="grab"] .cg-svg { cursor: grab; }
.cg-canvas[data-cursor="grabbing"] .cg-svg,
.cg-canvas.is-grabbing .cg-svg { cursor: grabbing; }
.cg-canvas[data-cursor="move"] .cg-svg { cursor: move; }
.cg-canvas[data-cursor="pointer"] .cg-svg { cursor: pointer; }
.cg-canvas[data-cursor="crosshair"] .cg-svg { cursor: crosshair; }
.cg-canvas[data-cursor="copy"] .cg-svg { cursor: copy; }
.cg-canvas[data-cursor="not-allowed"] .cg-svg { cursor: not-allowed; }

/* overlay: connector dots, the line being drawn, the drop target */
.cg-overlay { pointer-events: none; }
.cg-anchor { fill: var(--dg-table-bg); stroke: var(--dg-selection); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cg-connect { fill: none; stroke: var(--dg-selection); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.cg-target { fill: color-mix(in srgb, var(--dg-selection) 10%, transparent); stroke: var(--dg-selection); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* in-place rename */
.cg-rename { position: absolute; z-index: var(--z-canvas-overlay); padding: 0 var(--space-2); font-size: var(--text-sm);
  box-shadow: var(--shadow-1); }

/* toolbars */
.cg-search .kbd { flex: none; }
.cg-search input { min-width: 0; }
.cg-search-count { flex: none; font-variant-numeric: tabular-nums; }
.cg-trace-label { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--space-2); white-space: nowrap; }
.cg-trace-label b { color: var(--fg); }
.canvas-tools .btn.is-active,
.zoombar .btn.is-active { background: var(--bg-selected); color: var(--fg); }

/* minimap boxes */
.minimap svg { cursor: pointer; touch-action: none; }
.minimap .mm-group { fill: var(--dg-group, var(--fg-subtle)); fill-opacity: 0.12; }
.minimap .mm-note { fill: var(--dg-sticky-bg, var(--bg-inset)); stroke: var(--dg-sticky-border, var(--border)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.minimap .mm-table,
.minimap .mm-node,
.minimap .mm-other { fill: var(--bg-inset); stroke: var(--fg-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* details panel */
.details .md pre code { background: none; padding: 0; }
.details .cg-row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.details .cg-inline-form { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.details .cg-inline-form .input { width: auto; min-width: 0; flex: 3 1 0; }
.details .cg-inline-form .input + .input { flex: 2 1 0; }
.details .cg-inline-form .btn { flex: none; }