refactor: Modularize CSS into ITCSS architecture + update documentation

CSS Refactoring:
- Split 2,287-line monolith into 6 focused modules
- New structure: Navigation, Scroll, Buttons, Modals, Zoom, Breakpoints
- Organized by ITCSS layers (Interactive + Responsive)
- 245 lines saved through better organization
- Site verified working at localhost:1999

New CSS Files:
- 04-interactive/_navigation.css (357 lines, 8.2KB)
- 04-interactive/_scroll-behavior.css (200 lines, 5.0KB)
- 04-interactive/_buttons.css (184 lines, 4.7KB)
- 04-interactive/_modals.css (487 lines, 16KB)
- 04-interactive/_zoom-control.css (253 lines, 6.3KB)
- 05-responsive/_breakpoints.css (561 lines, 14KB)

Documentation Updates:
- Added doc/12-CSS-ARCHITECTURE.md (comprehensive CSS guide)
- Updated doc/README.md (new entry + correct numbering)
- Updated tests/README.md (test count 8 → 27)
- Updated tests/TEST-SUMMARY.md (coverage expansion)
- Rewrote tests/mjs/README.md (complete test listing)

Removed:
- static/css/04-interactive/_remaining.css (replaced by modules)

tests/mjs/README.md

@@ -1,63 +1,144 @@
-# CV Project Test Suite
+# CV Project Test Suite (Active Tests)
 
-Organized test files for the CV application. All tests use Playwright for browser automation.
+**27 comprehensive tests** covering all functionality from UI interactions to PDF generation.
 
-## Test Files
-
-### 0-zoom.test.mjs
-**Purpose**: Test zoom control functionality
-- Verifies zoom control elements exist
-- Tests visibility toggle
-- Validates zoom slider interaction
-- Checks real-time zoom updates
-
-**Run**: `bun tests/mjs/0-zoom.test.mjs`
-
-### 1-toggles.test.mjs
-**Purpose**: Comprehensive toggle testing with real-time visual verification
-- Tests all 3 toggles (Length, Icons, Theme)
-- Validates action bar toggles
-- Tests hamburger menu toggles
-- Verifies synchronization between action bar and menu
-- Checks localStorage persistence
-- **Critical**: Validates that toggles update DOM immediately (no refresh needed)
-- Takes screenshots for visual comparison
-
-**Run**: `bun tests/mjs/1-toggles.test.mjs`
-
-## Running All Tests
+## Quick Start
 
 ```bash
-# Run individual tests
-bun tests/mjs/0-zoom.test.mjs
-bun tests/mjs/1-toggles.test.mjs
+# Run all tests with master test runner
+bun tests/run-all.mjs
 
-# Run all tests sequentially
-for test in tests/mjs/*.test.mjs; do
-  echo "Running $test..."
-  bun "$test"
-  echo ""
-done
+# Run individual test
+bun tests/mjs/0-zoom.test.mjs
+bun tests/mjs/28-references-pdf-download.test.mjs
 ```
 
+## Core Functionality Tests (0-14)
+
+### 0-zoom.test.mjs
+Zoom control functionality - slider, toggle, persistence
+
+### 1-toggles.test.mjs
+Length/Icon/Theme toggles with screenshot verification
+
+### 2-keyboard-shortcuts.test.mjs
+L/I/V/? keyboard shortcuts
+
+### 3-hyperscript.test.mjs
+Hyperscript parsing and function definitions
+
+### 4-htmx.test.mjs
+HTMX library and request/response cycle
+
+### 5-language.test.mjs
+Bilingual support (EN/ES) switching
+
+### 6-modals.test.mjs
+Info, shortcuts, and PDF modal dialogs
+
+### 7-mobile-responsive.test.mjs
+Mobile viewport and touch interactions
+
+### 8-hover-sync.test.mjs
+Hover state synchronization across UI
+
+### 9-hyperscript-def-limit.test.mjs
+Hyperscript 0.9.14+ def limit validation
+
+### 10-zoom-persistence.test.mjs
+Zoom level localStorage persistence
+
+### 11-zoom-ui-exclusion.test.mjs
+UI elements excluded from zoom
+
+### 12-skeleton-language-transitions.test.mjs
+Skeleton loaders for language transitions (13 sections)
+
+### 13-color-theme-switcher.test.mjs
+Dynamic color theme switcher (auto/light/dark)
+
+### 14-button-positioning.test.mjs
+Responsive button positioning
+
+## Advanced Feature Tests (15-28)
+
+### 14-pdf-modal.test.mjs
+PDF download modal with thumbnail selection
+
+### 15-icon-toggle-debug.test.mjs
+Icon toggle debugging and validation
+
+### 22-theme-consistency.test.mjs
+Theme consistency across reloads
+
+### 23-dark-theme-borders.test.mjs
+Dark theme border colors
+
+### 24-course-inline-icons.test.mjs
+Course section inline icon sizes
+
+### 24-pdf-download-params.test.mjs
+PDF download URL parameters
+
+### 25-inline-icons-comprehensive.test.mjs
+Comprehensive inline icon testing
+
+### 26-course-list-icons.test.mjs
+Course list icon rendering
+
+### 27-course-icons-final.test.mjs
+Final course icon validation
+
+### 28-references-pdf-download.test.mjs
+References section PDF download button
+
+## Migration Tests
+
+### test-preference-migration.test.mjs
+LocalStorage preference migration (extended→long, true/false→show/hide)
+
+### verify-migration.test.mjs
+Migration verification and validation
+
 ## Test Requirements
 
-- Server must be running on http://localhost:1999
-- Browser window will stay open after tests for manual verification
-- Press Ctrl+C to exit test
+- **Server**: Running on http://localhost:1999
+- **Browser**: Playwright Chromium (headed mode)
+- **Runtime**: Bun (`#!/usr/bin/env bun`)
+- **Exit**: Ctrl+C after manual verification
 
 ## Test Output
 
 All tests provide:
 - ✅ Clear pass/fail indicators
-- 📊 Summary of results
-- ❌ Detailed error messages
+- 📊 Summary of test results
+- ❌ Detailed error messages with file:line references
 - 🎉 Success confirmation
+- 💡 Browser stays open for manual inspection
 
 ## Screenshots
 
-Toggle tests save screenshots to `tests/screenshots/`:
-- `before-icon-toggle.png` - Before clicking icon toggle
-- `after-icon-toggle.png` - After clicking icon toggle
+Tests save screenshots to `tests/screenshots/`:
+- Before/after comparison for visual verification
+- Dark theme validation
+- Icon toggle validation
 
-Use these to visually verify rendering changes.
+## Running Tests
+
+```bash
+# All tests
+bun tests/run-all.mjs
+
+# Individual test
+bun tests/mjs/{number}-{feature}.test.mjs
+
+# Example
+bun tests/mjs/28-references-pdf-download.test.mjs
+```
+
+---
+
+**Last Updated**: 2025-11-20
+**Test Count**: 27 active tests
+**Coverage**: Complete functionality coverage
+**Status**: Production specification