/* Vertical adaptation of the supplied liquid dock reference.
   Moving pieces use transform/opacity; the SVG contour itself is static. */
.rail-nav{--nav-accent:#a68bfa;--dock-fill:#171b28;--dock-line:#ffffff26;flex-shrink:0;gap:7px;margin-top:0;padding:40px 0 25px;isolation:isolate}
.rail-nav::before{content:"";position:absolute;inset:0 23px 0 8px;border:1px solid var(--dock-line);border-radius:14px;background:var(--dock-fill);box-shadow:inset 0 1px #ffffff09,0 8px 20px #0000001a;z-index:-2;pointer-events:none}
.rail-link{height:61px;flex-shrink:0;gap:7px;color:#b0b6c6;padding:0 20px 0 0;font-size:12px;transition:color 180ms ease}
.rail-link .nav-icon{display:grid;place-items:center;width:29px;height:26px;transition:transform 440ms cubic-bezier(.22,.75,.25,1),opacity 140ms ease}
.rail-link .nav-icon>svg{width:21px;height:21px}
.rail-link:hover:not(.active) .nav-icon{transform:translateX(3px)}
.rail-link.active .nav-icon>svg{opacity:0}
.rail-link.active .nav-icon{transform:translateX(24px)}
.rail-link .nav-label{position:relative;font-size:11px;line-height:15px;font-weight:650;letter-spacing:0;transition:color 180ms ease,transform 300ms cubic-bezier(.22,.75,.25,1)}
.rail-link.active{color:var(--nav-accent)}
.rail-link.active .nav-label{transform:translateY(7px)}
.rail-link:hover:not(.active){color:#f4f6fb}
.rail-link:focus-visible{outline:2px solid var(--nav-accent);outline-offset:-3px;border-radius:15px}
.nav-marker{left:0;right:0;top:0;width:100%;height:61px;background:none;border-radius:0;transition:none;z-index:0;pointer-events:none}
.nav-ready .nav-marker{transition:transform 440ms cubic-bezier(.22,.75,.25,1)}
.nav-marker::after{display:none}
.nav-contour{position:absolute;left:51px;top:-30px;width:64px;height:90px;overflow:visible}
.nav-bump{fill:var(--dock-fill)}
.nav-edge{stroke:var(--dock-line);stroke-width:1}
.nav-light{position:absolute;left:-134px;top:0;width:400px;height:360px;pointer-events:none;z-index:-3;background-color:var(--nav-accent);opacity:.82;mask-image:radial-gradient(ellipse at 50% 50%,#000b 0%,#0008 25%,#0003 48%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000b 0%,#0008 25%,#0003 48%,transparent 72%);transition:none}
.nav-ready .nav-light{transition:transform 570ms cubic-bezier(.22,.75,.25,1),background-color 300ms ease}
.nav-orb{position:absolute;left:44px;top:-2px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background-color:var(--nav-accent);color:#212332;border:1px solid #ffffff42;box-shadow:inset 0 1px 2px #ffffff70,inset 0 -2px 5px #00000017,0 0 16px color-mix(in srgb,var(--nav-accent) 65%,transparent),0 0 46px color-mix(in srgb,var(--nav-accent) 32%,transparent);transition:background-color 300ms ease}
.nav-orb::before{content:"";position:absolute;inset:-5px;border:1px solid color-mix(in srgb,var(--nav-accent) 32%,transparent);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--nav-accent) 22%,transparent) 53%,transparent 73%);z-index:-1}
.nav-orb-glyph,.nav-orb-previous{position:absolute;inset:0;display:grid;place-items:center}
.nav-orb svg{width:21px;height:21px;stroke-width:1.7}
.nav-unread{z-index:3;top:-5px;right:-9px;box-shadow:0 0 0 2px var(--dock-fill);font-size:9px;border-radius:6px}
.rail-link.active .nav-unread{right:-10px;box-shadow:0 0 0 2px var(--dock-fill)}
.rail-end{padding-top:16px;gap:14px}
html[data-theme=dark] .rail-nav{--dock-fill:#111623;--dock-line:#ffffff26}
@media(max-height:760px){.brand{height:59px;min-height:59px}.rail-nav{padding:40px 0 23px;gap:5px}.rail-link{height:55px;gap:3px}.rail-end{gap:10px;padding:12px 0 4px}.rail-end .rail-profile{width:32px;height:32px}}
@media(max-width:800px){.rail-nav{padding:40px 0 23px;gap:6px}.rail-nav::before{left:1px;right:18px;border-radius:14px}.rail-link{padding-right:18px;height:58px;gap:7px;font-size:10px}.rail-link .nav-label{font-size:9px;letter-spacing:-.1px}.rail-link .nav-icon>svg{width:19px;height:19px}.rail-link.active .nav-icon{transform:translateX(16px)}.nav-contour{left:35.5px;width:52px;height:86px}.nav-orb{left:27px;width:38px;height:38px}.nav-orb svg{width:19px;height:19px}.nav-orb::before{inset:-4px}.nav-unread{right:-6px}.rail-link.active .nav-unread{right:-6px}.nav-light{left:-152px}}
@media(max-height:650px){.brand{height:44px;min-height:44px}.brand img{width:29px}.rail-nav{padding:42px 0 23px;gap:2px}.rail-link{height:48px;gap:3px}.rail-end{flex-direction:row;padding:9px 0 0;gap:12px}.rail-end .rail-profile{width:29px;height:29px}.rail-link .nav-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.rail-nav .nav-marker,.rail-nav .nav-light,.rail-link,.rail-link .nav-icon,.rail-link .nav-label,.nav-orb{transition:none!important}}

/* Keep the entire navigation halo behind the workspace frame. */
.rail{position:relative;z-index:1}
.main{position:relative;z-index:2}

/* More room inside the existing rail; workspace/grid geometry stays unchanged. */
.rail-link .nav-label{white-space:nowrap;word-break:normal;flex-shrink:0}
.account,.rail-end .rail-profile{position:relative;overflow:hidden;display:grid;place-items:center;padding:0}
.account-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}