/* Canvas svg stays transparent so the dot grid shows through */
.canvas { width: 100%; height: 100%; display: block; background: transparent; touch-action: none; user-select: none; cursor: grab; }
.node { cursor: move; }
/* --shape-* are set inline from the color preset (groups.js paintColor); unset = default look */
.node-shape { fill: var(--shape-fill, var(--surface)); stroke: var(--shape-stroke, var(--border-strong)); stroke-width: 1.5; transition: stroke 120ms; }
.node:hover .node-shape { stroke: var(--shape-stroke, var(--text-faint)); }
.node.selected .node-shape { stroke: var(--accent); stroke-width: 2; }
.node-detail { fill: none; }
.node-label { fill: var(--shape-text, var(--text)); font-family: var(--font); font-size: 14px; font-weight: 500; pointer-events: none; }
.node-input:focus-visible { outline: none; box-shadow: none; } /* the selected step's accent outline is the only frame while typing */
.node-counter { position: absolute; transform: translateX(-50%); padding: 2px 10px; font-size: var(--fs-micro); line-height: 16px; white-space: nowrap; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); pointer-events: none; }
.node-counter.warn { color: var(--danger); border-color: var(--danger); }
.node-input {
  position: absolute;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
}

/* Edges */
.edge-line { fill: none; stroke: var(--text-faint); stroke-width: 1.75; transition: stroke 120ms; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.edge.selected .edge-line { stroke: var(--accent); stroke-width: 2; }
.edge:hover .edge-line { stroke: var(--accent); }
.landing-dot { fill: var(--landing-dot); stroke: var(--surface); stroke-width: 1.5; pointer-events: none; }
.landing-dot.selected { fill: var(--accent); }
.arrow-head { fill: var(--text-faint); stroke: var(--text-faint); stroke-width: 1; stroke-linejoin: round; }
.edge-label-bg { fill: var(--surface); stroke: var(--edge-label-border); stroke-width: 1; }
.edge-label { fill: var(--text); font-family: var(--font); font-size: 13px; pointer-events: none; }
.edge-preview { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }

/* Delete button on a selected arrow or step: touch screens only */
.item-del { display: none; cursor: pointer; filter: var(--drop-sm); }
.item-del circle { fill: var(--surface); stroke: var(--danger); stroke-width: 1.5; }
.item-del path { stroke: var(--danger); stroke-width: 2; stroke-linecap: round; fill: none; }

/* Node hover extras: connection dots and "+" buttons (inactive until the node is hovered/selected) */
.hover-pad { fill: transparent; pointer-events: none; }
.node:hover .hover-pad { pointer-events: all; }
/* .dot-hit is an invisible, large grab area around the visible .dot */
.dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; opacity: 0; pointer-events: none; }
.dot-hit { fill: transparent; stroke: none; pointer-events: none; cursor: crosshair; }
.node:hover .dot, .node.selected .dot { opacity: 1; }
.node:hover .dot-hit, .node.selected .dot-hit { pointer-events: all; }
.dot-hit:hover + .dot { r: 9; }
.plus { opacity: 0; pointer-events: none; cursor: pointer; filter: var(--drop-sm); }
.plus circle { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; transition: transform 120ms, fill 120ms; }
.plus path { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; fill: none; transition: transform 120ms, stroke 120ms; }
.plus circle, .plus path { transform-box: fill-box; transform-origin: center; }
.node:hover .plus { opacity: 1; pointer-events: all; }
.plus:hover circle, .plus:hover path { transform: scale(1.08); }
.plus:hover circle { fill: var(--accent-soft); }

/* Groups: faint tinted boxes behind nodes; label in the header, resize handle bottom-right */
.group { cursor: move; }
.group-box { fill: var(--shape-fill, var(--group-bg)); stroke: var(--shape-stroke, var(--group-stroke)); stroke-width: 1; stroke-dasharray: 5 4; transition: stroke 120ms; }
.group[style*="--shape-fill"] .group-box { fill-opacity: 0.6; }
.group:hover .group-box { stroke: var(--shape-stroke, var(--text-faint)); }
.group.selected .group-box { stroke: var(--accent); stroke-dasharray: none; }
.group-label-layer { pointer-events: none; }
.group-label-bg { fill: var(--surface); fill-opacity: 0.9; stroke: var(--border); stroke-width: 1; }
.group-label { fill: var(--text-muted); font-family: var(--font); font-size: 13px; font-weight: 600; pointer-events: none; }
.group-resize { fill: var(--text-faint); opacity: 0; cursor: nwse-resize; transition: opacity 120ms; }
.group.selected .group-resize, .group:hover .group-resize { opacity: 0.8; }
.group-resize:hover { fill: var(--accent); opacity: 1; }

/* Touch screens: no hover, so show the "+" buttons on the selected step; bigger grab areas for fingers */
@media (pointer: coarse) {
  .node.selected .plus { opacity: 1; pointer-events: all; }
  .item-del { display: inline; }
  .edge-hit { stroke-width: 32; }
  .dot-hit { r: 26px; }
  .dot { r: 11px; }
  .plus circle { r: 16px; }
  .group-resize { stroke: transparent; stroke-width: 24px; pointer-events: all; }
  .canvas { -webkit-touch-callout: none; }
}

/* A step that was just added keeps a soft glow, and the steps under it stay blurred, until it is clicked for the first time (js/fresh.js) */
.node-fresh, .node-glow { filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--accent) 45%, transparent)); }
.node-fresh { animation: node-pop 500ms ease-out; }
.node-under { filter: blur(3px); opacity: 0.45; }
@keyframes node-pop { from { opacity: 0; } }

/* Select tool: rubber band while dragging, crosshair cursor while the tool is on */
.marquee { position: fixed; z-index: 11; pointer-events: none; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 5px; }
.marquee[hidden] { display: none; }
.marquee svg { display: block; overflow: visible; }
.marquee-dots { width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 7; animation: marquee-march 1.6s linear infinite; }
@keyframes marquee-march { to { stroke-dashoffset: -14.2; } }
.canvas.select-mode, .canvas.select-mode .node, .canvas.select-mode .group { cursor: crosshair; }

/* Steps that will join a group when it is dropped (js/join-hint.js): a soft accent pulse */
.join-hint .node-shape { stroke: var(--accent); stroke-width: 2.5; }
.join-hint { animation: join-pulse 1.2s ease-in-out infinite; }
@keyframes join-pulse { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent)); } }
.snap-guide { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }