/* ── Viewport & Canvas ── */
#tree-viewport {
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#tree-viewport:active { cursor: grabbing; }
#tree-canvas {
  position: absolute;
  transform-origin: 0 0;
  will-change: transform;
}

/* ── Person Cards ── */
.person-card {
  position: absolute;
  width: 186px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.person-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transform: translateY(-1px);
  z-index: 10;
}
.person-card.male   { border-left: 3px solid #60a5fa; }
.person-card.female { border-left: 3px solid #f472b6; }
.person-card.unknown{ border-left: 3px solid #94a3b8; }
.person-card.focal  {
  border-left: 3px solid #6366f1;
  box-shadow: 0 0 0 2px #c7d2fe, 0 2px 8px rgba(99,102,241,.15);
}

.card-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #f1f5f9;
}
.card-name {
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-dates {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
}
.card-place {
  font-size: 10px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── SVG Lines Layer ── */
#lines-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}
.connector {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 1.5;
}
.marriage-line {
  stroke: #c7d2fe;
  stroke-width: 2;
  stroke-dasharray: 6 3;
}

/* ── View Switcher ── */
.view-btn { transition: all .15s; }
.view-btn.active { background: #4f46e5; color: #fff; box-shadow: 0 1px 3px rgba(79,70,229,.3); }
.view-btn:not(.active):hover { background: #e0e7ff; color: #4f46e5; }

/* ── Side Panel ── */
.side-panel { transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.side-panel.open { transform: translateX(0); }

/* ── Breadcrumb ── */
.breadcrumb-item { transition: color .15s; }
.breadcrumb-item:hover { color: #4f46e5; }