/* ============================================================
   sidebar.css — configurable per-user left menu (sections + DnD)
   ============================================================ */
.ws__side{display:flex;flex-direction:column}

/* collapsed rail */
.ws--rail{grid-template-columns:64px 1fr}
.ws__side--rail{padding:12px 8px;align-items:center;gap:6px}
.rail__toggle{align-self:center}
.rail{display:flex;flex-direction:column;gap:6px;align-items:center;overflow:auto;flex:1;width:100%;padding-top:4px}
.rail__item{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid transparent;background:transparent;display:grid;place-items:center;flex:none}
.rail__item:hover{background:var(--sink)}
.rail__item--on{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-1)}
.rail__item .avatar{width:32px;height:32px;border-radius:9px}
.rail__lock{position:absolute;right:2px;bottom:2px;width:15px;height:15px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.rail__add{color:var(--muted);border:1px dashed var(--line-2)}
.rail__add:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-tint)}
.ws__sidehd{display:flex;align-items:center;gap:6px;padding:0 2px 4px}
.ws__sidehd .ws__wsname{flex:1;padding:6px 6px}
.btn--icon.is-on{background:var(--accent-tint);color:var(--accent-ink)}

.navscroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px}
.ws__sidefoot{display:flex;flex-direction:column;gap:4px;padding-top:8px;margin-top:6px;border-top:1px solid var(--line)}

.navsec{display:flex;flex-direction:column;gap:2px;border-radius:var(--radius-sm)}
.navsec--dragging{opacity:.4}
.navsec__hd{display:flex;align-items:center;gap:4px;padding:9px 4px 3px}
.navsec__title{display:flex;align-items:center;gap:6px;border:none;background:transparent;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:2px 4px;border-radius:5px;width:100%;text-align:left}
.navsec__title:hover{color:var(--ink-2)}
.navsec__chev{transition:transform .15s ease;flex:none;color:var(--muted)}
.navsec__name{flex:1;min-width:0;border:none;background:var(--sink);border-radius:var(--radius-xs);padding:5px 8px;font-size:.82rem;font-weight:600}
.navsec__name:focus{outline:none;background:var(--accent-tint)}
.navsec__grip,.navitem__grip{color:var(--line-2);cursor:grab;display:grid;place-items:center;padding:2px;border-radius:5px;touch-action:none;flex:none}
.navsec__grip:hover,.navitem__grip:hover{color:var(--muted);background:var(--sink)}
.navsec__grip:active,.navitem__grip:active{cursor:grabbing}
.navsec__del{flex:none}
.navsec__list{display:flex;flex-direction:column;gap:3px}
.navsec__empty{color:var(--muted);font-size:.78rem;padding:8px 10px;border:1px dashed var(--line-2);border-radius:var(--radius-xs);margin:2px 0}

.navitem--dragging{opacity:.4}
.navitem__grip{margin-right:2px}
.navitem__edit{margin-left:auto;display:grid;place-items:center;padding:3px;border-radius:5px;flex:none}

.navslot{height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);margin:2px 4px}
.navslot--sec{height:3px;margin:4px 4px}
.nav-ghost{border-radius:var(--radius-xs);background:var(--surface);border:1px solid var(--accent);padding:2px}