## ADDED Requirements

### Requirement: Mobile Breakpoint System
The system SHALL apply mobile-specific styles at viewports below 768px width.

#### Scenario: Form stacking on mobile
- **GIVEN** a multi-column form layout
- **WHEN** the viewport width is less than 768px
- **THEN** all form fields stack vertically in a single column
- **AND** grid layouts use `grid-template-columns: 1fr`

#### Scenario: Dialog sizing on mobile
- **GIVEN** a dialog or modal
- **WHEN** the viewport width is less than 768px
- **THEN** the dialog fits within the viewport width (maximum 100vw - 32px padding)
- **AND** the dialog content is scrollable if it exceeds the viewport height

#### Scenario: Page padding on mobile
- **GIVEN** any page content
- **WHEN** the viewport width is less than 768px
- **THEN** horizontal padding is reduced to 16px or less
- **AND** content does not horizontally scroll

### Requirement: Touch Target Minimum Size
The system SHALL ensure all interactive elements meet minimum touch target sizes.

#### Scenario: Button touch targets
- **GIVEN** any button or clickable element
- **THEN** it has a minimum height of 44px
- **AND** it has a minimum width of 44px where applicable

#### Scenario: Link touch targets
- **GIVEN** any text link in a list or navigation
- **THEN** the clickable area has a minimum height of 44px
- **AND** adjacent links have minimum 8px spacing

### Requirement: Mobile Page Headers
The system SHALL provide consistent page headers on mobile with back navigation.

#### Scenario: Page header on mobile
- **GIVEN** any page other than the dashboard
- **WHEN** viewed on mobile
- **THEN** the page displays a header with:
  - A back button (where applicable)
  - The page title
  - Contextual action buttons (if any)

#### Scenario: Back button navigation
- **GIVEN** a page with a back button on mobile
- **WHEN** the user taps the back button
- **THEN** the app navigates to the previous page
- **AND** if no previous page exists, it navigates to the dashboard

### Requirement: Active States for Touch
The system SHALL provide visual feedback when touchable elements are tapped.

#### Scenario: Button active state
- **GIVEN** a button on a touch device
- **WHEN** the user taps the button
- **THEN** a visual active state is displayed (e.g., background color change)
- **AND** the active state persists for the duration of the tap

#### Scenario: Card active state
- **GIVEN** a clickable card on a touch device
- **WHEN** the user taps the card
- **THEN** a visual active state is displayed
- **AND** the active state is distinct from the hover state