/* 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-foot{padding:var(--s-3) var(--s-5);border-top:1px solid var(--t-line);font-size:12px;color:var(--t-faint)}

/* staff inline editing */
/* Confluence puts creating a page in the Contents panel, not the top bar */
.tree-new-form{margin:0}
.tree-new{display:flex;align-items:center;gap:var(--s-2);width:calc(100% - var(--s-6));height:34px;
    margin:0 var(--s-3) var(--s-2);padding:0 var(--s-3);border:0;border-radius:9px;
    background:var(--t-blue-bg);color:var(--t-blue);font:inherit;font-size:13.5px;font-weight:600;
    text-align:left;cursor:pointer;text-decoration:none;transition:filter var(--d-fast) var(--t-ease)}
.tree-new:hover{filter:brightness(.96)}
.tree-new svg{width:16px;height:16px;flex:none}

.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}
.tree-node.hidden-cat>.tree-row .tree-label{opacity:.5}
.tree-node.hidden-cat>.tree-row::after{content:'';width:13px;height:13px;margin-right:8px;flex:none;background:currentColor;opacity:.45;-webkit-mask:var(--eye-off) center/13px no-repeat;mask:var(--eye-off) center/13px no-repeat}
.tree{--eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10.7 5.1A11 11 0 0 1 12 5c7 0 10 7 10 7a13.2 13.2 0 0 1-1.7 2.7'/%3E%3Cpath d='M6.6 6.6A13.5 13.5 0 0 0 2 12s3 7 10 7a10 10 0 0 0 5.4-1.6'/%3E%3Cpath d='m2 2 20 20'/%3E%3Cpath d='M14.1 14.1a3 3 0 0 1-4.2-4.2'/%3E%3C/svg%3E")}
.tree-rename{flex:1;min-width:0;height:24px;border:1px solid var(--t-blue);border-radius:6px;padding:0 6px;font:inherit;font-size:13.5px;color:var(--t-text);background:#fff;outline:0}
.tree-menu{position:fixed;z-index:200;min-width:200px;padding:6px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14),0 0 1px rgba(0,0,0,.2);animation:tree-in .12s var(--t-ease)}
.tree-menu[hidden]{display:none}
.tree-menu button{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:13.5px;color:var(--s-text);cursor:pointer;text-align:left}
.tree-menu button:hover{background:var(--s-row)}
.tree-menu button[data-a=del]{color:#E03131} .tree-menu button svg{width:15px;height:15px;color:var(--s-faint)}
.tree-menu button[data-a=del] svg{color:#E03131}

/* Row actions (staff). They float over the row's right edge rather than taking space, and
   they wait a beat before fading in: appearing instantly, they flashed at every row a
   passing pointer crossed, and pushing the count out shifted the row as well. */
.tree-acts{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;gap:2px;
    opacity:0;pointer-events:none;transition:opacity .12s ease-out}
.tree-row:hover .tree-acts{opacity:1;pointer-events:auto;transition-delay:.22s}
.tree-row:focus-within .tree-acts,.tree-row:has(.tree-act:focus-visible) .tree-acts{opacity:1;pointer-events:auto;transition-delay:0s}
.tree-act{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;border-radius:6px;background:var(--t-bg);color:var(--t-sub);cursor:pointer;padding:0}
.tree-act:hover{background:rgba(0,0,0,.08);color:var(--t-text)}
.tree-act svg{width:15px;height:15px}

/* drag & drop */
/* draggable, but a link first — Confluence shows a pointer here, not the grab hand */
.tree-node[draggable=true] .tree-row{cursor:pointer}
.tree-node.dragging{opacity:.4}
.tree-row.drop-into{background:var(--t-blue-bg);box-shadow:inset 0 0 0 2px var(--t-blue)}
.tree-row.drop-before,.tree-row.drop-after{position:relative}
/* the drop line carries a terminal dot at its leading edge, the way Atlassian draws it */
.tree-row.drop-before::after,.tree-row.drop-after::after{content:'';position:absolute;left:calc(var(--depth) * 18px + 3px);right:4px;height:2px;border-radius:2px;background:var(--t-blue);box-shadow:-3px 0 0 1px var(--t-blue)}
.tree-row.drop-before::after{top:-1px} .tree-row.drop-after::after{bottom:-1px}

/* move toast */
.tree-toast{position:fixed;left:var(--s-6);bottom:var(--s-6);z-index:210;display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.16),0 0 1px rgba(0,0,0,.2);font-size:13.5px;color:var(--s-text);animation:tree-in .16s var(--t-ease)}
.tree-toast[hidden]{display:none}
.tree-toast svg{width:16px;height:16px;color:#1BA345}
.tree-toast button{border:0;background:none;color:var(--s-blue);font:inherit;font-weight:600;cursor:pointer;padding:0 2px}

/* 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}
.tree-row:hover:has(.tree-acts) .tree-count{opacity:0;transition-delay:.22s}

/* ---------------------------------------------------------------------------
   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}
}