docs: README with install, usage, and development guide

README.md

@@ -0,0 +1,75 @@
+# Outlook Relook
+
+A Chrome extension that reskins Outlook Web App (outlook.office.com) with minimalist themes and granular control over visual clutter.
+
+## Features
+
+- **Switchable themes:** Swiss (Helvetica minimalism) and Material (clean, subtle elevation)
+- **Light & Dark modes** with system preference detection
+- **~40 granular toggles** for density, element hiding, readability, and behavior
+- **MutationObserver** suppresses dynamically injected clutter (Copilot, banners, suggested replies)
+- **Behavior patches:** auto-collapse ribbon, suppress contact hover cards, auto-advance after delete, toast management
+- **Gmail-style keyboard navigation:** j/k to move, x/Space to multi-select, # delete, e archive, Shift+i/u read/unread, v move
+- **Quick actions:** "Mark all as read" button, Ctrl+Shift+K folder jump
+- **Settings sync** across Chrome instances via chrome.storage.sync
+- **Export/Import/Reset** settings
+
+## Install (Development)
+
+1. Clone this repo
+2. Open `chrome://extensions` in Chrome
+3. Enable "Developer mode" (top-right toggle)
+4. Click "Load unpacked" and select this directory
+5. Open [outlook.office.com](https://outlook.office.com) — the extension activates automatically
+
+## Usage
+
+Click the extension icon to open the settings panel. Changes apply immediately — no page reload needed.
+
+### Keyboard Shortcuts
+
+**Message list (Gmail-style):**
+- `j` / `Down Arrow` — Next message
+- `k` / `Up Arrow` — Previous message
+- `x` / `Space` — Toggle select
+- `Shift+Down` / `Shift+Up` — Extend selection
+- `#` — Delete selected
+- `e` — Archive selected
+- `Shift+i` — Mark read
+- `Shift+u` — Mark unread
+- `v` — Move to folder
+- `Escape` — Deselect all
+- `Enter` / `o` — Open message
+
+**Global:**
+- `Ctrl+Shift+K` (or `Cmd+Shift+K` on Mac) — Quick folder jump
+
+## Development
+
+No build step. Edit files, reload the extension at `chrome://extensions`, refresh the OWA tab.
+
+- `themes/base.css` — density/spacing/hiding rules (always loaded)
+- `themes/swiss.css` / `themes/material.css` — theme-specific styles
+- `content/` — content scripts (observer, behavior, injector)
+- `popup/` — settings panel
+- `selectors-test.html` — offline selector verification
+
+### Selector Strategy
+
+OWA uses obfuscated class names. Selectors prioritize `aria-label`, `data-*`, and `role` attributes over class names. See `content/selectors.js` for the registry.
+
+When selectors break after an OWA update, check the console for `[Outlook Relook]` warnings, inspect the live DOM, and update `selectors.js`.
+
+## Adding a New Theme
+
+1. Create `themes/yourtheme.css` — define the same CSS custom properties as `swiss.css`
+2. Add an option to the theme dropdown in `popup/popup.html`
+3. That's it — the content script handles injection automatically
+
+## Adding a New Toggle
+
+1. Add the key and default to `DEFAULTS` in both `content/settings-defaults.js` and `popup/popup.js`
+2. Add the toggle HTML to the appropriate section in `popup/popup.html`
+3. If CSS-based: add a `data-or-*` attribute mapping in `content/content.js` and the CSS rule in `themes/base.css`
+4. If observer-based: add a selector entry to `content/selectors.js` and a mapping in `content/observer.js`
+5. If behavior-based: add a setup function in `content/behavior.js`