# ADR-0003: Mobile lives in its own React tree (no shared layout components)

**Status:** Accepted (Phase 2; Anti-Pattern 8 enforcement)

## Context

A common temptation in cross-form-factor apps is to share components between
desktop and mobile via prop-driven branching (`<TakeCard variant="mobile">`).
This collapses two design intents into one branch-laden component and
guarantees that one form factor's edge case breaks the other. The mobile
companion's design package is intentionally a different aesthetic: OLED true
black, SF Pro stack, swipe gestures, slimmer cards.

## Decision

Mobile (`@recoil/mobile`) and desktop (`@recoil/desktop`) are separate
package trees with separate React entry points. Layout components
(`<TakeCard>`, `<NavRow>`, `<ChatPanel>`, etc.) are NOT shared. The only
shared surface is `@recoil/design-system`: leaf glyphs (Crown, KeeperGlyph,
MediaGlyph) — pure SVG with no layout assumptions — and the `aspectClass()`
helper. Mobile imports `@recoil/design-system/mobile-tokens.css`; desktop
imports `@recoil/design-system/tokens.css`. The two stylesheets are siblings,
not a base + override.

## Consequences

Each tree evolves independently — a desktop refactor cannot regress mobile,
and vice versa. The cost: glyph-level changes still propagate (intentional —
they're pure data), but card-level changes have to be replicated when both
forms need them. We accept that cost because the design intents diverge:
they should look different, and the component code should reflect that.