/* ========================================================================
   Family Tree — Web UI
   Dark theme, matching site palette
   ======================================================================== */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --bg:          #0e1117;
  --bg-panel:    #1a1d24;
  --bg-card:     #21252e;
  --bg-hover:    #2a2e38;
  --border:      #2e3340;
  --accent:      #c9a84c;       /* warm gold for a heritage feel */
  --accent-dim:  #7a6230;
  --accent-glow: rgba(201,168,76,.18);
  --text:        #dde1ea;
  --text-muted:  #8b92a5;
  --red:         #e05252;
  --radius:      10px;
  --shadow:      0 2px 12px rgba(0,0,0,.5);
  --node-w:      160px;
  --node-h:      80px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

/* ── Top bar ───────────────────────────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  z-index: 100;
}

#topbar .logo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#topbar .sep { flex: 1; }

#csv-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: border-color .15s, color .15s;
}
#csv-label:hover { border-color: var(--accent); color: var(--text); }
#csv-input { display: none; }

.zoom-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  width: 32px; height: 32px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.zoom-btn:hover { border-color: var(--accent); background: var(--bg-hover); }

#back-link {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
#back-link:hover { color: var(--accent); }

/* ── Canvas area ───────────────────────────────────────────────────────── */
#canvas-wrap {
  position: fixed;
  top: 52px; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  cursor: grab;
}
#canvas-wrap:active { cursor: grabbing; }

#tree-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Tree links ────────────────────────────────────────────────────────── */
.tree-link {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5px;
  transition: stroke .2s, stroke-width .2s, opacity .2s;
}
.tree-link.link-active {
  stroke: var(--accent);
  stroke-width: 2.5px;
  opacity: 1;
}
.tree-link.link-dim {
  opacity: 0.15;
}

/* ── Tree nodes ────────────────────────────────────────────────────────── */
.node-group { cursor: pointer; }

.node-card {
  rx: 8;
  ry: 8;
  fill: var(--bg-card);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: stroke .15s;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.node-group:hover .node-card,
.node-group.selected .node-card,
.node-group.node-connected .node-card {
  stroke: var(--accent);
  stroke-width: 2;
}
.node-group.node-dim {
  opacity: 0.3;
}

/* Photo circle clip handled by per-node SVG clipPath in app.js */
.node-photo-bg {
  fill: var(--bg-hover);
}
.node-photo-border {
  fill: none;
  stroke: var(--accent-dim);
  stroke-width: 1.5;
}

/* Initials fallback text */
.node-initials {
  font-size: 13px;
  font-weight: 700;
  fill: var(--accent);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.node-name {
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--text);
  pointer-events: none;
}
.node-years {
  font-size: 9.5px;
  fill: var(--text-muted);
  pointer-events: none;
}

/* Generation label */
.gen-label {
  font-size: 10px;
  fill: var(--text-muted);
  text-anchor: middle;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
#modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

#modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(480px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(16px);
  transition: transform .2s;
}
#modal-overlay.open #modal { transform: translateY(0); }

#modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
}

#modal-photo-wrap {
  flex-shrink: 0;
  width: 68px; height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-hover);
  border: 2px solid var(--accent-dim);
  display: flex; align-items: center; justify-content: center;
}
#modal-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
#modal-initials {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}

#modal-title-wrap { flex: 1; min-width: 0; }
#modal-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
#modal-years-line {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

#modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  transition: color .15s, background .15s;
  align-self: flex-start;
}
#modal-close:hover { color: var(--red); background: var(--bg-hover); }

#modal-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.modal-section-value {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
}

.modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-fact {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
#empty-state {
  position: fixed;
  top: 52px; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
#empty-state .icon { font-size: 3rem; }

/* ── Tooltip ───────────────────────────────────────────────────────────── */
#tooltip {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 150;
  opacity: 0;
  transition: opacity .15s;
  white-space: nowrap;
}