fixup! fix(nav): polish sidebar and layout alignment

fixup! fix(nav): polish sidebar and layout alignment

Polish: semibold nav labels, adjusted colors, search bar kbd badges,
right-aligned search, wider content area (860px), overflow-x-clip,
first-level sidebar indent alignment, breadcrumb color, padding alignment.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: m-hulbert

src/components/Layout/Breadcrumbs.test.tsx

@@ -70,15 +70,15 @@ describe('Breadcrumbs', () => {
     render(<Breadcrumbs />);
 
     // Current page (last item) should be disabled
-    expect(screen.getByText('Current Page')).toHaveClass('text-gui-unavailable');
+    expect(screen.getByText('Current Page')).toHaveClass('text-neutral-700');
     expect(screen.getByText('Current Page')).toHaveClass('pointer-events-none');
 
     // Non-linked nodes (link='#') should be disabled
-    expect(screen.getByText('Subsection 1')).toHaveClass('text-gui-unavailable');
+    expect(screen.getByText('Subsection 1')).toHaveClass('text-neutral-700');
     expect(screen.getByText('Subsection 1')).toHaveClass('pointer-events-none');
 
     // Active links should not be disabled
-    expect(screen.getByText('Section 1')).not.toHaveClass('text-gui-unavailable');
+    expect(screen.getByText('Section 1')).not.toHaveClass('text-neutral-700');
     expect(screen.getByText('Section 1')).not.toHaveClass('pointer-events-none');
   });
 

src/components/Layout/Breadcrumbs.tsx

@@ -66,7 +66,7 @@ const Breadcrumbs: React.FC = () => {
           <Link
             to={node.page.link}
             className={cn(linkStyles, {
-              'text-gui-unavailable dark:text-gui-unavailable-dark pointer-events-none':
+              'text-neutral-700 dark:text-neutral-700 pointer-events-none':
                 index === activePage.tree.length - 1 || node.page.link === '#',
               'hidden sm:flex': index !== lastActiveNodeIndex,
             })}