/* Family Tree — Pedigree Chart Layout
   All values use design tokens from src/styles/tokens.css.
   No hardcoded colors, fonts, or spacing values. */

/* ── Outer Container ─────────────────────────────────────────── */

.family-tree {
  width: 100%;
  overflow-x: auto;
  padding: var(--space-4) 0;
  position: relative;   /* SVG overlay is positioned relative to this element */
}

/* ── Generation Row ──────────────────────────────────────────── */

.family-tree__gen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.family-tree__gen-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.family-tree__gen-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.family-tree__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ── Family group (children of the same parent couple) ──────── */
/* Wraps siblings together so flex layout keeps them clustered   */
/* and SVG connector bars cannot cross into other families.      */

.family-tree__family-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* Horizontal gap between adjacent family groups at the same gen */
.family-tree__family-group + .family-tree__family-group {
  margin-left: var(--space-6);
}

/* ── Connector spacer between generations ────────────────────── */
/* Visual lines are drawn by the SVG overlay; this div provides   */
/* vertical breathing room for them to pass through.              */

.family-tree__connector {
  height: var(--space-8);   /* 2rem — enough space for SVG trunk lines */
  flex-shrink: 0;
}

/* ── Couple group (two spouses side-by-side) ─────────────────── */

.family-tree__couple {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

/* Horizontal marriage bracket between the two spouse cards */
.family-tree__couple-bracket {
  width: var(--space-4);
  height: 2px;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

/* ── SVG Pedigree Lines Overlay ──────────────────────────────── */

.family-tree__lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

.family-tree__line {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Color-cycled connector lines — one hue per parent couple so
   overlapping connectors at the same generation are distinguishable. */
.family-tree__line[data-couple-idx="0"] { stroke: var(--color-primary-light, #2C5F8A); }
.family-tree__line[data-couple-idx="1"] { stroke: #2A8A6B; }
.family-tree__line[data-couple-idx="2"] { stroke: #8A5A2C; }
.family-tree__line[data-couple-idx="3"] { stroke: #6B2A8A; }
.family-tree__line[data-couple-idx="4"] { stroke: #8A2A4D; }
.family-tree__line[data-couple-idx="5"] { stroke: #2A6B8A; }

/* ── Person Card ─────────────────────────────────────────────── */

.family-tree__card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 9rem;
  max-width: 13rem;
  text-align: center;
}

/* Root card — visually distinct */
.family-tree__gen--root .family-tree__card[data-root="true"] {
  border-color: var(--color-accent);
  border-width: 2px;
  background-color: var(--color-surface);
}

.family-tree__card--unknown {
  border-style: dashed;
  opacity: 0.6;
}

/* ── Show More / Show Fewer Button (collapsible siblings) ──── */

.family-tree__more-btn {
  min-width: 9rem;
  max-width: 13rem;
  padding: var(--space-3) var(--space-4);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.family-tree__more-btn:hover {
  border-color: var(--color-accent);
}

.family-tree__more-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.family-tree__name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-1);
  line-height: 1.3;
}

.family-tree__dates {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .family-tree__card {
    min-width: 6.5rem;
    max-width: 9rem;
    padding: var(--space-2) var(--space-3);
  }

  .family-tree__more-btn {
    min-width: 6.5rem;
    max-width: 9rem;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .family-tree__name {
    font-size: var(--text-xs);
  }
}

/* ── Generation Toggle Button ─────────────────────────────────────── */

.family-tree__toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1;
}
.family-tree__toggle:hover { color: var(--color-text); }

/* ── Collapsed Generation ────────────────────────────────────────── */

.family-tree__gen--collapsed .family-tree__cards,
.family-tree__gen--collapsed .family-tree__connector {
  display: none;
}
.family-tree__gen--collapsed .family-tree__toggle::after {
  content: ' (collapsed)';
  font-size: var(--text-xs);
}

/* ── Clickable Card ─────────────────────────────────────────────── */

.family-tree__card--clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.family-tree__card--clickable:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.family-tree__card--clickable:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Expanded Card ───────────────────────────────────────────────── */

.family-tree__card--expanded {
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Card details section */
.family-tree__card-details {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.family-tree__detail {
  margin: var(--space-1) 0;
  font-size: var(--text-xs);
}

.family-tree__detail-label {
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.family-tree__wikitree-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: none;
}
.family-tree__wikitree-link:hover {
  text-decoration: underline;
}

/* Collapse button inside expanded card */
.family-tree__card-collapse {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 1;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.family-tree__card-collapse:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* Loading state */
.family-tree__card--loading .family-tree__loading-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Expanded card positioning */
.family-tree__card {
  position: relative;
}

/* ── Navigation Bar ─────────────────────────────────────────── */

.family-tree__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-ui);
}

.family-tree__nav-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.family-tree__nav-btn:hover:not(:disabled) {
  background-color: var(--color-surface);
  color: var(--color-accent);
}

.family-tree__nav-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.family-tree__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.family-tree__nav-btn--home {
  font-size: var(--text-base);
}

.family-tree__nav-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

.family-tree__nav-label strong {
  color: var(--color-text);
}

/* ── Recenter Link in Expanded Card ─────────────────────────── */

.family-tree__recenter-link {
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-accent);
  padding: var(--space-1) 0;
  margin-top: var(--space-1);
  text-decoration: none;
}

.family-tree__recenter-link:hover {
  text-decoration: underline;
}

.family-tree__recenter-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Tree Wrapper ───────────────────────────────────────────── */

.family-tree__wrapper {
  width: 100%;
}

/* ── Loading State ──────────────────────────────────────────── */

.family-tree__loading {
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-6) 0;
}

/* ── Connector Line Fix: Hide all when any gen collapsed ────── */

.family-tree:has(.family-tree__gen--collapsed) .family-tree__connector,
.family-tree:has(.family-tree__gen--collapsed) .family-tree__lines {
  display: none;
}

/* ── Responsive — Nav Bar ───────────────────────────────────── */

@media (max-width: 600px) {
  .family-tree__nav {
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
  }

  .family-tree__nav-label {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: var(--space-1);
  }
}

/* ── Error State ───────────────────────────────────────────── */

.family-tree__error {
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-danger, #b91c1c);
  padding: var(--space-6) var(--space-4);
}

.family-tree__error p {
  margin: 0 0 var(--space-3);
}

/* ── Warning Banner ────────────────────────────────────────── */

.family-tree__banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  background-color: var(--color-warning-bg, #fef3c7);
  border: 1px solid var(--color-warning-border, #f59e0b);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-warning-text, #92400e);
}

.family-tree__banner-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--color-warning-text, #92400e);
  padding: 0 var(--space-1);
  line-height: 1;
}

.family-tree__banner-dismiss:hover {
  opacity: 0.7;
}

.family-tree__banner-dismiss:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Retry Button (shared by banner and inline error) ──────── */

.family-tree__retry-btn {
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: inherit;
  white-space: nowrap;
}

.family-tree__retry-btn:hover {
  opacity: 0.7;
}

.family-tree__retry-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Responsive — Banner ───────────────────────────────────── */

@media (max-width: 600px) {
  .family-tree__banner {
    flex-wrap: wrap;
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
  }
}