/* canvas.css — world canvas + cell-node chrome + connections. Z per CONTRACTS §1.6 / style §2.4 */
.canvas-mount { position: relative; overflow: hidden; }
.connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.connections .conn { pointer-events: stroke; cursor: pointer; transition: stroke-width 100ms, opacity 100ms; }
.connections .conn:hover { stroke-width: 3 !important; opacity: 1 !important; }
.world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; z-index: 5; }
.cell-node { position: absolute; z-index: 5; background: var(--surface); border: 1px solid var(--rule); border-radius: 1px; box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
.cell-node.selected { z-index: 10; border-color: var(--accent); }
/* B6: an applied (nested) modifier shown as a SECOND VIEW node — modifier token. */
.cell-node--mod { border-color: var(--modifier); box-shadow: 0 8px 28px rgba(0,0,0,0.35), inset 0 2px 0 0 var(--modifier); }
.cell-node--mod.selected { border-color: var(--accent); }
/* B6: inferred applies edge (derived from parent_id; not a deletable connection). */
.conn-applies-inferred { pointer-events: none; }
.cell-grip { display: flex; align-items: center; gap: var(--sp-2); padding: 5px 8px; cursor: grab; background: var(--bg-deep); border-bottom: 1px solid var(--rule); user-select: none; }
.cell-grip:active { cursor: grabbing; }
.cg-icon { display: inline-flex; width: 14px; height: 14px; color: var(--ink-dim); }
.cg-icon svg { width: 14px; height: 14px; }
.cg-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.cg-focus { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; background: transparent; color: var(--ink-dim); cursor: pointer; border-radius: 1px; transition: color 120ms ease, background 120ms ease; }
.cg-focus svg { width: 14px; height: 14px; }
.cg-focus:hover { color: var(--accent); background: rgba(212,255,61,0.08); }
/* (B5 canvas host ◈ removed in B6 — the applied-modifier node + applies edge show
   the relationship directly; the outline MODIFIERS ◈ remains.) */
/* B5: child-count badge on a collapsed container node — chartreuse pill, dark text. */
.cc-badge { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg-deep); background: var(--accent); border-radius: 8px; padding: 1px 7px; }
.cell-frame { width: 420px; height: 560px; border: none; background: #fff; display: block; }
.cell-card { width: 240px; padding: var(--sp-3); }
.cell-card .cc-name { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-mid); }
.cell-card .cc-empty { font-family: var(--serif); font-style: italic; color: var(--ink-faint); }

/* Page cell width driven by viewport mode (prototype-faithful) */
.cell-node[data-type="page"] { transition: width 250ms cubic-bezier(0.2,0.7,0.2,1); }
.cell-node[data-type="page"][data-viewport="desktop"] { width: 480px; }
.cell-node[data-type="page"][data-viewport="tablet"]  { width: 320px; }
.cell-node[data-type="page"][data-viewport="mobile"]  { width: 220px; }
.cell-node[data-type="page"] .cell-frame { width: 100%; }

/* CONN-DRAW — drag-to-connect port, rubber-band, kind popover (AESTHETIC §8: warm-black + chartreuse only) */
.cell-port { position: absolute; top: 50%; right: -7px; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--bg-deep); border: 1.5px solid var(--accent); box-shadow: 0 0 0 2px var(--bg-canvas); cursor: crosshair; opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease, box-shadow 120ms ease; z-index: 6; }
.cell-node:hover .cell-port { opacity: 1; pointer-events: auto; }
.cell-port:hover { transform: translateY(-50%) scale(1.25); box-shadow: 0 0 0 3px rgba(212,255,61,0.25); }
.connections .conn-draft { stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 5 4; opacity: 0.95; pointer-events: none; }
.conn-kind-pop { position: fixed; z-index: 1000; min-width: 172px; background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); padding: 8px; }
.conn-kind-pop .ckp-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); padding: 2px 2px 6px; }
.conn-kind-pop .ckp-row { display: flex; gap: 6px; }
.conn-kind-pop .ckp-chip { flex: 1; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 1px; background: var(--bg-deep); color: var(--ink-mid); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; }
.conn-kind-pop .ckp-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.conn-kind-pop .ckp-chip.is-default { border-color: var(--accent); color: var(--accent); }
.conn-kind-pop .ckp-chip.ckp-data:hover { border-color: var(--accent); color: var(--accent); }
.conn-kind-pop .ckp-chip.ckp-applies:hover { border-color: var(--modifier); color: var(--modifier); }