fix: CRITICAL - Restore sidebar visibility in landscape mode

Fixed critical issue where sidebars were completely collapsed/hidden
in landscape mode, showing only 33px accordion headers instead of full content.

ROOT CAUSE:
- Sidebar accordions (<details> elements) were collapsed by default
- Native <details> browser behavior prevented CSS-only expansion
- Sidebar content was present but hidden behind collapsed accordion

SOLUTION:
1. JavaScript: Added handleLandscapeAccordions() to auto-open sidebar
   accordions when in landscape orientation (≤915px width)
   - Runs on DOMContentLoaded, orientationchange, and resize events
   - Uses matchMedia to detect landscape mode
   - Sets 'open' attribute on all .sidebar-accordion elements

2. CSS: Enhanced sidebar container styles in landscape mode
   - Set overflow: visible on sidebars (was hidden)
   - Set height: auto on sidebars and .actual-content wrappers
   - Forced accordion content visibility with !important rules
   - Made summary non-clickable in landscape (pointer-events: none)

3. Tests: Updated landscape test to validate sidebar visibility
   - Now checks sidebar visible/hidden state
   - Validates sidebar height (should be >100px, not 33px)
   - Added debug tests for troubleshooting

RESULTS:
- Sidebar height: 1387px (Android) / 1536px (iPhone) ✓
- Accordion state: OPEN ✓
- All sidebar content fully visible ✓
- No horizontal scroll ✓

Test files:
- tests/mjs/54-landscape-mode-test.mjs (updated with sidebar checks)
- tests/mjs/60-sidebar-content-debug.mjs (new debug test)
- tests/mjs/61-sidebar-positioning-debug.mjs (positioning debug)
- tests/mjs/62-sidebar-computed-height-debug.mjs (height debug)
- tests/mjs/63-media-query-match-test.mjs (media query validation)

tests/mjs/60-sidebar-content-debug.mjs

@@ -0,0 +1,95 @@
+#!/usr/bin/env node
+
+import { chromium } from 'playwright';
+
+const LANDSCAPE_VIEWPORT = { width: 667, height: 375 };
+
+(async () => {
+    const browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext({
+        viewport: LANDSCAPE_VIEWPORT,
+        userAgent: 'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
+        hasTouch: true
+    });
+    const page = await context.newPage();
+
+    await page.goto('http://localhost:1999/?lang=en&view=extended');
+    await page.waitForLoadState('networkidle');
+
+    const sidebarDebug = await page.evaluate(() => {
+        const sidebar = document.querySelector('.cv-sidebar-left');
+        const accordion = document.querySelector('.sidebar-accordion');
+        const accordionHeader = document.querySelector('.sidebar-accordion-header');
+        const accordionContent = document.querySelector('.sidebar-accordion-content');
+        const actualContent = sidebar?.querySelector('.actual-content');
+        const skeletonContent = sidebar?.querySelector('.skeleton-content');
+
+        const sidebarRect = sidebar?.getBoundingClientRect();
+        const accordionRect = accordion?.getBoundingClientRect();
+        const headerRect = accordionHeader?.getBoundingClientRect();
+        const contentRect = accordionContent?.getBoundingClientRect();
+
+        return {
+            sidebarExists: !!sidebar,
+            sidebarDisplay: sidebar ? window.getComputedStyle(sidebar).display : 'N/A',
+            sidebarHeight: sidebarRect ? Math.round(sidebarRect.height) : 0,
+            sidebarWidth: sidebarRect ? Math.round(sidebarRect.width) : 0,
+
+            accordionExists: !!accordion,
+            accordionOpen: accordion?.hasAttribute('open'),
+            accordionHeight: accordionRect ? Math.round(accordionRect.height) : 0,
+
+            headerExists: !!accordionHeader,
+            headerHeight: headerRect ? Math.round(headerRect.height) : 0,
+            headerDisplay: accordionHeader ? window.getComputedStyle(accordionHeader).display : 'N/A',
+
+            contentExists: !!accordionContent,
+            contentHeight: contentRect ? Math.round(contentRect.height) : 0,
+            contentDisplay: accordionContent ? window.getComputedStyle(accordionContent).display : 'N/A',
+            contentOpacity: accordionContent ? window.getComputedStyle(accordionContent).opacity : 'N/A',
+
+            actualContentDisplay: actualContent ? window.getComputedStyle(actualContent).display : 'N/A',
+            actualContentOpacity: actualContent ? window.getComputedStyle(actualContent).opacity : 'N/A',
+
+            skeletonContentDisplay: skeletonContent ? window.getComputedStyle(skeletonContent).display : 'N/A',
+            skeletonContentOpacity: skeletonContent ? window.getComputedStyle(skeletonContent).opacity : 'N/A',
+
+            sidebarClasses: sidebar ? sidebar.className : 'N/A',
+            parentClasses: sidebar?.parentElement ? sidebar.parentElement.className : 'N/A'
+        };
+    });
+
+    console.log('Sidebar Content Debug:\n');
+    console.log('Sidebar Element:');
+    console.log(`  • Exists: ${sidebarDebug.sidebarExists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${sidebarDebug.sidebarDisplay}`);
+    console.log(`  • Size: ${sidebarDebug.sidebarWidth}×${sidebarDebug.sidebarHeight}px`);
+    console.log(`  • Classes: ${sidebarDebug.sidebarClasses}`);
+    console.log(`  • Parent classes: ${sidebarDebug.parentClasses}\n`);
+
+    console.log('Accordion:');
+    console.log(`  • Exists: ${sidebarDebug.accordionExists ? '✅' : '❌'}`);
+    console.log(`  • Open: ${sidebarDebug.accordionOpen ? '✅ YES' : '❌ COLLAPSED'}`);
+    console.log(`  • Height: ${sidebarDebug.accordionHeight}px\n`);
+
+    console.log('Accordion Header:');
+    console.log(`  • Exists: ${sidebarDebug.headerExists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${sidebarDebug.headerDisplay}`);
+    console.log(`  • Height: ${sidebarDebug.headerHeight}px\n`);
+
+    console.log('Accordion Content:');
+    console.log(`  • Exists: ${sidebarDebug.contentExists ? '✅' : '❌'}`);
+    console.log(`  • Display: ${sidebarDebug.contentDisplay}`);
+    console.log(`  • Opacity: ${sidebarDebug.contentOpacity}`);
+    console.log(`  • Height: ${sidebarDebug.contentHeight}px\n`);
+
+    console.log('Actual Content Wrapper:');
+    console.log(`  • Display: ${sidebarDebug.actualContentDisplay}`);
+    console.log(`  • Opacity: ${sidebarDebug.actualContentOpacity}\n`);
+
+    console.log('Skeleton Content Wrapper:');
+    console.log(`  • Display: ${sidebarDebug.skeletonContentDisplay}`);
+    console.log(`  • Opacity: ${sidebarDebug.skeletonContentOpacity}\n`);
+
+    await browser.close();
+})();