.tree-viewport{position:relative;overflow:auto;max-width:100%;max-height:560px;min-height:240px;scrollbar-width:thin;scrollbar-color:#d6d8cf transparent;overscroll-behavior:contain;border-radius:4px}
.tree-viewport:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.tree-stage{position:relative;overflow:hidden}
.tree-canvas,.tree-wrap.expanded .tree-canvas{position:absolute;top:0;left:0;display:flex;width:max-content;min-height:340px;height:auto;gap:72px;padding:56px 28px 24px;overflow:visible;transform-origin:top left;isolation:isolate}
.tree-canvas .generation,.tree-wrap.expanded .generation{flex:0 0 144px;width:144px;min-width:144px;z-index:auto}
.tree-canvas .generation-members,.tree-wrap.expanded .generation-members{height:100%;padding:12px 0 0;gap:20px;justify-content:center}
.tree-canvas .generation-label{top:-30px;left:0;font-size:0.85714rem}
.tree-canvas .tree-card,.tree-wrap.expanded .tree-card{width:100%;min-width:0;max-width:none;flex-shrink:0;min-height:88px;padding:10px;z-index:1}
.tree-canvas .tree-card strong{font-size:0.85714rem}.tree-canvas .tree-card small{font-size:0.71429rem}
.tree-canvas .generation::after,.tree-canvas .tree-card::before{display:none}
.tree-wrap.expanded .tree-viewport{max-height:68vh;min-height:300px}
.tree-wrap.expanded .tree-canvas{min-height:440px}
.tree-wrap.expanded .generation{flex-basis:180px;width:180px;min-width:180px}
.tree-canvas .tree-links{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tree-links .parent-link{stroke:#78937b;stroke-width:1.5}.tree-links .spouse-link{stroke:#b18c60;stroke-width:1.5;stroke-dasharray:4 3}
.tree-links .tree-arrow{fill:#78937b;stroke:none}
.tree-relationship-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:8px 0 12px;color:var(--muted);font-size:0.78571rem}
.tree-relationship-legend span{display:inline-flex;align-items:center;gap:6px}.tree-relationship-legend i{width:22px;border-top:2px solid #78937b}.tree-relationship-legend .spouse-sample{border-top:2px dashed #b18c60}
@media(max-width:767px){.tree-wrap.expanded{padding:12px}.tree-wrap.expanded .generation{flex-basis:144px;width:144px;min-width:144px}.tree-wrap.expanded .tree-canvas{min-height:380px}.tree-viewport{max-height:60vh}.tree-relationship-legend{line-height:1.8}}

/* Literary excerpts have very uneven generations; keep the initial viewport populated. */
.literary-tree .tree-canvas .generation-members{justify-content:flex-start}