/* ── Page heading ─────────────────────────────────────── */
.m-3 > .container h1 {
    font-family: var(--font-serif);
    color: var(--c-charcoal);
    letter-spacing: -0.02em;
}

/* ── Toolbar ─────────────────────────────────────────── */
#ft-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
#ft-toolbar .btn {
    font-size: 12px; padding: 5px 14px;
    border-radius: 20px; font-family: var(--font-sans);
    transition: all 0.2s ease;
}
#ft-toolbar .btn-success {
    background: var(--c-olive); border-color: var(--c-olive);
    box-shadow: 0 2px 8px rgba(58,94,37,0.25);
}
#ft-toolbar .btn-success:hover { background: var(--c-forest); border-color: var(--c-forest); }
#ft-toolbar .btn-secondary {
    background: var(--c-white); border-color: var(--c-beige);
    color: var(--c-brown);
}
#ft-toolbar .btn-secondary:hover {
    background: var(--c-sage-bg); border-color: var(--c-sage-light);
    color: var(--c-olive);
}
#ft-toolbar .btn-secondary.active {
    background: var(--c-sage-bg); border-color: var(--c-sage-mid);
    color: var(--c-olive); box-shadow: none;
}

/* ── Tree container ──────────────────────────────────── */
#ft-wrap {
    display: flex; height: 720px;
    border: 1px solid var(--c-beige); border-radius: 0 0 12px 12px;
    overflow: hidden; background: var(--c-ivory);
    box-shadow: 0 4px 24px rgba(40,60,20,0.08), 0 1px 4px rgba(40,60,20,0.04);
}
#ft-graph { flex: 1; }

/* ── Search bar ──────────────────────────────────────── */
/* Header tab attached to #ft-wrap: same fill as its border, so the seam disappears. */
#ft-search-bar {
    margin: 24px 0 0;
    background: var(--c-beige); border-radius: 12px 12px 0 0;
    padding: 10px 0;
}
#ft-search-inner { position: relative; }
#ft-search-bar .rl-heritage-search { max-width: 320px; }
#ft-search-results {
    position: absolute; top: 100%; left: 0; z-index: 200;
    width: max-content; max-width: 320px;
    max-height: 200px; overflow-y: auto; overflow-x: hidden;
    background: var(--c-white); border: 1px solid var(--c-beige);
    border-top: none; border-radius: 0 0 8px 8px;
    padding: 4px 6px; display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}

/* ── Sidebar ─────────────────────────────────────────── */
#ft-sidebar {
    width: 0; flex-shrink: 0; background: var(--c-white);
    display: flex; flex-direction: column;
    overflow: hidden; color: var(--c-charcoal);
    font-family: var(--font-sans);
    font-size: 13px; transition: width 0.25s ease;
}
#ft-sidebar.ft-sidebar-open {
    width: 265px; border-left: 1px solid var(--c-beige);
}
#ft-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--c-beige); flex-shrink: 0;
    font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em;
    background: var(--c-ivory);
}
#ft-sidebar-close {
    background: none; border: none; color: var(--c-muted); cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0 3px; border-radius: 3px;
    transition: color 0.15s ease, background 0.15s ease;
}
#ft-sidebar-close:hover { color: var(--c-charcoal); background: var(--c-sage-bg); }
.ft-sr-item {
    padding: 4px 6px 4px 10px; margin: 2px 0;
    cursor: pointer; border-radius: 4px; font-size: 12px;
    border-left: 3px solid var(--c-sage-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background 0.15s ease;
}
.ft-sr-item:hover { background: var(--c-sage-bg); }
#ft-info {
    padding: 12px; border-bottom: 1px solid var(--c-beige);
    min-height: 120px; line-height: 1.6; color: var(--c-charcoal);
}
#ft-info h3, #ft-rels h3 {
    font-size: 11px; color: var(--c-muted); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 7px;
}
.ft-field { margin-bottom: 3px; }
.ft-field b { color: var(--c-charcoal); }
.ft-muted { color: var(--c-muted); font-style: italic; font-size: 12px; }
.ft-edit-link {
    display: inline-block; margin-top: 6px; font-size: 11px;
    color: var(--c-olive); text-decoration: none;
    transition: color 0.15s ease;
}
.ft-edit-link:hover { color: var(--c-forest); }
#ft-rels { flex: 1; overflow-y: auto; padding: 12px; }
.ft-rel {
    display: block; padding: 3px 6px 3px 10px; margin: 2px 0;
    cursor: pointer; border-radius: 3px; font-size: 12px;
    border-left: 3px solid var(--c-sage-light); color: var(--c-charcoal);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background 0.15s ease;
}
.ft-rel:hover { background: var(--c-sage-bg); color: var(--c-charcoal); }
#ft-stats { padding: 5px 2px; font-size: 11px; color: var(--c-muted); text-align: right; }

/* ── Legend ──────────────────────────────────────────── */
.ft-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--c-muted); }
.ft-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ft-dot  { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.ft-line { display: inline-block; width: 26px; height: 2px; flex-shrink: 0; }
.ft-dashed { background: repeating-linear-gradient(to right,#dc3545 0,#dc3545 5px,transparent 5px,transparent 9px); }

/* ── "+ add relative" (per-card button + chooser popover) ── */
#ft-graph .ft-add-btn circle {
    fill: var(--c-white); stroke: var(--c-sage-mid); stroke-width: 1.5;
    transition: fill 0.15s ease, stroke 0.15s ease;
}
#ft-graph .ft-add-btn path { stroke: var(--c-olive); stroke-width: 2; stroke-linecap: round; fill: none; }
#ft-graph .ft-add-btn:hover circle { fill: var(--c-sage-bg); stroke: var(--c-olive); }
.ft-add-menu {
    position: fixed; z-index: 1100; min-width: 170px;
    background: var(--c-white); border: 1px solid var(--c-beige);
    border-radius: 8px; padding: 4px 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    font-family: var(--font-sans); font-size: 12px; color: var(--c-charcoal);
}
.ft-add-menu__head {
    padding: 5px 6px 5px 10px; margin-bottom: 3px;
    font-size: 10px; color: var(--c-muted);
    text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--c-beige);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.ft-add-menu__item {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 8px 5px 10px; margin: 2px 0;
    cursor: pointer; border-radius: 4px;
    border-left: 3px solid var(--c-sage-light);
    transition: background 0.15s ease;
}
.ft-add-menu__item:hover { background: var(--c-sage-bg); }
.ft-add-menu__item i { color: var(--c-olive); width: 14px; text-align: center; }

/* ── Currently viewing ──────────────────────────────────── */
.ft-viewers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--c-muted); }
.ft-viewer-chip {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--c-sage-bg); color: var(--c-forest); font-size: 11px;
}
#ft-graph g, #ft-graph line, #ft-graph text { transition: opacity 0.15s ease; }