Adom UI Design System

@@ -316,31 +316,59 @@ genuinely need to react to it, and then branch on `source`. **Mount the panel in a container with exactly 16px of horizontal padding, and nothing else.**  ```-panel border-box  ==  <the container you mount into>.clientWidth - 32     (+/- 2)+the panel sits 16px inside its pane on BOTH sides      (+/- 2) ``` -**⛔ NEVER QUOTE AN ABSOLUTE TARGET, AND NEVER MEASURE AGAINST THE DOCUMENT.** Two versions of-this rule were wrong before this one, both because of scrollbars:--1. I told three apps "712 at his pane" by reasoning from `innerWidth` (744) when the check-   read `clientWidth` (734, excluding the document scrollbar), so the real target was 702.-   kicad read the implementation before acting and caught it; had it coded to my number it-   would have shipped a 10px miss and failed the very row it was trying to pass.-2. Measuring against `documentElement` at all was the deeper mistake. **It silently assumes-   the PAGE scrolls.** An `app-shell` dashboard, which is the structure this pack prescribes,-   is a `position:fixed` shell with a 44px header and the scroller on an inner `.app-body`, so-   there is no document scrollbar: `clientWidth` is the full pane and the inner scrollbar is-   charged to content instead. **A correctly built app-shell page failed by exactly one-   scrollbar width, and only pages that happened to scroll at document level passed.** The-   check was failing the apps that followed the skill. Found by parts-search, from reading the-   implementation rather than the prose, and reproduced before the fix: an app-shell test page-   measured `documentElement` 1673 against a host of 1658, a 15px miss on a panel with a-   perfect 16px gutter.--So the yardstick is **the panel's own containing block**, which is scrollbar-agnostic, works-identically for both structures, and still catches the real defect: a page adding its own-padding around the mount point. Negative-tested on an app-shell page with an inner scroller:-16px passes, 50px red, 0px red, restored green.+**The contract is about where the panel's EDGES land, not about which element carries the+padding.** Put the 16px wherever suits your page: on the mount div, or on a shared outer+container that also holds the regions below, or via one `--gutter` token used in both places.+All three pass.++**⛔ THREE VERSIONS OF THIS CHECK WERE WRONG BEFORE THIS ONE, AND EVERY ONE WAS CAUGHT BY AN+APP READING THE IMPLEMENTATION RATHER THAN MY PROSE.** They are worth listing, because they+share a cause: each asked some NAMED ELEMENT how wide the world is, and so encoded a page+structure the fleet was never promised.++0. **`documentElement.clientWidth`** assumes the PAGE scrolls. An app-shell dashboard has no+   document scrollbar, so a correctly built page failed by exactly one scrollbar width while+   looser pages passed. Found by parts-search, which was one command from restructuring its+   app to satisfy it.+1. **The mount div's `clientWidth`** could never pass for ANY app. The module's own CSS makes+   the panel fill its host exactly (`.anp{width:100%}`, margin top/bottom only), so panel+   width == host.clientWidth by construction and the miss was a constant 32 at every width.+   Padding the mount container shrinks host and panel together, so no page could fix it; only+   module-owned CSS could. kicad caught it by measuring, and held its slot rather than spend+   John's shell pasting a failure caused by the checker.+2. Separately, I told four apps **"712 at his pane"**, reasoning from `innerWidth` (744) when+   the code read `clientWidth` (734). The real number was 702. Never quote an absolute target;+   compute it.++pup caught the mount-div version too, from the implementation alone, and specifically before+six apps adopted a container pattern I had recommended that would have red-lined them all.++**The fix is to stop naming an element.** Find the nearest scrolling ancestor (or the+document), and check both of the panel's insets against its client box. Structure-agnostic: it+does not care which element carries the padding or how many wrappers sit between.++**Tested across every structure in the fleet before shipping,** which is the step that was+missing the previous two times:++| page structure | verdict |+|---|---|+| simple page, padding on the mount div | **pass** |+| app-shell, inner scroller, padding on the mount div | **pass** |+| shared outer container carries the gutter, mount flush | **pass** |+| a wrapper adding 40px on top of a correct mount div | **red** |+| no gutter anywhere | **red** |++**⛔ WHEN A CHECK FAILS, ASK WHETHER IT IS FAILING THE CORRECT IMPLEMENTATIONS.** pup's+framing, and it is the sharpest hazard on this page: a check that is wrong at random is noise,+but a check that is systematically wrong about the WELL-BUILT cases actively teaches the fleet+to break itself, because the fastest way to go green is to adopt the looser structure. Version+0 above was exactly that. And the cost of a wrong check is not only a false verdict: it is the+real damage apps do to themselves complying with it.++  This is not cosmetic. Four conformant apps measured at the SAME 744px pane reported panel widths of **734, 735, 702 and 694**, because each page put a different amount of its own