/* The map owns the space. Selection details overlay it only when requested. */
.creative-tree.wave-tree{position:relative;isolation:isolate;min-width:0;overflow:visible}
.wave-tree .tree-toolbar{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;margin:0 0 8px;padding:0;position:relative;z-index:6}
.tree-toolbar-title{font-size:13px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wave-tree .tree-control{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.wave-tree .tree-control .icon{width:19px;height:19px}
.wave-tree .tree-fit-control{width:auto;flex-basis:auto;font-size:12px;padding:8px 12px}
.tree-tools{position:relative;flex-shrink:0}.tree-tools summary{list-style:none}.tree-tools summary::-webkit-details-marker{display:none}
.tree-tools-menu{position:absolute;top:50px;inset-inline-end:0;width:205px;padding:7px;display:grid;gap:3px;border:1px solid var(--line);background:var(--surface);border-radius:16px;box-shadow:0 12px 35px #0004}
.tree-tools-menu .text-btn{width:100%;text-align:start;justify-content:flex-start;font-size:13px;padding:9px 12px;border-radius:10px}
.tree-tools-menu .text-btn:hover{background:var(--accent-soft)}
.wave-tree .wave-workspace{display:block!important;position:relative;min-height:0;overflow:hidden;border-radius:20px;background:var(--surface-2)}
.wave-tree .tree-viewport{height:clamp(420px,64dvh,640px);min-height:0!important;max-height:none!important;margin:0;border:0;border-radius:0;overflow:hidden;touch-action:none;overscroll-behavior:none}
.wave-tree .wave-canvas{position:absolute;left:0;top:0;will-change:transform;touch-action:none}
.wave-tree .tree-zoom-controls{position:absolute;inset-inline-start:10px;top:12px;display:flex;flex-direction:column;align-items:center;gap:3px;z-index:3;padding:3px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.tree-zoom-controls .tree-control{border:0;background:none;width:40px;height:40px;min-height:40px;flex-basis:40px}
.wave-tree .tree-scale{margin:0;font-size:10px;line-height:1.5;font-variant-numeric:tabular-nums;color:var(--muted)}
.wave-tree .tree-detail{position:absolute;z-index:4;inset:auto 10px 10px;width:auto!important;max-height:calc(100% - 76px);min-height:0;margin:0;padding:0!important;border:1px solid var(--accent-line);border-radius:19px;background:var(--surface);box-shadow:0 8px 30px #0003;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}
.tree-sheet-top{position:relative;height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:center}
.wave-tree .tree-sheet-handle{width:100%;height:28px;min-height:28px;display:grid;place-items:center;background:none;border:0;touch-action:none;cursor:ns-resize}
.tree-sheet-handle i{width:32px;height:4px;border-radius:4px;background:var(--muted);opacity:.6}
.wave-tree .tree-sheet-top>.tree-control{position:absolute;top:0;inset-inline-end:2px;width:32px;height:32px;min-height:32px;border:0;padding:8px;background:transparent}
.tree-sheet-top>.tree-control .icon{width:14px;height:14px}
.tree-selection-bar{display:flex;align-items:center;gap:7px;padding:0 10px 10px;flex-shrink:0;min-width:0}
.tree-selection-copy{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;color:var(--ink);text-align:start;padding:0;min-height:44px}
.tree-selection-copy>.avatar{width:36px!important;height:36px!important;min-width:36px;flex:0 0 36px!important;aspect-ratio:1;border-radius:50%}
.tree-selection-copy>span:last-child{min-width:0;display:grid;gap:2px}
.tree-selection-copy b{font-size:13px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-selection-copy small{font-size:10px;line-height:1.5;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wave-tree .tree-selection-play{background:var(--accent-soft);color:var(--violet);border:0;border-radius:50%}
.wave-tree .tree-contribute-quick{min-height:40px;font-size:12px;padding:8px 12px;border-radius:13px;white-space:nowrap;background:var(--violet);color:var(--on-accent);border:0}
.tree-sheet-body{padding:0 14px 14px;overflow:auto;overscroll-behavior:contain;min-height:0;border-top:1px solid var(--line)}
.tree-sheet-body[hidden]{display:none!important}
.wave-tree .tree-sheet-body p{font-size:13px;line-height:1.75;margin:10px 0;white-space:pre-wrap}
.wave-tree .tree-sheet-body p:empty{display:none}
.wave-tree .tree-sheet-body .meta{font-size:11px}
.wave-tree .wave-detail-actions{display:grid;gap:8px;margin:12px 0}
.wave-tree .wave-detail-actions .btn{min-height:44px;font-size:13px;padding:10px}
.wave-tree.sheet-hidden .tree-detail{display:none}
.wave-tree.sheet-open .tree-detail{max-height:min(58%,420px)}
.wave-tree .tree-list{height:clamp(420px,64dvh,640px);margin:0;padding:12px 12px 100px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.tree-list>button{flex-shrink:0}
.wave-tree.tree-overview .wave-node-select small,.wave-tree.tree-overview .wave-kind{display:none}
.wave-tree .wave-node-select b{max-height:3em;overflow:hidden}
/* Portal directly into the device viewport: no scrolling/transformed page ancestor. */
.phone-screen>.tree-expanded{position:absolute!important;inset:0!important;width:100%;height:100%;max-height:none;padding:8px!important;gap:0!important;display:flex;flex-direction:column;overflow:hidden!important;z-index:85!important;animation:none!important;transform:none!important;border-radius:0;background:var(--bg)}
.phone-screen>.tree-expanded .tree-toolbar{flex:0 0 44px;margin:0 0 8px}
.phone-screen>.tree-expanded .wave-workspace{flex:1 1 0;min-height:0;display:block!important}
.phone-screen>.tree-expanded .tree-viewport,.phone-screen>.tree-expanded .tree-list{width:100%;height:100%!important;min-height:0!important;max-height:none!important}
.phone-screen>.tree-expanded .tree-detail{flex:none}
@media(min-width:900px){
 .wave-tree .tree-detail{inset-inline-start:auto;inset-inline-end:14px;width:330px!important;bottom:14px}
 .wave-tree.sheet-open .tree-detail{max-height:calc(100% - 28px)}
 .phone-screen>.tree-expanded{padding:12px!important}
 .tree-toolbar-title{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.wave-tree *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.tree-onboarding{position:absolute;z-index:3;inset-inline:12px;bottom:100px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--accent-line);border-radius:14px;background:var(--surface);color:var(--muted);font-size:12px;line-height:1.7;text-align:start;box-shadow:0 4px 20px #0002}
.tree-onboarding .icon{width:16px;height:16px;flex:0 0 16px}
.sheet-open .tree-onboarding{display:none}
@media(min-width:900px){.tree-onboarding{inset-inline-start:70px;inset-inline-end:auto;bottom:14px;max-width:330px}}

/* Engagement changes the emphasis, never the geometry or creative lineage. */
.tree-mode-switch{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 0 8px;flex-shrink:0}
.tree-mode-switch button{min-height:40px;display:inline-flex;gap:6px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--surface);color:var(--muted);border:1px solid var(--line);font-size:13px;line-height:1.4}
.tree-mode-switch button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--violet);color:var(--violet)}
.tree-mode-switch svg{width:16px;height:16px}.tree-mode-switch small{margin-inline-start:auto;color:var(--muted);font-size:12px}
.tree-impact .wave-portrait{outline:2px solid var(--violet);outline-offset:calc(3px + var(--impact-strength)*5px)}
.tree-impact .impact-leading .wave-portrait{outline:3px solid var(--gold)}
.wave-node .wave-impact-count{display:flex;justify-content:center;align-items:center;gap:4px;font-size:12px;color:var(--ink);margin-top:5px;white-space:nowrap;line-height:1.5}
.wave-impact-count svg{width:13px;height:13px}.impact-leading .wave-impact-count{color:var(--gold)}
.tree-impact .wave-fold{margin-top:5px}
.impact-detail{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.impact-detail p{font-size:12px;line-height:1.6;color:var(--muted)}
.impact-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.impact-stats>span{font-size:12px;line-height:1.5;border:1px solid var(--line);border-radius:12px;padding:10px;color:var(--muted)}
.impact-stats b{display:block;font-size:20px;color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.impact-lineage{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.impact-lineage button{display:grid;gap:2px;min-height:44px;text-align:start;color:var(--ink);background:var(--accent-soft);padding:7px 10px;border-radius:10px;font-size:12px}
.impact-lineage small{color:var(--muted);font-size:11px}
.impact-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--accent-soft);margin-bottom:18px;font-size:14px;line-height:1.6}
.impact-entry small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.impact-entry .btn{flex-shrink:0;font-size:13px;min-height:44px}
@media(max-width:600px){.impact-entry{align-items:flex-start;flex-direction:column}.tree-mode-switch button{padding:8px;font-size:12px}}