move docs to docs/ folder, merge architecture files, update references

docs/UI-ASSETS.md

@@ -0,0 +1,67 @@
+# UI Assets Structure
+
+All UI assets are in `src/main/assets/`:
+
+```
+assets/
+├── apps/                    # System apps (RML documents)
+│   ├── home/home.rml        # Home screen launcher
+│   ├── dialer/dialer.rml    # Phone dialer
+│   ├── messages/            # Messages app
+│   ├── contacts/            # Contacts app
+│   ├── settings/            # Settings app
+│   └── browser/             # Web browser
+├── ui/                      # Shared stylesheets
+│   ├── html.rcss            # Base HTML element styles
+│   ├── theme.rcss           # Design tokens (colors, typography)
+│   └── components.rcss      # Reusable UI components
+├── scripts/                 # Lua scripts
+│   └── navigation.lua       # Navigation system
+├── icons/                   # TGA icon files (24x24, 32x32)
+└── fonts/                   # TTF fonts (LatoLatin, Roboto)
+```
+
+## Navigation System
+
+Navigation is handled by `scripts/navigation.lua`:
+
+```lua
+-- Navigate to a screen
+navigateTo('dialer')     -- Push to history, animate forward
+
+-- Go back
+goBack()                  -- Pop from history, animate back
+
+-- Go home
+goHome()                  -- Clear history, return to home
+```
+
+## Element IDs for Testing
+
+Key elements have IDs for automated testing:
+
+| ID | Location | Purpose |
+|----|----------|---------|
+| `dock-phone` | home.rml | Phone dock icon |
+| `dock-messages` | home.rml | Messages dock icon |
+| `dock-contacts` | home.rml | Contacts dock icon |
+| `dock-browser` | home.rml | Browser dock icon |
+| `app-settings` | home.rml | Settings app icon |
+
+## CSS Classes for Navigation
+
+Back buttons use `app-bar-nav` class for automated GoHome:
+```html
+<div class="app-bar-nav btn-icon" onclick="goBack()">
+    <img src="../../icons/back.tga"/>
+</div>
+```
+
+Browser uses `browser-nav-btn` class for its toolbar back button:
+```html
+<div class="app-bar-nav browser-nav-btn" onclick="goBack()">
+    <img src="../../icons/back.tga"/>
+</div>
+```
+
+The test framework's `FindBackButton()` searches for both classes to handle all screen layouts.