/* Version lineage bar + family tree. See family.js */

:root {
    --fam-ink: #212529;
    --fam-muted: #6c757d;
    --fam-line: #ced4da;
    --fam-bg: #f1f3f5;
    --fam-accent: #2f6f4f;
    --fam-accent-soft: #e3f1e8;
}

/* ---------- Lineage bar ---------- */

.fam-bar {
    background: var(--fam-bg);
    border-bottom: 1px solid #dee2e6;
    padding: .75rem 0 .6rem;
    font-size: .95rem;
}
.fam-bar + main { padding-top: 2rem; }

.fam-lineage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    row-gap: .4rem;
}
.fam-crumb { display: flex; align-items: center; }
.fam-crumb + .fam-crumb::before,
.fam-next::before {
    content: "›";
    color: var(--fam-muted);
    margin: 0 .45rem;
    font-size: 1.15em;
}
.fam-crumb a,
.fam-crumb > span,
.fam-next a {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    color: var(--fam-ink);
    white-space: nowrap;
}
.fam-crumb a:hover,
.fam-next a:hover { background: #e2e6ea; text-decoration: none; }
.fam-abbr { font-weight: 600; }
.fam-year { color: var(--fam-muted); font-variant-numeric: tabular-nums; }

.fam-current > span {
    background: var(--fam-ink);
    color: #fff;
}
.fam-current .fam-year { color: #ced4da; }
.fam-delta {
    margin-left: .35rem;
    padding-left: .45rem;
    border-left: 1px solid #6c757d;
    font-size: .8em;
    color: #ced4da;
}

.fam-next { display: flex; align-items: center; }
.fam-next::before { content: "›"; }
.fam-next-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fam-muted);
    margin-right: .3rem;
}
.fam-next ul { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.fam-next a { border: 1px dashed #adb5bd; }

.fam-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
    font-size: .875rem;
    color: var(--fam-muted);
}
.fam-meta strong { color: var(--fam-ink); }
.fam-note { cursor: help; }
.fam-book select {
    font-size: .875rem;
    padding: .1rem .3rem;
    border: 1px solid var(--fam-line);
    border-radius: .25rem;
    background: #fff;
    max-width: 12rem;
}
.fam-book { margin: 0; }
.fam-related { display: inline-flex; flex-wrap: wrap; gap: .25rem 1rem; }
.fam-home { margin-left: auto; }

/* ---------- Family tree (home page) ---------- */

.fam-tree,
.fam-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fam-tree > li { margin-bottom: 1.5rem; }
.fam-tree ul { margin-left: 1rem; }
.fam-tree li { scroll-margin-top: 4rem; }
.fam-tree ul > li {
    position: relative;
    padding: .35rem 0 0 1.6rem;
}
/* vertical connector */
.fam-tree ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--fam-line);
}
.fam-tree ul > li:last-child::before { bottom: auto; height: 1.65rem; }
/* horizontal connector */
.fam-tree ul > li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1.65rem;
    width: 1.35rem;
    border-top: 2px solid var(--fam-line);
}

.fam-node {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    padding: .4rem .75rem;
    border: 1px solid #dee2e6;
    border-radius: .4rem;
    background: #fff;
    max-width: 100%;
}
.fam-node.fam-root { background: var(--fam-ink); border-color: var(--fam-ink); color: #fff; }
.fam-node.fam-root .fam-node-main { color: #fff; }
.fam-node.fam-root .fam-alt { color: #9ec5fe; }
.fam-node.fam-root .fam-year,
.fam-node.fam-root .fam-name { color: #ced4da; }
.fam-node-main { color: var(--fam-ink); }
a.fam-node-main:hover { text-decoration: none; }
a.fam-node-main:hover .fam-abbr { text-decoration: underline; }
.fam-node .fam-abbr { font-size: 1.05rem; }
.fam-name { margin-left: .4rem; color: var(--fam-muted); font-size: .875rem; }
.fam-tag {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 .35rem;
    border-radius: .2rem;
    background: #e9ecef;
}
.fam-stats {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--fam-muted);
    font-variant-numeric: tabular-nums;
}
.fam-meter {
    display: inline-block;
    width: 70px;
    height: 6px;
    border-radius: 3px;
    background: #e9ecef;
    overflow: hidden;
}
.fam-meter > span { display: block; height: 100%; background: var(--fam-accent); }
.fam-alt { font-size: .8rem; }
.fam-note-text { flex-basis: 100%; font-size: .75rem; color: var(--fam-muted); }
.fam-highlight > .fam-node { box-shadow: 0 0 0 3px var(--fam-accent-soft); border-color: var(--fam-accent); }

@media (max-width: 575.98px) {
    .fam-home { margin-left: 0; }
    .fam-name { display: none; }
    .fam-tree ul { margin-left: .25rem; }
}