/* The header and left navigation are shared on every page. */
#topNav { display: flex; flex-shrink: 0; box-sizing: border-box; width: 100%; background: var(--nav-backdrop); border-bottom: 1px solid var(--border-light); }
#leftSidebar .primary-nav ul { display: flex; flex-direction: column; gap: 3px; }
#leftSidebar .nav-link { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-secondary); }
#leftSidebar .nav-link.active { background: var(--bg-active-pill); color: var(--primary-light); font-weight: 700; }
#leftSidebar .nav-icon { width: 19px; height: 19px; flex-shrink: 0; }
#leftSidebar .category-list > li:nth-child(n+4) { display: none; }
@media (min-width: 901px) {
  #topNav { height: 64px; min-height: 64px; }
  #leftSidebar { display: block; box-sizing: border-box; width: var(--sidebar-left-width); height: 100%; flex: 0 0 var(--sidebar-left-width); padding: 16px 14px 30px 24px; border-right: 1px solid var(--border-light); overflow-y: auto; }
}
@media (min-width: 1101px) {
  body { --sidebar-left-width: 310px; }
  #topNav .nav-container { display: grid; grid-template-columns: 310px minmax(0, 1fr) max-content; gap: 0; padding: 0; }
  #topNav .header-left { min-width: 0; padding-left: 24px; }
  #topNav .search-wrapper { width: calc(100% - 48px); max-width: 680px; min-width: 0; justify-self: center; }
  #topNav .nav-actions { justify-self: end; padding-right: 24px; gap: 10px; }
}