/* ============================================================================
   KING FAMILY LEGACY — Styles  |  load after redesign.css
   ============================================================================ */

/* ── Page shell ──────────────────────────────────────────────────────────────── */
.lg-page { display:flex; flex-direction:column; height:calc(100vh - 0px); overflow:hidden; }
.lg-toolbar {
  display:flex; align-items:center; gap:12px; padding:14px 20px 12px;
  border-bottom:1px solid var(--line); background:var(--surface); flex-shrink:0; flex-wrap:wrap;
}
.lg-title { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.015em; margin-right:4px; white-space:nowrap; }
.lg-subtitle { font-size:12px; color:var(--ink-faint); font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
@media (max-width:1180px) { .lg-subtitle { display:none; } }
.lg-spacer { flex:1; }

/* ── Segmented controls ──────────────────────────────────────────────────────── */
.lg-seg { display:inline-flex; gap:3px; padding:4px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-pill); }
.lg-seg button { padding:6px 14px; border-radius:var(--radius-pill); font-weight:600; font-size:12px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; transition:all .14s; border:none; background:none; font-family:var(--font-ui); }
.lg-seg button.active { background:var(--accent); color:#fff; }

/* ── Search ──────────────────────────────────────────────────────────────────── */
.lg-search-wrap { position:relative; }
.lg-search { padding:7px 12px 7px 34px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--bg-2); color:var(--ink); font-size:13px; font-family:var(--font-ui); width:200px; outline:none; transition:border-color .14s,box-shadow .14s; }
.lg-search:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.lg-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--ink-faint); pointer-events:none; }

/* ── Search dropdown ─────────────────────────────────────────────────────────── */
.lg-search-drop {
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
  min-width:280px; max-height:340px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:500;
}
.lg-sd-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--line);
  transition:background .12s;
}
.lg-sd-item:last-child { border-bottom:none; }
.lg-sd-item:hover { background:var(--bg-2); }
.lg-sd-av {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; opacity:.9;
}
.lg-sd-info { flex:1; min-width:0; }
.lg-sd-name  { font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-sd-dates { font-size:11px; color:var(--ink-faint); margin-top:1px; }
.lg-sd-branch{ font-size:10.5px; color:var(--ink-faint); opacity:.7; }

/* ── Stats chips ─────────────────────────────────────────────────────────────── */
.lg-stat-chip { padding:5px 11px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface-2); font-size:11px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.lg-stat-chip b { color:var(--ink); }

/* ── Body: tree + detail ─────────────────────────────────────────────────────── */
.lg-body { display:flex; flex:1; overflow:hidden; min-height:0; }

/* ── Tree canvas ─────────────────────────────────────────────────────────────── */
.lg-tree-wrap { flex:1; overflow:hidden; position:relative; background:var(--bg); }
.lg-tree-wrap svg { width:100%; height:100%; cursor:grab; display:block; }
.lg-tree-wrap svg:active { cursor:grabbing; }
.lg-no-tree { display:flex; align-items:center; justify-content:center; height:100%; color:var(--ink-faint); font-size:14px; font-weight:500; }

/* ── D3 nodes ────────────────────────────────────────────────────────────────── */
.lg-node { cursor:pointer; }
.nd-bg { transition:filter .15s; }
.lg-node:hover .nd-bg { filter:drop-shadow(0 4px 14px rgba(0,0,0,.13)); }
.lg-node.nd-selected .nd-bg { filter:drop-shadow(0 0 0 2px var(--accent)); }
.lg-node.nd-dim { opacity:.3; pointer-events:none; }
.lg-node.nd-highlight .nd-bg { filter:drop-shadow(0 0 0 3px oklch(0.50 0.10 70)); }
.lg-link { fill:none; stroke-width:1.5; }
.nd-expand { cursor:pointer; }

/* ── Detail panel ────────────────────────────────────────────────────────────── */
.lg-detail { width:290px; flex-shrink:0; border-left:1px solid var(--line); background:var(--surface); overflow-y:auto; display:flex; flex-direction:column; }
.lg-detail-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--ink-faint); gap:8px; padding:24px; text-align:center; }
.lg-detail-empty p { font-size:13px; font-weight:500; line-height:1.5; }

.dp-header { padding:18px 18px 14px; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:flex-start; }
.dp-av { width:54px; height:54px; border-radius:50%; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:19px; font-weight:700; color:#fff; letter-spacing:-.02em; }
.dp-av img { width:100%; height:100%; object-fit:cover; }
.dp-name { font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); line-height:1.25; }
.dp-dates { font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-top:3px; }
.dp-branch-tag { display:inline-block; margin-top:5px; padding:2px 8px; border-radius:var(--radius-pill); font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; }

.dp-section { padding:12px 18px; border-bottom:1px solid var(--line); }
.dp-section-lbl { font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.dp-kv { display:flex; gap:8px; margin-bottom:4px; align-items:baseline; }
.dp-k { font-size:11px; color:var(--ink-faint); font-weight:600; min-width:56px; }
.dp-v { font-size:12px; color:var(--ink); font-weight:500; }

.dp-person-btn { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius-sm); background:var(--bg-2); margin-bottom:4px; cursor:pointer; border:none; width:100%; text-align:left; transition:background .12s; }
.dp-person-btn:hover { background:var(--accent-soft); }
.dp-mini-av { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; color:#fff; overflow:hidden; }
.dp-mini-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.dp-mini-name { font-size:12px; font-weight:600; color:var(--ink); flex:1; text-align:left; }
.dp-mini-yr { font-size:10px; color:var(--ink-faint); font-family:var(--font-mono); }

.dp-photos { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.dp-thumb { width:78px; height:70px; border-radius:var(--radius-sm); object-fit:cover; border:1px solid var(--line); cursor:pointer; transition:transform .12s; }
.dp-thumb:hover { transform:scale(1.04); }

/* ── Sub-pages ───────────────────────────────────────────────────────────────── */
.lg-subpage { padding:20px; overflow-y:auto; flex:1; }

/* Overview */
.lg-ov-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.lg-ov-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.lg-ov-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c,var(--accent)); }
.lg-ov-num { font-family:var(--font-mono); font-size:30px; font-weight:700; letter-spacing:-.03em; color:var(--c,var(--ink)); line-height:1; }
.lg-ov-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-top:5px; }
.lg-section-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); margin-bottom:16px; }
.lg-section-card h3 { font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); margin-bottom:14px; }

/* Branch bars */
.br-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.br-lbl { font-size:12px; font-weight:700; color:var(--ink); min-width:80px; }
.br-bar-wrap { flex:1; background:var(--bg-2); border-radius:var(--radius-pill); height:10px; overflow:hidden; }
.br-bar { height:100%; border-radius:var(--radius-pill); }
.br-num { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--ink-faint); min-width:24px; text-align:right; }

/* DNA */
.dna-donut-wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.dna-legend { display:flex; flex-direction:column; gap:6px; }
.dna-legend-row { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink); }
.dna-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dna-legend-pct { font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-left:auto; }
.eth-row { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.eth-lbl { font-size:12px; font-weight:600; color:var(--ink); min-width:190px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eth-bar-wrap { flex:1; background:var(--bg-2); border-radius:var(--radius-pill); height:7px; overflow:hidden; }
.eth-bar { height:100%; border-radius:var(--radius-pill); transition:width .6s ease; }
.eth-pct { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--ink-soft); min-width:30px; text-align:right; }

/* DNA Origins — regions rail + world map (Ancestry-style layout) */
.dna-layout { display:grid; grid-template-columns:308px 1fr; gap:16px; align-items:stretch; }
.dna-rail { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; overflow:hidden; height:560px; }
.dna-rail-head { display:flex; align-items:center; gap:14px; padding:18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.dna-rail-head .drh-title { font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--ink); line-height:1.18; }
.dna-rail-list { overflow-y:auto; padding:4px 8px 12px; }
.dna-rail-list::-webkit-scrollbar { width:8px; }
.dna-rail-list::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:8px; }
.dna-grp { padding:12px 6px 4px; }
.dna-grp + .dna-grp { border-top:1px solid var(--line); }
.dna-grp-label { font-size:11px; font-weight:600; color:var(--ink-faint); letter-spacing:.02em; margin-bottom:4px; padding:0 6px; }
.dna-reg { display:flex; align-items:center; gap:11px; padding:8px 8px; border-radius:8px; }
.dna-reg:hover { background:var(--bg-2); }
.dna-reg .dr-sw { width:13px; height:13px; border-radius:3px; flex-shrink:0; }
.dna-reg .dr-name { font-size:13.5px; font-weight:600; color:var(--accent-ink); flex:1; min-width:0; }
.dna-reg .dr-pct { font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--ink); }
.dna-reg .dr-chev { color:var(--ink-faint); display:flex; }
.dna-rail-foot { font-size:10.5px; color:var(--ink-faint); padding:11px 18px; border-top:1px solid var(--line); flex-shrink:0; }
.dna-map { position:relative; background:#d9e6f0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; height:560px; box-shadow:var(--shadow-sm); }
html[data-theme="dark"] .dna-map { background:#13202c; }
.dna-map svg { display:block; }
.dna-map-tip { position:absolute; pointer-events:none; background:var(--ink); color:var(--surface); font-size:11px; font-weight:700; padding:4px 9px; border-radius:6px; opacity:0; transform:translate(-50%,-150%); white-space:nowrap; transition:opacity .12s; z-index:5; box-shadow:var(--shadow-md); }
.dna-zoom { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:9px; overflow:hidden; box-shadow:var(--shadow-md); z-index:6; }
.dna-zoom button { width:32px; height:32px; border:none; background:var(--surface); color:var(--ink); font-size:17px; font-weight:700; cursor:pointer; display:grid; place-items:center; transition:background .12s; }
.dna-zoom button:hover { background:var(--bg-2); }
.dna-zoom button + button { border-top:1px solid var(--line); }
@media (max-width:860px) { .dna-layout { grid-template-columns:1fr; } .dna-rail { height:auto; max-height:420px; } .dna-map { height:380px; } }

/* Gallery */
.lg-gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; margin-top:4px; }
.lg-gal-item { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .14s,box-shadow .14s; box-shadow:var(--shadow-sm); }
.lg-gal-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.lg-gal-img { width:100%; height:130px; object-fit:cover; display:block; background:var(--bg-2); }
.lg-gal-img-placeholder { width:100%; height:130px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:28px; font-weight:700; color:#fff; }
.lg-gal-name { padding:7px 9px 3px; font-size:11px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-gal-branch { padding:0 9px 7px; font-size:10px; color:var(--ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

/* Lightbox */
.lg-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:9999; display:flex; align-items:center; justify-content:center; padding:40px; }
.lg-lightbox img { max-width:90vw; max-height:85vh; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.lg-lb-close { position:absolute; top:18px; right:22px; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:20px; cursor:pointer; border-radius:50%; width:38px; height:38px; display:grid; place-items:center; transition:background .14s; }
.lg-lb-close:hover { background:rgba(255,255,255,.3); }
.lg-lb-cap { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.7); color:#fff; padding:5px 16px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; white-space:nowrap; max-width:80vw; overflow:hidden; text-overflow:ellipsis; }

/* Zoom controls */
.lg-zoom { position:absolute; bottom:16px; right:16px; display:flex; flex-direction:column; gap:4px; z-index:10; }
.lg-zoom button { width:33px; height:33px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); display:grid; place-items:center; cursor:pointer; color:var(--ink-soft); box-shadow:var(--shadow-sm); font-size:15px; font-weight:700; transition:background .12s; }
.lg-zoom button:hover { background:var(--bg-2); }

/* Legend */
.lg-legend { position:absolute; bottom:16px; left:16px; display:flex; gap:10px; flex-wrap:wrap; z-index:10; }
.lg-legend-item { display:flex; align-items:center; gap:4px; font-size:10px; font-weight:700; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); padding:3px 8px; border-radius:var(--radius-pill); }
.lg-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }