/* ==========================================================================
   Vertical (top-to-bottom) Vector editor canvas.
   Pairs with drawflow.css — it reuses the .vec-node card styles from there and
   only adds the vertical scaffolding: a scrollable canvas, top/bottom ports, and
   vertical bezier wires. Loaded on the Penny studio when ?editor=vertical.
   ========================================================================== */

/* The canvas element (data-...-target="canvas") is the scroll container. */
.vec-canvas > .ved {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  touch-action: none;
}

/* Wire layer — sized by the editor so it drives the scroll area. */
.ved__wires {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.ved__wire {
  fill: none;
  stroke: color-mix(in oklch, var(--color-base-content) 22%, transparent);
  stroke-width: 2.5px;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke .15s ease, stroke-width .1s ease;
}
.ved__wire:hover { stroke: var(--color-error); stroke-width: 3.5px; }
.ved__wire--temp {
  stroke: var(--color-primary);
  stroke-dasharray: 5 5;
  pointer-events: none;
}

/* Node wrapper — positions the shared .vec-node card + its ports. */
.ved__node {
  position: absolute;
  width: 240px;             /* matches .vec-node */
  z-index: 2;
  cursor: grab;
}
.ved__node:active { cursor: grabbing; }
.ved__node.is-selected { z-index: 3; }
/* Selection ring, mirroring drawflow.css's .drawflow-node.selected .vec-node. */
.ved__node.is-selected .vec-node {
  border-color: var(--vec-accent, var(--color-primary));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--vec-accent, var(--color-primary)) 22%, transparent),
              0 10px 24px -10px rgba(16, 24, 40, .28);
}

/* Ports: input on top-center, outputs along the bottom edge. */
.ved__port {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-base-100);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  z-index: 4;
  transition: transform .12s ease;
}
.ved__port--in {
  top: -7px;
  left: calc(50% - 7px);
  border: 2px solid color-mix(in oklch, var(--color-base-content) 35%, transparent);
}
.ved__port--out {
  bottom: -7px;
  transform: translateX(-50%);
  border: 2px solid var(--h, var(--color-neutral));
  cursor: crosshair;
}
.ved__port--out:hover { transform: translateX(-50%) scale(1.3); }
.ved__port--in:hover { transform: scale(1.3); }

/* --------------------------------------------------------------------------
   Vertical node card styling — matches the spike design: a rounded-square
   accent icon tile in the top-left, a thin top accent stripe, and a muted
   kicker. Scoped to .ved__node so classic Drawflow cards keep their circular
   disc (shared .vec-node styles from drawflow.css otherwise apply as-is).
   -------------------------------------------------------------------------- */
.ved__node .vec-node {
  border-top: 3px solid var(--vec-accent, var(--color-primary));
}

/* Per-kind palette — one distinct hue per Penny step so no two steps share a
   color. Evenly spread around the wheel (≈30° apart); tuned to read on the dark
   canvas. Each name is used by exactly one kind in Vectors::NodeCatalog. */
.ved__node .vec-node[data-accent="ved-red"]     { --vec-accent: oklch(64% 0.16 20); }
.ved__node .vec-node[data-accent="ved-orange"]  { --vec-accent: oklch(70% 0.15 50); }
.ved__node .vec-node[data-accent="ved-amber"]   { --vec-accent: oklch(80% 0.14 80); }
.ved__node .vec-node[data-accent="ved-lime"]    { --vec-accent: oklch(80% 0.16 120); }
.ved__node .vec-node[data-accent="ved-green"]   { --vec-accent: oklch(72% 0.15 145); }
.ved__node .vec-node[data-accent="ved-teal"]    { --vec-accent: oklch(74% 0.11 180); }
.ved__node .vec-node[data-accent="ved-cyan"]    { --vec-accent: oklch(74% 0.12 210); }
.ved__node .vec-node[data-accent="ved-blue"]    { --vec-accent: oklch(66% 0.14 235); }
.ved__node .vec-node[data-accent="ved-indigo"]  { --vec-accent: oklch(60% 0.16 265); }
.ved__node .vec-node[data-accent="ved-violet"]  { --vec-accent: oklch(64% 0.17 295); }
.ved__node .vec-node[data-accent="ved-fuchsia"] { --vec-accent: oklch(66% 0.19 325); }
.ved__node .vec-node[data-accent="ved-rose"]    { --vec-accent: oklch(66% 0.17 350); }
.ved__node .vec-node__body { padding: 12px 14px; }

/* circular disc → rounded-square accent tile */
.ved__node .vec-node__disc {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: color-mix(in oklch, var(--vec-accent) 20%, transparent);
}
.ved__node .vec-node__disc svg { width: 17px; height: 17px; }

/* accent-colored kicker → muted (accent still carries via tile + top stripe);
   the kind label can be long, so keep it to a single truncated line */
.ved__node .vec-node__kicker {
  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
  font-weight: 700;
  letter-spacing: .11em;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Single-line ellipsis title → wraps up to 3 lines, so more of the step's copy
   shows and cards grow taller (matching the spike design). */
.ved__node .vec-node__title {
  font-size: 12.5px;
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}