# ui_kits/mobile/ — Atlas mobile consultation kit

Reference mobile kit for Atlas. This is not a responsive breakpoint of `../app/`; it is a separate phone operating model for consultation and guided actions, but it keeps the same product structure as the desktop app.

Open [`index.html`](index.html) directly when designing phone-sized Atlas surfaces.

## Operating model

- **Consultation first:** current state for work groups, functions, people, reporting line, event feed, and compact history.
- **Guided actions only:** mobile actions use an action sheet, impact preview, confirmation, and ledger-event outcome.
- **No full-edit mode:** no matrix editing, no bulk structural changes, no dense cost-table maintenance, and no full desktop event drawer on phone.
- **Same visual system:** Flush, Plum, Newsreader, Hanken Grotesk, IBM Plex Mono, status chips, and ledger language are reused from `../../styles.css`.
- **Global context controls:** search and time machine are icon actions in the topbar. The selected date applies to every mobile surface.
- **Generic workflow patterns:** do not name future domain-specific features until the product owns them.

## Included surfaces

| Surface | Role |
|---------|------|
| `MobileTopbar` | App mark, current date context, search icon, and global time-machine icon |
| `MobileBottomNav` | Three desktop-aligned consultation routes: Work groups, Functions, People |
| `MobileCommandSearch` | Full-screen grouped search and jump targets |
| `MobileSummary` | Work-group/function/person metrics and compact allocation status |
| `MobileDetailSheet` | Person/detail inspection with ledger context |
| `MobileActionSheet` | Guided action with confirmation |
| `MobileDecisionQueue` | Pending actions as review rows, not a table |
| `MobileImpactPreview` | Before/after and affected-scope preview before confirmation |
| `MobileEventFeed` | Chronological ledger feed replacing dense tables |
| `MobileDateScrubber` | Global compact time-machine sheet, never a dedicated nav tab |

## Touch contract

- Minimum touch target: 44px.
- Default body copy: at least 14px.
- Metadata: at least 12px.
- Cards keep light but visible spacing: 14px internal padding, 10px card-to-card gap, and 14px screen rhythm.
- Bottom navigation: 64px plus safe-area inset.
- Sheets are full-width and bottom anchored.
- Hover-only affordances are forbidden.

## Regression check

Run from the project root:

```bash
node tests/mobile-contract.test.js
```