## 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