/* Family tree — D3.js canvas styles */
#tree-container {
  width: 100%;
  height: 600px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  color: #b18697;
}

.node circle {
  fill: var(--card);
  stroke: var(--sepia);
  stroke-width: 2px;
  cursor: pointer;
  transition: all .15s;
}

.node.male circle {
  stroke: #1e3a8a;
  color: #1e3a8a;
}

.node.female circle {
  stroke: #831843;
  color: #831843;
}

.node circle:hover {
  stroke-width: 3px;
}

/* Keyboard focus ring for the node's own link and each shared-with link
   (see family_tree.html) — anchors have no visible box of their own in
   SVG, so style the shape/text inside them when the anchor is focused. */
a.node-link, a.shared-link-item {
  outline: none;
}

a.node-link:focus-visible circle {
  stroke: #c98a3f;
  stroke-width: 3px;
}

a.shared-link-item:focus-visible text {
  fill: #2f6fb0;
}

.link {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5px;
}