/* ============================================================================
   tree-views.css — styling for the two alternative tree pages
   (/tree/radial — sunburst, /tree/explorer — focus "walk" view).
   Self-contained: loaded only on those pages, leaves app.css untouched.
   ========================================================================== */

/* ── Shared controls bar (search + buttons) ─────────────────────────────── */
.tv-controls {
    display: flex; align-items: flex-start; gap: 1rem;
    flex-wrap: wrap; margin: .2rem 0 .7rem;
}
.tv-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn.btn-sm.is-active,
.btn[aria-pressed="true"] {
    background: var(--gold); color: #fff; border-color: var(--gold);
}

/* ── Search box with live results ───────────────────────────────────────── */
.tv-search { position: relative; flex: 1 1 280px; max-width: 380px; }
.tv-search-input {
    width: 100%; padding: .55rem .9rem; font: inherit;
    background: var(--parchment); color: var(--ink);
    border: 1px solid var(--line); border-radius: 999px;
    box-shadow: var(--shadow-sm); transition: border-color .15s ease;
}
.tv-search-input:focus { outline: none; border-color: var(--gold); }
.tv-search-results {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
    margin: 0; padding: .25rem; list-style: none;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    max-height: 320px; overflow-y: auto;
}
.tv-search-results li {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem .55rem; border-radius: 8px; cursor: pointer;
}
.tv-search-results li:hover,
.tv-search-results li[aria-selected="true"] { background: var(--ivory-deep); }
.tv-search-results .tv-sr-av {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    background: var(--line-soft); display: grid; place-items: center;
    color: var(--burgundy); font-weight: 600; flex: none; overflow: hidden;
}
.tv-search-results .tv-sr-av img { width: 100%; height: 100%; object-fit: cover; }
.tv-search-results .tv-sr-name { font-weight: 600; font-size: .9rem; }
.tv-search-results .tv-sr-meta { font-size: .75rem; color: var(--ink-soft); }
.tv-search-empty { padding: .6rem .7rem; color: var(--ink-soft); font-size: .85rem; }

/* ── Breadcrumb (radial focus path) ─────────────────────────────────────── */
.tv-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: .15rem;
    font-size: .9rem; margin: 0 0 .55rem; min-height: 1.2rem;
}
.tv-breadcrumb button {
    background: none; border: 0; cursor: pointer; padding: .1rem .25rem;
    color: var(--burgundy); font: inherit; border-radius: 6px;
}
.tv-breadcrumb button:hover { background: var(--ivory-deep); }
.tv-breadcrumb .tv-crumb-sep { color: var(--ink-soft); }
.tv-breadcrumb .tv-crumb-current { color: var(--ink); font-weight: 600; }

/* ── Stage shared ───────────────────────────────────────────────────────── */
.tv-stage { /* inherits #tree-stage from app.css */ }
.tv-svg { display: block; width: 100%; height: 100%; cursor: grab; }
.tv-svg:active { cursor: grabbing; }

/* ── Sunburst arcs & labels ─────────────────────────────────────────────── */
.tv-arc { stroke: var(--ivory); stroke-width: 1px; cursor: pointer;
          transition: opacity .25s ease, filter .15s ease; }
.tv-arc:hover { filter: brightness(1.08); }
.tv-arc.is-dim { opacity: .18; }
.tv-arc.is-lineage { opacity: 1; stroke: var(--gold); stroke-width: 2px; }
.tv-arc-label {
    font-family: var(--sans); font-size: 11px; fill: #fff; pointer-events: none;
    paint-order: stroke; stroke: rgba(20,30,46,.35); stroke-width: 2.4px;
    dominant-baseline: middle; user-select: none;
}
.tv-arc-label.is-dark { fill: var(--ink); stroke: rgba(255,255,255,.6); }
.tv-center-label {
    font-family: var(--serif); fill: var(--ink); text-anchor: middle;
    dominant-baseline: middle; pointer-events: none;
}
.tv-center-hit { fill: transparent; cursor: pointer; }

/* ── Hover detail card (radial) ─────────────────────────────────────────── */
.tv-card {
    position: absolute; z-index: 25; min-width: 180px; max-width: 240px;
    background: var(--card); border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 12px; box-shadow: var(--shadow-md);
    padding: .6rem .7rem; pointer-events: none; font-size: .85rem;
}
.tv-card .tv-card-head { display: flex; gap: .55rem; align-items: center; }
.tv-card .tv-card-av {
    width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden;
    background: var(--line-soft); display: grid; place-items: center;
    color: var(--burgundy); font-family: var(--serif); font-weight: 600;
    box-shadow: inset 0 0 0 2px var(--gold-soft);
}
.tv-card .tv-card-av img { width: 100%; height: 100%; object-fit: cover; }
.tv-card .tv-card-name { font-family: var(--serif); font-weight: 600; font-size: .98rem; }
.tv-card .tv-card-meta { color: var(--ink-soft); font-size: .78rem; }
.tv-card .tv-card-cta { color: var(--burgundy); font-size: .78rem; margin-top: .35rem; }

/* ── Minimap (corner overview) ──────────────────────────────────────────── */
/* Bottom-left, under the "Lignée" column: that area has no ego cards, so the
   minimap never hides a person's name (as it did at the bottom-right). */
.tv-minimap {
    position: absolute; left: 12px; bottom: 12px; z-index: 20;
    width: 168px; height: 168px;
    background: rgba(238,243,250,.86); backdrop-filter: blur(2px);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.tv-minimap svg { display: block; width: 100%; height: 100%; cursor: pointer; }
.tv-minimap .tv-mm-node { fill: var(--gold-soft); }
.tv-minimap .tv-mm-link { stroke: var(--line); stroke-width: 1px; fill: none; }
.tv-minimap .tv-mm-focus { fill: var(--burgundy); }
.tv-minimap .tv-mm-path  { fill: var(--gold); }

/* ════════════════════════ Explorer (ego) view ══════════════════════════ */
#tree-stage.tv-stage--explorer {
    display: grid;
    grid-template-columns: minmax(180px, 230px) 1fr;
    gap: 0;
    /* A bit taller than the classic tree so the ego layout has room to breathe. */
    height: min(88vh, 900px);
}
.tv-lineage {
    border-right: 1px solid var(--line);
    background: rgba(238,243,250,.55);
    padding: .9rem .8rem; overflow-y: auto;
}
.tv-lineage h3 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--gold); margin: 0 0 .6rem;
}
.tv-lineage ol { list-style: none; margin: 0; padding: 0; position: relative; }
.tv-lineage li { position: relative; padding: 0 0 .15rem 1.1rem; }
.tv-lineage li::before {
    content: ""; position: absolute; left: 4px; top: 1.05rem; bottom: -.15rem;
    width: 2px; background: var(--line);
}
.tv-lineage li:last-child::before { display: none; }
.tv-lineage button {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    cursor: pointer; padding: .3rem .4rem; border-radius: 8px;
    font: inherit; color: var(--ink); position: relative;
}
.tv-lineage button::before {
    content: ""; position: absolute; left: -1.07rem; top: .62rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--card); border: 2px solid var(--gold-soft);
}
.tv-lineage button:hover { background: var(--ivory-deep); }
.tv-lineage .is-current > button { background: var(--ivory-deep); font-weight: 600; }
.tv-lineage .is-current > button::before { background: var(--burgundy); border-color: var(--burgundy); }
.tv-lineage .tv-ln-name { display: block; font-size: .88rem; line-height: 1.2; }
.tv-lineage .tv-ln-meta { display: block; font-size: .72rem; color: var(--ink-soft); margin-top: 1px; }

/* Ego canvas: an SVG link layer behind absolutely-positioned cards. */
.tv-ego { position: relative; overflow: hidden; }
.tv-ego-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tv-ego-links path { fill: none; stroke: var(--line); stroke-width: 2px; }
.tv-ego-links path.is-marriage { stroke: var(--gold); stroke-dasharray: 0; }
.tv-ego-links path.is-spine { stroke: var(--gold-soft); stroke-width: 3px; }

.tv-node {
    position: absolute; transform: translate(-50%, -50%);
    transition: left .45s cubic-bezier(.22,.61,.36,1),
                top  .45s cubic-bezier(.22,.61,.36,1),
                opacity .35s ease;
    display: flex; align-items: center; gap: .5rem;
    background: var(--card); border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 12px; padding: .4rem .6rem; box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--ink); cursor: pointer; max-width: 210px;
    font: inherit; text-align: left;
}
.tv-node:hover { box-shadow: var(--shadow-md); border-color: var(--gold); }
.tv-node.g-F { border-left-color: #b06a8e; }
.tv-node.is-living { border-left-color: var(--living); }
.tv-node.is-compact { width: 200px; padding: .38rem .55rem; }
.tv-node.is-compact .tv-node-av { width: 36px; height: 36px; font-size: .95rem; }
.tv-node.is-compact .tv-node-name { font-size: .86rem; }
.tv-node.is-focus {
    cursor: default; transform: translate(-50%, -50%) scale(1.04);
    border-color: var(--gold); box-shadow: var(--shadow-md), 0 0 0 3px var(--gold-soft);
    width: 244px;
}
.tv-node.is-hidden { border-left-color: var(--line); cursor: default; }
.tv-node.is-hidden .tv-node-name { font-style: italic; color: var(--ink-soft); }
.tv-node.is-nameonly { border-left-style: dashed; cursor: default; }
.tv-node-av {
    width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
    background: var(--line-soft); display: grid; place-items: center;
    color: var(--burgundy); font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
    box-shadow: inset 0 0 0 2px var(--gold-soft);
}
.tv-node.is-focus .tv-node-av { width: 50px; height: 50px; }
.tv-node-av img { width: 100%; height: 100%; object-fit: cover; }
.tv-node-text { min-width: 0; flex: 1 1 auto; }
/* Names wrap (up to two lines) so long compound names stay fully readable. */
.tv-node-name {
    font-family: var(--serif); font-weight: 600; font-size: .9rem; line-height: 1.15;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.tv-node.is-focus .tv-node-name { font-size: 1.05rem; -webkit-line-clamp: 3; }
.tv-node-meta { display: block; font-size: .73rem; color: var(--ink-soft); margin-top: 1px; }
.tv-node-rel {
    position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
    font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
    background: var(--gold-soft); color: var(--burgundy-dk);
    padding: .05rem .4rem; border-radius: 999px; white-space: nowrap;
}
.tv-node-deceased { color: var(--ink-soft); font-size: .72rem; }

/* "More" pill when a sibling/child row overflows. */
.tv-more {
    position: absolute; transform: translate(-50%, -50%);
    background: var(--parchment); border: 1px dashed var(--line);
    border-radius: 999px; padding: .3rem .6rem; font-size: .78rem;
    color: var(--ink-soft); cursor: default;
}

/* Profile shortcut button shown on the focused node. */
.tv-focus-profile {
    position: absolute; transform: translate(-50%, -50%);
    background: var(--burgundy); color: var(--parchment);
    border-radius: 999px; padding: .3rem .8rem; font-size: .78rem;
    text-decoration: none; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.tv-focus-profile:hover { background: var(--burgundy-dk); color: var(--parchment); }

@media (max-width: 720px) {
    /* The three-column ego layout can't fit a phone width without the cards
       colliding, so give it a fixed minimum canvas and let the stage scroll
       (the script keeps the focused person centred). The minimap is hidden —
       it's too cramped to be useful on a phone. */
    #tree-stage.tv-stage--explorer {
        grid-template-columns: 1fr;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tv-lineage { display: none; }
    .tv-minimap { display: none; }
    .tv-ego { min-width: 600px; }
}

/* Phones: shrink the cards so the three-column ego layout stays readable. */
@media (max-width: 620px) {
    .tv-node.is-compact { width: 144px; padding: .3rem .42rem; gap: .4rem; }
    .tv-node.is-focus { width: 176px; }
    .tv-node.is-compact .tv-node-av { width: 32px; height: 32px; font-size: .85rem; }
    .tv-node.is-focus .tv-node-av { width: 42px; height: 42px; }
    .tv-node.is-compact .tv-node-name { font-size: .78rem; }
    .tv-node.is-focus .tv-node-name { font-size: .9rem; }
    .tv-node-meta { font-size: .68rem; }
    .tv-node-rel { font-size: .55rem; top: -.62rem; }
    .tv-focus-profile { font-size: .72rem; padding: .26rem .6rem; }
}