svelte-kit-vice/web/routes/blocks/_lib/reset.css

/*
 * The one reset the blocks section needs, for BOTH of its surfaces (the gallery
 * shell and every block's standalone `preview` page) — which is why it is
 * imported from `BootUix`, the bootstrap they share.
 *
 * WHY: the eidos foundation ships no box-model reset; recipes assume the APP
 * provides one. Every other surface in this repo does — `web/routes/uix/uix.css`
 * under `[data-uix-docs]`, `web/routes/active/styles.css` for the app — and the
 * blocks gallery was the one harness built without it (F0).
 *
 * The cost of that omission is not cosmetic. A recipe like `[data-field-control]`
 * declares `inline-size: 100%` + `padding-inline`, so under `content-box` the
 * control renders 30px WIDER than its container: in the newsletter's
 * `1fr auto` row the email control grew past its track and slid under the submit
 * button. Measured, not guessed — field 480 / control 510 here versus 502 / 502
 * on the component docs, which have the reset.
 *
 * The canon-side question (should the foundation own this rather than assume it?)
 * is registered in `docs/process/PLAN-blocks-quality.md` §6.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * The browser's default `body { margin: 8px }`, removed — and it is not a
 * cosmetic call either.
 *
 * The tier's hard rule is that a block is shown A SANGRE: nothing between it
 * and the edge, because a frame changes what the block DOES (a header pinned at
 * `offset: 0` measured 21px off inside a Card). That rule was being broken by
 * the document itself: measured 2026-08-19, every preview rendered at
 * `x: 8, y: 8, w: 1264` inside a 1280 viewport — the composed landing page
 * included, whose README quotes full-bleed numbers.
 *
 * It stayed invisible because every other block's page scrolls anyway, so 16px
 * of extra document height reads as nothing. `app-shell` is where it stops
 * being invisible: a shell that fills the viewport (`100dvh`) plus 16px of
 * margin is a page with a scrollbar and no content to scroll.
 */
body {
	margin: 0;
}

/*
 * The document's typographic anchor — the theme's own `body` style, and the
 * second thing the foundation leaves to the app (the box model was the first).
 *
 * The foundation declares the `@font-face`s and emits the semantic styles
 * (`--style-body-*`, `--style-label-*`, `--style-h1-*` …) but applies none of
 * them to any element: a `Text` or a `Heading` anchors its own family in its
 * recipe, and everything else INHERITS from the document. So any text the canon
 * renders as plain text — the label `<span>` inside a `Sidebar.MenuButton`, a
 * `Sidebar.GroupLabel` — falls to the browser default when the document says
 * nothing. Measured 2026-08-19 on the app-shell preview: `html`, `body`,
 * `[data-sidebar]` and every rail item computed `"Times New Roman"`, next to
 * `Text` nodes in Instrument Sans. The component docs shell anchors its root
 * (`uix.css`, `[data-uix-docs]`); this harness did not, on any of its 19
 * previews.
 *
 * The values are the theme's `body` style, by token — never a family or a
 * size written here — so a theme that redefines its body redefines this too.
 */
body {
	font-family: var(--style-body-font-family);
	font-size: var(--style-body-font-size);
	line-height: var(--style-body-line-height);
	letter-spacing: var(--style-body-letter-spacing);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * The description-list defaults, removed for the same reason as the body
 * margin: the browser indents `dd` by 40px, which reads as an alignment choice
 * nobody made. Measured on the app-shell preview's detail panel, where every
 * value sat a step to the right of its term. Layout in the tier comes from the
 * layout components' props, so a UA margin is noise, not a decision.
 */
dl,
dd {
	margin: 0;
}

/*
 * The description-list defaults, removed for the same reason as the body
 * margin: the browser indents `dd` by 40px, which reads as an alignment choice
 * nobody made. Measured on the app-shell preview's detail panel, where every
 * value sat a step to the right of its term. Layout in the tier comes from the
 * layout components' props, so a UA margin is noise, not a decision.
 */
dl,
dd {
	margin: 0;
}