dashboard design changes

AGENTS.md

@@ -72,8 +72,16 @@ Gray is the accent. The **only** colour permitted is semantic: success, warning,
   and with it on the client → an unpatchable class mismatch. Setting status on blur/submit
   (the normal path) is unaffected. Don't server-render a field that already has a status.
 - Component keys in `defineTheme({components})` are inconsistently cased: `text-input` but
-  `progressbar`. The CLI warns on unknown keys — **treat any `⚠ Unknown component` from
-  `theme:build` as an error**, it means the override silently did nothing.
+  `progressbar`. The CLI warns on unknown keys, but that warning is **not** reliable in
+  either direction:
+  - A *misspelled* key (`textinput`) is dropped silently — the CSS is never emitted.
+  - A key the CLI doesn't know but Astryx *does* use (`table-cell`, `table-header-cell`)
+    warns yet still emits correctly.
+  So never trust the warning alone. After any `components` change, grep the generated
+  `src/theme/loyaly.css` for the rule, then confirm the computed style in the browser.
+  Valid targets are whatever `themeProps('...')` is called with in `dist/<Component>/*.js`.
+- `StyleOverrides` supports structural pseudo-classes, not just interaction ones —
+  `':first-child'` emits correctly (used for the table first-column lead-in).
 
 ## Conventions
 - Follow the Astryx rules above: no raw `<div>` for layout, no hardcoded hex/px, component
@@ -81,4 +89,24 @@ Gray is the accent. The **only** colour permitted is semantic: success, warning,
 - `src/lib/icons.ts` is the single icon map. Only the 26 semantic names resolve via
   `<Icon icon="search"/>`; everything else is `<Icon icon={ICONS.stores}/>`. Never import a
   lucide icon directly into a feature file.
+
+## Settings spacing contract
+Every Settings screen renders inside `src/features/settings/SettingsPage.tsx`. Do not add
+page padding in an individual settings page — change the container instead.
+
+| | value | why |
+|---|---|---|
+| Horizontal | 32px (`paddingInline={8}`) | clears the sub-nav and the Copilot rail |
+| Top | 32px (`paddingBlock={8}`) | title never touches the header |
+| Bottom | 48px (`className="pb-12"`) | last card is never flush to the fold |
+| Header → body | 32px (`gap={8}`) | title block reads as its own layer |
+| Between body blocks | 24px (`gap={6}`) | cards, tables, toolbars |
+
+`SpacingStep` stops at 10 (40px) and Stack has no `paddingBlockEnd`, which is why the 48px
+bottom goes through the Tailwind bridge — `pb-12` still resolves to `--spacing-12`, so no
+raw pixel value enters the codebase. It sits in the `utilities` layer, which the cascade
+puts after `astryx-base`, so it wins over `paddingBlock` without `!important`.
+
+Card padding (24px) and table cell padding (12px, 20px first-column lead-in) are set once
+in `loyalyTheme.ts` so every module agrees — not per page.
 <!-- LOYALY:END -->