940416c
@@ -398,7 +398,6 @@
the same line (#4888).
  - `.bare`
  - `.foot`
  - `.grow`
  - `.hide-lg`
  - `.hide-sm`
  - `.js-only`
  - `.mark`
@@ -410,7 +409,6 @@
the same line (#4888).
  - `.num`
  - `.reduced`
  - `.shell`
  - `.shell-wide`
  - `.skip`
  - `.small`
  - `.spacer`
@@ -418,7 +416,6 @@
the same line (#4888).
  - `.stack`
  - `.stack-tight`
  - `.topbar`
  - `.topbar-tools`
  - `.truncate`
  - `.wordmark`
@@ -462,7 +459,6 @@
the same line (#4888).
  - `.timeline`
  - `.tl-dot`
  - `.toast-body`
  - `.topbar-search`
  `.split` is the one two-column page: main, then an `<aside>` rail of 260px that sticks from 960px. `data-rail="wide"` on it (the studio's home and an app's page) widens the rail to 320px from 900px, drops the top margin, and lets the rail scroll with the page, since a column of cards runs taller than a screen
- **`style/components.ts`, settings rows** — a list whose rows are settings (limits, capacity): the `<ul class="list setting-list">` lets title and meta wrap instead of ellipsizing, and a row's controls take their own line under 640px. `.row-fields` is the form in that row's trail (input, Save, Default): always visible, never hover-gated, wrapping under the text before it would clip. Use both for any page whose rows show a name, a current value, and a control to change it; use `.row-actions` only for secondary actions (delete, wake, pin, revoke). Flags, telemetry, cloud, people, crew roles and subscription headroom/budget use `.row-fields`. Classes:
@@ -0,0 +1,8 @@
# Page shell
The chrome every page sits in: the sticky top bar, the main column and the footer, drawn by `page()` in `src/web/layout.ts` (the top bar by `topbar()`, its search by `searchBar()`). Rules live in `src/web/style/base.ts`, the search field's in `src/web/style/components.ts`.
- `.topbar-tools` — the top bar's right-hand group (search, Asks, the new and user menus): one row that may shrink but never wraps, its bare `a.small` links 44px tall.
- `.topbar-search` — the top bar's search form: an icon, a borderless input and its `/` key hint in one bordered pill, the border taking the accent on focus. Shown from 720px; below that the icon button carries search.
- `.hide-lg` — shown under 720px, hidden from 720px: the narrow-screen stand-in for something `.hide-sm` shows on wide screens (the search icon button beside `.topbar-search`).
- `.shell-wide` — on `<main class="shell">` when a page passes `wide`: from 1200px the column drops its reading width and keeps a 24px gutter, for the one layout that gains from every pixel (a tree beside a file).
		@@ -398,7 +398,6 @@ the same line (#4888).
398	398	- `.bare`
399	399	- `.foot`
400	400	- `.grow`
401		- `.hide-lg`
402	401	- `.hide-sm`
403	402	- `.js-only`
404	403	- `.mark`
		@@ -410,7 +409,6 @@ the same line (#4888).
410	409	- `.num`
411	410	- `.reduced`
412	411	- `.shell`
413		- `.shell-wide`
414	412	- `.skip`
415	413	- `.small`
416	414	- `.spacer`
		@@ -418,7 +416,6 @@ the same line (#4888).
418	416	- `.stack`
419	417	- `.stack-tight`
420	418	- `.topbar`
421		- `.topbar-tools`
422	419	- `.truncate`
423	420	- `.wordmark`
424	421
		@@ -462,7 +459,6 @@ the same line (#4888).
462	459	- `.timeline`
463	460	- `.tl-dot`
464	461	- `.toast-body`
465		- `.topbar-search`
466	462
467	463	`.split` is the one two-column page: main, then an `<aside>` rail of 260px that sticks from 960px. `data-rail="wide"` on it (the studio's home and an app's page) widens the rail to 320px from 900px, drops the top margin, and lets the rail scroll with the page, since a column of cards runs taller than a screen
468	464	- `style/components.ts`, settings rows — a list whose rows are settings (limits, capacity): the `<ul class="list setting-list">` lets title and meta wrap instead of ellipsizing, and a row's controls take their own line under 640px. `.row-fields` is the form in that row's trail (input, Save, Default): always visible, never hover-gated, wrapping under the text before it would clip. Use both for any page whose rows show a name, a current value, and a control to change it; use `.row-actions` only for secondary actions (delete, wake, pin, revoke). Flags, telemetry, cloud, people, crew roles and subscription headroom/budget use `.row-fields`. Classes:
		@@ -0,0 +1,8 @@
	1	# Page shell
	2
	3	The chrome every page sits in: the sticky top bar, the main column and the footer, drawn by `page()` in `src/web/layout.ts` (the top bar by `topbar()`, its search by `searchBar()`). Rules live in `src/web/style/base.ts`, the search field's in `src/web/style/components.ts`.
	4
	5	- `.topbar-tools` — the top bar's right-hand group (search, Asks, the new and user menus): one row that may shrink but never wraps, its bare `a.small` links 44px tall.
	6	- `.topbar-search` — the top bar's search form: an icon, a borderless input and its `/` key hint in one bordered pill, the border taking the accent on focus. Shown from 720px; below that the icon button carries search.
	7	- `.hide-lg` — shown under 720px, hidden from 720px: the narrow-screen stand-in for something `.hide-sm` shows on wide screens (the search icon button beside `.topbar-search`).
	8	- `.shell-wide` — on `<main class="shell">` when a page passes `wide`: from 1200px the column drops its reading width and keeps a 24px gutter, for the one layout that gains from every pixel (a tree beside a file).