/* Page tree — Confluence structure (chevron · dot · icon · label, 32px rows, active bar) with Toss-style surfaces. */
.tree{
    --t-bg:#FBFCFD; --t-row:var(--s-row); --t-blue:var(--s-blue); --t-blue-bg:var(--s-blue-bg);
    --t-text:var(--s-text); --t-sub:var(--s-sub); --t-faint:#B0B8C1; --t-line:var(--s-line);
    --t-ease:var(--s-ease);
    background:var(--t-bg);border-right:1px solid var(--t-line)
}
.tree-head{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 var(--s-2) 0 var(--s-4);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t-faint)}
.tree-collapse{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:9px;background:none;color:var(--t-sub);cursor:pointer;transition:background var(--d-fast) var(--t-ease),transform var(--d-fast) var(--t-ease)}
.tree-collapse:hover{background:var(--t-row);color:var(--t-text)}
.tree-collapse:active{transform:scale(.92)}
.tree-collapse svg{width:16px;height:16px}

.tree-filter{display:flex;align-items:center;gap:var(--s-2);margin:0 var(--s-3) var(--s-3);padding:0 var(--s-3);height:36px;border:1px solid transparent;border-radius:11px;background:var(--t-row);color:var(--t-sub);transition:background var(--d-fast) var(--t-ease),border-color var(--d-fast) var(--t-ease)}
.tree-filter:focus-within{background:#fff;border-color:var(--t-blue)}
.tree-filter svg{width:15px;height:15px;flex:none}
.tree-filter input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13px;color:var(--t-text);outline:0}
.tree-filter input::placeholder{color:var(--t-faint)}

.tree-list,.tree-children{list-style:none;margin:0;padding:0}
.tree-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--s-2) var(--s-6)}
.tree-list::-webkit-scrollbar{width:8px}
.tree-list::-webkit-scrollbar-thumb{background:#DDE1E6;border-radius:var(--r-pill);border:2px solid var(--t-bg)}
.tree-list:hover::-webkit-scrollbar-thumb{background:#C6CCD3}
/* Branches open and close by height. display:none cannot be transitioned, so closing used
   to snap shut while opening faded in — the two halves of the same gesture did not match. */
.tree-children{display:block;overflow:hidden;height:0}
.tree-node.open>.tree-children{height:auto}
@keyframes tree-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.tree-node.hit-miss{display:none}

.tree-row{position:relative;display:flex;align-items:center;height:32px;padding-left:calc(var(--depth) * 18px);border-radius:8px;font-size:13.5px;color:var(--t-text)}
.tree-row:hover{background:var(--t-row)}
.tree-row:active{background:#E8EBED}
.tree-row:has(.current){background:var(--t-blue-bg);color:var(--t-blue);font-weight:600}

/* One slot holds the bullet and the chevron, the way Confluence's tree does: every row
   shows a dot, and a row that can open trades it for the chevron under the pointer.
   Showing both at once gave each row two markers before its icon. */
.tree-toggle{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:1px;border:0;border-radius:7px;background:none;color:var(--t-faint);cursor:pointer;padding:0;transition:background var(--d-fast) var(--t-ease),color var(--d-fast) var(--t-ease)}
.tree-toggle:hover{background:rgba(0,0,0,.06);color:var(--t-text)}
.tree-toggle::before{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;transition:opacity var(--d-fast) var(--t-ease)}
.tree-toggle svg{width:15px;height:15px;opacity:0;transition:transform var(--d-base) cubic-bezier(.34,1.5,.64,1),opacity var(--d-fast) var(--t-ease)}
.tree-row:hover .tree-toggle svg,.tree-node.open>.tree-row .tree-toggle svg{opacity:1}
.tree-row:hover .tree-toggle::before,.tree-node.open>.tree-row .tree-toggle::before{opacity:0}
.tree-node.open>.tree-row .tree-toggle svg{transform:rotate(90deg)}
/* a leaf keeps the slot — and the dot — but nothing to open */
.tree-toggle[hidden]{display:inline-flex;visibility:visible;pointer-events:none}
.tree-toggle[hidden] svg{display:none}
.tree-row:has(.current) .tree-toggle{color:var(--t-blue)}

.tree-icon,svg.tree-icon,img.tree-icon{flex:none;width:16px;height:16px;margin:0 7px 0 3px;color:var(--t-sub);object-fit:contain;transition:color var(--d-fast) var(--t-ease),transform var(--d-fast) var(--t-ease)}
.tree-row:hover img.tree-icon{transform:scale(1.12)}
.tree-node[data-kind=cat]>.tree-row .tree-icon{color:var(--s-faint)}
.tree-row:hover svg.tree-icon,.tree-row:has(.current) svg.tree-icon{color:var(--t-blue)}

.tree-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;text-decoration:none;line-height:20px;padding-right:var(--s-2)}
.tree-node[data-kind=cat]>.tree-row .tree-label{font-weight:600}
.tree-label:focus-visible{outline:2px solid var(--t-blue);outline-offset:-2px;border-radius:8px}
.tree-label .status{margin-left:var(--s-1)}

.tree-add{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:9px;background:none;color:var(--t-sub);cursor:pointer;transition:background var(--d-fast) var(--t-ease),transform var(--d-fast) var(--t-ease)}
.tree-add:hover{background:var(--t-row);color:var(--t-text)} .tree-add:active{transform:scale(.92)} .tree-add svg{width:16px;height:16px}


/* subtree post count — hides on hover so the row's action buttons have room */
.tree-count{flex:none;margin-right:var(--s-1);font-size:11px;font-weight:600;color:var(--t-sub);
    font-variant-numeric:tabular-nums;opacity:.75}
/* the count fades out under the buttons on the same beat, so nothing moves */
.tree-count{transition:opacity .12s ease-out}

/* ---------------------------------------------------------------------------
   Splitter — Confluence's, measured off it: a 17px hit strip over the border that
   shows a 3px #1868DB bar while you are on it, with the tooltip it carries. The
   width itself never transitions (that would lag the pointer); only collapsing does.
---------------------------------------------------------------------------- */
.tree-splitter{position:absolute;top:0;right:-8px;width:17px;height:100%;z-index:46;
    display:flex;align-items:stretch;justify-content:center;cursor:ew-resize}
.tree-splitter > span:first-child{width:3px;background:var(--t-blue);opacity:0;
    transition:opacity var(--d-fast) var(--t-ease)}
/* the strip reaches 8px into the content, so a pointer merely crossing the edge used to
   flash the bar; it now waits, and only a deliberate rest on the edge shows it */
.tree-splitter:hover > span:first-child{opacity:1;transition-delay:.28s}
.tree-splitter:focus-visible > span:first-child,
body.tree-sizing .tree-splitter > span:first-child{opacity:1;transition-delay:0s}
.tree-splitter:focus-visible{outline:none}
.tree-splitter-tip{position:absolute;top:50%;right:calc(100% + 6px);transform:translateY(-50%);max-width:none;
    display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:4px;
    background:#1E1F21;color:#fff;font-size:12px;line-height:1;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity var(--d-base) var(--t-ease)}
.tree-splitter-tip kbd{padding:2px 5px;border-radius:3px;background:rgba(255,255,255,.16);
    font:inherit;font-size:11px}
.tree-splitter:hover .tree-splitter-tip{opacity:1;transition-delay:.5s}
body.tree-sizing .tree-splitter-tip{opacity:0!important}
body.tree-sizing{cursor:ew-resize;user-select:none}
@media (max-width:1023px){.tree-splitter{display:none}}

/* Motion, at Confluence's timings: rows tint in 0.1s ease-out, revealed content
   fades over 0.3s ease. The tree only animates its width when it collapses. */
/* the tint fades in but drops instantly on leave: with a fade-out too, a fast pass down the
   list left a trail of half-grey rows behind the pointer */
.tree-row{transition:none}
.tree-row:hover{transition:background .1s ease-out}
body.tree-sizing .tree{transition:none}
@keyframes tree-in{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.tree-children.is-animating{transition:height .22s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){
    .tree,.tree-row,.tree-splitter > span:first-child,.tree-splitter-tip{transition:none}
    .tree-children.is-animating{transition:none}
    .tree-toggle svg{transition:none}
}