## ADDED Requirements

### Requirement: Mobile-first responsive layout
The app SHALL adapt its layout to three viewport breakpoints: mobile (<640px), tablet (640–1024px), and desktop (>1024px). On mobile, all panels SHALL stack vertically in a single column. On tablet and desktop, the layout SHALL use two columns: specialization panel on the left and course panel on the right.

#### Scenario: Mobile viewport
- **WHEN** the viewport width is less than 640px
- **THEN** the layout SHALL display as a single column with the specialization panel above the course panel, both full-width

#### Scenario: Tablet viewport
- **WHEN** the viewport width is between 640px and 1024px
- **THEN** the layout SHALL display two columns: specialization panel (300px) on the left, course panel (remaining width) on the right

#### Scenario: Desktop viewport
- **WHEN** the viewport width is greater than 1024px
- **THEN** the layout SHALL display two columns with the same structure as tablet, with additional padding

### Requirement: Notification banners span full width
Mode comparison and mutual exclusion warnings SHALL render as full-width banners above the main panel layout, not inside a specific column.

#### Scenario: Warning banner placement
- **WHEN** a mutual exclusion warning or mode comparison banner is active
- **THEN** the banner SHALL appear between the header/mode toggle and the main content panels, spanning the full container width