Add ATSC golden path guide with reusable InfoBanner component and E2E tests (#238)

* Initial plan

* Add ATSC golden path guide and UX improvements

- Create comprehensive ATSC Golden Path Guide tutorial
- Add prominent links to golden path in README and docs
- Update Help page with golden path quick start section
- Add context banners to ATSCPlayer, Scanner, and EPG components
- Label Analysis page as advanced feature
- Enhance navigation tooltips with clear descriptions
- Update ROADMAP to emphasize golden path workflow
- Fix linting and test issues

Co-authored-by: alexthemitchell <5687158+alexthemitchell@users.noreply.github.com>

* Refactor banners to use reusable InfoBanner component with design tokens

- Create InfoBanner component with info/advanced variants
- Add design tokens for banner colors (--rad-info-*, --rad-advanced-*)
- Replace hardcoded banners in ATSCPlayer, Scanner, EPG, Analysis, Help
- Fix accessibility: consistent role="status" for dynamic banners, role="note" for static
- Add comprehensive unit tests for InfoBanner (9/9 passing)
- All linting, formatting, and tests passing

Co-authored-by: alexthemitchell <5687158+alexthemitchell@users.noreply.github.com>

* Add comprehensive E2E test for ATSC golden path workflow

- Create e2e/atsc-golden-path.spec.ts with 11 test cases
- Verify context banners appear in appropriate states
- Test keyboard navigation shortcuts (2, 6, ?)
- Verify accessibility attributes (role, aria-live)
- Check design token usage in InfoBanner
- Validate enhanced navigation tooltips
- Document complete golden path workflow for regression testing

Co-authored-by: alexthemitchell <5687158+alexthemitchell@users.noreply.github.com>

* Refactor InfoBanner to use CSS classes instead of inline styles

- Create src/styles/components/info-banner.css with reusable styles
- Update InfoBanner component to use CSS classes for all styling
- Replace inline styles in ATSCPlayer, Scanner, EPG, Analysis, Help pages
- Add CSS classes: info-banner__paragraph, info-banner__footer, info-banner__list
- Improve maintainability by consolidating styles in CSS file
- Link colors and text decorations now handled by CSS
- All tests passing, linting clean, build successful

Co-authored-by: alexthemitchell <5687158+alexthemitchell@users.noreply.github.com>

* Fix PR review feedback: accessibility, light theme, and CSS naming

- Add role="status" to Scanner and EPG InfoBanners (conditionally displayed)
- Add light theme tokens for InfoBanner colors in tokens.css
- Replace inline styles in Analysis and Help with CSS classes
- Convert CSS class names from BEM to kebab-case for stylelint compliance
- Update all component usages and tests to use kebab-case classes
- All linting, tests, and build passing

Co-authored-by: alexthemitchell <5687158+alexthemitchell@users.noreply.github.com>

* Eliminate all inline styles and add missing text colors

- Add CSS utility classes for margins and padding (.info-banner-margin-top, .info-banner-compact, etc.)
- Add text color rules for paragraph, list, and footer elements in both variants
- Replace all inline styles with CSS classes in ATSCPlayer, Scanner, EPG, Analysis, Help
- Add role="status" to ATSCPlayer banner for accessibility consistency
- Remove Analysis-specific fontSize inline style (unique requirement remains)
- All linting, tests, and build passing

Co-authored-by: alexthemitchell <5687158+alexthemitchell@users.noreply.github.com>

* Remove final inline style with CSS utility class

- Add .info-banner-footer-small CSS class (13px font size)
- Replace fontSize inline style in Analysis with CSS class
- Achieve complete elimination of all inline styles
- All linting and build passing

Co-authored-by: alexthemitchell <5687158+alexthemitchell@users.noreply.github.com>

* Fix Navigation test to match updated tooltip text

- Update test expectations to match enhanced navigation tooltips
- Monitor: now includes "Start here for general SDR use"
- Scanner: now includes "Essential for finding signals"
- Analysis: now includes "Advanced feature"
- All tests passing

Co-authored-by: alexthemitchell <5687158+alexthemitchell@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: alexthemitchell <5687158+alexthemitchell@users.noreply.github.com>
Co-authored-by: Alex Mitchell <alex+github@alexmitchelltech.com>

Author: Copilot

README.md

@@ -5,6 +5,23 @@
 
 A professional browser-based SDR application with industry-standard visualizations, universal device support, and comprehensive testing.
 
+## 🎯 New to rad.io? Start with the Golden Path
+
+**Want to watch digital TV with your SDR?** Follow our step-by-step [**ATSC Digital TV Golden Path Guide**](docs/tutorials/atsc-golden-path.md) to learn the complete end-to-end workflow:
+
+1. 🔌 **Connect** your SDR device
+2. 🔍 **Scan** for ATSC channels in your area
+3. 📺 **Tune and Play** a channel
+4. 📋 **View** the Electronic Program Guide (EPG)
+5. 💬 **Enable** closed captions
+6. 📊 **Monitor** signal health and quality
+
+**Estimated time**: 15-20 minutes | **No SDR experience required!**
+
+[**→ Start the ATSC Golden Path Guide**](docs/tutorials/atsc-golden-path.md)
+
+---
+
 ## Common Usecases
 
 ### Live FM Radio

ROADMAP.md

@@ -1,5 +1,22 @@
 # WebSDR Pro Development Roadmap
 
+## 🎯 Golden Path: ATSC Digital TV Workflow
+
+**For new users and ATSC beginners**, we've defined a clear "Golden Path" that guides you through the complete end-to-end workflow:
+
+1. **Connect Hardware** → Plug in your SDR device and grant browser permissions
+2. **Scan for Channels** → Use the ATSC Scanner to discover broadcasts (2-5 minutes)
+3. **Tune and Play** → Select a channel in ATSC Player to watch/listen
+4. **View Program Guide** → Browse EPG data to see what's on TV
+5. **Enable Captions** → Turn on closed captions for accessibility
+6. **Monitor Signal Health** → Check SNR, MER, BER to optimize antenna placement
+
+**📖 [Complete ATSC Golden Path Guide](docs/tutorials/atsc-golden-path.md)** - Detailed walkthrough with troubleshooting
+
+This golden path represents our commitment to providing a seamless user experience for the most common use case: watching over-the-air digital television. All features and documentation are organized to support this workflow first, with advanced features clearly labeled.
+
+---
+
 ## Overview
 
 This roadmap outlines the strategic development plan for WebSDR Pro, transitioning from a functional prototype to a complete, production-ready professional signal analysis platform. The roadmap is organized by user personas and capability tiers, ensuring features are prioritized based on real-world use cases and user value.

docs/NAVIGATION_GUIDE.md

@@ -2,6 +2,16 @@
 
 This guide helps you find the right documentation for your needs in the rad.io documentation system.
 
+## 🎯 New to ATSC Digital TV?
+
+**Start here**: [**ATSC Digital TV Golden Path Guide**](./tutorials/atsc-golden-path.md)
+
+This comprehensive guide walks you through the complete end-to-end workflow: Connect SDR → Scan channels → Tune/Play → View EPG → Enable captions → Monitor signal health.
+
+**Perfect for**: First-time users, ATSC newcomers, anyone wanting a structured learning path.
+
+---
+
 ## Quick Decision Tree
 
 ```