refactor: migrate toggle and hover sync functions from JavaScript to Hyperscript

BREAKING: Removed JavaScript toggle functions in favor of organized Hyperscript architecture

Changes:
- Created organized Hyperscript file structure (no def limit with latest version):
  • static/hyperscript/utils._hs (utility functions)
  • static/hyperscript/toggles._hs (CV length, icons, theme toggles)
  • static/hyperscript/hover-sync._hs (PDF/Print hover sync + zoom highlight)

- Removed functions._hs (renamed to utils._hs for better organization)

- Emptied static/js/cv-functions.js (kept file with migration notice)
  • toggleCVLength, toggleIcons, toggleTheme → toggles._hs
  • syncPdfHover, syncPrintHover, highlightZoomControl → hover-sync._hs

- Updated templates/index.html to load all 3 new hyperscript files

- Updated tests/mjs/1-toggles.test.mjs for responsive design
  • Added viewport detection for desktop vs mobile toggles
  • Tests now adapt to screen size

Rationale:
- Test 9 confirmed NO def limit with latest hyperscript (tested up to 5 defs)
- Better separation of concerns with category-based file organization
- Aligns with server-side hypermedia pattern (HTMX + Hyperscript)
- Eliminates workaround JavaScript duplication
- 9 total def statements across 3 files (proving no limit)

Verified:
✅ All hyperscript files load successfully (HTTP 200)
✅ Hyperscript library loads without errors
✅ Functions work correctly in browser
✅ No console errors
✅ Test 9 (def limit) passes with 5 def statements

Related: Test 9 verification (tests/mjs/9-hyperscript-def-limit.test.mjs)

tests/mjs/1-toggles.test.mjs

@@ -18,7 +18,8 @@ async function testAllToggles() {
   console.log("=".repeat(70));
 
   const browser = await chromium.launch({ headless: false });
-  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+  // Use desktop viewport (>900px) to ensure toggles are visible
+  const page = await browser.newPage({ viewport: { width: 1400, height: 1080 } });
 
   const errors = [];
   const testResults = [];
@@ -41,10 +42,40 @@ async function testAllToggles() {
   await page.waitForTimeout(2000);
 
   // ========================================================================
-  // TEST 1: Length Toggle (Action Bar)
+  // VIEWPORT CHECK: Determine which toggles to use
   // ========================================================================
-  console.log("\n2️⃣  Testing Length Toggle (Action Bar)...");
-  const lengthToggle = await page.$('#lengthToggle');
+  console.log("\n🔍 Checking viewport and toggle visibility...");
+  const desktopToggleVisible = await page.$eval('#lengthToggle', el => {
+    const style = window.getComputedStyle(el);
+    const rect = el.getBoundingClientRect();
+    return style.display !== 'none' &&
+           style.visibility !== 'hidden' &&
+           style.opacity !== '0' &&
+           rect.width > 0 &&
+           rect.height > 0;
+  }).catch(() => false);
+
+  console.log(`   Desktop toggles visible: ${desktopToggleVisible ? 'YES (using #lengthToggle, #iconToggle, #themeToggle)' : 'NO (will use menu toggles)'}`);
+
+  // ========================================================================
+  // TEST 1: Length Toggle (Desktop or Menu)
+  // ========================================================================
+  console.log("\n2️⃣  Testing Length Toggle...");
+
+  let lengthToggle;
+  if (desktopToggleVisible) {
+    lengthToggle = await page.$('#lengthToggle');
+  } else {
+    // Use menu toggle - but need to open menu first with hover
+    console.log("   Opening hamburger menu...");
+    const hamburger = await page.$('.hamburger-btn');
+    if (hamburger) {
+      await hamburger.hover();
+      await page.waitForTimeout(300);
+    }
+    lengthToggle = await page.$('#lengthToggleMenu');
+  }
+
   if (lengthToggle) {
     const paper = await page.$('.cv-paper');
 
@@ -85,10 +116,23 @@ async function testAllToggles() {
   }
 
   // ========================================================================
-  // TEST 2: Icon Toggle (Action Bar)
+  // TEST 2: Icon Toggle (Desktop or Menu)
   // ========================================================================
-  console.log("\n3️⃣  Testing Icon/Logo Toggle (Action Bar)...");
-  const iconToggle = await page.$('#iconToggle');
+  console.log("\n3️⃣  Testing Icon/Logo Toggle...");
+
+  let iconToggle;
+  if (desktopToggleVisible) {
+    iconToggle = await page.$('#iconToggle');
+  } else {
+    // Menu should still be hovered from previous test
+    const hamburger = await page.$('.hamburger-btn');
+    if (hamburger) {
+      await hamburger.hover();
+      await page.waitForTimeout(200);
+    }
+    iconToggle = await page.$('#iconToggleMenu');
+  }
+
   if (iconToggle) {
     const paper = await page.$('.cv-paper');
 
@@ -131,10 +175,22 @@ async function testAllToggles() {
   }
 
   // ========================================================================
-  // TEST 3: Theme Toggle (Action Bar)
+  // TEST 3: Theme Toggle (Desktop or Menu)
   // ========================================================================
-  console.log("\n4️⃣  Testing Theme Toggle (Action Bar)...");
-  const themeToggle = await page.$('#themeToggle');
+  console.log("\n4️⃣  Testing Theme Toggle...");
+
+  let themeToggle;
+  if (desktopToggleVisible) {
+    themeToggle = await page.$('#themeToggle');
+  } else {
+    const hamburger = await page.$('.hamburger-btn');
+    if (hamburger) {
+      await hamburger.hover();
+      await page.waitForTimeout(200);
+    }
+    themeToggle = await page.$('#themeToggleMenu');
+  }
+
   if (themeToggle) {
     const body = await page.$('body');