/* Patchboard tab — nodes, cables, scenarios. Shares the shell's tokens.
   Lint-clean: spacing on the 4/8/12/16/24/32/48/64 scale, no pure-black
   shadows, reduced motion honored (see site.css). */

#tab-patchboard .transport { display: flex; gap: 8px; flex-wrap: wrap; }

#tab-patchboard .transport button {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

#tab-patchboard .transport button:hover { border-color: var(--signal); }
#tab-patchboard .transport button.active { background: var(--signal-soft); border-color: var(--signal); }

.stage { display: flex; gap: 16px; align-items: flex-start; }

.canvas-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 1240 / 720;
  overflow: hidden;
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  background: oklch(17% 0.013 265 / 0.6);
  touch-action: none;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1240px;
  height: 720px;
  transform-origin: 0 0;
}

/* overflow: visible — nodes can be dragged past the nominal board, and the
   cables must follow instead of clipping at the SVG's invisible edge. */
#cables { position: absolute; inset: 0; overflow: visible; }

.cable { fill: none; stroke: oklch(40% 0.02 265); stroke-width: 2; }
.cable.lit { stroke: var(--signal); }
.cable.lit-danger { stroke: var(--danger); }
.cable-label { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); }
.pulse { fill: var(--signal); }
.pulse.danger { fill: var(--danger); }

.node {
  position: absolute;
  width: 180px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  box-shadow: var(--shadow);
  cursor: grab;
  user-select: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.node:hover { border-color: oklch(48% 0.02 265); }
.node.selected { border-color: var(--signal); }
.node.flash { border-color: var(--signal); background: var(--signal-soft); }
.node.flash-danger { border-color: var(--danger); background: oklch(68% 0.19 25 / 0.18); }
.node.dragging { cursor: grabbing; }

.node-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-edge);
}

.port {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  flex: none;
  background: oklch(60% 0.16 var(--hue, 265));
}

.node-title { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }

.node-body {
  padding: 8px 12px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  font-family: var(--font-mono);
}

.node[data-kind="input"]  { --hue: 220; }
.node[data-kind="plan"]   { --hue: 295; }
.node[data-kind="build"]  { --hue: 245; }
.node[data-kind="gate"]   { --hue: 155; }
.node[data-kind="memory"] { --hue: 265; }

.node[data-kind="human"] {
  --hue: 80;
  border-color: var(--human);
  background: linear-gradient(oklch(82% 0.13 80 / 0.14), oklch(82% 0.13 80 / 0.14)), var(--panel);
}

.chips { display: flex; gap: 4px; padding: 0 12px 12px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--panel-edge);
  color: var(--muted);
  transition: background-color 150ms ease, color 150ms ease;
}
.chip.bump { background: var(--signal-soft); color: var(--ink); border-color: var(--signal); }

.inspector {
  width: 264px;
  flex: none;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  padding: 16px;
}

.inspector-kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.inspector h3 { margin: 0 0 8px; font-size: 16px; }
.inspector p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.inspector .mono { font-family: var(--font-mono); font-size: 12px; color: var(--signal); }
.inspector .why { color: var(--ink); }
.inspector .why::before { content: "Why it matters — "; color: var(--human); font-weight: 600; }
.inspector .why:empty { display: none; }
.inspector .mono:empty { display: none; }

.caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  font-size: 14px;
  min-height: 48px;
}

.caption-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  flex: none;
  background: var(--signal);
  transition: background-color 150ms ease;
}
.caption-dot.danger { background: var(--danger); }

@media (max-width: 900px) {
  .stage { flex-direction: column; align-items: stretch; }
  .canvas-wrap { width: 100%; flex: none; }
  .inspector { width: 100%; }
}