/* the column beside the paper (Tree.astro): the page's title, then a list with a raised
header per section and its entries folded under it. prose pages and configuration share it. */
.side {
position: sticky; top: var(--head-h); min-width: 0;
display: flex; flex-direction: column; gap: 6px;
max-height: calc(100vh - var(--head-h) - var(--foot-h));
}
.side-title {
flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px;
font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--text); text-decoration: none; text-shadow: var(--emboss);
border-radius: var(--r-box);
}
.side-title .icon { filter: var(--icon-rim) drop-shadow(1px 1px 0 var(--icon-shadow)); }
.side-title .k { min-width: 0; overflow-wrap: anywhere; }
.side-title:hover { background: var(--chrome-hover); }
.list {
min-height: 0; overflow: auto; overflow-x: hidden; padding: 2px;
background: var(--sheet);
border: 1px solid var(--edge); border-radius: var(--r-box);
box-shadow: var(--well-edge);
}
.tree { padding: 0; outline: none; }
.tree:focus-visible { box-shadow: var(--well-edge), 0 0 0 1px var(--focus); }
.tree a, .tree .gh { display: flex; align-items: baseline; gap: 8px; color: var(--text); text-decoration: none; }
.tree a { padding: 2px 8px 2px 14px; font-size: 12.5px; }
.tree a:hover { background: var(--hover); }
.tree .k { min-width: 0; overflow-wrap: anywhere; }
.tree .d { flex: 1; min-width: 0; text-align: right; font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree.mono .kids .k { flex: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }
/* section headers */
.tree .gh {
align-items: center; gap: 0;
text-shadow: var(--emboss);
background: var(--grad-header);
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.tree .gh a { flex: 1; min-width: 0; padding: 3px 8px 3px 4px; font-weight: 700; }
.tree .gh .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tree .n { font-weight: 400; font-size: 11px; color: var(--faint); }
.tree .tri { all: unset; flex: none; width: 16px; align-self: stretch; display: grid; place-items: center; cursor: pointer; }
.tree .tri::before { content: ""; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--glyph); transition: transform 0.12s; }
.tree .tri:focus-visible { outline: 1px dotted var(--text); outline-offset: -3px; }
.tree .tri.none::before { display: none; }
.tree .grp.open .tri::before { transform: rotate(90deg); }
:root[data-js] .tree .grp .kids { display: none; }
:root[data-js] .tree .grp.open .kids { display: block; }
:root:not([data-js]) .tree .tri { display: none; }
/* the selection; a selected header lights its whole row, triangle included */
.tree .sel, .tree .sel:hover { background: var(--grad-select); color: var(--on-select); text-shadow: var(--emboss-select); }
.tree .sel .d, .tree .sel .n { color: var(--on-select); }
.tree .gh:has(> .sel) { background: var(--grad-select); border-color: var(--select-end); }
.tree .gh > a.sel { background: none; }
.tree .gh:has(> .sel) .tri::before { border-left-color: var(--on-select); }