.tree-overview { padding: 16px 0; }
.tree-overview h1 { margin: 0 0 16px; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.overview-controls { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.overview-controls label { display: grid; gap: 6px; font-size: .85rem; flex: 1 1 170px; }
.overview-controls select { width: 100%; min-height: 42px; padding: 8px; background: var(--paper, #fbfaf5); color: inherit; border: 1px solid var(--line, #d4d5cd); border-radius: 10px; }
.overview-controls [hidden] { display: none; }
.overview-controls input { width: 100%; }
.overview-age-bounds { display: flex; justify-content: space-between; color: var(--muted, #666); font-size: .7rem; }
.overview-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .83rem; margin-bottom: 12px; }
.overview-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; }
.overview-legend small { flex-basis: 100%; color: var(--muted, #666); }
.overview-stage { position: relative; border: 1px solid var(--line, #d4d5cd); border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at center, #faf9f2, #eeeee4); }
[data-overview-svg] { display: block; width: 100%; height: clamp(320px, 57dvh, 720px); touch-action: none; cursor: grab; }
[data-overview-svg]:active { cursor: grabbing; }
.overview-edges path { fill: none; stroke: #86958a; stroke-width: .7; opacity: .19; }
.overview-edges .is-path { stroke: #344f43; stroke-width: 2; opacity: .9; }
.overview-edges .is-partner { stroke: #97638a; stroke-width: 1.8; stroke-dasharray: 4 3; opacity: .9; }
.overview-node { cursor: pointer; outline: none; }
.overview-node text { display: none; font-size: 7px; fill: #263c31; paint-order: stroke; stroke: #faf9f2; stroke-width: 2px; pointer-events: none; }
.overview-show-labels .overview-node text { display: block; }
.overview-halo { fill: none; stroke: #365e50; stroke-width: 1.3; }
.overview-node.is-selected .overview-halo, .overview-node:focus circle { stroke: #172e23; stroke-width: 2.5; }
.overview-navigation { position: absolute; top: 9px; left: 9px; right: 9px; display: flex; gap: 5px; flex-wrap: wrap; pointer-events: none; }
.overview-navigation button { pointer-events: auto; background: #fffdf5f5; color: #263c31; border: 1px solid #c9cec3; border-radius: 8px; min-height: 36px; min-width: 36px; padding: 5px 10px; font-size: .8rem; box-shadow: 0 2px 4px #2036290a; }
.overview-selected { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #c9cec3; border-radius: 20px; padding: 8px 14px; background: #fffdf5f5; color: #263c31; font-size: .8rem; }
.overview-help { font-size: .78rem; color: var(--muted, #666); margin: 8px 0; }
.overview-bottom { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 24px; margin-top: 20px; }
[data-overview-results] { display: grid; max-height: 280px; overflow: auto; }
[data-overview-results] button, .overview-detail details button { border: 0; background: transparent; color: #3d6959; text-align: left; padding: 8px 4px; text-decoration: underline; }
.overview-detail { background: #ffffff70; border: 1px solid var(--line, #d4d5cd); border-radius: 14px; padding: 18px; }
.overview-detail h2 { margin-top: 0; }
.overview-detail p { font-size: .88rem; }
.overview-detail small { display: block; margin-top: 12px; color: var(--muted, #666); }
.tree-overview.is-expanded { position: fixed; inset: 0; z-index: 1200; overflow: auto; background: #f4f2e9; padding: max(12px, env(safe-area-inset-top)) 16px 20px; }
.tree-overview.is-expanded > header, .tree-overview.is-expanded .overview-controls, .tree-overview.is-expanded .overview-legend, .tree-overview.is-expanded .overview-help, .tree-overview.is-expanded .overview-bottom { display: none; }
.tree-overview.is-expanded [data-overview-svg] { height: calc(100dvh - 44px); }
@media (max-width: 600px) { .overview-bottom { grid-template-columns: 1fr; gap: 14px; } .overview-controls { gap: 10px; } .overview-controls label { flex-basis: 135px; } .overview-navigation button { padding: 5px 8px; } }