/* Family tree section. Loaded after each page's own stylesheet and after site.css:
   it maps the older per-page variables onto the site palette and restyles the shared bits. */

:root{
  --page-bg:var(--bg);
  --surface-soft:var(--sunken);
  --muted:var(--ink-2);
  --accent-dark:var(--accent-ink);
  --plum:oklch(0.55 0.13 350);
  --berry:oklch(0.55 0.13 350);
  --gold:oklch(0.72 0.13 75);
  --shadow:0 18px 45px -24px rgba(20,20,40,.35);
}
body{background:var(--bg)!important;color:var(--ink);font:400 16px/1.55 var(--font)!important}
h1,h2,h3{font-family:var(--font)}

/* Section bar under the site top bar */
.tree-bar{border-bottom:1px solid var(--line);background:var(--bg)}
.tree-bar .wrap{display:flex;align-items:center;gap:8px 24px;min-height:56px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.tree-bar-title{font-weight:600;letter-spacing:-.015em;text-decoration:none;color:var(--ink);display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.tree-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.tree-tabs::-webkit-scrollbar{display:none}
.tree-tabs a{display:block;padding:7px 12px;border-radius:100px;text-decoration:none;color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap;border:1px solid transparent}
.tree-tabs a:hover{color:var(--ink);background:var(--sunken)}
.tree-tabs a[aria-current]{color:var(--bg);background:var(--ink)}
@media (max-width:760px){.tree-bar-title{display:none}.tree-tabs{margin-left:0}}

/* Shared page body for families / paths / calendar / person */
#container{width:auto!important;max-width:1200px;margin:0 auto!important;padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px) 0!important}
@media (min-width:1600px){#container{max-width:1360px}}
.familiesIntro h1,.pathsIntro h1,.calendarIntro h1{font-size:clamp(32px,4.6vw,52px)!important;font-weight:650!important;letter-spacing:-.045em;line-height:1.02!important}
.familiesIntro p,.pathsIntro p,.calendarIntro p,.info{color:var(--ink-2)!important;font-size:16.5px}
#searchHolder{background:var(--surface)!important;border-color:var(--line)!important;border-radius:14px!important;box-shadow:none!important}
#searchHolder label,#searchHolder>span:first-child{color:var(--ink-2)!important;font-weight:500!important;font-size:14px!important}
#searchHolder input[type=text],#searchHolder input#search{background:var(--bg)!important;border:1px solid var(--line-2)!important;border-radius:10px!important;color:var(--ink)!important;font:400 16px/1.4 var(--font)!important}
#searchHolder input:focus{outline:2px solid var(--accent)!important;outline-offset:1px;border-color:transparent!important}
#searchCount{background:var(--sunken)!important;color:var(--ink-2)!important;border-radius:8px!important;font:500 13px/1 var(--mono)!important}
#emptyResults{color:var(--ink-2)}

/* Stat tiles (paths, calendar) */
.pathsStat,.calendarStat{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important}
.pathsStat strong,.calendarStat strong{color:var(--ink)!important;font-weight:600!important;letter-spacing:-.03em}
.pathsStat span,.calendarStat span{color:var(--ink-2)!important}

/* Families */
.familyHolder{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:none!important;overflow:hidden}
.familyHolder::before{border-left:3px solid var(--accent)!important;background:none!important;border-radius:18px 0 0 18px}
.familyHolder h2{background:transparent!important;border-bottom:1px solid var(--line)!important}
.familyHolder h2 span{font-weight:600!important;letter-spacing:-.02em}
.familyHolder h2 small{background:var(--sunken)!important;color:var(--ink-2)!important;border:0!important}
.familyMembers a{background:var(--bg)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important;transition:border-color .15s,transform .15s}
.familyMembers a:hover,.familyMembers a:focus{border-color:var(--line-2)!important;transform:translateY(-1px)}
.familyMembers img{border-radius:10px!important;background:var(--sunken)}
.memberLabel{color:var(--ink)!important;font-weight:600!important}
.memberType{background:var(--accent-soft)!important;color:var(--accent-ink)!important;border:0!important}

/* Paths */
.path-holder{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:none!important}
.path-holder::before{background:linear-gradient(var(--accent),var(--teal))!important;opacity:.6}
.path-title{background:transparent!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important}
.path-title small{background:var(--sunken)!important;color:var(--ink-2)!important}
.person-content-holder{background:var(--bg)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important;color:var(--ink)!important}
.person-content-holder:hover,.person-content-holder:focus{border-color:var(--line-2)!important}
.person-label{color:var(--ink)!important}
.person-position{background:var(--accent-soft)!important;color:var(--accent-ink)!important}
.person-holder-circle{background:var(--surface)!important;border-color:var(--accent)!important}
.level-number{color:var(--accent-ink)!important;font-family:var(--mono)!important}
.person-holder-year{color:var(--ink-3)!important;font-family:var(--mono)!important}
.person-holder-year:empty{visibility:hidden}

/* Calendar */
.month{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:none!important}
.month::before{border-top:3px solid var(--accent)!important;background:none!important;border-radius:18px 18px 0 0!important}
.month h2{color:var(--ink)!important;font-weight:600!important;letter-spacing:-.02em}
.day{color:var(--ink-2)!important;border-radius:10px!important}
.day.peopleInDayExists{background:var(--accent-soft)!important;color:var(--accent-ink)!important;border-color:color-mix(in srgb,var(--accent) 35%,transparent)!important}
.day.peopleInDayExists::after{background:var(--plum)!important}
.day.peopleInDayExists.is-open{background:var(--accent)!important;color:var(--bg)!important}
.dayPeopleHolder{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;color:var(--ink)}
.dayPerson{border-color:var(--line)!important}
.personYear,.personWOBMeta{color:var(--ink-3)!important}
.withoutBirthday{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:none!important}
.personWOB{background:var(--bg)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important;color:var(--ink)!important}

/* Circle diagram (d3) page */
body.tree-circle .circleIntro{max-width:760px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px) 0}
body.tree-circle .circleIntro h1{font-size:clamp(32px,4.6vw,52px);font-weight:650;letter-spacing:-.045em;line-height:1.02}
body.tree-circle .circleIntro p{color:var(--ink-2);font-size:16.5px;margin-top:12px}
body.tree-circle #searchHolder{max-width:min(760px,calc(100% - 32px));margin:20px auto 0;padding:10px 12px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);position:relative}
body.tree-circle #searchHolder input{flex:1;height:40px;padding:0 12px}
body.tree-circle #results-holder{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:0 18px 40px -20px rgba(20,20,40,.4)!important;z-index:20;top:100%;left:0}
body.tree-circle #results-holder .person-holder{border-color:var(--line)!important;border-radius:10px;background:var(--bg);color:var(--ink)}
body.tree-circle #results-holder .person-holder:hover{background:var(--sunken)!important}
body.tree-circle #diagram-holder{overflow:auto;margin-top:16px}
body.tree-circle svg text{font-family:var(--font)!important}

/* Single person */
.person{max-width:960px}
.person .back{display:inline-flex;margin:clamp(24px,4vw,40px) 0 20px;font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none}
.person .back:hover{color:var(--ink)}
.person-card{display:grid;grid-template-columns:220px 1fr;gap:clamp(20px,4vw,40px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,3vw,28px)}
@media (max-width:620px){.person-card{grid-template-columns:1fr}}
.person-photo{aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--sunken)),color-mix(in srgb,var(--teal) 18%,var(--sunken)));display:grid;place-items:center;max-width:260px}
.person-photo img{width:100%;height:100%;object-fit:cover;display:block}
.person-photo span{font:600 56px/1 var(--font);letter-spacing:-.04em;color:color-mix(in srgb,var(--ink) 22%,transparent)}
.person-info h1{font-size:clamp(30px,4.2vw,46px);font-weight:650;letter-spacing:-.04em;line-height:1.05}
.person-info dl{margin:20px 0 22px;display:grid;gap:0}
.person-info dl>div{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:10px 0;border-top:1px dashed var(--line)}
.person-info dl>div:first-child{border-top:0}
@media (max-width:420px){.person-info dl>div{grid-template-columns:1fr;gap:2px}}
.person-info dt{font-size:13.5px;color:var(--ink-3)}
.person-info dd{margin:0;font-weight:500}
.person-info .unknown{color:var(--ink-3);font-weight:400}
.person-bio,.person-photos{margin-top:clamp(32px,5vw,48px)}
.person-bio h2,.person-photos h2{font-size:22px;letter-spacing:-.03em;margin-bottom:14px}
.prose-lite{font-family:var(--serif);font-size:18.5px;line-height:1.75;max-width:68ch}
.prose-lite>*+*{margin-top:1em}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.photo-grid a{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--sunken)}
.photo-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.photo-grid a:hover img{transform:scale(1.04)}
.person-help{margin-top:40px;font-size:14.5px;color:var(--ink-2)}
.person-help a{color:var(--accent-ink)}