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)

static/css/04-interactive/_buttons.css

@@ -0,0 +1,184 @@
+
+/* =============================================================================
+   KEYBOARD SHORTCUTS BUTTON & MODAL
+   ============================================================================= */
+
+/* Shortcuts Button (Fixed Left) - Mirrors info-button on opposite side */
+/* Zoom Toggle Button (above shortcuts button) */
+.zoom-toggle-btn {
+    position: fixed;
+    bottom: 10rem; /* Above shortcuts button */
+    left: 2rem;
+    width: 50px;
+    height: 50px;
+    background: var(--black-bar);
+    color: white; /* Match other buttons when inactive */
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    z-index: 999;
+    opacity: 0.6; /* Match shortcuts button opacity */
+}
+
+.zoom-toggle-btn:hover {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: #3498db; /* Blue hover */
+}
+
+.zoom-toggle-btn.at-bottom {
+    opacity: 1;
+    background: #3498db; /* Blue - matches hover */
+}
+
+/* No special styling for active state - button looks same whether zoom is on or off */
+
+.shortcuts-btn {
+    position: fixed;
+    bottom: 6rem; /* Above back-to-top button (2rem + 50px + gap) */
+    left: 2rem; /* LEFT SIDE instead of right */
+    width: 50px;
+    height: 50px;
+    background: var(--black-bar);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 99;
+    transition: all 0.3s ease;
+    opacity: 0.6; /* Increased from 0.2 for better discoverability */
+}
+
+.shortcuts-btn:hover {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: #f39c12; /* Orange hover */
+}
+
+.shortcuts-btn.at-bottom {
+    opacity: 1;
+    background: #f39c12; /* Orange when at bottom */
+}
+
+.shortcuts-btn:active {
+    transform: translateY(-1px);
+}
+
+/* Print-Friendly Button (second from top) */
+.print-friendly-btn {
+    position: fixed;
+    bottom: 18rem; /* Below download button (22rem) */
+    left: 2rem;
+    width: 50px;
+    height: 50px;
+    background: var(--black-bar); /* Dark background by default */
+    color: white; /* White icon by default */
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    z-index: 999;
+    opacity: 0.6;
+}
+
+.print-friendly-btn iconify-icon {
+    color: white; /* White icon by default */
+}
+
+.print-friendly-btn:hover,
+.print-friendly-btn.print-hover-sync {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: white !important; /* White background on hover */
+    color: #27ae60; /* Green icon on hover */
+}
+
+.print-friendly-btn:hover iconify-icon,
+.print-friendly-btn.print-hover-sync iconify-icon {
+    color: #27ae60; /* Green icon on hover */
+}
+
+.print-friendly-btn.at-bottom {
+    opacity: 1;
+    background: white !important; /* White background - matches hover */
+    color: #27ae60; /* Green - matches hover */
+}
+
+.print-friendly-btn.at-bottom iconify-icon {
+    color: #27ae60; /* Green icon when at bottom */
+}
+
+/* Download Button (TOP POSITION) */
+.download-btn {
+    position: fixed;
+    bottom: 22rem; /* Top button position */
+    left: 2rem;
+    width: 50px;
+    height: 50px;
+    background: var(--black-bar);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    z-index: 999;
+    opacity: 0.6;
+}
+
+.download-btn {
+    background: var(--black-bar); /* Gray by default like other buttons */
+    opacity: 0.6; /* Match other buttons */
+}
+
+.download-btn:hover,
+.download-btn.pdf-hover-sync {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: #cd6060 !important; /* PDF red on hover */
+}
+
+.download-btn iconify-icon {
+    filter: brightness(0) invert(1); /* Always white */
+    transition: filter 0.3s ease;
+}
+
+.download-btn:hover iconify-icon {
+    filter: brightness(0) invert(1); /* Keep white on hover */
+}
+
+.download-btn.at-bottom {
+    opacity: 1;
+    background: #cd6060 !important; /* PDF red - matches hover */
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .shortcuts-btn {
+        bottom: 5.5rem; /* Above back-to-top button (1.5rem + 45px + gap) */
+        left: 1.5rem; /* LEFT SIDE on mobile too */
+        width: 45px;
+        height: 45px;
+    }
+}
+