/* A-10 investigation branching — the visual graph editor (SVG canvas).
   Mirrors the standalone hexmap.css precedent (a dedicated file, net-new SVG). */

.ig-editor {
  display: grid;
  grid-template-columns: 1fr 260px;
  grid-template-rows: auto 1fr;
  gap: 0.75rem;
  min-height: 520px;
}
.ig-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ig-connect-hint { color: var(--info, #60a5fa); font-size: 0.85rem; }

.ig-canvas-wrap {
  border: 1px solid var(--border-primary, #2a2a2a);
  border-radius: 8px;
  background: var(--bg-secondary, #0a0a0a);
  overflow: hidden;
  outline: none;
  min-height: 480px;
}
.ig-canvas {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: block;
  cursor: grab;
  user-select: none;
}

/* --- edges (behind nodes) --- */
.ig-edge--structural { stroke: var(--text-muted, #808080); stroke-width: 2; }
.ig-edge--unlock {
  stroke: var(--accent-red, #e63946);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

/* --- nodes --- */
.ig-node { cursor: pointer; }
.ig-node rect {
  fill: var(--bg-primary, #1a1a1a);
  stroke: var(--border-primary, #2a2a2a);
  stroke-width: 2;
}
.ig-node--mystery rect    { stroke: var(--accent-red, #e63946); }
.ig-node--revelation rect { stroke: var(--info, #60a5fa); }
.ig-node--clue rect       { stroke: var(--warning, #fbbf24); }
.ig-node--fork rect       { stroke: var(--success, #4ade80); }
.ig-node--selected rect   { stroke-width: 3.5; }
.ig-node--unreachable rect {
  stroke: var(--error, #f87171);
  stroke-dasharray: 5 3;
}
.ig-node--readonly rect { opacity: 0.6; }
.ig-node--readonly { cursor: default; }

.ig-node-label {
  fill: var(--text-primary, #e8e8e8);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}
.ig-node-type {
  fill: var(--text-muted, #808080);
  font-size: 10px;
  text-anchor: middle;
  pointer-events: none;
}

/* --- ports --- */
.ig-port { cursor: crosshair; }
.ig-port--structural {
  fill: var(--bg-hover, #242424);
  stroke: var(--text-secondary, #b0b0b0);
  stroke-width: 1.5;
}
.ig-port--structural:hover { fill: var(--accent-red, #e63946); }

/* --- sidebar --- */
.ig-sidebar {
  border: 1px solid var(--border-primary, #2a2a2a);
  border-radius: 8px;
  background: var(--bg-secondary, #0a0a0a);
  padding: 0.75rem;
  overflow-y: auto;
  max-height: 520px;
}
.ig-node-detail h4 { margin: 0 0 0.4rem; }
.ig-warnings { margin-top: 1rem; }
.ig-warnings h4 { margin: 0 0 0.4rem; }

/* --- outcomes sub-editor (fork detail edit form) --- */
.ig-outcomes-editor { margin-top: 1rem; }
.ig-outcome-row { margin-bottom: 0.75rem; }
.ig-unlock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
.ig-unlock-chip { display: inline-flex; align-items: center; gap: 0.3rem; }

@media (max-width: 720px) {
  .ig-editor { grid-template-columns: 1fr; }
}

/* ⑦ edge-delete gesture — a transparent wide companion line for a comfortable
   click target over the thin rendered edge (only rendered on :refs-backed lenses). */
.ig-edge-hit { stroke: transparent; stroke-width: 12; cursor: pointer; }
.ig-edge-detail .ig-edge-confirm { margin-top: 0.5rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

/* ⑦ lens picker tab bar (mirrors .npc-tab-bar / .npc-tab). */
.ig-lens-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-primary);
  margin-bottom: 1rem;
}
.ig-lens-tab {
  padding: 0.5rem 1.25rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.ig-lens-tab:hover { color: var(--text-primary); }
.ig-lens-tab.active {
  color: var(--accent-red);
  border-bottom-color: var(--accent-red);
  font-weight: 600;
}

/* ⑦ per-lens edge + node classes (adjacency/puzzle/foreshadow lenses). */
.ig-edge--adjacency  { stroke: var(--success); stroke-width: 2; }
.ig-edge--puzzle     { stroke: var(--warning); stroke-width: 2; stroke-dasharray: 2 3; }
.ig-edge--foreshadow { stroke: var(--info);    stroke-width: 2; stroke-dasharray: 8 4; }
.ig-node--location rect { stroke: var(--success); }
.ig-node--npc rect      { stroke: var(--info); }
.ig-node--faction rect  { stroke: var(--accent-red); }
.ig-node--lore rect     { stroke: var(--text-secondary); }