/* ─── HD Bodygraph Component ─── */

/* Color mode: chart (personality/design) */
.hd-bodygraph--chart {
  --gate-pers: #C0C0C0;
  --gate-des: #D4A843;
  --gate-both: #C0C0C0;
  --gate-inactive: rgba(255,255,255,0.06);
  --gate-pers-bg: rgba(192,192,192,0.15);
  --gate-des-bg: rgba(212,168,67,0.15);
}

/* Color mode: transit (all cyan) */
.hd-bodygraph--transit {
  --gate-active: #00d4ff;
  --gate-active-glow: rgba(0, 212, 255, 0.4);
  --gate-inactive: rgba(80, 90, 110, 0.3);
  --center-defined: rgba(0, 212, 255, 0.3);
}

/* SVG container */
.hd-bodygraph svg {
  width: 100%;
  height: auto;
}

/* ─── Gate paths (channel lines) ─── */
.hd-bodygraph svg [id^="Gate"] {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/* ─── Gate text backgrounds ─── */
.hd-bodygraph svg [id^="GateTextBg"] circle,
.hd-bodygraph svg [id^="GateTextBg"] path {
  transition: fill 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}

/* ─── Gate text labels ─── */
.hd-bodygraph svg [id^="GateText"] {
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  text-anchor: middle;
  dominant-baseline: central;
}

/* ─── Center shapes ─── */
.hd-bodygraph svg .center-shape {
  transition: all 0.3s ease;
}

/* ─── Hover effect on gate groups — no geometry changes to avoid movement ─── */