## Why

On mobile, the specializations panel stacks above the course selection panel and scrolls naturally with the page. Once a user scrolls down to interact with course selections, they lose visibility of the specialization statuses (achieved, achievable, missing required, unreachable). This forces constant scrolling back up to check how course picks affect specialization progress. A floating summary banner solves this by keeping the key status information visible while the user works through their course selections.

## What Changes

- Add a floating banner that appears at the top of the viewport on mobile after the user scrolls past the specializations section
- The banner summarizes specialization statuses: count of achieved, achievable, missing required, and unreachable specializations
- Uses the same color-coded status badges already defined in `STATUS_STYLES`
- The banner animates in/out based on scroll position using an `IntersectionObserver` on the specializations section
- Tapping the banner scrolls back to the full specializations panel
- Only renders on mobile breakpoint (`max-width: 639px`)

## Capabilities

### New Capabilities
- `mobile-status-banner`: A floating UI component that summarizes specialization statuses on mobile when the specializations section is scrolled out of view

### Modified Capabilities
<!-- No existing specs to modify -->

## Impact

- **Components**: New `MobileStatusBanner` component; minor changes to `App.tsx` to mount it and pass specialization data
- **Hooks**: May add a small scroll-detection hook or use `IntersectionObserver` inline
- **Styling**: Introduces the first `position: fixed` element in the codebase; needs appropriate `z-index` to layer above content
- **Dependencies**: No new libraries required — `IntersectionObserver` is a browser API
- **Performance**: Minimal — observer fires only on intersection changes, not on every scroll event