/* tree.css — the tree STAGE (plate + vector overlay + HTML panels/pills/badges) used on Home and Explore.
   Every item is positioned in art pixels: left = --x * --su. Change --x/--y/--w in tree-model.json. */
.stage{position:relative;width:calc(1672*var(--su));height:calc(941*var(--su));--panel-color:var(--accent-cyan)}
.stage-art{position:absolute;inset:0;overflow:hidden}
.stage-plate,.hero-overlay{position:absolute;left:0;top:0;width:calc(1672*var(--su));height:calc(941*var(--su));max-width:none}
.stage-plate{user-select:none;pointer-events:none}
.hero-overlay{pointer-events:none;overflow:visible}
.stage-ui{position:absolute;inset:0;z-index:2}
.stage-list{list-style:none;margin:0;padding:0}
.stage-item{position:absolute;left:calc(var(--x)*var(--su));top:calc(var(--y)*var(--su));width:calc(var(--w)*var(--su));min-height:calc(var(--h)*var(--su));
  color:var(--text-0);text-decoration:none;transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease)}
/* ---- glass panels (branches) ---- */
.panel-people{--panel-color:var(--branch-people)} .panel-content{--panel-color:var(--branch-content)} .panel-business{--panel-color:var(--branch-business)}
.panel-ideas{--panel-color:var(--branch-ideas)} .panel-tools{--panel-color:var(--branch-tools)}
.stage-panel{display:flex;flex-direction:column;justify-content:center;gap:calc(7*var(--su));padding:calc(6*var(--su)) calc(22*var(--su)) calc(8*var(--su)) calc(32*var(--su));
  border-radius:calc(20*var(--su));isolation:isolate;transform:perspective(calc(1000*var(--su))) rotateY(calc(var(--tilt,0)*1deg));transform-origin:50% 50%}
.panel-shell{position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(160deg,color-mix(in srgb,var(--panel-color) 30%,transparent) 0%,rgba(16,52,80,.5) 46%,rgba(10,32,58,.6) 100%);
  border:max(1px,calc(1.5*var(--su))) solid color-mix(in srgb,var(--panel-color) 60%,#fff 15%);
  box-shadow:0 0 calc(16*var(--su)) color-mix(in srgb,var(--panel-color) 38%,transparent),inset 0 0 calc(18*var(--su)) color-mix(in srgb,var(--panel-color) 24%,transparent),inset 0 max(1px,calc(1*var(--su))) 0 rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(calc(7*var(--su))) saturate(1.3);backdrop-filter:blur(calc(7*var(--su))) saturate(1.3);
  transition:border-color var(--dur-fast),box-shadow var(--dur-med),background var(--dur-med)}
.panel-row{display:flex;align-items:center;gap:calc(26*var(--su))}
.panel-icon{width:calc(33*var(--su));height:calc(33*var(--su));flex:none;filter:drop-shadow(0 0 calc(6*var(--su)) color-mix(in srgb,var(--panel-color) 70%,transparent))}
.panel-title{font-size:max(12px,calc(18.6*var(--su)));font-weight:400;letter-spacing:.01em;line-height:1.1;text-shadow:0 0 calc(10*var(--su)) rgba(255,255,255,.35)}
.panel-subtitle{font-size:max(8.5px,calc(9.7*var(--su)));letter-spacing:.2em;text-transform:uppercase;color:rgba(235,248,255,.9);line-height:1.25;
  /* V1.0.1: when the 8.5px legibility floor is active (small desktop/tablet stages) the letters tighten and the line may use the
     panel's right padding, so the subtitle stays on one line like the art. At full size this resolves to exactly .2em / 0 change. */
  letter-spacing:clamp(0px,calc(8.3*var(--su) - 0.543*max(8.5px,calc(9.7*var(--su)))),.2em);margin-right:calc(-18*var(--su))}
.stage-panel:hover .panel-shell,.stage-panel:focus-visible .panel-shell,.stage-panel.is-hot .panel-shell{
  border-color:color-mix(in srgb,var(--panel-color) 70%,#fff 30%);
  background:linear-gradient(160deg,color-mix(in srgb,var(--panel-color) 42%,transparent) 0%,rgba(20,62,94,.58) 46%,rgba(12,38,66,.66) 100%);
  box-shadow:0 0 calc(26*var(--su)) color-mix(in srgb,var(--panel-color) 60%,transparent),inset 0 0 calc(22*var(--su)) color-mix(in srgb,var(--panel-color) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.45)}
.stage-panel:hover,.stage-panel:focus-visible,.stage-panel.is-hot{transform:perspective(calc(1000*var(--su))) rotateY(calc(var(--tilt,0)*1deg)) translateY(calc(-3*var(--su)))}
/* ---- root pills ---- */
.stage-pill{display:flex;align-items:center;gap:calc(18*var(--su));padding:0 calc(20*var(--su)) 0 calc(19*var(--su));border-radius:999px;
  background:var(--surface-pill);border:max(1px,calc(1.4*var(--su))) solid rgba(100,205,220,.62);
  box-shadow:0 0 calc(12*var(--su)) rgba(70,200,220,.3),inset 0 0 calc(10*var(--su)) rgba(80,200,230,.12);
  font-size:max(11px,calc(13.6*var(--su)));transition:border-color var(--dur-fast),box-shadow var(--dur-med),opacity var(--dur-med),transform var(--dur-med)}
.pill-icon{width:calc(24*var(--su));height:calc(24*var(--su));flex:none}
.stage-pill:hover,.stage-pill:focus-visible,.stage-pill.is-hot{border-color:rgba(190,250,255,.95);box-shadow:0 0 calc(20*var(--su)) rgba(110,230,245,.55),inset 0 0 calc(12*var(--su)) rgba(110,220,245,.22);transform:translateY(calc(-2*var(--su)))}
/* ---- badges ---- */
.stage-badge{display:flex;align-items:center;gap:calc(14*var(--su));font-size:max(8.5px,calc(10.6*var(--su)));letter-spacing:.16em;text-transform:uppercase;color:var(--text-1)}
.badge-right{flex-direction:row-reverse;text-align:right}
.badge-icon{width:calc(44*var(--su));height:calc(44*var(--su));padding:calc(10*var(--su));border-radius:50%;flex:none;
  border:max(1px,calc(1.2*var(--su))) solid rgba(140,225,245,.55);background:rgba(8,26,44,.5);box-shadow:0 0 calc(12*var(--su)) rgba(90,210,235,.35);transition:box-shadow var(--dur-med),border-color var(--dur-fast)}
.badge-text{display:flex;flex-direction:column;gap:calc(5*var(--su));line-height:1.15;white-space:nowrap}
.stage-badge:hover .badge-icon,.stage-badge:focus-visible .badge-icon,.stage-badge.is-hot .badge-icon{border-color:#fff;box-shadow:0 0 calc(22*var(--su)) rgba(130,230,250,.7)}
.stage-badge:hover,.stage-badge.is-hot{color:#fff}
/* ---- trunk core ---- */
.stage-trunk{display:flex;flex-direction:column;align-items:center;text-align:center}
.trunk-logo{width:calc(46*var(--su));height:calc(52*var(--su));filter:drop-shadow(0 0 calc(8*var(--su)) rgba(140,230,255,.6))}
.trunk-title{white-space:nowrap;margin-top:calc(5*var(--su));font-size:max(8.5px,calc(11.4*var(--su)));letter-spacing:.17em;text-transform:uppercase;color:#f2f8ff}
.trunk-lines{display:flex;flex-direction:column;align-items:center;white-space:nowrap;gap:calc(4.4*var(--su));margin-top:calc(12*var(--su));font-size:max(8px,calc(9.6*var(--su)));letter-spacing:.13em;text-transform:uppercase;color:var(--text-trunk);line-height:1.2}
.stage-trunk:hover .trunk-title,.stage-trunk.is-hot .trunk-title{text-shadow:0 0 12px rgba(160,235,255,.9)}
/* ---- seed ---- */
.stage-seed{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;border-radius:calc(48*var(--su))}
.seed-caption{display:flex;flex-direction:column;align-items:center;white-space:nowrap;gap:calc(4*var(--su));padding-bottom:calc(4*var(--su));font-size:max(8.5px,calc(11*var(--su)));letter-spacing:.22em;text-transform:uppercase;color:#e8eef8}
.stage-seed:hover .seed-caption,.stage-seed.is-hot .seed-caption{color:#fff;text-shadow:0 0 12px rgba(255,220,160,.9)}
/* ---- overlay SVG states ---- */
.hero-overlay .cai-path{stroke-opacity:0;transition:stroke-opacity var(--dur-med) var(--ease)}
.hero-overlay .cai-path.is-hot{stroke-opacity:.9;filter:url(#glow_soft)}
.hero-overlay .cai-path.is-related{stroke-opacity:.38}
.hero-overlay .cai-flow{fill:none;stroke-width:3.4;stroke-linecap:round;opacity:0;filter:url(#glow_soft);mix-blend-mode:screen}
.hero-overlay .cai-flow.flow-orbit{stroke-width:2}
.cai-node .node-halo{opacity:.6;transition:opacity var(--dur-med)}
.cai-node .node-ring{transition:stroke-width var(--dur-med)}
.cai-node.is-hot .node-halo{opacity:1}
.cai-node.is-hot .node-ring{stroke-width:3.6}
.cai-rootnode{opacity:.65;transition:opacity var(--dur-med)}
.cai-rootnode.is-hot{opacity:1}
.seed-halo,.core-halo{mix-blend-mode:screen;opacity:.6;transform-box:fill-box;transform-origin:center}
.seed-light{mix-blend-mode:screen;opacity:.5}
.canopy-shimmer{opacity:0;mix-blend-mode:screen}
.focus-dim{opacity:0;transition:opacity var(--dur-slow) var(--ease);pointer-events:none}
.stage.is-focusing .focus-dim{opacity:.52}
.stage.is-focusing .stage-item:not(.is-hot):not(.is-related){opacity:.45}
.stage.is-focusing .stage-item.is-related{opacity:.85}
/* context overlay (Guide Me constellations) */
.hero-overlay .constellation-line{fill:none;stroke:#e8fbff;stroke-width:1.6;stroke-dasharray:6 7;stroke-opacity:.8;filter:url(#glow_soft)}
.hero-overlay .constellation-star{fill:#fff;filter:url(#glow_soft)}

/* ================= EXPLORE page ================= */
.explore-layout{margin-top:var(--s-4)}
.page-wide{max-width:1560px}
.page-explore .page-hero{padding-bottom:var(--s-4);margin-bottom:var(--s-4)}
.explore-stage-wrap{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line-soft);background:var(--bg-0);container-type:inline-size}
.explore-stage-wrap .stage{--su:calc(min(100vw - 2*var(--gutter), 1100px) / 1672)}
@supports (width:1cqw){.explore-stage-wrap .stage{--su:calc(100cqw / 1672)}}
.explore-stage-wrap .stage-panel{cursor:pointer}
.explore-panel{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.node-detail{padding:var(--s-5);border-radius:var(--r-lg);border:1px solid var(--line-glass);background:var(--surface-card-hi);box-shadow:var(--glow-subtle)}
.node-detail h2{font-size:var(--fs-xl);margin:var(--s-2) 0}
.node-detail .detail-tag{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-2)}
.node-detail .detail-summary{margin:var(--s-3) 0}
.node-detail .detail-state-words{font-size:var(--fs-sm);color:var(--text-2)}
.node-detail .chip-list{margin:var(--s-3) 0 var(--s-4)}
.node-detail .detail-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.guide-note{display:none;margin-bottom:var(--s-4);padding:var(--s-4) var(--s-5);border-radius:var(--r-md);border:1px solid var(--line-glass);background:rgba(16,40,66,.7)}
.guide-note.is-on{display:block}
.guide-note .guide-q{color:#fff;font-size:var(--fs-lg)}
.tree-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-5);margin-top:var(--s-4)}
.tree-group h3{font-size:var(--fs-sm);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-2);margin-bottom:var(--s-3)}
.tree-group ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tree-group a{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:44px;padding:6px 0;text-decoration:none;color:var(--text-0)}
.tree-group a:hover .tl-label{text-decoration:underline}
.tl-tag{font-size:var(--fs-xs);color:var(--text-3);letter-spacing:.06em}
@media (min-width:1100px){
  .explore-stage-wrap{overflow:hidden}
  .explore-panel{position:absolute;left:1.8%;top:6%;width:26.5%;max-height:88%;overflow:auto;margin:0;z-index:6;scrollbar-width:thin}
  .explore-panel .node-detail,.explore-panel .guide-note{background:rgba(8,20,38,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .explore-panel .node-detail{padding:var(--s-4) var(--s-5)}
  .explore-panel .node-detail h2{font-size:var(--fs-lg)}
  .explore-panel .guide-note{margin:0}
}
/* ---- branch colors come from tokens.css (change --branch-business there to recolor the whole branch:
        energy path, node ring and panel accent). The SVG keeps its own colors for Illustrator. ---- */
#path_branch_people,#node_people .node-ring,#node_people .node-ring-outer{stroke:var(--branch-people)}
#path_branch_content,#node_content .node-ring,#node_content .node-ring-outer{stroke:var(--branch-content)}
#path_branch_business,#node_business .node-ring,#node_business .node-ring-outer{stroke:var(--branch-business)}
#path_branch_ideas,#node_ideas .node-ring,#node_ideas .node-ring-outer{stroke:var(--branch-ideas)}
#path_branch_tools,#node_tools .node-ring,#node_tools .node-ring-outer{stroke:var(--branch-tools)}
.hero-overlay .cai-root{stroke:var(--root-color)}