Add swipe-right-to-close preference pane for mobile (JOB-6)

[jmansfield]

Summary

Implements a mobile-friendly preference pane that slides in from the left and can be dismissed by swiping right, as requested in JOB-6.

What's included

New exercise folder 22 Swipe preference pane/ with three files following the existing project conventions:

index.html

• Mobile viewport meta tag for proper responsive behavior
• Preference pane (<aside>) with sample settings (dark mode, notifications, font size, language, auto-save)
• Header with toggle button, overlay backdrop, and main content area

application.css

• Slide-in/out animation using CSS transform and transition
• .dragging class disables transitions during active touch for smooth finger-tracking
• Responsive: pane capped at 85vw on small screens, swipe hint hidden on desktop (≥769px)
• Semi-transparent overlay fades proportionally as the user swipes

application.js

• Touch gesture handling using native touchstart / touchmove / touchend events
• Directional lock: initial movement angle decides whether the gesture is a horizontal swipe or vertical scroll (30° threshold)
• Drag follow: pane position tracks the user's finger in real-time, overlay opacity fades proportionally
• Threshold dismissal: if the user swipes past 30% of the pane width, it closes; otherwise it snaps back
• Multiple close methods: swipe right, tap X button, tap overlay, or press Escape

How to test

1. Open 22 Swipe preference pane/index.html in a browser
2. Click "☰ Preferences" to open the pane
3. On mobile or using browser DevTools touch simulation, swipe right on the pane to close it
4. Verify partial swipes snap back, and swipes past ~30% dismiss the pane

Linear Issue: JOB-6