/* canvas.css — v740–v742 — the infinite-canvas page (CanvasPage.jsx).
   Same cream design language as the rest of the app; every selector scoped
   under .cv- so nothing leaks. .cv-page--dark flips the CANVAS surface dark
   while the floating chrome stays cream.
   🔒 v742 — picker thumbnails MUST stay on the .cv-thumbbox padding-bottom
   box: an <img> with aspect-ratio + width:100% contributes no intrinsic
   height during grid track sizing (cyclic %), rows collapse to ~2px and
   every card paints over the next. Percentage PADDING resolves against the
   known column width, so the box always sizes. Don't "simplify" it away. */

.cv-page {
  position: relative;
  height: calc(100vh - 210px);
  min-height: 480px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  background: var(--cream-7);
}

.cv-viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  cursor: default;
  background-image: radial-gradient(color-mix(in srgb, var(--taupe) 22%, transparent) 1.2px, transparent 1.2px);
  touch-action: none;
  user-select: none;
}
.cv-viewport.is-panning { cursor: grab; }
.cv-page--dark { background: var(--shade-58); border-color: color-mix(in srgb, var(--taupe) 50%, transparent); }
.cv-page--dark .cv-viewport { background-image: radial-gradient(color-mix(in srgb, color-mix(in srgb, var(--card-border) 70%, var(--mix-light)) 16%, transparent) 1.2px, transparent 1.2px); }

.cv-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* ── items ─────────────────────────────────────────────────────────────── */
.cv-item { position: absolute; border-radius: var(--r-xs); }
.cv-item--image {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--umber) 18%, transparent);
  background: color-mix(in srgb, var(--mix-light) 50%, transparent);
  outline: 1px solid color-mix(in srgb, var(--taupe) 25%, transparent);
}
.cv-item--image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: var(--r-xs);
  pointer-events: none;
}
.cv-item.is-selected { outline: 2px solid color-mix(in srgb, var(--olive) 95%, transparent); }
.cv-item-label {
  position: absolute; left: 0; bottom: -22px;
  font-size: var(--fs-11); line-height: 1; white-space: nowrap;
  color: var(--ink-taupe-3); background: color-mix(in srgb, color-mix(in srgb, var(--gold-11) 17%, var(--mix-light)) 90%, transparent);
  padding: 4px 7px; border-radius: 5px;
  opacity: 0; transition: opacity var(--dur-0) ease;
  pointer-events: none;
}
.cv-item:hover .cv-item-label, .cv-item.is-selected .cv-item-label { opacity: 1; }
.cv-item-handle {
  position: absolute; right: -7px; bottom: -7px;
  width: 14px; height: 14px; border-radius: 4px;
  background: color-mix(in srgb, var(--olive) 95%, transparent); border: 2px solid color-mix(in srgb, var(--gold-11) 17%, var(--mix-light));
  cursor: nwse-resize;
}
/* per-item action row (selection only) — wraps when a kind has many controls */
.cv-item-actions {
  position: absolute; top: -15px; right: -7px;
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
  max-width: calc(100% + 14px);
}
.cv-item-act {
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); line-height: 1;
  color: var(--ink-umber); background: color-mix(in srgb, var(--gold-11) 17%, var(--mix-light));
  border: 1px solid color-mix(in srgb, var(--taupe) 55%, transparent); border-radius: var(--r-round);
  padding: 4px 7px; cursor: pointer;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--shade-40) 25%, transparent);
}
.cv-item-act:hover { border-color: color-mix(in srgb, var(--olive) 80%, transparent); }
.cv-item-act.is-on { background: color-mix(in srgb, var(--olive) 22%, transparent); border-color: color-mix(in srgb, var(--olive) 75%, transparent); }
.cv-item-act--x { color: var(--red-9); font-size: var(--fs-13); padding: 2px 7px 3px; }
.cv-item-act--x:hover { border-color: color-mix(in srgb, var(--red-10) 85%, transparent); background: color-mix(in srgb, var(--amber) 22%, var(--mix-light)); }
.cv-item-act--font { font-weight: 400; max-width: 110px; }

/* text / arrow / frame elements */
.cv-item--text {
  background: color-mix(in srgb, color-mix(in srgb, var(--gold-11) 17%, var(--mix-light)) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--taupe-2) 50%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--umber) 14%, transparent);
  height: auto;   /* v742 — the block hugs its text; minHeight comes inline */
}
.cv-item-text {
  width: 100%; overflow: hidden;
  padding: 10px 12px; font-size: var(--fs-17); line-height: 1.4;
  color: var(--ink-umber); white-space: pre-wrap; word-break: break-word;
}
.cv-item-textedit {
  display: block; width: 100%; min-height: 44px;
  font: inherit; font-size: var(--fs-17); line-height: 1.4; color: var(--ink-umber);
  background: var(--cream-18); border: none; border-radius: var(--r-xs);
  padding: 10px 12px; resize: none; overflow: hidden;
}
.cv-item-textedit:focus { outline: 2px solid color-mix(in srgb, var(--olive) 80%, transparent); }
.cv-item--arrow { background: none; }
.cv-item-arrow { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.cv-item-arrow line, .cv-item-arrow path { stroke: var(--umber-2); }
.cv-page--dark .cv-item-arrow line, .cv-page--dark .cv-item-arrow path { stroke: color-mix(in srgb, var(--card-border) 70%, var(--mix-light)); }
.cv-item--framebox {
  background: color-mix(in srgb, var(--mix-light) 6%, transparent);
  border: 2px dashed color-mix(in srgb, var(--taupe) 55%, transparent);   /* style overridden inline per frame */
}
.cv-page--dark .cv-item--framebox { border-color: color-mix(in srgb, color-mix(in srgb, var(--card-border) 70%, var(--mix-light)) 45%, transparent); }
.cv-item-framelabel {
  position: absolute; top: -24px; left: 0;
  font-size: var(--fs-12); letter-spacing: var(--track-06); text-transform: uppercase;
  color: var(--ink-taupe-3); background: color-mix(in srgb, color-mix(in srgb, var(--gold-11) 17%, var(--mix-light)) 90%, transparent);
  padding: 4px 8px; border-radius: 5px;
}
.cv-item-frameedit {
  position: absolute; top: -26px; left: 0; width: 220px;
  font: inherit; font-size: var(--fs-12); color: var(--ink-umber);
  background: var(--cream-18); border: 1px solid color-mix(in srgb, var(--olive) 70%, transparent); border-radius: 5px;
  padding: 3px 8px;
}

.cv-marquee {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--olive) 85%, transparent);
  background: color-mix(in srgb, var(--olive) 12%, transparent);
  pointer-events: none;
}

/* ── overlays ──────────────────────────────────────────────────────────── */
.cv-toolbar {
  position: absolute; top: 14px; left: 16px; z-index: 20;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  max-width: calc(100% - 32px);
  background: color-mix(in srgb, color-mix(in srgb, var(--gold-11) 17%, var(--mix-light)) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent);
  border-radius: 11px; padding: 8px 12px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--umber) 10%, transparent);
}
.cv-toolbar-title {
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-size: var(--fs-20); letter-spacing: var(--track-05); color: var(--ink, var(--ink-umber));
  margin-right: 4px;
}
.cv-toolbar-sep { width: 1px; height: 18px; background: color-mix(in srgb, var(--taupe-2) 45%, transparent); }
.cv-btn {
  font: inherit; font-size: var(--fs-12-5); color: var(--ink, var(--ink-umber));
  background: color-mix(in srgb, var(--mix-light) 60%, transparent); border: 1px solid color-mix(in srgb, var(--taupe-2) 55%, transparent);
  border-radius: var(--r-round); padding: 5px 12px; cursor: pointer; white-space: nowrap;
}
.cv-btn:hover { border-color: color-mix(in srgb, var(--olive) 70%, transparent); }
.cv-btn:disabled { opacity: 0.45; cursor: default; }
.cv-btn.is-on { background: color-mix(in srgb, var(--olive) 22%, transparent); border-color: color-mix(in srgb, var(--olive) 70%, transparent); }
.cv-btn--primary { background: color-mix(in srgb, var(--olive) 16%, transparent); border-color: color-mix(in srgb, var(--olive) 60%, transparent); font-weight: var(--fw-semi); }
.cv-btn--select { padding: 5px 8px; max-width: 130px; }
.cv-btn kbd, .cv-hints kbd, .cv-empty-hint kbd, .cv-picker-hint kbd {
  font: inherit; font-size: var(--fs-10-5); padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--taupe) 14%, transparent); border: 1px solid color-mix(in srgb, var(--taupe) 30%, transparent);
}
.cv-save { font-size: var(--fs-11-5); color: color-mix(in srgb, var(--ink-taupe) 87%, var(--mix-light)); min-width: 64px; }
.cv-save--saved { color: var(--olive); }
.cv-save--error, .cv-save--loadfail { color: var(--red-10); }

.cv-hints {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 16px; align-items: center;
  font-size: var(--fs-11-5); color: color-mix(in srgb, var(--ink-taupe) 87%, var(--mix-light)); white-space: nowrap;
  background: color-mix(in srgb, color-mix(in srgb, var(--gold-11) 17%, var(--mix-light)) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  border-radius: var(--r-round); padding: 6px 16px;
  pointer-events: none;
}

.cv-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  pointer-events: none;
}
.cv-empty-title {
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-size: 54px; color: color-mix(in srgb, var(--ink-umber) 28%, transparent); letter-spacing: var(--track-04);
}
.cv-page--dark .cv-empty-title { color: color-mix(in srgb, color-mix(in srgb, var(--foil) 37%, var(--mix-light)) 30%, transparent); }
.cv-empty-hint { font-size: var(--fs-14); color: color-mix(in srgb, var(--ink-taupe) 87%, var(--mix-light)); }
.cv-page--dark .cv-empty-hint { color: color-mix(in srgb, var(--ink-hi-3) 66%, var(--mix-dark)); }

/* ── the Tab picker ────────────────────────────────────────────────────── */
.cv-picker-backdrop {
  position: fixed; inset: 0; z-index: var(--z-canvas-overlay);
  background: color-mix(in srgb, color-mix(in srgb, var(--umber-2) 52%, var(--mix-dark)) 42%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.cv-picker {
  width: min(1520px, 96vw); height: min(940px, 92vh);   /* v742 — bigger overall */
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--gold-11) 17%, var(--mix-light)); border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 60px color-mix(in srgb, var(--shade-40) 35%, transparent);
}
.cv-picker-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  flex-shrink: 0;
}
.cv-picker-tabs { display: flex; gap: 4px; }
.cv-picker-tab {
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink-taupe-3);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-round);
  padding: 6px 14px; cursor: pointer;
}
.cv-picker-tab.is-active { color: var(--ink, var(--ink-umber)); background: color-mix(in srgb, var(--olive) 16%, transparent); border-color: color-mix(in srgb, var(--olive) 55%, transparent); }
.cv-picker-search {
  flex: 0 1 220px; font: inherit; font-size: var(--fs-13); color: var(--ink, var(--ink-umber));
  background: color-mix(in srgb, var(--mix-light) 65%, transparent); border: 1px solid color-mix(in srgb, var(--taupe-2) 50%, transparent);
  border-radius: var(--r-round); padding: 6px 13px;
}
.cv-picker-search:focus { outline: none; border-color: color-mix(in srgb, var(--olive) 65%, transparent); }
/* v742 — thumbnail size slider */
.cv-picker-zoom { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--ink-taupe-3); }
.cv-picker-zoom input[type="range"] { width: 110px; accent-color: var(--olive); }
.cv-picker-hint { font-size: var(--fs-11-5); color: color-mix(in srgb, var(--ink-taupe) 87%, var(--mix-light)); margin-left: auto; white-space: nowrap; }
.cv-picker-commit { flex-shrink: 0; }
.cv-picker-x {
  font: inherit; font-size: var(--fs-20); line-height: 1; color: var(--ink-taupe-3);
  background: none; border: none; cursor: pointer; padding: 2px 8px;
}
.cv-picker-x:hover { color: var(--ink, var(--ink-umber)); }

.cv-picker-body { flex: 1 1 0; min-height: 0; display: flex; }
.cv-picker-list {
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
}
.cv-picker-cats { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 10px 6px; }
.cv-picker-cat {
  font: inherit; font-size: var(--fs-11-5); color: var(--ink-taupe-3);
  background: color-mix(in srgb, var(--mix-light) 50%, transparent); border: 1px solid color-mix(in srgb, var(--taupe-2) 40%, transparent);
  border-radius: var(--r-round); padding: 3px 10px; cursor: pointer;
}
.cv-picker-cat.is-active { color: var(--ink, var(--ink-umber)); background: color-mix(in srgb, var(--olive) 16%, transparent); border-color: color-mix(in srgb, var(--olive) 55%, transparent); }
.cv-picker-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 6px; }
.cv-picker-row {
  width: 100%; display: flex; align-items: center; gap: 9px;
  font: inherit; font-size: var(--fs-12-5); text-align: left; color: var(--ink, var(--ink-umber));
  background: none; border: none; border-radius: var(--r-sm); padding: 5px 8px; cursor: pointer;
}
.cv-picker-row:hover { background: color-mix(in srgb, var(--mix-light) 55%, transparent); }
.cv-picker-row.is-active { background: color-mix(in srgb, var(--olive) 16%, transparent); }
.cv-picker-row-id { font-weight: var(--fw-bold); font-size: var(--fs-12); flex-shrink: 0; }
.cv-picker-row-title { color: var(--ink-taupe-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v745 — Hugo: drawer thumbs 3× bigger, titles gone (name lives in the tooltip
   + hover preview). Asset rows are just the portrait; shot rows keep the id. */
.cv-picker-row-thumb {
  width: 90px; height: 114px; object-fit: cover; border-radius: var(--r-xs); flex-shrink: 0;
  background: color-mix(in srgb, var(--taupe) 15%, transparent);
}
.cv-picker-row-thumb--wide { width: 138px; height: 60px; }
.cv-picker-row-thumb--empty { display: inline-block; }

.cv-picker-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.cv-picker-drillhead {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 8px; flex-shrink: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}
.cv-picker-drilltitle {
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-size: var(--fs-22); letter-spacing: var(--track-03); color: var(--ink, var(--ink-umber));
}
.cv-picker-buckets { display: flex; gap: 4px; margin-left: auto; }
.cv-picker-bucket {
  font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink-taupe-3);
  background: color-mix(in srgb, var(--mix-light) 50%, transparent); border: 1px solid color-mix(in srgb, var(--taupe-2) 40%, transparent);
  border-radius: var(--r-round); padding: 4px 12px; cursor: pointer;
}
.cv-picker-bucket em { font-style: normal; font-weight: 400; opacity: 0.7; margin-left: 2px; }
.cv-picker-bucket.is-active { color: var(--ink, var(--ink-umber)); background: color-mix(in srgb, var(--olive) 16%, transparent); border-color: color-mix(in srgb, var(--olive) 55%, transparent); }

/* one card per row slot, sized by the slider; the area scrolls.
   🔒 v742 — the SCROLLER and the GRID must be separate elements: a grid that
   is ITSELF the flex-sized scroller (flex:1 1 0 + min-height:0) makes
   children's percentage padding resolve against a zero hypothetical height —
   rows collapse to 2px and every card paints over the next (the fixture that
   proved it lives in the v742 commit message). */
.cv-picker-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.cv-picker-grid {
  display: grid; gap: 12px; padding: 14px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));   /* inline style overrides via the slider */
}
.cv-picker-cell, .cv-picker-card {
  position: relative; display: block;
  font: inherit; background: color-mix(in srgb, var(--mix-light) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--taupe-2) 35%, transparent); border-radius: var(--r-9);
  padding: 0; cursor: pointer; overflow: hidden; text-align: left;
}
.cv-picker-cell:hover, .cv-picker-card:hover { border-color: color-mix(in srgb, var(--olive) 70%, transparent); }
/* v742 — the collapse-proof thumb box (see header) */
.cv-thumbbox {
  position: relative; display: block; width: 100%; height: 0;
  background: color-mix(in srgb, var(--taupe) 12%, transparent);
}
.cv-thumbbox img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cv-picker-cell-label {
  display: block;
  font-size: var(--fs-11); color: var(--ink-taupe-3); padding: 5px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-picker-cell-label b { color: var(--ink, var(--ink-umber)); }
.cv-picker-cell.is-picked {
  border-color: color-mix(in srgb, var(--gold-8) 95%, transparent);
  outline: 2px solid color-mix(in srgb, var(--gold-8) 95%, transparent);
  outline-offset: -1px;
}
.cv-picker-cell-picked {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--white);
  background: color-mix(in srgb, var(--gold-8) 98%, transparent); border-radius: var(--r-round);
}
.cv-picker-empty {
  grid-column: 1 / -1; padding: 26px 14px; text-align: center;
  font-size: var(--fs-13); color: color-mix(in srgb, var(--ink-taupe) 87%, var(--mix-light));
}

/* ── NODE MODE (v743) ──────────────────────────────────────────────────── */
.cv-mode-toggle { display: flex; gap: 2px; background: color-mix(in srgb, var(--taupe) 12%, transparent); border-radius: var(--r-round); padding: 2px; }
.cv-mode-toggle .cv-btn { border: 1px solid transparent; background: transparent; }
.cv-mode-toggle .cv-btn.is-on { background: color-mix(in srgb, var(--olive) 20%, transparent); border-color: color-mix(in srgb, var(--olive) 70%, transparent); font-weight: var(--fw-bold); }

.cv-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cv-wire { fill: none; stroke: color-mix(in srgb, var(--olive) 80%, transparent); stroke-width: 2.5; }
.cv-wire--drag { stroke: color-mix(in srgb, var(--gold-8) 90%, transparent); stroke-dasharray: 6 5; }
.cv-page--dark .cv-wire { stroke: color-mix(in srgb, var(--pale-green) 85%, transparent); }

.cv-port {
  position: absolute; width: 20px; height: 20px; border-radius: var(--r-round);
  background: color-mix(in srgb, var(--gold-11) 17%, var(--mix-light)); border: 3px solid color-mix(in srgb, var(--olive) 95%, transparent);
  cursor: crosshair; z-index: 5;
}
/* v744/v750 — invisible hit-area halo: ports render a few px wide when zoomed
   out, so extend the clickable box well beyond the painted circle. */
.cv-port::after { content: ""; position: absolute; inset: -12px; border-radius: var(--r-round); }

/* v746 — board switcher (multiple canvases) */
.cv-boardbar { display: flex; align-items: center; gap: 5px; position: relative; }
.cv-board-select { max-width: 150px; }
.cv-board-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--gold-11) 17%, var(--mix-light)); border: 1px solid color-mix(in srgb, var(--taupe-2) 50%, transparent);
  border-radius: var(--r-panel); padding: 8px 10px;
  box-shadow: 0 10px 28px color-mix(in srgb, color-mix(in srgb, var(--umber-3) 67%, var(--mix-dark)) 22%, transparent);
}
/* v746 — mixed aspect ratios in one row (21:9 frames next to square grids)
   must not stretch shorter cards into fake letterboxes. */
.cv-picker-grid { align-items: start; }

/* v747 — node-graph v2: operation / shot / asset nodes + role sockets */
.cv-node-head--op { background: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 81%, var(--mix-dark)) 14%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark)); }
.cv-node-head--target { background: color-mix(in srgb, var(--gold-8) 18%, transparent); color: var(--ink-tan-deep); }
.cv-node-row--role { height: 26px; overflow: hidden; }   /* LOCKED — port Y math (43 + i*26) relies on it */
.cv-item--op .cv-node-textarea { min-height: 56px; }
.cv-item--shot, .cv-item--asset { background: color-mix(in srgb, var(--gold-14) 14%, var(--mix-light)); border: 1.5px solid color-mix(in srgb, var(--taupe) 50%, transparent); border-radius: var(--r-md); }
.cv-target-thumb {
  margin-top: 6px; border-radius: var(--r-sm); overflow: hidden;
  background: color-mix(in srgb, var(--taupe) 12%, transparent); min-height: 84px;
  display: flex; align-items: center; justify-content: center;
}
.cv-target-thumb img { width: 100%; height: 96px; object-fit: cover; display: block; }
.cv-dropmenu-backdrop { position: fixed; inset: 0; z-index: var(--z-menu-backdrop); }
.cv-dropmenu {
  position: fixed; z-index: var(--z-menu); display: flex; flex-direction: column; gap: 4px;
  background: color-mix(in srgb, var(--gold-11) 17%, var(--mix-light)); border: 1px solid color-mix(in srgb, var(--taupe-2) 55%, transparent);
  border-radius: var(--r-panel); padding: 8px; min-width: 210px;
  box-shadow: 0 12px 32px color-mix(in srgb, color-mix(in srgb, var(--umber-3) 67%, var(--mix-dark)) 28%, transparent);
}
.cv-dropmenu .cv-btn { justify-content: flex-start; text-align: left; }
.cv-dropmenu-title { font-size: var(--fs-10-5); letter-spacing: var(--track-08); color: color-mix(in srgb, var(--ink-taupe) 87%, var(--mix-light)); text-transform: uppercase; padding: 0 2px 2px; }

/* v756 — @imageN tag on a wired chip + the little socket +/− buttons */
.cv-chip-tag {
  font-size: var(--fs-9-5); font-weight: var(--fw-bold); color: var(--olive); letter-spacing: var(--track-02);
  padding: 0 3px 0 1px; flex-shrink: 0;
}
.cv-sock-btn {
  font: inherit; font-size: var(--fs-12); line-height: 1; color: color-mix(in srgb, var(--ink-taupe-3) 90%, var(--mix-light));
  background: color-mix(in srgb, var(--taupe) 12%, transparent); border: 1px solid color-mix(in srgb, var(--taupe-2) 40%, transparent);
  border-radius: 5px; width: 16px; height: 16px; padding: 0; cursor: pointer; flex-shrink: 0;
}
.cv-sock-btn:hover { background: color-mix(in srgb, var(--olive) 25%, transparent); color: var(--ink, var(--ink-umber)); }

/* v752 — build badge + the no-drag Link menu */
.cv-build { font-size: var(--fs-9-5); letter-spacing: var(--track-06); color: color-mix(in srgb, var(--ink-on-dark) 66%, var(--mix-dark)); margin-left: 6px; font-weight: var(--fw-med); }

/* v751 — click-to-connect: the armed port pulses gold until you click a
   target (wiring must never depend on a clean drag stream). */
.cv-port.is-armed {
  background: color-mix(in srgb, var(--gold-8) 98%, transparent); border-color: var(--gold-8);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold-8) 28%, transparent);
  animation: cvArmPulse 1.1s ease-in-out infinite;
}
@keyframes cvArmPulse { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-8) 22%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--gold-8) 12%, transparent); } }
.cv-hint-arm { color: var(--ink-tan-deep); font-weight: var(--fw-semi); }

/* v750 — stale gen node (an input changed since its last run) */
.cv-item--gen.is-stale { border-color: color-mix(in srgb, var(--gold-8) 95%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-8) 30%, transparent); }
.cv-node-status--stale { color: var(--ink-tan-deep); }

/* v750 — push-to-shot result toast */
.cv-pushnote {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-notice); background: var(--umber); color: color-mix(in srgb, var(--gold-11) 17%, var(--mix-light));
  border-radius: var(--r-round); padding: 9px 18px; font-size: var(--fs-13);
  box-shadow: 0 10px 28px color-mix(in srgb, color-mix(in srgb, var(--umber-3) 67%, var(--mix-dark)) 35%, transparent);
}
.cv-port:hover, .cv-port.is-target { background: color-mix(in srgb, var(--gold-8) 95%, transparent); border-color: var(--gold-8); }
.cv-port--out { right: -10px; top: 50%; margin-top: -10px; }
.cv-port--in { left: -10px; }
/* v755 — the per-port mini labels are gone: each socket already sits beside
   its own labelled row, and the little "prompt"/"refs" text printed straight
   on top of it. Tooltips carry the detail. */

.cv-item--prompt, .cv-item--gen, .cv-item--videopack, .cv-item--output {
  background: color-mix(in srgb, var(--gold-14) 14%, var(--mix-light)); border: 1.5px solid color-mix(in srgb, var(--taupe) 50%, transparent);
  border-radius: var(--r-md); box-shadow: 0 3px 14px color-mix(in srgb, var(--umber) 18%, transparent);
}
.cv-node-head {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  font-size: var(--fs-11-5); font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase;
  color: var(--ink-taupe-3); border-radius: 12px 12px 0 0;
}
.cv-node-head--gen { background: color-mix(in srgb, var(--olive) 14%, transparent); }
.cv-node-head--video { background: color-mix(in srgb, var(--gold-8) 16%, transparent); }
.cv-node-head--prompt { background: color-mix(in srgb, var(--taupe) 10%, transparent); }
.cv-node-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cv-node-row { display: flex; align-items: center; gap: 7px; font-size: var(--fs-12); color: var(--ink-taupe-3); }
.cv-node-row label { flex-shrink: 0; min-width: 62px; font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--track-05); }
.cv-node-select, .cv-node-input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-12-5); color: var(--ink, var(--ink-umber));
  background: color-mix(in srgb, var(--mix-light) 70%, transparent); border: 1px solid color-mix(in srgb, var(--taupe-2) 50%, transparent);
  border-radius: var(--r-7); padding: 5px 8px;
}
.cv-node-textarea {
  width: 100%; min-height: 70px; font: inherit; font-size: var(--fs-13); line-height: 1.45;
  color: var(--ink, var(--ink-umber)); background: color-mix(in srgb, var(--mix-light) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--taupe-2) 50%, transparent); border-radius: var(--r-sm); padding: 8px 10px;
  resize: vertical;
}
.cv-node-textarea:focus, .cv-node-select:focus, .cv-node-input:focus { outline: none; border-color: color-mix(in srgb, var(--olive) 70%, transparent); }
.cv-node-run {
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--white);
  background: var(--olive); border: none; border-radius: var(--r-round);
  padding: 7px 16px; cursor: pointer;
}
.cv-node-run:hover { background: color-mix(in srgb, var(--olive) 87%, var(--mix-dark)); }
.cv-node-run:disabled { background: color-mix(in srgb, var(--taupe) 35%, transparent); cursor: default; }
.cv-node-status { font-size: var(--fs-11-5); color: color-mix(in srgb, var(--ink-taupe) 87%, var(--mix-light)); min-height: 15px; }
.cv-node-status--running { color: var(--ink-tan-deep); }
.cv-node-status--done { color: var(--olive); }
.cv-node-status--failed { color: var(--red-10); }
.cv-node-chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* ─── v899 — one-click push-to-shot picker ─────────────────────────────────────
   Neighbour tiles (2 before the image's shot, then the next 8), thumb + id +
   title; SOURCE = the image's own shot. Clicking a tile pushes immediately. */
.cv-push-modal { width: 640px; max-width: 94vw; }
.cv-push-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-height: 46vh; overflow-y: auto; margin: 8px 0 2px; padding-right: 2px;
}
.cv-push-tile {
  display: flex; flex-direction: column; gap: 3px; padding: 6px 6px 7px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent); border-radius: var(--r-panel); cursor: pointer;
  background: color-mix(in srgb, var(--mix-light) 55%, transparent); font: inherit; color: var(--ink);
  transition: background 110ms ease, border-color 110ms ease, box-shadow 110ms ease;
}
.cv-push-tile:hover { background: color-mix(in srgb, var(--leaf) 14%, transparent); border-color: color-mix(in srgb, var(--olive-11) 75%, transparent); box-shadow: 0 0 0 var(--hairline-w) color-mix(in srgb, var(--olive-11) 45%, transparent); }
.cv-push-tile.is-source { border-color: color-mix(in srgb, var(--teal-2) 80%, transparent); box-shadow: 0 0 0 var(--hairline-w) color-mix(in srgb, var(--teal-2) 50%, transparent); }
.cv-push-tile.is-busy { opacity: 0.55; cursor: progress; }
.cv-push-tile:disabled:not(.is-busy) { opacity: 0.45; cursor: default; }
.cv-push-thumb { display: block; width: 100%; aspect-ratio: var(--project-aspect); border-radius: var(--r-xs); overflow: hidden; background: var(--shade-59); }
.cv-push-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-push-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: color-mix(in srgb, var(--ink-on-dark) 50%, transparent); font-weight: var(--fw-heavy); font-size: var(--fs-14); letter-spacing: var(--track-08); }
.cv-push-meta { display: flex; align-items: center; gap: 6px; }
.cv-push-id { font-weight: var(--fw-heavy); font-size: var(--fs-11-5); letter-spacing: var(--track-04); }
.cv-push-srcbadge { font-size: 8px; font-weight: var(--fw-heavy); letter-spacing: var(--track-08); padding: 1px 5px; border-radius: var(--r-round); background: color-mix(in srgb, var(--teal-2) 90%, transparent); color: var(--ink-mint-7); }
.cv-push-title { font-size: var(--fs-10); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 12px; }
/* the card's "promoted to" chip — absolute overlay, never in-flow (drawer-rows gotcha) */
.cv-item-pushed {
  position: absolute; left: 6px; bottom: 6px; z-index: 3; pointer-events: none;
  font-size: var(--fs-9); font-weight: var(--fw-heavy); letter-spacing: var(--track-05);
  padding: 2px 7px; border-radius: var(--r-round);
  background: color-mix(in srgb, color-mix(in srgb, var(--olive-6) 61%, var(--mix-dark)) 92%, transparent); color: var(--ink-mint-5); border: 1px solid color-mix(in srgb, var(--mint-5) 35%, transparent);
  max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cv-node-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-11); color: var(--ink-taupe-3);
  background: color-mix(in srgb, var(--mix-light) 60%, transparent); border: 1px solid color-mix(in srgb, var(--taupe-2) 40%, transparent);
  border-radius: var(--r-round); padding: 2px 8px 2px 2px;
}
.cv-node-chip img { width: 26px; height: 16px; object-fit: cover; border-radius: var(--r-round); }
.cv-node-hint { font-size: var(--fs-11); color: color-mix(in srgb, var(--ink-hi-3) 66%, var(--mix-dark)); }