/* =====================================================================
   BibleKey — the family tree.
   One gold thread down the page, sixty-four generations long. Everything
   hangs off it: wives, other children, the passage to read.
   ===================================================================== */

.tree-tools {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 30px;
}
.tree-tools input[type="search"] {
    flex: 1 1 280px; max-width: 380px;
    font-family: var(--sans); font-size: 15px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--card-edge);
    border-radius: var(--r-full); padding: 12px 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
}
.tree-tools input[type="search"]::placeholder { color: var(--ink-faint); }
.tree-tools input[type="search"]:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-wash);
}
.tree-tools button {
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
    background: transparent; border: 1px solid var(--ink-ghost);
    border-radius: var(--r-full); padding: 11px 20px; cursor: pointer;
    transition: all .2s ease;
}
.tree-tools button:hover { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-wash); }
.tree-tools button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-wash); }

.era-rail {
    display: flex; gap: 7px; flex-wrap: wrap; margin-top: 20px;
    padding-top: 20px; border-top: 1px solid var(--card-edge);
}
.era-rail a {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-faint); text-decoration: none;
    padding: 6px 12px; border-radius: var(--r-full); border: 1px solid transparent;
    transition: all .2s ease;
}
.era-rail a:hover { color: var(--gold-ink); background: var(--gold-wash); border-color: var(--gold-hair); }

/* ------------------------------------------------------------- the line -- */

.tree-line { list-style: none; margin: 0; padding: 0; position: relative; }
/* the thread */
.tree-line::before {
    content: ''; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px;
    background: linear-gradient(180deg, transparent, var(--gold-hair) 4%, var(--gold-hair) 96%, transparent);
    border-radius: 2px;
}

.gen { position: relative; padding: 0 0 26px 52px; }
.gen[hidden] { display: none; }

.gen-mark {
    position: absolute; left: 0; top: 4px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--cream); border: 2px solid var(--gold-hair);
    display: flex; align-items: center; justify-content: center;
    transition: border-color .25s ease, background .25s ease;
}
.gen:hover .gen-mark { border-color: var(--gold); background: var(--gold-wash); }
.gen-n {
    font-size: 11px; font-weight: 700; color: var(--gold-ink);
    font-variant-numeric: tabular-nums; letter-spacing: 0;
}

.gen-card {
    background: var(--surface); border: 1px solid var(--card-edge);
    border-radius: var(--r-lg); padding: 18px 22px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.gen:hover .gen-card { border-color: var(--gold-hair); box-shadow: var(--lift-subtle); }

.gen-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 7px; }
.gen-name {
    font-family: var(--serif); font-size: 22px; font-weight: 700;
    color: var(--ink); text-decoration: none; letter-spacing: -0.018em;
}
.gen-name:hover { color: var(--gold-ink); }
.gen-date { font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

.gen-desc { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

.gen-rel { display: flex; flex-direction: column; gap: 5px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--card-edge); }
.rel-group { font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; }
.rel-group b {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--gold-ink); margin-right: 7px;
}
.rel-group a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--card-edge); }
.rel-group a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-hair); }

/* Compact — the whole line at a glance */
.tree-line.compact .gen { padding-bottom: 8px; }
.tree-line.compact .gen-desc,
.tree-line.compact .gen-rel { display: none; }
.tree-line.compact .gen-card { padding: 10px 18px; }
.tree-line.compact .gen-name { font-size: 18px; }
.tree-line.compact .gen-head { margin-bottom: 0; }

.tree-none { margin-top: 20px; font-size: 15px; color: var(--ink-muted); }

@media (max-width: 720px) {
    .gen { padding-left: 44px; padding-bottom: 20px; }
    .tree-line::before { left: 13px; }
    .gen-mark { width: 28px; height: 28px; }
    .gen-card { padding: 15px 17px; }
    .gen-name { font-size: 20px; }
}