Add a toggleable Windows 7 (7.css) skin behind a new skin setting

Evaluation branch: a full Aero skin, including frameless windows with our own
title bar, switchable against the existing modern look.

The app already had a four-axis runtime skinning mechanism and zero component
stylesheets, so the skin is one new setting plus one stylesheet section rather
than a parallel UI. The key move is cascade order: 7.css is imported into a
`skin` layer ABOVE Tailwind's `utilities`, so its bare element rules outrank
the ~1900 inline utility classes already in the templates. Template changes are
limited to additive, skin-inert hooks (ARIA roles, `has-scrollbar`,
`w7-toolbar`, `w7-btn`).

- styles.css: explicit layer order, `7.css/dist/7.scoped.css` via `layer(skin)`,
  a token bridge re-pointing the existing semantic tokens at Win7 values (no new
  tokens, so `@theme inline` is untouched), a hand-authored dark Win7 palette,
  and neutralizers that `revert-layer` 7.css's dialog-button metrics back to the
  utility layer. Neutralizers must live inside `skin`, not `skinfix` —
  `revert-layer` only reaches `utilities` from one layer up.
- Frameless chrome: `chromeOptions(skin)` is now the single place either skin's
  frame is decided. `titleBarStyle: "hidden"` on every platform, which is also
  the only way to drop the macOS traffic lights. New `title-bar` component
  mounted by all three window roots.
- Window controls over RPC (minimize/toggle-maximize/close/is-maximized), served
  per window kind so the X reuses each one's existing close path — editors still
  get their dirty prompt. electrobun has no maximize event, so the state is
  derived from `resize`; double-click-to-maximize is implemented here too.
- Font: Noto Sans vendored (OFL-1.1) under ui/src/fonts, since Segoe UI is
  absent off Windows and not redistributable.

Verified: backend `tsc --noEmit` clean, `bun run build:ui` clean (486 kB initial,
under the 500 kB budget), app launches with the skin active and no console
errors. The rendered result has not been eyeballed — screen capture and
accessibility are both denied to the shell on this machine.

Co-Authored-By: Claude <noreply@anthropic.com>

docs/architecture.md

@@ -260,3 +260,74 @@ toolbars deliberately stay on `--background`. Accent tones: one
 pixel-identical to the old neutral hover. Text-size levels set `--row-h`,
 `--list-font` etc. per `data-text` attribute, consumed via `h-(--row-h)` /
 `text-(length:--list-font)` arbitrary utilities.
+
+### Skins (`settings.skin`: `modern | win7`)
+
+A fifth theming axis, and the only one that is a **class** (`.win7` on
+`<html>`) rather than a `data-*` attribute — `7.css/dist/7.scoped.css` is
+precompiled against a literal `.win7`, so the name is not ours to pick.
+Default `modern` = class absent, matching the delete-when-default rule.
+
+**Cascade** (`ui/src/styles.css`, first lines): an explicit
+`@layer theme, base, components, utilities, skin, skinfix;` statement precedes
+both imports. 7.css is imported with `layer(skin)`, i.e. **above `utilities`**,
+so a bare `button` rule in 7.css outranks `rounded-md` on that same button —
+that inversion is what reskins ~1900 inline utility classes with no template
+edits. Consequences: (1) any utility later added to a `button`/`input`/
+`select`/`textarea`/`table` silently loses under the skin; (2) neutralizers
+that want the Tailwind value back must sit **inside `@layer skin`**, not
+`skinfix` — `revert-layer` rolls back one layer, so from `skin` it lands on
+`utilities`, but from `skinfix` it lands back on 7.css and does nothing.
+`skinfix` is for rules that state an explicit value (`.w7-btn`).
+
+**Token bridge** (bottom of styles.css): `:root.win7` re-points the existing
+semantic tokens at Win7 values, so utilities Tailwind still controls come out
+right too. It adds NO new tokens on purpose — a new colour would need another
+`@theme inline` line. The Win7 surface ramp **inverts** the modern one:
+`--background` (content panes) is Explorer white and `--chrome` is the darker
+`#f0f0f0` window surface. `--radius: 5px` so `rounded-md`
+(`calc(--radius - 2px)`, 74 uses) lands exactly on 7.css's 3px `--w7-el-bdr`.
+`--primary`/`--ring` are deliberately left alone so the accent axis stays live;
+`:root.win7[data-accent]` feeds it to `--w7-w-bg`, which is authentic (Win7
+shipped "Window Color"). Dark Win7 is hand-authored (Microsoft never shipped
+one) as ~20 `--w7-*` overrides, duplicated forced + system like every other
+dark block. `--w7-font` is restated as a px `font` shorthand so `data-text`
+still scales and 7.css's `pt` shorthand stops resetting weight/line-height.
+
+**Markup hooks** are additive and inert under `modern`: `role="progressbar"`
+(+aria) on the transfer bars, `has-scrollbar` on scroll containers (7.css only
+styles `::-webkit-scrollbar` under that class), `w7-toolbar` on the three
+header rows (their buttons go flat — Explorer's command bar was flat, unlike
+dialog push buttons), `w7-btn` on the 10 dialog action buttons.
+
+**Font**: Segoe UI is absent off Windows and not redistributable. Noto Sans —
+the substitute 7.css itself names — is vendored (OFL-1.1, from
+`@fontsource/noto-sans`) into `ui/src/fonts/`; under `src/` and not `public/`
+so esbuild emits it hashed into `media/` and rewrites the `url()`.
+
+**Window chrome**: `chromeOptions(skin)` in `src/bun/windows.ts` is the single
+place either skin's frame is decided, spread by both the main window and
+`openSecondaryWindow`. `win7` uses `titleBarStyle: "hidden"` on **every**
+platform — that clears `Titled` from the Cocoa style mask, which is also the
+only way to remove the macOS traffic lights. The webview then draws the whole
+frame via `ui/src/app/title-bar/title-bar.ts` (7.css's `.title-bar` >
+`.title-bar-text` + `.title-bar-controls`, buttons keyed by `aria-label`),
+mounted by all three window roots. Because `titleBarStyle` is fixed at
+construction, **a skin change only reaches the frame on the next window open**;
+the CSS half flips live, and the options row says so. `IS_WIN7_CHROME` in
+`platform.ts` reads the preload-baked `__APP_SKIN` (settings resolve too late
+for layout) and forces `IS_MAC_CHROME` false, since there are no traffic
+lights to reserve `pl-24` for.
+
+**Window controls**: new `windowMinimize` / `windowToggleMaximize` /
+`windowClose` / `windowIsMaximized` requests, built by
+`windowControlHandlers(getWindow, onClose?)` in `rpc-handlers.ts` and served by
+all three window kinds (each passing a late-bound getter for its own window —
+the window takes the rpc in its constructor, same reason `events` is
+late-bound). `onClose` is overridden per window kind so the X reuses the
+existing close path: editors run their dirty prompt, the manager runs
+`managerClose`, main falls through to the cancellable `before-quit` guard.
+electrobun emits **no maximize event**, so `trackMaximizeState` derives it from
+`resize` + the synchronous `isMaximized()` and pushes `windowState` — which
+also covers Aero Snap and Win+Up. Double-click-to-maximize is likewise absent
+from electrobun's drag regions and is implemented in the title-bar component.

docs/gotchas.md

@@ -28,6 +28,21 @@ touching the adjacent code.
 - Tailwind v4 canonical class names: `wrap-break-word` not `break-words`,
   `accent-primary` not `accent-[var(--primary)]`, `z-60` not `z-[60]`.
   Every color used in a template must resolve through `@theme inline`.
+- **The win7 skin layer outranks Tailwind utilities.** 7.css is imported
+  `layer(skin)`, ordered above `utilities`, so any utility you add to a
+  `button`/`input`/`select`/`textarea`/`table` is silently dead under that
+  skin. If it matters, neutralize in the `@layer skin` block at the bottom of
+  styles.css — and note `revert-layer` only reaches `utilities` from **inside
+  `skin`**; used from `skinfix` it falls back onto 7.css and is a no-op. This
+  bit once already.
+- `@import … layer(name)` works through `@tailwindcss/postcss` (it wraps the
+  imported AST), but the **deep path is mandatory**: 7.css ships no `exports`
+  map and Tailwind's resolver reads only `style`/`mainFields`, so a bare
+  `@import "7.css"` resolves to nothing. Use `7.css/dist/7.scoped.css`.
+- Stylesheet `url()` must resolve at BUILD time: assets referenced from
+  `styles.css` live under `ui/src/` (esbuild emits them hashed into `media/`
+  and rewrites the url), NOT `ui/public/` — a public path fails the build with
+  "Could not resolve".
 
 ## Electrobun
 
@@ -56,6 +71,13 @@ touching the adjacent code.
   attributes before first paint (`buildPreload`), (3) `ui/src/index.html`
   carries an inline `<style>` with the html background per theme — its oklch
   values MUST stay in sync with the `--background` tokens in styles.css.
+  The win7 skin adds a **fourth value to keep in sync**: `buildPreload` also
+  bakes the `.win7` class, and index.html carries a matching `html.win7` arm
+  for all four theme states. Miss it and every win7 window flashes white.
+- **`titleBarStyle` is construction-time only.** Switching skin cannot
+  re-frame a live window; `chromeOptions` is read once per `new
+  BrowserWindow`. The options row tells the user to reopen. Don't "fix" this
+  by recreating the main window — that would drop every session and tab.
 - Dev vs prod URL: `getMainViewUrl()` resolves the ng-serve dev server only
   when `DEV_SERVER_URL` is set AND the updater channel is `dev` AND the
   server answers a HEAD request; secondary windows must reuse the resolved