/* Left outline sidebar */
#outline{position:relative;width:260px;flex:none;display:flex;flex-direction:column;gap:6px;padding:10px 6px 8px;overflow:hidden;background:var(--bar);border-right:1px solid var(--bd)}
#ot{flex:1;min-height:0;overflow:auto}
#os{flex:none;margin:0 2px 2px}
.grab{position:absolute;top:0;right:0;bottom:0;width:6px;cursor:col-resize;z-index:5}
.grab:hover,.grab.on{background:var(--accent);opacity:.4}
#outline .sh{padding:2px 8px 6px}
#outline .sh button{width:26px;height:26px;padding:0;border-radius:6px;font-size:16px}
#outline .sh button:hover{background:var(--hover);color:var(--ink)}
/* collapsed: a slim rail with the name written down it */
#outline.collapsed{width:38px!important;padding:8px 0;cursor:pointer}
#outline.collapsed:hover{background:var(--subtle)}
#outline.collapsed>:not(.sh){display:none}
#outline.collapsed .sh{flex-direction:column;gap:10px;padding:0}
#outline.collapsed .sh b{writing-mode:vertical-rl;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.or{display:flex;align-items:center;gap:6px;min-height:28px;padding:4px 8px;border-radius:6px;font-size:13.5px;cursor:pointer}
.or:hover{background:var(--hover)}
.or.cur{background:var(--sel);font-weight:600}
.or i{width:10px;height:10px;flex:none;border-radius:3px}
.ol{flex:1 1 auto;min-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol.empty{color:var(--muted);font-style:italic;font-weight:400}
.oc{width:16px;height:16px;flex:none;padding:0;border:0;background:none;color:var(--muted);font-size:11px}
.or small{color:var(--muted);font-size:12px}
.otg{display:flex;gap:3px;flex-shrink:100;min-width:0;overflow:hidden}
.otg b{white-space:nowrap;padding:1px 6px;border-radius:8px;background:var(--t);color:#fff;font-size:11px;font-weight:500}
.oo,.oe{padding:0 4px;border:0;background:none;color:var(--muted);font-size:16px;line-height:1;opacity:0}
.oe{font-size:13px}
.or:hover .oo,.or:hover .oe,.oe:focus-visible{opacity:1}
.oo:hover,.oe:hover{color:var(--accent)}
/* the top board: a heading over the tree, not a card */
.or.top{margin:0 0 6px;padding:8px 8px 9px;border-bottom:1px solid var(--bd);border-radius:6px 6px 0 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.or.top.cur{color:var(--ink);background:none;border-bottom-color:var(--accent)}
.or.top:hover{background:var(--hover)}
.oh{flex:none;width:16px;text-align:center;font-size:15px;line-height:1;letter-spacing:0;text-transform:none}
/* renaming */
.oren{flex:1 1 auto;min-width:0;height:24px;margin:-2px 0;padding:0 6px;border:1px solid var(--accent);border-radius:5px;background:var(--surface);color:var(--ink);font:inherit;letter-spacing:normal;text-transform:none;outline:none}
.ol.lnk:before{content:"↗ ";color:var(--accent)}
/* search results: the matching bit of a card's notes, under its title */
.or.has-snip{flex-wrap:wrap;row-gap:0}
.osn{flex-basis:100%;min-width:0;margin:0 0 2px 38px;overflow:hidden;color:var(--muted);font-size:12px;white-space:nowrap;text-overflow:ellipsis}
.osn mark{padding:0 1px;border-radius:2px;background:var(--warn-bg);color:var(--ink)}