/* genealogy.css — indented connector tree (Taoxie '|_ ' style), themed to ASI.
   Semantic HTML, no animation by default, degrades to readable list w/o JS. */

:root {
  --cityu: #6b2c91; --cityu-dark: #4a1e66; --accent: #0f8f8f; --accent2: #38b2b2;
  --energy: #38d5c8; --ink: #14202e; --muted: #5b6673; --bg: #f7f9fb;
  --border: #e4e9ef; --card: #ffffff; --radius: 14px;
}
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "PingFang HK", sans-serif; line-height: 1.6;
  color: var(--ink); background: var(--bg); margin: 0; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
main { padding: 48px 0 60px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.4px; margin: 0 0 6px; }
.eyebrow { font-size: .72rem; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 800;
  color: var(--cityu); margin-bottom: 8px; }
.updated { color: var(--muted); font-size: .9rem; margin: 0 0 22px; }
.lead-para { color: var(--muted); max-width: 760px; margin-bottom: 26px; }
.legend { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.legend .badge { font-size: .72rem; vertical-align: baseline; }

.tree-nav { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
.tree-nav button { font: inherit; font-size: .85rem; padding: .35rem .75rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer; color: var(--muted); }
.tree-nav button:hover { background: #eef2f7; }
.tree-nav .focal { font-size: .85rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.tree-nav .focal:hover { text-decoration: underline; }

.tree-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(20,32,46,.08); padding: 28px 24px; }

.genealogy, .genealogy ul { list-style: none; margin: 0; padding-left: 0; }
.genealogy { border-left: 1px solid var(--border); padding-left: .5rem; font-size: .95rem; }
.genealogy > li:first-child { margin-top: 0; }
.genealogy ul { margin-left: 1.1rem; padding-left: .55rem; border-left: 1px solid #d1d5db; }
.genealogy li { position: relative; margin: .34rem 0; }
.genealogy li::before { content: ""; position: absolute; left: -1.05rem; top: .62rem;
  width: .85rem; height: 1px; background: #d1d5db; }

.name { color: var(--ink); font-weight: 600; }
.name:hover { color: var(--cityu); }
.native { color: var(--muted); margin-left: .25rem; }
.meta { color: var(--muted); font-size: .85rem; margin-left: .3rem; }
.degree { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: #9ca3af; margin-left: .4rem; }

.badge { display: inline-block; margin-left: .5rem; padding: .05rem .45rem;
  border-radius: 999px; font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; vertical-align: middle; }
.badge.confirmed { background: #dcfce7; color: #166534; }
.badge.probable { background: #fef9c3; color: #854d0e; }
.badge.unverified { background: #fee2e2; color: #991b1b; }

.genealogy li.focal > .name { background: #f1e8f8; outline: 1px dashed var(--cityu); border-radius: 3px; padding: 0 .2rem; }
li.focal .name { scroll-margin-top: 1rem; }

.provenance { margin-top: 30px; padding: 20px 24px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); font-size: .92rem; color: var(--muted); }
.provenance h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 8px; color: var(--cityu); }

@media (prefers-reduced-motion: no-preference) { .genealogy li { transition: background-color .15s ease; } }
@media (max-width: 480px) { .genealogy, .genealogy ul { padding-left: 1rem; }
  .genealogy li::before { left: -.55rem; width: .4rem; } }
@media print { .tree-nav { display: none; } body { background: #fff; } .genealogy ul { border-color: #bbb; } }