## 1. Export STATUS_STYLES

- [x] 1.1 Export `STATUS_STYLES` from `SpecializationRanking.tsx` so it can be imported by the banner component

## 2. Create MobileStatusBanner component

- [x] 2.1 Create `app/src/components/MobileStatusBanner.tsx` with props: `statuses: Record<string, SpecStatus>`, `visible: boolean`, `onTap: () => void`
- [x] 2.2 Implement status count logic — loop over the statuses record to count each category (achieved, achievable, missing_required, unreachable)
- [x] 2.3 Render four color-coded badges using `STATUS_STYLES` colors, each showing `"{count} {label}"` (display all categories including zero counts)
- [x] 2.4 Style the banner: `position: fixed`, `top: 0`, `left: 0`, `width: 100%`, `z-index: 1000`, white background with bottom border, compact height (~40px)
- [x] 2.5 Implement slide animation: always mounted, use `transform: translateY(-100%)` when hidden vs `translateY(0)` when visible, `transition: transform 200ms ease-out`
- [x] 2.6 Attach `onClick` handler to the banner root element that calls `onTap`

## 3. Integrate into App.tsx

- [x] 3.1 Add a `ref` to the specializations wrapper `<div>` in `App.tsx` (the div containing `CreditLegend` and `SpecializationRanking`)
- [x] 3.2 Add IntersectionObserver logic: observe the specializations ref, set a `bannerVisible` state to `true` when the section is not intersecting, `false` when it is
- [x] 3.3 Gate the observer and banner on `isMobile` — only create the observer and render the banner when on mobile breakpoint
- [x] 3.4 Mount `<MobileStatusBanner>` at the top of the App return (before `<h1>`), passing `statuses={optimizationResult.statuses}`, `visible={bannerVisible && isMobile}`, and `onTap` that calls `specSectionRef.current.scrollIntoView({ behavior: 'smooth' })`
- [x] 3.5 Clean up the IntersectionObserver in the useEffect return (disconnect on unmount or when isMobile changes)

## 4. Test

- [x] 4.1 Verify banner appears on mobile viewport when scrolling past specializations
- [x] 4.2 Verify banner hides when scrolling back up to specializations
- [x] 4.3 Verify banner does not render on tablet/desktop viewports
- [x] 4.4 Verify tapping the banner scrolls back to the specializations section
- [x] 4.5 Verify status counts update reactively when course selections change while banner is visible
- [x] 4.6 Verify badge colors match the specialization list status badges