/* Canvas */
.graph-canvas {
  position: relative; overflow: hidden; touch-action: none; cursor: grab; outline: none;
  background-color: var(--ground);
  background-image: radial-gradient(var(--line) 1px, transparent 1.2px);
}
.graph-canvas.is-panning { cursor: grabbing; }
.graph-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.graph-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.graph-cables { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.cable { pointer-events: stroke; cursor: pointer; }
.cable path { fill: none; }
.cable-hit { stroke: transparent; stroke-width: 14; }
.cable-line { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.cable:hover .cable-line { stroke-width: 2.2; }
.cable.is-selected .cable-line { stroke: var(--accent); stroke-width: 2.2; }
.cable-pending { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 5; }

/* Blocks */
.graph-node { position: absolute; left: 0; top: 0; display: grid; }
.block {
  display: grid; grid-template-rows: auto 1fr auto; min-width: 0; overflow: hidden; cursor: default;
  background: var(--node); border: 1px solid var(--node-line); border-radius: 4px; color: var(--ink);
}
.block.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.block:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.block-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name index" "kind kind";
  column-gap: 8px; row-gap: 2px; padding: 7px 10px 0; cursor: grab; touch-action: none;
}
.graph-node.is-dragging .block-head { cursor: grabbing; }
.block-name { grid-area: name; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-kind { grid-area: kind; }
.block-value { align-self: center; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-foot { padding: 3px 10px; background: var(--well); border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 16px hit target around the 8px dot that sits on the block edge. */
.port { position: absolute; width: 16px; height: 16px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: crosshair; }
.port::before { content: ""; width: 8px; height: 8px; border-radius: 999px; box-sizing: border-box; background: var(--ink); }
.port:hover::before, .port.is-pending::before { background: var(--accent); }
.port:focus-visible { outline-offset: 0; border-radius: 999px; }

/* Floating chrome over the canvas */
.graph-chip, .graph-tools { grid-area: 1 / 2; justify-self: center; display: flex; align-items: center; gap: 2px; padding: 4px; }
.graph-chip { align-self: start; margin-top: 12px; padding-left: 12px; gap: 8px; max-width: calc(100% - 24px); }
.graph-chip-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.graph-chip .t-label { white-space: nowrap; }
.graph-tools { align-self: end; margin-bottom: 12px; }
.graph-zoom { min-width: 52px; padding: 0 6px; justify-content: center; }

/* Layers */
.layers-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; }
.layers-search { display: flex; align-items: center; gap: 8px; width: auto; margin: 8px 8px 4px; color: var(--muted); }
.layers-search input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; outline: none; color: var(--ink); }
.layers-tree { overflow-y: auto; padding: 4px 8px 12px; }
.layers-empty { padding: 8px; }

.layer-section + .layer-section { margin-top: 8px; border-top: 1px solid var(--line); margin-inline: -8px; padding-inline: 8px; }
.layer-head { display: flex; justify-content: space-between; height: 24px; align-items: center; padding: 4px 8px 0; margin: 0; }
.layer-group + .layer-group { border-top: 1px solid var(--line); margin-top: 3px; }

.layer { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; padding-right: 6px; }
.layer:hover { background: var(--well); }
.layer svg { flex: none; color: var(--muted); }
.layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer .caret { width: 10px; flex: none; }
.layer.is-child { width: calc(100% - 13px); margin-left: 13px; padding-left: 6px; border-left: 1px solid var(--line); border-radius: 0 2px 2px 0; }
.tag { padding: 0 4px; border: 1px solid var(--line); border-radius: 2px; }

.palette { border-top: 1px solid var(--line); padding-bottom: 8px; }
.palette .layer-head { padding-inline: 16px; }
.palette-list { max-height: 168px; overflow-y: auto; padding: 0 8px; }
.layer:disabled { cursor: default; opacity: .5; }
.layer:disabled:hover { background: transparent; }
.graph-node.is-unsupported .block { border-style: dashed; border-color: var(--error); }

/* Block inspector */
.inspector-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.detail { display: contents; }
.detail dd { margin: 0; overflow-wrap: anywhere; }
.block-inspector .btn { justify-self: start; }

@media (max-width: 900px) {
  .graph-chip, .graph-tools { grid-area: 1 / 1; }
  .graph-chip .t-label { display: none; }
}