/* Phantom Navigation Run 3 */
.sidebar-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.sidebar-head .brand{flex:1;min-width:0}
.sidebar-collapse-toggle{width:42px;height:42px;flex:0 0 42px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface) 84%,transparent));display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px rgba(6,14,28,.16),inset 0 1px rgba(255,255,255,.1);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.sidebar-collapse-toggle:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--surface-2)),color-mix(in srgb,var(--surface) 90%,transparent))}
.sidebar-collapse-toggle img{width:20px;height:20px;display:block}
.new-ask{justify-content:flex-start;padding-left:12px;padding-right:12px;gap:10px}
.new-ask .new-ask-label{display:inline-flex;align-items:center;gap:4px;min-width:0}
.nav-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:11px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--bg) 95%,transparent));box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 18px rgba(6,14,28,.12)}
.nav-icon img{width:18px;height:18px;display:block;filter:drop-shadow(0 0 10px rgba(117,133,255,.22))}
.nav-icon-ask{background:linear-gradient(180deg,rgba(118,93,248,.24),rgba(62,157,245,.15));border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.nav-item{position:relative;gap:10px;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.nav-item:hover{transform:translateX(2px)}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon,.nav-link:hover .nav-icon{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,var(--surface-2)),color-mix(in srgb,var(--accent-2) 8%,var(--surface)));box-shadow:inset 0 1px rgba(255,255,255,.14),0 12px 26px rgba(10,18,40,.16)}
.nav-link:hover{text-decoration:none}
.nav-item em{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.sidebar-collapsed{--sidebar:96px}
.sidebar-collapsed .sidebar .brand{justify-content:center}
.sidebar-collapsed .sidebar-head{display:grid;justify-items:center;gap:10px}
.sidebar-collapsed .sidebar .nerddi-master-brand>span,
.sidebar-collapsed .sidebar .new-ask-label,
.sidebar-collapsed .sidebar .nav-section-label,
.sidebar-collapsed .sidebar .nav-item b,
.sidebar-collapsed .sidebar .sidebar-network-links,
.sidebar-collapsed .sidebar .profile-button>span:not(.avatar),
.sidebar-collapsed .sidebar .profile-chevron{display:none!important}
.sidebar-collapsed .sidebar{padding-left:12px;padding-right:12px}
.sidebar-collapsed .sidebar .brand-emblem{margin:0}
.sidebar-collapsed .sidebar .new-ask{width:52px;height:52px;min-height:52px;padding:0;justify-content:center;margin-left:auto;margin-right:auto;border-radius:18px}
.sidebar-collapsed .sidebar .new-ask .nav-icon{width:34px;height:34px}
.sidebar-collapsed .sidebar .new-ask .nav-icon img{width:20px;height:20px}
.sidebar-collapsed .sidebar .nav-list{justify-items:center;overflow:visible}
.sidebar-collapsed .sidebar .nav-section{width:100%;display:grid;justify-items:center}
.sidebar-collapsed .sidebar .nav-item,
.sidebar-collapsed .sidebar .nav-link{width:52px;min-height:52px;padding:0;display:grid;grid-template-columns:1fr;place-items:center;border-radius:18px}
.sidebar-collapsed .sidebar .nav-item:hover,.sidebar-collapsed .sidebar .nav-link:hover{transform:none}
.sidebar-collapsed .sidebar .nav-icon{width:34px;height:34px;border-radius:13px}
.sidebar-collapsed .sidebar .nav-icon img{width:20px;height:20px}
.sidebar-collapsed .sidebar .nav-item em{top:8px;right:7px;transform:none}
.sidebar-collapsed .sidebar .profile-button{width:52px;height:52px;padding:0!important;display:grid;place-items:center;margin-inline:auto}
.sidebar-collapsed .sidebar .avatar{width:36px;height:36px}
.sidebar-collapsed .sidebar-foot{display:grid;justify-items:center;gap:10px}
.sidebar-collapsed .sidebar-collapse-toggle{transform:rotate(180deg)}
.sidebar-collapsed .main-column .top-product-brand small{display:none}
.sidebar .nav-item[title],.sidebar .new-ask[title],.sidebar .nav-link[title]{position:relative}
@media (min-width:821px){
  .sidebar{transition:padding .22s ease,box-shadow .22s ease}
  .app-shell{transition:grid-template-columns .22s ease}
}
@media (max-width:820px){
  .sidebar-head{margin-bottom:4px}
  .sidebar-collapse-toggle{display:none}
  .new-ask{justify-content:center}
}

/* Run 3.1 — scrollable menu and curated compact rail.
   Header / Ask / profile remain in view while the navigation itself scrolls. */
.sidebar{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.sidebar-head,.sidebar>.new-ask,.sidebar-foot{
  flex-shrink:0;
}
.sidebar .nav-list{
  display:block;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin!important;
  scrollbar-color:color-mix(in srgb,var(--accent) 48%,transparent) transparent;
  padding:5px 5px 10px 0;
  scroll-padding-block:12px;
}
.sidebar .nav-list::-webkit-scrollbar{display:block!important;width:5px}
.sidebar .nav-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 42%,transparent);border-radius:100px}
.sidebar .nav-list::-webkit-scrollbar-track{background:transparent}
.sidebar .nav-section{
  display:grid;
  gap:7px;
  padding:12px 0 14px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);
}
.sidebar .nav-section:first-child{padding-top:6px}
.sidebar .nav-section:last-child{border-bottom:0;padding-bottom:8px}
.sidebar .nav-section-label{padding:4px 13px 5px;font-size:9px;letter-spacing:.16em}
.sidebar .nav-item{min-height:49px;padding:7px 10px;border-radius:14px;gap:12px}
.sidebar .nav-item .nav-icon{flex:none;width:32px;height:32px}
.sidebar .nav-item .nav-icon img{width:20px;height:20px}
.sidebar .nav-item b{font-size:13px}
.sidebar .nav-item:focus-visible,.sidebar-collapse-toggle:focus-visible,.new-ask:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sidebar-foot{min-height:0;margin-top:0;padding-bottom:max(2px,env(safe-area-inset-bottom));}
/* Only five essential destinations remain in the compact rail. Ask and account live outside the scroller. */
@media(min-width:821px){
  body.sidebar-collapsed .sidebar .nav-item:not([data-compact="true"]){display:none!important}
  body.sidebar-collapsed .sidebar .nav-section-account{display:none!important}
  body.sidebar-collapsed .sidebar .nav-list{flex:1 1 auto;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important;padding:5px 0 10px}
  body.sidebar-collapsed .sidebar .nav-list::-webkit-scrollbar{display:none!important}
  body.sidebar-collapsed .sidebar .nav-section{width:100%;gap:8px;padding:10px 0 14px;border:0;justify-items:center}
  body.sidebar-collapsed .sidebar .nav-section:first-child{padding-top:0}
  body.sidebar-collapsed .sidebar .nav-section:last-child{padding-bottom:0}
  body.sidebar-collapsed .sidebar-head{flex-shrink:0;gap:8px}
  body.sidebar-collapsed .sidebar .nav-item[data-compact="true"]{display:grid;min-height:52px}
  body.sidebar-collapsed .sidebar-collapse-toggle{transform:none}
  body.sidebar-collapsed .sidebar-foot{margin-top:auto}
}
/* The mobile drawer has exactly the same independently-scrollable menu.
   Do not change the existing five-button mobile bottom navigation. */
@media(max-width:820px){
  .sidebar{height:100dvh;max-height:100dvh;overflow:hidden!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
  .sidebar .nav-list{overflow-y:auto!important;min-height:0;flex:1 1 auto}
  .sidebar .nav-section{padding:9px 0 11px;gap:5px}
  .sidebar .nav-item{min-height:46px}
  .sidebar-foot{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  .sidebar .nav-item,.sidebar-collapse-toggle{transition:none!important}
}