Add mobile floating banners for specialization status and course selection progress

On mobile, the single-column layout makes it easy to lose context when
scrolling between the specializations and course selection panels. This adds
two floating banners that appear via IntersectionObserver:

- Top banner: summarizes specialization statuses (achieved/achievable/missing/unreachable)
- Bottom banner: shows course selection progress (N/12 selected)

Both slide in/out with CSS transitions and scroll to their respective
sections on tap. Only rendered on mobile viewports (max-width: 639px).

app/openspec/changes/mobile-course-selection-floating-banner/specs/mobile-course-banner/spec.md

@@ -0,0 +1,64 @@
+## ADDED Requirements
+
+### Requirement: Banner appears when course selection scrolls out of view
+The system SHALL display a floating summary banner fixed to the bottom of the viewport on mobile when the course selection section is no longer visible in the viewport.
+
+#### Scenario: User scrolls above course selection on mobile
+- **WHEN** the user is on a mobile viewport (max-width: 639px) and scrolls up until the course selection section leaves the viewport
+- **THEN** a fixed banner SHALL slide in from the bottom of the screen displaying course selection progress
+
+#### Scenario: User scrolls back down to course selection on mobile
+- **WHEN** the banner is visible and the user scrolls down until the course selection section re-enters the viewport
+- **THEN** the banner SHALL slide out of view (downward)
+
+#### Scenario: User is on tablet or desktop
+- **WHEN** the viewport width is greater than 639px
+- **THEN** the banner SHALL NOT render at all
+
+### Requirement: Banner displays course selection progress
+The banner SHALL show the number of elective sets that have a selected course out of the total 12 sets.
+
+#### Scenario: Some courses selected
+- **WHEN** the banner is visible and the user has selected courses in 5 of 12 elective sets
+- **THEN** the banner SHALL display "5 / 12 courses selected"
+
+#### Scenario: No courses selected
+- **WHEN** the banner is visible and no courses have been selected
+- **THEN** the banner SHALL display "0 / 12 courses selected"
+
+#### Scenario: All courses selected
+- **WHEN** the banner is visible and all 12 elective sets have selections
+- **THEN** the banner SHALL display "12 / 12 courses selected"
+
+#### Scenario: Selection count updates reactively
+- **WHEN** the user selects or deselects a course while the banner is visible
+- **THEN** the banner count SHALL update to reflect the new selection count
+
+### Requirement: Banner animates in and out
+The banner SHALL animate its appearance and disappearance using a vertical slide transition from the bottom.
+
+#### Scenario: Banner slides in
+- **WHEN** the course selection section scrolls out of the viewport on mobile
+- **THEN** the banner SHALL transition from `translateY(100%)` to `translateY(0)` over 200ms with ease-out timing
+
+#### Scenario: Banner slides out
+- **WHEN** the course selection section scrolls back into the viewport on mobile
+- **THEN** the banner SHALL transition from `translateY(0)` to `translateY(100%)` over 200ms with ease-out timing
+
+### Requirement: Tapping banner scrolls to course selection
+The banner SHALL be tappable. Tapping it SHALL smoothly scroll the page so the course selection section is visible.
+
+#### Scenario: User taps the banner
+- **WHEN** the banner is visible and the user taps anywhere on it
+- **THEN** the page SHALL smooth-scroll to bring the course selection section into view
+
+#### Scenario: Banner hides after scroll completes
+- **WHEN** the user taps the banner and the page scrolls to the course selection section
+- **THEN** the banner SHALL slide out as the course selection section becomes visible (via the standard intersection trigger)
+
+### Requirement: Banner renders above all other content at bottom
+The banner SHALL use `position: fixed` with `bottom: 0` and `z-index: 1000` to ensure it layers above all other page content at the bottom of the viewport.
+
+#### Scenario: Banner overlaps page content at bottom
+- **WHEN** the banner is visible
+- **THEN** it SHALL be rendered at `position: fixed; bottom: 0` spanning the full viewport width, above all other elements