.graph-snippet {
  width: 100%;
  height: 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.graph-svg {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.graph-legend {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-3);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.graph-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.graph-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 0;
  border-top: 2px solid;
}

.graph-legend-swatch--kinship { border-top-color: var(--color-accent); border-top-style: solid; }
.graph-legend-swatch--hostile { border-top-color: #c0392b; border-top-style: dashed; }
.graph-legend-swatch--companion { border-top-color: #2e7d32; border-top-style: solid; }

.graph-node {
  touch-action: none;
}

.graph-node circle {
  stroke: #fff;
  stroke-width: 1.5;
  cursor: grab;
}

.graph-node.is-dragging circle {
  cursor: grabbing;
}

.graph-node--side-achaean circle { fill: var(--color-achaean); }
.graph-node--side-trojan circle  { fill: var(--color-trojan); }
.graph-node--side-ally circle    { fill: var(--color-ally); }
.graph-node--side-neutral circle { fill: var(--color-neutral); }

.graph-node text {
  font-size: 9px;
  font-family: var(--font-sans);
  fill: var(--color-text);
  pointer-events: none;
}

.graph-edge {
  stroke: var(--color-text-muted);
  stroke-width: 1.2;
  fill: none;
  pointer-events: none;
}

.graph-edge-hit {
  stroke: transparent;
  stroke-width: 14;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}

.graph-edge-group:hover .graph-edge,
.graph-edge-group:focus-within .graph-edge,
.graph-edge-group.is-selected .graph-edge {
  stroke-width: 3.5;
}

.graph-edge-group.is-selected .graph-edge {
  filter: drop-shadow(0 0 2px rgba(42, 38, 32, 0.35));
}

.relationship-focus { margin: 1rem 0; padding: .8rem; border: 2px solid var(--color-accent); border-radius: var(--radius); background: #faf8f3; }
.relationship-focus-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.relationship-focus-header h3 { margin: 0; }
.relationship-focus-header button { border: 0; background: transparent; color: var(--color-text-muted); font-size: 1.25rem; line-height: 1; }
.relationship-statement { font: 600 1rem var(--font-serif); }
.relationship-focus [data-person] { border: 0; padding: 0; background: transparent; color: var(--color-accent); text-decoration: underline; }
.relationship-citations { margin: .4rem 0 0; padding-left: 1.2rem; }
.relationship-citations p { margin: .25rem 0; color: var(--color-text-muted); }
.relationship-focus--compact { margin-bottom: .5rem; border-width: 1px; font-size: .82rem; }

.graph-edge--kinship { stroke: var(--color-accent); }
.graph-edge--hostile { stroke: #c0392b; stroke-dasharray: 3 2; }
.graph-edge--companion { stroke: #2e7d32; }

.graph-dimmed { opacity: 0.2; }

.graph-node.is-focused circle {
  stroke: var(--color-accent);
  stroke-width: 3;
}

.graph-view-full {
  font-size: 0.75rem;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--space-1);
}

.graph-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.graph-modal[hidden] { display: none; }

.graph-modal-inner {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-4);
  width: min(900px, 90vw);
  height: min(700px, 85vh);
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (max-width: 860px) {
  .graph-modal-inner {
    width: 96vw;
    height: 90vh;
    padding: var(--space-2);
  }
}

.graph-modal-inner h2 {
  margin-top: 0;
  font-family: var(--font-serif);
}

.graph-modal-inner .graph-svg {
  flex: 1 1 auto;
  height: auto;
}

#graph-modal-legend {
  flex: 0 0 auto;
  margin-top: var(--space-2);
}

.graph-modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
}