## MODIFIED Requirements ### Requirement: Mobile-first responsive layout The app SHALL adapt its layout to two viewport classes: mobile (<768px) and desktop (≥768px). On mobile, all panels SHALL stack vertically in a single column. On desktop, the layout SHALL use a top-to-bottom arrangement of: header + mode toggle + mode comparison banner, a horizontal specialization strip, a global search-progress strip, and a 2-column workspace below containing Top Plans (left) and Schedule (right). The two workspace columns SHALL scroll independently while the spec strip and progress strip SHALL remain fixed at the top of the workspace area. #### Scenario: Mobile viewport - **WHEN** the viewport width is less than 768px - **THEN** the layout SHALL display as a single column with the specialization panel above the Top Plans section above the Schedule section, all full-width #### Scenario: Desktop viewport - **WHEN** the viewport width is 768px or greater - **THEN** the layout SHALL display the horizontal specialization strip across the top, a global progress strip directly below it, and a 2-column workspace below the progress strip with Top Plans on the left and Schedule on the right #### Scenario: Independent column scroll on desktop - **WHEN** the user is on desktop and scrolls inside the Top Plans column - **THEN** only the Top Plans column SHALL scroll while the Schedule column, the progress strip, and the specialization strip SHALL remain in place #### Scenario: Independent column scroll on desktop (Schedule) - **WHEN** the user is on desktop and scrolls inside the Schedule column - **THEN** only the Schedule column SHALL scroll while the Top Plans column, the progress strip, and the specialization strip SHALL remain in place ### 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 specialization strip (desktop) or the specialization panel (mobile), spanning the full container width ## ADDED Requirements ### Requirement: Global search-progress strip on desktop On desktop, the active search progress bar SHALL render as a thin full-width strip directly below the specialization strip and above the workspace columns. It SHALL remain visible from any scroll position within either workspace column. On mobile, the progress bar SHALL remain inside the Top Plans section as today. #### Scenario: Search in progress on desktop - **WHEN** the decision-tree search is running on desktop - **THEN** an animated progress bar SHALL render in a strip between the specialization strip and the workspace columns, showing the iteration count and percent complete #### Scenario: Search complete on desktop - **WHEN** the decision-tree search has completed on desktop - **THEN** the progress bar SHALL no longer animate; the static "Search complete · N explored" or "Search incomplete · cap hit at N" status MAY remain visible inline with the Top Plans header #### Scenario: Search progress on mobile - **WHEN** the decision-tree search is running on mobile - **THEN** the progress bar SHALL render inside the Top Plans section, not in a global strip