UI improvements: responsive layout, unified panels, credit legend

- Add responsive 2-panel layout (mobile single-col, tablet/desktop grid)
- Unify specialization ranking with credit bars, status badges, and
  expandable allocation breakdowns (remove standalone ResultsDashboard)
- Inline decision tree ceiling data on course buttons with spec counts
- Add Clear All button to reset all course selections
- Add collapsible CreditLegend explaining bars, badges, and limits
- Extract ModeComparison and MutualExclusionWarnings to Notifications
- Add useMediaQuery hook with matchMedia-based breakpoint detection

openspec/changes/ui-improvements/specs/responsive-layout/spec.md

@@ -0,0 +1,23 @@
+## 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