/* Mind Palace rail: the one sidebar shared by the hub (/) and every sub-app (/library/).
   Both pages load this file and carry the same rail markup, so the sidebar is one thing.
   Needs the Sleek tokens (--surface-2, --line, --ink, --ink2, --ink3, --line-soft, --r-sm,
   --t-fast, --ease, --font), which both apps define. */

/* Same-origin page loads between hub and sub-apps cross-fade, and the rail holds still
   (it carries one shared name). Browsers without cross-document View Transitions just load. */
@view-transition { navigation: auto; }

.rail{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--surface-2);border-right:1px solid var(--line);
  padding:20px 12px;display:flex;flex-direction:column;gap:2px;view-transition-name:mp-rail}
.rail .brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;font:700 16px/1 var(--font);color:var(--ink);
  text-decoration:none;letter-spacing:-.01em}
.rail .brand svg{width:34px;height:34px;flex:none}
.rail .glabel{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding:16px 10px 6px}
.rail .nav{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--ink2);font:600 15px/1.5 var(--font);text-align:left;text-decoration:none;cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.rail .nav:hover{color:var(--ink);background:var(--line-soft)}
.rail .nav[aria-current="page"],.rail .nav[aria-current="page"]:hover{background:var(--ink);color:#fff}
.rail .nav:disabled{color:var(--ink3);background:transparent;cursor:default}
.rail .nav:disabled .count{color:var(--ink2)}
.rail .nav .count{margin-left:auto;font-size:12.5px;font-weight:600}
.rail .rail-lock{margin-top:auto}
@media(max-width:860px){.rail{display:none}}